js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

--*-multiplier to --*-scale

Browse Source 
As discussed with @lindsaym-fa

Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Lea Verou
2024-12-16 12:50:37 -05:00
parent 35571c1d4e
commit b6e0ca5d45
25 changed files with 411 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/docs/experimental/themer.md
View File

@@ -95,23 +95,23 @@ hasOutline: false
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 1rem * 0.125);
--wa-space-2xs: calc(var(--wa-space-multiplier) * 1rem * 0.25);
--wa-space-xs: calc(var(--wa-space-multiplier) * 1rem * 0.5);
--wa-space-s: calc(var(--wa-space-multiplier) * 1rem * 0.75);
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem * 1);
--wa-space-l: calc(var(--wa-space-multiplier) * 1rem * 1.25);
--wa-space-xl: calc(var(--wa-space-multiplier) * 1rem * 1.5);
--wa-space-2xl: calc(var(--wa-space-multiplier) * 1rem * 2);
--wa-space-3xl: calc(var(--wa-space-multiplier) * 1rem * 3);
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 1rem * 0.125);
--wa-space-2xs: calc(var(--wa-space-scale) * 1rem * 0.25);
--wa-space-xs: calc(var(--wa-space-scale) * 1rem * 0.5);
--wa-space-s: calc(var(--wa-space-scale) * 1rem * 0.75);
--wa-space-m: calc(var(--wa-space-scale) * 1rem * 1);
--wa-space-l: calc(var(--wa-space-scale) * 1rem * 1.25);
--wa-space-xl: calc(var(--wa-space-scale) * 1rem * 1.5);
--wa-space-2xl: calc(var(--wa-space-scale) * 1rem * 2);
--wa-space-3xl: calc(var(--wa-space-scale) * 1rem * 3);
--wa-border-style: solid;
--wa-border-width-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem * 1);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 1rem * 2);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 1rem * 3);
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem * 1);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 1rem * 2);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 1rem * 3);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -119,29 +119,29 @@ hasOutline: false
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-border-radius-multiplier: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 1rem * 0.75);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem * 1);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 1rem * 2);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 1rem * 3);
--wa-border-radius-scale: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 1rem * 0.75);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem * 1);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem * 2);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 1rem * 3);
--wa-shadow-blur-multiplier: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-scale: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
--wa-shadow-offset-y-multiplier: 0.1;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-scale: 0.1;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
calc(var(--wa-shadow-offset-x-xs) * -1) var(--wa-color-shadow);
@@ -928,8 +928,8 @@ hasOutline: false
}
function resetBorderWidthValue() {
document.documentElement.style.removeProperty('--wa-border-width-multiplier')
borderWidth.value = getComputedStyle(previewContainer).getPropertyValue("--wa-border-width-multiplier")
document.documentElement.style.removeProperty('--wa-border-width-scale')
borderWidth.value = getComputedStyle(previewContainer).getPropertyValue("--wa-border-width-scale")
}
function resetBorderStyleValue() {
@@ -938,13 +938,13 @@ hasOutline: false
}
function resetSpacingValue() {
document.documentElement.style.removeProperty('--wa-space-multiplier')
spacing.value = getComputedStyle(previewContainer).getPropertyValue("--wa-space-multiplier")
document.documentElement.style.removeProperty('--wa-space-scale')
spacing.value = getComputedStyle(previewContainer).getPropertyValue("--wa-space-scale")
}
function resetCornersValue() {
document.documentElement.style.removeProperty('--wa-border-radius-multiplier')
corners.value = getComputedStyle(previewContainer).getPropertyValue("--wa-border-radius-multiplier")
document.documentElement.style.removeProperty('--wa-border-radius-scale')
corners.value = getComputedStyle(previewContainer).getPropertyValue("--wa-border-radius-scale")
}
@@ -1616,12 +1616,12 @@ hasOutline: false
// Corners
container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-radius-multiplier', `${event.target.value}`);
document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
});
// Border width
container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-width-multiplier', `${event.target.value / 16}`);
document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
});
// Border style
@@ -1631,7 +1631,7 @@ hasOutline: false
// Spacing style
spacing.addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-space-multiplier', `${event.target.value}`);
document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
});
// Form validation

8
docs/docs/theming/borders.md
View File

