mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
1b654c7c85
* Move custom properties related to shadows and borders to separate stylesheets * Change base values and themer calculations related to shadows and borders to be unitless * Add low-level custom properties for alert, button, card, input, select, switch, and textarea * Add generic guidance for authoring custom properties to the Contributing docs
453 lines
19 KiB
CSS
453 lines
19 KiB
CSS
@import 'depth_1_semiflat.css';
|
|
@import 'borders_2_light.css';
|
|
|
|
:root,
|
|
:host,
|
|
.wa-theme-default-light {
|
|
color-scheme: light;
|
|
|
|
/**
|
|
* Primitive colors
|
|
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
|
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
|
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
|
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
|
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
|
*/
|
|
--wa-color-red-95: #fdeef3;
|
|
--wa-color-red-90: #fcdee7;
|
|
--wa-color-red-80: #f8b8c8;
|
|
--wa-color-red-70: #f492a8;
|
|
--wa-color-red-60: #ef6982;
|
|
--wa-color-red-50: #df2e45;
|
|
--wa-color-red-40: #a82431;
|
|
--wa-color-red-30: #851d23;
|
|
--wa-color-red-20: #621617;
|
|
--wa-color-red-10: #3c0c09;
|
|
--wa-color-red-05: #290601;
|
|
|
|
--wa-color-yellow-95: #fbf3c9;
|
|
--wa-color-yellow-90: #ffe492;
|
|
--wa-color-yellow-80: #fcc041;
|
|
--wa-color-yellow-70: #e5a23d;
|
|
--wa-color-yellow-60: #cc853a;
|
|
--wa-color-yellow-50: #a86633;
|
|
--wa-color-yellow-40: #824a2a;
|
|
--wa-color-yellow-30: #6a3825;
|
|
--wa-color-yellow-20: #4f281d;
|
|
--wa-color-yellow-10: #2e1813;
|
|
--wa-color-yellow-05: #1a0e0a;
|
|
|
|
--wa-color-green-95: #e8f6ea;
|
|
--wa-color-green-90: #d0edd8;
|
|
--wa-color-green-80: #94d8ad;
|
|
--wa-color-green-70: #4ec486;
|
|
--wa-color-green-60: #00ae5f;
|
|
--wa-color-green-50: #008b4d;
|
|
--wa-color-green-40: #00693e;
|
|
--wa-color-green-30: #005334;
|
|
--wa-color-green-20: #003d28;
|
|
--wa-color-green-10: #00241b;
|
|
--wa-color-green-05: #001611;
|
|
|
|
--wa-color-blue-95: #e9f3fe;
|
|
--wa-color-blue-90: #d4e8fc;
|
|
--wa-color-blue-80: #a2cef9;
|
|
--wa-color-blue-70: #6eb4f6;
|
|
--wa-color-blue-60: #259af4;
|
|
--wa-color-blue-50: #0076f2;
|
|
--wa-color-blue-40: #005ab7;
|
|
--wa-color-blue-30: #004790;
|
|
--wa-color-blue-20: #00346a;
|
|
--wa-color-blue-10: #001f3f;
|
|
--wa-color-blue-05: #001427;
|
|
|
|
--wa-color-neutral-95: #f2f2f4;
|
|
--wa-color-neutral-90: #e5e5e9;
|
|
--wa-color-neutral-80: #c8c9d1;
|
|
--wa-color-neutral-70: #acaebb;
|
|
--wa-color-neutral-60: #9194a4;
|
|
--wa-color-neutral-50: #70758a;
|
|
--wa-color-neutral-40: #545868;
|
|
--wa-color-neutral-30: #424551;
|
|
--wa-color-neutral-20: #30323b;
|
|
--wa-color-neutral-10: #1c1d23;
|
|
--wa-color-neutral-05: #111215;
|
|
|
|
--wa-color-white: white;
|
|
--wa-color-black: black;
|
|
|
|
/**
|
|
* Base theme colors
|
|
*/
|
|
|
|
/* Surfaces are background layers that UI components and other content rest on.
|
|
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
|
--wa-color-surface-raised: var(--wa-color-white);
|
|
--wa-color-surface-default: var(--wa-color-white);
|
|
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
|
--wa-color-surface-outline: var(--wa-color-neutral-90);
|
|
|
|
/* Text colors are used for standard text elements.
|
|
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
|
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
|
--wa-color-text-normal: var(--wa-color-neutral-10);
|
|
--wa-color-text-quiet: var(--wa-color-neutral-40);
|
|
--wa-color-text-inverse: var(--wa-color-white);
|
|
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
|
|
|
|
/* Selection colors apply on content that is highlighted by the user.
|
|
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
|
|
--wa-color-selection-background: var(--wa-color-blue-80);
|
|
--wa-color-selection-text: var(--wa-color-black);
|
|
|
|
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
|
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
|
--wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 96%, transparent);
|
|
|
|
/* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
|
|
--wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
|
|
|
|
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
|
--wa-color-shadow: color-mix(
|
|
in oklab,
|
|
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-base) * 16% + 6%),
|
|
transparent
|
|
);
|
|
|
|
/* Base tints can be mixed with or overlay other colors to make them lighter or darker. */
|
|
--wa-color-tint-white: rgb(255 255 255 / 0.2);
|
|
--wa-color-tint-black: rgb(0 0 0 / 0.2);
|
|
|
|
/* State tints are mixed with component colors to achieve consistent effects on interaction. */
|
|
--wa-color-tint-hover: black 12%;
|
|
--wa-color-tint-active: black 20%;
|
|
|
|
/**
|
|
* Semantic theme colors
|
|
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
|
* * Brand to reinforce product branding
|
|
* * Success to express validity or confirmation
|
|
* * Warning to express caution or uncertainty
|
|
* * Danger to express errors or risk
|
|
* * Neutral for elements that are innocuous or inert
|
|
* Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
|
|
* Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
|
|
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
|
* Muted colors have no contrast requirements.
|
|
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
|
|
*/
|
|
/* TODO: Change -alt naming? */
|
|
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
|
|
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);
|
|
--wa-color-brand-fill-muted: var(--wa-color-blue-95);
|
|
--wa-color-brand-fill-muted-alt: var(--wa-color-blue-90);
|
|
--wa-color-brand-outline-vivid: var(--wa-color-blue-50);
|
|
--wa-color-brand-outline-vivid-alt: var(--wa-color-blue-40);
|
|
--wa-color-brand-outline-muted: var(--wa-color-blue-90);
|
|
--wa-color-brand-outline-muted-alt: var(--wa-color-blue-80);
|
|
--wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
|
|
--wa-color-brand-text-on-muted: var(--wa-color-blue-40);
|
|
--wa-color-brand-text-on-surface: var(--wa-color-blue-50);
|
|
|
|
--wa-color-success-fill-vivid: var(--wa-color-green-50);
|
|
--wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
|
|
--wa-color-success-fill-muted: var(--wa-color-green-95);
|
|
--wa-color-success-fill-muted-alt: var(--wa-color-green-90);
|
|
--wa-color-success-outline-vivid: var(--wa-color-green-50);
|
|
--wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
|
|
--wa-color-success-outline-muted: var(--wa-color-green-90);
|
|
--wa-color-success-outline-muted-alt: var(--wa-color-green-80);
|
|
--wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
|
|
--wa-color-success-text-on-muted: var(--wa-color-green-40);
|
|
--wa-color-success-text-on-surface: var(--wa-color-green-50);
|
|
|
|
--wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
|
|
--wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
|
|
--wa-color-warning-fill-muted: var(--wa-color-yellow-95);
|
|
--wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
|
|
--wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
|
|
--wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
|
|
--wa-color-warning-outline-muted: var(--wa-color-yellow-90);
|
|
--wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
|
|
--wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
|
|
--wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
|
|
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
|
|
|
|
--wa-color-danger-fill-vivid: var(--wa-color-red-50);
|
|
--wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
|
|
--wa-color-danger-fill-muted: var(--wa-color-red-95);
|
|
--wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
|
|
--wa-color-danger-outline-vivid: var(--wa-color-red-50);
|
|
--wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
|
|
--wa-color-danger-outline-muted: var(--wa-color-red-90);
|
|
--wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
|
|
--wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
|
|
--wa-color-danger-text-on-muted: var(--wa-color-red-40);
|
|
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
|
|
|
|
--wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
|
|
--wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
|
|
--wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
|
|
--wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
|
|
--wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
|
|
--wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
|
|
--wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
|
|
--wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
|
|
--wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
|
|
--wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
|
|
--wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
|
|
|
|
/**
|
|
* Typography
|
|
*/
|
|
--wa-font-family-heading: system-ui;
|
|
--wa-font-family-body: system-ui;
|
|
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
--wa-font-family-longform: 'Lora', serif;
|
|
|
|
--wa-font-weight-light: 300;
|
|
--wa-font-weight-normal: 400;
|
|
--wa-font-weight-medium: 500;
|
|
--wa-font-weight-heavy: 600;
|
|
|
|
--wa-font-weight-heading: var(--wa-font-weight-heavy);
|
|
--wa-font-weight-body: var(--wa-font-weight-normal);
|
|
--wa-font-weight-action: var(--wa-font-weight-medium);
|
|
|
|
--wa-font-size-root: 16px;
|
|
--wa-font-size-2xs: 0.625rem; /* 10 */
|
|
--wa-font-size-xs: 0.75rem; /* 12 */
|
|
--wa-font-size-s: 0.875rem; /* 14 */
|
|
--wa-font-size-m: 1rem; /* 16 */
|
|
--wa-font-size-l: 1.25rem; /* 20 */
|
|
--wa-font-size-xl: 1.75rem; /* 28 */
|
|
--wa-font-size-2xl: 2.5rem; /* 40 */
|
|
|
|
--wa-font-line-height-compact: 1.25;
|
|
--wa-font-line-height-regular: 1.625;
|
|
--wa-font-line-height-comfortable: 2;
|
|
|
|
/**
|
|
* Spacing
|
|
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
|
* Space can be organized into three groups with distinct usage -
|
|
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
|
* and padding within small components, such as badges and tooltips
|
|
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
|
* typical interface elements, such as buttons and inputs
|
|
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
|
* such as cards and dialogs
|
|
*/
|
|
/* Space is designed to scale according to a single base value.
|
|
* The base value is intended for calculations and is not used by components directly. */
|
|
--wa-space-base: 1rem;
|
|
--wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
|
|
--wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
|
|
--wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
|
|
--wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
|
|
--wa-space-m: var(--wa-space-base); /* 16 */
|
|
--wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
|
|
--wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
|
|
--wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
|
|
--wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
|
|
|
|
--wa-space-square-xs: var(--wa-space-xs);
|
|
--wa-space-square-s: var(--wa-space-s);
|
|
--wa-space-square-m: var(--wa-space-m);
|
|
--wa-space-square-l: var(--wa-space-l);
|
|
--wa-space-square-xl: var(--wa-space-xl);
|
|
|
|
--wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
|
|
--wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
|
|
--wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
|
|
--wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
|
|
--wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
|
|
|
|
--wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
|
|
--wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
|
|
--wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
|
|
--wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
|
|
--wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
|
|
|
|
/**
|
|
* Corners
|
|
*/
|
|
/* Corners are designed to scale according to a single base value.
|
|
* The base value is intended for calculations and is not used by components directly. */
|
|
--wa-corners-base: 0.25rem;
|
|
--wa-corners-half: calc(var(--wa-corners-base) * 0.5);
|
|
--wa-corners-1x: var(--wa-corners-base);
|
|
--wa-corners-2x: calc(var(--wa-corners-base) * 2);
|
|
--wa-corners-3x: calc(var(--wa-corners-base) * 3);
|
|
|
|
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
|
--wa-corners-pill: 9999px;
|
|
--wa-corners-circle: 50%;
|
|
--wa-corners-sharp: 0;
|
|
|
|
/**
|
|
* Focus
|
|
*/
|
|
--wa-focus-ring: solid 0.1875rem var(--wa-color-focus);
|
|
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
|
|
|
/**
|
|
* Z-index
|
|
*/
|
|
--wa-z-index-drawer: 700;
|
|
--wa-z-index-dialog: 800;
|
|
--wa-z-index-dropdown: 900;
|
|
--wa-z-index-alert-group: 950;
|
|
--wa-z-index-tooltip: 1000;
|
|
|
|
/**
|
|
* Transitions
|
|
*/
|
|
--wa-transition-normal: 250ms;
|
|
--wa-transition-fast: 150ms;
|
|
--wa-transition-faster: 50ms;
|
|
|
|
/**
|
|
* Component groups
|
|
*/
|
|
--wa-form-controls-background: var(--wa-color-surface-default);
|
|
|
|
--wa-form-controls-corners: var(--wa-corners-1x);
|
|
|
|
--wa-form-controls-text-color: var(--wa-color-text-normal);
|
|
--wa-form-controls-value-line-height: var(--wa-font-line-height-compact);
|
|
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
|
|
|
|
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
|
|
--wa-form-controls-placeholder-color-valid: var(--wa-color-green-60);
|
|
--wa-form-controls-placeholder-color-invalid: var(--wa-color-red-60);
|
|
|
|
--wa-form-controls-height-s: calc(
|
|
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
|
|
);
|
|
--wa-form-controls-height-m: calc(
|
|
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
|
|
);
|
|
--wa-form-controls-height-l: calc(
|
|
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
|
|
);
|
|
|
|
--wa-panel-corners: var(--wa-corners-2x);
|
|
|
|
/**
|
|
* From 2.x
|
|
*/
|
|
--wa-form-control-toggle-size-s: 0.875rem;
|
|
--wa-form-control-toggle-size-m: 1.125rem;
|
|
--wa-form-control-toggle-size-l: 1.375rem;
|
|
--wa-form-controls-required-content: '*';
|
|
--wa-form-controls-required-content-color: inherit;
|
|
--wa-form-controls-required-content-offset: -0.1em;
|
|
|
|
--wa-flow-spacing: 1.5rem;
|
|
--wa-tooltip-arrow-size: 0.375rem;
|
|
}
|
|
|
|
.wa-theme-default-dark,
|
|
.wa-theme-default-dark :host {
|
|
color-scheme: dark;
|
|
|
|
/**
|
|
* Base theme colors
|
|
*/
|
|
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
|
--wa-color-surface-default: var(--wa-color-neutral-05);
|
|
--wa-color-surface-lowered: var(--wa-color-black);
|
|
--wa-color-surface-outline: 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-inverse: var(--wa-color-neutral-10);
|
|
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
|
|
|
|
--wa-color-selection-background: var(--wa-color-blue-40);
|
|
--wa-color-selection-text: var(--wa-color-white);
|
|
|
|
--wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 90%, transparent);
|
|
|
|
--wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
|
|
|
|
--wa-color-shadow: color-mix(
|
|
in oklab,
|
|
var(--wa-color-black) calc(var(--wa-shadow-blur-base) * 32% + 40%),
|
|
transparent
|
|
);
|
|
|
|
--wa-color-tint-white: rgb(255 255 255 / 0.2);
|
|
--wa-color-tint-black: rgb(0 0 0 / 0.2);
|
|
|
|
--wa-color-tint-hover: black 8%;
|
|
--wa-color-tint-active: black 16%;
|
|
|
|
/**
|
|
* Semantic theme colors
|
|
*/
|
|
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
|
|
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-30);
|
|
--wa-color-brand-fill-muted: var(--wa-color-blue-10);
|
|
--wa-color-brand-fill-muted-alt: var(--wa-color-blue-20);
|
|
--wa-color-brand-outline-vivid: var(--wa-color-blue-50);
|
|
--wa-color-brand-outline-vivid-alt: var(--wa-color-blue-40);
|
|
--wa-color-brand-outline-muted: var(--wa-color-blue-20);
|
|
--wa-color-brand-outline-muted-alt: var(--wa-color-blue-30);
|
|
--wa-color-brand-text-on-vivid: var(--wa-color-white);
|
|
--wa-color-brand-text-on-muted: var(--wa-color-blue-70);
|
|
--wa-color-brand-text-on-surface: var(--wa-color-blue-60);
|
|
|
|
--wa-color-success-fill-vivid: var(--wa-color-green-50);
|
|
--wa-color-success-fill-vivid-alt: var(--wa-color-green-30);
|
|
--wa-color-success-fill-muted: var(--wa-color-green-10);
|
|
--wa-color-success-fill-muted-alt: var(--wa-color-green-20);
|
|
--wa-color-success-outline-vivid: var(--wa-color-green-50);
|
|
--wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
|
|
--wa-color-success-outline-muted: var(--wa-color-green-20);
|
|
--wa-color-success-outline-muted-alt: var(--wa-color-green-30);
|
|
--wa-color-success-text-on-vivid: var(--wa-color-white);
|
|
--wa-color-success-text-on-muted: var(--wa-color-green-70);
|
|
--wa-color-success-text-on-surface: var(--wa-color-green-60);
|
|
|
|
--wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
|
|
--wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30);
|
|
--wa-color-warning-fill-muted: var(--wa-color-yellow-10);
|
|
--wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20);
|
|
--wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
|
|
--wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
|
|
--wa-color-warning-outline-muted: var(--wa-color-yellow-20);
|
|
--wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30);
|
|
--wa-color-warning-text-on-vivid: var(--wa-color-white);
|
|
--wa-color-warning-text-on-muted: var(--wa-color-yellow-70);
|
|
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
|
|
|
|
--wa-color-danger-fill-vivid: var(--wa-color-red-50);
|
|
--wa-color-danger-fill-vivid-alt: var(--wa-color-red-30);
|
|
--wa-color-danger-fill-muted: var(--wa-color-red-10);
|
|
--wa-color-danger-fill-muted-alt: var(--wa-color-red-20);
|
|
--wa-color-danger-outline-vivid: var(--wa-color-red-50);
|
|
--wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
|
|
--wa-color-danger-outline-muted: var(--wa-color-red-20);
|
|
--wa-color-danger-outline-muted-alt: var(--wa-color-red-30);
|
|
--wa-color-danger-text-on-vivid: var(--wa-color-white);
|
|
--wa-color-danger-text-on-muted: var(--wa-color-red-70);
|
|
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
|
|
|
|
--wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
|
|
--wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30);
|
|
--wa-color-neutral-fill-muted: var(--wa-color-neutral-10);
|
|
--wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20);
|
|
--wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
|
|
--wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
|
|
--wa-color-neutral-outline-muted: var(--wa-color-neutral-20);
|
|
--wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30);
|
|
--wa-color-neutral-text-on-vivid: var(--wa-color-white);
|
|
--wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
|
|
--wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
|
|
}
|
|
|
|
/* _utility.css */
|