mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
242 lines
8.6 KiB
CSS
242 lines
8.6 KiB
CSS
@import url('../color/rudimentary.css');
|
|
@import url('default/color-semantic.css');
|
|
@import url('default/space.css');
|
|
@import url('default/outlines.css');
|
|
@import url('default/typography.css');
|
|
@import url('default/rounding.css');
|
|
@import url('default/shadows.css');
|
|
@import url('default/transitions.css');
|
|
@import url('default/groups.css');
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
|
|
|
:root,
|
|
:host,
|
|
.wa-theme-active,
|
|
.wa-light {
|
|
color-scheme: light;
|
|
color: var(--wa-color-text-normal);
|
|
|
|
/**
|
|
* Foundational Colors
|
|
*/
|
|
--wa-color-text-normal: var(--wa-color-gray-05);
|
|
--wa-color-text-link: var(--wa-color-green-40);
|
|
|
|
--wa-color-focus: var(--wa-color-blue-60);
|
|
|
|
--wa-color-mix-hover: white 10%;
|
|
--wa-color-mix-active: black 5%;
|
|
|
|
/**
|
|
* Semantic Colors
|
|
*/
|
|
--wa-color-brand-fill-quiet: var(--wa-color-green-95);
|
|
--wa-color-brand-fill-normal: var(--wa-color-green-90);
|
|
--wa-color-brand-fill-loud: var(--wa-color-green-80);
|
|
--wa-color-brand-border-quiet: var(--wa-color-green-90);
|
|
--wa-color-brand-border-normal: var(--wa-color-green-80);
|
|
--wa-color-brand-border-loud: var(--wa-color-green-70);
|
|
--wa-color-brand-on-quiet: var(--wa-color-green-40);
|
|
--wa-color-brand-on-normal: var(--wa-color-green-30);
|
|
--wa-color-brand-on-loud: black;
|
|
|
|
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
|
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
|
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
|
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
|
--wa-color-success-border-normal: var(--wa-color-green-80);
|
|
--wa-color-success-border-loud: var(--wa-color-green-70);
|
|
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
|
--wa-color-success-on-normal: var(--wa-color-green-30);
|
|
--wa-color-success-on-loud: black;
|
|
|
|
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
|
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
|
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
|
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
|
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
|
--wa-color-warning-border-loud: var(--wa-color-yellow-70);
|
|
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
|
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
|
--wa-color-warning-on-loud: black;
|
|
|
|
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
|
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
|
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
|
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
|
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
|
--wa-color-danger-border-loud: var(--wa-color-red-70);
|
|
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
|
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
|
--wa-color-danger-on-loud: black;
|
|
|
|
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
|
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
|
--wa-color-neutral-fill-loud: var(--wa-color-gray-80);
|
|
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
|
|
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
|
|
--wa-color-neutral-border-loud: var(--wa-color-gray-70);
|
|
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
|
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
|
--wa-color-neutral-on-loud: black;
|
|
|
|
/**
|
|
* Typography
|
|
*/
|
|
--wa-font-family-body: 'Inter', sans-serif;
|
|
|
|
--wa-font-weight-semibold: 550;
|
|
--wa-font-weight-bold: 650;
|
|
|
|
/**
|
|
* Rounding
|
|
*/
|
|
--wa-border-radius-scale: 2;
|
|
|
|
/**
|
|
* Component Groups
|
|
*/
|
|
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
|
}
|
|
|
|
.wa-dark,
|
|
:is(:host-context(.wa-dark)) {
|
|
color-scheme: dark;
|
|
color: var(--wa-color-text-normal);
|
|
|
|
/**
|
|
* Foundational Colors
|
|
*/
|
|
--wa-color-surface-raised: var(--wa-color-gray-10);
|
|
--wa-color-surface-default: var(--wa-color-gray-05);
|
|
--wa-color-surface-lowered: black;
|
|
--wa-color-surface-border: var(--wa-color-gray-20);
|
|
|
|
--wa-color-text-normal: var(--wa-color-gray-95);
|
|
--wa-color-text-quiet: var(--wa-color-gray-60);
|
|
--wa-color-text-link: var(--wa-color-green-70);
|
|
|
|
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
|
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
|
|
|
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
|
|
|
|
--wa-color-focus: var(--wa-color-blue-60);
|
|
|
|
--wa-color-mix-hover: black 8%;
|
|
--wa-color-mix-active: black 16%;
|
|
|
|
/**
|
|
* Semantic Colors
|
|
*/
|
|
--wa-color-brand-fill-quiet: var(--wa-color-green-10);
|
|
--wa-color-brand-fill-normal: var(--wa-color-green-20);
|
|
--wa-color-brand-fill-loud: var(--wa-color-green-80);
|
|
--wa-color-brand-border-quiet: var(--wa-color-green-20);
|
|
--wa-color-brand-border-normal: var(--wa-color-green-30);
|
|
--wa-color-brand-border-loud: var(--wa-color-green-60);
|
|
--wa-color-brand-on-quiet: var(--wa-color-green-80);
|
|
--wa-color-brand-on-normal: var(--wa-color-green-90);
|
|
--wa-color-brand-on-loud: black;
|
|
|
|
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
|
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
|
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
|
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
|
--wa-color-success-border-normal: var(--wa-color-green-30);
|
|
--wa-color-success-border-loud: var(--wa-color-green-40);
|
|
--wa-color-success-on-quiet: var(--wa-color-green-80);
|
|
--wa-color-success-on-normal: var(--wa-color-green-90);
|
|
--wa-color-success-on-loud: black;
|
|
|
|
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
|
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
|
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
|
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
|
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
|
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
|
|
--wa-color-warning-on-quiet: var(--wa-color-yellow-80);
|
|
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
|
|
--wa-color-warning-on-loud: black;
|
|
|
|
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
|
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
|
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
|
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
|
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
|
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
|
--wa-color-danger-on-quiet: var(--wa-color-red-80);
|
|
--wa-color-danger-on-normal: var(--wa-color-red-90);
|
|
--wa-color-danger-on-loud: black;
|
|
|
|
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
|
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
|
--wa-color-neutral-fill-loud: var(--wa-color-gray-80);
|
|
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
|
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
|
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
|
|
--wa-color-neutral-on-quiet: var(--wa-color-gray-80);
|
|
--wa-color-neutral-on-normal: var(--wa-color-gray-90);
|
|
--wa-color-neutral-on-loud: black;
|
|
}
|
|
|
|
/**
|
|
* Component Styles
|
|
*/
|
|
:root {
|
|
--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);
|
|
}
|
|
}
|