From fa3fe5f753cd6fd0be24d755607a697b87bbc391 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:09:28 -0500 Subject: [PATCH] Theme files housekeeping, closes #519 (#552) * Reorg Glossy theme * Reorg Playful theme * Remove redundant dark mode tokens --- src/styles/themes/active/color.css | 15 -- src/styles/themes/awesome/color.css | 22 -- src/styles/themes/brutalist/color.css | 10 - src/styles/themes/classic/color.css | 21 -- src/styles/themes/glossy.css | 211 +-------------- src/styles/themes/glossy/color.css | 66 +++++ src/styles/themes/glossy/overrides.css | 116 ++++++++ src/styles/themes/glossy/typography.css | 20 ++ src/styles/themes/mellow/color.css | 59 ---- src/styles/themes/playful.css | 326 +---------------------- src/styles/themes/playful/color.css | 143 ++++++++++ src/styles/themes/playful/overrides.css | 149 +++++++++++ src/styles/themes/playful/typography.css | 25 ++ src/styles/themes/tailspin/color.css | 6 - 14 files changed, 530 insertions(+), 659 deletions(-) create mode 100644 src/styles/themes/glossy/color.css create mode 100644 src/styles/themes/glossy/overrides.css create mode 100644 src/styles/themes/glossy/typography.css create mode 100644 src/styles/themes/playful/color.css create mode 100644 src/styles/themes/playful/overrides.css create mode 100644 src/styles/themes/playful/typography.css diff --git a/src/styles/themes/active/color.css b/src/styles/themes/active/color.css index c6beaca17..a94ddc160 100644 --- a/src/styles/themes/active/color.css +++ b/src/styles/themes/active/color.css @@ -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 */ diff --git a/src/styles/themes/awesome/color.css b/src/styles/themes/awesome/color.css index 077c50eea..b6ac140c0 100644 --- a/src/styles/themes/awesome/color.css +++ b/src/styles/themes/awesome/color.css @@ -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 */ diff --git a/src/styles/themes/brutalist/color.css b/src/styles/themes/brutalist/color.css index b60a73ae0..aa81c5acd 100644 --- a/src/styles/themes/brutalist/color.css +++ b/src/styles/themes/brutalist/color.css @@ -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 */ diff --git a/src/styles/themes/classic/color.css b/src/styles/themes/classic/color.css index a1d49f442..ccbc3c759 100644 --- a/src/styles/themes/classic/color.css +++ b/src/styles/themes/classic/color.css @@ -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 diff --git a/src/styles/themes/glossy.css b/src/styles/themes/glossy.css index 14548ec0a..dd8ea3b90 100644 --- a/src/styles/themes/glossy.css +++ b/src/styles/themes/glossy.css @@ -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); - } - } -} diff --git a/src/styles/themes/glossy/color.css b/src/styles/themes/glossy/color.css new file mode 100644 index 000000000..fae876a43 --- /dev/null +++ b/src/styles/themes/glossy/color.css @@ -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); +} diff --git a/src/styles/themes/glossy/overrides.css b/src/styles/themes/glossy/overrides.css new file mode 100644 index 000000000..8d52dd62c --- /dev/null +++ b/src/styles/themes/glossy/overrides.css @@ -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); + } + } +} diff --git a/src/styles/themes/glossy/typography.css b/src/styles/themes/glossy/typography.css new file mode 100644 index 000000000..0ba8cc5d7 --- /dev/null +++ b/src/styles/themes/glossy/typography.css @@ -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; +} diff --git a/src/styles/themes/mellow/color.css b/src/styles/themes/mellow/color.css index bc32c3257..5234b9779 100644 --- a/src/styles/themes/mellow/color.css +++ b/src/styles/themes/mellow/color.css @@ -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; } diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css index 018ebc6ae..a727741fa 100644 --- a/src/styles/themes/playful.css +++ b/src/styles/themes/playful.css @@ -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); - } -} diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css new file mode 100644 index 000000000..8271c0f42 --- /dev/null +++ b/src/styles/themes/playful/color.css @@ -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); +} diff --git a/src/styles/themes/playful/overrides.css b/src/styles/themes/playful/overrides.css new file mode 100644 index 000000000..48dfbe184 --- /dev/null +++ b/src/styles/themes/playful/overrides.css @@ -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); + } +} diff --git a/src/styles/themes/playful/typography.css b/src/styles/themes/playful/typography.css new file mode 100644 index 000000000..1586ab6f1 --- /dev/null +++ b/src/styles/themes/playful/typography.css @@ -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; +} diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css index 7c057e85d..2803eca64 100644 --- a/src/styles/themes/tailspin/color.css +++ b/src/styles/themes/tailspin/color.css @@ -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);