diff --git a/sass/themes/schemas/components/dark/_bottom-nav.scss b/sass/themes/schemas/components/dark/_bottom-nav.scss index 0124230f..16e9e878 100644 --- a/sass/themes/schemas/components/dark/_bottom-nav.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_expansion-panel.scss b/sass/themes/schemas/components/dark/_expansion-panel.scss index bde31a59..fd5bbe66 100644 --- a/sass/themes/schemas/components/dark/_expansion-panel.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_grid-summary.scss b/sass/themes/schemas/components/dark/_grid-summary.scss index 3fba4fed..b422d30a 100644 --- a/sass/themes/schemas/components/dark/_grid-summary.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_grid-toolbar.scss b/sass/themes/schemas/components/dark/_grid-toolbar.scss index 99872ad0..c43d37c7 100644 --- a/sass/themes/schemas/components/dark/_grid-toolbar.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_grid.scss b/sass/themes/schemas/components/dark/_grid.scss index c260e83f..19bdff8f 100644 --- a/sass/themes/schemas/components/dark/_grid.scss +++ b/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', ), diff --git a/sass/themes/schemas/components/dark/_list.scss b/sass/themes/schemas/components/dark/_list.scss index 0a520590..cbc1fa06 100644 --- a/sass/themes/schemas/components/dark/_list.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_stepper.scss b/sass/themes/schemas/components/dark/_stepper.scss index e6b252d4..f5385f63 100644 --- a/sass/themes/schemas/components/dark/_stepper.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_tree.scss b/sass/themes/schemas/components/dark/_tree.scss index d8fe35ab..855854c5 100644 --- a/sass/themes/schemas/components/dark/_tree.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_expansion-panel.scss b/sass/themes/schemas/components/light/_expansion-panel.scss index c5a8827c..8339dc2a 100644 --- a/sass/themes/schemas/components/light/_expansion-panel.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_grid-summary.scss b/sass/themes/schemas/components/light/_grid-summary.scss index 4f39e1b5..038f937c 100644 --- a/sass/themes/schemas/components/light/_grid-summary.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_grid.scss b/sass/themes/schemas/components/light/_grid.scss index 78a00e16..0f73030b 100644 --- a/sass/themes/schemas/components/light/_grid.scss +++ b/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', ), diff --git a/sass/themes/schemas/components/light/_stepper.scss b/sass/themes/schemas/components/light/_stepper.scss index 476584d0..6d570517 100644 --- a/sass/themes/schemas/components/light/_stepper.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_tree.scss b/sass/themes/schemas/components/light/_tree.scss index bf90c427..c10bdee2 100644 --- a/sass/themes/schemas/components/light/_tree.scss +++ b/sass/themes/schemas/components/light/_tree.scss @@ -200,7 +200,7 @@ $fluent-tree: extend( /// Generates a light bootstrap tree schema. /// @type {Map} -/// @prop {Map} foreground-active [contrast-color: ('primary')] - The color used for the content in active state of the tree node. +/// @prop {Map} foreground-active [color: ('primary', 800)] - The color used for the content in active state of the tree node. /// @prop {Map} foreground-selected [contrast-color: ('primary', 600)] - The color used for the content of the selected tree node. /// @prop {Map} background-active-selected [color: ('primary', 600)] - The background color used for the active selected tree node. /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node. @@ -212,6 +212,7 @@ $bootstrap-tree: extend( foreground-active: ( color: ( 'primary', + 800, ), ), foreground-selected: (