diff --git a/sass/themes/schemas/components/dark/_bottom-nav.scss b/sass/themes/schemas/components/dark/_bottom-nav.scss index 16e9e878..e4da4b96 100644 --- a/sass/themes/schemas/components/dark/_bottom-nav.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_grid-summary.scss b/sass/themes/schemas/components/dark/_grid-summary.scss index b422d30a..4174256e 100644 --- a/sass/themes/schemas/components/dark/_grid-summary.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_grid-toolbar.scss b/sass/themes/schemas/components/dark/_grid-toolbar.scss index c43d37c7..dbbf389c 100644 --- a/sass/themes/schemas/components/dark/_grid-toolbar.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_grid.scss b/sass/themes/schemas/components/dark/_grid.scss index 19bdff8f..f7c0486c 100644 --- a/sass/themes/schemas/components/dark/_grid.scss +++ b/sass/themes/schemas/components/dark/_grid.scss @@ -252,6 +252,7 @@ $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. @@ -259,8 +260,9 @@ $dark-material-grid: extend( /// @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,6 +326,13 @@ $dark-fluent-grid: extend( ), ), + grouparea-color: ( + color: ( + 'gray', + 500, + ), + ), + group-row-background: ( color: ( 'gray', @@ -331,6 +340,14 @@ $dark-fluent-grid: extend( 0.5, ), ), + + group-count-text-color: ( + color: ( + 'gray', + 600, + ), + ), + _meta: ( theme: 'fluent', variant: 'dark', diff --git a/sass/themes/schemas/components/dark/_list.scss b/sass/themes/schemas/components/dark/_list.scss index cbc1fa06..29317bba 100644 --- a/sass/themes/schemas/components/dark/_list.scss +++ b/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', diff --git a/sass/themes/schemas/components/dark/_stepper.scss b/sass/themes/schemas/components/dark/_stepper.scss index f5385f63..cc2f251c 100644 --- a/sass/themes/schemas/components/dark/_stepper.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_grid-summary.scss b/sass/themes/schemas/components/light/_grid-summary.scss index 038f937c..643fae74 100644 --- a/sass/themes/schemas/components/light/_grid-summary.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_grid-toolbar.scss b/sass/themes/schemas/components/light/_grid-toolbar.scss index 3bdaaa6b..1586f73a 100644 --- a/sass/themes/schemas/components/light/_grid-toolbar.scss +++ b/sass/themes/schemas/components/light/_grid-toolbar.scss @@ -107,6 +107,7 @@ $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, @@ -114,6 +115,14 @@ $fluent-grid-toolbar: extend( background-color: ( color: 'surface', ), + + title-text-color: ( + color: ( + 'gray', + 700, + ), + ), + _meta: ( theme: 'fluent', variant: 'light', diff --git a/sass/themes/schemas/components/light/_grid.scss b/sass/themes/schemas/components/light/_grid.scss index 0f73030b..8e5fc927 100644 --- a/sass/themes/schemas/components/light/_grid.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_list.scss b/sass/themes/schemas/components/light/_list.scss index 4e74c6be..c36bfaae 100644 --- a/sass/themes/schemas/components/light/_list.scss +++ b/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', diff --git a/sass/themes/schemas/components/light/_stepper.scss b/sass/themes/schemas/components/light/_stepper.scss index 6d570517..c9abb9c9 100644 --- a/sass/themes/schemas/components/light/_stepper.scss +++ b/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.