mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Consolidate theme files (#1053)
* consolidate theme files * move dimension to its own layer * touch up * fix `.wa-invert` * fix selectors and missing fonts * fix selectors (for real this time)
This commit is contained in:
Lindsay M
@@ -1,7 +1,5 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome {
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
wa-button,
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
5
packages/webawesome/src/styles/dimension/flat.css
Normal file
5
packages/webawesome/src/styles/dimension/flat.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
/* Nothing to see here */
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glossy {
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
--wa-theme-glossy-inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.3);
|
||||
--wa-theme-glossy-top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.1);
|
||||
--wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
|
||||
@@ -1,7 +1,5 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful {
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button {
|
||||
@@ -1,12 +1,10 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active {
|
||||
--wa-theme-active-shadow-pop-out:
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
--wa-subtle-shadow-pop-out:
|
||||
inset 0 0.0625rem 0 0.0625rem rgb(255 255 255 / 0.15) /* shine */,
|
||||
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
|
||||
inset 0 -0.125rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */;
|
||||
--wa-theme-active-shadow-punch-in:
|
||||
--wa-subtle-shadow-punch-in:
|
||||
inset 0 0 0 0 transparent /* shine */, inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.15) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.15) /* inner shadow */;
|
||||
|
||||
@@ -18,7 +16,7 @@
|
||||
&::part(base) {
|
||||
border-width: 0px;
|
||||
box-shadow:
|
||||
var(--wa-theme-active-shadow-pop-out),
|
||||
var(--wa-subtle-shadow-pop-out),
|
||||
inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent));
|
||||
padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
|
||||
}
|
||||
@@ -27,14 +25,14 @@
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
box-shadow:
|
||||
var(--wa-theme-active-shadow-punch-in),
|
||||
var(--wa-subtle-shadow-punch-in),
|
||||
inset 0 0 0 var(--border-width) var(--border-color-active, var(--background-color-active, transparent));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
box-shadow: var(--wa-subtle-shadow-pop-out);
|
||||
}
|
||||
|
||||
input:not([type='button'], [type='reset'], [type='submit'], :checked),
|
||||
@@ -51,7 +49,7 @@
|
||||
|
||||
wa-slider::part(thumb),
|
||||
wa-switch::part(thumb) {
|
||||
box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
box-shadow: var(--wa-subtle-shadow-pop-out);
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
@@ -1,29 +1,378 @@
|
||||
@import url('active/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('active/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('active/dimension.css');
|
||||
@import url('active/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-active,
|
||||
.wa-dark,
|
||||
.wa-light,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
--wa-border-radius-scale: 2;
|
||||
.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);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--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,145 +0,0 @@
|
||||
@import url('../../color/rudimentary.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-normal: var(--wa-color-neutral-05);
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: white 10%;
|
||||
--wa-color-mix-active: black 5%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-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;
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-lowered: black;
|
||||
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active {
|
||||
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,13 +0,0 @@
|
||||
@import url('../default/typography.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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active {
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
|
||||
--wa-font-weight-semibold: 550;
|
||||
--wa-font-weight-bold: 650;
|
||||
}
|
||||
}
|
||||
@@ -1,55 +1,422 @@
|
||||
@import url('awesome/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('awesome/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('awesome/dimension.css');
|
||||
@import url('awesome/overrides.css');
|
||||
@import url('../color/bright.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('../dimension/blocky.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-awesome,
|
||||
.wa-dark,
|
||||
.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-20);
|
||||
--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-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-50);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
/* #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-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-50);
|
||||
--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-80);
|
||||
--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-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-50);
|
||||
--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-80);
|
||||
--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-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-50);
|
||||
--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-80);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-05);
|
||||
|
||||
--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-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-50);
|
||||
--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-80);
|
||||
--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-50);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
|
||||
--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: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-theme-awesome,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: 'Quicksand', 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: 400;
|
||||
--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-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-bold);
|
||||
|
||||
--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: 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 */
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-border-radius-scale: 1.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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--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: 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;
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--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-in;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
/* #endregion */
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
/* #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-neutral-border-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-bold);
|
||||
--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: 1em;
|
||||
--wa-form-control-padding-inline: 1.25em;
|
||||
--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-awesome,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not(
|
||||
[appearance='plain'],
|
||||
.wa-plain
|
||||
) {
|
||||
&[appearance~='outlined'],
|
||||
&.wa-outlined {
|
||||
--border-color: var(--text-color);
|
||||
|
||||
.wa-dark &,
|
||||
.wa-invert & {
|
||||
--border-color: var(--wa-color-border-quiet);
|
||||
--text-color-active: var(--wa-color-on-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
&:is([appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-normal);
|
||||
}
|
||||
&:not([appearance~='accent']) {
|
||||
--icon-color: var(--wa-color-border-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox,
|
||||
wa-tree-item::part(checkbox__control) {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--height: 1.5em;
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
@import url('../../color/bright.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-normal: var(--wa-color-neutral-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-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-brand-70);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-50);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-success-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-50);
|
||||
--wa-color-warning-border-loud: var(--wa-color-warning-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-50);
|
||||
--wa-color-danger-border-loud: var(--wa-color-danger-30);
|
||||
--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: var(--wa-color-text-normal);
|
||||
|
||||
--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-70);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* 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-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-50);
|
||||
--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-80);
|
||||
--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-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-success-50);
|
||||
--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-80);
|
||||
--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-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-warning-50);
|
||||
--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-80);
|
||||
--wa-color-warning-on-loud: var(--wa-color-warning-05);
|
||||
|
||||
--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-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-danger-50);
|
||||
--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-80);
|
||||
--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-50);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
|
||||
--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: white;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome {
|
||||
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not(
|
||||
[appearance='plain'],
|
||||
.wa-plain
|
||||
) {
|
||||
&[appearance~='outlined'],
|
||||
&.wa-outlined {
|
||||
--border-color: var(--text-color);
|
||||
|
||||
.wa-dark &,
|
||||
.wa-invert & {
|
||||
--border-color: var(--wa-color-border-quiet);
|
||||
--text-color-active: var(--wa-color-on-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
&:is([appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-normal);
|
||||
}
|
||||
&:not([appearance~='accent']) {
|
||||
--icon-color: var(--wa-color-border-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox,
|
||||
wa-tree-item::part(checkbox__control) {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--height: 1.5em;
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome {
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-body: Quicksand, sans-serif;
|
||||
|
||||
--wa-font-weight-light: 400;
|
||||
--wa-font-weight-normal: 500;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-action: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,440 @@
|
||||
@import url('brutalist/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('brutalist/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('brutalist/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-brutalist,
|
||||
.wa-dark,
|
||||
.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 {
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
/* #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;
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--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 */
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
/* #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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-blur-scale: 0;
|
||||
--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-y-scale: 4;
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--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,151 +0,0 @@
|
||||
@import url('../../color/default.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-brutalist,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-border: var(--wa-color-neutral-10);
|
||||
|
||||
--wa-color-text-link: var(--wa-color-neutral-40);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.2);
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
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-link: var(--wa-color-neutral-70);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.5);
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-brutalist {
|
||||
blockquote,
|
||||
pre {
|
||||
border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
|
||||
}
|
||||
wa-badge {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
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 {
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
:is(
|
||||
wa-input::part(input),
|
||||
wa-select::part(form-control-input),
|
||||
wa-textarea::part(form-control-input),
|
||||
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,16 +0,0 @@
|
||||
@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');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-brutalist {
|
||||
--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-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,357 @@
|
||||
@import url('../color/default.css');
|
||||
@import url('default/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('../brand/blue.css');
|
||||
@import url('../success/green.css');
|
||||
@import url('../warning/yellow.css');
|
||||
@import url('../danger/red.css');
|
||||
@import url('../neutral/gray.css');
|
||||
|
||||
@layer wa-theme {
|
||||
/* Nothing yet */
|
||||
:root,
|
||||
.wa-theme-default,
|
||||
.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-50);
|
||||
--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-50);
|
||||
--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-50);
|
||||
--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-50);
|
||||
--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-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-default,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--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: 600;
|
||||
|
||||
--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;
|
||||
--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-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 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
@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');
|
||||
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Foundational Colors and Semantic Colors
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that other content rests on.
|
||||
* Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--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);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
|
||||
--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);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
|
||||
--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);
|
||||
|
||||
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
|
||||
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
|
||||
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Focus color provides the default color of the focus ring for predictable keyboard navigation.
|
||||
* Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
/* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
* Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
|
||||
* Within these groups, each color specifies a role -
|
||||
* * Fill for background colors or areas larger than a few pixels
|
||||
* * Border for borders, dividers, and other stroke-like elements
|
||||
* * On for content displayed on a fill with the corresponding attention
|
||||
* Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
|
||||
*/
|
||||
--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-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-50);
|
||||
--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-50);
|
||||
--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-50);
|
||||
--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;
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
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);
|
||||
|
||||
/* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
|
||||
--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);
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Borders and outlines
|
||||
*/
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border widths. */
|
||||
--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);
|
||||
|
||||
/**
|
||||
* 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 */
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
:where(:root),
|
||||
:host {
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-scale: 1;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
|
||||
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
|
||||
* A multiplier is provided for each shadow quality to uniformly scale all related values.
|
||||
*/
|
||||
:where(:root),
|
||||
:host {
|
||||
--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);
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
:where(:root),
|
||||
:host {
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--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);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
:where(:root),
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:host {
|
||||
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--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.
|
||||
* A multiplier is provided to uniformly increase or decrease all font sizes. */
|
||||
--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-bold);
|
||||
--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;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +1,387 @@
|
||||
@import url('glossy/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('glossy/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('glossy/dimension.css');
|
||||
@import url('glossy/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow,
|
||||
.wa-dark,
|
||||
: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 {
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
/* #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 */
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--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,28 +0,0 @@
|
||||
@import url('../../color/elegant.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glossy,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-40);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success-40);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glossy {
|
||||
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,17 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glossy {
|
||||
--wa-font-family-body: 'Figtree', sans-serif;
|
||||
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 800;
|
||||
|
||||
--wa-line-height-condensed: 1.35;
|
||||
--wa-line-height-normal: 1.8;
|
||||
--wa-line-height-expanded: 2.25;
|
||||
}
|
||||
}
|
||||
@@ -1,44 +1,599 @@
|
||||
@import url('matter/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('matter/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('matter/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-matter,
|
||||
.wa-dark,
|
||||
.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 {
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
/* #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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-blur-scale: 1.25;
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-width: 0.125rem;
|
||||
--wa-focus-ring-offset: 0rem;
|
||||
--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 */
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
/* #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-label-font-weight: var(--wa-font-weight-normal);
|
||||
|
||||
--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,149 +0,0 @@
|
||||
@import url('../../color/mild.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-matter,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
|
||||
--wa-color-surface-raised: var(--wa-color-brand-95);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-90);
|
||||
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-link: var(--wa-color-brand-70);
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
@@ -1,245 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
@property --wa-ripple-progress {
|
||||
syntax: '<number>';
|
||||
initial-value: 0;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-matter {
|
||||
--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,17 +0,0 @@
|
||||
@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');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-matter {
|
||||
--wa-font-family-body: 'Wix Madefor Text', sans-serif;
|
||||
--wa-font-family-code: 'Roboto Mono', monospace;
|
||||
--wa-font-family-longform: 'Roboto Serif', serif;
|
||||
|
||||
--wa-font-weight-bold: 700;
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-link-decoration-default: underline;
|
||||
}
|
||||
}
|
||||
@@ -1,43 +1,392 @@
|
||||
@import url('mellow/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('mellow/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('mellow/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-mellow,
|
||||
.wa-dark,
|
||||
.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 {
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
/* #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;
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--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 */
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-width: 0.25rem;
|
||||
/* #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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--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,102 +0,0 @@
|
||||
@import url('../../color/natural.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
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-focus: var(--wa-color-brand-50);
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--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-brand-70);
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
@layer wa-theme {
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: calc(1em * -0.02);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
|
||||
calc(var(--wa-panel-border-width) * 4);
|
||||
}
|
||||
|
||||
wa-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,15 +0,0 @@
|
||||
@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');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow {
|
||||
--wa-font-family-body: 'Mulish', sans-serif;
|
||||
--wa-font-family-heading: 'Lora', serif;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
}
|
||||
}
|
||||
@@ -1,46 +1,401 @@
|
||||
@import url('playful/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('playful/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('playful/dimension.css');
|
||||
@import url('playful/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-playful,
|
||||
.wa-dark,
|
||||
.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 {
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
/* #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 */
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-width: 0.25rem;
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
/* #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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-blur-scale: 3;
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--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,149 +0,0 @@
|
||||
@import url('../../color/rudimentary.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-border: var(--wa-color-neutral-80);
|
||||
|
||||
--wa-color-text-link: var(--wa-color-yellow-40);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* 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-yellow-80);
|
||||
|
||||
--wa-color-focus: var(--wa-color-brand-60);
|
||||
|
||||
--wa-color-mix-hover: white 10%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand);
|
||||
--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-50);
|
||||
--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-20);
|
||||
--wa-color-success-fill-normal: var(--wa-color-success-40);
|
||||
--wa-color-success-fill-loud: var(--wa-color-success);
|
||||
--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-50);
|
||||
--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-20);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-warning-40);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-warning);
|
||||
--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-50);
|
||||
--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-20);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-danger-40);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-danger);
|
||||
--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-50);
|
||||
--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-20);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
|
||||
--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-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful {
|
||||
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,26 +0,0 @@
|
||||
@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');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful {
|
||||
--wa-font-family-body: 'Nunito', sans-serif;
|
||||
--wa-font-family-heading: 'Fredoka', sans-serif;
|
||||
--wa-font-family-code: 'Azeret Mono', ui-monospace, monospace;
|
||||
|
||||
--wa-font-size-scale: 1.125;
|
||||
|
||||
--wa-font-weight-normal: 500;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-heading: 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;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,407 @@
|
||||
@import url('premium/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('premium/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('premium/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-premium,
|
||||
.wa-dark,
|
||||
.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 {
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
/* #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 */
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
/* #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);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
|
||||
--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,147 +0,0 @@
|
||||
@import url('../../color/anodized.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-premium,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-border: var(--wa-color-neutral-80);
|
||||
|
||||
--wa-color-mix-hover: white 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);
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* 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-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);
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-premium {
|
||||
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,22 +0,0 @@
|
||||
@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');
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-premium,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-font-family-body: 'DM Sans', sans-serif;
|
||||
--wa-font-family-heading: 'Playfair Display', serif;
|
||||
--wa-font-family-longform: 'Playfair', serif;
|
||||
|
||||
--wa-font-weight-heading: 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);
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,484 @@
|
||||
@import url('shoelace/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('shoelace/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('shoelace/overrides.css');
|
||||
@import url('../color/shoelace.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-shoelace,
|
||||
.wa-dark,
|
||||
.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-50);
|
||||
--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-50);
|
||||
--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-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-50);
|
||||
--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-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-50);
|
||||
--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-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-50);
|
||||
--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-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-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
/* #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-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-brand-40);
|
||||
--wa-color-brand-border-loud: var(--wa-color-brand-50);
|
||||
--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-neutral-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-50);
|
||||
--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-neutral-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-50);
|
||||
--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-neutral-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-60);
|
||||
--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-50);
|
||||
--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-neutral-10);
|
||||
|
||||
--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-60);
|
||||
--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-50);
|
||||
--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-shoelace,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--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: 600;
|
||||
|
||||
--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;
|
||||
--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: 0.7;
|
||||
--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)
|
||||
color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
/* #endregion */
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
--wa-border-radius-scale: 0.7;
|
||||
/* #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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-offset-y-scale: 0.0625;
|
||||
--wa-shadow-spread-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);
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--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;
|
||||
--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: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
/* #endregion */
|
||||
|
||||
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* Form Controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
/* Form controls */
|
||||
--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-m);
|
||||
|
||||
/* 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-shoelace,
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
wa-button::part(label),
|
||||
wa-radio[appearance='button'],
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
wa-radio[appearance='button'] {
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
|
||||
&:state(checked) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-m);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
|
||||
&:is([appearance~='outlined']) {
|
||||
border-top-width: var(--wa-border-width-l);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
border-top-color: var(--border-color, var(--wa-color-border-loud));
|
||||
|
||||
&:not([appearance~='accent']) {
|
||||
--border-color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
&:not([appearance~='accent']) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
:is(
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-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
|
||||
):not([appearance='filled'], .wa-filled) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
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-slider::part(thumb) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
wa-progress-bar::part(base),
|
||||
progress {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,131 +0,0 @@
|
||||
@import url('../../color/shoelace.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-shoelace,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
* 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-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-50);
|
||||
--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-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-50);
|
||||
--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-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-50);
|
||||
--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-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-50);
|
||||
--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-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-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-normal: var(--wa-color-neutral-80);
|
||||
|
||||
/**
|
||||
* 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-50);
|
||||
--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-neutral-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-50);
|
||||
--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-neutral-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-50);
|
||||
--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-neutral-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-60);
|
||||
--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-50);
|
||||
--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-neutral-10);
|
||||
|
||||
--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-60);
|
||||
--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-50);
|
||||
--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);
|
||||
}
|
||||
}
|
||||
@@ -1,123 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-shoelace {
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
wa-button::part(label),
|
||||
wa-radio[appearance='button'],
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
wa-radio[appearance='button'] {
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
|
||||
&:state(checked) {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-m);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
|
||||
&:is([appearance~='outlined']) {
|
||||
border-top-width: var(--wa-border-width-l);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
border-top-color: var(--border-color, var(--wa-color-border-loud));
|
||||
|
||||
&:not([appearance~='accent']) {
|
||||
--border-color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
&:not([appearance~='accent']) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
:is(
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-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
|
||||
):not([appearance='filled'], .wa-filled) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
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-slider::part(thumb) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
wa-progress-bar::part(base),
|
||||
progress {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@import url('../default/typography.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-shoelace {
|
||||
--wa-font-family-body:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-longform: Georgia, 'Times New Roman', serif;
|
||||
|
||||
--wa-link-decoration-default: underline;
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,413 @@
|
||||
@import url('tailspin/color.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('tailspin/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('tailspin/overrides.css');
|
||||
@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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
:root,
|
||||
.wa-theme-tailspin,
|
||||
.wa-dark,
|
||||
.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 {
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
/* #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 */
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-width: 0.125rem;
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-offset-y-scale: 0.5;
|
||||
--wa-shadow-offset-blur-scale: 0.5;
|
||||
--wa-shadow-spread-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);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,158 +0,0 @@
|
||||
@import url('../../color/vogue.css');
|
||||
@import url('../default/color.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');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-link: var(--wa-color-brand-40);
|
||||
|
||||
--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;
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--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-dark,
|
||||
.wa-invert {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--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-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);
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@import url('../default/typography.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 {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin {
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-size-scale: 0.875;
|
||||
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user