diff --git a/docs/assets/styles/code-previews.css b/docs/assets/styles/code-previews.css
index 86edc77e7..e89dda902 100644
--- a/docs/assets/styles/code-previews.css
+++ b/docs/assets/styles/code-previews.css
@@ -8,7 +8,7 @@
.code-preview__preview {
position: relative;
- border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom: none;
border-top-left-radius: var(--wa-corners-s);
border-top-right-radius: var(--wa-corners-s);
@@ -42,7 +42,7 @@
font-size: var(--wa-font-size-xs);
color: var(--wa-color-text-quiet);
background-color: var(--wa-color-surface-default);
- border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-top-right-radius: var(--wa-corners-s);
cursor: ew-resize;
}
@@ -58,7 +58,7 @@
}
.code-preview__source {
- border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom: none;
border-radius: 0 !important;
display: none;
@@ -74,7 +74,7 @@
.code-preview__buttons {
position: relative;
- border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom-left-radius: var(--wa-corners-s);
border-bottom-right-radius: var(--wa-corners-s);
display: flex;
@@ -97,7 +97,7 @@
}
.code-preview__button:not(:last-of-type) {
- border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}
.code-preview__button--html,
@@ -129,7 +129,7 @@
.code-preview__button:hover,
.code-preview__button:active {
- box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-border-subtle);
+ box-shadow: 0 0 0 var(--wa-border-width-s) var(--wa-color-brand-border-subtle);
border-right-color: transparent;
background-color: var(--wa-color-brand-fill-subtle);
color: var(--wa-color-brand-text-on-surface);
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 41503895b..a8b84acbf 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -343,7 +343,7 @@ pre:hover .copy-code-button,
z-index: 20;
width: var(--docs-sidebar-width);
background-color: var(--docs-background-color);
- border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: 0;
padding: 2rem;
margin: 0;
@@ -392,7 +392,7 @@ pre:hover .copy-code-button,
#sidebar nav h2 {
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-medium);
- border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
}
@@ -517,7 +517,7 @@ main {
max-height: calc(100vh - 6rem);
font-size: var(--wa-font-size-s);
line-height: 1.33;
- border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
list-style: none;
padding: 1rem 0;
margin: 0;
@@ -672,7 +672,7 @@ html.sidebar-open #menu-toggle {
details,
pre {
- border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
details summary {
@@ -706,7 +706,7 @@ html.sidebar-open #menu-toggle {
}
.code-preview__source-group {
- border-bottom: solid 1px var(--wa-border-width-thin);
+ border-bottom: solid 1px var(--wa-border-width-s);
border-bottom-left-radius: var(--wa-corners-s);
border-bottom-right-radius: var(--wa-corners-s);
}
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index 746bbe77a..45305c4ea 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -6,7 +6,7 @@
--docs-search-box-color: var(--wa-form-controls-placeholder-color);
--docs-search-dialog-background: var(--wa-color-surface-raised);
- --docs-search-border-width: var(--wa-border-width-thin);
+ --docs-search-border-width: var(--wa-border-width-s);
--docs-search-border-color: var(--wa-color-surface-border);
--docs-search-text-color: var(--wa-color-text-normal);
--docs-search-text-color-muted: var(--wa-color-text-quiet);
diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
index 8da09024e..9ceda3273 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -852,7 +852,7 @@ toc: false
top: 2rem;
left: 2rem;
background: var(--wa-color-surface-default);
- border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-m);
box-shadow: var(--wa-shadow-level-2);
width: var(--knobs-width);
diff --git a/docs/pages/tokens/borders.md b/docs/pages/tokens/borders.md
index bed322927..9c08f8929 100644
--- a/docs/pages/tokens/borders.md
+++ b/docs/pages/tokens/borders.md
@@ -8,12 +8,12 @@ meta:
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
-| Token | Value | Example |
-| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
-| `--wa-border-style` | `solid` | |
-| `--wa-border-width-thin` | `0.0625rem` (1px) | |
-| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | |
-| `--wa-border-width-thick` | `calc(var(--wa-border-width-thin) * 3)` (3px) | |
+| Token | Value | Example |
+| --------------------- | ------------------------------------------ | ------------------------------------------------------------------------------- |
+| `--wa-border-style` | `solid` | |
+| `--wa-border-width-s` | `0.0625rem` (1px) | |
+| `--wa-border-width-m` | `calc(var(--wa-border-width-s) * 2)` (2px) | |
+| `--wa-border-width-l` | `calc(var(--wa-border-width-s) * 3)` (3px) | |
## Corners
diff --git a/docs/pages/tokens/more.md b/docs/pages/tokens/more.md
index beccfb910..ab80bc0a7 100644
--- a/docs/pages/tokens/more.md
+++ b/docs/pages/tokens/more.md
@@ -10,10 +10,10 @@ meta:
Focus ring tokens control the appearance of focus rings.
-| Token | Value |
-| ------------------------ | ---------------------------------------------------------- |
-| `--wa-focus-ring` | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
-| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
+| Token | Value |
+| ------------------------ | ------------------------------------------------------ |
+| `--wa-focus-ring` | `solid var(--wa-border-width-l) var(--wa-color-focus)` |
+| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
## Form Controls
@@ -23,7 +23,7 @@ Form control tokens control the appearance of form controls such as [input](/com
| -------------------------------------- | ------------------------------------------ |
| `--wa-form-controls-background` | `var(--wa-color-surface-raised)` |
| `--wa-form-controls-border-style` | `var(--wa-border-style)` |
-| `--wa-form-controls-border-width` | `var(--wa-border-width-thin)` |
+| `--wa-form-controls-border-width` | `var(--wa-border-width-s)` |
| `--wa-form-controls-corners` | `var(--wa-corners-s)` |
| `--wa-form-controls-resting-color` | `var(--wa-color-neutral-border-highlight)` |
| `--wa-form-controls-activated-color` | `var(--wa-color-brand-action-vivid)` |
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 3f90d61ac..e76a3922a 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -446,7 +446,7 @@ export default css`
/* All except the first */
:host(.wa-button-group__button:not(.wa-button-group__button--first)) {
- margin-inline-start: calc(-1 * var(--wa-border-width-thin));
+ margin-inline-start: calc(-1 * var(--wa-border-width-s));
}
/* Add a visual separator between solid buttons */
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index 1aace692b..ec40840c6 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -26,7 +26,7 @@ export default css`
}
.color-picker--inline {
- border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: var(--wa-form-controls-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}
.color-picker--inline:focus-visible {
@@ -273,7 +273,7 @@ export default css`
.color-dropdown::part(panel) {
max-height: none;
background-color: var(--wa-color-surface-raised);
- border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
overflow: visible;
}
diff --git a/src/components/divider/divider.styles.ts b/src/components/divider/divider.styles.ts
index 3f7778017..c63238def 100644
--- a/src/components/divider/divider.styles.ts
+++ b/src/components/divider/divider.styles.ts
@@ -6,7 +6,7 @@ export default css`
:host {
--color: var(--wa-color-surface-border);
- --width: var(--wa-border-width-thin);
+ --width: var(--wa-border-width-s);
--spacing: var(--wa-space-m);
}
diff --git a/src/components/menu/menu.styles.ts b/src/components/menu/menu.styles.ts
index 7018b23f6..c57d4f203 100644
--- a/src/components/menu/menu.styles.ts
+++ b/src/components/menu/menu.styles.ts
@@ -8,7 +8,7 @@ export default css`
display: block;
position: relative;
background-color: var(--wa-color-surface-raised);
- border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-xs) 0;
overflow: auto;
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index 015245090..d65742de8 100644
--- a/src/components/tab/tab.styles.ts
+++ b/src/components/tab/tab.styles.ts
@@ -35,7 +35,7 @@ export default css`
.tab:focus-visible {
outline: var(--wa-focus-ring);
- outline-offset: calc(-1 * var(--wa-border-width-thick) - var(--wa-focus-ring-offset));
+ outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
}
.tab.tab--active:not(.tab--disabled) {
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 67e9a1087..043cfe994 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -11,7 +11,7 @@ export default css`
.tag {
display: flex;
align-items: center;
- border: solid var(--wa-border-width-thin);
+ border: solid var(--wa-border-width-s);
line-height: 1;
white-space: nowrap;
user-select: none;
diff --git a/src/themes/applied.css b/src/themes/applied.css
index fea258b50..29c680ebd 100644
--- a/src/themes/applied.css
+++ b/src/themes/applied.css
@@ -113,7 +113,7 @@ h6 {
hr {
border: none;
- border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-flow-spacing) 0;
}
@@ -316,7 +316,7 @@ details[open] > summary::before {
}
details + details {
- margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-thin));
+ margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-s));
}
/* Tables */
@@ -331,7 +331,7 @@ caption {
}
tbody tr {
- border-top: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
tbody tr:nth-child(2n + 1) {
@@ -455,7 +455,7 @@ textarea {
details,
pre {
background: none;
- border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+ border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
summary {
diff --git a/src/themes/chic.css b/src/themes/chic.css
index 8b1f1b804..fe7708e5c 100644
--- a/src/themes/chic.css
+++ b/src/themes/chic.css
@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
diff --git a/src/themes/classic.css b/src/themes/classic.css
index 575d9aa6b..09bcae26b 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -247,15 +247,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
diff --git a/src/themes/classic_components.css b/src/themes/classic_components.css
index a30124cb7..0e03a20c8 100644
--- a/src/themes/classic_components.css
+++ b/src/themes/classic_components.css
@@ -1,8 +1,7 @@
/* #region Alerts */
wa-alert {
--background: var(--wa-color-surface-default);
- --border-width: var(--wa-border-width-thick) var(--wa-border-width-thin) var(--wa-border-width-thin)
- var(--wa-border-width-thin);
+ --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
--content-color: var(--wa-color-text-normal);
--padding: var(--wa-space-l);
diff --git a/src/themes/default.css b/src/themes/default.css
index 436a4679a..27ed17a9e 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -245,15 +245,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
diff --git a/src/themes/fa.css b/src/themes/fa.css
index 5c7f51db6..0ea37a2b9 100644
--- a/src/themes/fa.css
+++ b/src/themes/fa.css
@@ -242,15 +242,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
diff --git a/src/themes/forms.css b/src/themes/forms.css
index 22ed37949..682eda43f 100644
--- a/src/themes/forms.css
+++ b/src/themes/forms.css
@@ -4,7 +4,7 @@
--wa-form-controls-value-color: var(--wa-color-danger-text-on-surface);
/* Focus ring */
- --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-danger-spot);
+ --wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-spot);
/* Help text */
--wa-color-text-quiet: var(--wa-color-danger-text-on-fill);
@@ -16,7 +16,7 @@
--wa-form-controls-value-color: var(--wa-color-success-text-on-surface);
/* Focus ring */
- --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-success-spot);
+ --wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-spot);
/* Help text */
--wa-color-text-quiet: var(--wa-color-success-text-on-fill);
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index 369600072..4d7fd733c 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: hidden;
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index 61230b507..f16419b83 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
diff --git a/src/themes/playful.css b/src/themes/playful.css
index b9b6c644e..55b34384a 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
- --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
- --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
- --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
+ --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+ --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+ --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
- --wa-form-controls-border-width: var(--wa-border-width-thin);
+ --wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-thin);
+ --wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners