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

Separate dimension overrides into new files

Browse Source
This commit is contained in:
lindsaym-fa
2025-05-09 18:47:31 -04:00
committed by Lea Verou
parent bdd25571a8
commit f8fcbd60ec
12 changed files with 362 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/themes/active.css
View File

@@ -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),

50
src/styles/themes/active/dimension.css Normal file
View File

@@ -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);
}
}
}

48
src/styles/themes/active/overrides.css
View File

@@ -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);
}
}
}

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

@@ -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),

78
src/styles/themes/awesome/dimension.css Normal file
View File

@@ -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);
}
}

78
src/styles/themes/awesome/overrides.css
View File

@@ -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 */
}

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

@@ -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),

101
src/styles/themes/glossy/dimension.css Normal file
View File

@@ -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);
}
}
}

97
src/styles/themes/glossy/overrides.css
View File

@@ -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);
}
}
}

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

@@ -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),

123
src/styles/themes/playful/dimension.css Normal file
View File

@@ -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);
}
}

129
src/styles/themes/playful/overrides.css
View File

@@ -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);
}
}