Indigo Themes: Updates to Toast, Tooltip, Stepper, Rating (#284)

* feat(toast): implement indigo design updates (#280) Co-authored-by: Simeon Simeonoff <[email protected]> * feat(tooltip): indigo design updates (#281) Co-authored-by: Simeon Simeonoff <[email protected]> * refactor(stepper): update indigo schema colors to match the latest UI kit (#282) Co-authored-by: Simeon Simeonoff <[email protected]> * refactor(rating): update indigo schema colors to match the latest UI kit (#285) * refactor(toolbar): update indigo schema colors to match the latest UI kit (#288) Co-authored-by: Simeon Simeonoff <[email protected]> * Revert "refactor(toolbar): update indigo schema colors to match the latest UI…" (#291) This reverts commit 80d8848. * fix(tooltip): background opacity * fix(stepper): change the hover and focus colors on all steps in light and dark mode. * fix(stepper): fix dark mode schema colors for all states --------- Co-authored-by: Silvia Ivanova <[email protected]> Co-authored-by: Marin Popov <[email protected]> Co-authored-by: sivanova <[email protected]> Co-authored-by: desig9stein <[email protected]>
IgniteUI · Jul 2, 2024 · 4e4dae1 · 4e4dae1
1 parent dd1f8de
commit 4e4dae1
Show file tree

Hide file tree

Showing 10 changed files with 796 additions and 71 deletions.
diff --git a/sass/themes/schemas/components/dark/_rating.scss b/sass/themes/schemas/components/dark/_rating.scss
@@ -56,6 +56,57 @@ $dark-fluent-rating: extend(
 $dark-bootstrap-rating: $bootstrap-rating;
 
 /// Generates a dark indigo rating schema.
+/// @prop {Map} label-color [contrast-color: ('gray', 50, .8)] - sets the color for the label.
+/// @prop {Map} value-label [contrast-color: ('gray', 50, .8)] - sets the color for the value label.
+/// @prop {Map} symbol-empty-color [color: ('gray', 300)] - sets the idle color for the symbol when it is a plane text.
+/// @prop {Map} disabled-label-color [color: ('contrast-color', 50, .2)] - sets the color for the label in disabled state.
+/// @prop {Map} disabled-value-label [color: ('contrast-color', 50, .2)] - sets the color for the value in disabled state.
+/// @prop {Map} disabled-empty-symbol-color [color: ('gray', 300, .4)] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @type {Map}
 /// @requires $indigo-rating
-$dark-indigo-rating: $indigo-rating;
+$dark-indigo-rating: extend(
+    $indigo-rating,
+    (
+        label-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        value-label: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        symbol-empty-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        disabled-label-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-value-label: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-empty-symbol-color: (
+            color: (
+                'gray',
+                300,
+                0.4,
+            ),
+        ),
+    )
+);