diff --git a/packages/themes/package-lock.json b/packages/themes/package-lock.json index 52ece565df..b724e5f5d3 100644 --- a/packages/themes/package-lock.json +++ b/packages/themes/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/themes", - "version": "1.8.0", + "version": "1.9.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/themes", - "version": "1.8.0", + "version": "1.9.0", "hasInstallScript": true, "license": "SEE LICENSE IN LICENSE.txt", "devDependencies": { diff --git a/packages/themes/package.json b/packages/themes/package.json index 31918c15f4..848b67cdea 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -1,6 +1,6 @@ { "name": "@labkey/themes", - "version": "1.8.0", + "version": "1.9.0", "description": "Themes that come bundled with LabKey Server", "files": [ "dist/" diff --git a/packages/themes/styles/scss/labkey/_variables.scss b/packages/themes/styles/scss/labkey/_variables.scss index 3dfb08b229..7c80851356 100644 --- a/packages/themes/styles/scss/labkey/_variables.scss +++ b/packages/themes/styles/scss/labkey/_variables.scss @@ -291,10 +291,10 @@ $lk-page-nav-dropdown-icon-color: $lk-brand-color !default; //The following 4 themes are for the navigation tabs // TODO: This should try to declare a shared color tone or use an adjusted brand color -$lk-page-nav-secondary-tab-bg-color: #73b6e0 !default; -$lk-page-nav-secondary-tab-text-color: $white !default; +$lk-page-nav-secondary-tab-bg-color: #73B6E0 !default; +$lk-page-nav-secondary-tab-text-color: #0B4161 !default; $lk-page-nav-primary-tab-bg-color: $lk-primary-bg-color !default; -$lk-page-nav-primary-tab-text-color: $lk-brand-color !default; +$lk-page-nav-primary-tab-text-color: #0B4161 !default; $lk-page-nav-font-weight: bold !default; $lk-page-nav-height: 36px !default; @@ -367,21 +367,21 @@ $lk-table-condensed-cell-padding: 3px !default; //== Tabs (Bootstrap tabs (Export data set dropdown)) // $lk-nav-tab-primary-bg-color: #F8F8F8 !default; -$lk-nav-tab-primary-text-color: #555555 !default; +$lk-nav-tab-primary-text-color: #0B4161 !default; $lk-nav-tab-secondary-bg-color: transparent !default; -$lk-nav-tab-secondary-text-color: $lk-brand-color !default; +$lk-nav-tab-secondary-text-color: #0B4161 !default; $lk-nav-tab-secondary-hover-bg-color: #EEEEEE !default; -$lk-nav-tab-secondary-hover-text-color: $gray-base !default; +$lk-nav-tab-secondary-hover-text-color: #0B4161 !default; $lk-nav-tab-border-color: #DDDDDD; //== TabStrips // -$lk-active-tab-color: $gray-base !default; +$lk-active-tab-color: #0B4161 !default; $lk-active-tab-bg-color: $white !default; $lk-active-tab-body-bg-color: $lk-active-tab-bg-color !default; -$lk-inactive-tab-color: $gray-base !default; -$lk-inactive-tab-bg-color: #f4f4f4 !default; +$lk-inactive-tab-color: #0B4161 !default; +$lk-inactive-tab-bg-color: #73B6E0 !default; $lk-tabstrip-border-color: #b4b4b4 !default; //== Tool Icons diff --git a/packages/themes/themes/harvest/_variables.scss b/packages/themes/themes/harvest/_variables.scss index 5284d010f0..62ed010d4b 100644 --- a/packages/themes/themes/harvest/_variables.scss +++ b/packages/themes/themes/harvest/_variables.scss @@ -17,6 +17,8 @@ $Harvest-gray-footer-text: #adadad; $Harvest-gray-footer-text-hover: #f9f9f9; $Harvest-white: #FFFFFF; $Harvest-addtl-text: #742A2A; +$Harvest-dark-text: #381A00; +$Harvest-inactive-tab: #FFAC69; $lk-theme-dark-accent: $Harvest-accent; $lk-theme-light-accent: $Harvest-header; @@ -55,8 +57,8 @@ $lk-grid-sort-icon-color: $Harvest-gray-footer-text; //== Header // $lk-page-header-bg-color: $Harvest-header; -$lk-page-header-text-color: $Harvest-page-bkgd; -$lk-page-header-icon-color: $Harvest-page-bkgd; +$lk-page-header-text-color: $Harvest-dark-text; +$lk-page-header-icon-color: $Harvest-dark-text; $lk-page-header-font-hover-color: $Harvest-gray-blue; $lk-page-header-icon-hover-color: $Harvest-gray-blue; $lk-page-header-warning-color: #f5ff00; @@ -70,18 +72,18 @@ $lk-text-link-color-hover: $Harvest-gray-darkest; //== Navigation // $lk-page-nav-bg-color: $Harvest-accent; -$lk-page-nav-text-color: $Harvest-page-bkgd; +$lk-page-nav-text-color: $Harvest-dark-text; $lk-page-nav-active-bg-color: $Harvest-page-bkgd; -$lk-page-nav-active-text-color: $Harvest-accent; +$lk-page-nav-active-text-color: $Harvest-dark-text; $lk-page-nav-dropdown-item-bg-color: $Harvest-page-bkgd; -$lk-page-nav-dropdown-item-text-color: $Harvest-accent; +$lk-page-nav-dropdown-item-text-color: $Harvest-dark-text; $lk-page-nav-dropdown-highlight-item-bg-color: $Harvest-accent; -$lk-page-nav-dropdown-highlight-item-text-color: $Harvest-page-bkgd; +$lk-page-nav-dropdown-highlight-item-text-color: $Harvest-dark-text; $lk-page-nav-dropdown-icon-color: $Harvest-accent; -$lk-page-nav-secondary-tab-bg-color: color.adjust($Harvest-gray-blue, $hue: -10deg, $lightness: 5%); -$lk-page-nav-secondary-tab-text-color: $Harvest-addtl-text; +$lk-page-nav-secondary-tab-bg-color: $Harvest-inactive-tab; +$lk-page-nav-secondary-tab-text-color: $Harvest-dark-text; $lk-page-nav-primary-tab-bg-color: $Harvest-page-bkgd; -$lk-page-nav-primary-tab-text-color: $Harvest-accent; +$lk-page-nav-primary-tab-text-color: $Harvest-dark-text; $lk-nav-dropdown-color: $Harvest-header; //== Panels @@ -98,7 +100,7 @@ $lk-webpart-title-hover-color: $Harvest-anchor-color; //== Tabs (Bootstrap tabs (Export data set dropdown)) // $lk-nav-tab-primary-bg-color: $Harvest-white; -$lk-nav-tab-secondary-text-color: $Harvest-anchor-color; +$lk-nav-tab-secondary-text-color: $Harvest-dark-text; //== Tool Icons // diff --git a/packages/themes/themes/leaf/_variables.scss b/packages/themes/themes/leaf/_variables.scss index ca0242d7c0..73423f0cee 100644 --- a/packages/themes/themes/leaf/_variables.scss +++ b/packages/themes/themes/leaf/_variables.scss @@ -16,6 +16,9 @@ $Leaf-anchor-color: #0479a8; $Leaf-gray-footer-text: #adadad; $Leaf-gray-footer-text-hover: #f9f9f9; $Leaf-white: #FFFFFF; +$Leaf-dark-text: #000000; +$Leaf-secondary-header: #64803C; +$Leaf-inactive-tab: #A6BF86; $lk-theme-dark-accent: $Leaf-accent; $lk-theme-light-accent: $Leaf-header; @@ -54,8 +57,8 @@ $lk-grid-sort-icon-color: $Leaf-gray-footer-text; //== Header // $lk-page-header-bg-color: $Leaf-header; -$lk-page-header-text-color: $Leaf-page-bkgd; -$lk-page-header-icon-color: $Leaf-page-bkgd; +$lk-page-header-text-color: $Leaf-dark-text; +$lk-page-header-icon-color: $Leaf-dark-text; $lk-page-header-font-hover-color: $Leaf-gray-blue; $lk-page-header-icon-hover-color: $Leaf-gray-blue; @@ -67,19 +70,19 @@ $lk-text-link-color-hover: $Leaf-gray-darkest; //== Navigation // -$lk-page-nav-bg-color: $Leaf-accent; -$lk-page-nav-text-color: $Leaf-page-bkgd; +$lk-page-nav-bg-color: $Leaf-secondary-header; +$lk-page-nav-text-color: $Leaf-dark-text; $lk-page-nav-active-bg-color: $Leaf-page-bkgd; -$lk-page-nav-active-text-color: $Leaf-accent; +$lk-page-nav-active-text-color: $Leaf-dark-text; $lk-page-nav-dropdown-item-bg-color: $Leaf-page-bkgd; -$lk-page-nav-dropdown-item-text-color: $Leaf-accent; +$lk-page-nav-dropdown-item-text-color: $Leaf-dark-text; $lk-page-nav-dropdown-highlight-item-bg-color: $Leaf-accent; -$lk-page-nav-dropdown-highlight-item-text-color: $Leaf-page-bkgd; +$lk-page-nav-dropdown-highlight-item-text-color: $Leaf-dark-text; $lk-page-nav-dropdown-icon-color: $Leaf-accent; -$lk-page-nav-secondary-tab-bg-color: color.adjust($Leaf-gray-blue, $hue: -10deg, $lightness: 5%); -$lk-page-nav-secondary-tab-text-color: $Leaf-accent; +$lk-page-nav-secondary-tab-bg-color: $Leaf-inactive-tab; +$lk-page-nav-secondary-tab-text-color: $Leaf-dark-text; $lk-page-nav-primary-tab-bg-color: $Leaf-page-bkgd; -$lk-page-nav-primary-tab-text-color: $Leaf-accent; +$lk-page-nav-primary-tab-text-color: $Leaf-dark-text; $lk-nav-dropdown-color: $Leaf-header; //== Panels // @@ -95,7 +98,7 @@ $lk-webpart-title-hover-color: $Leaf-anchor-color; //== Tabs (Bootstrap tabs (Export data set dropdown)) // $lk-nav-tab-primary-bg-color: $Leaf-white; -$lk-nav-tab-secondary-text-color: $Leaf-anchor-color; +$lk-nav-tab-secondary-text-color: $Leaf-dark-text; //== Tool Icons // diff --git a/packages/themes/themes/mono/_variables.scss b/packages/themes/themes/mono/_variables.scss index c8ff705093..99eec4cf8c 100644 --- a/packages/themes/themes/mono/_variables.scss +++ b/packages/themes/themes/mono/_variables.scss @@ -3,7 +3,7 @@ //== Colors // -$Mono-header: #7f7f7f; +$Mono-header: #757575; $Mono-accent: #4c4c4c; $Mono-page-bkgd: #f7f7f7; $Mono-gray-blue: #dadfe1; @@ -14,6 +14,7 @@ $Mono-anchor-color: #0479a8; $Mono-gray-footer-text: #adadad; $Mono-gray-footer-text-hover: #f9f9f9; $Mono-white: #FFFFFF; +$Mono-inactive-tab: #C2C2C2; $lk-theme-dark-accent: $Mono-accent; $lk-theme-light-accent: $Mono-header; @@ -74,7 +75,7 @@ $lk-page-nav-dropdown-item-text-color: $Mono-accent; $lk-page-nav-dropdown-highlight-item-bg-color: $Mono-accent; $lk-page-nav-dropdown-highlight-item-text-color: $Mono-page-bkgd; $lk-page-nav-dropdown-icon-color: $Mono-accent; -$lk-page-nav-secondary-tab-bg-color: $Mono-gray-blue; +$lk-page-nav-secondary-tab-bg-color: $Mono-inactive-tab; $lk-page-nav-secondary-tab-text-color: $Mono-accent; $lk-page-nav-primary-tab-bg-color: $Mono-page-bkgd; $lk-page-nav-primary-tab-text-color: $Mono-accent; diff --git a/packages/themes/themes/ocean/_variables.scss b/packages/themes/themes/ocean/_variables.scss index ab8af3a5de..40356ff536 100644 --- a/packages/themes/themes/ocean/_variables.scss +++ b/packages/themes/themes/ocean/_variables.scss @@ -5,8 +5,8 @@ //== Colors // -$Ocean-header: #208e8b; -$Ocean-accent: #307272; +$Ocean-header: #288282; +$Ocean-accent: #2F6B6B; $Ocean-page-bkgd: #f7f7f7; $Ocean-gray-blue: #dadfe1; $Ocean-gray-darker: #646569; @@ -16,6 +16,8 @@ $Ocean-anchor-color: #0479a8; $Ocean-gray-footer-text: #adadad; $Ocean-gray-footer-text-hover: #f9f9f9; $Ocean-white: #FFFFFF; +$Ocean-tab-text: #0D3333; +$Ocean-inactive-tab: #88C2C2; $lk-theme-dark-accent: $Ocean-accent; $lk-theme-light-accent: $Ocean-header; @@ -76,10 +78,10 @@ $lk-page-nav-dropdown-item-text-color: $Ocean-accent; $lk-page-nav-dropdown-highlight-item-bg-color: $Ocean-accent; $lk-page-nav-dropdown-highlight-item-text-color: $Ocean-page-bkgd; $lk-page-nav-dropdown-icon-color: $Ocean-accent; -$lk-page-nav-secondary-tab-bg-color: color.adjust($Ocean-gray-blue, $hue: -10deg, $lightness: 5%); -$lk-page-nav-secondary-tab-text-color: $Ocean-accent; +$lk-page-nav-secondary-tab-bg-color: $Ocean-inactive-tab; +$lk-page-nav-secondary-tab-text-color: $Ocean-tab-text; $lk-page-nav-primary-tab-bg-color: $Ocean-page-bkgd; -$lk-page-nav-primary-tab-text-color: $Ocean-accent; +$lk-page-nav-primary-tab-text-color: $Ocean-tab-text; $lk-nav-dropdown-color: $Ocean-header; //== Panels // @@ -95,7 +97,7 @@ $lk-webpart-title-hover-color: $Ocean-anchor-color; //== Tabs (Bootstrap tabs (Export data set dropdown)) // $lk-nav-tab-primary-bg-color: $Ocean-white; -$lk-nav-tab-secondary-text-color: $Ocean-anchor-color; +$lk-nav-tab-secondary-text-color: $Ocean-tab-text; //== Tool Icons // diff --git a/packages/themes/themes/overcast/_variables.scss b/packages/themes/themes/overcast/_variables.scss index 54407faef4..000d55988b 100644 --- a/packages/themes/themes/overcast/_variables.scss +++ b/packages/themes/themes/overcast/_variables.scss @@ -17,6 +17,25 @@ $lk-page-header-font-hover-color: $white; // $lk-page-nav-bg-color: $lk-secondary-brand-color; $lk-nav-dropdown-color: $lk-brand-color; + +//== Navigation Tabs +// +$lk-page-nav-secondary-tab-bg-color: #73B6E0; +$lk-page-nav-secondary-tab-text-color: #0B4161; +$lk-page-nav-primary-tab-text-color: #0B4161; + +//== Tabs (Bootstrap tabs) +// +$lk-nav-tab-primary-text-color: #0B4161; +$lk-nav-tab-secondary-text-color: #0B4161; +$lk-nav-tab-secondary-hover-text-color: #0B4161; + +//== TabStrips +// +$lk-active-tab-color: #0B4161; +$lk-inactive-tab-color: #0B4161; +$lk-inactive-tab-bg-color: #73B6E0; + //== Pill // $lk-nav-pills-active-link-hover-bg: $lk-theme-dark-accent; diff --git a/packages/themes/themes/sky/_variables.scss b/packages/themes/themes/sky/_variables.scss index ba6ca892c1..98cfabbba9 100644 --- a/packages/themes/themes/sky/_variables.scss +++ b/packages/themes/themes/sky/_variables.scss @@ -1,8 +1,8 @@ //== Colors // $white: #FFFFFF; -$lk-brand-color: #2980b9; -$lk-secondary-brand-color: #236fa0; +$lk-brand-color: #2679AD; +$lk-secondary-brand-color: #116596; $lk-theme-dark-accent: $lk-brand-color; $lk-theme-light-accent: $lk-secondary-brand-color; @@ -17,6 +17,16 @@ $lk-page-header-font-hover-color: $white; // $lk-page-nav-bg-color: $lk-secondary-brand-color; $lk-nav-dropdown-color: $lk-brand-color; + +//== Navigation Tabs +// +$lk-page-nav-secondary-tab-bg-color: #73B6E0; +$lk-page-nav-secondary-tab-text-color: #0B4161; +$lk-page-nav-primary-tab-text-color: #0B4161; + +//== Tabs (Bootstrap tabs) +// +$lk-nav-tab-secondary-text-color: #0B4161; //== Pill // $lk-nav-pills-active-link-hover-bg: $lk-theme-dark-accent;