mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
507 lines
20 KiB
CSS
507 lines
20 KiB
CSS
@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
|
|
@import 'classic_components.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: #feeeee;
|
|
--wa-color-red-90: #fedede;
|
|
--wa-color-red-80: #fdb8b8;
|
|
--wa-color-red-70: #fa9292;
|
|
--wa-color-red-60: #ee6c6c;
|
|
--wa-color-red-50: #d43c3c;
|
|
--wa-color-red-40: #ac1e1e;
|
|
--wa-color-red-30: #640f0f;
|
|
--wa-color-red-20: #631111;
|
|
--wa-color-red-10: #3b0d0d;
|
|
--wa-color-red-05: #260606;
|
|
|
|
--wa-color-yellow-95: #fef2c4;
|
|
--wa-color-yellow-90: #fde494;
|
|
--wa-color-yellow-80: #fbc129;
|
|
--wa-color-yellow-70: #f29c0b;
|
|
--wa-color-yellow-60: #db7e13;
|
|
--wa-color-yellow-50: #af6005;
|
|
--wa-color-yellow-40: #904207;
|
|
--wa-color-yellow-30: #713406;
|
|
--wa-color-yellow-20: #532408;
|
|
--wa-color-yellow-10: #321606;
|
|
--wa-color-yellow-05: #1f0c01;
|
|
|
|
--wa-color-green-95: #e9f5ed;
|
|
--wa-color-green-90: #cfedd9;
|
|
--wa-color-green-80: #a2d5b4;
|
|
--wa-color-green-70: #6cc08a;
|
|
--wa-color-green-60: #38a961;
|
|
--wa-color-green-50: #178640;
|
|
--wa-color-green-40: #3d6208;
|
|
--wa-color-green-30: #0d5026;
|
|
--wa-color-green-20: #0c391d;
|
|
--wa-color-green-10: #082213;
|
|
--wa-color-green-05: #02140a;
|
|
|
|
--wa-color-blue-95: #e5f4fe;
|
|
--wa-color-blue-90: #c8ebfd;
|
|
--wa-color-blue-80: #80d4fc;
|
|
--wa-color-blue-70: #37bbf5;
|
|
--wa-color-blue-60: #0d9ee0;
|
|
--wa-color-blue-50: #027ab9;
|
|
--wa-color-blue-40: #015d8d;
|
|
--wa-color-blue-30: #024970;
|
|
--wa-color-blue-20: #04354f;
|
|
--wa-color-blue-10: #05202f;
|
|
--wa-color-blue-05: #04121b;
|
|
|
|
--wa-color-gray-95: #f1f2f3;
|
|
--wa-color-gray-90: #e5e6e7;
|
|
--wa-color-gray-80: #c8c9cd;
|
|
--wa-color-gray-70: #acafb4;
|
|
--wa-color-gray-60: #8f95a0;
|
|
--wa-color-gray-50: #6e7482;
|
|
--wa-color-gray-40: #4f5967;
|
|
--wa-color-gray-30: #3c4655;
|
|
--wa-color-gray-20: #293240;
|
|
--wa-color-gray-10: #171d2c;
|
|
--wa-color-gray-05: #0d111b;
|
|
|
|
--wa-color-primary-95: var(--wa-color-blue-95);
|
|
--wa-color-primary-90: var(--wa-color-blue-90);
|
|
--wa-color-primary-80: var(--wa-color-blue-80);
|
|
--wa-color-primary-70: var(--wa-color-blue-70);
|
|
--wa-color-primary-60: var(--wa-color-blue-60);
|
|
--wa-color-primary-50: var(--wa-color-blue-50);
|
|
--wa-color-primary-40: var(--wa-color-blue-40);
|
|
--wa-color-primary-30: var(--wa-color-blue-30);
|
|
--wa-color-primary-20: var(--wa-color-blue-20);
|
|
--wa-color-primary-10: var(--wa-color-blue-10);
|
|
--wa-color-primary-05: var(--wa-color-blue-05);
|
|
|
|
--wa-color-base-95: var(--wa-color-gray-95);
|
|
--wa-color-base-90: var(--wa-color-gray-90);
|
|
--wa-color-base-80: var(--wa-color-gray-80);
|
|
--wa-color-base-70: var(--wa-color-gray-70);
|
|
--wa-color-base-60: var(--wa-color-gray-60);
|
|
--wa-color-base-50: var(--wa-color-gray-50);
|
|
--wa-color-base-40: var(--wa-color-gray-40);
|
|
--wa-color-base-30: var(--wa-color-gray-30);
|
|
--wa-color-base-20: var(--wa-color-gray-20);
|
|
--wa-color-base-10: var(--wa-color-gray-10);
|
|
--wa-color-base-05: var(--wa-color-gray-05);
|
|
|
|
/**
|
|
* 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-10);
|
|
--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-primary-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-primary-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 12%;
|
|
--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 surfaces, fills, borders, and text with varying degrees of emphasis.
|
|
* Accent colors are the most noticeable against surfaces, whereas subtle colors draw less attention.
|
|
* Accent colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
|
* Subtle colors have no contrast requirements.
|
|
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
|
|
*/
|
|
--wa-color-brand-spot: var(--wa-color-primary-50);
|
|
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
|
|
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
|
|
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
|
|
--wa-color-brand-border-subtle: var(--wa-color-primary-90);
|
|
--wa-color-brand-border-highlight: var(--wa-color-primary-80);
|
|
--wa-color-brand-text-on-spot: white;
|
|
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
|
|
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
|
|
|
|
--wa-color-success-spot: var(--wa-color-green-50);
|
|
--wa-color-success-spot-darker: var(--wa-color-green-40);
|
|
--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-90);
|
|
--wa-color-success-border-highlight: var(--wa-color-green-80);
|
|
--wa-color-success-text-on-spot: white;
|
|
--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-50);
|
|
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
|
|
--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-90);
|
|
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
|
|
--wa-color-warning-text-on-spot: white;
|
|
--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-50);
|
|
--wa-color-danger-spot-darker: var(--wa-color-red-40);
|
|
--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-90);
|
|
--wa-color-danger-border-highlight: var(--wa-color-red-80);
|
|
--wa-color-danger-text-on-spot: white;
|
|
--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-40);
|
|
--wa-color-neutral-spot-darker: var(--wa-color-base-30);
|
|
--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-90);
|
|
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
|
|
--wa-color-neutral-text-on-spot: white;
|
|
--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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
--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-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
|
--wa-font-family-longform: Georgia, 'Times New Roman', 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-medium);
|
|
--wa-font-weight-body: var(--wa-font-weight-normal);
|
|
--wa-font-weight-action: var(--wa-font-weight-medium);
|
|
|
|
/* The default typescale is based on the Major Second scale (x1.125).
|
|
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
|
--wa-font-size-root: 16px;
|
|
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
|
--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.625rem; /* 26px */
|
|
--wa-font-size-2xl: 2rem; /* 32px */
|
|
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
|
--wa-font-size-4xl: 3.25rem; /* 52px */
|
|
|
|
--wa-font-line-height-compact: 1.25;
|
|
--wa-font-line-height-regular: 1.6;
|
|
--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 */
|
|
|
|
/**
|
|
* Borders
|
|
*/
|
|
--wa-border-style: solid;
|
|
|
|
/* Border widths 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-border-width-base: 0.0625;
|
|
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
|
|
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
|
|
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
|
|
|
|
--wa-form-controls-border-style: var(--wa-border-style);
|
|
--wa-form-controls-border-width: var(--wa-border-width-s);
|
|
|
|
--wa-panel-border-style: var(--wa-border-style);
|
|
--wa-panel-border-width: var(--wa-border-width-s);
|
|
|
|
/**
|
|
* 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.25;
|
|
--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) 60%, transparent);
|
|
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
|
|
|
/**
|
|
* Links
|
|
*/
|
|
--wa-link-decoration-default: underline;
|
|
--wa-link-decoration-hover: underline;
|
|
|
|
/**
|
|
* 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-normal);
|
|
--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: 1.875rem;
|
|
--wa-form-controls-height-m: 2.5rem;
|
|
--wa-form-controls-height-l: 3.125rem;
|
|
|
|
--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-s);
|
|
|
|
--wa-flow-spacing: 1.5rem;
|
|
|
|
/**
|
|
* From 2.x
|
|
*/
|
|
--wa-tooltip-arrow-size: 0.375rem;
|
|
}
|
|
|
|
.wa-theme-classic-dark,
|
|
.wa-theme-classic-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-primary-40);
|
|
--wa-color-selection-text: white;
|
|
|
|
--wa-color-focus: var(--wa-color-primary-70);
|
|
|
|
--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-primary-50);
|
|
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
|
|
--wa-color-brand-fill-subtle: var(--wa-color-primary-10);
|
|
--wa-color-brand-fill-highlight: var(--wa-color-primary-20);
|
|
--wa-color-brand-border-subtle: var(--wa-color-primary-20);
|
|
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
|
|
--wa-color-brand-text-on-spot: white;
|
|
--wa-color-brand-text-on-fill: var(--wa-color-primary-70);
|
|
--wa-color-brand-text-on-surface: var(--wa-color-primary-60);
|
|
|
|
--wa-color-success-spot: var(--wa-color-green-50);
|
|
--wa-color-success-spot-darker: var(--wa-color-green-40);
|
|
--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: white;
|
|
--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-50);
|
|
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
|
|
--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: white;
|
|
--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-50);
|
|
--wa-color-danger-spot-darker: var(--wa-color-red-40);
|
|
--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: white;
|
|
--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-50);
|
|
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
|
|
--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: white;
|
|
--wa-color-neutral-text-on-fill: var(--wa-color-base-70);
|
|
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
|
|
}
|
|
|
|
/* #region Custom Styles */
|
|
@container preview (min-width: 0) {
|
|
.hero-background {
|
|
height: 70rem;
|
|
background: linear-gradient(174deg, var(--wa-color-brand-fill-highlight) 0 70%, transparent 70% 100%);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-background::after {
|
|
background: url(/assets/images/kitchen-sink/classic/hero.png) 0px 0px no-repeat;
|
|
content: '';
|
|
position: absolute;
|
|
height: 1200px;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.strata.hero {
|
|
height: 45rem;
|
|
}
|
|
|
|
.hero .title {
|
|
text-align: right;
|
|
color: var(--wa-color-brand-text-on-fill);
|
|
}
|
|
}
|
|
|
|
/* responsive */
|
|
@container preview (min-width: 1040px) {
|
|
.hero-background {
|
|
height: 47rem;
|
|
}
|
|
|
|
.hero-background::after {
|
|
background: url(/assets/images/kitchen-sink/classic/hero.png) 50px -170px no-repeat;
|
|
height: 900px;
|
|
}
|
|
|
|
.strata.hero {
|
|
height: 32rem;
|
|
}
|
|
|
|
.hero .title {
|
|
margin-inline-start: 55%;
|
|
}
|
|
}
|
|
/* #endregion */
|
|
|
|
/* _utility.css */
|