diff --git a/docs/_data/hues.json b/docs/_data/hues.json index 1251ab4ec..759e4b777 100644 --- a/docs/_data/hues.json +++ b/docs/_data/hues.json @@ -1 +1 @@ -["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] +["red", "yellow", "green", "teal", "blue", "indigo", "purple", "gray"] diff --git a/docs/_includes/svgs/tokens/color.njk b/docs/_includes/svgs/tokens/color.njk index 69591dccb..031aace1a 100644 --- a/docs/_includes/svgs/tokens/color.njk +++ b/docs/_includes/svgs/tokens/color.njk @@ -2,7 +2,7 @@ - + diff --git a/docs/docs/components/page/demo-page.css b/docs/docs/components/page/demo-page.css index 327d5bd38..aa6d2548c 100644 --- a/docs/docs/components/page/demo-page.css +++ b/docs/docs/components/page/demo-page.css @@ -52,8 +52,8 @@ wa-page { } &[slot^='navigation'] { - background: var(--wa-color-violet-80); - color: var(--wa-color-violet-20); + background: var(--wa-color-purple-80); + color: var(--wa-color-purple-20); } strong { diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md index b812e2c51..e05e8050d 100644 --- a/docs/docs/customizing.md +++ b/docs/docs/customizing.md @@ -16,21 +16,21 @@ To use a theme, simply add a link to the theme's stylesheet to the `` of y ``` -You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode: +You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode: ```css :where(:root), :host, .wa-light, .wa-dark .wa-invert { - --wa-color-brand-fill-quiet: var(--wa-color-violet-95); - --wa-color-brand-fill-normal: var(--wa-color-violet-90); - --wa-color-brand-fill-loud: var(--wa-color-violet-50); - --wa-color-brand-border-quiet: var(--wa-color-violet-90); - --wa-color-brand-border-normal: var(--wa-color-violet-80); - --wa-color-brand-border-loud: var(--wa-color-violet-60); - --wa-color-brand-on-quiet: var(--wa-color-violet-40); - --wa-color-brand-on-normal: var(--wa-color-violet-30); + --wa-color-brand-fill-quiet: var(--wa-color-purple-95); + --wa-color-brand-fill-normal: var(--wa-color-purple-90); + --wa-color-brand-fill-loud: var(--wa-color-purple-50); + --wa-color-brand-border-quiet: var(--wa-color-purple-90); + --wa-color-brand-border-normal: var(--wa-color-purple-80); + --wa-color-brand-border-loud: var(--wa-color-purple-60); + --wa-color-brand-on-quiet: var(--wa-color-purple-40); + --wa-color-brand-on-normal: var(--wa-color-purple-30); --wa-color-brand-on-loud: white; } ``` @@ -99,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr