refactor(variables/colors): use the $disabled-color Sass variable i…

…nstead of CSS variable in the `$theme-dark` `$theme-light`. Use the CSS variables instead of `darken()` `lighten()` functions.

src/variables/colors/_bg.scss

@@ -1,6 +1,6 @@
 @use 'core' as *;
 
 // Background colors.
-$bg-color: lighten($dark-color, 75%) !default; // --#{$var-prefix}-bg-color.
-$bg-color-dark: darken($bg-color, 3%) !default; // --#{$var-prefix}-bg-color-dark.
-$bg-color-light: $light-color !default; // --#{$var-prefix}-bg-color-light.
+$bg-color: ('dark-color', +75%) !default; // --#{$var-prefix}-bg-color.
+$bg-color-dark: ('bg-color', -3%) !default; // --#{$var-prefix}-bg-color-dark.
+$bg-color-light: 'light-color' !default; // --#{$var-prefix}-bg-color-light.

src/variables/colors/_body.scss

@@ -2,5 +2,5 @@
 @use 'core' as *;
 
 // Body colors.
-$body-bg-color: $bg-color-light !default; // --#{$var-prefix}-body-bg-color.
-$body-font-color: lighten($dark-color, 5%) !default; // --#{$var-prefix}-body-font-color.
+$body-bg-color: 'bg-color-light' !default; // --#{$var-prefix}-body-bg-color.
+$body-font-color: ('dark-color', +5%) !default; // --#{$var-prefix}-body-font-color.

src/variables/colors/_border.scss

@@ -1,6 +1,6 @@
 @use 'core' as *;
 
 // Border colors.
-$border-color: lighten($dark-color, 65%) !default; // --#{$var-prefix}-border-color.
-$border-color-dark: darken($border-color, 10%) !default; // --#{$var-prefix}-border-color-dark.
-$border-color-light: lighten($border-color, 8%) !default; // --#{$var-prefix}-border-color-light.
+$border-color: ('dark-color', +65%) !default; // --#{$var-prefix}-border-color.
+$border-color-dark: ('border-color', -10%) !default; // --#{$var-prefix}-border-color-dark.
+$border-color-light: ('border-color', +8%) !default; // --#{$var-prefix}-border-color-light.

src/variables/colors/_control.scss

@@ -1,7 +1,7 @@
 @use 'bg' as *;
 
 // Control colors.
-$disabled-color: $bg-color-dark !default; // --#{$var-prefix}-disabled-color.
+$disabled-color: 'bg-color-dark' !default; // --#{$var-prefix}-disabled-color.
 $error-color: #e85600 !default; // --#{$var-prefix}-error-color.
 $info-color: #d9edf7 !default; // --#{$var-prefix}-info-color.
 $success-color: #32b643 !default; // --#{$var-prefix}-success-color.

src/variables/colors/_core.scss

@@ -10,10 +10,13 @@ $accent-color: #9932CC !default; // --#{var-prefix}-accent-color.
 
 // - Primary.
 $primary-color: #5755d9 !default; // --#{$var-prefix}-primary-color.
-$primary-color-dark: darken($primary-color, 3%) !default; // --#{$var-prefix}-primary-color-dark.
-$primary-color-light: lighten($primary-color, 3%) !default; // --#{$var-prefix}-primary-color-light.
+$primary-color-dark: ('primary-color', -3%) !default; // --#{$var-prefix}-primary-color-dark.
+$primary-color-light: ('primary-color', +3%) !default; // --#{$var-prefix}-primary-color-light.
 
 // Secondary.
-$secondary-color: lighten($primary-color, 37.5%) !default; // --#{$var-prefix}-secondary-color.
-$secondary-color-dark: darken($secondary-color, 3%) !default; // --#{$var-prefix}-secondary-color-dark.
-$secondary-color-light: lighten($secondary-color, 3%) !default; // --#{$var-prefix}-secondary-color-light.
+$secondary-color: ('primary-color', +37.5%) !default; // --#{$var-prefix}-secondary-color.
+$secondary-color-dark: ('secondary-color', -3%) !default; // --#{$var-prefix}-secondary-color-dark.
+$secondary-color-light: ('secondary-color', +3%) !default; // --#{$var-prefix}-secondary-color-light.
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+$theme-color: #5755d9 !default;

src/variables/colors/_gray.scss

