mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
add Font Awesome theme
This commit is contained in:
lindsaym-fa
31
src/themes/cera_typeface.css
Normal file
31
src/themes/cera_typeface.css
Normal file
File diff suppressed because one or more lines are too long
442
src/themes/fa.css
Normal file
442
src/themes/fa.css
Normal file
@@ -0,0 +1,442 @@
|
||||
@import 'depth_2_chunky.css';
|
||||
@import 'borders_4_heavy.css';
|
||||
@import 'cera_typeface.css';
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-fa-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: #ffeeef;
|
||||
--wa-color-red-90: #fdd;
|
||||
--wa-color-red-80: #ffb2b2;
|
||||
--wa-color-red-70: #ff8585;
|
||||
--wa-color-red-60: #ff5c5c;
|
||||
--wa-color-red-50: #e12124;
|
||||
--wa-color-red-40: #aa1d00;
|
||||
--wa-color-red-30: #8a0b00;
|
||||
--wa-color-red-20: #700000;
|
||||
--wa-color-red-10: #46000c;
|
||||
--wa-color-red-05: #2e0008;
|
||||
|
||||
--wa-color-yellow-95: #fff1c0;
|
||||
--wa-color-yellow-90: #ffe275;
|
||||
--wa-color-yellow-80: #f0c421;
|
||||
--wa-color-yellow-70: #d5a900;
|
||||
--wa-color-yellow-60: #b89100;
|
||||
--wa-color-yellow-50: #917100;
|
||||
--wa-color-yellow-40: #715400;
|
||||
--wa-color-yellow-30: #5d4100;
|
||||
--wa-color-yellow-20: #4a2d00;
|
||||
--wa-color-yellow-10: #361600;
|
||||
--wa-color-yellow-05: #200d00;
|
||||
|
||||
--wa-color-green-95: #cafae6;
|
||||
--wa-color-green-90: #aaf3d7;
|
||||
--wa-color-green-80: #46e2b7;
|
||||
--wa-color-green-70: #00cba0;
|
||||
--wa-color-green-60: #00b28f;
|
||||
--wa-color-green-50: #008f76;
|
||||
--wa-color-green-40: #00705e;
|
||||
--wa-color-green-30: #005c4d;
|
||||
--wa-color-green-20: #00483d;
|
||||
--wa-color-green-10: #00312b;
|
||||
--wa-color-green-05: #001613;
|
||||
|
||||
--wa-color-blue-95: #e4f1ff;
|
||||
--wa-color-blue-90: #cee6ff;
|
||||
--wa-color-blue-80: #96ccff;
|
||||
--wa-color-blue-70: #53b4ff;
|
||||
--wa-color-blue-60: #349bf1;
|
||||
--wa-color-blue-50: #0079cd;
|
||||
--wa-color-blue-40: #005aa8;
|
||||
--wa-color-blue-30: #00458c;
|
||||
--wa-color-blue-20: #003073;
|
||||
--wa-color-blue-10: #00175c;
|
||||
--wa-color-blue-05: #000e39;
|
||||
|
||||
--wa-color-base-95: #f0f2f4;
|
||||
--wa-color-base-90: #e3e5e9;
|
||||
--wa-color-base-80: #c4c9d1;
|
||||
--wa-color-base-70: #a8afba;
|
||||
--wa-color-base-60: #8d97a4;
|
||||
--wa-color-base-50: #6a7688;
|
||||
--wa-color-base-40: #4c5a6e;
|
||||
--wa-color-base-30: #37465d;
|
||||
--wa-color-base-20: #24344c;
|
||||
--wa-color-base-10: #0e1f38;
|
||||
--wa-color-base-05: #081221;
|
||||
|
||||
/**
|
||||
* Foundational 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: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-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-base-20);
|
||||
--wa-color-text-quiet: var(--wa-color-base-40);
|
||||
--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: 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: var(--wa-color-blue-60);
|
||||
|
||||
/* 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-base-10) 25%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-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.
|
||||
*/
|
||||
|
||||
--wa-color-brand-spot: var(--wa-color-blue-70);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-blue-50);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-blue-95);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-blue-90);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-blue-80);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-blue-50);
|
||||
--wa-color-brand-text-on-spot: var(--wa-color-text-normal);
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-blue-40);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-blue-50);
|
||||
|
||||
--wa-color-success-spot: var(--wa-color-green-80);
|
||||
--wa-color-success-spot-darker: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-subtle: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-highlight: var(--wa-color-green-90);
|
||||
--wa-color-success-border-subtle: var(--wa-color-green-80);
|
||||
--wa-color-success-border-highlight: var(--wa-color-green-50);
|
||||
--wa-color-success-text-on-spot: var(--wa-color-text-normal);
|
||||
--wa-color-success-text-on-fill: var(--wa-color-green-40);
|
||||
--wa-color-success-text-on-surface: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-spot: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-spot-darker: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-subtle: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-text-on-spot: var(--wa-color-text-normal);
|
||||
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-spot: var(--wa-color-red-70);
|
||||
--wa-color-danger-spot-darker: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-subtle: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-highlight: var(--wa-color-red-50);
|
||||
--wa-color-danger-text-on-spot: var(--wa-color-text-normal);
|
||||
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
|
||||
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-spot: var(--wa-color-base-80);
|
||||
--wa-color-neutral-spot-darker: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-80);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-50);
|
||||
--wa-color-neutral-text-on-spot: var(--wa-color-text-normal);
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'cera-round-pro', sans-serif;
|
||||
--wa-font-family-body: 'cera-round-pro', sans-serif;
|
||||
--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: 700;
|
||||
|
||||
--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-heavy);
|
||||
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.625rem; /* 10px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.75rem; /* 28px */
|
||||
--wa-font-size-2xl: 2.5rem; /* 40px */
|
||||
|
||||
--wa-font-line-height-compact: 1.25;
|
||||
--wa-font-line-height-regular: 1.75;
|
||||
--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: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-base) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-base) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-base) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-base) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-base) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-base) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-base) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
|
||||
/**
|
||||
* 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.5;
|
||||
--wa-corners-xs: calc(var(--wa-corners-base) * 0.75rem);
|
||||
--wa-corners-s: calc(var(--wa-corners-base) * 1rem);
|
||||
--wa-corners-m: calc(var(--wa-corners-base) * 2rem);
|
||||
--wa-corners-l: calc(var(--wa-corners-base) * 3rem);
|
||||
|
||||
/* 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-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) 98%, transparent);
|
||||
--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-s);
|
||||
|
||||
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
|
||||
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
|
||||
|
||||
--wa-form-controls-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-controls-label-font-weight: var(--wa-font-weight-heavy);
|
||||
--wa-form-controls-label-line-height: var(--wa-font-line-height-regular);
|
||||
|
||||
--wa-form-controls-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-controls-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-controls-value-line-height: var(--wa-font-line-height-compact);
|
||||
|
||||
--wa-form-controls-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-controls-height-s: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-m: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-l: calc(
|
||||
var(--wa-space-l) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
|
||||
--wa-form-controls-required-content: '*';
|
||||
--wa-form-controls-required-content-color: inherit;
|
||||
--wa-form-controls-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-corners: var(--wa-corners-m);
|
||||
|
||||
--wa-flow-spacing: 1.5rem;
|
||||
|
||||
/**
|
||||
* 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-tooltip-arrow-size: 0.375rem;
|
||||
}
|
||||
|
||||
.wa-theme-fa-dark,
|
||||
.wa-theme-fa-dark :host {
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-10);
|
||||
--wa-color-surface-default: var(--wa-color-base-05);
|
||||
--wa-color-surface-lowered: black;
|
||||
--wa-color-surface-border: var(--wa-color-base-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
|
||||
|
||||
--wa-color-selection-background: var(--wa-color-blue-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--wa-color-brand-spot: var(--wa-color-blue-70);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-blue-50);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-blue-10);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-blue-20);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-blue-20);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-blue-30);
|
||||
--wa-color-brand-text-on-spot: black;
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-blue-70);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-success-spot: var(--wa-color-green-70);
|
||||
--wa-color-success-spot-darker: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-subtle: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-highlight: var(--wa-color-green-20);
|
||||
--wa-color-success-border-subtle: var(--wa-color-green-20);
|
||||
--wa-color-success-border-highlight: var(--wa-color-green-30);
|
||||
--wa-color-success-text-on-spot: black;
|
||||
--wa-color-success-text-on-fill: var(--wa-color-green-70);
|
||||
--wa-color-success-text-on-surface: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-warning-spot: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-spot-darker: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-text-on-spot: black;
|
||||
--wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
|
||||
|
||||
--wa-color-danger-spot: var(--wa-color-red-70);
|
||||
--wa-color-danger-spot-darker: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-subtle: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-highlight: var(--wa-color-red-30);
|
||||
--wa-color-danger-text-on-spot: black;
|
||||
--wa-color-danger-text-on-fill: var(--wa-color-red-70);
|
||||
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
|
||||
|
||||
--wa-color-neutral-spot: var(--wa-color-base-70);
|
||||
--wa-color-neutral-spot-darker: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
|
||||
--wa-color-neutral-text-on-spot: black;
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-70);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
|
||||
}
|
||||
|
||||
/* _utility.css */
|
||||
|
||||
/* To be (re)moved */
|
||||
wa-button:not([variant='text']) {
|
||||
--border-color: var(--label-color);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--border-color);
|
||||
--box-shadow-color: var(--border-color);
|
||||
--background-active: var(--border-color);
|
||||
--label-color-active: var(--background);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
|
||||
&[variant='brand'] {
|
||||
--icon-color: var(--wa-color-brand-spot-darker);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-spot-darker);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-spot-darker);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-spot-darker);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-spot-darker);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user