refactor(bootstrap-theme): accessibility and contrast issues

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

@@ -49,10 +49,26 @@ $dark-fluent-bottom-nav: extend(
 
 /// Generates a dark bootstrap 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 $bootstrap-bottom-nav
 $dark-bootstrap-bottom-nav: extend(
     $bootstrap-bottom-nav,
     (
+        label-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        icon-selected-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',

sass/themes/schemas/components/dark/_expansion-panel.scss

@@ -53,6 +53,7 @@ $dark-fluent-expansion-panel: extend(
 /// Generates a dark bootstrap expansion panel schema based on a mix of $bootstrap-expansion-panel and $base-dark-expansion-panel.
 /// @type {Map}
 /// @prop {Map} header-background [color: ('gray', 50)] - The panel header background color.
+/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
 /// @prop {Map} body-background [color: ('gray', 50)] - The panel body background color.
 /// @requires $bootstrap-expansion-panel
 /// @requires $base-dark-expansion-panel
@@ -67,6 +68,13 @@ $dark-bootstrap-expansion-panel: extend(
             ),
         ),
 
+        header-description-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         body-background: (
             color: (
                 'gray',

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

@@ -67,12 +67,20 @@ $dark-fluent-grid-summary: extend(
 
 /// Generates a dark bootstrap grid-summary schema.
 /// @type {Map}
+/// @prop {Map} label-color [color: ('primary', 200)] - The summaries label color.
 /// @prop {Map} background-color [color: ('gray', 100)] - The summaries background color.
 /// @prop {Map} result-color [contrast-color: ('gray', 100)] - The summaries value/result color.
 /// @requires {Map} $bootstrap-grid-summary
 $dark-bootstrap-grid-summary: extend(
     $bootstrap-grid-summary,
     (
+        label-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
         background-color: (
             color: (
                 'gray',

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

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

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

@@ -340,6 +340,9 @@ $dark-fluent-grid: extend(
 
 /// Generates a dark bootstrap grid schema based on a mix of $bootstrap-grid and $base-dark-grid.
 /// @type {Map}
+/// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
+/// @prop {Map} group-label-icon [color: ('primary', 300)] - The grid group row icon color.
+/// @prop {Map} group-label-column-name-text [color: ('primary', 300)] - The grid group row column name text color.
 /// @prop {Map} group-row-background [color: 'surface'] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: 'surface'] - The drop area background on drop color.
 /// @prop {Map} header-background [color: ('gray', 50)] - The table header background color.
@@ -354,6 +357,27 @@ $dark-bootstrap-grid: extend(
     $bootstrap-grid,
     $base-dark-grid,
     (
+        group-count-text-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        group-label-icon: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        group-label-column-name-text: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
         group-row-background: (
             color: 'surface',
         ),

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

@@ -73,6 +73,7 @@ $dark-fluent-list: extend(
 /// @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.
+/// @prop {Map} header-text-color [color: ('secondary', 400)] - The list header text color.
 /// @requires $bootstrap-list
 $dark-bootstrap-list: extend(
     $bootstrap-list,
@@ -118,6 +119,13 @@ $dark-bootstrap-list: extend(
                 50,
             ),
         ),
+
+        header-text-color: (
+            color: (
+                'secondary',
+                400,
+            ),
+        ),
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',

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

@@ -199,9 +199,14 @@ $dark-fluent-stepper: extend(
 
 /// Generates a dark bootstrap stepper schema.
 /// @type {Map}
-/// @prop {Map} indicator-outline [color: (color: ('gray', 200)] - The outline color of the incomplete step indicator.
-/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
 /// @prop {Map} step-separator-color [color: ('gray', 100)] - The separator border-color of between the steps.
+/// @prop {Map} invalid-title-color [color: ('error', 400)] - The color of the invalid step title.
+/// @prop {Map} invalid-title-hover-color [color: ('error', 400)] - The color of the invalid step title on hover.
+/// @prop {Map} invalid-title-focus-color [color: ('error', 300)] - The color of the invalid step title on focus.
+/// @prop {Map} invalid-subtitle-color [color: ('error', 400)] - The text of the invalid step subtitle.
+/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 400)] - The color of the invalid step subtitle on hover.
+/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 300)] - The color of the invalid step subtitle on focus.
+/// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 900)] - The color of the invalid step indicator.
 /// @requires $bootstrap-stepper
 /// @requires $base-stepper
 $dark-bootstrap-stepper: extend(
@@ -215,19 +220,55 @@ $dark-bootstrap-stepper: extend(
             ),
         ),
 
-        indicator-outline: (
+        invalid-title-color: (
             color: (
-                'gray',
-                200,
+                'error',
+                400,
             ),
         ),
 
-        disabled-indicator-outline: (
+        invalid-title-hover-color: (
             color: (
-                'gray',
+                'error',
+                400,
+            ),
+        ),
+
+        invalid-title-focus-color: (
+            color: (
+                'error',
+                300,
+            ),
+        ),
+
+        invalid-subtitle-color: (
+            color: (
+                'error',
+                400,
+            ),
+        ),
+
+        invalid-subtitle-hover-color: (
+            color: (
+                'error',
+                400,
+            ),
+        ),
+
+        invalid-subtitle-focus-color: (
+            color: (
+                'error',
                 300,
             ),
         ),
+
+        invalid-indicator-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',

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

@@ -106,6 +106,7 @@ $dark-fluent-tree: extend(
 /// Generates a dark bootstrap tree schema.
 /// @type {Map}
 /// @prop {Map} hover-color [color: ('gray', 500, .3)] - The background color used for the tree node on hover.
+/// @prop {Map} foreground-active [contrast-color: ('surface')] - The color used for the content in active state of the tree node.
 /// @requires $bootstrap-tree
 /// @requires $base-dark-tree
 $dark-bootstrap-tree: extend(
@@ -119,6 +120,11 @@ $dark-bootstrap-tree: extend(
                 0.3,
             ),
         ),
+        foreground-active: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',

sass/themes/schemas/components/light/_expansion-panel.scss

@@ -177,7 +177,6 @@ $fluent-expansion-panel: extend(
 /// Generates a bootstrap expansion panel schema.
 /// @type {Map}
 /// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
-/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
 /// @requires {Map} $light-expansion-panel
 $bootstrap-expansion-panel: extend(
     $light-expansion-panel,
@@ -189,13 +188,6 @@ $bootstrap-expansion-panel: extend(
             ),
         ),
 
-        header-description-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         _meta: (
             theme: 'bootstrap',
             variant: 'light',

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

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

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

@@ -913,6 +913,9 @@ $fluent-grid: extend(
 /// Generates a bootstrap grid schema.
 /// @type {Map}
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
+/// @prop {Map} group-label-icon [color: ('primary', 600)] - The grid group row icon color.
+/// @prop {Map} group-label-column-name-text [color: ('primary', 600)] - The grid group row column name text color.
+/// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
 /// @prop {Map} header-background [color: 'surface'] - The table header background color.
 /// @prop {Map} header-text-color [contrast-color: 'surface'] - The table header text color.
 /// @prop {Map} header-selected-background [color: ('primary', 50)] - The table header background color when selected (ex. column selection).
@@ -930,6 +933,27 @@ $fluent-grid: extend(
 $bootstrap-grid: extend(
     $light-grid,
     (
+        group-count-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        group-label-icon: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        group-label-column-name-text: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
         grouparea-background: (
             color: 'surface',
         ),

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

@@ -638,13 +638,19 @@ $fluent-stepper: extend(
 
 /// Generates a bootstrap stepper schema.
 /// @type {Map}
-/// @prop {Map} indicator-outline [color: ('gray', 300)] - The outline color of the incomplete step indicator.
+/// @prop {Map} indicator-outline [color: ('gray', 400)] - The outline color of the incomplete step indicator.
 /// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
 /// @prop {Map} complete-indicator-background [color: ('gray', 300)] - The background color of the completed step indicator.
-/// @prop {Map} complete-indicator-outline [color: ('gray', 300)] - The outline color of the completed step indicator.
+/// @prop {Map} complete-indicator-outline [color: ('gray', 400)] - The outline color of the completed step indicator.
 /// @prop {Map} complete-indicator-color [color: ('gray', 300)] - The text color of the completed step indicator.
 /// @prop {String} step-separator-style ['solid'] - The separator border-style of between the steps.
 /// @prop {Map} step-hover-background [color: ('gray', 300, .5)] - The background of the step header on hover.
+/// @prop {Map} invalid-title-color [color: ('error', 800)] - The color of the invalid step title.
+/// @prop {Map} invalid-title-hover-color [color: ('error', 800)] - The color of the invalid step title on hover.
+/// @prop {Map} invalid-title-focus-color [color: ('error', 800)] - The color of the invalid step title on focus.
+/// @prop {Map} invalid-subtitle-color [color: ('error', 800)] - The text of the invalid step subtitle.
+/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 800)] - The color of the invalid step subtitle on hover.
+/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 800)] - The color of the invalid step subtitle on focus.
 /// @prop {Map} invalid-step-hover-background [color: ('gray', 300, .5)] - The background of the invalid step header on hover.
 /// @prop {Map} current-step-hover-background [color: ('gray', 300, .5)] - The background of the current step header on hover.
 /// @prop {Map} complete-step-hover-background [color: ('gray', 300, .5)] - The background of the complete step header on hover.
@@ -686,6 +692,42 @@ $bootstrap-stepper: extend(
                 0.5,
             ),
         ),
+        invalid-title-color: (
+            color: (
+                'error',
+                800,
+            ),
+        ),
+        invalid-title-hover-color: (
+            color: (
+                'error',
+                800,
+            ),
+        ),
+        invalid-title-focus-color: (
+            color: (
+                'error',
+                800,
+            ),
+        ),
+        invalid-subtitle-color: (
+            color: (
+                'error',
+                800,
+            ),
+        ),
+        invalid-subtitle-hover-color: (
+            color: (
+                'error',
+                800,
+            ),
+        ),
+        invalid-subtitle-focus-color: (
+            color: (
+                'error',
+                800,
+            ),
+        ),
         step-focus-background: (
             color: (
                 'gray',