@limetech/lime-elements 36.2.0 → 36.3.0-next.10

package/dist/collection/style/color-palette-extended.css

@@ -41,7 +41,7 @@
     --contrast-1400: 39, 39, 57; /* #272739 */
     --contrast-1500: 35, 35, 53; /* #232335 */
     --contrast-1600: 25, 25, 44; /* #19192c */
-    --contrast-1700: 0, 0, 0; /* #000 */
+    --contrast-1700: 20, 20, 37; /* #141425 */
 
     /* Colors swatches that get slightly dimmer in dark mode */
     --color-red-lighter: 255, 205, 210; /* #ffcdd2; */
@@ -165,9 +165,164 @@
     --color-glaucous-darker: 37, 71, 88; /* #254758 */
 }
 
+:root[data-theme="force-dark"] {
+    --contrast-100: 20, 20, 42; /* #14142a */
+    --contrast-200: 25, 25, 44; /* #19192c */
+    --contrast-300: 35, 35, 53; /* #232335 */
+    --contrast-400: 39, 39, 57; /* #272739 */
+    --contrast-500: 48, 48, 66; /* #303042 */
+    --contrast-600: 71, 71, 86; /* #474756 */
+    --contrast-700: 94, 94, 108; /* #5e5e6c */
+    --contrast-800: 117, 117, 128; /* #757580 */
+    --contrast-900: 140, 140, 150; /* #8c8c96 */
+    --contrast-1000: 186, 186, 192; /* #babac0 */
+    --contrast-1100: 209, 209, 213; /* #d1d1d5 */
+    --contrast-1200: 232, 232, 234; /* #e8e8ea */
+    --contrast-1300: 237, 237, 238; /* #ededee */
+    --contrast-1400: 241, 241, 243; /* #f1f1f3 */
+    --contrast-1500: 246, 246, 247; /* #f6f6f7 */
+    --contrast-1600: 250, 250, 251; /* #fafafb */
+    --contrast-1700: 255, 255, 255; /* #fff */
+
+    --color-red-lighter: 239, 154, 154; /* #ef9a9a */
+    --color-red-light: var(--lime-brand-color-deep-red);
+    --color-red-default: 229, 57, 53; /* #e53935 */
+    --color-red-dark: 198, 40, 40; /* #c62828 */
+    --color-red-darker: 165, 23, 23; /* #a51717 */
+
+    --color-pink-lighter: 244, 143, 177; /* #f48fb1 */
+    --color-pink-light: 236, 64, 122; /* #ec407a */
+    --color-pink-default: 216, 27, 96; /* #d81b60 */
+    --color-pink-dark: 173, 20, 87; /* #ad1457 */
+    --color-pink-darker: 132, 10, 75; /* #840a4b */
+
+    --color-magenta-lighter: 249, 161, 204; /* #f9a1cc */
+    --color-magenta-light: 249, 79, 162; /* #f94fa2 */
+    --color-magenta-default: var(--lime-brand-color-loving-magenta);
+    --color-magenta-dark: 208, 31, 117; /* #d01f75 */
+    --color-magenta-darker: 156, 22, 87; /* #9c1657 */
+
+    --color-purple-lighter: 206, 147, 216; /* #ce93d8 */
+    --color-purple-light: 171, 71, 188; /* #ab47bc */
+    --color-purple-default: 142, 36, 170; /* #8e24aa */
+    --color-purple-dark: 106, 27, 154; /* #6a1b9a */
+    --color-purple-darker: 62, 13, 121; /* #3e0d79 */
+
+    --color-violet-lighter: 179, 157, 219; /* #b39ddb */
+    --color-violet-light: 126, 87, 194; /* #7e57c2 */
+    --color-violet-default: 94, 53, 177; /* #5e35b1 */
+    --color-violet-dark: 69, 39, 160; /* #4527a0 */
+    --color-violet-darker: 41, 22, 127; /* #29167f */
+
+    --color-indigo-lighter: 159, 168, 218; /* #9fa8da */
+    --color-indigo-light: 92, 107, 192; /* #5c6bc0 */
+    --color-indigo-default: 57, 73, 171; /* #3949ab */
+    --color-indigo-dark: 40, 53, 147; /* #283593 */
+    --color-indigo-darker: 21, 30, 115; /* #151e73 */
+
+    --color-blue-lighter: 144, 202, 249; /* #90caf9 */
+    --color-blue-light: 66, 165, 245; /* #42a5f5 */
+    --color-blue-default: 30, 136, 229; /* #1e88e5 */
+    --color-blue-dark: 21, 101, 192; /* #1565c0 */
+    --color-blue-darker: 10, 60, 138; /* #0a3c8a */
+
+    --color-sky-lighter: 129, 212, 250; /* #81d4fa */
+    --color-sky-light: var(--lime-brand-color-simple-blue);
+    --color-sky-default: 3, 155, 229; /* #039be5 */
+    --color-sky-dark: 2, 119, 189; /* #0277bd */
+    --color-sky-darker: 1, 81, 144; /* #015190 */
+
+    --color-cyan-lighter: 128, 222, 234; /* #80deea */
+    --color-cyan-light: 38, 198, 218; /* #26c6da */
+    --color-cyan-default: 0, 172, 193; /* #00acc1 */
+    --color-cyan-dark: 0, 131, 143; /* #00838f */
+    --color-cyan-darker: 0, 89, 93; /* #00595d */
+
+    --color-teal-lighter: 128, 203, 196; /* #80cbc4 */
+    --color-teal-light: var(--lime-brand-color-flexible-turquoise);
+    --color-teal-default: 0, 137, 123; /* #00897b */
+    --color-teal-dark: 0, 105, 92; /* #00695c */
+    --color-teal-darker: 1, 82, 69; /* #015245 */
+
+    --color-green-lighter: 165, 214, 167; /* #a5d6a7 */
+    --color-green-light: var(--lime-brand-color-lime-green);
+    --color-green-default: 67, 160, 71; /* #43a047 */
+    --color-green-dark: 46, 125, 50; /* #2e7d32 */
+    --color-green-darker: 32, 97, 37; /* #206125 */
+
+    --color-lime-lighter: 197, 225, 165; /* #c5e1a5 */
+    --color-lime-light: 156, 204, 101; /* #9ccc65 */
+    --color-lime-default: 124, 179, 66; /* #7cb342 */
+    --color-lime-dark: 85, 139, 47; /* #558b2f */
+    --color-lime-darker: 43, 90, 25; /* #2b5a19 */
+
+    --color-grass-lighter: 230, 238, 156; /* #e6ee9c */
+    --color-grass-light: 212, 225, 87; /* #d4e157 */
+    --color-grass-default: 192, 202, 51; /* #c0ca33 */
+    --color-grass-dark: 158, 157, 36; /* #9e9d24 */
+    --color-grass-darker: 119, 109, 19; /* #776d13 */
+
+    --color-yellow-lighter: 255, 245, 157; /* #fff59d */
+    --color-yellow-light: 255, 238, 88; /* #ffee58 */
+    --color-yellow-default: 253, 216, 53; /* #fdd835 */
+    --color-yellow-dark: 245, 200, 39; /* #f5c827 */
+    --color-yellow-darker: 224, 180, 21; /* #e0b415 */
+
+    --color-amber-lighter: 255, 224, 130; /* #ffe082 */
+    --color-amber-light: var(--lime-brand-color-yellow);
+    --color-amber-default: var(--lime-brand-color-orange);
+    --color-amber-dark: 255, 143, 0; /* #ff8f00 */
+    --color-amber-darker: 222, 98, 2; /* #de6202 */
+
+    --color-orange-lighter: 255, 204, 128; /* #ffcc80 */
+    --color-orange-light: 255, 167, 38; /* #ffa726 */
+    --color-orange-default: 251, 140, 0; /* #fb8c00 */
+    --color-orange-dark: 239, 108, 0; /* #ef6c00 */
+    --color-orange-darker: 216, 77, 1; /* #d84d01 */
+
+    --color-coral-lighter: 255, 171, 145; /* #ffab91 */
+    --color-coral-light: var(--lime-brand-color-sellable-orange);
+    --color-coral-default: 244, 81, 30; /* #f4511e */
+    --color-coral-dark: 216, 67, 21; /* #d84315 */
+    --color-coral-darker: 181, 50, 10; /* #b5320a */
+
+    --color-brown-lighter: 188, 170, 164; /* #bcaaa4 */
+    --color-brown-light: 141, 110, 99; /* #8d6e63 */
+    --color-brown-default: 109, 76, 65; /* #6d4c41 */
+    --color-brown-dark: 78, 52, 46; /* #4e342e */
+    --color-brown-darker: 51, 32, 28; /* #33201c */
+
+    --color-gray-lighter: 238, 238, 238; /* #eee */
+    --color-gray-light: var(--lime-brand-color-light-grey);
+    --color-gray-default: 117, 117, 117; /* #757575 */
+    --color-gray-dark: 66, 66, 66; /* #424242 */
+    --color-gray-darker: 33, 32, 32; /* #212020 */
+
+    --color-glaucous-lighter: 159, 194, 208; /* #9fc2d0 */
+    --color-glaucous-light: 110, 141, 156; /* #6e8d9c */
+    --color-glaucous-default: 68, 108, 128; /* #446c80 */
+    --color-glaucous-dark: 42, 87, 107; /* #2a576b */
+    --color-glaucous-darker: 34, 65, 80; /* #224150 */
+
+    --lime-elevated-surface-background-color: rgb(var(--contrast-200));
+
+    --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.608);
+    --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-black), 0.45);
+    --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgba(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508);
+    --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508) inset, 0 0 0.25rem rgba(var(--color-white), 0.1);
+    --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgba(var(--color-black), 0.52) inset, 0 0 0.1875rem rgba(var(--color-white), 0.1);
+    --shadow-depth-8: 0 0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
+    --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
+    --shadow-depth-16: 0 0.4rem 0.9rem 0 rgba(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgba(var(--color-black), 0.508);
+    --shadow-depth-64: 0 1.6rem 3.6rem 0 rgba(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgba(var(--color-black), 0.58);
+    --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgba(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgba(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgba(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+    --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgba(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+    --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgba(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+}
+
 @media (prefers-color-scheme: dark) {
-    :root {
-        --contrast-100: 0, 0, 0; /* #000 */
+    :root:not([data-theme="force-light"]) {
+        --contrast-100: 20, 20, 37; /* #141425 */
         --contrast-200: 25, 25, 44; /* #19192c */
         --contrast-300: 35, 35, 53; /* #232335 */
         --contrast-400: 39, 39, 57; /* #272739 */
@@ -304,5 +459,20 @@
         --color-glaucous-default: 68, 108, 128; /* #446c80 */
         --color-glaucous-dark: 42, 87, 107; /* #2a576b */
         --color-glaucous-darker: 34, 65, 80; /* #224150 */
+
+        --lime-elevated-surface-background-color: rgb(var(--contrast-200));
+
+        --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.608);
+        --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-black), 0.45);
+        --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgba(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508);
+        --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508) inset, 0 0 0.25rem rgba(var(--color-white), 0.1);
+        --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgba(var(--color-black), 0.52) inset, 0 0 0.1875rem rgba(var(--color-white), 0.1);
+        --shadow-depth-8: 0 0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
+        --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
+        --shadow-depth-16: 0 0.4rem 0.9rem 0 rgba(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgba(var(--color-black), 0.508);
+        --shadow-depth-64: 0 1.6rem 3.6rem 0 rgba(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgba(var(--color-black), 0.58);
+        --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgba(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgba(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgba(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+        --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgba(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+        --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgba(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
     }
 }

package/dist/collection/style/color-palette-primary.scss.bak

@@ -104,6 +104,7 @@
     --color-glaucous-light: 135, 174, 193; // #87aec1
     --color-glaucous-default: var(--lime-brand-color-dark-blue);
 
+}
     @include in(dark-mode) {
         --contrast-100: 0, 0, 0; // #000
         --contrast-200: 25, 25, 44; // #19192c
@@ -183,4 +184,3 @@
         --color-glaucous-light: 110, 141, 156; // #6e8d9c
         --color-glaucous-default: 68, 108, 128; // #446c80
     }
-}

package/dist/collection/style/color-palette-ui.scss.bak

@@ -59,6 +59,7 @@
     --color-orange-light: 255, 183, 77; // #ffb74d
     --color-orange-default: 255, 152, 0; // #ff9800
 
+}
     @include in(dark-mode) {
         --contrast-100: 0, 0, 0; // #000
         --contrast-200: 25, 25, 44; // #19192c
@@ -93,4 +94,3 @@
         --color-orange-light: 255, 167, 38; // #ffa726
         --color-orange-default: 251, 140, 0; // #fb8c00
     }
-}

package/dist/collection/style/colors.scss

@@ -1,17 +1,15 @@
-@use './brand-colors';
-
 :root {
-    --lime-deep-red: #{brand-colors.$lime-deep-red};
-    --lime-red: #{brand-colors.$lime-red};
-    --lime-orange: #{brand-colors.$lime-orange};
-    --lime-yellow: #{brand-colors.$lime-yellow};
-    --lime-green: #{brand-colors.$lime-green};
-    --lime-turquoise: #{brand-colors.$lime-turquoise};
-    --lime-blue: #{brand-colors.$lime-blue};
-    --lime-dark-blue: #{brand-colors.$lime-dark-blue};
-    --lime-magenta: #{brand-colors.$lime-magenta};
-    --lime-light-grey: #{brand-colors.$lime-light-grey};
-    --lime-dark-grey: #{brand-colors.$lime-dark-grey};
+    --lime-deep-red: rgb(var(--lime-brand-color-deep-red));
+    --lime-red: rgb(var(--lime-brand-color-sellable-orange));
+    --lime-orange: rgb(var(--lime-brand-color-orange));
+    --lime-yellow: rgb(var(--lime-brand-color-yellow));
+    --lime-green: rgb(var(--lime-brand-color-lime-green));
+    --lime-turquoise: rgb(var(--lime-brand-color-flexible-turquoise));
+    --lime-blue: rgb(var(--lime-brand-color-simple-blue));
+    --lime-dark-blue: rgb(var(--lime-brand-color-dark-blue));
+    --lime-magenta: rgb(var(--lime-brand-color-loving-magenta));
+    --lime-light-grey: rgb(var(--lime-brand-color-light-grey));
+    --lime-dark-grey: rgb(var(--lime-brand-color-grey));
 
     --color-percent--0: rgb(var(--color-gray-default));
     --color-percent--0to10: rgb(var(--color-red-dark));

package/dist/collection/style/internal/shared_input-select-picker.scss

@@ -19,6 +19,8 @@ $background-color-disabled: transparent;
 $label-color: rgba(var(--contrast-1200), 1);
 $label-color-disabled: rgba(var(--contrast-1200), 0.5);
 $input-text-color: rgba(var(--contrast-1400), 1);
+$input-text-leading-icon-color: rgb(var(--contrast-900));
+
 $input-text-color-disabled: rgba(var(--contrast-1400), 0.5);
 $helper-text-color: $label-color;
 
@@ -107,6 +109,22 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     opacity: 0;
 }
 
+@mixin helper-text-color {
+    .mdc-text-field:not(.mdc-text-field--disabled) {
+        .mdc-text-field-character-counter,
+        + .mdc-text-field-helper-line .mdc-text-field-character-counter,
+        + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+            color: $helper-text-color;
+        }
+    }
+}
+
+@mixin input-field-placeholder {
+    &::placeholder {
+        color: rgb(var(--contrast-900)) !important;
+    }
+}
+
 @mixin looks-like-helper-text-pseudo-before {
     height: $height-of-helper-text-pseudo-before;
     display: inline-block;
@@ -212,12 +230,14 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     }
 
     .mdc-text-field__icon {
+        color: $input-text-leading-icon-color;
         flex-shrink: 0;
     }
 }
 
 @mixin leading-icon {
     .mdc-text-field__icon {
+        color: $input-text-leading-icon-color;
         width: functions.pxToRem(24);
         height: functions.pxToRem(24);
     }

package/dist/collection/style/internal/z-index.scss

@@ -2,6 +2,4 @@ $input-field--formatted-value: 1 !default;
 $input-field--input-with-formatted-value: 2 !default;
 $input-field--mdc-text-field__input--readonly: 1 !default;
 $tab-bar--active-tab: 2 !default;
-$table--has-interactive-rows--selectable-row--hover: 2 !default;
-$table--limel-table--row-selector: 1 !default;
 $button-group-radio-button-keyboard-focused: 1 !default;

package/dist/collection/style/mixins.scss

@@ -12,20 +12,53 @@
 }
 
 @mixin in($media) {
+    // ⛔️ As long as we don't have a script that generates a
+    // `.css` files automatically, we cannot use this mixin.
+    // we need to manually write the dark-mode CSS variables
+    // inside this file: /style/color-palette-extended.css
+    //
+    // ⚠️ Also note that this mixin only puts styles
+    // on the `:root` which means the `<html` level.
+    // Therefore, it cannot be used inside components
+    // to generate custom dark-mode styles.
+
     @if $media == dark-mode {
         @media (prefers-color-scheme: dark) {
+            :root:not([data-theme='force-light']) {
+                @content;
+            }
+        }
+        :root[data-theme='force-dark'] {
             @content;
         }
+
+        // @media (prefers-color-scheme: dark) {
+        //     :host(:not([data-theme='force-light'])) & {
+        //         @content;
+        //     }
+        // }
+        // :host([data-theme='force-dark']) & {
+        //     @content;
+        // }
     }
 }
 
-@mixin is-elevated-clickable() {
-    transition: background-color 0.2s ease, box-shadow 0.2s ease,
-        transform 0.1s ease-out;
-
+@mixin is-elevated-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color: var(--lime-elevated-surface-background-color),
+    $background-color--hovered: var(--lime-elevated-surface-background-color)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    color: $color;
+    background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
     &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
@@ -36,27 +69,48 @@
     }
 }
 
-@mixin is-elevated-inset-clickable() {
-    transition: background-color 0.2s ease, box-shadow 0.2s ease,
-        transform 0.1s ease-out;
-
+@mixin is-elevated-inset-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color: var(--lime-elevated-surface-background-color),
+    $background-color--hovered: var(--lime-elevated-surface-background-color),
+    $background-color--inset: var(--mdc-theme-surface)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    color: $color;
+    background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
     &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
         transform: translate3d(0, 0.05rem, 0);
     }
 }
 
-@mixin is-flat-clickable() {
-    transition: background-color 0.2s ease, box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+@mixin is-flat-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $background-color: transparent,
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color--hovered: var(--lime-elevated-surface-background-color)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    color: $color;
+    background-color: $background-color;
 
     &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
@@ -67,15 +121,27 @@
     }
 }
 
-@mixin is-flat-inset-clickable() {
-    transition: background-color 0.2s ease, box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+@mixin is-flat-inset-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $background-color: transparent,
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color--hovered: var(--lime-elevated-surface-background-color),
+    $background-color--inset: var(--mdc-theme-surface)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    color: $color;
+    background-color: $background-color;
 
     &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
         transform: translate3d(0, 0.05rem, 0);
     }
@@ -83,7 +149,10 @@
 
 @mixin clear-all-button() {
     // NOTE: you may need to specify "position: absolute" and align the position where you use this mixin
-    @include is-flat-clickable;
+    @include is-flat-clickable(
+        $background-color: rgb(var(--contrast-900)),
+        $background-color--hovered: rgb(var(--contrast-1100))
+    );
 
     cursor: pointer;
 
@@ -92,16 +161,11 @@
     border-radius: 50%;
 
     background: {
-        color: #babac0;
         repeat: no-repeat;
         position: center;
         size: functions.pxToRem(12);
         image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
     }
-
-    &:hover {
-        background-color: #757580;
-    }
 }
 
 @mixin truncate-text() {

package/dist/collection/style/shadows.scss

@@ -1,9 +1,15 @@
 @use './functions';
-
-$visualise-focused-state: 0 0 0 #{functions.pxToRem(2)} var(--mdc-theme-primary);
-$visualise-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-default));
+@use './mixins';
 
 :root {
+    // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
+    // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
+    --shadow-focused-state: 0 0 0 #{functions.pxToRem(2)} var(--mdc-theme-primary);
+
+    // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
+    // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.
+    --shadow-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-default));
+
     // Good for buttons and clickables such as select dropdowns, or slider grabbers
     --button-shadow-normal: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(
                 3.6
@@ -36,19 +42,9 @@ $visualise-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-defaul
         0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
             rgba(var(--color-black), 0.108);
     // Same as above, but when element is focused
-    --shadow-depth-8-focused: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(
-                7.2
-            )} 0 rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
-            rgba(var(--color-black), 0.108),
-        #{$visualise-focused-state};
+    --shadow-depth-8-focused: var(--shadow-depth-8), var(--shadow-focused-state);
     // Same as above, but when element is indicating error or warning
