Skip to content

feat(chip): add the new outlined theme parameters + schemas #592

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

Open
adrianptrv wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(chip): add the new outlined theme parameters + schemas #592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6341b94
feat(chip): add the new theme params + new schemas
adrianptrv Jul 23, 2026
ef8a456
feat(chip): update indigo disabled border-color
adrianptrv Jul 31, 2026
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
138 changes: 98 additions & 40 deletions packages/theming/sass/themes/components/chip/_chip-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
/// PRIMARY TOKENS:
/// - `$background` — The main chip background.
/// - `$selected-background` — Selected state background.
/// - `$outlined-background` — The outlined chip background.
/// - `$outlined-selected-background` — The outlined selected state background.
///
/// Setting just `$background` will create a complete chip theme with all states properly derived.
///
Expand All @@ -26,38 +28,60 @@
///
/// @param {Color} $text-color [null] - The chip text color. Auto-derived from background.
/// @param {Color} $background [null] - The chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
/// @param {Color} $border-color [null] - The chip border color. Auto-derived from background.
/// @param {Color} $outlined-text-color [null] - The outlined chip text color. Auto-derived from the outlined-background.
/// @param {Color} $outlined-background [null] - The outlined chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
/// @param {Color} $border-color [null] - The outlined chip border color.
///
/// @param {Color} $disabled-text-color [null] - The disabled chip text color.
/// @param {Color} $disabled-background [null] - The disabled chip background color.
/// @param {Color} $disabled-border-color [null] - The disabled chip border color.
/// @param {Color} $disabled-outlined-text-color [null] - The disabled outlined chip text color.
/// @param {Color} $disabled-outlined-background [null] - The disabled outlined chip background color.
/// @param {Color} $disabled-border-color [null] - The disabled outlined chip border color.
///
/// @param {Color} $ghost-background [null] - The chip ghost background color.
/// @param {Color} $ghost-text-color [null] - The chip ghost text color.
/// @param {List} $ghost-shadow [null] - The chip ghost shadow.
///
/// @param {Color} $hover-text-color [null] - The chip text hover color. Auto-derived from hover-background.
/// @param {Color} $hover-background [null] - The chip hover background color. Auto-derived from background.
/// @param {Color} $hover-border-color [null] - The chip hover border color. Auto-derived from hover-background.
/// @param {Color} $hover-outlined-text-color [null] - The outlined chip hover text color. Auto-derived from hover-outlined-background.
/// @param {Color} $hover-outlined-background [null] - The outlined chip hover background color. Auto-derived from outlined-background.
/// @param {Color} $hover-border-color [null] - The outlined chip hover border color.
///
/// @param {Color} $focus-text-color [null] - The chip text focus color. Auto-derived from focus-background.
/// @param {Color} $focus-background [null] - The chip focus background color. Auto-derived from background.
/// @param {color} $focus-border-color [null] - The chip focus border color. Auto-derived from focus-background.
/// @param {Color} $focus-outlined-text-color [null] - The outlined chip focus text color. Auto-derived from focus-outlined-background.
/// @param {Color} $focus-outlined-background [null] - The outlined chip focus background color. Auto-derived from outlined-background.
/// @param {Color} $focus-border-color [null] - The outlined chip focus border color.
/// @param {Color} $focus-shadow-color [null] - The chip focus shadow color in Bootstrap and Indigo.
///
/// @param {color} $selected-text-color [null] - The selected chip text color. Auto-derived from selected-background.
/// @param {color} $selected-background [null] - The selected chip background color. Auto-derived from background.
/// @param {color} $selected-border-color [null] - The selected chip border color. Auto-derived from selected-background.
/// @param {Color} $selected-text-color [null] - The selected chip text color. Auto-derived from selected-background.
/// @param {Color} $selected-background [null] - The selected chip background color. Auto-derived from background.
/// @param {Color} $selected-outlined-text-color [null] - The outlined chip text color. Auto-derived from selected-outlined-background.
/// @param {Color} $selected-outlined-background [null] - The outlined chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
/// @param {Color} $selected-border-color [null] - The selected outlined chip border color.
///
/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color. Auto-derived from hover-selected-background.
/// @param {color} $hover-selected-background [null] - The selected chip hover background color. Auto-derived from selected-background.
/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color. Auto-derived from hover-selected-background.
/// @param {Color} $hover-selected-text-color [null] - The selected chip hover text color. Auto-derived from hover-selected-background.
/// @param {Color} $hover-selected-background [null] - The selected chip hover background color. Auto-derived from selected-background.
/// @param {Color} $hover-selected-outlined-text-color [null] - The outlined chip hover text color. Auto-derived from hover-selected-outlined-background.
/// @param {Color} $hover-selected-outlined-background [null] - The outlined chip hover background color. Auto-derived from selected-outlined-background.
/// @param {Color} $hover-selected-border-color [null] - The selected outlined chip hover border color.
///
/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color. Auto-derived from focus-selected-background.
/// @param {color} $focus-selected-background [null] - The selected chip focus background color. Auto-derived from selected-background.
/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color. Auto-derived from focus-selected-background.
/// @param {Color} $focus-selected-text-color [null] - The selected chip text focus color. Auto-derived from focus-selected-background.
/// @param {Color} $focus-selected-background [null] - The selected chip focus background color. Auto-derived from selected-background.
/// @param {Color} $focus-selected-outlined-text-color [null] - The selected outlined chip focus text color. Auto-derived from focus-selected-outlined-background.
/// @param {Color} $focus-selected-outlined-background [null] - The selected outlined chip focus background color. Auto-derived from selected-outlined-background.
/// @param {Color} $focus-selected-border-color [null] - The selected outlined chip focus border color.
/// @param {Color} $focus-selected-shadow-color [null] - The selected chip focus shadow color in Bootstrap and Indigo.
///
/// @param {color} $remove-icon-color [null] - The remove icon color for the chip.
/// @param {color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.
/// @param {Color} $disabled-selected-text-color [null] - The disabled selected chip text color.
/// @param {Color} $disabled-selected-background [null] - The disabled selected chip background color.
/// @param {Color} $disabled-selected-outlined-text-color [null] - The disabled selected outlined chip text color.
/// @param {Color} $disabled-selected-outlined-background [null] - The disabled selected outlined chip background color.
/// @param {Color} $disabled-selected-border-color [null] - The disabled selected outlined chip border color.
///
/// @param {Color} $remove-icon-color [null] - The remove icon color for the chip.
/// @param {Color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.
///
/// @requires $light-material-schema
///
Expand All @@ -72,34 +96,51 @@
$text-color: null,
$background: null,
$border-color: null,
$outlined-text-color: null,
$outlined-background: null,
$ghost-background: null,
$ghost-text-color: null,

