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

Theme files housekeeping, closes #519 (#552)

Browse Source 
* Reorg Glossy theme

* Reorg Playful theme

* Remove redundant dark mode tokens
This commit is contained in:
Lindsay M
2025-01-16 16:09:28 -05:00
committed by GitHub
parent fc6c7de1fd
commit fa3fe5f753
14 changed files with 530 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/styles/themes/active/color.css
View File

@@ -80,25 +80,10 @@
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-green-70);
--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-scale) * 32% + 40%), transparent);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors
*/

22
src/styles/themes/awesome/color.css
View File

@@ -71,28 +71,6 @@
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-blue-70);
--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-scale) * 32% + 40%), transparent);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors
*/

10
src/styles/themes/brutalist/color.css
View File

@@ -86,20 +86,10 @@
--wa-color-surface-lowered: var(--wa-color-gray-05);
--wa-color-surface-border: var(--wa-color-gray-40);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-gray-70);
--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: rgb(0 0 0 / 0.5);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors
*/

21
src/styles/themes/classic/color.css
View File

@@ -68,28 +68,7 @@
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-gray-80);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-blue-70);
--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,
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors

211
src/styles/themes/glossy.css
View File

@@ -1,67 +1,19 @@
@import url('../color/elegant.css');
@import url('default/color.css');
@import url('glossy/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/typography.css');
@import url('glossy/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('glossy/overrides.css');
:where(:root),
:host,
.wa-theme-glossy,
.wa-theme-mellow,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-40);
--wa-color-focus: var(--wa-color-indigo-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-90);
--wa-color-brand-border-normal: var(--wa-color-indigo-80);
--wa-color-brand-border-loud: var(--wa-color-indigo-60);
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-loud: var(--wa-color-green-40);
--wa-color-warning-fill-loud: var(--wa-color-yellow-40);
--wa-color-danger-fill-loud: var(--wa-color-red-40);
--wa-color-neutral-fill-loud: var(--wa-color-gray-10);
/**
* Typography
*/
--wa-font-family-body: 'Figtree', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 800;
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
.wa-invert {
/**
* Spacing
*/
@@ -77,154 +29,3 @@
*/
--wa-shadow-blur-scale: 3;
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-70);
--wa-color-focus: var(--wa-color-indigo-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
--wa-color-brand-fill-normal: var(--wa-color-indigo-20);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-20);
--wa-color-brand-border-normal: var(--wa-color-indigo-30);
--wa-color-brand-border-loud: var(--wa-color-indigo-40);
--wa-color-brand-on-quiet: var(--wa-color-indigo-60);
--wa-color-brand-on-normal: var(--wa-color-indigo-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-loud: var(--wa-color-green-40);
--wa-color-warning-fill-loud: var(--wa-color-yellow-40);
--wa-color-danger-fill-loud: var(--wa-color-red-40);
}
/**
* Component Styles
*/
:where(:root),
:host,
.wa-theme-glossy {
--wa-theme-glossy-inner-shine: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.4);
--wa-theme-glossy-top-highlight: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.2);
--wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.03);
--wa-theme-glossy-bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);
--wa-theme-glossy-inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
--wa-theme-glossy-upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
--wa-theme-glossy-lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
--wa-theme-glossy-bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04);
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em;
}
:is(
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-button,
.wa-button
):not([appearance='plain'], .wa-plain) {
box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow);
margin-bottom: var(--wa-shadow-offset-y-s);
transition: all var(--wa-transition-fast);
&:not([disabled]):active {
box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
var(--wa-theme-glossy-bottom-shadow-active);
transform: scale(0.98);
}
}
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea,
.wa-text-field {
--box-shadow: var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade);
transition: all var(--wa-transition-fast);
&:focus {
--box-shadow: 0 0 transparent, 0 0 transparent;
}
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
wa-checkbox:is(:state(checked), :state(indeterminate)),
wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
wa-radio:state(checked) {
--box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
&:active {
--box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-bottom-shadow-active);
}
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--border-color-checked);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
}
input[type='range'],
wa-slider,
wa-switch {
--thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
}
progress,
wa-progress-bar {
box-shadow: inset var(--wa-shadow-s);
&::part(indicator) {
box-shadow:
var(--wa-theme-glossy-inner-shine),
var(--wa-theme-glossy-top-highlight),
inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
var(--wa-theme-glossy-bottom-shadow);
}
}
}

66
src/styles/themes/glossy/color.css Normal file
View File