@@ -14,9 +14,9 @@ Border style controls the standard line shape of borders throughout Web Awesome.
## Width
Border widths use `rem` units in order to scale proportionately with the root font size.
Border widths use `rem` units in order to scale proportionately with the root font size.
Each border width value uses a `calc()` function with `--wa-border-width-multiplier` to scale all border widths at once. By default, this multiplier is `0.0625`. The table below lists the result of the calculation.
Each border width value uses a `calc()` function with `--wa-border-width-scale` to scale all border widths at once. By default, this multiplier is `0.0625`. The table below lists the result of the calculation.
| Custom Property | Default Value | Preview |
| --------------------- | -------------------------------- | ------------------------------------------------------------------------- |
@@ -36,9 +36,9 @@ Common border radius properties allow you to achieve specific shapes beyond your
| `--wa-border-radius-circle` | `50%` | <div class="swatch" style="aspect-ratio: 1 / 1; border-radius: var(--wa-border-radius-circle)"></div> |
| `--wa-border-radius-square` | `0px` | <div class="swatch" style="border-radius: var(--wa-border-radius-square)"></div> |
Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size.
Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size.
Each property uses a `calc()` function with `--wa-border-radius-multiplier` to scale all border radii at once. By default, this multiplier is `0.375`. The table below lists the result of the calculation.
Each property uses a `calc()` function with `--wa-border-radius-scale` to scale all border radii at once. By default, this multiplier is `0.375`. The table below lists the result of the calculation.
| Custom Property | Default Value | Preview |
| ----------------------- | -------------------------------- | ---------------------------------------------------------------------------- |

12
docs/docs/theming/shadows.md
View File

@@ -6,7 +6,7 @@ layout: page-outline
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
| Custom Property | Default Value |
| ---------------- | ------------------------------------------------------------------- |
@@ -19,7 +19,7 @@ Any shadow may be implemented as an inner box shadow using the `inset` keyword,
## Horizontal Offset (X)
Each offset-x property uses a `calc()` function with `--wa-shadow-offset-x-multiplier` to uniformly scale horizontal offset values. By default, this multiplier is `0`. The table below lists the result of the calculation.
Each offset-x property uses a `calc()` function with `--wa-shadow-offset-x-scale` to uniformly scale horizontal offset values. By default, this multiplier is `0`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| ------------------------- | -------------- |
@@ -30,7 +30,7 @@ Each offset-x property uses a `calc()` function with `--wa-shadow-offset-x-multi
## Vertical Offset (Y)
Each offset-y property uses a `calc()` function with `--wa-shadow-offset-y-multiplier` to uniformly scale vertical offset values. By default, this multiplier is `0.125`. The table below lists the result of the calculation.
Each offset-y property uses a `calc()` function with `--wa-shadow-offset-y-scale` to uniformly scale vertical offset values. By default, this multiplier is `0.125`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| ------------------------- | -------------------------------- |
@@ -41,7 +41,7 @@ Each offset-y property uses a `calc()` function with `--wa-shadow-offset-y-multi
## Blur
Each blur property uses a `calc()` function with `--wa-shadow-blur-multiplier` to uniformly scale blur values. By default, this multiplier is `0.125`. The table below lists the result of the calculation.
Each blur property uses a `calc()` function with `--wa-shadow-blur-scale` to uniformly scale blur values. By default, this multiplier is `0.125`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| --------------------- | -------------------------------- |
@@ -52,11 +52,11 @@ Each blur property uses a `calc()` function with `--wa-shadow-blur-multiplier` t
## Spread
Each spread property uses a `calc()` function with `--wa-shadow-spread-multiplier` to uniformly scale spread values. By default, this multiplier is `-0.0625`. The table below lists the result of the calculation.
Each spread property uses a `calc()` function with `--wa-shadow-spread-scale` to uniformly scale spread values. By default, this multiplier is `-0.0625`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| ----------------------- | ------------------------------------- |
| `--wa-shadow-spread-xs` | `-0.03125rem` <small>(-0.5px)</small> |
| `--wa-shadow-spread-s` | `-0.0625rem` <small>(-1px)</small> |
| `--wa-shadow-spread-m` | `-0.125rem` <small>(-2px)</small> |
| `--wa-shadow-spread-l` | `-0.25rem` <small>(-4px)</small> |
| `--wa-shadow-spread-l` | `-0.25rem` <small>(-4px)</small> |