$disabled-text-color: null,
$disabled-background: null,
$disabled-outlined-text-color: null,
$disabled-outlined-background: null,
$disabled-border-color: null,
$disabled-selected-outlined-text-color: null,
$disabled-selected-outlined-background: null,
$disabled-selected-border-color: null,

$hover-text-color: null,
$hover-background: null,
$hover-outlined-text-color: null,
$hover-outlined-background: null,
$hover-border-color: null,

$focus-text-color: null,
$focus-background: null,
$focus-outlined-text-color: null,
$focus-outlined-background: null,
$focus-border-color: null,
$focus-outline-color: null,
$focus-shadow-color: null,

$selected-text-color: null,
$selected-background: null,
$selected-outlined-text-color: null,
$selected-outlined-background: null,
$selected-border-color: null,

$hover-selected-text-color: null,
$hover-selected-background: null,
$hover-selected-outlined-text-color: null,
$hover-selected-outlined-background: null,
$hover-selected-border-color: null,

$focus-selected-text-color: null,
$focus-selected-background: null,
$focus-selected-outlined-text-color: null,
$focus-selected-outlined-background: null,
$focus-selected-border-color: null,
$focus-selected-outline-color: null,
$focus-selected-shadow-color: null,

$ghost-shadow: null,
$remove-icon-color: null,
Expand Down Expand Up @@ -150,10 +191,6 @@
$ghost-text-color: adaptive-contrast(var(--ghost-background));
}

@if not($border-color) and $background {
$border-color: var(--background);
}

@if not($hover-background) and $background {
$hover-background: dynamic-shade(var(--background));
}
Expand Down Expand Up @@ -212,34 +249,38 @@
$focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
}