@@ -1,6 +1,6 @@
 @use 'core' as *;
 
 // Gray colors.
-$gray-color: lighten($dark-color, 55%) !default; // --#{$var-prefix}-gray-color.
-$gray-color-dark: darken($gray-color, 30%) !default; // --#{$var-prefix}-gray-color-dark.
-$gray-color-light: lighten($gray-color, 20%) !default; // --#{$var-prefix}-gray-color-light.
+$gray-color: ('dark-color', +55%) !default; // --#{$var-prefix}-gray-color.
+$gray-color-dark: ('gray-color', -30%) !default; // --#{$var-prefix}-gray-color-dark.
+$gray-color-light: ('gray-color', +20%) !default; // --#{$var-prefix}-gray-color-light.

src/variables/colors/_link.scss

@@ -1,6 +1,6 @@
 @use 'core' as *;
 
 // Link colors.
-$link-color: $primary-color !default; // --#{$var-prefix}-link-color.
-$link-color-dark: darken($link-color, 10%) !default; // --#{$var-prefix}-link-color-dark.
-$link-color-light: lighten($link-color, 10%) !default; // --#{$var-prefix}-link-color-light.
+$link-color: 'primary-color' !default; // --#{$var-prefix}-link-color.
+$link-color-dark: ('link-color', -10%) !default; // --#{$var-prefix}-link-color-dark.
+$link-color-light: ('link-color', +10%) !default; // --#{$var-prefix}-link-color-light.

src/variables/colors/_theme-dark.scss

@@ -46,7 +46,7 @@ $theme-dark: (
   'body-font-color': 'light-color',
 
   // Control colors.
-  'disabled-color': 'bg-color-dark',
+  'disabled-color': $disabled-color,
   'error-color': $error-color,
   'info-color': $info-color,
   'success-color': $success-color,

src/variables/colors/_theme-light.scss

@@ -49,7 +49,7 @@ $theme-light: (
   'body-font-color': ('dark-color', +5%),
 
   // Control colors.
-  'disabled-color': 'bg-color-dark',
+  'disabled-color': $disabled-color,
   'error-color': $error-color,
   'info-color': $info-color,
   'success-color': $success-color,

src/variables/colors/_theme-normal.scss

@@ -0,0 +1,66 @@
+@use 'bg' as *;
+@use 'body' as *;
+@use 'border' as *;
+@use 'control' as *;
+@use 'core' as *;
+@use 'gray' as *;
+@use 'link' as *;
+@use 'other' as *;
+
+$theme-normal: (
+  // Theme color.
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+  'theme-color': $theme-color,
+
+  // Core colors.
+  'dark-color': $dark-color,
+  'light-color': $light-color,
+
+  // - Accent color.
+  'accent-color': $accent-color,
+
+  // - Primary colors.
+  'primary-color': $primary-color,
+  'primary-color-dark': $primary-color-dark,
+  'primary-color-light': $primary-color-light,
+
+  // - Secondary colors.
+  'secondary-color': $secondary-color,
+  'secondary-color-dark': $secondary-color-dark,
+  'secondary-color-light': $secondary-color-light,
+
+  // Gray colors.
+  'gray-color': $gray-color,
+  'gray-color-dark': $gray-color-dark,
+  'gray-color-light': $gray-color-light,
+
+  // Bg colors.
+  'bg-color': $bg-color,
+  'bg-color-dark': $bg-color-dark,
+  'bg-color-light': $bg-color-light,
+
+  // Border colors.
+  'border-color': $border-color,
+  'border-color-dark': $border-color-dark,
+  'border-color-light': $border-color-light,
+
+  // Link colors.
+  'link-color': $link-color,
+  'link-color-dark': $link-color-dark,
+  'link-color-light': $link-color-light,
+
+  // Body colors.
+  'body-bg-color': $body-bg-color,
+  'body-font-color': $body-font-color,
+
+  // Control colors.
+  'disabled-color': $disabled-color,
+  'error-color': $error-color,
+  'info-color': $info-color,
+  'success-color': $success-color,
+  'warning-color': $warning-color,
+
+  // Other colors.
+  'code-color': $code-color,
+  'highlight-color': $highlight-color,
+) !default;

src/variables/colors/_theme.scss

@@ -1,2 +1,3 @@
 @forward 'theme-dark';
 @forward 'theme-light';
+@forward 'theme-normal';