@@ -0,0 +1,66 @@
@import url('../../color/elegant.css');
@import url('../default/color.css');
:where(:root),
:host,
.wa-theme-glossy,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-40);
--wa-color-focus: var(--wa-color-indigo-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-90);
--wa-color-brand-border-normal: var(--wa-color-indigo-80);
--wa-color-brand-border-loud: var(--wa-color-indigo-60);
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-loud: var(--wa-color-green-40);
--wa-color-warning-fill-loud: var(--wa-color-yellow-40);
--wa-color-danger-fill-loud: var(--wa-color-red-40);
--wa-color-neutral-fill-loud: var(--wa-color-gray-10);
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-70);
--wa-color-focus: var(--wa-color-indigo-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
--wa-color-brand-fill-normal: var(--wa-color-indigo-20);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-20);
--wa-color-brand-border-normal: var(--wa-color-indigo-30);
--wa-color-brand-border-loud: var(--wa-color-indigo-40);
--wa-color-brand-on-quiet: var(--wa-color-indigo-60);
--wa-color-brand-on-normal: var(--wa-color-indigo-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-loud: var(--wa-color-green-40);
--wa-color-warning-fill-loud: var(--wa-color-yellow-40);
--wa-color-danger-fill-loud: var(--wa-color-red-40);
}

116
src/styles/themes/glossy/overrides.css Normal file
View File

@@ -0,0 +1,116 @@
:where(:root),
:host,
.wa-theme-glossy {
--wa-theme-glossy-inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.3);
--wa-theme-glossy-top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.15);
--wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.03);
--wa-theme-glossy-bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);
--wa-theme-glossy-inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
--wa-theme-glossy-upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
--wa-theme-glossy-lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
--wa-theme-glossy-bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04);
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em;
}
:is(
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-button,
.wa-button
):not([appearance='plain'], .wa-plain) {
box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow);
margin-bottom: var(--wa-shadow-offset-y-s);
transition: all var(--wa-transition-fast);
&:not([disabled]):active {
box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
var(--wa-theme-glossy-bottom-shadow-active);
transform: scale(0.98);
}
}
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea,
.wa-text-field {
--wa-theme-glossy-upper-tint: inset 0 -1.25em 0 0 rgb(255 255 255 / 0.085);
--wa-theme-glossy-lower-shade: inset 0 1.125em 0 0 rgb(0 0 0 / 0.02);
--box-shadow: var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade);
transition: all var(--wa-transition-fast);
&:focus {
--box-shadow: 0 0 transparent, 0 0 transparent;
}
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
wa-checkbox:is(:state(checked), :state(indeterminate)),
wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
wa-radio:state(checked) {
--box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
&:active {
--box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-bottom-shadow-active);
}
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--border-color-checked);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
}
input[type='range'],
wa-slider,
wa-switch {
--thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
}
progress,
wa-progress-bar {
box-shadow: inset var(--wa-shadow-s);
&::part(indicator) {
box-shadow:
var(--wa-theme-glossy-inner-shine),
var(--wa-theme-glossy-top-highlight),
inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
var(--wa-theme-glossy-bottom-shadow);
}
}
}

20
src/styles/themes/glossy/typography.css Normal file
View File

@@ -0,0 +1,20 @@
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('../default/typography.css');
:where(:root),
:host,
.wa-theme-glossy {
--wa-font-family-body: 'Figtree', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 800;
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
}

59
src/styles/themes/mellow/color.css
View File

@@ -83,73 +83,14 @@
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
--wa-color-text-normal: var(--wa-color-blue-90);
--wa-color-text-quiet: var(--wa-color-blue-70);
--wa-color-text-link: var(--wa-color-blue-70);
--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-scale) * 32% + 40%), transparent);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-blue-10);
--wa-color-brand-fill-normal: var(--wa-color-blue-20);
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
--wa-color-brand-border-quiet: var(--wa-color-blue-20);
--wa-color-brand-border-normal: var(--wa-color-blue-30);
--wa-color-brand-border-loud: var(--wa-color-blue-40);
--wa-color-brand-on-quiet: var(--wa-color-blue-60);
--wa-color-brand-on-normal: var(--wa-color-blue-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-border-quiet: var(--wa-color-green-20);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-border-loud: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-60);
--wa-color-success-on-normal: var(--wa-color-green-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-border-loud: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-20);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-border-loud: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-60);
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
--wa-color-neutral-fill-loud: var(--wa-color-gray-50);
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
--wa-color-neutral-on-loud: white;
}

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

