diff --git a/babybuddy/static_src/scss/themes/blueorange.scss b/babybuddy/static_src/scss/themes/blueorange.scss index 56ee2158..10deea22 100644 --- a/babybuddy/static_src/scss/themes/blueorange.scss +++ b/babybuddy/static_src/scss/themes/blueorange.scss @@ -1,8 +1,8 @@ +@use 'sass:color'; + // Blue Orange theme variables. -// // Color system -// $blue: #37abe9; $indigo: #472395; @@ -30,7 +30,6 @@ $theme-colors: ( // Body -// // Settings for the `` element. $body-bg: $gray-900; @@ -38,15 +37,13 @@ $body-color: $gray-400; // Links -// // Style anchor elements. $link-color: theme-color('info'); -$link-hover-color: darken($link-color, 15%); +$link-hover-color: color.adjust($link-color, $lightness: -15%); // Components -// // Define common padding and border radius sizes and more. $border-color: $gray-200; @@ -55,7 +52,6 @@ $component-active-bg: theme-color('primary'); // Fonts -// // Font, line-height, and color for body text, headings, and more. $text-muted: $gray-600 !default; @@ -65,7 +61,6 @@ $mark-bg: #fcf8e3 !default; // Tables -// // Customizes the `.table` component with basic values, each used across all table variations. $table-border-color: $gray-800; @@ -85,24 +80,23 @@ $input-group-addon-bg: $gray-500; // Dropdowns -// // Dropdown menu container and contents. $dropdown-bg: $gray-700; $dropdown-divider-bg: $gray-800; $dropdown-link-color: $body-color; -$dropdown-link-hover-color: darken($body-color, 5%); +$dropdown-link-hover-color: color.adjust($body-color, $lightness: -5%); $dropdown-link-hover-bg: theme-color('primary'); $dropdown-link-active-color: $component-active-color; $dropdown-link-active-bg: $component-active-bg; -$dropdown-header-color: darken($body-color, 25%); +$dropdown-header-color: color.adjust($body-color, $lightness: -25%); // Pagination $pagination-color: $link-color; $pagination-bg: theme-color('dark'); -$pagination-border-color: lighten(theme-color('dark'), 5%); +$pagination-border-color: color.adjust(theme-color('dark'), $lightness: 5%); $pagination-hover-color: $link-hover-color; $pagination-hover-bg: $gray-900; @@ -136,7 +130,7 @@ $progress-bg: $gray-600; // List group $list-group-bg: theme-color('dark'); -$list-group-hover-bg: darken($list-group-bg, 5%); +$list-group-hover-bg: color.adjust($list-group-bg, $lightness: -5%); $list-group-active-color: $component-active-color !default; $list-group-active-bg: $component-active-bg !default; $list-group-active-border-color: $list-group-active-bg !default;