wip

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index cbc0784a4d9c4445bd87824bdd17cb43d57b59c8..e2f6d9ac294789bc2afb32b8b20a850799e36577 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -140,7 +140,7 @@
         $active-border: tint-color($value, $btn-active-border-tint-amount)
       );
     } @else {
-      @include button-variant($value, $value);
+      @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}));
     }
   }
 }

diff --git a/scss/_maps.scss b/scss/_maps.scss
index db25773e59ee1ca3a2dd9e99ebb28e14fdec660d..53b3fa0ffac04c17495e54ee407fe2bc99e630ee 100644 (file)
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -1,11 +1,30 @@
 // Re-assigned maps
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+@function test-modify($value, $tint-value) {
+  @if color-contrast($value) == $color-contrast-light {
+    @return shade-color($value, $tint-value);
+  }
+
+  @return tint-color($value, $tint-value);
+}
 
 // scss-docs-start theme-colors-rgb
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
+// scss-docs-start theme-colors-rgb
+$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,
@@ -46,6 +65,9 @@ $theme-colors-border-subtle: (
 // scss-docs-end theme-border-subtle-map
 
 $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;
@@ -69,6 +91,18 @@ $theme-colors-border-subtle-dark: null !default;
   $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
   // scss-docs-end theme-colors-rgb-dark
 
+  // scss-docs-start theme-colors-rgb
+  $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 5aeca96417f1bb8516aff39f9a7173a4d31b48df..576eb0c4a038e35d7b20af9d443cecc46f9d0ad6 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -18,6 +18,18 @@
     --#{$prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $on-theme-colors {
+    --#{$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};
   }
@@ -155,6 +167,18 @@
       --#{$prefix}#{$color}: #{$value};
     }
 
+    @each $color, $value in $on-theme-colors-dark {
+      --#{$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 433ea6ab61d5cbe388879457f1da4520623afeae..1da81a93e7a3ad758e15dbb06013dd0b96015ede 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:                      $primary !default;
+$primary-dark:                      #c00 !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 cf087fda78096c4b90fb3eb25bd1ae254ece220c..d263f7189d71a16d5a1a026afa5fd715c64e398c 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -16,7 +16,7 @@
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
+  $disabled-color: $color
 ) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
@@ -24,7 +24,7 @@
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
   --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-border-subtle);
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
   --#{$prefix}btn-active-border-color: #{$active-border};