From fa415005eb1167f7aa30dc6fd5139827a2c454b0 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Wed, 18 Dec 2024 13:11:21 -0500 Subject: [PATCH] =?UTF-8?q?Rename=20`tinted`=20=E2=86=92=20`filled`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/_includes/base.njk | 2 +- docs/_includes/color-scheme-selector.njk | 2 +- docs/_includes/preset-theme-selector.njk | 2 +- docs/docs/components/badge.md | 20 ++++++++++---------- docs/docs/components/breadcrumb.md | 4 ++-- docs/docs/components/button.md | 10 +++++----- docs/docs/essentials/button.md | 10 +++++----- docs/docs/experimental/themer.md | 2 +- docs/docs/layout/frame.md | 10 +++++----- docs/index.md | 12 ++++++------ src/components/badge/badge.ts | 2 +- src/components/button/button.ts | 2 +- src/components/radio-button/radio-button.ts | 2 +- src/styles/utilities/appearance.css | 4 ++-- 14 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 27ad0e557..e58f96c83 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -98,7 +98,7 @@ {% include "logo-simple.njk" %} {{ package.version }} - Alpha + Alpha
diff --git a/docs/_includes/color-scheme-selector.njk b/docs/_includes/color-scheme-selector.njk index d445a374d..82e82bfdf 100644 --- a/docs/_includes/color-scheme-selector.njk +++ b/docs/_includes/color-scheme-selector.njk @@ -1,6 +1,6 @@ {# Color scheme selector #} - + Light diff --git a/docs/_includes/preset-theme-selector.njk b/docs/_includes/preset-theme-selector.njk index aac9c0218..645136b29 100644 --- a/docs/_includes/preset-theme-selector.njk +++ b/docs/_includes/preset-theme-selector.njk @@ -1,6 +1,6 @@ {# Preset theme selector #} - + Default diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md index a971a5fe7..517ca7951 100644 --- a/docs/docs/components/badge.md +++ b/docs/docs/components/badge.md @@ -30,36 +30,36 @@ Use the `appearance` attribute to change the badge's visual appearance.
A+O Accent - T+O - Tinted + F+O + Filled Outlined
A+O Accent - T+O - Tinted + F+O + Filled Outlined
A+O Accent - T+O - Tinted + F+O + Filled Outlined
A+O Accent - T+O - Tinted + F+O + Filled Outlined
A+O Accent - T+O - Tinted + F+O + Filled Outlined
``` diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md index f38450c56..b08bc59fd 100644 --- a/docs/docs/components/breadcrumb.md +++ b/docs/docs/components/breadcrumb.md @@ -135,7 +135,7 @@ Dropdown menus can be placed in the default slot to provide additional options. Homepage - + @@ -160,7 +160,7 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot. Web Design - + diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index a34885c11..28a795391 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -30,31 +30,31 @@ Use the `appearance` attribute to change the button's visual appearance. ```html {.example}
Accent - Tinted + Filled Outlined Text
Accent - Tinted + Filled Outlined Text
Accent - Tinted + Filled Outlined Text
Accent - Tinted + Filled Outlined Text
Accent - Tinted + Filled Outlined Text
diff --git a/docs/docs/essentials/button.md b/docs/docs/essentials/button.md index 0f981eb84..4fbb1326a 100644 --- a/docs/docs/essentials/button.md +++ b/docs/docs/essentials/button.md @@ -33,31 +33,31 @@ Use the appearance utility classes to change the button's visual appearance: ```html {.example}
- +
- +
- +
- +
- +
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index a4c487a29..e1b415ebe 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -2486,7 +2486,7 @@ hasOutline: false
Seraph - Tinted + Filled $180.00 diff --git a/docs/docs/layout/frame.md b/docs/docs/layout/frame.md index e0ad41318..af8398d60 100644 --- a/docs/docs/layout/frame.md +++ b/docs/docs/layout/frame.md @@ -56,7 +56,7 @@ Frames are well-suited for images and image placeholders.

White-socks

Kitten • Male
- Adopt this pet + Adopt this pet Favorite
@@ -73,7 +73,7 @@ Frames are well-suited for images and image placeholders.

Bumpkin

Adult • Male
- Adopt this pet + Adopt this pet Favorite
@@ -87,7 +87,7 @@ Frames are well-suited for images and image placeholders.

Swish-tail

Kitten • Female
- Adopt this pet + Adopt this pet Favorite
@@ -101,7 +101,7 @@ Frames are well-suited for images and image placeholders.

Sharp-ears

Adult • Female
- Adopt this pet + Adopt this pet Favorite
@@ -153,4 +153,4 @@ Alternatively, you can define the `border-radius` property to set custom roundin
-``` \ No newline at end of file +``` diff --git a/docs/index.md b/docs/index.md index 94253b059..4c05728db 100644 --- a/docs/index.md +++ b/docs/index.md @@ -374,12 +374,12 @@ layout: page
Special thanks
- Lit - Custom Elements Manifest - 11ty - Floating UI - animate.css - Lunr + Lit + Custom Elements Manifest + 11ty + Floating UI + animate.css + Lunr
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index e1a8a011a..ee0736dd8 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -30,7 +30,7 @@ export default class WaBadge extends WebAwesomeElement { @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand'; /** The badge's visual appearance. */ - @property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' = 'accent'; + @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent'; /** Draws a pill-style badge with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 9c4bc2fbe..12380090c 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -73,7 +73,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'; /** The button's visual appearance. */ - @property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' | 'plain' = 'accent'; + @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent'; /** The button's size. */ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index a8556e390..d371c507a 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -159,7 +159,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement { disabled: this.disabled, focused: this.hasFocus, 'wa-outlined': true, - 'wa-tinted': this.checked, + 'wa-filled': this.checked, 'wa-pill': this.pill, 'has-label': hasLabel, 'has-prefix': hasPrefix, diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css index 587d92524..eb45be99f 100644 --- a/src/styles/utilities/appearance.css +++ b/src/styles/utilities/appearance.css @@ -24,8 +24,8 @@ } } -.wa-tinted, -:host([appearance~='tinted']) { +.wa-filled, +:host([appearance~='filled']) { --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));