js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
f53a643cf36cfca3bc961c6dd161d8420706c377
webawesome/src/themes/classic.css
lindsaym-fa f53a643cf3 improve typescale
2023-12-08 17:53:33 -05:00

419 lines
18 KiB
CSS
Raw Blame History

@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 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.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: #feefef;
--wa-color-red-90: #fcdfdf;
--wa-color-red-80: #f9baba;
--wa-color-red-70: #f69395;
--wa-color-red-60: #f2686a;
--wa-color-red-50: #d73c3f;
--wa-color-red-40: #a22d30;
--wa-color-red-30: #802426;
--wa-color-red-20: #5f1a1c;
--wa-color-red-10: #391011;
--wa-color-red-05: #240a0b;
--wa-color-yellow-95: #fff2c8;
--wa-color-yellow-90: #ffe091;
--wa-color-yellow-80: #ffbb50;
--wa-color-yellow-70: #ed9e4b;
--wa-color-yellow-60: #d18245;
--wa-color-yellow-50: #ab643c;
--wa-color-yellow-40: #844931;
--wa-color-yellow-30: #6a372a;
--wa-color-yellow-20: #4f2722;
--wa-color-yellow-10: #2d1816;
--wa-color-yellow-05: #1b0f0d;
--wa-color-green-95: #ddf9e8;
--wa-color-green-90: #b8f3d0;
--wa-color-green-80: #54e294;
--wa-color-green-70: #2ec77a;
--wa-color-green-60: #22aa69;
--wa-color-green-50: #188654;
--wa-color-green-40: #106541;
--wa-color-green-30: #0b5033;
--wa-color-green-20: #083a26;
--wa-color-green-10: #062217;
--wa-color-green-05: #05150e;
--wa-color-blue-95: #e8f4fb;
--wa-color-blue-90: #d2e9f6;
--wa-color-blue-80: #9ed0ec;
--wa-color-blue-70: #6bb8e2;
--wa-color-blue-60: #359ed7;
--wa-color-blue-50: #007bbf;
--wa-color-blue-40: #005d90;
--wa-color-blue-30: #004972;
--wa-color-blue-20: #003653;
--wa-color-blue-10: #002032;
--wa-color-blue-05: #00141f;
--wa-color-base-95: #f2f2f3;
--wa-color-base-90: #e5e5e7;
--wa-color-base-80: #c9c9cd;
--wa-color-base-70: #aeaeb4;
--wa-color-base-60: #94949b;
--wa-color-base-50: #75757e;
--wa-color-base-40: #58585f;
--wa-color-base-30: #45454a;
--wa-color-base-20: #323236;
--wa-color-base-10: #1d1d20;
--wa-color-base-05: #121213;
/**
* 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-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 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-blue-50);
--wa-color-brand-spot-darker: var(--wa-color-blue-40);
--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-90);
--wa-color-brand-border-highlight: var(--wa-color-blue-80);
--wa-color-brand-text-on-spot: white;
--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-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 */
/**
* 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 */
/**
* 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-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-default-dark,
.wa-theme-default-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-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-fill-accent: var(--wa-color-blue-50);
--wa-color-brand-fill-accent: var(--wa-color-blue-30);
--wa-color-brand-surface: var(--wa-color-blue-10);
--wa-color-brand-fill-subtle: var(--wa-color-blue-20);
--wa-color-brand-border-accent: var(--wa-color-blue-50);
--wa-color-brand-border-accent: var(--wa-color-blue-40);
--wa-color-brand-border-subtle: var(--wa-color-blue-20);
--wa-color-brand-border-subtle: var(--wa-color-blue-30);
--wa-color-brand-text-on-accent: white;
--wa-color-brand-text-on-subtle: var(--wa-color-blue-70);
--wa-color-brand-text-on-surface: var(--wa-color-blue-60);
--wa-color-success-fill-accent: var(--wa-color-green-50);
--wa-color-success-fill-accent: var(--wa-color-green-30);
--wa-color-success-surface: var(--wa-color-green-10);
--wa-color-success-fill-subtle: var(--wa-color-green-20);
--wa-color-success-border-accent: var(--wa-color-green-50);
--wa-color-success-border-accent: var(--wa-color-green-40);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-30);
--wa-color-success-text-on-accent: white;
--wa-color-success-text-on-subtle: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-warning-fill-accent: var(--wa-color-yellow-50);
--wa-color-warning-fill-accent: var(--wa-color-yellow-30);
--wa-color-warning-surface: var(--wa-color-yellow-10);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-accent: var(--wa-color-yellow-50);
--wa-color-warning-border-accent: var(--wa-color-yellow-40);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-30);
--wa-color-warning-text-on-accent: white;
--wa-color-warning-text-on-subtle: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-danger-fill-accent: var(--wa-color-red-50);
--wa-color-danger-fill-accent: var(--wa-color-red-30);
--wa-color-danger-surface: var(--wa-color-red-10);
--wa-color-danger-fill-subtle: var(--wa-color-red-20);
--wa-color-danger-border-accent: var(--wa-color-red-50);
--wa-color-danger-border-accent: var(--wa-color-red-40);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-30);
--wa-color-danger-text-on-accent: white;
--wa-color-danger-text-on-subtle: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-neutral-fill-accent: var(--wa-color-base-50);
--wa-color-neutral-fill-accent: var(--wa-color-base-30);
--wa-color-neutral-surface: var(--wa-color-base-10);
--wa-color-neutral-fill-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-accent: var(--wa-color-base-50);
--wa-color-neutral-border-accent: var(--wa-color-base-40);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-30);
--wa-color-neutral-text-on-accent: white;
--wa-color-neutral-text-on-subtle: var(--wa-color-base-70);
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
}
/* _utility.css */
Reference in New Issue View Git Blame Copy Permalink