-    --shadow-depth-8-error: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(
-                7.2
-            )} 0 rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
-            rgba(var(--color-black), 0.108),
-        #{$visualise-error-state};
+    --shadow-depth-8-error: var(--shadow-depth-8), var(--shadow-error-state);
     // Same as above, but light source is below the element, good for bottom bars, etc...
     --shadow-depth-8-reversed: 0 #{functions.pxToRem(-3.2)} #{functions.pxToRem(
                 7.2
@@ -63,12 +59,8 @@ $visualise-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-defaul
             rgba(var(--color-black), 0.108);
 
     // Same as above, but when element is focused
-    --shadow-depth-16-focused: 0 #{functions.pxToRem(6.4)} #{functions.pxToRem(
-                14.4
-            )} 0 rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(1.2)} #{functions.pxToRem(3.6)} 0
-            rgba(var(--color-black), 0.108),
-        #{$visualise-focused-state};
+    --shadow-depth-16-focused: var(--shadow-depth-16),
+        var(--shadow-focused-state);
 
     // Good for Pop up dialogs
     --shadow-depth-64: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(57.6)} 0
@@ -77,12 +69,8 @@ $visualise-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-defaul
             rgba(var(--color-black), 0.18);
 
     // Same as above, but when element is focused
-    --shadow-depth-64-focused: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(
-                57.6
-            )} 0 rgba(var(--color-black), 0.22),
-        0 #{functions.pxToRem(4.8)} #{functions.pxToRem(14.4)} 0
-            rgba(var(--color-black), 0.18),
-        #{$visualise-focused-state};
+    --shadow-depth-64-focused: var(--shadow-depth-64),
+        var(--shadow-focused-state);
 
     --shadow-inflated-8: #{functions.pxToRem(-2)} #{functions.pxToRem(-2)} #{functions.pxToRem(
                 6