@if not($hover-border-color) and $hover-background {
$hover-border-color: var(--hover-background);
@if $variant == 'bootstrap' or $variant == 'indigo' {
@if not($focus-shadow-color) and $focus-background {
$focus-shadow-color: hsl(from var(--focus-background) h s l / 0.4);
}

@if not($focus-selected-shadow-color) and $focus-selected-background {
$focus-selected-shadow-color: hsl(from var(--focus-selected-background) h s l / 0.4);
}
}

@if not($focus-border-color) and $focus-background {
$focus-border-color: var(--focus-background);
@if not($outlined-text-color) and $outlined-background {
$outlined-text-color: adaptive-contrast(var(--outlined-background));
}

@if not($selected-border-color) and $selected-background {
$selected-border-color: var(--selected-background);
@if not($hover-outlined-text-color) and $hover-outlined-background {
$hover-outlined-text-color: adaptive-contrast(var(--hover-outlined-background));
}

@if not($hover-selected-border-color) and $hover-selected-background {
$hover-selected-border-color: var(--hover-selected-background);
@if not($focus-outlined-text-color) and $focus-outlined-background {
$focus-outlined-text-color: adaptive-contrast(var(--focus-outlined-background));
}

@if not($focus-selected-border-color) and $focus-selected-background {
$focus-selected-border-color: var(--focus-selected-background);
@if not($selected-outlined-text-color) and $selected-outlined-background {
$selected-outlined-text-color: adaptive-contrast(var(--selected-outlined-background));
}

@if $variant == 'bootstrap' or $variant == 'indigo' {
@if not($focus-outline-color) and $focus-background {
$focus-outline-color: hsl(from var(--focus-background) h s l / 0.4);
}
@if not($hover-selected-outlined-text-color) and $hover-selected-outlined-background {
$hover-selected-outlined-text-color: adaptive-contrast(var(--hover-selected-outlined-background));
}

@if not($focus-selected-outline-color) and $focus-selected-background {
$focus-selected-outline-color: hsl(from var(--focus-selected-background) h s l / 0.4);
}
@if not($focus-selected-outlined-text-color) and $focus-selected-outlined-background {
$focus-selected-outlined-text-color: adaptive-contrast(var(--focus-selected-outlined-background));
}

@if not($ghost-shadow) {
Expand All @@ -256,38 +297,55 @@
text-color: $text-color,
background: $background,
border-color: $border-color,
outlined-text-color: $outlined-text-color,
outlined-background: $outlined-background,
ghost-background: $ghost-background,
ghost-text-color: $ghost-text-color,

disabled-text-color: $disabled-text-color,
disabled-background: $disabled-background,
disabled-outlined-text-color: $disabled-outlined-text-color,
disabled-outlined-background: $disabled-outlined-background,
disabled-border-color: $disabled-border-color,
disabled-selected-outlined-text-color: $disabled-selected-outlined-text-color,
disabled-selected-outlined-background: $disabled-selected-outlined-background,
disabled-selected-border-color: $disabled-selected-border-color,

hover-text-color: $hover-text-color,
hover-background: $hover-background,
hover-outlined-text-color: $hover-outlined-text-color,
hover-outlined-background: $hover-outlined-background,
hover-border-color: $hover-border-color,

focus-text-color: $focus-text-color,
focus-background: $focus-background,
focus-outlined-text-color: $focus-outlined-text-color,
focus-outlined-background: $focus-outlined-background,
focus-border-color: $focus-border-color,

selected-text-color: $selected-text-color,
selected-background: $selected-background,
selected-outlined-text-color: $selected-outlined-text-color,
selected-outlined-background: $selected-outlined-background,
selected-border-color: $selected-border-color,

hover-selected-text-color: $hover-selected-text-color,
hover-selected-background: $hover-selected-background,
hover-selected-outlined-text-color: $hover-selected-outlined-text-color,
hover-selected-outlined-background: $hover-selected-outlined-background,
hover-selected-border-color: $hover-selected-border-color,

focus-selected-text-color: $focus-selected-text-color,
focus-selected-background: $focus-selected-background,
focus-selected-outlined-text-color: $focus-selected-outlined-text-color,
focus-selected-outlined-background: $focus-selected-outlined-background,
focus-selected-border-color: $focus-selected-border-color,

ghost-elevation: $ghost-shadow,
remove-icon-color: $remove-icon-color,
remove-icon-color-focus: $remove-icon-color-focus,
focus-selected-outline-color: $focus-selected-outline-color,
focus-outline-color: $focus-outline-color,
focus-selected-shadow-color: $focus-selected-shadow-color,
focus-shadow-color: $focus-shadow-color,
size: $size,
)
);
Expand Down
Loading
Loading