From 2136fed4cb89729a24e477e16774f424ef80ab79 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 17 Dec 2024 10:39:47 -0500 Subject: [PATCH] =?UTF-8?q?`--label-color`=20=E2=9E=A1=EF=B8=8F=20`--text-?= =?UTF-8?q?color`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As we move towards using these helpers more widely, `--label-color` doesn't quite make sense --- docs/assets/styles/docs.css | 2 +- docs/assets/styles/theme-headers.css | 2 +- docs/docs/experimental/themer.md | 6 +++--- src/components/badge/badge.css | 2 +- src/components/button/button.ts | 6 +++--- src/components/menu-item/menu-item.css | 6 +++--- src/components/menu-item/menu-item.ts | 2 +- src/components/option/option.css | 8 ++++---- src/components/option/option.ts | 4 ++-- src/components/progress-bar/progress-bar.css | 4 ++-- src/components/progress-bar/progress-bar.ts | 2 +- src/components/radio-button/radio-button.css | 2 +- src/components/radio-button/radio-button.ts | 6 +++--- src/styles/native/button.css | 12 ++++++------ src/styles/themes/active.css | 2 +- src/styles/themes/classic.css | 6 +++--- src/styles/themes/fa.css | 8 ++++---- src/styles/themes/migration.css | 4 ++-- src/styles/themes/playful.css | 8 ++++---- src/styles/utilities/appearance.css | 10 +++++----- 20 files changed, 51 insertions(+), 51 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 4368fc4ae..32d5d2858 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -46,7 +46,7 @@ wa-page > header { } wa-button[data-toggle-nav] { - --label-color: currentColor; + --text-color: currentColor; font-size: 1rem; margin-inline-start: -0.875rem; margin-inline-end: 0; diff --git a/docs/assets/styles/theme-headers.css b/docs/assets/styles/theme-headers.css index a48700312..595b7acbd 100644 --- a/docs/assets/styles/theme-headers.css +++ b/docs/assets/styles/theme-headers.css @@ -23,7 +23,7 @@ .hero wa-button[variant='brand'] { --background: var(--wa-color-neutral-fill-quiet); - --label-color: var(--wa-color-neutral-on-normal); + --text-color: var(--wa-color-neutral-on-normal); } .project-header { diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index 0247e71ad..a25c6a1cd 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -429,9 +429,9 @@ hasOutline: false #icon-chooser-trigger { --button-group-separator-border: none; - --label-color: var(--wa-color-neutral-on-quiet); - --label-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover)); - --label-color-active: var(--label-color-hover); + --text-color: var(--wa-color-neutral-on-quiet); + --text-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover)); + --text-color-active: var(--text-color-hover); } #icon-chooser::part(dialog) { diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css index 1977f4e9f..2adfb032f 100644 --- a/src/components/badge/badge.css +++ b/src/components/badge/badge.css @@ -10,7 +10,7 @@ border-radius: var(--wa-border-radius-xs); border-style: var(--wa-border-style); border-width: var(--wa-border-width-s); - color: var(--label-color, var(--wa-color-on-loud)); + color: var(--text-color, var(--wa-color-on-loud)); white-space: nowrap; padding: 0.375em 0.625em; user-select: none; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index a6eb62b82..9ca6e1364 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -47,9 +47,9 @@ import styles from './button.css'; * @cssproperty --border-color - The color of the button's border when the button is not being interacted with. * @cssproperty --border-color-active - The color of the button's border when active. * @cssproperty --border-color-hover - The color of the button's border on hover. - * @cssproperty --label-color - The color of the button's label when the button is not being interacted with. - * @cssproperty --label-color-active - The color of the button's label when active. - * @cssproperty --label-color-hover - The color of the button's label on hover. + * @cssproperty --text-color - The color of the button's label when the button is not being interacted with. + * @cssproperty --text-color-active - The color of the button's label when active. + * @cssproperty --text-color-hover - The color of the button's label on hover. */ @customElement('wa-button') export default class WaButton extends WebAwesomeFormAssociatedElement { diff --git a/src/components/menu-item/menu-item.css b/src/components/menu-item/menu-item.css index fe3996db9..2be893157 100644 --- a/src/components/menu-item/menu-item.css +++ b/src/components/menu-item/menu-item.css @@ -1,6 +1,6 @@ :host { --background-color-hover: var(--wa-color-neutral-fill-normal); - --label-color-hover: var(--wa-color-neutral-on-normal); + --text-color-hover: var(--wa-color-neutral-on-normal); --submenu-offset: -0.125rem; display: block; @@ -100,14 +100,14 @@ :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item, .menu-item--submenu-expanded { background-color: var(--background-color-hover); - color: var(--label-color-hover); + color: var(--text-color-hover); } :host(:focus-visible) .menu-item { outline: var(--wa-focus-ring); outline-offset: calc(-1 * var(--wa-focus-ring-width)); background: var(--background-color-hover); - color: var(--label-color-hover); + color: var(--text-color-hover); opacity: 1; } diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 20c081d81..17b8f8009 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -36,7 +36,7 @@ import { SubmenuController } from './submenu-controller.js'; * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented). * * @cssproperty --background-color-hover - The menu item's background color on hover. - * @cssproperty --label-color-hover - The label color on hover. + * @cssproperty --text-color-hover - The label color on hover. * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu. */ @customElement('wa-menu-item') diff --git a/src/components/option/option.css b/src/components/option/option.css index cced8cdc4..27a4bbf53 100644 --- a/src/components/option/option.css +++ b/src/components/option/option.css @@ -1,8 +1,8 @@ :host { --background-color-current: var(--wa-color-brand-fill-loud); --background-color-hover: var(--wa-color-neutral-fill-normal); - --label-color-current: var(--wa-color-brand-on-loud); - --label-color-hover: var(--wa-color-neutral-on-normal); + --text-color-current: var(--wa-color-brand-on-loud); + --text-color-hover: var(--wa-color-neutral-on-normal); display: block; color: var(--wa-color-text-normal); @@ -27,13 +27,13 @@ .option--hover:not(.option--current):not(.option--disabled) { background-color: var(--background-color-hover); - color: var(--label-color-hover); + color: var(--text-color-hover); } .option--current, .option--current.option--disabled { background-color: var(--background-color-current); - color: var(--label-color-current); + color: var(--text-color-current); opacity: 1; } diff --git a/src/components/option/option.ts b/src/components/option/option.ts index 46a946f9f..9ab6cf61a 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -21,8 +21,8 @@ import styles from './option.css'; * * @cssproperty --background-color-current - The current option's background color. * @cssproperty --background-color-hover - The options's background color on hover. - * @cssproperty --label-color-current - The current option's label color. - * @cssproperty --label-color-hover - The label color on hover. + * @cssproperty --text-color-current - The current option's label color. + * @cssproperty --text-color-hover - The label color on hover. * * @csspart checked-icon - The checked icon, a `` element. * @csspart base - The component's base wrapper. diff --git a/src/components/progress-bar/progress-bar.css b/src/components/progress-bar/progress-bar.css index b1ebf5c37..36c4a3452 100644 --- a/src/components/progress-bar/progress-bar.css +++ b/src/components/progress-bar/progress-bar.css @@ -2,7 +2,7 @@ --height: 1.25rem; --track-color: var(--wa-color-neutral-fill-normal); --indicator-color: var(--wa-color-brand-fill-loud); - --label-color: var(--wa-color-brand-on-loud); + --text-color: var(--wa-color-brand-on-loud); --box-shadow: none; display: block; @@ -21,7 +21,7 @@ height: 100%; font: inherit; background-color: var(--indicator-color); - color: var(--label-color); + color: var(--text-color); text-align: center; line-height: var(--height); white-space: nowrap; diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index db57468d2..7b8c642e6 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -22,7 +22,7 @@ import styles from './progress-bar.css'; * @cssproperty --height - The progress bar's height. * @cssproperty --track-color - The color of the track. * @cssproperty --indicator-color - The color of the indicator. - * @cssproperty --label-color - The color of the label. + * @cssproperty --text-color - The color of the label. * @cssproperty --box-shadow - The shadow effects around the edges of the progress bar. */ @customElement('wa-progress-bar') diff --git a/src/components/radio-button/radio-button.css b/src/components/radio-button/radio-button.css index d34b0674f..8b1267082 100644 --- a/src/components/radio-button/radio-button.css +++ b/src/components/radio-button/radio-button.css @@ -37,7 +37,7 @@ --background-color: var(--wa-color-brand-fill-quiet); --background-color-hover: var(--background-color); --border-color: var(--wa-form-control-activated-color); - --label-color: var(--wa-color-brand-on-normal); + --text-color: var(--wa-color-brand-on-normal); --indicator-color: var(--border-color); --indicator-width: var(--wa-border-width-s); diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index 1981f8018..d04012666 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -38,9 +38,9 @@ import styles from './radio-button.css'; * @cssproperty --box-shadow - The shadow effects around the edges of the button. * @cssproperty --indicator-color - The color of the checked button indicator. * @cssproperty --indicator-width - The width of the checked button indicator. - * @cssproperty --label-color - The color of the button's label. - * @cssproperty --label-color-active - The color of the button's label when active. - * @cssproperty --label-color-hover - The color of the button's label on hover. + * @cssproperty --text-color - The color of the button's label. + * @cssproperty --text-color-active - The color of the button's label when active. + * @cssproperty --text-color-hover - The color of the button's label on hover. * * @csspart base - The internal `