6
docs/docs/theming/space.md
View File

@@ -34,9 +34,9 @@ layout: page-outline
}
</style>
Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size.
Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size.
Each space property uses a `calc()` function with `--wa-space-multiplier` to scale all spacing at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
Each space property uses a `calc()` function with `--wa-space-scale` to scale all spacing at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
| Custom Property | Default Value | Preview |
| ---------------- | ------------------------------- | --------------------------------------------------------------------- |
@@ -53,4 +53,4 @@ Each space property uses a `calc()` function with `--wa-space-multiplier` to sca
When using space properties, it may be helpful to consider three distinct groups:
- Small-scale space (`3xs`, `2xs`, and `xs`) can be used for gaps between cooperating elements, such as a dropdown button and its menu, and padding within small components, such as badges and tooltips
- Normal space (`s`, `m`, and `l`) can be used for gaps between related elements with distinct touch targets and padding within typical interface elements, such as buttons and inputs
- Large-scale space (`xl`, `2xl`, and `3xl`) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs
- Large-scale space (`xl`, `2xl`, and `3xl`) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs

2
docs/docs/theming/typography.md
View File

@@ -19,7 +19,7 @@ Font families are assigned specific roles &mdash; like heading or code &mdash; t
Font sizes use the Major Second type scale, rounded to the nearest whole pixel assuming a 16px root font size. To maximize variation in larger font sizes, every other step on the scale is skipped.
Each font size uses a `calc()` function with `--wa-font-size-multiplier` to scale all font sizes at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
Each font size uses a `calc()` function with `--wa-font-size-scale` to scale all font sizes at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
| Custom Property | Default Value | Preview |
| -------------------- | --------------------------------- | ---------------------------------------------------------- |

30
src/styles/depth/0_flat.css
View File

@@ -11,25 +11,25 @@
*/
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
* The base value is intended for calculations and is not used by components directly. */
--wa-shadow-blur-multiplier: 0;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-scale: 0;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
* or transforming elements with shadows. */
--wa-shadow-offset-y-multiplier: 0;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-scale: 0;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-color-shadow);

30
src/styles/depth/1_semiflat.css
View File

@@ -11,25 +11,25 @@
*/
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
* The base value is intended for calculations and is not used by components directly. */
--wa-shadow-blur-multiplier: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-scale: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
* or transforming elements with shadows. */
--wa-shadow-offset-y-multiplier: 0.1;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-scale: 0.1;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-color-shadow);

30
src/styles/depth/2_chunky.css
View File

@@ -11,25 +11,25 @@
*/
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
* The base value is intended for calculations and is not used by components directly. */
--wa-shadow-blur-multiplier: 0;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-scale: 0;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
* or transforming elements with shadows. */
--wa-shadow-offset-y-multiplier: 0.25;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-scale: 0.25;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-x-multiplier: 0.25;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-scale: 0.25;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-color-shadow);

30
src/styles/depth/3_punchy.css
View File

@@ -11,25 +11,25 @@
*/
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
* The base value is intended for calculations and is not used by components directly. */
--wa-shadow-blur-multiplier: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-scale: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
* or transforming elements with shadows. */
--wa-shadow-offset-y-multiplier: 0.125;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-scale: 0.125;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-color-shadow);

30
src/styles/depth/4_glossy.css
View File

@@ -11,25 +11,25 @@
*/
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
* The base value is intended for calculations and is not used by components directly. */
--wa-shadow-blur-multiplier: 0.375;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-scale: 0.375;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
* or transforming elements with shadows. */
--wa-shadow-offset-y-multiplier: 0.25;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-scale: 0.25;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-color-shadow);

42
src/styles/themes/active.css
View File

