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

Simplify shadow scales

Browse Source
This commit is contained in:
lindsaym-fa
2025-01-02 15:59:04 -05:00
parent 093c42ce66
commit 8ab1489cc4
5 changed files with 35 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/docs/experimental/sandbox.md
View File

@@ -167,7 +167,6 @@ layout: page
width: 4rem;
}
</style>
<div class="shadow" style="box-shadow: var(--wa-shadow-xs);"></div>
<div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
<div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>

18
docs/docs/resources/changelog.md
View File

@@ -18,12 +18,20 @@ During the alpha period, things might break! We take breaking changes very serio
- Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
- Improved performance of `<wa-select>` when using a large number of options
- Updated the Japanese translation
- Updated the `--wa-border-radius-*` scale for better DX
- Changed the value of `--wa-border-radius-scale` to `1` and updated calculations of size-based `--wa-border-radius-*` tokens
- Removed unused `--wa-border-radius-xs` theme token and `wa-border-radius-xs` utility class
- Decreased the size of the scale so that `--wa-border-radius-s` is now the smallest border radius token, matching the value of the previous `--wa-border-radius-xs` token
- Changed the value of `--wa-border-width-scale` to `1` and updated calculations of size-based `--wa-border-width-*` tokens
### Theming
- Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
- Changed the value of `--wa-border-width-scale` to `1` and updated calculations of size-based `--wa-border-width-*` tokens
- Changed the value of `--wa-border-radius-scale` to `1` and updated calculations of size-based `--wa-border-radius-*` tokens
- Removed unused `--wa-border-radius-xs` token and `wa-border-radius-xs` utility class
- Decreased the size of the scale so that `--wa-border-radius-s` is now the smallest border radius token, matching the value of the previous `--wa-border-radius-xs` token
- Updated the `--wa-shadow-*` scales for better DX
- Changed the value of `--wa-shadow-offset-y-scale` to `1` and updated calculations of size-based `--wa-shadow-offset-y-*` tokens
- Changed the value of `--wa-shadow-blur-scale` to `1` and updated calculations of size-based `--wa-shadow-blur-*` tokens
- Changed the value of `--wa-shadow-spread-scale` to `-0.5` and updated calculations of size-based `--wa-shadow-spread-*` tokens
- Updated calculations of size-based `--wa-shadow-offset-x-*` tokens to match calculations used for other shadow qualities (`--wa-shadow-offset-x-scale` remains `0`)
- Removed unused `--wa-shadow-xs` token
## 3.0.0-alpha.7

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

@@ -9,12 +9,11 @@ Shadows are constructed using corresponding offset-x, offset-y, blur, and spread
| Custom Property | Default Value |
| ---------------- | ------------------------------------------------------------------- |
| `--wa-shadow-xs` | <div class="swatch" style="box-shadow: var(--wa-shadow-xs);"></div> |
| `--wa-shadow-s` | <div class="swatch" style="box-shadow: var(--wa-shadow-s);"></div> |
| `--wa-shadow-m` | <div class="swatch" style="box-shadow: var(--wa-shadow-m);"></div> |
| `--wa-shadow-l` | <div class="swatch" style="box-shadow: var(--wa-shadow-l);"></div> |
Any shadow may be implemented as an inner box shadow using the `inset` keyword, e.g. `box-shadow: inset var(--wa-shadow-xs);`.
Any shadow may be implemented as an inner box shadow using the `inset` keyword, e.g. `box-shadow: inset var(--wa-shadow-s);`.
## Horizontal Offset (X)
@@ -22,40 +21,36 @@ Each offset-x property uses a `calc()` function with `--wa-shadow-offset-x-scale
| Custom Property | Default Value |
| ------------------------- | -------------- |
| `--wa-shadow-offset-x-xs` | `0rem` |
| `--wa-shadow-offset-x-s` | `0rem` |
| `--wa-shadow-offset-x-m` | `0rem` |
| `--wa-shadow-offset-x-l` | `0rem` |
## Vertical Offset (Y)
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.
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 `1`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| ------------------------- | -------------------------------- |
| `--wa-shadow-offset-y-xs` | `0.0625rem` <small>(1px)</small> |
| `--wa-shadow-offset-y-s` | `0.125rem` <small>(2px)</small> |
| `--wa-shadow-offset-y-m` | `0.25rem` <small>(4px)</small> |
| `--wa-shadow-offset-y-l` | `0.5rem` <small>(8px)</small> |
## Blur
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.
Each blur property uses a `calc()` function with `--wa-shadow-blur-scale` to uniformly scale blur values. By default, this multiplier is `1`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| --------------------- | -------------------------------- |
| `--wa-shadow-blur-xs` | `0.0625rem` <small>(1px)</small> |
| `--wa-shadow-blur-s` | `0.125rem` <small>(2px)</small> |
| `--wa-shadow-blur-m` | `0.25rem` <small>(4px)</small> |
| `--wa-shadow-blur-l` | `0.5rem` <small>(8px)</small> |
## Spread
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.
Each spread property uses a `calc()` function with `--wa-shadow-spread-scale` to uniformly scale spread values. By default, this multiplier is `-0.5`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| ----------------------- | ------------------------------------- |
| `--wa-shadow-spread-xs` | `-0.03125rem` <small>(-0.5px)</small> |
| Custom Property | Default Value |
| ----------------------- | ------------------------------------ |
| `--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> |

2
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-scale) * 24% + 8%),
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);

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

@@ -5,31 +5,25 @@
*/
:where(:root, :host) {
--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-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--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-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--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-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--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-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--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);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)