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

Add variants.css (not yet linked from anywhere)

Browse Source
This commit is contained in:
Lea Verou
2024-12-16 15:28:26 -05:00
parent 6996d17531
commit 1ffdc19305
1 changed files with 69 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/styles/utilities/variants.css Normal file
View File

@@ -0,0 +1,69 @@
.wa-neutral {
--color-fill-loud: var(--wa-color-neutral-fill-loud);
--color-fill-normal: var(--wa-color-neutral-fill-normal);
--color-fill-quiet: var(--wa-color-neutral-fill-quiet);
--color-border-loud: var(--wa-color-neutral-border-loud);
--color-border-normal: var(--wa-color-neutral-border-normal);
--color-border-quiet: var(--wa-color-neutral-border-quiet);
--color-on-loud: var(--wa-color-neutral-on-loud);
--color-on-normal: var(--wa-color-neutral-on-normal);
--color-on-quiet: var(--wa-color-neutral-on-quiet);
}
.wa-brand {
--color-fill-loud: var(--wa-color-brand-fill-loud);
--color-fill-normal: var(--wa-color-brand-fill-normal);
--color-fill-quiet: var(--wa-color-brand-fill-quiet);
--color-border-loud: var(--wa-color-brand-border-loud);
--color-border-normal: var(--wa-color-brand-border-normal);
--color-border-quiet: var(--wa-color-brand-border-quiet);
--color-on-loud: var(--wa-color-brand-on-loud);
--color-on-normal: var(--wa-color-brand-on-normal);
--color-on-quiet: var(--wa-color-brand-on-quiet);
}
.wa-success {
--color-fill-loud: var(--wa-color-success-fill-loud);
--color-fill-normal: var(--wa-color-success-fill-normal);
--color-fill-quiet: var(--wa-color-success-fill-quiet);
--color-border-loud: var(--wa-color-success-border-loud);
--color-border-normal: var(--wa-color-success-border-normal);
--color-border-quiet: var(--wa-color-success-border-quiet);
--color-on-loud: var(--wa-color-success-on-loud);
--color-on-normal: var(--wa-color-success-on-normal);
--color-on-quiet: var(--wa-color-success-on-quiet);
}
.wa-warning {
--color-fill-loud: var(--wa-color-warning-fill-loud);
--color-fill-normal: var(--wa-color-warning-fill-normal);
--color-fill-quiet: var(--wa-color-warning-fill-quiet);
--color-border-loud: var(--wa-color-warning-border-loud);
--color-border-normal: var(--wa-color-warning-border-normal);
--color-border-quiet: var(--wa-color-warning-border-quiet);
--color-on-loud: var(--wa-color-warning-on-loud);
--color-on-normal: var(--wa-color-warning-on-normal);
--color-on-quiet: var(--wa-color-warning-on-quiet);
}
.wa-danger {
--color-fill-loud: var(--wa-color-danger-fill-loud);
--color-fill-normal: var(--wa-color-danger-fill-normal);
--color-fill-quiet: var(--wa-color-danger-fill-quiet);
--color-border-loud: var(--wa-color-danger-border-loud);
--color-border-normal: var(--wa-color-danger-border-normal);
--color-border-quiet: var(--wa-color-danger-border-quiet);
--color-on-loud: var(--wa-color-danger-on-loud);
--color-on-normal: var(--wa-color-danger-on-normal);
--color-on-quiet: var(--wa-color-danger-on-quiet);
}