@@ -1,106 +1,19 @@
@import url('../color/rudimentary.css');
@import url('default/color.css');
@import url('playful/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/typography.css');
@import url('playful/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('playful/overrides.css');
:where(:root),
:host,
.wa-theme-playful,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-border: var(--wa-color-gray-80);
--wa-color-text-link: var(--wa-color-yellow-40);
--wa-color-focus: var(--wa-color-violet-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-violet-90);
--wa-color-brand-fill-normal: var(--wa-color-violet-80);
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
--wa-color-brand-border-quiet: var(--wa-color-violet-90);
--wa-color-brand-border-normal: var(--wa-color-violet-70);
--wa-color-brand-border-loud: var(--wa-color-violet-50);
--wa-color-brand-on-quiet: var(--wa-color-violet-30);
--wa-color-brand-on-normal: var(--wa-color-violet-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-90);
--wa-color-success-fill-normal: var(--wa-color-green-80);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-70);
--wa-color-success-border-loud: var(--wa-color-green-50);
--wa-color-success-on-quiet: var(--wa-color-green-30);
--wa-color-success-on-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
--wa-color-warning-fill-normal: var(--wa-color-yellow-80);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
--wa-color-warning-border-loud: var(--wa-color-yellow-50);
--wa-color-warning-on-quiet: var(--wa-color-yellow-30);
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-red-90);
--wa-color-danger-fill-normal: var(--wa-color-red-80);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-70);
--wa-color-danger-border-loud: var(--wa-color-red-50);
--wa-color-danger-on-quiet: var(--wa-color-red-30);
--wa-color-danger-on-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
--wa-color-neutral-fill-normal: var(--wa-color-gray-80);
--wa-color-neutral-fill-loud: var(--wa-color-gray-40);
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
--wa-color-neutral-border-normal: var(--wa-color-gray-70);
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
--wa-color-neutral-on-quiet: var(--wa-color-gray-30);
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
--wa-color-neutral-on-loud: var(--wa-color-gray-95);
/**
* Typography
*/
--wa-font-family-body: 'Nunito', sans-serif;
--wa-font-family-heading: 'Fredoka', sans-serif;
--wa-font-family-code: 'Azeret Mono', monospace;
--wa-font-family-longform: ui-serif, serif;
--wa-font-size-scale: 1.125;
--wa-font-weight-normal: 500;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed;
.wa-invert {
/**
* Borders
*/
@@ -128,232 +41,3 @@
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-radius: min(var(--wa-border-radius-pill), calc(var(--wa-form-control-height) * 0.6));
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-20);
--wa-color-surface-default: var(--wa-color-gray-10);
--wa-color-surface-lowered: var(--wa-color-gray-05);
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-yellow-80);
--wa-color-focus: var(--wa-color-violet-60);
--wa-color-mix-hover: white 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-violet-20);
--wa-color-brand-fill-normal: var(--wa-color-violet-40);
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
--wa-color-brand-border-quiet: var(--wa-color-violet-30);
--wa-color-brand-border-normal: var(--wa-color-violet-40);
--wa-color-brand-border-loud: var(--wa-color-violet-50);
--wa-color-brand-on-quiet: var(--wa-color-violet-70);
--wa-color-brand-on-normal: var(--wa-color-violet-90);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-20);
--wa-color-success-fill-normal: var(--wa-color-green-40);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-border-quiet: var(--wa-color-green-30);
--wa-color-success-border-normal: var(--wa-color-green-40);
--wa-color-success-border-loud: var(--wa-color-green-50);
--wa-color-success-on-quiet: var(--wa-color-green-70);
--wa-color-success-on-normal: var(--wa-color-green-90);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
--wa-color-warning-fill-normal: var(--wa-color-yellow-40);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
--wa-color-warning-border-normal: var(--wa-color-yellow-40);
--wa-color-warning-border-loud: var(--wa-color-yellow-50);
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-red-20);
--wa-color-danger-fill-normal: var(--wa-color-red-40);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-30);
--wa-color-danger-border-normal: var(--wa-color-red-40);
--wa-color-danger-border-loud: var(--wa-color-red-50);
--wa-color-danger-on-quiet: var(--wa-color-red-70);
--wa-color-danger-on-normal: var(--wa-color-red-90);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
--wa-color-neutral-fill-normal: var(--wa-color-gray-40);
--wa-color-neutral-fill-loud: var(--wa-color-gray-70);
--wa-color-neutral-border-quiet: var(--wa-color-gray-30);
--wa-color-neutral-border-normal: var(--wa-color-gray-40);
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
--wa-color-neutral-on-quiet: var(--wa-color-gray-70);
--wa-color-neutral-on-normal: var(--wa-color-gray-90);
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
}
/**
* Component Styles
*/
:where(:root),
:host,
.wa-theme-playful {
wa-badge {
font-weight: var(--wa-font-weight-bold);
}
wa-badge,
wa-tag,
wa-select::part(tag) {
border-width: calc(var(--wa-border-width-s) * 0.67);
}
wa-select::part(tag) {
border-radius: var(--wa-form-control-border-radius);
}
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-group > wa-radio-button,
.wa-button {
font-weight: var(--wa-font-weight-bold);
&:not([disabled]) {
transition-property: all;
/* Doesn't apply transform to buttons in dropdowns or button groups.
* For dropdowns, this prevents the dropdown panel from shifting. */
&:not(:where(wa-button-group &, wa-dropdown &, wa-radio-group &)) {
&:hover {
transform: scale(1.02, 1.02);
}
&:active {
transform: scale(0.98, 0.98);
}
}
}
&:not(
wa-radio-button,
[appearance~='outlined'],
[appearance~='filled'],
[appearance~='plain'],
.wa-outlined,
.wa-filled,
.wa-plain
) {
--gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
--gradient-middle: var(--background-color);
--gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
--shadow-outer: 0px 0.375em 1em
color-mix(in oklch, oklch(from var(--background-color) calc(l + 0.1) c h), transparent 70%);
--shadow-lower: inset 0 -0.125em 0.5em oklch(from var(--background-color) calc(l - 0.2) c h);
--shadow-upper: inset 0 0.125em 0.5em oklch(from var(--background-color) calc(l + 0.4) c h);
text-shadow: 0 0.125em 0.125em oklch(from var(--background-color) calc(l - 0.1) c h);
&::part(base),
:is(&) {
background: linear-gradient(
180deg,
var(--gradient-top) 0%,
var(--gradient-middle) 51.88%,
var(--gradient-bottom) 100%
);
box-shadow: var(--shadow-outer), var(--shadow-lower), var(--shadow-upper);
padding-inline: calc(var(--wa-space) + var(--border-width));
border-width: 0px;
}
&:not([disabled]) {
&:hover {
&::part(base),
:is(&) {
background: linear-gradient(
180deg,
var(--gradient-bottom) 0%,
var(--gradient-middle) 51.88%,
var(--gradient-top) 100%
);
}
}
&:active {
&::part(base),
:is(&) {
background: linear-gradient(
180deg,
color-mix(in oklab, var(--gradient-top), var(--wa-color-mix-active)) 0%,
color-mix(in oklab, var(--gradient-middle), var(--wa-color-mix-active)) 51.88%,
color-mix(in oklab, var(--gradient-bottom), var(--wa-color-mix-active)) 100%
);
box-shadow:
0 0 transparent,
var(--shadow-lower),
var(--shadow-upper);
}
}
}
}
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
wa-checkbox:is(:state(checked), :state(indeterminate))::part(control),
wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
wa-radio:state(checked)::part(control),
wa-switch:state(checked)::part(control) {
--gradient-top: oklch(from var(--background-color-checked) calc(l - 0.1) c h);
--gradient-middle: var(--background-color-checked);
--gradient-bottom: oklch(from var(--background-color-checked) calc(l + 0.1) c h);
background: linear-gradient(
180deg,
var(--gradient-top) 0%,
var(--gradient-middle) 51.88%,
var(--gradient-bottom) 100%
);
}
input[type='range'],
wa-progress-bar,
wa-slider {
--shadow-lower: inset 0 -0.125em 0.5em
oklch(from var(--indicator-color, var(--wa-form-control-activated-color)) calc(l - 0.2) c h);
--shadow-upper: inset 0 0.125em 0.5em
oklch(from var(--indicator-color, var(--wa-form-control-activated-color)) calc(l + 0.4) c h);
--thumb-shadow: var(--wa-shadow-s), var(--shadow-lower), var(--shadow-upper);
&::part(indicator) {
box-shadow: var(--shadow-lower), var(--shadow-upper);
}
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--wa-form-control-activated-color);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.5;
}
wa-rating {
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
}
wa-switch[checked] {
--thumb-shadow: var(--wa-shadow-s);
}
}

