fix(fluent-theme): accessibility and contrast issues

sass/themes/schemas/components/dark/_bottom-nav.scss

@@ -36,10 +36,24 @@ $dark-material-bottom-nav: extend(
 
 /// Generates a dark fluent bottom-nav schema.
 /// @type {Map}
+/// @prop {Map} label-selected-color [color: ('primary', 300)] - The label color used for the selected item.
+/// @prop {Map} icon-selected-color [color: ('primary', 300)] - The icon color used for the selected item.
 /// @requires $fluent-bottom-nav
 $dark-fluent-bottom-nav: extend(
     $fluent-bottom-nav,
     (
+        label-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        icon-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         _meta: (
             theme: 'fluent',
             variant: 'dark',

sass/themes/schemas/components/dark/_grid-summary.scss

@@ -54,10 +54,18 @@ $dark-material-grid-summary: extend(
 
 /// Generates a dark fluent grid-summary schema.
 /// @type {Map}
+/// @prop {Map} label-color [color: ('primary', 300)] - The summaries label color.
 /// @requires {Map} $fluent-grid-summary
 $dark-fluent-grid-summary: extend(
     $fluent-grid-summary,
     (
+        label-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'dark',

sass/themes/schemas/components/dark/_grid-toolbar.scss

@@ -29,10 +29,18 @@ $dark-material-grid-toolbar: extend(
 
 /// Generates a dark fluent grid-toolbar schema.
 /// @type {Map}
+/// @prop {Map} title-text-color [color: ('gray', 600)] - The toolbar title text color.
 /// @requires $fluent-grid-toolbar
 $dark-fluent-grid-toolbar: extend(
     $fluent-grid-toolbar,
     (
+        title-text-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'dark',

sass/themes/schemas/components/dark/_grid.scss

@@ -252,15 +252,17 @@ $dark-material-grid: extend(
 );
 
 /// Generates a dark fluent grid schema based on a mix of $fluent-grid and $base-dark-grid.
+/// @type {Map}
 /// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection).
 /// @prop {Map} row-selected-background [color: ('gray', 100)] - The selected row background color.
 /// @prop {Map} row-selected-hover-background [color: ('gray', 200)] - The selected row background color on hover.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
-///
+/// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
 /// @requires $fluent-grid
 /// @requires $base-dark-grid
 $dark-fluent-grid: extend(
@@ -324,13 +326,28 @@ $dark-fluent-grid: extend(
             ),
         ),
 
+        grouparea-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
         group-row-background: (
             color: (
                 'gray',
                 100,
                 0.5,
             ),
         ),
+
+        group-count-text-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'dark',

sass/themes/schemas/components/dark/_list.scss

@@ -52,12 +52,20 @@ $dark-material-list: extend(
 
 /// Generates a dark fluent list schema.
 /// @type {Map}
+/// @prop {Map} header-text-color [color: ('secondary', 500)] - The list header text color.
 /// @requires $fluent-list
 /// @requires $base-dark-list
 $dark-fluent-list: extend(
     $fluent-list,
     $base-dark-list,
     (
+        header-text-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'dark',

sass/themes/schemas/components/dark/_stepper.scss

@@ -15,10 +15,10 @@
 /// @prop {Map} invalid-step-hover-background [color: ('gray', 100, .3)] - The background of the invalid step header on hover.
 /// @prop {Map} current-step-hover-background [color: ('gray', 100, .3)] - The background of the current step header on hover.
 /// @prop {Map} complete-step-hover-background [color: ('gray', 100, .3)] - The background of the complete step header on hover.
-/// @prop {Map} step-focus-background [color: ('gray', 100, .5)] - The background of the step header on hover.
-/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on hover.
-/// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on hover.
-/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on hover.
+/// @prop {Map} step-focus-background [color: ('gray', 100, .5)] - The background of the step header on focus.
+/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on focus.
+/// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on focus.
+/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on focus.
 $base-stepper: (
     step-hover-background: (
         color: (
@@ -178,6 +178,16 @@ $dark-material-stepper: extend(
 /// Generates a dark fluent stepper schema
 /// @type {Map}
 /// @prop {Map} complete-indicator-background [color: ('gray', 100)] - The background color of the completed step indicator.
+/// @prop {Map} step-focus-background [color: ('gray', 100, .4)] - The background of the step header on focus.
+/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .4)] - The background of the invalid step header on focus.
+/// @prop {Map} current-step-focus-background [color: ('gray', 100, .4)] - The background of the current step header on focus.
+/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .4)] - The background of the complete step header on focus.
+/// @prop {Map} invalid-title-color [color: ('error', 50)] - The color of the invalid step title.
+/// @prop {Map} invalid-title-hover-color [color: ('error', 50)] - The color of the invalid step title on hover.
+/// @prop {Map} invalid-title-focus-color [color: ('error', 50)] - The color of the invalid step title on focus.
+/// @prop {Map} invalid-subtitle-color [color: ('error', 700)] - The text of the invalid step subtitle.
+/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 50)] - The color of the invalid step subtitle on hover.
+/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 50)] - The color of the invalid step subtitle on focus.
 /// @requires $fluent-stepper
 /// @requires $base-stepper
 $dark-fluent-stepper: extend(
@@ -190,6 +200,70 @@ $dark-fluent-stepper: extend(
                 100,
             ),
         ),
+        step-focus-background: (
+            color: (
+                'gray',
+                100,
+                0.4,
+            ),
+        ),
+        complete-step-focus-background: (
+            color: (
+                'gray',
+                100,
+                0.4,
+            ),
+        ),
+        current-step-focus-background: (
+            color: (
+                'gray',
+                100,
+                0.4,
+            ),
+        ),
+        invalid-step-focus-background: (
+            color: (
+                'gray',
+                100,
+                0.4,
+            ),
+        ),
+        invalid-title-color: (
+            color: (
+                'error',
+                50,
+            ),
+        ),
+        invalid-title-hover-color: (
+            color: (
+                'error',
+                50,
+            ),
+        ),
+        invalid-title-focus-color: (
+            color: (
+                'error',
+                50,
+            ),
+        ),
+        invalid-subtitle-color: (
+            color: (
+                'error',
+                50,
+            ),
+        ),
+        invalid-subtitle-hover-color: (
+            color: (
+                'error',
+                50,
+            ),
+        ),
+        invalid-subtitle-focus-color: (
+            color: (
+                'error',
+                50,
+            ),
+        ),
         _meta: (
             theme: 'fluent',
             variant: 'dark',

sass/themes/schemas/components/light/_grid-summary.scss

@@ -92,6 +92,7 @@ $material-grid-summary: extend(
 
 /// Generates a fluent grid-summary schema.
 /// @type {Map}
+/// @prop {Map} label-color [color: ('primary', 600)] - The summaries label color.
 /// @prop {Map} background-color [color: ('surface')] - The summaries background color.
 /// @prop {Map} border-color [color: ('gray', 100)] - The summaries border color.
 /// @prop {Map} result-color [contrast-color: ('surface')] - The summaries value/result color.
@@ -100,6 +101,13 @@ $material-grid-summary: extend(
 $fluent-grid-summary: extend(
     $light-grid-summary,
     (
+        label-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
         background-color: (
             color: (
                 'surface',

sass/themes/schemas/components/light/_grid-toolbar.scss

@@ -107,13 +107,22 @@ $material-grid-toolbar: extend(
 /// Generates a fluent grid-toolbar schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: 'surface'] - The toolbar background color.
+/// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color.
 /// @requires {Map} $light-grid-toolbar
 $fluent-grid-toolbar: extend(
     $light-grid-toolbar,
     (
         background-color: (
             color: 'surface',
         ),
+
+        title-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'light',

sass/themes/schemas/components/light/_grid.scss

@@ -740,8 +740,10 @@ $material-grid: extend(
 /// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border.
 /// @prop {Map} cell-active-border-color [color: ('primary', 100)] - The active(focused) cell border color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
+/// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
 /// @prop {Map} filtering-header-text-color [color: ('gray', 900)] - The text color of the filtered column header.
 /// @prop {Map} row-ghost-background [color: 'surface'] - The background color of the dragged row.
 /// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid.
@@ -836,6 +838,13 @@ $fluent-grid: extend(
             color: 'surface',
         ),
 
+        grouparea-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         group-row-background: (
             color: (
                 'gray',
@@ -850,6 +859,13 @@ $fluent-grid: extend(
             ),
         ),
 
+        group-count-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         filtering-header-text-color: (
             color: (
                 'gray',

sass/themes/schemas/components/light/_list.scss

@@ -238,6 +238,7 @@ $material-list: extend(
 
 /// Generates a fluent list schema.
 /// @type {Map}
+/// @prop {Map} header-text-color [color: ('secondary', 700)] - The list header text color.
 /// @prop {Map} border-color [color: ('gray', 200)] - The list border color.
 /// @prop {Number} border-width [rem(1px)] - The list border width.
 /// @prop {Map} typography [
@@ -250,6 +251,12 @@ $material-list: extend(
 $fluent-list: extend(
     $light-list,
     (
+        header-text-color: (
+            color: (
+                'secondary',
+                700,
+            ),
+        ),
         border-color: (
             color: (
                 'gray',

sass/themes/schemas/components/light/_stepper.scss

@@ -827,7 +827,7 @@ $bootstrap-stepper: extend(
 /// @prop {Color} indicator-outline [transparent] - The outline color of the incomplete step indicator.
 /// @prop {Map} indicator-color [color: ('gray', 800)] - The text color of the incomplete step indicator.
 /// @prop {Map} step-hover-background [color: ('gray', 900, .05)] - The background of the step header on hover.
-/// @prop {Map} step-focus-background [color: ('gray', 900,. 05)] - The background of the step header on focus.
+/// @prop {Map} step-focus-background [color: ('gray', 900, .05)] - The background of the step header on focus.
 /// @prop {Map} current-step-hover-background [color: ('gray', 900, .05)] - The background of the current step header on hover.
 /// @prop {Map} current-step-focus-background [color: ('gray', 900, .05)] - The background of the current step header on focus.
 /// @prop {Map} complete-step-hover-background [color: ('gray', 900, .05)] - The background of the complete step header on hover.