mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Attempt at better style isolation between themes
Still doesn't quite fix #475 but might be a nudge in the right direction.
This commit is contained in:
Lea Verou
@@ -9,7 +9,7 @@
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active,
|
||||
.wa-light {
|
||||
@@ -183,59 +183,61 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:root {
|
||||
: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);
|
||||
: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);
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome,
|
||||
.wa-light {
|
||||
@@ -241,116 +241,120 @@
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
}
|
||||
|
||||
/* #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);
|
||||
: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;
|
||||
}
|
||||
|
||||
&:not([disabled], [loading]):active,
|
||||
&::part(checked) {
|
||||
box-shadow: none;
|
||||
transform: translateY(var(--wa-shadow-offset-y-s));
|
||||
: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-dark & {
|
||||
--border-color: var(--wa-color-border-quiet);
|
||||
wa-callout {
|
||||
&:is([appearance~='outlined'], .wa-outlined) {
|
||||
border-color: var(--wa-color-border-normal);
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-border-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
&:is([appearance~='outlined'], .wa-outlined) {
|
||||
border-color: var(--wa-color-border-normal);
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
color: var(--wa-color-text-normal);
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-border-normal);
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-radio-group > wa-radio-button {
|
||||
&::part(base):active,
|
||||
&::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);
|
||||
input[type='checkbox'],
|
||||
wa-checkbox {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--height: 1.5em;
|
||||
}
|
||||
wa-radio-group > wa-radio-button {
|
||||
&::part(base):active,
|
||||
&::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);
|
||||
}
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
wa-switch {
|
||||
--height: 1.5em;
|
||||
}
|
||||
|
||||
: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);
|
||||
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 */
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-brutalist,
|
||||
.wa-light {
|
||||
@@ -207,87 +207,91 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
blockquote,
|
||||
pre {
|
||||
border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
|
||||
}
|
||||
wa-badge {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-callout,
|
||||
wa-tag {
|
||||
border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
|
||||
border-inline-start-width: var(--wa-border-width-s);
|
||||
|
||||
&:not([appearance~='outlined'], .wa-outlined) {
|
||||
border-block-start-width: 0;
|
||||
border-block-end-width: 0;
|
||||
border-inline-end-width: 0;
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-brutalist {
|
||||
blockquote,
|
||||
pre {
|
||||
border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
|
||||
}
|
||||
wa-badge {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
wa-callout,
|
||||
wa-tag {
|
||||
border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
|
||||
border-inline-start-width: var(--wa-border-width-s);
|
||||
|
||||
&:not([appearance~='outlined'], .wa-outlined) {
|
||||
border-block-start-width: 0;
|
||||
border-block-end-width: 0;
|
||||
border-inline-end-width: 0;
|
||||
}
|
||||
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-s) var(--wa-space-m);
|
||||
|
||||
&::part(icon) {
|
||||
--spacing: var(--wa-space-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-carousel::part(scroll-container) {
|
||||
padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
|
||||
}
|
||||
|
||||
wa-carousel::part(pagination-item),
|
||||
wa-image-comparer::part(handle),
|
||||
wa-progress-bar::part(base),
|
||||
wa-slider::part(base),
|
||||
input[type='range'],
|
||||
wa-switch::part(control),
|
||||
wa-switch::part(thumb) {
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
|
||||
wa-carousel-item {
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
: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
|
||||
) {
|
||||
--border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-s) var(--wa-space-m);
|
||||
|
||||
&::part(icon) {
|
||||
--spacing: var(--wa-space-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-carousel::part(scroll-container) {
|
||||
padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
|
||||
}
|
||||
|
||||
wa-carousel::part(pagination-item),
|
||||
wa-image-comparer::part(handle),
|
||||
wa-progress-bar::part(base),
|
||||
wa-slider::part(base),
|
||||
input[type='range'],
|
||||
wa-switch::part(control),
|
||||
wa-switch::part(thumb) {
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
|
||||
wa-carousel-item {
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
: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
|
||||
) {
|
||||
--border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-classic,
|
||||
.wa-light {
|
||||
@@ -205,132 +205,136 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button,
|
||||
.wa-button,
|
||||
wa-radio-button {
|
||||
font-size: var(--wa-size-smaller);
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--text-color-active: var(--text-color-hover);
|
||||
--text-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
|
||||
&[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--background-color);
|
||||
--text-color: var(--wa-color-brand-on-loud);
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-classic {
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button,
|
||||
.wa-button,
|
||||
wa-radio-button {
|
||||
font-size: var(--wa-size-smaller);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-l);
|
||||
font-size: var(--wa-size-smaller);
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--text-color-active: var(--text-color-hover);
|
||||
--text-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
|
||||
&:is([appearance~='outlined'], .wa-outlined) {
|
||||
border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border) var(--wa-color-surface-border);
|
||||
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--border-color: var(--wa-color-fill-loud);
|
||||
&[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--background-color);
|
||||
--text-color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-l);
|
||||
font-size: var(--wa-size-smaller);
|
||||
|
||||
&:is([appearance~='outlined'], .wa-outlined) {
|
||||
border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border) var(--wa-color-surface-border);
|
||||
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--border-color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
|
||||
: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([appearance='filled'], .wa-filled) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
|
||||
: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([appearance='filled'], .wa-filled) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Foundational Colors and Semantic Colors
|
||||
*/
|
||||
:where(:root, :host),
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
/**
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddc;
|
||||
--wa-color-red-80: #ffb7b6;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
:where(:root, :host),
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
/* Form controls */
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Borders and outlines
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border widths. */
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-scale: 1;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
|
||||
* A multiplier is provided for each shadow quality to uniformly scale all related values.
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glassy,
|
||||
.wa-light {
|
||||
@@ -118,83 +118,87 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
wa-button:not([appearance='plain']) {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
|
||||
var(--wa-shadow-s) /* outer shadow */;
|
||||
|
||||
margin-bottom: var(--wa-shadow-offset-y-s);
|
||||
transition: transform var(--wa-transition-fast);
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
|
||||
var(--wa-shadow-m) /* outer shadow */;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow:
|
||||
inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
|
||||
0 0 0 0 transparent /* outer shadow */;
|
||||
|
||||
transform: translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-checkbox,
|
||||
wa-input:not(:focus),
|
||||
wa-radio,
|
||||
wa-select {
|
||||
--box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
|
||||
}
|
||||
|
||||
wa-checkbox:state(checked),
|
||||
wa-radio:state(checked) {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
|
||||
wa-textarea:not(:focus) {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--box-shadow: inset var(--wa-shadow-s);
|
||||
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
|
||||
inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
box-shadow: inset var(--wa-shadow-s);
|
||||
|
||||
&::part(indicator) {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glassy {
|
||||
wa-button:not([appearance='plain']) {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* 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 */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
|
||||
var(--wa-shadow-s) /* outer shadow */;
|
||||
|
||||
margin-bottom: var(--wa-shadow-offset-y-s);
|
||||
transition: transform var(--wa-transition-fast);
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
|
||||
var(--wa-shadow-m) /* outer shadow */;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow:
|
||||
inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
|
||||
0 0 0 0 transparent /* outer shadow */;
|
||||
|
||||
transform: translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-checkbox,
|
||||
wa-input:not(:focus),
|
||||
wa-radio,
|
||||
wa-select {
|
||||
--box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
|
||||
}
|
||||
|
||||
wa-checkbox:state(checked),
|
||||
wa-radio:state(checked) {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
|
||||
wa-textarea:not(:focus) {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--box-shadow: inset var(--wa-shadow-s);
|
||||
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
|
||||
inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
box-shadow: inset var(--wa-shadow-s);
|
||||
|
||||
&::part(indicator) {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* 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 */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
|
||||
var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow,
|
||||
.wa-light {
|
||||
@@ -202,28 +202,32 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: calc(1em * -0.02);
|
||||
}
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: calc(1em * -0.02);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
|
||||
calc(var(--wa-panel-border-width) * 4);
|
||||
}
|
||||
wa-callout {
|
||||
border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
|
||||
calc(var(--wa-panel-border-width) * 4);
|
||||
}
|
||||
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--checked-icon-scale: 0.6;
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--checked-icon-scale: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@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');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful,
|
||||
.wa-light {
|
||||
@@ -288,93 +288,97 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
wa-button:not([disabled]) {
|
||||
transition-property: all;
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful {
|
||||
wa-button:not([disabled]) {
|
||||
transition-property: all;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02, 1.02);
|
||||
&:hover {
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98, 0.98);
|
||||
}
|
||||
}
|
||||
wa-button:is([appearance~='accent'], [appearance~='filled']) {
|
||||
--button-gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
|
||||
--button-gradient-middle: var(--background-color);
|
||||
--button-gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
|
||||
--button-shadow-outer: oklch(from var(--background-color) calc(l + 0.1) c h);
|
||||
--button-shadow-inner-a: oklch(from var(--background-color) calc(l - 0.2) c h);
|
||||
--button-shadow-inner-b: oklch(from var(--background-color) calc(l + 0.3) c h);
|
||||
--button-text-shadow: oklch(from var(--background-color) calc(l - 0.1) c h);
|
||||
--border-color: var(--button-gradient-middle);
|
||||
--border-width: 1px;
|
||||
--border-color-hover: var(--button-gradient-middle);
|
||||
--border-color-active: var(--button-gradient-middle);
|
||||
|
||||
&::part(base) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--button-gradient-top) 0%,
|
||||
var(--button-gradient-middle) 51.88%,
|
||||
var(--button-gradient-bottom) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0px 6px 16px var(--button-shadow-outer),
|
||||
inset 0 -2px 8px var(--button-shadow-inner-a),
|
||||
inset 0 2px 8px var(--button-shadow-inner-b);
|
||||
}
|
||||
|
||||
&:not([disabled])::part(base):hover {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--button-gradient-bottom) 0%,
|
||||
var(--button-gradient-middle) 51.88%,
|
||||
var(--button-gradient-top) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:not([disabled])::part(base):active {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%,
|
||||
color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%,
|
||||
color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 -2px 8px var(--button-shadow-inner-a),
|
||||
inset 0 2px 8px var(--button-shadow-inner-b);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98, 0.98);
|
||||
}
|
||||
}
|
||||
wa-button:is([appearance~='accent'], [appearance~='filled']) {
|
||||
--button-gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
|
||||
--button-gradient-middle: var(--background-color);
|
||||
--button-gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
|
||||
--button-shadow-outer: oklch(from var(--background-color) calc(l + 0.1) c h);
|
||||
--button-shadow-inner-a: oklch(from var(--background-color) calc(l - 0.2) c h);
|
||||
--button-shadow-inner-b: oklch(from var(--background-color) calc(l + 0.3) c h);
|
||||
--button-text-shadow: oklch(from var(--background-color) calc(l - 0.1) c h);
|
||||
--border-color: var(--button-gradient-middle);
|
||||
--border-width: 1px;
|
||||
--border-color-hover: var(--button-gradient-middle);
|
||||
--border-color-active: var(--button-gradient-middle);
|
||||
|
||||
&::part(base) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--button-gradient-top) 0%,
|
||||
var(--button-gradient-middle) 51.88%,
|
||||
var(--button-gradient-bottom) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0px 6px 16px var(--button-shadow-outer),
|
||||
inset 0 -2px 8px var(--button-shadow-inner-a),
|
||||
inset 0 2px 8px var(--button-shadow-inner-b);
|
||||
wa-button::part(label) {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-shadow: 0 2px 2px var(--button-text-shadow);
|
||||
}
|
||||
|
||||
&:not([disabled])::part(base):hover {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--button-gradient-bottom) 0%,
|
||||
var(--button-gradient-middle) 51.88%,
|
||||
var(--button-gradient-top) 100%
|
||||
);
|
||||
wa-callout {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&:not([disabled])::part(base):active {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%,
|
||||
color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%,
|
||||
color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 -2px 8px var(--button-shadow-inner-a),
|
||||
inset 0 2px 8px var(--button-shadow-inner-b);
|
||||
wa-checkbox::part(check-icon) {
|
||||
filter: drop-shadow(var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0.125em var(--wa-color-shadow));
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--thumb-size: 0.8em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 3);
|
||||
}
|
||||
|
||||
wa-switch[checked]::part(thumb) {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
border-style: dashed;
|
||||
border-color: var(--wa-color-border-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
wa-button::part(label) {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-shadow: 0 2px 2px var(--button-text-shadow);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
wa-checkbox::part(check-icon) {
|
||||
filter: drop-shadow(var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0.125em var(--wa-color-shadow));
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--thumb-size: 0.8em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 3);
|
||||
}
|
||||
|
||||
wa-switch[checked]::part(thumb) {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
border-style: dashed;
|
||||
border-color: var(--wa-color-border-quiet);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-premium,
|
||||
.wa-light {
|
||||
@@ -189,89 +189,91 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-brand-fill-quiet);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
|
||||
wa-button {
|
||||
--box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-button[appearance='outlined'] {
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
font-size: var(--wa-font-size-s);
|
||||
--border-color: var(--background);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-active: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-button::part(label),
|
||||
wa-tag {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&:not(.wa-dark) wa-alert {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-95);
|
||||
.wa-theme-premium {
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-95);
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-brand-fill-quiet);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-95);
|
||||
|
||||
wa-button {
|
||||
--box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-95);
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-80);
|
||||
--text-color: var(--wa-color-primary-20);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-80);
|
||||
--text-color: var(--wa-color-green-20);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-80);
|
||||
--text-color: var(--wa-color-yellow-20);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-80);
|
||||
--text-color: var(--wa-color-red-20);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: white;
|
||||
--text-color: var(--wa-color-base-30);
|
||||
|
||||
wa-button[appearance='outlined'] {
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
font-size: var(--wa-font-size-s);
|
||||
--border-color: var(--background);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-active: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-button::part(label),
|
||||
wa-tag {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&:not(.wa-dark) wa-alert {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-95);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-95);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-95);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-95);
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-80);
|
||||
--text-color: var(--wa-color-primary-20);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-80);
|
||||
--text-color: var(--wa-color-green-20);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-80);
|
||||
--text-color: var(--wa-color-yellow-20);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-80);
|
||||
--text-color: var(--wa-color-red-20);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: white;
|
||||
--text-color: var(--wa-color-base-30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin,
|
||||
.wa-light {
|
||||
@@ -209,57 +209,62 @@
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin,
|
||||
:is(:host-context(.wa-theme-tailspin)) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
|
||||
[appearance='plain'],
|
||||
.wa-plain
|
||||
) {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
|
||||
[appearance='plain'],
|
||||
.wa-plain
|
||||
) {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
wa-callout {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
&::part(icon) {
|
||||
opacity: 0.6;
|
||||
&::part(icon) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-neutral-fill-normal);
|
||||
--border-color: transparent;
|
||||
--height: calc(var(--thumb-size) * (18 / 14));
|
||||
--thumb-color: white;
|
||||
--thumb-color-checked: var(--thumb-color);
|
||||
--thumb-size: 1.25em;
|
||||
--thumb-shadow: var(--wa-shadow-s);
|
||||
--width: calc(var(--thumb-size) * (32 / 14));
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-neutral-fill-normal);
|
||||
--border-color: transparent;
|
||||
--height: calc(var(--thumb-size) * (18 / 14));
|
||||
--thumb-color: white;
|
||||
--thumb-color-checked: var(--thumb-color);
|
||||
--thumb-size: 1.25em;
|
||||
--thumb-shadow: var(--wa-shadow-s);
|
||||
--width: calc(var(--thumb-size) * (32 / 14));
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
font-size: var(--wa-size);
|
||||
}
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-size-s,
|
||||
.wa-size-m,
|
||||
|
||||
Reference in New Issue
Block a user