143
src/styles/themes/playful/color.css Normal file
View File

@@ -0,0 +1,143 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
:where(:root),
:host,
.wa-theme-playful,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-border: var(--wa-color-gray-80);
--wa-color-text-link: var(--wa-color-yellow-40);
--wa-color-focus: var(--wa-color-violet-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-violet-90);
--wa-color-brand-fill-normal: var(--wa-color-violet-80);
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
--wa-color-brand-border-quiet: var(--wa-color-violet-90);
--wa-color-brand-border-normal: var(--wa-color-violet-70);
--wa-color-brand-border-loud: var(--wa-color-violet-50);
--wa-color-brand-on-quiet: var(--wa-color-violet-30);
--wa-color-brand-on-normal: var(--wa-color-violet-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-90);
--wa-color-success-fill-normal: var(--wa-color-green-80);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-70);
--wa-color-success-border-loud: var(--wa-color-green-50);
--wa-color-success-on-quiet: var(--wa-color-green-30);
--wa-color-success-on-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
--wa-color-warning-fill-normal: var(--wa-color-yellow-80);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
--wa-color-warning-border-loud: var(--wa-color-yellow-50);
--wa-color-warning-on-quiet: var(--wa-color-yellow-30);
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-red-90);
--wa-color-danger-fill-normal: var(--wa-color-red-80);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-70);
--wa-color-danger-border-loud: var(--wa-color-red-50);
--wa-color-danger-on-quiet: var(--wa-color-red-30);
--wa-color-danger-on-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
--wa-color-neutral-fill-normal: var(--wa-color-gray-80);
--wa-color-neutral-fill-loud: var(--wa-color-gray-40);
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
--wa-color-neutral-border-normal: var(--wa-color-gray-70);
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
--wa-color-neutral-on-quiet: var(--wa-color-gray-30);
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
--wa-color-neutral-on-loud: var(--wa-color-gray-95);
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-20);
--wa-color-surface-default: var(--wa-color-gray-10);
--wa-color-surface-lowered: var(--wa-color-gray-05);
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-yellow-80);
--wa-color-focus: var(--wa-color-violet-60);
--wa-color-mix-hover: white 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-violet-20);
--wa-color-brand-fill-normal: var(--wa-color-violet-40);
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
--wa-color-brand-border-quiet: var(--wa-color-violet-30);
--wa-color-brand-border-normal: var(--wa-color-violet-40);
--wa-color-brand-border-loud: var(--wa-color-violet-50);
--wa-color-brand-on-quiet: var(--wa-color-violet-70);
--wa-color-brand-on-normal: var(--wa-color-violet-90);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-20);
--wa-color-success-fill-normal: var(--wa-color-green-40);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-border-quiet: var(--wa-color-green-30);
--wa-color-success-border-normal: var(--wa-color-green-40);
--wa-color-success-border-loud: var(--wa-color-green-50);
--wa-color-success-on-quiet: var(--wa-color-green-70);
--wa-color-success-on-normal: var(--wa-color-green-90);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
--wa-color-warning-fill-normal: var(--wa-color-yellow-40);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
--wa-color-warning-border-normal: var(--wa-color-yellow-40);
--wa-color-warning-border-loud: var(--wa-color-yellow-50);
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-red-20);
--wa-color-danger-fill-normal: var(--wa-color-red-40);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-30);
--wa-color-danger-border-normal: var(--wa-color-red-40);
--wa-color-danger-border-loud: var(--wa-color-red-50);
--wa-color-danger-on-quiet: var(--wa-color-red-70);
--wa-color-danger-on-normal: var(--wa-color-red-90);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
--wa-color-neutral-fill-normal: var(--wa-color-gray-40);
--wa-color-neutral-fill-loud: var(--wa-color-gray-70);
--wa-color-neutral-border-quiet: var(--wa-color-gray-30);
--wa-color-neutral-border-normal: var(--wa-color-gray-40);
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
--wa-color-neutral-on-quiet: var(--wa-color-gray-70);
--wa-color-neutral-on-normal: var(--wa-color-gray-90);
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
}

