From ff8d62c223466e2bcf41b387316b9d4d635c7730 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 13 Sep 2023 12:05:54 +0200
Subject: [PATCH] wip

---
 scss/_buttons.scss        |  2 +-
 scss/_maps.scss           | 34 ++++++++++++++++++++++++++++++++++
 scss/_root.scss           | 24 ++++++++++++++++++++++++
 scss/_variables-dark.scss |  2 +-
 scss/mixins/_buttons.scss |  4 ++--
 5 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index cbc0784a4d..e2f6d9ac29 100644
--- 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 db25773e59..53b3fa0ffa 100644
--- 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 5aeca96417..576eb0c4a0 100644
--- 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 433ea6ab61..1da81a93e7 100644
--- 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 cf087fda78..d263f7189d 100644
--- 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};
-- 
2.47.2