@@ -126,7 +126,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 6%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
transparent
);
@@ -241,16 +241,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -259,10 +259,10 @@
/* 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-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -275,11 +275,11 @@
*/
/* Corners 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-radius-multiplier: 0.75;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.75;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -369,7 +369,7 @@
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;

48
src/styles/themes/brutalist.css
View File

@@ -127,8 +127,8 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: rgba(0, 0, 0, 0.2);
--wa-shadow-offset-y-multiplier: 0.5;
--wa-shadow-offset-x-multiplier: 0.5;
--wa-shadow-offset-y-scale: 0.5;
--wa-shadow-offset-x-scale: 0.5;
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
--wa-color-mix-hover: white 12%;
@@ -241,16 +241,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -259,10 +259,10 @@
/* 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-multiplier: 0.125;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.125;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -275,11 +275,11 @@
*/
/* Corners 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-radius-multiplier: 0.001;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.001;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -370,7 +370,7 @@
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
@@ -540,7 +540,7 @@
}
wa-carousel::part(pagination-item) {
border-radius: var(--wa-border-radius-multiplier);
border-radius: var(--wa-border-radius-scale);
}
wa-carousel-item {
@@ -632,7 +632,7 @@
wa-switch::part(control),
wa-switch::part(thumb) {
border-radius: var(--wa-border-radius-multiplier);
border-radius: var(--wa-border-radius-scale);
--wa-line-height-condensed: 5px;
}

102
src/styles/themes/classic.css
View File

@@ -123,7 +123,7 @@
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-gray-40) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
var(--wa-color-gray-40) calc(var(--wa-shadow-blur-scale) * 24% + 8%),
transparent
);
@@ -207,16 +207,16 @@
* with each value rounded to the nearest whole pixel based on a 16px root font size.
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
* A multiplier is provided to uniformly increase or decrease all font sizes. */
--wa-font-size-multiplier: 1;
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
--wa-font-size-scale: 1;
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
@@ -239,16 +239,16 @@
*/
/* A multiplier is provided to uniformly increase or decrease all spacing. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -256,17 +256,17 @@
--wa-border-style: solid;
/* A multiplier is provided to uniformly increase or decrease all border widths. */
--wa-border-width-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
/* A multiplier is provided to uniformly increase or decrease all border radii. */
--wa-border-radius-multiplier: 0.25;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.25;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.5rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -288,29 +288,29 @@
* A multiplier is provided for each shadow quality to uniformly scale all related values.
*/
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 4rem);
--wa-shadow-offset-y-multiplier: 0.0625;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
--wa-shadow-offset-y-scale: 0.0625;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 4rem);
--wa-shadow-blur-multiplier: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
--wa-shadow-blur-scale: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 2rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 4rem);
--wa-shadow-spread-multiplier: 0;
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
--wa-shadow-spread-scale: 0;
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 1rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 2rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 4rem);
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-shadow-spread-xs) var(--wa-color-shadow);
@@ -400,7 +400,7 @@
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 32% + 40%),
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);

4
src/styles/themes/default/color-semantic.css
View File

@@ -29,7 +29,7 @@
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 24% + 8%),
transparent
);
@@ -118,7 +118,7 @@
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
--wa-color-focus: var(--wa-color-blue-60);

8
src/styles/themes/default/outlines.css
View File

@@ -5,10 +5,10 @@
--wa-border-style: solid;
/* A multiplier is provided to uniformly increase or decrease all border widths. */
--wa-border-width-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
/**
* Focus

10
src/styles/themes/default/rounding.css
View File

@@ -3,11 +3,11 @@
*/
:where(:root, :host) {
/* A multiplier is provided to uniformly increase or decrease all border radii. */
--wa-border-radius-multiplier: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.5rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;

40
src/styles/themes/default/shadows.css
View File

@@ -4,29 +4,29 @@
* A multiplier is provided for each shadow quality to uniformly scale all related values.
*/
:where(:root, :host) {
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 4rem);
--wa-shadow-offset-y-multiplier: 0.125;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
--wa-shadow-offset-y-scale: 0.125;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 4rem);
--wa-shadow-blur-multiplier: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
--wa-shadow-blur-scale: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 2rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 4rem);
--wa-shadow-spread-multiplier: -0.0625;
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
--wa-shadow-spread-scale: -0.0625;
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 1rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 2rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 4rem);
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-shadow-spread-xs) var(--wa-color-shadow);

20
src/styles/themes/default/space.css
View File

