mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Split default theme tokens into separate CSS files
As discussed with @lindsaym-fa last week. Hopefully this will eventually help reduce duplication across themes. Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Lea Verou
@@ -1,487 +1,21 @@
|
||||
@import url('default/color.css');
|
||||
@import url('default/color-semantic.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');
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Literal Colors
|
||||
* Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
|
||||
* Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddc;
|
||||
--wa-color-red-80: #ffb7b6;
|
||||
--wa-color-red-70: #fc9090;
|
||||
--wa-color-red-60: #f2676c;
|
||||
--wa-color-red-50: #de2d44;
|
||||
--wa-color-red-40: #b11036;
|
||||
--wa-color-red-30: #861a2f;
|
||||
--wa-color-red-20: #641122;
|
||||
--wa-color-red-10: #400712;
|
||||
--wa-color-red-05: #2a030a;
|
||||
|
||||
--wa-color-yellow-95: #fdf3ba;
|
||||
--wa-color-yellow-90: #fee590;
|
||||
--wa-color-yellow-80: #fcc041;
|
||||
--wa-color-yellow-70: #f39b00;
|
||||
--wa-color-yellow-60: #e07b00;
|
||||
--wa-color-yellow-50: #bb5a00;
|
||||
--wa-color-yellow-40: #924200;
|
||||
--wa-color-yellow-30: #743200;
|
||||
--wa-color-yellow-20: #572300;
|
||||
--wa-color-yellow-10: #361300;
|
||||
--wa-color-yellow-05: #240b00;
|
||||
|
||||
--wa-color-green-95: #e2f9e2;
|
||||
--wa-color-green-90: #c2f2c1;
|
||||
--wa-color-green-80: #92da97;
|
||||
--wa-color-green-70: #5dc36f;
|
||||
--wa-color-green-60: #00ac49;
|
||||
--wa-color-green-50: #008825;
|
||||
--wa-color-green-40: #006800;
|
||||
--wa-color-green-30: #005300;
|
||||
--wa-color-green-20: #003c00;
|
||||
--wa-color-green-10: #002400;
|
||||
--wa-color-green-05: #001700;
|
||||
|
||||
--wa-color-blue-95: #ebf4ff;
|
||||
--wa-color-blue-90: #d4e7ff;
|
||||
--wa-color-blue-80: #a6ccff;
|
||||
--wa-color-blue-70: #77b1ff;
|
||||
--wa-color-blue-60: #4895fd;
|
||||
--wa-color-blue-50: #0070ef;
|
||||
--wa-color-blue-40: #0055b8;
|
||||
--wa-color-blue-30: #004390;
|
||||
--wa-color-blue-20: #00306c;
|
||||
--wa-color-blue-10: #001c45;
|
||||
--wa-color-blue-05: #00112f;
|
||||
|
||||
--wa-color-indigo-95: #f0f2fe;
|
||||
--wa-color-indigo-90: #e2e4fc;
|
||||
--wa-color-indigo-80: #c2c6f8;
|
||||
--wa-color-indigo-70: #a5a9f2;
|
||||
--wa-color-indigo-60: #8a8beb;
|
||||
--wa-color-indigo-50: #6b65e2;
|
||||
--wa-color-indigo-40: #5246c1;
|
||||
--wa-color-indigo-30: #412eaa;
|
||||
--wa-color-indigo-20: #321393;
|
||||
--wa-color-indigo-10: #1c006a;
|
||||
--wa-color-indigo-05: #130049;
|
||||
|
||||
--wa-color-violet-95: #f9effd;
|
||||
--wa-color-violet-90: #f4defb;
|
||||
--wa-color-violet-80: #e7baf7;
|
||||
--wa-color-violet-70: #d996ef;
|
||||
--wa-color-violet-60: #c674e1;
|
||||
--wa-color-violet-50: #a94dc6;
|
||||
--wa-color-violet-40: #8732a1;
|
||||
--wa-color-violet-30: #6d2283;
|
||||
--wa-color-violet-20: #521564;
|
||||
--wa-color-violet-10: #330940;
|
||||
--wa-color-violet-05: #22042b;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3;
|
||||
--wa-color-gray-90: #e4e5e9;
|
||||
--wa-color-gray-80: #c7c9d0;
|
||||
--wa-color-gray-70: #abaeb9;
|
||||
--wa-color-gray-60: #9194a2;
|
||||
--wa-color-gray-50: #717584;
|
||||
--wa-color-gray-40: #545868;
|
||||
--wa-color-gray-30: #424554;
|
||||
--wa-color-gray-20: #2f323f;
|
||||
--wa-color-gray-10: #1b1d26;
|
||||
--wa-color-gray-05: #101219;
|
||||
|
||||
/**
|
||||
* 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-gray-95);
|
||||
--wa-color-surface-border: var(--wa-color-gray-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-gray-10);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-text-link: var(--wa-color-blue-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-gray-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, 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-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 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-blue-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-blue-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--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;
|
||||
|
||||
/* The default type scale is roughly based on the Major Second scale (x1.125),
|
||||
* with each value rounded to the nearest whole pixel based on a 16px root font size.
|
||||
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
|
||||
* A multiplier is provided to uniformly increase or decrease all font sizes. */
|
||||
--wa-font-size-multiplier: 1;
|
||||
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
|
||||
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
|
||||
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
|
||||
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
|
||||
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
|
||||
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
|
||||
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
|
||||
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
|
||||
|
||||
--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;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-multiplier: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border widths. */
|
||||
--wa-border-width-multiplier: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-multiplier: 0.375;
|
||||
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
|
||||
|
||||
/* 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;
|
||||
|
||||
/**
|
||||
* 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 */
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
--wa-shadow-offset-x-multiplier: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-offset-y-multiplier: 0.125;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-blur-multiplier: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-spread-multiplier: -0.0625;
|
||||
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-shadow-spread-xs) var(--wa-color-shadow);
|
||||
--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);
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-easing: ease;
|
||||
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--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-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-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-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-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-height-s: calc(
|
||||
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-m: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-l: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
/* 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-neutral-fill-loud);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
.wa-theme-default-dark :host {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-blue-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
180
src/styles/themes/default/color-semantic.css
Normal file
180
src/styles/themes/default/color-semantic.css
Normal file
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* Foundational Colors and Semantic Colors
|
||||
*/
|
||||
:where(:root, :host),
|
||||
.wa-theme-default-light {
|
||||
/**
|
||||
* 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-gray-95);
|
||||
--wa-color-surface-border: var(--wa-color-gray-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-gray-10);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-text-link: var(--wa-color-blue-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-gray-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, 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-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 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-blue-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-blue-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
:host-context(.wa-theme-default-dark) {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-blue-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
|
||||
}
|
||||
93
src/styles/themes/default/color.css
Normal file
93
src/styles/themes/default/color.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* Literal Colors
|
||||
* Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
|
||||
* Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddc;
|
||||
--wa-color-red-80: #ffb7b6;
|
||||
--wa-color-red-70: #fc9090;
|
||||
--wa-color-red-60: #f2676c;
|
||||
--wa-color-red-50: #de2d44;
|
||||
--wa-color-red-40: #b11036;
|
||||
--wa-color-red-30: #861a2f;
|
||||
--wa-color-red-20: #641122;
|
||||
--wa-color-red-10: #400712;
|
||||
--wa-color-red-05: #2a030a;
|
||||
|
||||
--wa-color-yellow-95: #fdf3ba;
|
||||
--wa-color-yellow-90: #fee590;
|
||||
--wa-color-yellow-80: #fcc041;
|
||||
--wa-color-yellow-70: #f39b00;
|
||||
--wa-color-yellow-60: #e07b00;
|
||||
--wa-color-yellow-50: #bb5a00;
|
||||
--wa-color-yellow-40: #924200;
|
||||
--wa-color-yellow-30: #743200;
|
||||
--wa-color-yellow-20: #572300;
|
||||
--wa-color-yellow-10: #361300;
|
||||
--wa-color-yellow-05: #240b00;
|
||||
|
||||
--wa-color-green-95: #e2f9e2;
|
||||
--wa-color-green-90: #c2f2c1;
|
||||
--wa-color-green-80: #92da97;
|
||||
--wa-color-green-70: #5dc36f;
|
||||
--wa-color-green-60: #00ac49;
|
||||
--wa-color-green-50: #008825;
|
||||
--wa-color-green-40: #006800;
|
||||
--wa-color-green-30: #005300;
|
||||
--wa-color-green-20: #003c00;
|
||||
--wa-color-green-10: #002400;
|
||||
--wa-color-green-05: #001700;
|
||||
|
||||
--wa-color-blue-95: #ebf4ff;
|
||||
--wa-color-blue-90: #d4e7ff;
|
||||
--wa-color-blue-80: #a6ccff;
|
||||
--wa-color-blue-70: #77b1ff;
|
||||
--wa-color-blue-60: #4895fd;
|
||||
--wa-color-blue-50: #0070ef;
|
||||
--wa-color-blue-40: #0055b8;
|
||||
--wa-color-blue-30: #004390;
|
||||
--wa-color-blue-20: #00306c;
|
||||
--wa-color-blue-10: #001c45;
|
||||
--wa-color-blue-05: #00112f;
|
||||
|
||||
--wa-color-indigo-95: #f0f2fe;
|
||||
--wa-color-indigo-90: #e2e4fc;
|
||||
--wa-color-indigo-80: #c2c6f8;
|
||||
--wa-color-indigo-70: #a5a9f2;
|
||||
--wa-color-indigo-60: #8a8beb;
|
||||
--wa-color-indigo-50: #6b65e2;
|
||||
--wa-color-indigo-40: #5246c1;
|
||||
--wa-color-indigo-30: #412eaa;
|
||||
--wa-color-indigo-20: #321393;
|
||||
--wa-color-indigo-10: #1c006a;
|
||||
--wa-color-indigo-05: #130049;
|
||||
|
||||
--wa-color-violet-95: #f9effd;
|
||||
--wa-color-violet-90: #f4defb;
|
||||
--wa-color-violet-80: #e7baf7;
|
||||
--wa-color-violet-70: #d996ef;
|
||||
--wa-color-violet-60: #c674e1;
|
||||
--wa-color-violet-50: #a94dc6;
|
||||
--wa-color-violet-40: #8732a1;
|
||||
--wa-color-violet-30: #6d2283;
|
||||
--wa-color-violet-20: #521564;
|
||||
--wa-color-violet-10: #330940;
|
||||
--wa-color-violet-05: #22042b;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3;
|
||||
--wa-color-gray-90: #e4e5e9;
|
||||
--wa-color-gray-80: #c7c9d0;
|
||||
--wa-color-gray-70: #abaeb9;
|
||||
--wa-color-gray-60: #9194a2;
|
||||
--wa-color-gray-50: #717584;
|
||||
--wa-color-gray-40: #545868;
|
||||
--wa-color-gray-30: #424554;
|
||||
--wa-color-gray-20: #2f323f;
|
||||
--wa-color-gray-10: #1b1d26;
|
||||
--wa-color-gray-05: #101219;
|
||||
}
|
||||
77
src/styles/themes/default/groups.css
Normal file
77
src/styles/themes/default/groups.css
Normal file
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
:where(:root, :host),
|
||||
.wa-theme-default-light {
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--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-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-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-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-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-height-s: calc(
|
||||
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-m: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-l: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
/* 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-neutral-fill-loud);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
:host-context(.wa-theme-default-dark) {
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
20
src/styles/themes/default/outlines.css
Normal file
20
src/styles/themes/default/outlines.css
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 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-multiplier: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
|
||||
|
||||
/**
|
||||
* 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 */
|
||||
}
|
||||
16
src/styles/themes/default/rounding.css
Normal file
16
src/styles/themes/default/rounding.css
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Rounding tokens
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-multiplier: 0.375;
|
||||
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
|
||||
|
||||
/* 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;
|
||||
}
|
||||
39
src/styles/themes/default/shadows.css
Normal file
39
src/styles/themes/default/shadows.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 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-multiplier: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-offset-y-multiplier: 0.125;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-blur-multiplier: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-spread-multiplier: -0.0625;
|
||||
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-shadow-spread-xs) var(--wa-color-shadow);
|
||||
--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);
|
||||
}
|
||||
16
src/styles/themes/default/space.css
Normal file
16
src/styles/themes/default/space.css
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-multiplier: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
|
||||
}
|
||||
9
src/styles/themes/default/transitions.css
Normal file
9
src/styles/themes/default/transitions.css
Normal file
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 75ms;
|
||||
}
|
||||
40
src/styles/themes/default/typography.css
Normal file
40
src/styles/themes/default/typography.css
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
:where(:root, :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;
|
||||
|
||||
/* The default type scale is roughly based on the Major Second scale (x1.125),
|
||||
* with each value rounded to the nearest whole pixel based on a 16px root font size.
|
||||
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
|
||||
* A multiplier is provided to uniformly increase or decrease all font sizes. */
|
||||
--wa-font-size-multiplier: 1;
|
||||
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
|
||||
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
|
||||
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
|
||||
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
|
||||
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
|
||||
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
|
||||
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
|
||||
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
|
||||
|
||||
--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;
|
||||
}
|
||||
Reference in New Issue
Block a user