From f8fcbd60ec68d4ff4e66974f51ddf1fea9bb5f21 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Fri, 9 May 2025 18:47:31 -0400 Subject: [PATCH] Separate dimension overrides into new files --- src/styles/themes/active.css | 1 + src/styles/themes/active/dimension.css | 50 +++++++++ src/styles/themes/active/overrides.css | 48 --------- src/styles/themes/awesome.css | 1 + src/styles/themes/awesome/dimension.css | 78 ++++++++++++++ src/styles/themes/awesome/overrides.css | 78 -------------- src/styles/themes/glossy.css | 1 + src/styles/themes/glossy/dimension.css | 101 +++++++++++++++++++ src/styles/themes/glossy/overrides.css | 97 ------------------ src/styles/themes/playful.css | 1 + src/styles/themes/playful/dimension.css | 123 ++++++++++++++++++++++ src/styles/themes/playful/overrides.css | 129 ++---------------------- 12 files changed, 362 insertions(+), 346 deletions(-) create mode 100644 src/styles/themes/active/dimension.css create mode 100644 src/styles/themes/awesome/dimension.css create mode 100644 src/styles/themes/glossy/dimension.css create mode 100644 src/styles/themes/playful/dimension.css diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css index fe4f8af4a..363b24845 100644 --- a/src/styles/themes/active.css +++ b/src/styles/themes/active.css @@ -6,6 +6,7 @@ @import url('default/shadows.css'); @import url('default/transitions.css'); @import url('default/groups.css'); +@import url('active/dimension.css'); @import url('active/overrides.css'); :where(:root), diff --git a/src/styles/themes/active/dimension.css b/src/styles/themes/active/dimension.css new file mode 100644 index 000000000..bddf03220 --- /dev/null +++ b/src/styles/themes/active/dimension.css @@ -0,0 +1,50 @@ +:where(:root), +:host, +.wa-theme-active { + --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */, + inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */, + inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */; + --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */, + inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */, + inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */; + + :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not( + [appearance='plain'], + .wa-plain + ) { + box-shadow: var(--wa-theme-active-shadow-pop-out); + + &:not([disabled], [loading]):active { + box-shadow: var(--wa-theme-active-shadow-punch-in); + } + } + + wa-card { + box-shadow: var(--wa-theme-active-shadow-pop-out); + } + + input:not([type='button'], [type='reset'], [type='submit'], :checked), + select, + textarea, + :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)), + wa-input, + wa-select, + wa-textarea { + &:not([appearance='filled']):not([disabled]) { + --box-shadow: inset var(--wa-shadow-s); + } + } + input[type='range'], + wa-slider, + wa-switch { + --thumb-shadow: var(--wa-theme-active-shadow-pop-out); + } + + wa-progress-bar { + box-shadow: inset var(--wa-shadow-s); + + &::part(indicator) { + box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h); + } + } +} diff --git a/src/styles/themes/active/overrides.css b/src/styles/themes/active/overrides.css index c1116fe34..b8a479d55 100644 --- a/src/styles/themes/active/overrides.css +++ b/src/styles/themes/active/overrides.css @@ -1,58 +1,10 @@ :where(:root), :host, .wa-theme-active { - --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */, - inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */, - inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */; - --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */, - inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */, - inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */; - - :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not( - [appearance='plain'], - .wa-plain - ) { - box-shadow: var(--wa-theme-active-shadow-pop-out); - - &:not([disabled], [loading]):active { - box-shadow: var(--wa-theme-active-shadow-punch-in); - } - } - - wa-card { - box-shadow: var(--wa-theme-active-shadow-pop-out); - } - - input:not([type='button'], [type='reset'], [type='submit'], :checked), - select, - textarea, - :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)), - wa-input, - wa-select, - wa-textarea { - &:not([appearance='filled']):not([disabled]) { - --box-shadow: inset var(--wa-shadow-s); - } - } - input[type='radio'], wa-radio { --background-color-checked: var(--wa-form-control-activated-color); --checked-icon-color: var(--wa-color-brand-on-loud); --checked-icon-scale: 0.4; } - - input[type='range'], - wa-slider, - wa-switch { - --thumb-shadow: var(--wa-theme-active-shadow-pop-out); - } - - wa-progress-bar { - box-shadow: inset var(--wa-shadow-s); - - &::part(indicator) { - box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h); - } - } } diff --git a/src/styles/themes/awesome.css b/src/styles/themes/awesome.css index 91588d8d5..ab614fb46 100644 --- a/src/styles/themes/awesome.css +++ b/src/styles/themes/awesome.css @@ -6,6 +6,7 @@ @import url('default/shadows.css'); @import url('default/transitions.css'); @import url('default/groups.css'); +@import url('awesome/dimension.css'); @import url('awesome/overrides.css'); :where(:root), diff --git a/src/styles/themes/awesome/dimension.css b/src/styles/themes/awesome/dimension.css new file mode 100644 index 000000000..2a056db0f --- /dev/null +++ b/src/styles/themes/awesome/dimension.css @@ -0,0 +1,78 @@ +:where(:root), +:host, +.wa-theme-awesome { + :is( + button, + input:where([type='button'], [type='reset'], [type='submit']), + wa-button, + wa-radio-group > wa-radio-button, + .wa-button + ):not([appearance='plain'], .wa-plain) { + --wa-transition-slow: 0; + --wa-transition-normal: 0; + --wa-transition-fast: 0; + + --border-color: var(--text-color); + --border-color-hover: var(--border-color); + --border-color-active: var(--border-color); + box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) + var(--wa-shadow-spread-s) var(--border-color); + --background-color-active: var(--border-color); + --text-color-active: var(--background-color); + + margin-bottom: var(--wa-shadow-offset-y-s); + + &:is([appearance='outlined'], .wa-outlined) { + --background-color: var(--wa-color-surface-default); + } + + &:not([disabled], [loading]):active, + &::part(checked) { + box-shadow: none; + transform: translateY(var(--wa-shadow-offset-y-s)); + } + + .wa-dark & { + --border-color: var(--wa-color-border-quiet); + } + } + + wa-radio-group > wa-radio-button { + &::part(base) { + --background-color-active: var(--border-color-active); + --border-color-active: var(--wa-color-neutral-border-loud); + --text-color-active: var(--wa-color-surface-default); + } + &::part(checked) { + --background-color: var(--border-color); + --background-color-hover: var(--border-color); + --border-color: var(--wa-color-neutral-border-loud); + --text-color: var(--wa-color-surface-default); + --text-color-hover: var(--text-color); + } + } + :is( + 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 + ):not(:focus, [appearance='filled'], .wa-filled) { + --box-shadow: inset var(--wa-shadow-s); + } +} diff --git a/src/styles/themes/awesome/overrides.css b/src/styles/themes/awesome/overrides.css index 5bf2d2817..183b8ea64 100644 --- a/src/styles/themes/awesome/overrides.css +++ b/src/styles/themes/awesome/overrides.css @@ -1,49 +1,12 @@ :where(:root), :host, .wa-theme-awesome { - /* #region Custom Styles */ wa-badge { border-radius: var(--wa-border-radius-m); font-weight: var(--wa-font-weight-bold); text-transform: uppercase; } - :is( - button, - input:where([type='button'], [type='reset'], [type='submit']), - wa-button, - wa-radio-group > wa-radio-button, - .wa-button - ):not([appearance='plain'], .wa-plain) { - --wa-transition-slow: 0; - --wa-transition-normal: 0; - --wa-transition-fast: 0; - - --border-color: var(--text-color); - --border-color-hover: var(--border-color); - --border-color-active: var(--border-color); - box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--border-color); - --background-color-active: var(--border-color); - --text-color-active: var(--background-color); - - margin-bottom: var(--wa-shadow-offset-y-s); - - &:is([appearance='outlined'], .wa-outlined) { - --background-color: var(--wa-color-surface-default); - } - - &:not([disabled], [loading]):active, - &::part(checked) { - box-shadow: none; - transform: translateY(var(--wa-shadow-offset-y-s)); - } - - .wa-dark & { - --border-color: var(--wa-color-border-quiet); - } - } - wa-callout, .wa-callout { &:is([appearance~='outlined'], .wa-outlined) { @@ -73,21 +36,6 @@ --checked-icon-color: var(--wa-color-surface-default); } - wa-radio-group > wa-radio-button { - &::part(base) { - --background-color-active: var(--border-color-active); - --border-color-active: var(--wa-color-neutral-border-loud); - --text-color-active: var(--wa-color-surface-default); - } - &::part(checked) { - --background-color: var(--border-color); - --background-color-hover: var(--border-color); - --border-color: var(--wa-color-neutral-border-loud); - --text-color: var(--wa-color-surface-default); - --text-color-hover: var(--text-color); - } - } - wa-switch { --height: 1.5em; } @@ -95,30 +43,4 @@ wa-tag { font-weight: var(--wa-font-weight-bold); } - - :is( - 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 - ):not(:focus, [appearance='filled'], .wa-filled) { - --box-shadow: inset var(--wa-shadow-s); - } - /* #endregion */ } diff --git a/src/styles/themes/glossy.css b/src/styles/themes/glossy.css index dd8ea3b90..d2d8c8de7 100644 --- a/src/styles/themes/glossy.css +++ b/src/styles/themes/glossy.css @@ -6,6 +6,7 @@ @import url('default/shadows.css'); @import url('default/transitions.css'); @import url('default/groups.css'); +@import url('glossy/dimension.css'); @import url('glossy/overrides.css'); :where(:root), diff --git a/src/styles/themes/glossy/dimension.css b/src/styles/themes/glossy/dimension.css new file mode 100644 index 000000000..67ecac8a7 --- /dev/null +++ b/src/styles/themes/glossy/dimension.css @@ -0,0 +1,101 @@ +: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); + + :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='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/overrides.css b/src/styles/themes/glossy/overrides.css index 8d52dd62c..fd5983bb4 100644 --- a/src/styles/themes/glossy/overrides.css +++ b/src/styles/themes/glossy/overrides.css @@ -1,18 +1,6 @@ :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, @@ -21,70 +9,6 @@ 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 { @@ -92,25 +16,4 @@ --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/playful.css b/src/styles/themes/playful.css index a727741fa..7c4d686ca 100644 --- a/src/styles/themes/playful.css +++ b/src/styles/themes/playful.css @@ -6,6 +6,7 @@ @import url('default/shadows.css'); @import url('default/transitions.css'); @import url('default/groups.css'); +@import url('playful/dimension.css'); @import url('playful/overrides.css'); :where(:root), diff --git a/src/styles/themes/playful/dimension.css b/src/styles/themes/playful/dimension.css new file mode 100644 index 000000000..dd5d0434c --- /dev/null +++ b/src/styles/themes/playful/dimension.css @@ -0,0 +1,123 @@ +:where(:root), +:host, +.wa-theme-playful { + button, + input:where([type='button'], [type='reset'], [type='submit']), + wa-button, + wa-radio-button, + .wa-button { + &: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); + } + + &:active { + transform: scale(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); + } + } + + wa-switch[checked] { + --thumb-shadow: var(--wa-shadow-s); + } +} diff --git a/src/styles/themes/playful/overrides.css b/src/styles/themes/playful/overrides.css index 48dfbe184..9fab7ef6e 100644 --- a/src/styles/themes/playful/overrides.css +++ b/src/styles/themes/playful/overrides.css @@ -1,7 +1,12 @@ :where(:root), :host, .wa-theme-playful { - wa-badge { + wa-badge, + 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); } @@ -14,124 +19,6 @@ 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); @@ -142,8 +29,4 @@ wa-rating { --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent); } - - wa-switch[checked] { - --thumb-shadow: var(--wa-shadow-s); - } }