From 796fd4539bcb8e034335d5408c40341be6155251 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 11 Nov 2025 10:39:10 +0200 Subject: [PATCH 1/2] refactor(bootstrap-theme): accessibility and contrast issues --- .../schemas/components/dark/_bottom-nav.scss | 16 +++++++ .../components/dark/_expansion-panel.scss | 8 ++++ .../components/dark/_grid-summary.scss | 8 ++++ .../components/dark/_grid-toolbar.scss | 8 ++++ .../themes/schemas/components/dark/_grid.scss | 24 ++++++++++ .../schemas/components/dark/_stepper.scss | 43 ++++++++++++++---- .../components/light/_expansion-panel.scss | 8 ---- .../components/light/_grid-summary.scss | 8 ++++ .../components/light/_grid-toolbar.scss | 4 +- .../schemas/components/light/_grid.scss | 24 ++++++++++ .../schemas/components/light/_stepper.scss | 45 ++++++++++++++++++- 11 files changed, 176 insertions(+), 20 deletions(-) diff --git a/sass/themes/schemas/components/dark/_bottom-nav.scss b/sass/themes/schemas/components/dark/_bottom-nav.scss index f3a71d5b..d23003bc 100644 --- a/sass/themes/schemas/components/dark/_bottom-nav.scss +++ b/sass/themes/schemas/components/dark/_bottom-nav.scss @@ -35,10 +35,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 fbbc78c2..d7a83fff 100644 --- a/sass/themes/schemas/components/dark/_grid-summary.scss +++ b/sass/themes/schemas/components/dark/_grid-summary.scss @@ -51,12 +51,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 c0279bd6..239f1bc2 100644 --- a/sass/themes/schemas/components/dark/_grid-toolbar.scss +++ b/sass/themes/schemas/components/dark/_grid-toolbar.scss @@ -35,10 +35,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 7dbca5d7..207fae22 100644 --- a/sass/themes/schemas/components/dark/_grid.scss +++ b/sass/themes/schemas/components/dark/_grid.scss @@ -299,6 +299,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. @@ -313,6 +316,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/_stepper.scss b/sass/themes/schemas/components/dark/_stepper.scss index 01834c11..84788778 100644 --- a/sass/themes/schemas/components/dark/_stepper.scss +++ b/sass/themes/schemas/components/dark/_stepper.scss @@ -129,9 +129,13 @@ $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')] - The color of the invalid step title. +/// @prop {Map} invalid-title-hover-color [color: ('error')] - The color of the invalid step title on hover. +/// @prop {Map} invalid-title-focus-color [color: ('error')] - The color of the invalid step title on focus. +/// @prop {Map} invalid-subtitle-color [color: ('error')] - The text of the invalid step subtitle. +/// @prop {Map} invalid-subtitle-hover-color [color: ('error')] - The color of the invalid step subtitle on hover. +/// @prop {Map} invalid-subtitle-focus-color [color: ('error')] - The color of the invalid step subtitle on focus. /// @requires $bootstrap-stepper /// @requires $base-stepper $dark-bootstrap-stepper: extend( @@ -145,19 +149,42 @@ $dark-bootstrap-stepper: extend( ), ), - indicator-outline: ( + invalid-title-color: ( color: ( - 'gray', - 200, + 'error', ), ), - disabled-indicator-outline: ( + invalid-title-hover-color: ( color: ( - 'gray', - 300, + 'error', ), ), + + invalid-title-focus-color: ( + color: ( + 'error', + ), + ), + + invalid-subtitle-color: ( + color: ( + 'error', + ), + ), + + invalid-subtitle-hover-color: ( + color: ( + 'error', + ), + ), + + invalid-subtitle-focus-color: ( + color: ( + 'error', + ), + ), + _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 fdc13070..ccbd4dbe 100644 --- a/sass/themes/schemas/components/light/_grid-summary.scss +++ b/sass/themes/schemas/components/light/_grid-summary.scss @@ -121,10 +121,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-toolbar.scss b/sass/themes/schemas/components/light/_grid-toolbar.scss index 584aaba7..4f265607 100644 --- a/sass/themes/schemas/components/light/_grid-toolbar.scss +++ b/sass/themes/schemas/components/light/_grid-toolbar.scss @@ -10,7 +10,7 @@ /// Generates a light grid-toolbar schema. /// @type {Map} /// @prop {Map} background-color [color: ('gray', 50)] - The toolbar background color. -/// @prop {Map} title-text-color [color: ('gray', 600)] - The toolbar title text color. +/// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color. /// @prop {Map} dropdown-background [color: ('surface')] - The toolbar drop-down background color. /// @prop {Map} item-text-color [color: ('gray', 600)] - The toolbar drop-down item text color. /// @prop {Map} item-hover-background [color: ('gray', 100)] - The toolbar drop-down item hover background color. @@ -30,7 +30,7 @@ $light-grid-toolbar: ( title-text-color: ( color: ( 'gray', - 600, + 700, ), ), diff --git a/sass/themes/schemas/components/light/_grid.scss b/sass/themes/schemas/components/light/_grid.scss index a5573c06..b39a3db2 100644 --- a/sass/themes/schemas/components/light/_grid.scss +++ b/sass/themes/schemas/components/light/_grid.scss @@ -881,6 +881,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). @@ -898,6 +901,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 2a139d0b..21e343ac 100644 --- a/sass/themes/schemas/components/light/_stepper.scss +++ b/sass/themes/schemas/components/light/_stepper.scss @@ -568,13 +568,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. @@ -616,6 +622,41 @@ $bootstrap-stepper: extend( 0.5, ), ), + invalid-title-color: ( + color: ( + 'error', + ), + ), + 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', From f9b1d8a2f960709f4bf4355d61f6ba94c927887d Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 12 Nov 2025 12:09:25 +0200 Subject: [PATCH 2/2] refactor(bootstrap): stepper and tree colors --- .../themes/schemas/components/dark/_list.scss | 8 ++++++ .../schemas/components/dark/_stepper.scss | 26 ++++++++++++++----- .../themes/schemas/components/dark/_tree.scss | 6 +++++ .../schemas/components/light/_stepper.scss | 1 + .../schemas/components/light/_tree.scss | 3 ++- 5 files changed, 37 insertions(+), 7 deletions(-) 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 84788778..97866a67 100644 --- a/sass/themes/schemas/components/dark/_stepper.scss +++ b/sass/themes/schemas/components/dark/_stepper.scss @@ -130,12 +130,13 @@ $dark-fluent-stepper: extend( /// Generates a dark bootstrap stepper schema. /// @type {Map} /// @prop {Map} step-separator-color [color: ('gray', 100)] - The separator border-color of between the steps. -/// @prop {Map} invalid-title-color [color: ('error')] - The color of the invalid step title. -/// @prop {Map} invalid-title-hover-color [color: ('error')] - The color of the invalid step title on hover. -/// @prop {Map} invalid-title-focus-color [color: ('error')] - The color of the invalid step title on focus. -/// @prop {Map} invalid-subtitle-color [color: ('error')] - The text of the invalid step subtitle. -/// @prop {Map} invalid-subtitle-hover-color [color: ('error')] - The color of the invalid step subtitle on hover. -/// @prop {Map} invalid-subtitle-focus-color [color: ('error')] - The color of the invalid step subtitle on focus. +/// @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( @@ -152,36 +153,49 @@ $dark-bootstrap-stepper: extend( invalid-title-color: ( color: ( 'error', + 400, ), ), invalid-title-hover-color: ( color: ( '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, ), ), 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/_stepper.scss b/sass/themes/schemas/components/light/_stepper.scss index 21e343ac..3693dc3a 100644 --- a/sass/themes/schemas/components/light/_stepper.scss +++ b/sass/themes/schemas/components/light/_stepper.scss @@ -625,6 +625,7 @@ $bootstrap-stepper: extend( invalid-title-color: ( color: ( 'error', + 800, ), ), invalid-title-hover-color: ( 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: (