@@ -3,14 +3,14 @@
*/
:where(:root, :host) {
/* A multiplier is provided to uniformly increase or decrease all spacing. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
}

20
src/styles/themes/default/typography.css
View File

@@ -11,16 +11,16 @@
* with each value rounded to the nearest whole pixel based on a 16px root font size.
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
* A multiplier is provided to uniformly increase or decrease all font sizes. */
--wa-font-size-multiplier: 1;
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
--wa-font-size-scale: 1;
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;

46
src/styles/themes/fa.css
View File

@@ -127,12 +127,12 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 6%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
transparent
);
--wa-shadow-offset-x-multiplier: 0;
--wa-shadow-offset-y-multiplier: 0.35;
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-y-scale: 0.35;
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
--wa-color-mix-hover: black 8%;
@@ -245,16 +245,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -263,10 +263,10 @@
/* 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-multiplier: 0.125;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.125;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -279,11 +279,11 @@
*/
/* Corners 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-radius-multiplier: 0.5;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.5;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -376,7 +376,7 @@
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 16% + 40%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
transparent
);

42
src/styles/themes/glassy.css
View File

@@ -126,7 +126,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 6%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
transparent
);
@@ -240,16 +240,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -258,10 +258,10 @@
/* 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-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -274,11 +274,11 @@
*/
/* Corners 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-radius-multiplier: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -368,7 +368,7 @@
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-primary-05) 30%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
--wa-color-mix-hover: white 6%;
--wa-color-mix-active: black 12%;

42
src/styles/themes/mellow.css
View File

@@ -126,7 +126,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 6%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
transparent
);
@@ -240,16 +240,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -258,10 +258,10 @@
/* 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-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -274,11 +274,11 @@
*/
/* Corners 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-radius-multiplier: 0.06125;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.06125;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -368,7 +368,7 @@
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;

42
src/styles/themes/migration.css
View File

@@ -126,7 +126,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 6%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
transparent
);
@@ -242,16 +242,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -260,10 +260,10 @@
/* 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-multiplier: calc(1 / 14);
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: calc(1 / 14);
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -276,11 +276,11 @@
*/
/* Corners 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-radius-multiplier: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.375;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -371,7 +371,7 @@
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 16% + 40%), transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 16% + 40%), transparent);
--wa-color-mix-hover: var(--wa-color-base-70) 20%;
--wa-color-mix-active: var(--wa-color-base-70) 10%;

46
src/styles/themes/playful.css
View File

@@ -139,7 +139,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-40) calc(var(--wa-shadow-blur-multiplier) * 8% + 16%),
var(--wa-color-base-40) calc(var(--wa-shadow-blur-scale) * 8% + 16%),
transparent
);
@@ -255,16 +255,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -273,10 +273,10 @@
/* 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-multiplier: calc(2 / 18);
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 1.5rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-scale: calc(2 / 18);
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 1.5rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 2rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-l);
@@ -289,11 +289,11 @@
*/
/* Corners 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-radius-multiplier: calc(8 / 18);
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1.5rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 5rem);
--wa-border-radius-scale: calc(8 / 18);
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1.5rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 3rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 5rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -363,8 +363,8 @@
--wa-tooltip-arrow-size: 0.375rem;
/* Depth */
--wa-shadow-blur-multiplier: 0.5;
--wa-shadow-offset-y-multiplier: 0.375;
--wa-shadow-blur-scale: 0.5;
--wa-shadow-offset-y-scale: 0.375;
}
.wa-theme-playful-dark,
@@ -389,7 +389,7 @@
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-40) calc(var(--wa-shadow-blur-multiplier) * 16% + 40%),
var(--wa-color-base-40) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
transparent
);

46
src/styles/themes/premium.css
View File

@@ -128,7 +128,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-10) calc(var(--wa-shadow-blur-multiplier) * 8% + 16%),
var(--wa-color-base-10) calc(var(--wa-shadow-blur-scale) * 8% + 16%),
transparent
);
@@ -243,16 +243,16 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
@@ -261,10 +261,10 @@
/* 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-multiplier: 0.09375;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
--wa-border-width-scale: 0.09375;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -277,11 +277,11 @@
*/
/* Corners 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-radius-multiplier: 0.25;
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
--wa-border-radius-scale: 0.25;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
@@ -351,8 +351,8 @@
--wa-tooltip-arrow-size: 0.375rem;
/* Depth */
--wa-shadow-blur-multiplier: 0.375;
--wa-shadow-offset-y-multiplier: 0.1875;
--wa-shadow-blur-scale: 0.375;
--wa-shadow-offset-y-scale: 0.1875;
}
.wa-theme-premium-dark,
@@ -377,7 +377,7 @@
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-10) calc(var(--wa-shadow-blur-multiplier) * 16% + 40%),
var(--wa-color-base-10) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
transparent
);