149
src/styles/themes/playful/overrides.css Normal file
View File

@@ -0,0 +1,149 @@
:where(:root),
:host,
.wa-theme-playful {
wa-badge {
font-weight: var(--wa-font-weight-bold);
}
wa-badge,
wa-tag,
wa-select::part(tag) {
border-width: calc(var(--wa-border-width-s) * 0.67);
}
wa-select::part(tag) {
border-radius: var(--wa-form-control-border-radius);
}
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-group > wa-radio-button,
.wa-button {
font-weight: var(--wa-font-weight-bold);
&:not([disabled]) {
transition-property: all;
/* Doesn't apply transform to buttons in dropdowns or button groups.
* For dropdowns, this prevents the dropdown panel from shifting. */
&:not(:where(wa-button-group &, wa-dropdown &, wa-radio-group &)) {
&:hover {
transform: scale(1.02, 1.02);
}
&:active {
transform: scale(0.98, 0.98);
}
}
}
&:not(
wa-radio-button,
[appearance~='outlined'],
[appearance~='filled'],
[appearance~='plain'],
.wa-outlined,
.wa-filled,
.wa-plain
) {
--gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
--gradient-middle: var(--background-color);
--gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
--shadow-outer: 0px 0.375em 1em
color-mix(in oklch, oklch(from var(--background-color) calc(l + 0.1) c h), transparent 70%);
--shadow-lower: inset 0 -0.125em 0.5em oklch(from var(--background-color) calc(l - 0.2) c h);
--shadow-upper: inset 0 0.125em 0.5em oklch(from var(--background-color) calc(l + 0.4) c h);
text-shadow: 0 0.125em 0.125em oklch(from var(--background-color) calc(l - 0.1) c h);
&::part(base),
:is(&) {
background: linear-gradient(
180deg,
var(--gradient-top) 0%,
var(--gradient-middle) 51.88%,
var(--gradient-bottom) 100%
);
box-shadow: var(--shadow-outer), var(--shadow-lower), var(--shadow-upper);
padding-inline: calc(var(--wa-space) + var(--border-width));
border-width: 0px;
}
&:not([disabled]) {
&:hover {
&::part(base),
:is(&) {
background: linear-gradient(
180deg,
var(--gradient-bottom) 0%,
var(--gradient-middle) 51.88%,
var(--gradient-top) 100%
);
}
}
&:active {
&::part(base),
:is(&) {
background: linear-gradient(
180deg,
color-mix(in oklab, var(--gradient-top), var(--wa-color-mix-active)) 0%,
color-mix(in oklab, var(--gradient-middle), var(--wa-color-mix-active)) 51.88%,
color-mix(in oklab, var(--gradient-bottom), var(--wa-color-mix-active)) 100%
);
box-shadow:
0 0 transparent,
var(--shadow-lower),
var(--shadow-upper);
}
}
}
}
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
wa-checkbox:is(:state(checked), :state(indeterminate))::part(control),
wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
wa-radio:state(checked)::part(control),
wa-switch:state(checked)::part(control) {
--gradient-top: oklch(from var(--background-color-checked) calc(l - 0.1) c h);
--gradient-middle: var(--background-color-checked);
--gradient-bottom: oklch(from var(--background-color-checked) calc(l + 0.1) c h);
background: linear-gradient(
180deg,
var(--gradient-top) 0%,
var(--gradient-middle) 51.88%,
var(--gradient-bottom) 100%
);
}
input[type='range'],
wa-progress-bar,
wa-slider {
--shadow-lower: inset 0 -0.125em 0.5em
oklch(from var(--indicator-color, var(--wa-form-control-activated-color)) calc(l - 0.2) c h);
--shadow-upper: inset 0 0.125em 0.5em
oklch(from var(--indicator-color, var(--wa-form-control-activated-color)) calc(l + 0.4) c h);
--thumb-shadow: var(--wa-shadow-s), var(--shadow-lower), var(--shadow-upper);
&::part(indicator) {
box-shadow: var(--shadow-lower), var(--shadow-upper);
}
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--wa-form-control-activated-color);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.5;
}
wa-rating {
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
}
wa-switch[checked] {
--thumb-shadow: var(--wa-shadow-s);
}
}

25
src/styles/themes/playful/typography.css Normal file
View File

@@ -0,0 +1,25 @@
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('../default/typography.css');
:where(:root),
:host,
.wa-theme-playful {
--wa-font-family-body: 'Nunito', sans-serif;
--wa-font-family-heading: 'Fredoka', sans-serif;
--wa-font-family-code: 'Azeret Mono', monospace;
--wa-font-family-longform: ui-serif, serif;
--wa-font-size-scale: 1.125;
--wa-font-weight-normal: 500;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed;
}

6
src/styles/themes/tailspin/color.css
View File

@@ -84,18 +84,12 @@
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: rgb(255 255 255 / 0.1);
--wa-color-text-normal: white;
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-indigo-70);
--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: rgb(0 0 0 / 0.2);
--wa-color-focus: var(--wa-color-indigo-60);