Skip to content

fix(chip): update bootstrap chip schemas #406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 5 commits into from
Apr 2, 2025
Merged

fix(chip): update bootstrap chip schemas #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c954afb
fix(chip): update bootstrap chip schemas
didimmova Apr 1, 2025
0da0860
Merge branch 'master' into didimmova/fix-bootstrap-chip
SisIvanova Apr 1, 2025
380e4d1
Merge branch 'master' into didimmova/fix-bootstrap-chip
simeonoff Apr 2, 2025
07bf3a7
Merge branch 'master' into didimmova/fix-bootstrap-chip
SisIvanova Apr 2, 2025
c9090ce
Merge branch 'master' into didimmova/fix-bootstrap-chip
simeonoff Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions sass/themes/schemas/components/dark/_chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,60 @@ $dark-fluent-chip: extend(

/// Generates a dark bootstrap chip schema.
/// @type {Map}
/// @prop {Map} hover-background [color: ('gray', 100)] - The chip hover background color.
/// @prop {Map} hover-text-color [contrast-color: ('gray', 100)] - The chip text hover color.
/// @prop {Map} hover-selected-background [color: ('gray', 100)] - The selected chip hover background color.
/// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 100)] - The selected chip hover text color.
/// @prop {Map} focus-outline-color [color: ('gray', 300, 0.38)] - The chip focus outline color.
/// @prop {Map} focus-selected-outline-color [color: ('gray', 300, 0.38)] - The selected chip focus outline color.
/// @requires $bootstrap-chip
$dark-bootstrap-chip: extend(
$bootstrap-chip,
(
hover-background: (
color: (
'gray',
100,
),
),

hover-text-color: (
contrast-color: (
'gray',
100,
),
),

hover-selected-background: (
color: (
'gray',
100,
),
),

hover-selected-text-color: (
contrast-color: (
'gray',
100,
),
),

focus-outline-color: (
color: (
'gray',
300,
0.38,
),
),

focus-selected-outline-color: (
color: (
'gray',
300,
0.38,
),
),

_meta: (
theme: 'bootstrap',
variant: 'dark',
Expand Down
36 changes: 23 additions & 13 deletions sass/themes/schemas/components/light/_chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
/// @prop {Map} hover-text-color [contrast-color: ('gray', 400)] - The chip text hover color.
/// @prop {Map} hover-background [color: ('gray', 400)] - The chip hover background color.
/// @prop {Color} hover-border-color [transparent] - The chip hover border color.
/// @prop {Map} selected-text-color [color: ('gray', 700)] - The selected chip text color.
/// @prop {Map} selected-text-color [contrast-color: ('gray', 300)] - The selected chip text color.
/// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
/// @prop {Color} selected-border-color [transparent] The selected chip border color.
/// @prop {Map} focus-text-color [contrast-color: ('gray', 500)] The focused chip text color.
Expand Down Expand Up @@ -345,14 +345,15 @@ $fluent-chip: extend(
/// @type {Map}
/// @prop {Map} text-color [contrast-color: ('gray', 200)] - The chip text color.
/// @prop {Map} selected-background [color: ('gray', 200)] - The selected chip background color.
/// @prop {Map} focus-text-color [contrast-color: ('gray', 400)] The focused chip text color.
/// @prop {Map} focus-background [color: ('gray', 400)] The focused chip background color.
/// @prop {Map} focus-selected-background [color: ('gray', 400)] - The selected chip focus background color.
/// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 400)] - The selected chip text focus color.
/// @prop {Map} selected-text-color [contrast-color: ('gray', 200)] - The selected chip text color.
/// @prop {Map} focus-text-color [contrast-color: ('gray', 200)] The focused chip text color.
/// @prop {Map} focus-background [color: ('gray', 200)] The focused chip background color.
/// @prop {Map} focus-selected-background [color: ('gray', 200)] - The selected chip focus background color.
/// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 200)] - The selected chip text focus color.
/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for chip.
/// @prop {Map} focus-outline-color [color: ('gray', 200)] - The chip focus outline color.
/// @prop {Map} focus-selected-outline-color [color: ('primary', 200)] - The selected chip focus outline color.
/// @prop {Map} focus-outline-color [color: ('gray', 500, 0.38)] - The chip focus outline color.
/// @prop {Map} focus-selected-outline-color [color: ('gray', 500, 0.38)] - The selected chip focus outline color.
/// @requires {Map} $light-chip
/// @requires {Map} $bootstrap-elevation-chip
$bootstrap-chip: extend(
Expand All @@ -369,28 +370,30 @@ $bootstrap-chip: extend(
focus-text-color: (
contrast-color: (
'gray',
400,
200,
),
),

focus-background: (
color: (
'gray',
400,
200,
),
),

focus-outline-color: (
color: (
'gray',
200,
500,
0.38,
),
),

focus-selected-outline-color: (
color: (
'gray',
200,
500,
0.38,
),
),

Expand All @@ -401,17 +404,24 @@ $bootstrap-chip: extend(
),
),

selected-text-color: (
contrast-color: (
'gray',
200,
),
),

focus-selected-background: (
color: (
'gray',
400,
200,
),
),

focus-selected-text-color: (
contrast-color: (
'gray',
400,
200,
),
),

Expand Down