@@ -122,3 +110,105 @@ $visualise-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-defaul
         -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
         0 0 1px 1px rgba(var(--color-white), 0.98) inset;
 }
+
+// ⚠️ This section below is commented out.
+// It's contents are moved to src/style/color-palette-extended.css
+//
+// Because we don't want to give dark-mode-specific shadows to those
+// clients that only import src/style/color-palette-extended-light-mode-only.css
+// Because if their OS is in dark mode, not their app,
+// The shadows will get rendered too dark, due to `@media (prefers-color-scheme: dark)`
+// rule from the mixin. The day we generate `.css` files from these `.scss` files,
+// we can do it differently.
+
+// @include mixins.in(dark-mode) {
+//     --button-shadow-normal: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(
+//                 3.6
+//             )} 0 rgba(var(--color-black), 0.632),
+//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
+//             rgba(var(--color-black), 0.608);
+
+//     --button-shadow-hovered: 0 #{functions.pxToRem(2)} #{functions.pxToRem(6)}
+//             rgba(var(--color-black), 0.55),
+//         0 #{functions.pxToRem(6)} #{functions.pxToRem(10)}
+//             rgba(var(--color-black), 0.45);
+
+//     --button-shadow-pressed: 0 #{functions.pxToRem(1)} #{functions.pxToRem(3)} 0
+//             rgba(var(--color-black), 0.532),
+//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
+//             rgba(var(--color-black), 0.508);
+
+//     --button-shadow-inset: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(3.5)}
+//             0 rgba(var(--color-black), 0.532) inset,
+//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
+//             rgba(var(--color-black), 0.508) inset,
+//         0 0 #{functions.pxToRem(4)} rgba(var(--color-white), 0.1);
+
+//     --button-shadow-inset-pressed: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(
+//                 5.5
+//             )} 0 rgba(var(--color-black), 0.532) inset,
+//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(1.9)} 0
+//             rgba(var(--color-black), 0.52) inset,
+//         0 0 #{functions.pxToRem(3)} rgba(var(--color-white), 0.1);
+
+//     --shadow-depth-8: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(7.2)} 0
+//             rgba(var(--color-black), 0.532),
+//         0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
+//             rgba(var(--color-black), 0.508);
+
+//     --shadow-depth-8-reversed: 0 #{functions.pxToRem(-3.2)} #{functions.pxToRem(
+//                 7.2
+//             )} 0 rgba(var(--color-black), 0.532),
+//         0 #{functions.pxToRem(-0.6)} #{functions.pxToRem(1.8)} 0
+//             rgba(var(--color-black), 0.508);
+
+//     --shadow-depth-16: 0 #{functions.pxToRem(6.4)} #{functions.pxToRem(14.4)} 0
+//             rgba(var(--color-black), 0.532),
+//         0 #{functions.pxToRem(1.2)} #{functions.pxToRem(3.6)} 0
+//             rgba(var(--color-black), 0.508);
+
+//     --shadow-depth-64: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(57.6)} 0
+//             rgba(var(--color-black), 0.22),
+//         0 #{functions.pxToRem(4.8)} #{functions.pxToRem(14.4)} 0
+//             rgba(var(--color-black), 0.58);
+
+//     --shadow-inflated-8: #{functions.pxToRem(-2)} #{functions.pxToRem(-2)} #{functions.pxToRem(
+//                 6
+//             )} rgba(var(--color-black), 0.21),
+//         #{functions.pxToRem(-4)} #{functions.pxToRem(-4)} #{functions.pxToRem(
+//                 10
+//             )} rgba(var(--color-white), 0.08),
+//         #{functions.pxToRem(4)} #{functions.pxToRem(4)} #{functions.pxToRem(10)}
+//             rgba(var(--color-black), 0.46),
+//         #{functions.pxToRem(1)} #{functions.pxToRem(1)} #{functions.pxToRem(10)}
+//             rgba(var(--color-white), 0.16),
+//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
+//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+
+//     --shadow-inflated-16: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
+//                 6
+//             )} rgba(var(--color-black), 0.21),
+//         #{functions.pxToRem(-6)} #{functions.pxToRem(-6)} #{functions.pxToRem(
+//                 16
+//             )} rgba(var(--color-white), 0.1),
+//         #{functions.pxToRem(6)} #{functions.pxToRem(6)} #{functions.pxToRem(16)}
+//             rgba(var(--color-black), 0.46),
+//         #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
+//             rgba(var(--color-white), 0.16),
+//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
+//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+
+//     --shadow-inflated-64: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
+//                 6
+//             )} rgba(var(--color-black), 0.21),
+//         #{functions.pxToRem(-10)} #{functions.pxToRem(-10)} #{functions.pxToRem(
+//                 30
+//             )} rgba(var(--color-white), 0.2),
+//         #{functions.pxToRem(10)} #{functions.pxToRem(10)} #{functions.pxToRem(
+//                 36
+//             )} rgba(var(--color-black), 0.46),
+//         #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
+//             rgba(var(--color-white), 0.16),
+//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
+//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+// }