diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index 5198167ea..4d7412d66 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -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 diff --git a/docs/docs/theming/borders.md b/docs/docs/theming/borders.md index ab912e3a6..e54cd3913 100644 --- a/docs/docs/theming/borders.md +++ b/docs/docs/theming/borders.md @@ -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%` |
| | `--wa-border-radius-square` | `0px` |
| -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 | | ----------------------- | -------------------------------- | ---------------------------------------------------------------------------- | diff --git a/docs/docs/theming/shadows.md b/docs/docs/theming/shadows.md index f986d8c72..9b6eb2afa 100644 --- a/docs/docs/theming/shadows.md +++ b/docs/docs/theming/shadows.md @@ -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` (-0.5px) | | `--wa-shadow-spread-s` | `-0.0625rem` (-1px) | | `--wa-shadow-spread-m` | `-0.125rem` (-2px) | -| `--wa-shadow-spread-l` | `-0.25rem` (-4px) | \ No newline at end of file +| `--wa-shadow-spread-l` | `-0.25rem` (-4px) | diff --git a/docs/docs/theming/space.md b/docs/docs/theming/space.md index a41be7a1d..b7e31b394 100644 --- a/docs/docs/theming/space.md +++ b/docs/docs/theming/space.md @@ -34,9 +34,9 @@ layout: page-outline } -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 \ No newline at end of file +- 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 diff --git a/docs/docs/theming/typography.md b/docs/docs/theming/typography.md index 2d8b049ab..54ed6fdc9 100644 --- a/docs/docs/theming/typography.md +++ b/docs/docs/theming/typography.md @@ -19,7 +19,7 @@ Font families are assigned specific roles — like heading or code — 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 | | -------------------- | --------------------------------- | ---------------------------------------------------------- | diff --git a/src/styles/depth/0_flat.css b/src/styles/depth/0_flat.css index 00604498f..a9240b058 100644 --- a/src/styles/depth/0_flat.css +++ b/src/styles/depth/0_flat.css @@ -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); diff --git a/src/styles/depth/1_semiflat.css b/src/styles/depth/1_semiflat.css index 7f4a5b6fd..938505ce9 100644 --- a/src/styles/depth/1_semiflat.css +++ b/src/styles/depth/1_semiflat.css @@ -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); diff --git a/src/styles/depth/2_chunky.css b/src/styles/depth/2_chunky.css index 445da153a..826ab0a3a 100644 --- a/src/styles/depth/2_chunky.css +++ b/src/styles/depth/2_chunky.css @@ -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); diff --git a/src/styles/depth/3_punchy.css b/src/styles/depth/3_punchy.css index 67d109d28..797cb7fb4 100644 --- a/src/styles/depth/3_punchy.css +++ b/src/styles/depth/3_punchy.css @@ -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); diff --git a/src/styles/depth/4_glossy.css b/src/styles/depth/4_glossy.css index 5c6bd1e34..6552cd6e4 100644 --- a/src/styles/depth/4_glossy.css +++ b/src/styles/depth/4_glossy.css @@ -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); diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css index a49bfcdc8..6bb53c736 100644 --- a/src/styles/themes/active.css +++ b/src/styles/themes/active.css @@ -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%; diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css index 3438f5fb6..74b3a0550 100644 --- a/src/styles/themes/brutalist.css +++ b/src/styles/themes/brutalist.css @@ -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; } diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css index 27eba2cd5..76534caf9 100644 --- a/src/styles/themes/classic.css +++ b/src/styles/themes/classic.css @@ -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 ); diff --git a/src/styles/themes/default/color-semantic.css b/src/styles/themes/default/color-semantic.css index 907406451..6db7008a1 100644 --- a/src/styles/themes/default/color-semantic.css +++ b/src/styles/themes/default/color-semantic.css @@ -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); diff --git a/src/styles/themes/default/outlines.css b/src/styles/themes/default/outlines.css index 643f5d40e..78bad62dc 100644 --- a/src/styles/themes/default/outlines.css +++ b/src/styles/themes/default/outlines.css @@ -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 diff --git a/src/styles/themes/default/rounding.css b/src/styles/themes/default/rounding.css index ffc648886..6dd7144b8 100644 --- a/src/styles/themes/default/rounding.css +++ b/src/styles/themes/default/rounding.css @@ -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; diff --git a/src/styles/themes/default/shadows.css b/src/styles/themes/default/shadows.css index a1cc6d5f3..94219aa43 100644 --- a/src/styles/themes/default/shadows.css +++ b/src/styles/themes/default/shadows.css @@ -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); diff --git a/src/styles/themes/default/space.css b/src/styles/themes/default/space.css index 4146a71b7..cf1b59efe 100644 --- a/src/styles/themes/default/space.css +++ b/src/styles/themes/default/space.css @@ -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 */ } diff --git a/src/styles/themes/default/typography.css b/src/styles/themes/default/typography.css index 37664b8df..124b7f2bc 100644 --- a/src/styles/themes/default/typography.css +++ b/src/styles/themes/default/typography.css @@ -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; diff --git a/src/styles/themes/fa.css b/src/styles/themes/fa.css index e47af2ac8..8f62b28ff 100644 --- a/src/styles/themes/fa.css +++ b/src/styles/themes/fa.css @@ -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 ); diff --git a/src/styles/themes/glassy.css b/src/styles/themes/glassy.css index c52846570..e44fc2791 100644 --- a/src/styles/themes/glassy.css +++ b/src/styles/themes/glassy.css @@ -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%; diff --git a/src/styles/themes/mellow.css b/src/styles/themes/mellow.css index 5f8057f83..9c1d55a5e 100644 --- a/src/styles/themes/mellow.css +++ b/src/styles/themes/mellow.css @@ -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%; diff --git a/src/styles/themes/migration.css b/src/styles/themes/migration.css index 93821659f..c652e7960 100644 --- a/src/styles/themes/migration.css +++ b/src/styles/themes/migration.css @@ -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%; diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css index 192cf4f64..9b31bf58c 100644 --- a/src/styles/themes/playful.css +++ b/src/styles/themes/playful.css @@ -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 ); diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css index c4edad5b0..073a121d5 100644 --- a/src/styles/themes/premium.css +++ b/src/styles/themes/premium.css @@ -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 );