--label-color ➡️ --text-color

As we move towards using these helpers more widely, `--label-color` doesn't quite make sense

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;

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 {

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) {

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;

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 {

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;
 }
 

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')

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;
 }
 

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 `<wa-icon>` element.
  * @csspart base - The component's base wrapper.

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;

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')

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);
 

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 `<button>` element.
  * @csspart checked - The internal button element when the radio button is checked.

src/styles/native/button.css

@@ -10,9 +10,9 @@
   --border-color-active: var(--border-color);
   --border-width: max(1px, var(--wa-form-control-border-width));
 
-  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-  --label-color-hover: var(--label-color);
-  --label-color-active: var(--label-color);
+  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+  --text-color-hover: var(--text-color);
+  --text-color-active: var(--text-color);
 
   border-radius: var(--wa-form-control-border-radius);
   border-style: var(--wa-border-style);
@@ -45,20 +45,20 @@ input:is([type='button'], [type='reset'], [type='submit']),
   display: inline-flex;
   background-color: var(--background-color);
   border-color: var(--border-color, var(--background-color));
-  color: var(--label-color);
+  color: var(--text-color);
 
   /* Interactive */
   &:where(:not(:disabled, [disabled], :host([disabled]) *, .loading)) {
     &:hover {
       background-color: var(--background-color-hover, var(--background-color));
       border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
-      color: var(--label-color-hover, var(--label-color));
+      color: var(--text-color-hover, var(--text-color));
     }
 
     &:active {
       background-color: var(--background-color-active, var(--background-color));
       border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
-      color: var(--label-color-active, var(--label-color));
+      color: var(--text-color-active, var(--text-color));
     }
   }
 

src/styles/themes/active.css

@@ -462,7 +462,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);
   }
 
   wa-rating {

src/styles/themes/classic.css

@@ -365,14 +365,14 @@ wa-radio-button {
   --border-color: var(--wa-form-control-resting-color);
   --border-color-active: var(--background-color-active);
   --border-color-hover: var(--background-color-hover);
-  --label-color-active: var(--label-color-hover);
-  --label-color-hover: var(--wa-color-brand-on-loud);
+  --text-color-active: var(--text-color-hover);
+  --text-color-hover: var(--wa-color-brand-on-loud);
   --indicator-color: var(--wa-background-color);
 
   &[checked] {
     --background-color: var(--wa-form-control-activated-color);
     --border-color: var(--background-color);
-    --label-color: var(--wa-color-brand-on-loud);
+    --text-color: var(--wa-color-brand-on-loud);
   }
 }
 

src/styles/themes/fa.css

@@ -505,12 +505,12 @@
   }
 
   wa-button:not([appearance='text']) {
-    --border-color: var(--label-color);
+    --border-color: var(--text-color);
     --border-color-hover: var(--border-color);
     --border-color-active: var(--border-color);
     --box-shadow-color: var(--border-color);
     --background-active: var(--border-color);
-    --label-color-active: var(--background);
+    --text-color-active: var(--background);
 
     &[appearance='outlined'] {
       --background: var(--wa-color-surface-default);
@@ -564,13 +564,13 @@
     --background-active: var(--wa-color-neutral-on-quiet);
     --border-color-active: var(--background-active);
     --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
-    --label-color-active: var(--wa-color-surface-default);
+    --text-color-active: var(--wa-color-surface-default);
 
     &:active,
     &[checked] {
       --background: var(--wa-color-neutral-on-quiet);
       --box-shadow: none;
-      --label-color: var(--wa-color-surface-default);
+      --text-color: var(--wa-color-surface-default);
       transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
     }
   }

src/styles/themes/migration.css

@@ -537,7 +537,7 @@
   }
 
   wa-button[appearance='outline'] {
-    --border-color: color-mix(in oklab, var(--label-color), transparent 75%);
+    --border-color: color-mix(in oklab, var(--text-color), transparent 75%);
   }
 
   wa-input,
@@ -550,7 +550,7 @@
 
   wa-radio-button:not([checked]) {
     --border-color: var(--wa-color-neutral-border-normal);
-    --label-color: var(--wa-color-text-normal);
+    --text-color: var(--wa-color-text-normal);
   }
 
   wa-switch {

src/styles/themes/playful.css

@@ -566,7 +566,7 @@
       --button-shadow-inner-a: var(--wa-color-primary-30);
       --button-shadow-inner-b: var(--wa-color-primary-80);
       --button-text-shadow: var(--wa-color-primary-40);
-      --label-color: var(--wa-color-primary-95);
+      --text-color: var(--wa-color-primary-95);
     }
 
     &[variant='success'] {
@@ -634,8 +634,8 @@
   wa-button[appearance='outlined'] {
     --box-shadow: none;
     --border-width: var(--wa-form-control-border-width);
-    --label-color: var(--wa-color-neutral-on-normal);
-    --label-color-hover: var(--wa-color-neutral-on-loud);
+    --text-color: var(--wa-color-neutral-on-normal);
+    --text-color-hover: var(--wa-color-neutral-on-loud);
 
     &::part(label) {
       text-shadow: none;
@@ -861,7 +861,7 @@
         --button-shadow-inner-a: var(--wa-color-primary-30);
         --button-shadow-inner-b: var(--wa-color-primary-80);
         --button-text-shadow: var(--wa-color-primary-40);
-        --label-color: var(--wa-color-primary-95);
+        --text-color: var(--wa-color-primary-95);
       }
 
       &[variant='success'] {

src/styles/utilities/appearance.css

@@ -7,8 +7,8 @@
   --border-color: var(--wa-color-border-loud);
   --border-color-hover: var(--wa-color-border-loud);
 
-  --label-color: var(--wa-color-on-quiet);
-  --label-color-hover: var(--wa-color-on-quiet);
+  --text-color: var(--wa-color-on-quiet);
+  --text-color-hover: var(--wa-color-on-quiet);
 }
 
 .wa-filled,
@@ -17,7 +17,7 @@
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
 
-  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
 
   &:is(.wa-outlined, :host([appearance~='outlined'])) {
     --border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
@@ -27,7 +27,7 @@
 .wa-tinted,
 :host([appearance~='tinted']) {
   --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 
   --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
   --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
@@ -40,7 +40,7 @@
 .wa-text,
 :host([appearance~='text']) {
   --background-color: transparent;
-  --label-color: var(--wa-color-on-quiet);
+  --text-color: var(--wa-color-on-quiet);
 
   --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);