From 83bc4bf2fbf5a1bcbcb5037149c539fbd005e592 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 12 Jun 2024 16:51:13 -0400 Subject: [PATCH] update component group background properties to background-color --- docs/docs/experimental/themer.md | 4 ++-- docs/docs/theming/component-groups.md | 4 ++-- src/components/checkbox/checkbox.styles.ts | 2 +- src/components/input/input.styles.ts | 2 +- src/components/radio/radio.styles.ts | 2 +- src/components/range/range.styles.ts | 2 +- src/components/select/select.styles.ts | 2 +- src/components/switch/switch.styles.ts | 4 ++-- src/components/textarea/textarea.styles.ts | 2 +- src/components/tooltip/tooltip.styles.ts | 4 ++-- src/themes/active.css | 2 +- src/themes/brutalist.css | 2 +- src/themes/classic.css | 2 +- src/themes/default.css | 4 ++-- src/themes/fa.css | 2 +- src/themes/glassy.css | 2 +- src/themes/mellow.css | 2 +- src/themes/migration.css | 2 +- src/themes/playful.css | 2 +- src/themes/premium.css | 2 +- 20 files changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index e65c21ab6..6b8794a80 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -152,7 +152,7 @@ hasOutline: false --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) calc(var(--wa-shadow-offset-x-l) * -1) var(--wa-color-shadow); - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); @@ -367,7 +367,7 @@ hasOutline: false position: relative; border: var(--wa-form-control-border-width) dashed var(--wa-form-control-resting-color); border-radius: var(--wa-form-control-border-radius); - background: var(--wa-form-control-background); + background: var(--wa-form-control-background-color); cursor: pointer; font-weight: var(--wa-font-weight-action); height: calc(var(--wa-form-control-height-m) + var(--wa-border-width-s) * 2); diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md index 84d37cdc4..d74af4409 100644 --- a/docs/docs/theming/component-groups.md +++ b/docs/docs/theming/component-groups.md @@ -14,7 +14,7 @@ Not every form control uses all of these custom properties. For example, `(6px) | -| `--wa-tooltip-background` | `var(--wa-color-neutral-fill-loud)` | +| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)` | | `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)` | | `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` | | `--wa-tooltip-font-size` | `var(--wa-font-size-s)` | diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index d90472b69..0b8ec0c89 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-form-control-background); + --background-color: var(--wa-form-control-background-color); --background-color-checked: var(--wa-form-control-activated-color); --border-color: var(--wa-form-control-resting-color); --border-color-checked: var(--wa-form-control-activated-color); diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index bdd1b14d5..0333ae124 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-form-control-background); + --background-color: var(--wa-form-control-background-color); --border-color: var(--wa-form-control-resting-color); --border-radius: var(--wa-form-control-border-radius); --border-style: var(--wa-form-control-border-style); diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts index 1f75f1360..4d90d989e 100644 --- a/src/components/radio/radio.styles.ts +++ b/src/components/radio/radio.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-form-control-background); + --background-color: var(--wa-form-control-background-color); --background-color-checked: var(--background-color); --border-color: var(--wa-form-control-resting-color); --border-color-checked: var(--wa-form-control-activated-color); diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index b2383d5d3..00f772058 100644 --- a/src/components/range/range.styles.ts +++ b/src/components/range/range.styles.ts @@ -150,7 +150,7 @@ export default css` z-index: 1000; left: 0; border-radius: var(--wa-tooltip-border-radius); - background-color: var(--wa-tooltip-background); + background-color: var(--wa-tooltip-background-color); font-family: inherit; font-size: var(--wa-tooltip-font-size); line-height: var(--wa-tooltip-line-height); diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 2aa773f43..c4813a232 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-form-control-background); + --background-color: var(--wa-form-control-background-color); --border-color: var(--wa-form-control-resting-color); --border-radius: var(--wa-form-control-border-radius); --border-style: var(--wa-form-control-border-style); diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts index 7669c26c6..ed995abb7 100644 --- a/src/components/switch/switch.styles.ts +++ b/src/components/switch/switch.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-form-control-background); + --background-color: var(--wa-form-control-background-color); --background-color-checked: var(--wa-form-control-activated-color); --border-color: var(--wa-form-control-resting-color); --border-color-checked: var(--background-color-checked); @@ -11,7 +11,7 @@ export default css` --box-shadow: initial; --height: calc(1em * var(--wa-form-control-value-line-height)); --thumb-color: var(--wa-form-control-resting-color); - --thumb-color-checked: var(--wa-form-control-background); + --thumb-color-checked: var(--wa-form-control-background-color); --thumb-shadow: initial; --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75); --width: calc(var(--height) * 1.75); diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts index dbafcae20..174cbdc21 100644 --- a/src/components/textarea/textarea.styles.ts +++ b/src/components/textarea/textarea.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-form-control-background); + --background-color: var(--wa-form-control-background-color); --border-color: var(--wa-form-control-resting-color); --border-radius: var(--wa-form-control-border-radius); --border-style: var(--wa-form-control-border-style); diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts index 1ef8f0864..65db2471d 100644 --- a/src/components/tooltip/tooltip.styles.ts +++ b/src/components/tooltip/tooltip.styles.ts @@ -2,7 +2,7 @@ import { css } from 'lit'; export default css` :host { - --background-color: var(--wa-tooltip-background); + --background-color: var(--wa-tooltip-background-color); --border-radius: var(--wa-tooltip-border-radius); --max-width: 30ch; --padding: var(--wa-space-2xs) var(--wa-space-xs); @@ -14,7 +14,7 @@ export default css` .tooltip { --arrow-size: var(--wa-tooltip-arrow-size); - --arrow-color: var(--wa-tooltip-background); + --arrow-color: var(--wa-tooltip-background-color); } .tooltip::part(popup) { diff --git a/src/themes/active.css b/src/themes/active.css index 8b0f56508..b733d24ce 100644 --- a/src/themes/active.css +++ b/src/themes/active.css @@ -310,7 +310,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css index cb05f6bb5..b39f7bb22 100644 --- a/src/themes/brutalist.css +++ b/src/themes/brutalist.css @@ -311,7 +311,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/classic.css b/src/themes/classic.css index 5d7c6a932..b3df10a14 100644 --- a/src/themes/classic.css +++ b/src/themes/classic.css @@ -314,7 +314,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/default.css b/src/themes/default.css index d74c721b6..77c68dfc5 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -331,7 +331,7 @@ */ /* Form controls */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-style: var(--wa-border-style); --wa-form-control-border-width: var(--wa-border-width-s); @@ -372,7 +372,7 @@ /* Tooltips */ --wa-tooltip-arrow-size: 0.375rem; - --wa-tooltip-background: var(--wa-color-neutral-fill-loud); + --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud); --wa-tooltip-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/fa.css b/src/themes/fa.css index 4d453c093..7198ab454 100644 --- a/src/themes/fa.css +++ b/src/themes/fa.css @@ -315,7 +315,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/glassy.css b/src/themes/glassy.css index 3e0e39b3b..a9b0755fc 100644 --- a/src/themes/glassy.css +++ b/src/themes/glassy.css @@ -309,7 +309,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/mellow.css b/src/themes/mellow.css index 24290b9b4..7222fb5c1 100644 --- a/src/themes/mellow.css +++ b/src/themes/mellow.css @@ -309,7 +309,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/migration.css b/src/themes/migration.css index 131e45879..47e4b6b88 100644 --- a/src/themes/migration.css +++ b/src/themes/migration.css @@ -312,7 +312,7 @@ /** * Component groups */ - --wa-form-control-background: var(--wa-color-surface-default); + --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-radius: var(--wa-border-radius-s); diff --git a/src/themes/playful.css b/src/themes/playful.css index c1983f6d6..bbcfb07ee 100644 --- a/src/themes/playful.css +++ b/src/themes/playful.css @@ -324,7 +324,7 @@ /** * Component groups */ - --wa-form-control-background: transparent; + --wa-form-control-background-color: transparent; --wa-form-control-border-radius: var(--wa-border-radius-pill); diff --git a/src/themes/premium.css b/src/themes/premium.css index 9223b3e82..42b6a9663 100644 --- a/src/themes/premium.css +++ b/src/themes/premium.css @@ -312,7 +312,7 @@ /** * Component groups */ - --wa-form-control-background: transparent; + --wa-form-control-background-color: transparent; --wa-form-control-border-radius: var(--wa-border-radius-s);