mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Merge branch 'next' into themer-rework
This commit is contained in:
Cory LaViska
@@ -1,378 +0,0 @@
|
||||
@import url('../color/rudimentary.css');
|
||||
@import url('../brand/green.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.css');
|
||||
@import url('../dimension/subtle.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-active,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-90);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-05);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: white 10%;
|
||||
--wa-color-mix-active: black 5%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-on);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-70);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-on);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-on);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-on);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: black;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-lowered: black;
|
||||
--wa-color-surface-border: var(--wa-color-neutral-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-on);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-on);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-on);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-on);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-on-loud: black;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-active,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 550;
|
||||
--wa-font-weight-bold: 650;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 1;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 1.75;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 1;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 1;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: -0.5;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-active,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
wa-radio,
|
||||
input[type='radio'] {
|
||||
--checked-icon-color: var(--wa-color-brand-on-loud);
|
||||
--checked-icon-scale: 0.4;
|
||||
|
||||
&:checked,
|
||||
&:state(checked)::part(control) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,440 +0,0 @@
|
||||
@import url('../color/default.css');
|
||||
@import url('../brand/blue.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-brutalist,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-10);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-neutral-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.2);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: white 10%;
|
||||
--wa-color-mix-active: white 20%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-60);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-80);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-60);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-40);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-60);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-60);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-40);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-neutral-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.5);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-80);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-95);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-10);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-70);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-40);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-95);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-10);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-40);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-80);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-95);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-10);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-40);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-80);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-95);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-10);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-brutalist,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Space Grotesk', sans-serif;
|
||||
--wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif;
|
||||
--wa-font-family-code: 'Space Mono', monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1.125;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 2;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 0;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-shadow-offset-x-scale: var(--wa-shadow-offset-y-scale);
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 4;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 0;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: -0.5;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-brutalist,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
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(--outlined-border-color, var(--wa-color-border-loud));
|
||||
border-inline-start-width: var(--wa-border-width-m);
|
||||
|
||||
&:not([appearance~='outlined']) {
|
||||
border-block-start-width: 0;
|
||||
border-block-end-width: 0;
|
||||
border-inline-end-width: 0;
|
||||
}
|
||||
|
||||
&:not([appearance~='accent']) {
|
||||
--icon-color: var(--wa-color-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-comparison::part(handle),
|
||||
wa-progress-bar::part(base),
|
||||
wa-slider::part(track),
|
||||
wa-slider::part(thumb),
|
||||
input[type='range'],
|
||||
wa-switch::part(control),
|
||||
wa-switch::part(thumb) {
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
|
||||
wa-carousel-item::slotted(*) {
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-input::part(input),
|
||||
wa-select::part(combobox),
|
||||
wa-textarea::part(textarea),
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,387 +0,0 @@
|
||||
@import url('../color/elegant.css');
|
||||
@import url('../brand/indigo.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.css');
|
||||
@import url('../dimension/glossy.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-glossy,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-90);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-glossy,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Figtree', sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 800;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.35;
|
||||
--wa-line-height-normal: 1.8;
|
||||
--wa-line-height-expanded: 2.25;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1.125;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 1;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 1.33;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 1;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 3;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: -0.5;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-glossy,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
wa-radio,
|
||||
input[type='radio'] {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
|
||||
&:checked,
|
||||
&:state(checked)::part(control) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,599 +0,0 @@
|
||||
@import url('../color/mild.css');
|
||||
@import url('../brand/purple.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-matter,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-90);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-90);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.3);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-mix-hover: white 5%;
|
||||
--wa-color-mix-active: white 10%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-10);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-70);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-80);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-10);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-80);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-10);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-80);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-10);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-matter,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Wix Madefor Text', sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: 'Roboto Mono', monospace;
|
||||
--wa-font-family-longform: 'Roboto Serif', serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline;
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 1;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 1.33;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.125rem; /* 2px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0rem; /* 0px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 0.5;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 1.25;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: 0;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
@property --wa-ripple-progress {
|
||||
syntax: '<number>';
|
||||
initial-value: 0;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-matter,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
--wa-ripple-start-radius: 0.1em;
|
||||
--wa-ripple-start-opacity: 0.1;
|
||||
--wa-ripple-duration: calc(2 * var(--wa-transition-slow));
|
||||
|
||||
wa-button,
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-pill);
|
||||
--box-shadow: 0 0 transparent;
|
||||
|
||||
&:not([appearance~='plain']) {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([appearance~='outlined'], [appearance~='plain']):hover {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
|
||||
&:active {
|
||||
--box-shadow: 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:is([appearance~='outlined']) {
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
|
||||
/* Ripple effect */
|
||||
/* TODO: fix */
|
||||
--wa-ripple-progress: 1;
|
||||
--wa-ripple-progress-inv: calc(1 - var(--wa-ripple-progress));
|
||||
--wa-ripple-radius: calc(
|
||||
var(--wa-ripple-start-radius) * var(--wa-ripple-progress-inv) + 100% * var(--wa-ripple-progress)
|
||||
);
|
||||
--wa-ripple-opacity: calc(var(--wa-ripple-start-opacity) * var(--wa-ripple-progress-inv));
|
||||
--wa-ripple-color: hsl(0 0% 100% / var(--wa-ripple-opacity));
|
||||
--wa-ripple-center-x: calc(100% * var(--mouse-local-x, 0.5));
|
||||
--wa-ripple-center-y: calc(100% * var(--mouse-local-y, 0.5));
|
||||
|
||||
background-image: radial-gradient(
|
||||
circle at var(--wa-ripple-center-x) var(--wa-ripple-center-y),
|
||||
var(--wa-ripple-color) var(--wa-ripple-radius),
|
||||
transparent 0
|
||||
);
|
||||
transition:
|
||||
var(--wa-transition-fast),
|
||||
--wa-ripple-progress var(--wa-ripple-duration);
|
||||
|
||||
&:active {
|
||||
--wa-ripple-progress: 0;
|
||||
--wa-ripple-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox::part(control),
|
||||
wa-tree-item::part(checkbox__control) {
|
||||
border-radius: calc(var(--wa-border-radius-s) / 2);
|
||||
}
|
||||
|
||||
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-form-control-value-line-height: var(--wa-line-height-normal);
|
||||
|
||||
/* Needed for floating label */
|
||||
position: relative;
|
||||
|
||||
&:is([appearance~='filled']):not([appearance~='outlined'], [pill]) {
|
||||
--wa-focus-ring: ;
|
||||
--border-color: transparent transparent var(--wa-form-control-border-color) transparent;
|
||||
|
||||
&:where(input, textarea, wa-input, select, wa-textarea):focus,
|
||||
&:where(wa-select):focus-within {
|
||||
--border-color: transparent transparent var(--wa-color-focus) transparent;
|
||||
--box-shadow: inset 0 calc(var(--wa-form-control-border-width) * -2) 0 0 var(--wa-color-focus);
|
||||
}
|
||||
|
||||
&:where(input, select, textarea),
|
||||
&::part(input),
|
||||
&::part(combobox) {
|
||||
border-radius: var(--wa-form-control-border-radius) var(--wa-form-control-border-radius) 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Floating labels
|
||||
*/
|
||||
&::part(label) {
|
||||
transition: all var(--wa-transition-normal);
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
left: calc(var(--wa-form-control-padding-inline) - 0.25em);
|
||||
z-index: 1;
|
||||
|
||||
/* State: out of the way by default */
|
||||
top: -0.5lh;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
padding-inline: 0.25em;
|
||||
}
|
||||
|
||||
&:focus::part(label) {
|
||||
color: var(--wa-color-focus);
|
||||
}
|
||||
|
||||
/* State: placeholder-like when:
|
||||
* - the input is empty
|
||||
* - the input is not focused
|
||||
* - there is no actual placeholder
|
||||
*/
|
||||
&:state(blank):not(:focus, [placeholder])::part(label) {
|
||||
top: calc(var(--wa-form-control-height) / 2 - 0.5lh);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Different positioning and appearance for filled */
|
||||
&:where([appearance~='filled'])[label]:not([placeholder]) {
|
||||
&::part(base) {
|
||||
/* We want to move this down a bit to make space for the floating label */
|
||||
translate: 0 0.3em;
|
||||
}
|
||||
|
||||
&::part(label) {
|
||||
/* In filled inputs, the floating label stays within the input */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:state(blank):not(:focus, [placeholder]))::part(label) {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-option {
|
||||
--background-color-hover: color-mix(in oklch, var(--wa-color-surface-lowered), transparent);
|
||||
--text-color-hover: var(--wa-color-text-normal);
|
||||
&::part(base) {
|
||||
line-height: var(--wa-line-height-expanded);
|
||||
}
|
||||
}
|
||||
|
||||
progress,
|
||||
wa-progress-bar::part(base) {
|
||||
height: 0.25rem;
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
|
||||
input:is([type='checkbox'], [type='radio']),
|
||||
wa-checkbox::part(control),
|
||||
wa-tree-item::part(checkbox__control),
|
||||
wa-radio::part(control) {
|
||||
--checked-icon-scale: 0.65;
|
||||
|
||||
border-width: var(--wa-border-width-m);
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
:is(input:where([type='checkbox'], [type='radio']), wa-checkbox, wa-tree-item, wa-radio):hover {
|
||||
&:where(input),
|
||||
&::part(control),
|
||||
&::part(checkbox__control) {
|
||||
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-border-color), transparent 85%);
|
||||
}
|
||||
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
|
||||
&:where(input),
|
||||
&::part(control),
|
||||
&::part(checkbox__control) {
|
||||
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
wa-slider:hover::part(thumb) {
|
||||
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
--border-width: var(--wa-border-width-m);
|
||||
--height: 2em;
|
||||
--width: calc(var(--height) * 1.625);
|
||||
--thumb-size: 1.5em;
|
||||
transition-property: all;
|
||||
|
||||
&::part(control) {
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:state(checked))::part(thumb) {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
&:active::part(thumb) {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,392 +0,0 @@
|
||||
@import url('../color/natural.css');
|
||||
@import url('../brand/blue.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-mellow,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-90);
|
||||
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-brand-20);
|
||||
--wa-color-text-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-50);
|
||||
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-80);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-80);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-80);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-80);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-brand-90);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-mellow,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Mulish', sans-serif;
|
||||
--wa-font-family-heading: 'Lora', serif;
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1.125;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 1.5;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 1;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.25rem; /* 4px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 0;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 1;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: -0.5;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-mellow,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,401 +0,0 @@
|
||||
@import url('../color/rudimentary.css');
|
||||
@import url('../brand/purple.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.css');
|
||||
@import url('../dimension/smooth.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-playful,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-80);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-on);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-80);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-30);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-on);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-80);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-on);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-80);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-on);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-95);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-20);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-80);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: white 10%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-on);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-on);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-on);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-on);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-playful,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Nunito', sans-serif;
|
||||
--wa-font-family-heading: 'Fredoka', sans-serif;
|
||||
--wa-font-family-code: 'Azeret Mono', monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1.125;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 12.375px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 13.5px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 15.75px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 18px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 22.5px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 28.125px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 36px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 46.125px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 58.5px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 500;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.35;
|
||||
--wa-line-height-normal: 1.8;
|
||||
--wa-line-height-expanded: 2.25;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed;
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 3;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 2;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.25rem; /* 4px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 2;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 3;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: -0.5;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: min(var(--wa-border-radius-pill), calc(var(--wa-form-control-height) * 0.6));
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-playful,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
wa-badge,
|
||||
wa-button,
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag,
|
||||
wa-select::part(tag) {
|
||||
border-width: calc(var(--wa-border-width-s) * 0.67);
|
||||
}
|
||||
wa-select::part(tag) {
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
wa-radio,
|
||||
input[type='radio'] {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
|
||||
&:checked,
|
||||
&:state(checked)::part(control) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,407 +0,0 @@
|
||||
@import url('../color/anodized.css');
|
||||
@import url('../brand/cyan.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-premium,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-80);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: var(--wa-color-surface-default) 5%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-10);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-80);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-10);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-10);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-10);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-95);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-30);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-30);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-text-link: var(--wa-color-brand-80);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: white 20%;
|
||||
--wa-color-mix-active: var(--wa-color-surface-default) 10%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-30);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-80);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-on-loud: var(--wa-color-brand-10);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-success-30);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-40);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-70);
|
||||
--wa-color-success-border-quiet: var(--wa-color-success-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-40);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-70);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-80);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-on-loud: var(--wa-color-success-10);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-warning-30);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-40);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-40);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-80);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-10);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-danger-30);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-40);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-40);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-80);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-on-loud: var(--wa-color-danger-10);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-premium,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'DM Sans', sans-serif;
|
||||
--wa-font-family-heading: 'Playfair Display', serif;
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: 'Playfair', serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.1;
|
||||
--wa-line-height-normal: 1.5;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent);
|
||||
--wa-link-decoration-hover: underline;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 1.5;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 0.5;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 1;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 1;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: -0.5;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: transparent;
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.5em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-premium,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
wa-button::part(label),
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox,
|
||||
wa-tree-item::part(checkbox__control) {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-radio,
|
||||
input[type='radio'] {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
|
||||
&:checked,
|
||||
&:state(checked)::part(control) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--thumb-color-checked: var(--wa-color-surface-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,413 +0,0 @@
|
||||
@import url('../color/default.css');
|
||||
@import url('../brand/indigo.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:root,
|
||||
.wa-theme-tailspin,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-90);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.05);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-50);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-neutral-80) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-neutral-80) 10%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
|
||||
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
|
||||
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent);
|
||||
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent);
|
||||
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent);
|
||||
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent);
|
||||
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent);
|
||||
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent);
|
||||
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
|
||||
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent);
|
||||
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Foundational Colors */
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: rgb(255 255 255 / 0.1);
|
||||
|
||||
--wa-color-text-normal: white;
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.2);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-neutral-70) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-neutral-70) 10%;
|
||||
|
||||
/* Semantic Colors */
|
||||
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
|
||||
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
|
||||
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
|
||||
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-50);
|
||||
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
|
||||
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
|
||||
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
|
||||
--wa-color-success-on-quiet: var(--wa-color-success-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
|
||||
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
|
||||
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-warning-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
|
||||
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
|
||||
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-loud: white;
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent);
|
||||
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent);
|
||||
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-tailspin,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
|
||||
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
|
||||
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
|
||||
--wa-font-size-scale: 0.875;
|
||||
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 9.625px */
|
||||
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 10.5px */
|
||||
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 12.25px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 14px */
|
||||
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 17.5px */
|
||||
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 21.875px */
|
||||
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 28px */
|
||||
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 35.875px */
|
||||
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 45.5px */
|
||||
|
||||
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
|
||||
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-code: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-longform: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-space-scale: 0.875;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 1.75px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 3.5px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 7px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 10.5px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 14px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 21px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 28px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 35px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 42px */
|
||||
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 56px */
|
||||
|
||||
--wa-content-spacing: var(--wa-space-l);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-style: solid;
|
||||
|
||||
--wa-border-width-scale: 1;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 1;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.125rem; /* 2px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--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);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 0.5;
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-blur-scale: 0.5;
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-spread-scale: 0;
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
/* #endregion */
|
||||
|
||||
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-hint-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-padding-inline: 1em;
|
||||
--wa-form-control-height: round(
|
||||
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
|
||||
1px
|
||||
);
|
||||
--wa-form-control-toggle-size: round(1.25em, 1px);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
}
|
||||
|
||||
@layer wa-overrides {
|
||||
:root,
|
||||
.wa-theme-tailspin,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
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);
|
||||
}
|
||||
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
:is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not([appearance='plain']) {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
&::part(icon) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio,
|
||||
input[type='radio'] {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
|
||||
&:checked,
|
||||
&:state(checked)::part(control) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user