feat(list): add selected item colors (#391)

* feat(list): add selected item colors * feat(list): add selected colors for the dark themes * refactor(list): add selected text-color for bootstrap
IgniteUI · Feb 27, 2025 · 2ccea11 · 2ccea11
1 parent 9cce63d
commit 2ccea11
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 14 deletions.
diff --git a/sass/themes/schemas/components/dark/_list.scss b/sass/themes/schemas/components/dark/_list.scss
@@ -11,6 +11,7 @@
 /// @type {Map}
 /// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
+/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
 $base-dark-list: (
     item-background-hover: (
         color: (
@@ -25,6 +26,13 @@ $base-dark-list: (
             100,
         ),
     ),
+
+    item-background-selected: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
 );
 
 /// Generates a dark material list schema based.
@@ -45,6 +53,7 @@ $dark-fluent-list: extend($fluent-list, $base-dark-list);
 /// @prop {Map} item-background [color: ('gray', 50)] - The list item background color.
 /// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
+/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
 /// @prop {Map} header-background [color: ('gray', 50)] - The list header background color.
 /// @requires $bootstrap-list
 $dark-bootstrap-list: extend(
@@ -78,6 +87,13 @@ $dark-bootstrap-list: extend(
             ),
         ),
 
+        item-background-selected: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         header-background: (
             color: (
                 'gray',
@@ -92,18 +108,23 @@ $dark-bootstrap-list: extend(
 /// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The list header text color.
 /// @prop {Map} item-background-hover [color: ('primary', 400, .3)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
+/// @prop {Map} item-background-selected [color: ('primary')] - The selected list item background color.
 /// @prop {Map} item-text-color [contrast-color: ('gray', 50, .9)] - The list item text color.
 /// @prop {Map} item-text-color-hover [contrast-color: ('gray', 50)] - The list item text color.
 /// @prop {Map} item-text-color-active [contrast-color: ('gray', 50)] - The active list item text color.
+/// @prop {Map} item-text-color-selected [contrast-color: ('gray', 50)] - The selected list item text color.
 /// @prop {Map} item-subtitle-color [contrast-color: ('gray', 50, .7)] - The list item subtitle color.
 /// @prop {Map} item-subtitle-color-hover [contrast-color: ('gray', 50, .8)] - The list item subtitle hover color.
 /// @prop {Map} item-subtitle-color-active [contrast-color: ('gray', 50, .8)] - The list item subtitle active color.
+/// @prop {Map} item-subtitle-color-selected [contrast-color: ('gray', 50, .8)] - The list item subtitle selected color.
 /// @prop {Map} item-thumbnail-color [contrast-color: ('gray', 50, .6)] - The list item thumbnail color.
 /// @prop {Map} item-thumbnail-color-hover [contrast-color: ('gray', 50, .8)] - The list item thumbnail hover color.
 /// @prop {Map} item-thumbnail-color-active [contrast-color: ('gray', 50, .8)] - The list item thumbnail active color.
+/// @prop {Map} item-thumbnail-color-selected [contrast-color: ('gray', 50, .8)] - The list item thumbnail selected color.
 /// @prop {Map} item-action-color [contrast-color: ('gray', 50, .6)] - The list item action color.
 /// @prop {Map} item-action-color-hover [contrast-color: ('gray', 50, .8)] - The list item action hover color.
 /// @prop {Map} item-action-color-active [contrast-color: ('gray', 50, .8)] - The list item action active color.
+/// @prop {Map} item-action-color-selected [contrast-color: ('gray', 50, .8)] - The list item action selected color.
 /// @requires $indigo-list
 $dark-indigo-list: extend(
     $indigo-list,
@@ -130,6 +151,12 @@ $dark-indigo-list: extend(
             ),
         ),
 
+        item-background-selected: (
+            color: (
+                'primary',
+            ),
+        ),
+
         item-text-color: (
             contrast-color: (
                 'gray',
@@ -152,6 +179,13 @@ $dark-indigo-list: extend(
             ),
         ),
 
+        item-text-color-selected: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
         item-subtitle-color: (
             contrast-color: (
                 'gray',
@@ -176,6 +210,14 @@ $dark-indigo-list: extend(
             ),
         ),
 
+        item-subtitle-color-selected: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
         item-thumbnail-color: (
             contrast-color: (
                 'gray',
@@ -200,6 +242,14 @@ $dark-indigo-list: extend(
             ),
         ),
 
+        item-thumbnail-color-selected: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
         item-action-color: (
             contrast-color: (
                 'gray',
@@ -223,5 +273,13 @@ $dark-indigo-list: extend(
                 0.8,
             ),
         ),
+
+        item-action-color-selected: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
     )
 );
diff --git a/sass/themes/schemas/components/light/_list.scss b/sass/themes/schemas/components/light/_list.scss
@@ -15,23 +15,29 @@
 /// @prop {Map} item-background [color: 'surface'] - The list item background color.
 /// @prop {Map} item-background-hover [color: ('gray', 200)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('gray', 200)] - The active list item background color.
+/// @prop {Map} item-background-selected [color: ('gray', 200)] - The selected list item background color.
 /// @prop {Map} item-text-color [color: ('gray', 700)] - The list item text color.
-/// @prop {Map} item-text-color-hover [color: ('gray', 700)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 700)] - The list item text color on hover.
 /// @prop {Map} item-text-color-active [color: ('gray', 700)] - The active list item text color.
+/// @prop {Map} item-text-color-selected [color: ('gray', 700)] - The selected list item text color.
 /// @prop {Map} item-title-color [color: ('gray', 900)] - The list item title color.
 /// @prop {Map} item-title-color-hover [color: ('gray', 900)] - The list item title hover color.
 /// @prop {Map} item-title-color-active [color: ('gray', 900)] - The list item title active color.
+/// @prop {Map} item-title-color-selected [color: ('gray', 900)] - The list item title selected color.
 /// @prop {Map} item-subtitle-color [color: ('gray', 700)] - The list item subtitle color.
 /// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
 /// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
-/// @prop {Color} item-action-color ["'currentColor'"] - The list item action color.
-/// @prop {Color} item-action-color-hover ["'currentColor'"] - The list item action hover color.
-/// @prop {Color} item-action-color-active ["'currentColor'"] - The list item action active color.
-/// @prop {Color} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
-/// @prop {Color} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
-/// @prop {Color} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
-/// @prop {List} border-radius [()] - The border radius used for list component.
-/// @prop {List} item-border-radius [()] - The border radius used for list item.
+/// @prop {Map} item-subtitle-color-selected [color: ('gray', 700)] - The list item subtitle selected color.
+/// @prop {String} item-action-color ["'currentColor'"] - The list item action color.
+/// @prop {String} item-action-color-hover ["'currentColor'"] - The list item action hover color.
+/// @prop {String} item-action-color-active ["'currentColor'"] - The list item action active color.
+/// @prop {String} item-action-color-selected ["'currentColor'"] - The list item action selected color.
+/// @prop {String} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
+/// @prop {String} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
+/// @prop {String} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
+/// @prop {String} item-thumbnail-color-selected ["'currentColor'"] - The list item thumbnail selected color.
+/// @prop {Map} border-radius [border-radius: (rem(0), rem(0), rem(24px))] - The border radius used for list component.
+/// @prop {Map} item-border-radius [border-radius: (rem(0), rem(0), rem(24px))] - The border radius used for list item.
 /// @prop {Color} border-color [transparent] - The list border color.
 /// @prop {Number} border-width [0] - The list border width.
 /// @prop {Number} default-size [2] - The default size used for the list component.
@@ -69,6 +75,13 @@ $light-list: (
         ),
     ),
 
+    item-background-selected: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
     item-text-color: (
         color: (
             'gray',
@@ -90,6 +103,13 @@ $light-list: (
         ),
     ),
 
+    item-text-color-selected: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
     item-title-color: (
         color: (
             'gray',
@@ -111,12 +131,21 @@ $light-list: (
         ),
     ),
 
+    item-title-color-selected: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
     item-action-color: "'currentColor'",
 
     item-action-color-hover: "'currentColor'",
 
     item-action-color-active: "'currentColor'",
 
+    item-action-color-selected: "'currentColor'",
+
     item-subtitle-color: (
         color: (
             'gray',
@@ -138,12 +167,21 @@ $light-list: (
         ),
     ),
 
+    item-subtitle-color-selected: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
     item-thumbnail-color: "'currentColor'",
 
     item-thumbnail-color-hover: "'currentColor'",
 
     item-thumbnail-color-active: "'currentColor'",
 
+    item-thumbnail-color-selected: "'currentColor'",
+
     border-color: transparent,
 
     border-width: 0,
@@ -237,9 +275,10 @@ $fluent-list: extend(
 /// @prop {Map} header-background [contrast-color: ('gray', 900)] - The list header background color.
 /// @prop {Map} item-background [contrast-color: ('gray', 900)] - The list item background color.
 /// @prop {Map} item-text-color [color: ('gray', 900)] - The list item text color.
-/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
 /// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for list component.
+/// @prop {Map} item-text-color-selected [color: ('gray', 900)] - The selected list item text color.
+/// @prop {Map} border-radius [border-radius: (rem(4px), rem(0), rem(24px))] - The border radius used for list component.
 /// @prop {Map} border-color [color: ('gray', 300)] - The list border color.
 /// @prop {Number} border-width [rem(1px)] - The list border width.
 /// @prop {Map} typography [
@@ -295,6 +334,13 @@ $bootstrap-list: extend(
             ),
         ),
 
+        item-text-color-selected: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
                 rem(4px),
@@ -327,19 +373,24 @@ $bootstrap-list: extend(
 /// @prop {Map} header-text-color [color: ('gray', 600)] - The list header text color.
 /// @prop {Color} item-background [transparent] - The list item background color.
 /// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
-/// @prop {Map} item-background-active [ color: ('primary', 300, .3)] - The active list item background color.
+/// @prop {Map} item-background-active [color: ('primary', 300, .3)] - The active list item background color.
+/// @prop {Map} item-background-selected [color: ('primary', 300, .3)] - The selected list item background color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
-/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
-/// @prop {Map} item-text-color-active [color: ('gray', 800)] - The active list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
+/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
+/// @prop {Map} item-text-color-selected [color: ('gray', 900)] - The selected list item text color.
 /// @prop {Map} item-subtitle-color [color: ('gray', 600)] - The list item subtitle color.
 /// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
 /// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
+/// @prop {Map} item-subtitle-color-selected [color: ('gray', 700)] - The list item subtitle selected color.
 /// @prop {Map} item-action-color [color: ('gray', 600)] - The list item action color.
 /// @prop {Map} item-action-color-hover [color: ('gray', 700)] - The list item action hover color.
 /// @prop {Map} item-action-color-active [color: ('gray', 700)] - The list item action active color.
+/// @prop {Map} item-action-color-selected [color: ('gray', 700)] - The list item action selected color.
 /// @prop {Map} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
 /// @prop {Map} item-thumbnail-color-hover [color: ('gray', 700)] - The list item thumbnail hover color.
 /// @prop {Map} item-thumbnail-color-active [color: ('gray', 700)] - The list item thumbnail active color.
+/// @prop {Map} item-thumbnail-color-selected [color: ('gray', 700)] - The list item thumbnail selected color.
 /// @prop {Number} item-border-radius [rem(4px)] - The border radius used for list item.
 /// @prop {Map} typography [
 ///   header: (value: 'overline'),
@@ -380,6 +431,14 @@ $indigo-list: extend(
             ),
         ),
 
+        item-background-selected: (
+            color: (
+                'primary',
+                300,
+                0.3,
+            ),
+        ),
+
         item-text-color: (
             color: (
                 'gray',
@@ -401,6 +460,13 @@ $indigo-list: extend(
             ),
         ),
 
+        item-text-color-selected: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
         item-action-color: (
             color: (
                 'gray',
@@ -422,6 +488,13 @@ $indigo-list: extend(
             ),
         ),
 
+        item-action-color-selected: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         item-subtitle-color: (
             color: (
                 'gray',
@@ -443,6 +516,13 @@ $indigo-list: extend(
             ),
         ),
 
+        item-subtitle-color-selected: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         item-thumbnail-color: (
             color: (
                 'gray',
@@ -464,6 +544,13 @@ $indigo-list: extend(
             ),
         ),
 
+        item-thumbnail-color-selected: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         item-border-radius: rem(4px),
         typography: (
             header: (