First try on color-mix

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 202a79184222ee4693587a5f954af43a7c9f76e0..24162df82d53c8e4de9d91180f2abda5286f6442 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -134,6 +134,7 @@
       @include button-variant(
         $value,
         $value,
+        color-contrast($value),
         $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
         $hover-border: shade-color($value, $btn-hover-border-shade-amount),
         $active-background: shade-color($value, $btn-active-bg-shade-amount),
@@ -143,13 +144,14 @@
       @include button-variant(
         $value,
         $value,
+        color-contrast($value),
         $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
         $hover-border: tint-color($value, $btn-hover-border-tint-amount),
         $active-background: tint-color($value, $btn-active-bg-tint-amount),
         $active-border: tint-color($value, $btn-active-border-tint-amount)
       );
     } @else {
-      @include button-variant(var(--#{$prefix}#{$color}), var(--#{$prefix}#{$color}), var(--#{$prefix}on-#{$color}), var(--#{$prefix}#{$color}-hover), var(--#{$prefix}#{$color}-hover), var(--#{$prefix}on-#{$color}), var(--#{$prefix}#{$color}-active), var(--#{$prefix}#{$color}-active), var(--#{$prefix}on-#{$color}));
+      @include button-variant(var(--#{$prefix}#{$color}), var(--#{$prefix}#{$color}), var(--#{$prefix}on-#{$color}));
     }
   }
 }

diff --git a/scss/_maps.scss b/scss/_maps.scss
index 53b3fa0ffac04c17495e54ee407fe2bc99e630ee..e18e96c54b6eea4cc8739519df575bfb06f32c0a 100644 (file)
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -17,14 +17,6 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 $on-theme-colors: map-loop($theme-colors, color-contrast, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
-// scss-docs-start theme-colors-rgb
-$theme-colors-hover: map-loop($theme-colors, test-modify, "$value", 15%) !default;
-// scss-docs-end theme-colors-rgb
-
-// scss-docs-start theme-colors-rgb
-$theme-colors-active: map-loop($theme-colors, test-modify, "$value", 20%) !default;
-// scss-docs-end theme-colors-rgb
-
 // scss-docs-start theme-text-map
 $theme-colors-text: (
   "primary": $primary-text-emphasis,
@@ -66,8 +58,6 @@ $theme-colors-border-subtle: (
 
 $theme-colors-dark: null !default;
 $on-theme-colors-dark: null !default;
-$theme-colors-hover-dark: null !default;
-$theme-colors-active-dark: null !default;
 $theme-colors-rgb-dark: null !default;
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;
@@ -95,14 +85,6 @@ $theme-colors-border-subtle-dark: null !default;
   $on-theme-colors-dark: map-loop($theme-colors-dark, color-contrast, "$value") !default;
   // scss-docs-end theme-colors-rgb
 
-  // scss-docs-start theme-colors-rgb
-  $theme-colors-hover-dark: map-loop($theme-colors-dark, test-modify, "$value", 15%) !default;
-  // scss-docs-end theme-colors-rgb
-
-  // scss-docs-start theme-colors-rgb
-  $theme-colors-active-dark: map-loop($theme-colors-dark, test-modify, "$value", 20%) !default;
-  // scss-docs-end theme-colors-rgb
-
   // scss-docs-start theme-text-dark-map
   $theme-colors-text-dark: (
     "primary": $primary-text-emphasis-dark,

diff --git a/scss/_root.scss b/scss/_root.scss
index cbb4eb95c763a82ca46b12ced3daaa0166d678e3..c76d0c8c90947841fe13b6265eea93880486ccf0 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -22,14 +22,6 @@
     --#{$prefix}on-#{$color}: #{$value};
   }
 
-  @each $color, $value in $theme-colors-hover {
-    --#{$prefix}#{$color}-hover: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-active {
-    --#{$prefix}#{$color}-active: #{$value};
-  }
-
   @each $color, $value in $theme-colors-rgb {
     --#{$prefix}#{$color}-rgb: #{$value};
   }
@@ -172,14 +164,6 @@
       --#{$prefix}on-#{$color}: #{$value};
     }
 
-    @each $color, $value in $theme-colors-hover-dark {
-      --#{$prefix}#{$color}-hover: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-active-dark {
-      --#{$prefix}#{$color}-active: #{$value};
-    }
-
     @each $color, $value in $theme-colors-rgb-dark {
       --#{$prefix}#{$color}-rgb: #{$value};
     }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 243ef75958f4684b61d6515f4a6d9e74b4bcf233..d687658a6c5793e225a1776109840d62b520dcc8 100644 (file)
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -8,7 +8,7 @@
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start theme-color-dark-variables
-$primary-dark:                      #c00 !default;
+$primary-dark:                      #f00 !default;
 $secondary-dark:                    $secondary !default;
 $success-dark:                      $success !default;
 $info-dark:                         $info !default;

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index d263f7189d71a16d5a1a026afa5fd715c64e398c..2dfb2f39a6e55df4d6227816b6c7dbe56eb9f1cc 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -7,13 +7,13 @@
 @mixin button-variant(
   $background,
   $border,
-  $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-  $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-  $active-color: color-contrast($active-background),
+  $color,
+  $hover-background: color-mix(in srgb, $background 85%, var(--#{$prefix}body-color)),
+  $hover-border: color-mix(in srgb, $background 85%, var(--#{$prefix}body-color)),
+  $hover-color: $color,
+  $active-background: color-mix(in srgb, $background 70%, var(--#{$prefix}body-color)),
+  $active-border: color-mix(in srgb, $background 70%, var(--#{$prefix}body-color)),
+  $active-color: $color,
   $disabled-background: $background,
   $disabled-border: $border,
   $disabled-color: $color