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

Define and import cascade layers (#1793)

Browse Source 
* define cascade layers

* invoke cascade layers in kitchen sink styles

* invoke cascade layers in utilities and native styles

* invoke cascade layers in palettes + consolidate shared palette rules

* invoke cascade layers in themes

* add changelog

* prettier demands whitespace
This commit is contained in:
Lindsay M
2025-11-19 17:43:55 -05:00
committed by GitHub
parent 200b02f023
commit d6fe9f7819
12 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -13,6 +13,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next
- Added `layers.css` to define cascade layer order and updated palettes, themes, native styles, and utilities to import the new rule for more fail-safe modularity [pr:1793]
- Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
- Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
- Fixed a z-index bug in `<wa-scroller>` styles [issue:1724]

4
packages/webawesome/src/styles/color/palettes/base.css
View File

@@ -1,3 +1,7 @@
/* Rules shared by all palettes */
@import url('../../layers.css');
@import url('../variants.css');
/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
:where(:root),
:host {

1
packages/webawesome/src/styles/color/palettes/bright.css
View File

@@ -1,5 +1,4 @@
@import url('base.css');
@import url('../variants.css');
@layer wa-color-palette {
.wa-palette-bright {

1
packages/webawesome/src/styles/color/palettes/default.css
View File

@@ -1,5 +1,4 @@
@import url('base.css');
@import url('../variants.css');
@layer wa-color-palette {
:where(:root),

1
packages/webawesome/src/styles/color/palettes/shoelace.css
View File

@@ -1,5 +1,4 @@
@import url('base.css');
@import url('../variants.css');
@layer wa-color-palette {
.wa-palette-shoelace,

2
packages/webawesome/src/styles/layers.css Normal file
View File

@@ -0,0 +1,2 @@
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

3
packages/webawesome/src/styles/native.css
View File

@@ -1,3 +1,6 @@
@import url('layers.css');
/* Required utilities */
@import url('utilities/size.css');
@import url('utilities/variants.css');

1
packages/webawesome/src/styles/themes/awesome.css
View File

@@ -1,3 +1,4 @@
@import url('../layers.css');
@import url('../color/palettes/bright.css'); /* To use this palette, add class="wa-palette-bright" to the <html> element */
@import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');

1
packages/webawesome/src/styles/themes/default.css
View File

@@ -1,3 +1,4 @@
@import url('../layers.css');
@import url('../color/palettes/default.css');
@layer wa-theme {

1
packages/webawesome/src/styles/themes/shoelace.css
View File

@@ -1,3 +1,4 @@
@import url('../layers.css');
@import url('../color/palettes/shoelace.css'); /* To use this palette, add class="wa-palette-shoelace" to the <html> element */
@layer wa-theme {

2
packages/webawesome/src/styles/utilities.css
View File

@@ -1,3 +1,5 @@
@import url('layers.css');
@import url('utilities/fouce.css');
@import url('utilities/visually-hidden.css');
@import url('utilities/scroll-lock.css');

7
packages/webawesome/src/styles/webawesome.css
View File

@@ -1,9 +1,10 @@
@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
/* Cascade layers */
@import url('layers.css');
/* Native Styles */
/* Native styles */
@import url('native.css');
/* CSS Utilities */
/* CSS utilities */
@import url('utilities.css');
/* Theme */