mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Merge branch '11ty3' of https://github.com/shoelace-style/webawesome into 11ty3
This commit is contained in:
Cory LaViska
@@ -22,8 +22,10 @@
|
||||
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<link rel="stylesheet" href="/dist/themes/default.css" />
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-chic-light {
|
||||
.wa-theme-active-light {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
@@ -13,65 +13,89 @@
|
||||
* 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: #ffeef1;
|
||||
--wa-color-red-90: #ffdde3;
|
||||
--wa-color-red-80: #ffb6c1;
|
||||
--wa-color-red-70: #ff8d9e;
|
||||
--wa-color-red-60: #ff5b74;
|
||||
--wa-color-red-50: #da354e;
|
||||
--wa-color-red-40: #a5283b;
|
||||
--wa-color-red-30: #82202f;
|
||||
--wa-color-red-20: #601722;
|
||||
--wa-color-red-10: #3a0e15;
|
||||
--wa-color-red-05: #25090d;
|
||||
--wa-color-red-95: #ffeeee;
|
||||
--wa-color-red-90: #ffdddd;
|
||||
--wa-color-red-80: #ffb6b8;
|
||||
--wa-color-red-70: #fb9191;
|
||||
--wa-color-red-60: #f16b5e;
|
||||
--wa-color-red-50: #da3c06;
|
||||
--wa-color-red-40: #a62c00;
|
||||
--wa-color-red-30: #812500;
|
||||
--wa-color-red-20: #601a00;
|
||||
--wa-color-red-10: #3d0d00;
|
||||
--wa-color-red-05: #290600;
|
||||
|
||||
--wa-color-yellow-95: #f7f5ba;
|
||||
--wa-color-yellow-90: #fbe76e;
|
||||
--wa-color-yellow-80: #f0c600;
|
||||
--wa-color-yellow-70: #dfa600;
|
||||
--wa-color-yellow-60: #ca8707;
|
||||
--wa-color-yellow-50: #a96611;
|
||||
--wa-color-yellow-40: #864812;
|
||||
--wa-color-yellow-30: #6f3513;
|
||||
--wa-color-yellow-20: #542512;
|
||||
--wa-color-yellow-10: #31160a;
|
||||
--wa-color-yellow-05: #1e0e04;
|
||||
--wa-color-yellow-95: #fff497;
|
||||
--wa-color-yellow-90: #ffe571;
|
||||
--wa-color-yellow-80: #ffbd31;
|
||||
--wa-color-yellow-70: #f09d27;
|
||||
--wa-color-yellow-60: #d67f31;
|
||||
--wa-color-yellow-50: #b1612d;
|
||||
--wa-color-yellow-40: #8b4527;
|
||||
--wa-color-yellow-30: #703422;
|
||||
--wa-color-yellow-20: #53251c;
|
||||
--wa-color-yellow-10: #311613;
|
||||
--wa-color-yellow-05: #1f0d0b;
|
||||
|
||||
--wa-color-green-95: #cdfed9;
|
||||
--wa-color-green-90: #8afdaf;
|
||||
--wa-color-green-80: #00e873;
|
||||
--wa-color-green-70: #00ca69;
|
||||
--wa-color-green-60: #00ac5d;
|
||||
--wa-color-green-50: #00894d;
|
||||
--wa-color-green-40: #00673c;
|
||||
--wa-color-green-30: #005131;
|
||||
--wa-color-green-20: #003c25;
|
||||
--wa-color-green-10: #002318;
|
||||
--wa-color-green-05: #01160f;
|
||||
--wa-color-lime-95: #daff92;
|
||||
--wa-color-lime-90: #c1f759;
|
||||
--wa-color-lime-80: #9bdc1a;
|
||||
--wa-color-lime-70: #7ec200;
|
||||
--wa-color-lime-60: #60a600;
|
||||
--wa-color-lime-50: #3e8600;
|
||||
--wa-color-lime-40: #216600;
|
||||
--wa-color-lime-30: #135100;
|
||||
--wa-color-lime-20: #083b00;
|
||||
--wa-color-lime-10: #022400;
|
||||
--wa-color-lime-05: #011600;
|
||||
|
||||
--wa-color-lime-95: #ddfcc5;
|
||||
--wa-color-lime-90: #b2f987;
|
||||
--wa-color-lime-80: #77e24b;
|
||||
--wa-color-lime-70: #61c545;
|
||||
--wa-color-lime-60: #4ca83e;
|
||||
--wa-color-lime-50: #378634;
|
||||
--wa-color-lime-40: #266529;
|
||||
--wa-color-lime-30: #1b4f22;
|
||||
--wa-color-lime-20: #113a1a;
|
||||
--wa-color-lime-10: #0a2212;
|
||||
--wa-color-lime-05: #06150b;
|
||||
--wa-color-green-95: #dafadc;
|
||||
--wa-color-green-90: #b9f4bc;
|
||||
--wa-color-green-80: #64e177;
|
||||
--wa-color-green-70: #2ec859;
|
||||
--wa-color-green-60: #00ac4a;
|
||||
--wa-color-green-50: #008840;
|
||||
--wa-color-green-40: #006734;
|
||||
--wa-color-green-30: #005128;
|
||||
--wa-color-green-20: #003b1c;
|
||||
--wa-color-green-10: #00230e;
|
||||
--wa-color-green-05: #001607;
|
||||
|
||||
--wa-color-base-95: #f2f2f4;
|
||||
--wa-color-base-90: #e5e5e9;
|
||||
--wa-color-base-80: #c8c9d1;
|
||||
--wa-color-base-70: #acaebb;
|
||||
--wa-color-base-60: #9194a4;
|
||||
--wa-color-base-50: #70758a;
|
||||
--wa-color-base-40: #545868;
|
||||
--wa-color-base-30: #424551;
|
||||
--wa-color-base-20: #30323b;
|
||||
--wa-color-base-10: #1c1d23;
|
||||
--wa-color-base-05: #111215;
|
||||
--wa-color-gray-95: #f2f2f2;
|
||||
--wa-color-gray-90: #e6e6e6;
|
||||
--wa-color-gray-80: #c9c9c9;
|
||||
--wa-color-gray-70: #afafaf;
|
||||
--wa-color-gray-60: #959595;
|
||||
--wa-color-gray-50: #747474;
|
||||
--wa-color-gray-40: #585858;
|
||||
--wa-color-gray-30: #454545;
|
||||
--wa-color-gray-20: #313131;
|
||||
--wa-color-gray-10: #1d1d1d;
|
||||
--wa-color-gray-05: #131313;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-lime-95);
|
||||
--wa-color-primary-90: var(--wa-color-lime-90);
|
||||
--wa-color-primary-80: var(--wa-color-lime-80);
|
||||
--wa-color-primary-70: var(--wa-color-lime-70);
|
||||
--wa-color-primary-60: var(--wa-color-lime-60);
|
||||
--wa-color-primary-50: var(--wa-color-lime-50);
|
||||
--wa-color-primary-40: var(--wa-color-lime-40);
|
||||
--wa-color-primary-30: var(--wa-color-lime-30);
|
||||
--wa-color-primary-20: var(--wa-color-lime-20);
|
||||
--wa-color-primary-10: var(--wa-color-lime-10);
|
||||
--wa-color-primary-05: var(--wa-color-lime-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
|
||||
@@ -93,12 +117,12 @@
|
||||
|
||||
/* 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-lime-80);
|
||||
--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: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 96%, transparent);
|
||||
|
||||
/* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
|
||||
--wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
|
||||
@@ -128,15 +152,15 @@
|
||||
* 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-lime-80);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-lime-95);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-lime-90);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-lime-90);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-lime-80);
|
||||
--wa-color-brand-spot: var(--wa-color-primary-80);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-70);
|
||||
--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: black;
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-lime-40);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-lime-50);
|
||||
--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-80);
|
||||
--wa-color-success-spot-darker: var(--wa-color-green-70);
|
||||
@@ -190,12 +214,13 @@
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-medium: 550;
|
||||
--wa-font-weight-heavy: 650;
|
||||
--wa-font-weight-black: 900;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-heavy);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-medium);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
/* 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 */
|
||||
@@ -344,8 +369,8 @@
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
}
|
||||
|
||||
.wa-theme-chic-dark,
|
||||
.wa-theme-chic-dark :host {
|
||||
.wa-theme-active-dark,
|
||||
.wa-theme-active-dark :host {
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
@@ -360,10 +385,10 @@
|
||||
--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-lime-40);
|
||||
--wa-color-selection-background: var(--wa-color-primary-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
|
||||
|
||||
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
@@ -375,15 +400,15 @@
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--wa-color-brand-spot: var(--wa-color-lime-80);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-lime-10);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-lime-20);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-lime-20);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-lime-30);
|
||||
--wa-color-brand-spot: var(--wa-color-primary-80);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-70);
|
||||
--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: black;
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-lime-90);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-lime-80);
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-primary-90);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-primary-80);
|
||||
|
||||
--wa-color-success-spot: var(--wa-color-green-80);
|
||||
--wa-color-success-spot-darker: var(--wa-color-green-70);
|
||||
@@ -424,6 +449,75 @@
|
||||
--wa-color-neutral-text-on-spot: black;
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
|
||||
|
||||
.hero-background::after {
|
||||
backdrop-filter: brightness(0.8);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.hero-background {
|
||||
background: linear-gradient(
|
||||
var(--wa-color-green-80) 20%,
|
||||
var(--wa-color-primary-80) 80.5%,
|
||||
var(--wa-color-base-10) 80.5%,
|
||||
var(--wa-color-primary-80) 100%
|
||||
);
|
||||
background: url(/assets/images/kitchen-sink/active/hero.png) 50% 0px / cover no-repeat;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
margin-inline-start: 55%;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-black);
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-subtle);
|
||||
--label-color: var(--wa-color-neutral-text-on-fill);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-brand-text-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1100px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-block-start: 10%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* _utility.css */
|
||||
@@ -56,7 +56,6 @@ blockquote,
|
||||
dd,
|
||||
details,
|
||||
dl,
|
||||
fieldset,
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
@@ -192,36 +191,22 @@ kbd,
|
||||
samp,
|
||||
var {
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: 0.975em;
|
||||
font-size: 0.90625em;
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
border-radius: var(--wa-corners-s);
|
||||
padding-block: var(--wa-space-3xs);
|
||||
padding-inline: var(--wa-space-2xs);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 90%);
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--wa-color-text-normal);
|
||||
border-radius: var(--wa-corners-s);
|
||||
padding: var(--wa-space-m);
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre:has(code) {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
padding: var(--wa-space-m);
|
||||
}
|
||||
}
|
||||
|
||||
pre:not(:has(code)) code {
|
||||
background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 90%);
|
||||
}
|
||||
|
||||
kbd {
|
||||
@@ -391,7 +376,7 @@ legend {
|
||||
}
|
||||
|
||||
/* Images, videos, iframes, etc. */
|
||||
img,
|
||||
img:not(wa-card *),
|
||||
picture,
|
||||
svg,
|
||||
video {
|
||||
@@ -414,7 +399,6 @@ iframe {
|
||||
a {
|
||||
color: var(--wa-color-text-link);
|
||||
text-decoration: var(--wa-link-decoration-default);
|
||||
text-underline-offset: 0.2em;
|
||||
-webkit-text-decoration: var(--wa-link-decoration-default);
|
||||
}
|
||||
|
||||
|
||||
883
src/themes/brutalist.css
Normal file
883
src/themes/brutalist.css
Normal file
@@ -0,0 +1,883 @@
|
||||
@import 'depth_2_chunky.css';
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-brutalist-light {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
--wa-color-red-95: #fdeef3;
|
||||
--wa-color-red-90: #fcdee7;
|
||||
--wa-color-red-80: #f8b8c8;
|
||||
--wa-color-red-70: #f492a8;
|
||||
--wa-color-red-60: #ef6982;
|
||||
--wa-color-red-50: #df2e45;
|
||||
--wa-color-red-40: #a82431;
|
||||
--wa-color-red-30: #851d23;
|
||||
--wa-color-red-20: #621617;
|
||||
--wa-color-red-10: #3c0c09;
|
||||
--wa-color-red-05: #290601;
|
||||
|
||||
--wa-color-yellow-95: #fbf3c9;
|
||||
--wa-color-yellow-90: #ffe492;
|
||||
--wa-color-yellow-80: #fcc041;
|
||||
--wa-color-yellow-70: #e5a23d;
|
||||
--wa-color-yellow-60: #cc853a;
|
||||
--wa-color-yellow-50: #a86633;
|
||||
--wa-color-yellow-40: #824a2a;
|
||||
--wa-color-yellow-30: #6a3825;
|
||||
--wa-color-yellow-20: #4f281d;
|
||||
--wa-color-yellow-10: #2e1813;
|
||||
--wa-color-yellow-05: #1a0e0a;
|
||||
|
||||
--wa-color-green-95: #e2f8df;
|
||||
--wa-color-green-90: #c2f2c1;
|
||||
--wa-color-green-80: #68e27a;
|
||||
--wa-color-green-70: #00cb50;
|
||||
--wa-color-green-60: #00ae4b;
|
||||
--wa-color-green-50: #008840;
|
||||
--wa-color-green-40: #006834;
|
||||
--wa-color-green-30: #00522c;
|
||||
--wa-color-green-20: #003b22;
|
||||
--wa-color-green-10: #002418;
|
||||
--wa-color-green-05: #001611;
|
||||
|
||||
--wa-color-blue-95: #e9f3fe;
|
||||
--wa-color-blue-90: #d4e8fc;
|
||||
--wa-color-blue-80: #a2cef9;
|
||||
--wa-color-blue-70: #6eb4f6;
|
||||
--wa-color-blue-60: #259af4;
|
||||
--wa-color-blue-50: #0076f2;
|
||||
--wa-color-blue-40: #005ab7;
|
||||
--wa-color-blue-30: #004790;
|
||||
--wa-color-blue-20: #00346a;
|
||||
--wa-color-blue-10: #001f3f;
|
||||
--wa-color-blue-05: #001427;
|
||||
|
||||
--wa-color-gray-95: #f2f2f4;
|
||||
--wa-color-gray-90: #e5e5e9;
|
||||
--wa-color-gray-80: #c8c9d1;
|
||||
--wa-color-gray-70: #acaebb;
|
||||
--wa-color-gray-60: #9194a4;
|
||||
--wa-color-gray-50: #6f7388;
|
||||
--wa-color-gray-40: #545868;
|
||||
--wa-color-gray-30: #424551;
|
||||
--wa-color-gray-20: #2f313a;
|
||||
--wa-color-gray-10: #1c1d23;
|
||||
--wa-color-gray-05: #111215;
|
||||
|
||||
--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-10);
|
||||
|
||||
/* 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-50);
|
||||
--wa-color-text-link: var(--wa-color-neutral-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-base-10);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
/* 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: rgba(0, 0, 0, 0.2);
|
||||
|
||||
--wa-shadow-offset-y-base: 0.5;
|
||||
--wa-shadow-offset-x-base: 0.5;
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: white 12%;
|
||||
--wa-color-mix-active: white 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-primary-50);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-20);
|
||||
--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-80);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-primary-60);
|
||||
--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-80);
|
||||
--wa-color-success-border-highlight: var(--wa-color-green-60);
|
||||
--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-80);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-60);
|
||||
--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-80);
|
||||
--wa-color-danger-border-highlight: var(--wa-color-red-60);
|
||||
--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-20);
|
||||
--wa-color-neutral-spot-darker: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-subtle: var(--wa-color-base-90);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-70);
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-80);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-20);
|
||||
--wa-color-neutral-text-on-spot: white;
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-30);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-10);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'IBM Plex Sans Condensed', serif;
|
||||
--wa-font-family-body: 'Space Grotesk', sans-serif;
|
||||
--wa-font-family-code: 'Space 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-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.125;
|
||||
--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.001;
|
||||
--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 */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-neutral-border-highlight) dotted;
|
||||
--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-neutral-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-medium);
|
||||
--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-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-m: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-l: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
|
||||
--wa-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-tooltip-arrow-size: 0.375rem;
|
||||
}
|
||||
|
||||
.wa-theme-brutalist-dark,
|
||||
.wa-theme-brutalist-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-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-10);
|
||||
--wa-color-surface-border: var(--wa-color-base-10);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-70);
|
||||
--wa-color-text-link: var(--wa-color-neutral-text-on-surface);
|
||||
|
||||
--wa-color-selection-background: var(--wa-color-base-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: var(--wa-color-primary-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-primary-70);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-primary-20);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-primary-30);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-primary-40);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
|
||||
--wa-color-brand-text-on-spot: var(--wa-color-primary-10);
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-primary-95);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-primary-80);
|
||||
|
||||
--wa-color-success-spot: var(--wa-color-green-70);
|
||||
--wa-color-success-spot-darker: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-subtle: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-highlight: var(--wa-color-green-30);
|
||||
--wa-color-success-border-subtle: var(--wa-color-green-40);
|
||||
--wa-color-success-border-highlight: var(--wa-color-green-30);
|
||||
--wa-color-success-text-on-spot: var(--wa-color-green-10);
|
||||
--wa-color-success-text-on-fill: var(--wa-color-green-95);
|
||||
--wa-color-success-text-on-surface: var(--wa-color-green-80);
|
||||
|
||||
--wa-color-warning-spot: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-spot-darker: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-subtle: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-highlight: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-subtle: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-text-on-spot: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
|
||||
|
||||
--wa-color-danger-spot: var(--wa-color-red-70);
|
||||
--wa-color-danger-spot-darker: var(--wa-color-red-80);
|
||||
--wa-color-danger-fill-subtle: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-highlight: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-subtle: var(--wa-color-red-40);
|
||||
--wa-color-danger-border-highlight: var(--wa-color-red-30);
|
||||
--wa-color-danger-text-on-spot: var(--wa-color-red-10);
|
||||
--wa-color-danger-text-on-fill: var(--wa-color-red-95);
|
||||
--wa-color-danger-text-on-surface: var(--wa-color-red-80);
|
||||
|
||||
--wa-color-neutral-spot: var(--wa-color-base-95);
|
||||
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
|
||||
--wa-color-neutral-fill-subtle: var(--wa-color-base-30);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-40);
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-50);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
|
||||
--wa-color-neutral-text-on-spot: var(--wa-color-base-10);
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-95);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-80);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.preview-container pre {
|
||||
border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-subtle);
|
||||
}
|
||||
|
||||
.preview-container pre,
|
||||
.preview-container code {
|
||||
font-size: var(--wa-font-size-m);
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
.token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-50);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-50);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-10);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-50);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-50);
|
||||
}
|
||||
}
|
||||
|
||||
p a,
|
||||
a.highlite-link {
|
||||
position: relative;
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
background: var(--wa-color-yellow-80);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 50%;
|
||||
opacity: 0.7;
|
||||
transition: all var(--wa-transition-faster) ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
wa-card::part(image) {
|
||||
border-block-end: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
|
||||
wa-button {
|
||||
--box-shadow: none;
|
||||
--wa-shadow-offset-x-level-1: 0;
|
||||
--wa-shadow-offset-y-level-1: 0;
|
||||
}
|
||||
|
||||
wa-button:not([outline]) {
|
||||
&[variant='neutral'] {
|
||||
--background-hover: color-mix(in oklab, var(--background), transparent 20%);
|
||||
}
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color: color-mix(in oklab, var(--wa-color-base-20), transparent 50%);
|
||||
--symbol-color-active: var(--wa-color-neutral-spot);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
--border-width: 0 0 0 var(--wa-panel-border-width);
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
--padding: var(--wa-space-s) var(--wa-space-m);
|
||||
|
||||
&::part(icon) {
|
||||
--padding: var(--wa-space-m);
|
||||
}
|
||||
|
||||
&[variant='brand'] {
|
||||
--icon-color: var(--wa-color-brand-text-on-fill);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-text-on-fill);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-text-on-fill);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-text-on-fill);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-text-on-fill);
|
||||
}
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-activated: var(--wa-color-primary-70);
|
||||
--pagination-color-resting: var(--wa-color-neutral-fill-highlight);
|
||||
}
|
||||
|
||||
wa-carousel::part(scroll-container) {
|
||||
padding: var(--wa-shadow-offset-y-level-1) var(--wa-shadow-offset-x-level-1); /* make room for the box-shadow */
|
||||
}
|
||||
|
||||
wa-carousel::part(pagination-item) {
|
||||
border-radius: var(--wa-corners-base);
|
||||
}
|
||||
|
||||
wa-carousel-item {
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-level-1);
|
||||
border-radius: calc(var(--wa-corners-s) + var(--wa-panel-border-width));
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
--border-color: var(--wa-color-surface-border);
|
||||
--content-color: var(--wa-color-base-10);
|
||||
text-transform: uppercase;
|
||||
|
||||
&::part(base) {
|
||||
padding: var(--wa-space-xs) var(--wa-space-s);
|
||||
}
|
||||
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-90);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-90);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-90);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-90);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: var(--wa-color-base-90);
|
||||
}
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
--border-width: 0 0 0 var(--wa-panel-border-width);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-subtle);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-subtle);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-subtle);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-subtle);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
wa-tag::part(base) {
|
||||
padding: var(--wa-space-m);
|
||||
}
|
||||
|
||||
wa-input::part(form-control-label),
|
||||
wa-select::part(form-control-label),
|
||||
wa-radio-group::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
/* preventing shadows on all form input types */
|
||||
wa-input:not(:focus),
|
||||
wa-input:not([filled]):not([disabled]),
|
||||
wa-select:not([filled]):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-level-0);
|
||||
--border-width: 0 0 var(--wa-form-controls-border-width) var(--wa-form-controls-border-width);
|
||||
}
|
||||
|
||||
.wa-button-group__button:not(.wa-button-group__button--first) {
|
||||
margin-inline-start: calc(-1 * var(--wa-form-controls-border-width));
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--thumb-color: var(--wa-form-controls-activated-color);
|
||||
--thumb-color-checked: var(--wa-color-surface-default);
|
||||
--background: transparent;
|
||||
--background-checked: var(--wa-form-controls-activated-color);
|
||||
--border-color: var(--wa-form-controls-activated-color);
|
||||
--height: calc(1.2em * var(--wa-font-line-height-compact) - 0.125rem);
|
||||
}
|
||||
|
||||
wa-switch::part(control),
|
||||
wa-switch::part(thumb) {
|
||||
border-radius: var(--wa-corners-base);
|
||||
--wa-font-line-height-compact: 5px;
|
||||
}
|
||||
|
||||
wa-switch::part(thumb) {
|
||||
--border-width: 0;
|
||||
box-shadow: inset 0 0 0 3px var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-switch[checked]::part(thumb) {
|
||||
box-shadow: inset 0 0 0 3px var(--background-checked);
|
||||
}
|
||||
|
||||
.overlap {
|
||||
background: var(--wa-color-surface-lowered) url('/assets/images/kitchen-sink/brutalist/hero.png') 50% 3% no-repeat;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 42rem;
|
||||
padding-top: 8rem;
|
||||
padding-right: 50%;
|
||||
--wa-font-weight-heading: var(--wa-font-weight-normal);
|
||||
}
|
||||
|
||||
.hero wa-button {
|
||||
--background: var(--wa-color-neutral-spot);
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
/* imitating the large button styles */
|
||||
.hero wa-button::part(base) {
|
||||
height: var(--wa-form-controls-height-l);
|
||||
line-height: calc(var(--wa-form-controls-height-l) - var(--border-width) * 2);
|
||||
padding-inline-start: var(--wa-space-m);
|
||||
padding-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.hero wa-button::part(label) {
|
||||
padding: 0 var(--wa-space-l);
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -20rem;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
--wa-shadow-offset-x-level-1: 0;
|
||||
--wa-shadow-offset-y-level-1: 0;
|
||||
border-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-card wa-button::part(base) {
|
||||
height: var(--wa-form-controls-height-m);
|
||||
line-height: calc(var(--wa-form-controls-height-m) - var(--border-width) * 2);
|
||||
}
|
||||
|
||||
.product-card wa-button::part(prefix) {
|
||||
padding-inline-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button::part(suffix) {
|
||||
padding-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* imitating the rounded avatar */
|
||||
.blog wa-avatar::part(base) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.blog wa-avatar::part(image) {
|
||||
border: var(--wa-border-width-s) solid var(--wa-color-brand-spot);
|
||||
border-radius: var(--wa-corners-circle);
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
box-shadow: var(--wa-shadow-level-1);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
margin-block-end: var(--wa-shadow-offset-y-level-1);
|
||||
}
|
||||
|
||||
.post-meta .categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-spot);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons {
|
||||
--wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-30), white 40%);
|
||||
}
|
||||
|
||||
.message-composer [slot='header'] wa-icon-button::part(base) {
|
||||
color: var(--wa-color-neutral-text-on-spot);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base) {
|
||||
block-size: var(--wa-form-controls-height-s);
|
||||
inline-size: var(--wa-form-controls-height-s);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-highlight);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(body) {
|
||||
background-color: var(--wa-color-brand-spot);
|
||||
color: var(--wa-color-brand-text-on-spot);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(base__arrow) {
|
||||
--arrow-color: var(--wa-color-brand-spot);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
background-color: var(--wa-color-neutral-spot);
|
||||
color: var(--wa-color-neutral-text-on-spot);
|
||||
}
|
||||
|
||||
.support-table th wa-checkbox {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-text-on-spot);
|
||||
--border-color-checked: var(--wa-color-neutral-text-on-spot);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form .square-frame {
|
||||
box-shadow: var(--wa-shadow-level-1);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-theme-brutalist-dark {
|
||||
& p a:before {
|
||||
background: var(--wa-color-yellow-40);
|
||||
}
|
||||
|
||||
& wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
|
||||
--symbol-color-active: var(--wa-color-base-80);
|
||||
}
|
||||
|
||||
& wa-alert {
|
||||
&[variant='brand'] {
|
||||
--icon-color: var(--wa-color-brand-text-on-surface);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-text-on-surface);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-text-on-surface);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-text-on-surface);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-text-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
& .preview-container pre,
|
||||
& .preview-container code {
|
||||
background-color: var(--wa-color-base-20);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
& .token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-80);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@container preview (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* _utility.css */
|
||||
@@ -14,65 +14,90 @@
|
||||
* 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-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-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-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-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-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-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;
|
||||
--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
|
||||
@@ -94,12 +119,12 @@
|
||||
|
||||
/* 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-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-blue-60);
|
||||
--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);
|
||||
@@ -129,15 +154,15 @@
|
||||
* 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-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-blue-40);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-blue-50);
|
||||
--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);
|
||||
@@ -198,7 +223,7 @@
|
||||
--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).
|
||||
/* 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 */
|
||||
@@ -358,10 +383,10 @@
|
||||
--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-background: var(--wa-color-primary-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-70);
|
||||
--wa-color-focus: var(--wa-color-primary-70);
|
||||
|
||||
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
@@ -373,15 +398,15 @@
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--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-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-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-blue-70);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-blue-60);
|
||||
--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);
|
||||
@@ -424,4 +449,58 @@
|
||||
--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 */
|
||||
|
||||
122
src/themes/color_anodized.css
Normal file
122
src/themes/color_anodized.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #ffecf9;
|
||||
--wa-color-rose-90: #ffdcf3;
|
||||
--wa-color-rose-80: #ffb2db;
|
||||
--wa-color-rose-70: #ea95bf;
|
||||
--wa-color-rose-60: #ca7da3;
|
||||
--wa-color-rose-50: #a36282;
|
||||
--wa-color-rose-40: #7c4963;
|
||||
--wa-color-rose-30: #63384e;
|
||||
--wa-color-rose-20: #492839;
|
||||
--wa-color-rose-10: #2d1722;
|
||||
--wa-color-rose-05: #1d0d15;
|
||||
|
||||
--wa-color-red-95: #fbeeeb;
|
||||
--wa-color-red-90: #f8e0d9;
|
||||
--wa-color-red-80: #efbdb1;
|
||||
--wa-color-red-70: #e39f8d;
|
||||
--wa-color-red-60: #d1806b;
|
||||
--wa-color-red-50: #b35e49;
|
||||
--wa-color-red-40: #8e4330;
|
||||
--wa-color-red-30: #733223;
|
||||
--wa-color-red-20: #562317;
|
||||
--wa-color-red-10: #36130a;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #fff2b8;
|
||||
--wa-color-yellow-90: #ffe578;
|
||||
--wa-color-yellow-80: #eac46c;
|
||||
--wa-color-yellow-70: #d5a766;
|
||||
--wa-color-yellow-60: #bd8a5e;
|
||||
--wa-color-yellow-50: #9d6a4f;
|
||||
--wa-color-yellow-40: #794f3c;
|
||||
--wa-color-yellow-30: #603d2f;
|
||||
--wa-color-yellow-20: #482b21;
|
||||
--wa-color-yellow-10: #2c1912;
|
||||
--wa-color-yellow-05: #1d0e0a;
|
||||
|
||||
--wa-color-lime-95: #defe88;
|
||||
--wa-color-lime-90: #d1f376;
|
||||
--wa-color-lime-80: #b0d65f;
|
||||
--wa-color-lime-70: #95bc54;
|
||||
--wa-color-lime-60: #7ba04a;
|
||||
--wa-color-lime-50: #5e803c;
|
||||
--wa-color-lime-40: #45612c;
|
||||
--wa-color-lime-30: #354c21;
|
||||
--wa-color-lime-20: #253716;
|
||||
--wa-color-lime-10: #15210b;
|
||||
--wa-color-lime-05: #0b1405;
|
||||
|
||||
--wa-color-green-95: #dcf8ea;
|
||||
--wa-color-green-90: #bcf1d8;
|
||||
--wa-color-green-80: #6dddad;
|
||||
--wa-color-green-70: #33c685;
|
||||
--wa-color-green-60: #00aa66;
|
||||
--wa-color-green-50: #008754;
|
||||
--wa-color-green-40: #006646;
|
||||
--wa-color-green-30: #00503b;
|
||||
--wa-color-green-20: #003a2d;
|
||||
--wa-color-green-10: #00231b;
|
||||
--wa-color-green-05: #001610;
|
||||
|
||||
--wa-color-teal-95: #cbfaf9;
|
||||
--wa-color-teal-90: #9ff4f3;
|
||||
--wa-color-teal-80: #1adfdb;
|
||||
--wa-color-teal-70: #00c3be;
|
||||
--wa-color-teal-60: #1aa6a0;
|
||||
--wa-color-teal-50: #15837e;
|
||||
--wa-color-teal-40: #10635e;
|
||||
--wa-color-teal-30: #0c4e4a;
|
||||
--wa-color-teal-20: #083936;
|
||||
--wa-color-teal-10: #04221f;
|
||||
--wa-color-teal-05: #021513;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e2e5e8;
|
||||
--wa-color-gray-80: #c2c9d0;
|
||||
--wa-color-gray-70: #a6b0ba;
|
||||
--wa-color-gray-60: #8897a3;
|
||||
--wa-color-gray-50: #657888;
|
||||
--wa-color-gray-40: #435c6f;
|
||||
--wa-color-gray-30: #2d485d;
|
||||
--wa-color-gray-20: #18354a;
|
||||
--wa-color-gray-10: #012034;
|
||||
--wa-color-gray-05: #001421;
|
||||
|
||||
--wa-color-blue-95: #ecf3ff;
|
||||
--wa-color-blue-90: #d9e7ff;
|
||||
--wa-color-blue-80: #abcaff;
|
||||
--wa-color-blue-70: #83b0fe;
|
||||
--wa-color-blue-60: #5593fe;
|
||||
--wa-color-blue-50: #3d74d2;
|
||||
--wa-color-blue-40: #2e589f;
|
||||
--wa-color-blue-30: #24457c;
|
||||
--wa-color-blue-20: #1b325b;
|
||||
--wa-color-blue-10: #101d35;
|
||||
--wa-color-blue-05: #0a1222;
|
||||
|
||||
--wa-color-indigo-95: #f5efff;
|
||||
--wa-color-indigo-90: #ede0ff;
|
||||
--wa-color-indigo-80: #d7bdff;
|
||||
--wa-color-indigo-70: #bf9efe;
|
||||
--wa-color-indigo-60: #a280fa;
|
||||
--wa-color-indigo-50: #7f5bec;
|
||||
--wa-color-indigo-40: #603dc8;
|
||||
--wa-color-indigo-30: #4c2ba5;
|
||||
--wa-color-indigo-20: #381d7f;
|
||||
--wa-color-indigo-10: #210e53;
|
||||
--wa-color-indigo-05: #150739;
|
||||
|
||||
--wa-color-violet-95: #fbedfd;
|
||||
--wa-color-violet-90: #f7defa;
|
||||
--wa-color-violet-80: #eeb6f5;
|
||||
--wa-color-violet-70: #e590f0;
|
||||
--wa-color-violet-60: #d56ae2;
|
||||
--wa-color-violet-50: #b547be;
|
||||
--wa-color-violet-40: #952598;
|
||||
--wa-color-violet-30: #751d79;
|
||||
--wa-color-violet-20: #561658;
|
||||
--wa-color-violet-10: #340d36;
|
||||
--wa-color-violet-05: #210822;
|
||||
}
|
||||
122
src/themes/color_bright.css
Normal file
122
src/themes/color_bright.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #fdeef4;
|
||||
--wa-color-rose-90: #fddde9;
|
||||
--wa-color-rose-80: #fbb6cf;
|
||||
--wa-color-rose-70: #f88fb4;
|
||||
--wa-color-rose-60: #ea6997;
|
||||
--wa-color-rose-50: #ca4171;
|
||||
--wa-color-rose-40: #a7204f;
|
||||
--wa-color-rose-30: #85183e;
|
||||
--wa-color-rose-20: #60112d;
|
||||
--wa-color-rose-10: #3b0b1c;
|
||||
--wa-color-rose-05: #240611;
|
||||
|
||||
--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: #fff3bf;
|
||||
--wa-color-yellow-90: #f8e695;
|
||||
--wa-color-yellow-80: #eec637;
|
||||
--wa-color-yellow-70: #d8a815;
|
||||
--wa-color-yellow-60: #ce8500;
|
||||
--wa-color-yellow-50: #aa6300;
|
||||
--wa-color-yellow-40: #824c00;
|
||||
--wa-color-yellow-30: #663b00;
|
||||
--wa-color-yellow-20: #492b00;
|
||||
--wa-color-yellow-10: #2c1a00;
|
||||
--wa-color-yellow-05: #1b0e00;
|
||||
|
||||
--wa-color-lime-95: #e8f9c7;
|
||||
--wa-color-lime-90: #d2f19c;
|
||||
--wa-color-lime-80: #9edc41;
|
||||
--wa-color-lime-70: #7dc11d;
|
||||
--wa-color-lime-60: #68a514;
|
||||
--wa-color-lime-50: #50810b;
|
||||
--wa-color-lime-40: #3a630c;
|
||||
--wa-color-lime-30: #2b4e0b;
|
||||
--wa-color-lime-20: #1e3808;
|
||||
--wa-color-lime-10: #122206;
|
||||
--wa-color-lime-05: #081404;
|
||||
|
||||
--wa-color-green-95: #dbfadf;
|
||||
--wa-color-green-90: #bbf3c3;
|
||||
--wa-color-green-80: #79df8a;
|
||||
--wa-color-green-70: #4dc661;
|
||||
--wa-color-green-60: #35aa4a;
|
||||
--wa-color-green-50: #298539;
|
||||
--wa-color-green-40: #20652d;
|
||||
--wa-color-green-30: #165025;
|
||||
--wa-color-green-20: #0d391c;
|
||||
--wa-color-green-10: #062312;
|
||||
--wa-color-green-05: #03140c;
|
||||
|
||||
--wa-color-teal-95: #cafae6;
|
||||
--wa-color-teal-90: #aaf3d7;
|
||||
--wa-color-teal-80: #46e2b7;
|
||||
--wa-color-teal-70: #00cba0;
|
||||
--wa-color-teal-60: #00b28f;
|
||||
--wa-color-teal-50: #008f76;
|
||||
--wa-color-teal-40: #00705e;
|
||||
--wa-color-teal-30: #005c4d;
|
||||
--wa-color-teal-20: #00483d;
|
||||
--wa-color-teal-10: #00312b;
|
||||
--wa-color-teal-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-indigo-95: #f4f0fe;
|
||||
--wa-color-indigo-90: #e9e2fe;
|
||||
--wa-color-indigo-80: #d0c1fc;
|
||||
--wa-color-indigo-70: #b8a2fa;
|
||||
--wa-color-indigo-60: #9f81f9;
|
||||
--wa-color-indigo-50: #7d59ea;
|
||||
--wa-color-indigo-40: #5f3dc4;
|
||||
--wa-color-indigo-30: #4b309b;
|
||||
--wa-color-indigo-20: #36236f;
|
||||
--wa-color-indigo-10: #211543;
|
||||
--wa-color-indigo-05: #130c27;
|
||||
|
||||
--wa-color-violet-95: #fbeefe;
|
||||
--wa-color-violet-90: #f6defc;
|
||||
--wa-color-violet-80: #ecb8f8;
|
||||
--wa-color-violet-70: #e191f4;
|
||||
--wa-color-violet-60: #cd70e3;
|
||||
--wa-color-violet-50: #a84ebe;
|
||||
--wa-color-violet-40: #892f9f;
|
||||
--wa-color-violet-30: #6c257e;
|
||||
--wa-color-violet-20: #4e1b5a;
|
||||
--wa-color-violet-10: #2f1037;
|
||||
--wa-color-violet-05: #1c0920;
|
||||
|
||||
--wa-color-gray-95: #f1f2f5;
|
||||
--wa-color-gray-90: #e3e6eb;
|
||||
--wa-color-gray-80: #c5cad4;
|
||||
--wa-color-gray-70: #a8afbf;
|
||||
--wa-color-gray-60: #8b95aa;
|
||||
--wa-color-gray-50: #677490;
|
||||
--wa-color-gray-40: #4a5877;
|
||||
--wa-color-gray-30: #3a455d;
|
||||
--wa-color-gray-20: #2a3142;
|
||||
--wa-color-gray-10: #191e28;
|
||||
--wa-color-gray-05: #0e1117;
|
||||
}
|
||||
122
src/themes/color_classic.css
Normal file
122
src/themes/color_classic.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #fdeff0;
|
||||
--wa-color-rose-90: #fadfe1;
|
||||
--wa-color-rose-80: #ecbec4;
|
||||
--wa-color-rose-70: #eb98a2;
|
||||
--wa-color-rose-60: #ed6b7e;
|
||||
--wa-color-rose-50: #d53752;
|
||||
--wa-color-rose-40: #ae1638;
|
||||
--wa-color-rose-30: #8b0d2c;
|
||||
--wa-color-rose-20: #620e30;
|
||||
--wa-color-rose-10: #3d0919;
|
||||
--wa-color-rose-05: #29030d;
|
||||
|
||||
--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-lime-95: #e4fbb9;
|
||||
--wa-color-lime-90: #c9f47f;
|
||||
--wa-color-lime-80: #9cdc33;
|
||||
--wa-color-lime-70: #7dc115;
|
||||
--wa-color-lime-60: #6ba512;
|
||||
--wa-color-lime-50: #50810a;
|
||||
--wa-color-lime-40: #3d6208;
|
||||
--wa-color-lime-30: #304d09;
|
||||
--wa-color-lime-20: #23370a;
|
||||
--wa-color-lime-10: #152108;
|
||||
--wa-color-lime-05: #0b1302;
|
||||
|
||||
--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-teal-95: #d0fbf3;
|
||||
--wa-color-teal-90: #a9f4e8;
|
||||
--wa-color-teal-80: #5bdecd;
|
||||
--wa-color-teal-70: #36c2b3;
|
||||
--wa-color-teal-60: #12a797;
|
||||
--wa-color-teal-50: #0b8278;
|
||||
--wa-color-teal-40: #09635b;
|
||||
--wa-color-teal-30: #0a4e49;
|
||||
--wa-color-teal-20: #0a3835;
|
||||
--wa-color-teal-10: #082120;
|
||||
--wa-color-teal-05: #021413;
|
||||
|
||||
--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-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dee5fd;
|
||||
--wa-color-indigo-80: #bec8f2;
|
||||
--wa-color-indigo-70: #9dabf0;
|
||||
--wa-color-indigo-60: #818cf7;
|
||||
--wa-color-indigo-50: #6063eb;
|
||||
--wa-color-indigo-40: #4941d3;
|
||||
--wa-color-indigo-30: #3930ad;
|
||||
--wa-color-indigo-20: #29247a;
|
||||
--wa-color-indigo-10: #191843;
|
||||
--wa-color-indigo-05: #0f0e26;
|
||||
|
||||
--wa-color-violet-95: #f7efff;
|
||||
--wa-color-violet-90: #efe0ff;
|
||||
--wa-color-violet-80: #dcbdfe;
|
||||
--wa-color-violet-70: #cb9afd;
|
||||
--wa-color-violet-60: #b976f9;
|
||||
--wa-color-violet-50: #9d46ec;
|
||||
--wa-color-violet-40: #7d22cc;
|
||||
--wa-color-violet-30: #631f9c;
|
||||
--wa-color-violet-20: #48176e;
|
||||
--wa-color-violet-10: #2e054e;
|
||||
--wa-color-violet-05: #1d0331;
|
||||
|
||||
--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;
|
||||
}
|
||||
122
src/themes/color_elegant.css
Normal file
122
src/themes/color_elegant.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #faeff6;
|
||||
--wa-color-rose-90: #f5e0ed;
|
||||
--wa-color-rose-80: #eabcd8;
|
||||
--wa-color-rose-70: #e09ac3;
|
||||
--wa-color-rose-60: #d476ae;
|
||||
--wa-color-rose-50: #c54490;
|
||||
--wa-color-rose-40: #ad0066;
|
||||
--wa-color-rose-30: #8a0051;
|
||||
--wa-color-rose-20: #67003d;
|
||||
--wa-color-rose-10: #410026;
|
||||
--wa-color-rose-05: #2a0019;
|
||||
|
||||
--wa-color-red-95: #fdeeef;
|
||||
--wa-color-red-90: #fcdfe0;
|
||||
--wa-color-red-80: #f8b9bc;
|
||||
--wa-color-red-70: #f0969c;
|
||||
--wa-color-red-60: #e3727d;
|
||||
--wa-color-red-50: #cc465a;
|
||||
--wa-color-red-40: #ac1d3d;
|
||||
--wa-color-red-30: #8f012c;
|
||||
--wa-color-red-20: #6b001c;
|
||||
--wa-color-red-10: #44000d;
|
||||
--wa-color-red-05: #2e0006;
|
||||
|
||||
--wa-color-yellow-95: #f5f2e5;
|
||||
--wa-color-yellow-90: #ece6cc;
|
||||
--wa-color-yellow-80: #dac992;
|
||||
--wa-color-yellow-70: #c9ac5c;
|
||||
--wa-color-yellow-60: #b98f27;
|
||||
--wa-color-yellow-50: #9b6d09;
|
||||
--wa-color-yellow-40: #785007;
|
||||
--wa-color-yellow-30: #613e06;
|
||||
--wa-color-yellow-20: #492c05;
|
||||
--wa-color-yellow-10: #2b1a02;
|
||||
--wa-color-yellow-05: #191008;
|
||||
|
||||
--wa-color-lime-95: #f1f3ec;
|
||||
--wa-color-lime-90: #e3e7da;
|
||||
--wa-color-lime-80: #c4cdb1;
|
||||
--wa-color-lime-70: #a6b48b;
|
||||
--wa-color-lime-60: #899c65;
|
||||
--wa-color-lime-50: #667e36;
|
||||
--wa-color-lime-40: #476017;
|
||||
--wa-color-lime-30: #384c12;
|
||||
--wa-color-lime-20: #29370d;
|
||||
--wa-color-lime-10: #182008;
|
||||
--wa-color-lime-05: #0e1304;
|
||||
|
||||
--wa-color-green-95: #ecf4f1;
|
||||
--wa-color-green-90: #dae9e3;
|
||||
--wa-color-green-80: #b0d1c4;
|
||||
--wa-color-green-70: #88b9a6;
|
||||
--wa-color-green-60: #5fa288;
|
||||
--wa-color-green-50: #2d8462;
|
||||
--wa-color-green-40: #00663e;
|
||||
--wa-color-green-30: #005031;
|
||||
--wa-color-green-20: #003b24;
|
||||
--wa-color-green-10: #002316;
|
||||
--wa-color-green-05: #00160d;
|
||||
|
||||
--wa-color-teal-95: #ebf4f4;
|
||||
--wa-color-teal-90: #d9e9e9;
|
||||
--wa-color-teal-80: #add0d1;
|
||||
--wa-color-teal-70: #84b8ba;
|
||||
--wa-color-teal-60: #5aa0a3;
|
||||
--wa-color-teal-50: #268285;
|
||||
--wa-color-teal-40: #006366;
|
||||
--wa-color-teal-30: #004e51;
|
||||
--wa-color-teal-20: #00393b;
|
||||
--wa-color-teal-10: #002223;
|
||||
--wa-color-teal-05: #001415;
|
||||
|
||||
--wa-color-blue-95: #ebf3fa;
|
||||
--wa-color-blue-90: #d8e8f5;
|
||||
--wa-color-blue-80: #accee9;
|
||||
--wa-color-blue-70: #81b5dd;
|
||||
--wa-color-blue-60: #559bd2;
|
||||
--wa-color-blue-50: #1c7ac3;
|
||||
--wa-color-blue-40: #005aa0;
|
||||
--wa-color-blue-30: #00477e;
|
||||
--wa-color-blue-20: #00345d;
|
||||
--wa-color-blue-10: #001f37;
|
||||
--wa-color-blue-05: #001221;
|
||||
|
||||
--wa-color-indigo-95: #f1f1fa;
|
||||
--wa-color-indigo-90: #e4e4f6;
|
||||
--wa-color-indigo-80: #c6c7eb;
|
||||
--wa-color-indigo-70: #a9aae1;
|
||||
--wa-color-indigo-60: #8d8ed7;
|
||||
--wa-color-indigo-50: #696ccb;
|
||||
--wa-color-indigo-40: #4649bf;
|
||||
--wa-color-indigo-30: #36389c;
|
||||
--wa-color-indigo-20: #272972;
|
||||
--wa-color-indigo-10: #171844;
|
||||
--wa-color-indigo-05: #0d0e27;
|
||||
|
||||
--wa-color-violet-95: #f6f0f9;
|
||||
--wa-color-violet-90: #eee2f2;
|
||||
--wa-color-violet-80: #dbc0e4;
|
||||
--wa-color-violet-70: #c9a1d6;
|
||||
--wa-color-violet-60: #b781c9;
|
||||
--wa-color-violet-50: #a059b7;
|
||||
--wa-color-violet-40: #882ea5;
|
||||
--wa-color-violet-30: #6d2086;
|
||||
--wa-color-violet-20: #501862;
|
||||
--wa-color-violet-10: #300e3b;
|
||||
--wa-color-violet-05: #1c0823;
|
||||
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e6e5e8;
|
||||
--wa-color-gray-80: #cbc8ce;
|
||||
--wa-color-gray-70: #b1adb6;
|
||||
--wa-color-gray-60: #98939f;
|
||||
--wa-color-gray-50: #7a7382;
|
||||
--wa-color-gray-40: #5d5568;
|
||||
--wa-color-gray-30: #494352;
|
||||
--wa-color-gray-20: #35313c;
|
||||
--wa-color-gray-10: #1f1c23;
|
||||
--wa-color-gray-05: #131115;
|
||||
}
|
||||
122
src/themes/color_natural.css
Normal file
122
src/themes/color_natural.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #f9f0f2;
|
||||
--wa-color-rose-90: #f3e2e7;
|
||||
--wa-color-rose-80: #e4bfca;
|
||||
--wa-color-rose-70: #d5a1b1;
|
||||
--wa-color-rose-60: #c28397;
|
||||
--wa-color-rose-50: #a76179;
|
||||
--wa-color-rose-40: #85455b;
|
||||
--wa-color-rose-30: #6b3448;
|
||||
--wa-color-rose-20: #512435;
|
||||
--wa-color-rose-10: #32131f;
|
||||
--wa-color-rose-05: #210b13;
|
||||
|
||||
--wa-color-red-95: #f9f0ee;
|
||||
--wa-color-red-90: #f5e2dd;
|
||||
--wa-color-red-80: #e8bfb5;
|
||||
--wa-color-red-70: #dba294;
|
||||
--wa-color-red-60: #c98373;
|
||||
--wa-color-red-50: #ae6150;
|
||||
--wa-color-red-40: #8c4434;
|
||||
--wa-color-red-30: #713225;
|
||||
--wa-color-red-20: #562318;
|
||||
--wa-color-red-10: #36130b;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #f5f0e8;
|
||||
--wa-color-yellow-90: #ede4d5;
|
||||
--wa-color-yellow-80: #dac6a4;
|
||||
--wa-color-yellow-70: #c7ab7b;
|
||||
--wa-color-yellow-60: #b29054;
|
||||
--wa-color-yellow-50: #94702b;
|
||||
--wa-color-yellow-40: #735310;
|
||||
--wa-color-yellow-30: #5c4003;
|
||||
--wa-color-yellow-20: #442f00;
|
||||
--wa-color-yellow-10: #2a1b00;
|
||||
--wa-color-yellow-05: #1b1000;
|
||||
|
||||
--wa-color-lime-95: #f0f2eb;
|
||||
--wa-color-lime-90: #e3e8da;
|
||||
--wa-color-lime-80: #c2ccaf;
|
||||
--wa-color-lime-70: #a6b48b;
|
||||
--wa-color-lime-60: #8a9b68;
|
||||
--wa-color-lime-50: #6b7c45;
|
||||
--wa-color-lime-40: #505e2d;
|
||||
--wa-color-lime-30: #3e4a20;
|
||||
--wa-color-lime-20: #2c3614;
|
||||
--wa-color-lime-10: #192008;
|
||||
--wa-color-lime-05: #0f1404;
|
||||
|
||||
--wa-color-green-95: #edf2ee;
|
||||
--wa-color-green-90: #dde8df;
|
||||
--wa-color-green-80: #b8cebc;
|
||||
--wa-color-green-70: #98b79e;
|
||||
--wa-color-green-60: #779e7f;
|
||||
--wa-color-green-50: #53805d;
|
||||
--wa-color-green-40: #366241;
|
||||
--wa-color-green-30: #264d31;
|
||||
--wa-color-green-20: #193922;
|
||||
--wa-color-green-10: #0c2212;
|
||||
--wa-color-green-05: #051509;
|
||||
|
||||
--wa-color-teal-95: #eff3f4;
|
||||
--wa-color-teal-90: #dee7e9;
|
||||
--wa-color-teal-80: #b7cccf;
|
||||
--wa-color-teal-70: #96b4b9;
|
||||
--wa-color-teal-60: #759ba1;
|
||||
--wa-color-teal-50: #4d7d84;
|
||||
--wa-color-teal-40: #2b6067;
|
||||
--wa-color-teal-30: #194c53;
|
||||
--wa-color-teal-20: #0a383e;
|
||||
--wa-color-teal-10: #022125;
|
||||
--wa-color-teal-05: #011518;
|
||||
|
||||
--wa-color-blue-95: #eef1f5;
|
||||
--wa-color-blue-90: #e1e6ef;
|
||||
--wa-color-blue-80: #bdc9dc;
|
||||
--wa-color-blue-70: #9fb0ca;
|
||||
--wa-color-blue-60: #8196b8;
|
||||
--wa-color-blue-50: #5f779e;
|
||||
--wa-color-blue-40: #415981;
|
||||
--wa-color-blue-30: #2f466a;
|
||||
--wa-color-blue-20: #203351;
|
||||
--wa-color-blue-10: #101e34;
|
||||
--wa-color-blue-05: #081223;
|
||||
|
||||
--wa-color-indigo-95: #f2f2f7;
|
||||
--wa-color-indigo-90: #e6e5f1;
|
||||
--wa-color-indigo-80: #c7c6df;
|
||||
--wa-color-indigo-70: #aeabcf;
|
||||
--wa-color-indigo-60: #9490bd;
|
||||
--wa-color-indigo-50: #7670a3;
|
||||
--wa-color-indigo-40: #595383;
|
||||
--wa-color-indigo-30: #46406a;
|
||||
--wa-color-indigo-20: #332e50;
|
||||
--wa-color-indigo-10: #1e1a32;
|
||||
--wa-color-indigo-05: #121021;
|
||||
|
||||
--wa-color-violet-95: #f4f1f6;
|
||||
--wa-color-violet-90: #eae4ef;
|
||||
--wa-color-violet-80: #d2c4dc;
|
||||
--wa-color-violet-70: #bca8ca;
|
||||
--wa-color-violet-60: #a48cb6;
|
||||
--wa-color-violet-50: #876b9a;
|
||||
--wa-color-violet-40: #694e7b;
|
||||
--wa-color-violet-30: #543c64;
|
||||
--wa-color-violet-20: #3e2b4b;
|
||||
--wa-color-violet-10: #26182f;
|
||||
--wa-color-violet-05: #180e1f;
|
||||
|
||||
--wa-color-gray-95: #f1f1f0;
|
||||
--wa-color-gray-90: #e7e6e4;
|
||||
--wa-color-gray-80: #cac8c3;
|
||||
--wa-color-gray-70: #b2afa8;
|
||||
--wa-color-gray-60: #98958c;
|
||||
--wa-color-gray-50: #7a766a;
|
||||
--wa-color-gray-40: #5c594f;
|
||||
--wa-color-gray-30: #49453e;
|
||||
--wa-color-gray-20: #35322d;
|
||||
--wa-color-gray-10: #1f1d1a;
|
||||
--wa-color-gray-05: #131210;
|
||||
}
|
||||
122
src/themes/color_rudimentary.css
Normal file
122
src/themes/color_rudimentary.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #ffecf8;
|
||||
--wa-color-rose-90: #ffdcf1;
|
||||
--wa-color-rose-80: #ffb2de;
|
||||
--wa-color-rose-70: #fe88c4;
|
||||
--wa-color-rose-60: #fa57a7;
|
||||
--wa-color-rose-50: #e30084;
|
||||
--wa-color-rose-40: #ae0068;
|
||||
--wa-color-rose-30: #890057;
|
||||
--wa-color-rose-20: #660043;
|
||||
--wa-color-rose-10: #400029;
|
||||
--wa-color-rose-05: #2c001b;
|
||||
|
||||
--wa-color-red-95: #ffeeee;
|
||||
--wa-color-red-90: #ffdddd;
|
||||
--wa-color-red-80: #ffb6b8;
|
||||
--wa-color-red-70: #fb9191;
|
||||
--wa-color-red-60: #f16b5e;
|
||||
--wa-color-red-50: #da3c06;
|
||||
--wa-color-red-40: #a62c00;
|
||||
--wa-color-red-30: #812500;
|
||||
--wa-color-red-20: #601a00;
|
||||
--wa-color-red-10: #3d0d00;
|
||||
--wa-color-red-05: #290600;
|
||||
|
||||
--wa-color-yellow-95: #fff497;
|
||||
--wa-color-yellow-90: #ffe571;
|
||||
--wa-color-yellow-80: #ffbd31;
|
||||
--wa-color-yellow-70: #f09d27;
|
||||
--wa-color-yellow-60: #d67f31;
|
||||
--wa-color-yellow-50: #b1612d;
|
||||
--wa-color-yellow-40: #8b4527;
|
||||
--wa-color-yellow-30: #703422;
|
||||
--wa-color-yellow-20: #53251c;
|
||||
--wa-color-yellow-10: #311613;
|
||||
--wa-color-yellow-05: #1f0d0b;
|
||||
|
||||
--wa-color-lime-95: #daff92;
|
||||
--wa-color-lime-90: #c1f759;
|
||||
--wa-color-lime-80: #9bdc1a;
|
||||
--wa-color-lime-70: #7ec200;
|
||||
--wa-color-lime-60: #60a600;
|
||||
--wa-color-lime-50: #3e8600;
|
||||
--wa-color-lime-40: #216600;
|
||||
--wa-color-lime-30: #135100;
|
||||
--wa-color-lime-20: #083b00;
|
||||
--wa-color-lime-10: #022400;
|
||||
--wa-color-lime-05: #011600;
|
||||
|
||||
--wa-color-green-95: #dafadc;
|
||||
--wa-color-green-90: #b9f4bc;
|
||||
--wa-color-green-80: #64e177;
|
||||
--wa-color-green-70: #2ec859;
|
||||
--wa-color-green-60: #00ac4a;
|
||||
--wa-color-green-50: #008840;
|
||||
--wa-color-green-40: #006734;
|
||||
--wa-color-green-30: #005128;
|
||||
--wa-color-green-20: #003b1c;
|
||||
--wa-color-green-10: #00230e;
|
||||
--wa-color-green-05: #001607;
|
||||
|
||||
--wa-color-teal-95: #d1f9f1;
|
||||
--wa-color-teal-90: #a9f4e6;
|
||||
--wa-color-teal-80: #56ddcd;
|
||||
--wa-color-teal-70: #29c2ba;
|
||||
--wa-color-teal-60: #11a5a8;
|
||||
--wa-color-teal-50: #06828e;
|
||||
--wa-color-teal-40: #006271;
|
||||
--wa-color-teal-30: #004d5a;
|
||||
--wa-color-teal-20: #003843;
|
||||
--wa-color-teal-10: #002129;
|
||||
--wa-color-teal-05: #00151b;
|
||||
|
||||
--wa-color-blue-95: #e1f4ff;
|
||||
--wa-color-blue-90: #caebff;
|
||||
--wa-color-blue-80: #87d1ff;
|
||||
--wa-color-blue-70: #4cb8ff;
|
||||
--wa-color-blue-60: #0099ff;
|
||||
--wa-color-blue-50: #0072ed;
|
||||
--wa-color-blue-40: #0053be;
|
||||
--wa-color-blue-30: #00409b;
|
||||
--wa-color-blue-20: #002e76;
|
||||
--wa-color-blue-10: #001a4e;
|
||||
--wa-color-blue-05: #000f36;
|
||||
|
||||
--wa-color-indigo-95: #f1efff;
|
||||
--wa-color-indigo-90: #e7e3ff;
|
||||
--wa-color-indigo-80: #cbc1ff;
|
||||
--wa-color-indigo-70: #b3a3ff;
|
||||
--wa-color-indigo-60: #9b81ff;
|
||||
--wa-color-indigo-50: #7f56f9;
|
||||
--wa-color-indigo-40: #6427e7;
|
||||
--wa-color-indigo-30: #5102ca;
|
||||
--wa-color-indigo-20: #3a009b;
|
||||
--wa-color-indigo-10: #220064;
|
||||
--wa-color-indigo-05: #160046;
|
||||
|
||||
--wa-color-violet-95: #f8edfd;
|
||||
--wa-color-violet-90: #f2e0fc;
|
||||
--wa-color-violet-80: #e3baf6;
|
||||
--wa-color-violet-70: #d498f1;
|
||||
--wa-color-violet-60: #c76ff2;
|
||||
--wa-color-violet-50: #ac44dc;
|
||||
--wa-color-violet-40: #862dad;
|
||||
--wa-color-violet-30: #6b218a;
|
||||
--wa-color-violet-20: #4f1568;
|
||||
--wa-color-violet-10: #310a42;
|
||||
--wa-color-violet-05: #20052d;
|
||||
|
||||
--wa-color-gray-95: #f2f2f2;
|
||||
--wa-color-gray-90: #e6e6e6;
|
||||
--wa-color-gray-80: #c9c9c9;
|
||||
--wa-color-gray-70: #afafaf;
|
||||
--wa-color-gray-60: #959595;
|
||||
--wa-color-gray-50: #747474;
|
||||
--wa-color-gray-40: #585858;
|
||||
--wa-color-gray-30: #454545;
|
||||
--wa-color-gray-20: #313131;
|
||||
--wa-color-gray-10: #1d1d1d;
|
||||
--wa-color-gray-05: #131313;
|
||||
}
|
||||
122
src/themes/color_standard.css
Normal file
122
src/themes/color_standard.css
Normal file
@@ -0,0 +1,122 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #fdeef5;
|
||||
--wa-color-rose-90: #fbdeeb;
|
||||
--wa-color-rose-80: #f7b8d3;
|
||||
--wa-color-rose-70: #f391b9;
|
||||
--wa-color-rose-60: #ee669b;
|
||||
--wa-color-rose-50: #de1d6a;
|
||||
--wa-color-rose-40: #ab174e;
|
||||
--wa-color-rose-30: #88123b;
|
||||
--wa-color-rose-20: #630d29;
|
||||
--wa-color-rose-10: #3e0817;
|
||||
--wa-color-rose-05: #26050c;
|
||||
|
||||
--wa-color-red-95: #fdeef3;
|
||||
--wa-color-red-90: #fcdee7;
|
||||
--wa-color-red-80: #f8b8c8;
|
||||
--wa-color-red-70: #f492a8;
|
||||
--wa-color-red-60: #ef6982;
|
||||
--wa-color-red-50: #df2e45;
|
||||
--wa-color-red-40: #a82431;
|
||||
--wa-color-red-30: #851d23;
|
||||
--wa-color-red-20: #621617;
|
||||
--wa-color-red-10: #3c0c09;
|
||||
--wa-color-red-05: #290601;
|
||||
|
||||
--wa-color-yellow-95: #fbf3c9;
|
||||
--wa-color-yellow-90: #ffe492;
|
||||
--wa-color-yellow-80: #fcc041;
|
||||
--wa-color-yellow-70: #e5a23d;
|
||||
--wa-color-yellow-60: #cc853a;
|
||||
--wa-color-yellow-50: #a86633;
|
||||
--wa-color-yellow-40: #824a2a;
|
||||
--wa-color-yellow-30: #6a3825;
|
||||
--wa-color-yellow-20: #4f281d;
|
||||
--wa-color-yellow-10: #2e1813;
|
||||
--wa-color-yellow-05: #1a0e0a;
|
||||
|
||||
--wa-color-lime-95: #eff4e3;
|
||||
--wa-color-lime-90: #dfeac7;
|
||||
--wa-color-lime-80: #bcd288;
|
||||
--wa-color-lime-70: #98bb4a;
|
||||
--wa-color-lime-60: #74a30b;
|
||||
--wa-color-lime-50: #588000;
|
||||
--wa-color-lime-40: #436100;
|
||||
--wa-color-lime-30: #354d00;
|
||||
--wa-color-lime-20: #263700;
|
||||
--wa-color-lime-10: #172100;
|
||||
--wa-color-lime-05: #0d1300;
|
||||
|
||||
--wa-color-green-95: #e2f8df;
|
||||
--wa-color-green-90: #c2f2c1;
|
||||
--wa-color-green-80: #68e27a;
|
||||
--wa-color-green-70: #00cb50;
|
||||
--wa-color-green-60: #00ae4b;
|
||||
--wa-color-green-50: #008840;
|
||||
--wa-color-green-40: #006834;
|
||||
--wa-color-green-30: #00522c;
|
||||
--wa-color-green-20: #003b22;
|
||||
--wa-color-green-10: #002418;
|
||||
--wa-color-green-05: #001611;
|
||||
|
||||
--wa-color-teal-95: #e5f5f5;
|
||||
--wa-color-teal-90: #cbecec;
|
||||
--wa-color-teal-80: #8ed6d5;
|
||||
--wa-color-teal-70: #50bfbe;
|
||||
--wa-color-teal-60: #1ea5a4;
|
||||
--wa-color-teal-50: #188180;
|
||||
--wa-color-teal-40: #126261;
|
||||
--wa-color-teal-30: #0e4d4d;
|
||||
--wa-color-teal-20: #0a3737;
|
||||
--wa-color-teal-10: #062121;
|
||||
--wa-color-teal-05: #041313;
|
||||
|
||||
--wa-color-blue-95: #e9f3fe;
|
||||
--wa-color-blue-90: #d4e8fc;
|
||||
--wa-color-blue-80: #a2cef9;
|
||||
--wa-color-blue-70: #6eb4f6;
|
||||
--wa-color-blue-60: #259af4;
|
||||
--wa-color-blue-50: #0076f2;
|
||||
--wa-color-blue-40: #005ab7;
|
||||
--wa-color-blue-30: #004790;
|
||||
--wa-color-blue-20: #00346a;
|
||||
--wa-color-blue-10: #001f3f;
|
||||
--wa-color-blue-05: #001427;
|
||||
|
||||
--wa-color-indigo-95: #f2f1fd;
|
||||
--wa-color-indigo-90: #e5e4fa;
|
||||
--wa-color-indigo-80: #c7c5f5;
|
||||
--wa-color-indigo-70: #aba7f0;
|
||||
--wa-color-indigo-60: #8f8aea;
|
||||
--wa-color-indigo-50: #6a63e1;
|
||||
--wa-color-indigo-40: #514cab;
|
||||
--wa-color-indigo-30: #403c86;
|
||||
--wa-color-indigo-20: #2e2b60;
|
||||
--wa-color-indigo-10: #1b1a3a;
|
||||
--wa-color-indigo-05: #100f21;
|
||||
|
||||
--wa-color-violet-95: #f8effa;
|
||||
--wa-color-violet-90: #f0e0f6;
|
||||
--wa-color-violet-80: #e0beeb;
|
||||
--wa-color-violet-70: #d09de1;
|
||||
--wa-color-violet-60: #c07ad6;
|
||||
--wa-color-violet-50: #a84cc5;
|
||||
--wa-color-violet-40: #803a97;
|
||||
--wa-color-violet-30: #652e76;
|
||||
--wa-color-violet-20: #482155;
|
||||
--wa-color-violet-10: #2c1433;
|
||||
--wa-color-violet-05: #190b1e;
|
||||
|
||||
--wa-color-gray-95: #f2f2f4;
|
||||
--wa-color-gray-90: #e5e5e9;
|
||||
--wa-color-gray-80: #c8c9d1;
|
||||
--wa-color-gray-70: #acaebb;
|
||||
--wa-color-gray-60: #9194a4;
|
||||
--wa-color-gray-50: #70758a;
|
||||
--wa-color-gray-40: #545868;
|
||||
--wa-color-gray-30: #424551;
|
||||
--wa-color-gray-20: #30323b;
|
||||
--wa-color-gray-10: #1c1d23;
|
||||
--wa-color-gray-05: #111215;
|
||||
}
|
||||
@@ -37,16 +37,16 @@
|
||||
--wa-color-yellow-10: #2e1813;
|
||||
--wa-color-yellow-05: #1a0e0a;
|
||||
|
||||
--wa-color-green-95: #e8f6ea;
|
||||
--wa-color-green-90: #d0edd8;
|
||||
--wa-color-green-80: #94d8ad;
|
||||
--wa-color-green-70: #4ec486;
|
||||
--wa-color-green-60: #00ae5f;
|
||||
--wa-color-green-50: #008b4d;
|
||||
--wa-color-green-40: #00693e;
|
||||
--wa-color-green-30: #005334;
|
||||
--wa-color-green-20: #003d28;
|
||||
--wa-color-green-10: #00241b;
|
||||
--wa-color-green-95: #e2f8df;
|
||||
--wa-color-green-90: #c2f2c1;
|
||||
--wa-color-green-80: #68e27a;
|
||||
--wa-color-green-70: #00cb50;
|
||||
--wa-color-green-60: #00ae4b;
|
||||
--wa-color-green-50: #008840;
|
||||
--wa-color-green-40: #006834;
|
||||
--wa-color-green-30: #00522c;
|
||||
--wa-color-green-20: #003b22;
|
||||
--wa-color-green-10: #002418;
|
||||
--wa-color-green-05: #001611;
|
||||
|
||||
--wa-color-blue-95: #e9f3fe;
|
||||
@@ -61,17 +61,41 @@
|
||||
--wa-color-blue-10: #001f3f;
|
||||
--wa-color-blue-05: #001427;
|
||||
|
||||
--wa-color-base-95: #f2f2f4;
|
||||
--wa-color-base-90: #e5e5e9;
|
||||
--wa-color-base-80: #c8c9d1;
|
||||
--wa-color-base-70: #acaebb;
|
||||
--wa-color-base-60: #9194a4;
|
||||
--wa-color-base-50: #70758a;
|
||||
--wa-color-base-40: #545868;
|
||||
--wa-color-base-30: #424551;
|
||||
--wa-color-base-20: #30323b;
|
||||
--wa-color-base-10: #1c1d23;
|
||||
--wa-color-base-05: #111215;
|
||||
--wa-color-gray-95: #f2f2f4;
|
||||
--wa-color-gray-90: #e5e5e9;
|
||||
--wa-color-gray-80: #c8c9d1;
|
||||
--wa-color-gray-70: #acaebb;
|
||||
--wa-color-gray-60: #9194a4;
|
||||
--wa-color-gray-50: #70758a;
|
||||
--wa-color-gray-40: #545868;
|
||||
--wa-color-gray-30: #424551;
|
||||
--wa-color-gray-20: #30323b;
|
||||
--wa-color-gray-10: #1c1d23;
|
||||
--wa-color-gray-05: #111215;
|
||||
|
||||
--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
|
||||
@@ -93,12 +117,12 @@
|
||||
|
||||
/* 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-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-blue-60);
|
||||
--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);
|
||||
@@ -129,15 +153,15 @@
|
||||
* 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-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-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-blue-40);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-blue-50);
|
||||
--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);
|
||||
@@ -196,7 +220,7 @@
|
||||
--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).
|
||||
/* 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 */
|
||||
@@ -353,19 +377,19 @@
|
||||
/**
|
||||
* 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-raised: var(--wa-color-base-20);
|
||||
--wa-color-surface-default: var(--wa-color-base-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-05);
|
||||
--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-background: var(--wa-color-primary-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
--wa-color-focus: var(--wa-color-primary-60);
|
||||
|
||||
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
@@ -377,15 +401,15 @@
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--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-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-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-blue-70);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-blue-60);
|
||||
--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);
|
||||
@@ -419,13 +443,64 @@
|
||||
|
||||
--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-fill-subtle: var(--wa-color-base-20);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
|
||||
--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-fill: var(--wa-color-base-80);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
background-color: var(--wa-color-brand-spot-darker);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-background::after {
|
||||
background: url(/assets/images/kitchen-sink/default/hero.png) 10rem bottom no-repeat;
|
||||
background-size: 95%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-subtle);
|
||||
--label-color: var(--wa-color-neutral-text-on-fill);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
color: var(--wa-color-brand-text-on-spot);
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 26rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-inline-end: 40%;
|
||||
color: var(--wa-color-brand-text-on-spot);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.hero-background::after {
|
||||
background-position: right bottom;
|
||||
background-size: 90%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* _utility.css */
|
||||
|
||||
@@ -222,10 +222,11 @@ wa-button:not([outline]) {
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
|
||||
&::part(base) {
|
||||
/* &::part(base) {
|
||||
-webkit-backdrop-filter: var(--wa-filter-blur);
|
||||
backdrop-filter: var(--wa-filter-blur);
|
||||
}
|
||||
} */
|
||||
/* causes popups descendants (e.g. tooltips and dropdowns) to be mispositioned */
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -26,29 +26,29 @@
|
||||
--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-yellow-95: #fff3bf;
|
||||
--wa-color-yellow-90: #f8e695;
|
||||
--wa-color-yellow-80: #eec637;
|
||||
--wa-color-yellow-70: #d8a815;
|
||||
--wa-color-yellow-60: #ce8500;
|
||||
--wa-color-yellow-50: #aa6300;
|
||||
--wa-color-yellow-40: #824c00;
|
||||
--wa-color-yellow-30: #663b00;
|
||||
--wa-color-yellow-20: #492b00;
|
||||
--wa-color-yellow-10: #2c1a00;
|
||||
--wa-color-yellow-05: #1b0e00;
|
||||
|
||||
--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-green-95: #dbfadf;
|
||||
--wa-color-green-90: #bbf3c3;
|
||||
--wa-color-green-80: #79df8a;
|
||||
--wa-color-green-70: #4dc661;
|
||||
--wa-color-green-60: #35aa4a;
|
||||
--wa-color-green-50: #298539;
|
||||
--wa-color-green-40: #20652d;
|
||||
--wa-color-green-30: #165025;
|
||||
--wa-color-green-20: #0d391c;
|
||||
--wa-color-green-10: #062312;
|
||||
--wa-color-green-05: #03140c;
|
||||
|
||||
--wa-color-blue-95: #e4f1ff;
|
||||
--wa-color-blue-90: #cee6ff;
|
||||
@@ -62,17 +62,41 @@
|
||||
--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;
|
||||
--wa-color-gray-95: #f1f2f5;
|
||||
--wa-color-gray-90: #e3e6eb;
|
||||
--wa-color-gray-80: #c5cad4;
|
||||
--wa-color-gray-70: #a8afbf;
|
||||
--wa-color-gray-60: #8b95aa;
|
||||
--wa-color-gray-50: #677490;
|
||||
--wa-color-gray-40: #4a5877;
|
||||
--wa-color-gray-30: #3a455d;
|
||||
--wa-color-gray-20: #2a3142;
|
||||
--wa-color-gray-10: #191e28;
|
||||
--wa-color-gray-05: #0e1117;
|
||||
|
||||
--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
|
||||
@@ -94,12 +118,12 @@
|
||||
|
||||
/* 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-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-blue-60);
|
||||
--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);
|
||||
@@ -107,10 +131,13 @@
|
||||
/* 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%),
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-shadow-offset-x-base: 0;
|
||||
--wa-shadow-offset-y-base: 0.35;
|
||||
|
||||
/* 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%;
|
||||
@@ -130,21 +157,21 @@
|
||||
* 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-spot: var(--wa-color-primary-70);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-50);
|
||||
--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-70);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-primary-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-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-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-subtle: var(--wa-color-green-70);
|
||||
--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);
|
||||
@@ -154,8 +181,8 @@
|
||||
--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-border-subtle: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-60);
|
||||
--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);
|
||||
@@ -164,7 +191,7 @@
|
||||
--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-subtle: var(--wa-color-red-70);
|
||||
--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);
|
||||
@@ -174,18 +201,18 @@
|
||||
--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-border-subtle: var(--wa-color-base-60);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-40);
|
||||
--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);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* 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-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
@@ -197,14 +224,18 @@
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-heavy);
|
||||
|
||||
/* 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.625rem; /* 10px */
|
||||
--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.75rem; /* 28px */
|
||||
--wa-font-size-2xl: 2.5rem; /* 40px */
|
||||
--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.75;
|
||||
@@ -277,6 +308,12 @@
|
||||
color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-text-link) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Z-index
|
||||
*/
|
||||
@@ -300,7 +337,7 @@
|
||||
|
||||
--wa-form-controls-corners: var(--wa-corners-s);
|
||||
|
||||
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
|
||||
--wa-form-controls-activated-color: var(--wa-color-neutral-border-highlight);
|
||||
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
|
||||
|
||||
--wa-form-controls-label-color: var(--wa-color-text-normal);
|
||||
@@ -344,23 +381,27 @@
|
||||
/**
|
||||
* 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-surface-raised: var(--wa-color-base-30);
|
||||
--wa-color-surface-default: var(--wa-color-base-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-10);
|
||||
--wa-color-surface-border: var(--wa-color-base-30);
|
||||
|
||||
--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-background: var(--wa-color-primary-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
--wa-color-focus: var(--wa-color-primary-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-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
@@ -368,114 +409,239 @@
|
||||
/**
|
||||
* 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-brand-spot: var(--wa-color-primary-80);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-50);
|
||||
--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-60);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-primary-70);
|
||||
--wa-color-brand-text-on-spot: var(--wa-color-primary-10);
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-primary-80);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-primary-70);
|
||||
|
||||
--wa-color-success-spot: var(--wa-color-green-70);
|
||||
--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-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-success-border-subtle: var(--wa-color-green-60);
|
||||
--wa-color-success-border-highlight: var(--wa-color-green-70);
|
||||
--wa-color-success-text-on-spot: var(--wa-color-green-10);
|
||||
--wa-color-success-text-on-fill: var(--wa-color-green-80);
|
||||
--wa-color-success-text-on-surface: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-warning-spot: var(--wa-color-yellow-70);
|
||||
--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-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-warning-border-subtle: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-text-on-spot: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-text-on-fill: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
|
||||
|
||||
--wa-color-danger-spot: var(--wa-color-red-70);
|
||||
--wa-color-danger-spot: var(--wa-color-red-80);
|
||||
--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-danger-border-subtle: var(--wa-color-red-60);
|
||||
--wa-color-danger-border-highlight: var(--wa-color-red-70);
|
||||
--wa-color-danger-text-on-spot: var(--wa-color-red-10);
|
||||
--wa-color-danger-text-on-fill: var(--wa-color-red-80);
|
||||
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
|
||||
|
||||
--wa-color-neutral-spot: var(--wa-color-base-70);
|
||||
--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-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);
|
||||
--wa-color-neutral-fill-subtle: var(--wa-color-base-20);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-60);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-70);
|
||||
--wa-color-neutral-text-on-spot: var(--wa-color-base-10);
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
|
||||
}
|
||||
|
||||
/* #region Custom styles */
|
||||
wa-button {
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--border-color);
|
||||
--box-shadow-color: var(--border-color);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-spot-darker);
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.project-header h1 {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-spot-darker);
|
||||
.hero {
|
||||
color: var(--wa-color-brand-text-on-fill);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-spot-darker);
|
||||
.hero .title {
|
||||
background:
|
||||
url('/assets/images/kitchen-sink/fa/hero.png') center center / cover no-repeat,
|
||||
var(--wa-color-brand-fill-highlight);
|
||||
padding: calc(var(--wa-space-3xl) * 5) calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 4);
|
||||
margin: calc(var(--wa-space-3xl) * -1) 0;
|
||||
border-radius: var(--wa-panel-corners);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-spot-darker);
|
||||
h1.hero-title {
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-spot-darker);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: -0.75rem;
|
||||
right: var(--wa-space-l);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-spot-darker);
|
||||
pre.codeblock,
|
||||
.post-body code {
|
||||
background-color: color-mix(in oklab, var(--wa-color-base-50), transparent 90%);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-spot-darker);
|
||||
.message-composer wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-highlight);
|
||||
color: var(--wa-color-neutral-text-on-fill);
|
||||
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-spot-darker);
|
||||
wa-alert {
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
--icon-color: var(--border-color);
|
||||
|
||||
.wa-theme-fa-dark & {
|
||||
--background: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-highlight);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-highlight);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-highlight);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-highlight);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-spot-darker);
|
||||
wa-badge {
|
||||
--border-color: var(--background);
|
||||
text-transform: uppercase;
|
||||
|
||||
&::part(base) {
|
||||
font-weight: var(--wa-font-weight-heavy);
|
||||
}
|
||||
}
|
||||
|
||||
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-theme-fa-dark & {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-spot-darker);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-spot-darker);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-spot-darker);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-spot-darker);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-spot-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--border-width: 0px;
|
||||
|
||||
& .title {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
& wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-activated: var(--wa-color-brand-spot);
|
||||
--pagination-color-resting: var(--wa-color-neutral-spot);
|
||||
}
|
||||
|
||||
wa-checkbox,
|
||||
wa-radio {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-radio-group > wa-radio-button {
|
||||
--wa-transition-normal: 0ms;
|
||||
--wa-transition-fast: 0ms;
|
||||
--wa-transition-faster: 0ms;
|
||||
--background-active: var(--wa-color-neutral-text-on-surface);
|
||||
--border-color-active: var(--background-active);
|
||||
--box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
|
||||
var(--border-color);
|
||||
--label-color-active: var(--wa-color-surface-default);
|
||||
|
||||
&:active,
|
||||
&[checked] {
|
||||
--background: var(--wa-color-neutral-text-on-surface);
|
||||
--box-shadow: none;
|
||||
--label-color: var(--wa-color-surface-default);
|
||||
transform: translateX(var(--wa-shadow-offset-x-level-1)) translateY(var(--wa-shadow-offset-y-level-1));
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-form-controls-activated-color);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-neutral-fill-subtle);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-heavy);
|
||||
}
|
||||
|
||||
wa-input,
|
||||
wa-select {
|
||||
--wa-form-controls-height-s: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height) +
|
||||
var(--wa-shadow-offset-y-level-1)
|
||||
);
|
||||
--wa-form-controls-height-m: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height) +
|
||||
var(--wa-shadow-offset-y-level-1)
|
||||
);
|
||||
--wa-form-controls-height-l: calc(
|
||||
var(--wa-space-l) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height) +
|
||||
var(--wa-shadow-offset-y-level-1)
|
||||
);
|
||||
|
||||
& > wa-icon {
|
||||
color: var(--wa-color-base-30);
|
||||
|
||||
.wa-theme-fa-dark & {
|
||||
color: var(--wa-color-base-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -13,17 +13,17 @@
|
||||
* 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: #fbeff3;
|
||||
--wa-color-red-90: #f6e0e7;
|
||||
--wa-color-red-80: #ecbdcc;
|
||||
--wa-color-red-70: #e39bb2;
|
||||
--wa-color-red-60: #d87797;
|
||||
--wa-color-red-50: #ca4570;
|
||||
--wa-color-red-40: #b2003b;
|
||||
--wa-color-red-30: #8e002f;
|
||||
--wa-color-red-20: #6b0023;
|
||||
--wa-color-red-10: #430016;
|
||||
--wa-color-red-05: #2d000f;
|
||||
--wa-color-red-95: #fdeeef;
|
||||
--wa-color-red-90: #fcdfe0;
|
||||
--wa-color-red-80: #f8b9bc;
|
||||
--wa-color-red-70: #f0969c;
|
||||
--wa-color-red-60: #e3727d;
|
||||
--wa-color-red-50: #cc465a;
|
||||
--wa-color-red-40: #ac1d3d;
|
||||
--wa-color-red-30: #8f012c;
|
||||
--wa-color-red-20: #6b001c;
|
||||
--wa-color-red-10: #44000d;
|
||||
--wa-color-red-05: #2e0006;
|
||||
|
||||
--wa-color-yellow-95: #f5f2e5;
|
||||
--wa-color-yellow-90: #ece6cc;
|
||||
@@ -49,29 +49,53 @@
|
||||
--wa-color-green-10: #002316;
|
||||
--wa-color-green-05: #00160d;
|
||||
|
||||
--wa-color-orchid-95: #f8eff8;
|
||||
--wa-color-orchid-90: #f2e1f1;
|
||||
--wa-color-orchid-80: #e2bee1;
|
||||
--wa-color-orchid-70: #d49dd2;
|
||||
--wa-color-orchid-60: #c57bc3;
|
||||
--wa-color-orchid-50: #b14fae;
|
||||
--wa-color-orchid-40: #9a1a96;
|
||||
--wa-color-orchid-30: #7c0e79;
|
||||
--wa-color-orchid-20: #5c0a5a;
|
||||
--wa-color-orchid-10: #380637;
|
||||
--wa-color-orchid-05: #250424;
|
||||
--wa-color-teal-95: #ebf4f4;
|
||||
--wa-color-teal-90: #d9e9e9;
|
||||
--wa-color-teal-80: #add0d1;
|
||||
--wa-color-teal-70: #84b8ba;
|
||||
--wa-color-teal-60: #5aa0a3;
|
||||
--wa-color-teal-50: #268285;
|
||||
--wa-color-teal-40: #006366;
|
||||
--wa-color-teal-30: #004e51;
|
||||
--wa-color-teal-20: #00393b;
|
||||
--wa-color-teal-10: #002223;
|
||||
--wa-color-teal-05: #001415;
|
||||
|
||||
--wa-color-base-95: #f2f2f3;
|
||||
--wa-color-base-90: #e6e5e8;
|
||||
--wa-color-base-80: #cbc8ce;
|
||||
--wa-color-base-70: #b1adb6;
|
||||
--wa-color-base-60: #98939f;
|
||||
--wa-color-base-50: #7a7382;
|
||||
--wa-color-base-40: #5d5568;
|
||||
--wa-color-base-30: #494352;
|
||||
--wa-color-base-20: #35313c;
|
||||
--wa-color-base-10: #1f1c23;
|
||||
--wa-color-base-05: #131115;
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e6e5e8;
|
||||
--wa-color-gray-80: #cbc8ce;
|
||||
--wa-color-gray-70: #b1adb6;
|
||||
--wa-color-gray-60: #98939f;
|
||||
--wa-color-gray-50: #7a7382;
|
||||
--wa-color-gray-40: #5d5568;
|
||||
--wa-color-gray-30: #494352;
|
||||
--wa-color-gray-20: #35313c;
|
||||
--wa-color-gray-10: #1f1c23;
|
||||
--wa-color-gray-05: #131115;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-teal-95);
|
||||
--wa-color-primary-90: var(--wa-color-teal-90);
|
||||
--wa-color-primary-80: var(--wa-color-teal-80);
|
||||
--wa-color-primary-70: var(--wa-color-teal-70);
|
||||
--wa-color-primary-60: var(--wa-color-teal-60);
|
||||
--wa-color-primary-50: var(--wa-color-teal-50);
|
||||
--wa-color-primary-40: var(--wa-color-teal-40);
|
||||
--wa-color-primary-30: var(--wa-color-teal-30);
|
||||
--wa-color-primary-20: var(--wa-color-teal-20);
|
||||
--wa-color-primary-10: var(--wa-color-teal-10);
|
||||
--wa-color-primary-05: var(--wa-color-teal-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);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
@@ -93,15 +117,15 @@
|
||||
|
||||
/* 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-orchid-80);
|
||||
--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: color-mix(in oklab, var(--wa-color-orchid-60) 96%, transparent);
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 96%, transparent);
|
||||
|
||||
/* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
|
||||
--wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
|
||||
--wa-color-overlay: color-mix(in oklab, var(--wa-color-base-30) 25%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
@@ -128,15 +152,15 @@
|
||||
* 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-orchid-50);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-orchid-40);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-orchid-95);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-orchid-90);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-orchid-90);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-orchid-80);
|
||||
--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-90);
|
||||
--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-orchid-40);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-orchid-50);
|
||||
--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);
|
||||
@@ -195,7 +219,7 @@
|
||||
--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).
|
||||
/* 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 */
|
||||
@@ -351,21 +375,21 @@
|
||||
/**
|
||||
* 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-surface-raised: var(--wa-color-base-20);
|
||||
--wa-color-surface-default: var(--wa-color-base-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-05);
|
||||
--wa-color-surface-border: var(--wa-color-base-30);
|
||||
|
||||
--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-orchid-40);
|
||||
--wa-color-selection-background: var(--wa-color-primary-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-orchid-60) 90%, transparent);
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
|
||||
|
||||
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
|
||||
--wa-color-overlay: color-mix(in oklab, var(--wa-color-primary-05) 30%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
|
||||
|
||||
@@ -375,15 +399,15 @@
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--wa-color-brand-spot: var(--wa-color-orchid-50);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-orchid-40);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-orchid-10);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-orchid-20);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-orchid-20);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-orchid-30);
|
||||
--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-20);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-primary-30);
|
||||
--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-orchid-70);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-orchid-60);
|
||||
--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);
|
||||
@@ -424,30 +448,77 @@
|
||||
--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);
|
||||
|
||||
.hero-background::after {
|
||||
height: 50rem;
|
||||
-webkit-backdrop-filter: brightness(0.5);
|
||||
backdrop-filter: brightness(0.5);
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #region Custom styles */
|
||||
wa-button[outline] {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-highlight);
|
||||
@container preview (min-width: 0) {
|
||||
wa-button[outline] {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-highlight);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-highlight);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-highlight);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-highlight);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-highlight);
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
--symbol-color-active: var(--wa-color-neutral-text-on-surface);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-highlight);
|
||||
.hero-background {
|
||||
height: 50rem;
|
||||
background: url(/assets/images/kitchen-sink/glassy/hero.jpg) 0px 0px / cover no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-highlight);
|
||||
.strata.hero {
|
||||
height: 25rem;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 8rem;
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-highlight);
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
@container preview (min-width: 720px) {
|
||||
.strata.hero {
|
||||
padding-left: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
|
||||
/* _utility.css */
|
||||
|
||||
@@ -13,65 +13,89 @@
|
||||
* 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: #fbf0ed;
|
||||
--wa-color-red-90: #f7e1db;
|
||||
--wa-color-red-80: #eebfb3;
|
||||
--wa-color-red-70: #e69d8b;
|
||||
--wa-color-red-60: #dd7961;
|
||||
--wa-color-red-50: #b55c47;
|
||||
--wa-color-red-40: #884535;
|
||||
--wa-color-red-30: #6b372a;
|
||||
--wa-color-red-20: #4e281f;
|
||||
--wa-color-red-10: #2e1812;
|
||||
--wa-color-red-05: #1d0f0b;
|
||||
--wa-color-red-95: #f9f0ee;
|
||||
--wa-color-red-90: #f5e2dd;
|
||||
--wa-color-red-80: #e8bfb5;
|
||||
--wa-color-red-70: #dba294;
|
||||
--wa-color-red-60: #c98373;
|
||||
--wa-color-red-50: #ae6150;
|
||||
--wa-color-red-40: #8c4434;
|
||||
--wa-color-red-30: #713225;
|
||||
--wa-color-red-20: #562318;
|
||||
--wa-color-red-10: #36130b;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #f6f2e8;
|
||||
--wa-color-yellow-90: #ede5d2;
|
||||
--wa-color-yellow-80: #dac89f;
|
||||
--wa-color-yellow-70: #c9ab6f;
|
||||
--wa-color-yellow-60: #b78f40;
|
||||
--wa-color-yellow-95: #f5f0e8;
|
||||
--wa-color-yellow-90: #ede4d5;
|
||||
--wa-color-yellow-80: #dac6a4;
|
||||
--wa-color-yellow-70: #c7ab7b;
|
||||
--wa-color-yellow-60: #b29054;
|
||||
--wa-color-yellow-50: #94702b;
|
||||
--wa-color-yellow-40: #705320;
|
||||
--wa-color-yellow-30: #59411a;
|
||||
--wa-color-yellow-20: #412f13;
|
||||
--wa-color-yellow-10: #261c0b;
|
||||
--wa-color-yellow-05: #171107;
|
||||
--wa-color-yellow-40: #735310;
|
||||
--wa-color-yellow-30: #5c4003;
|
||||
--wa-color-yellow-20: #442f00;
|
||||
--wa-color-yellow-10: #2a1b00;
|
||||
--wa-color-yellow-05: #1b1000;
|
||||
|
||||
--wa-color-green-95: #ecf4ef;
|
||||
--wa-color-green-90: #d9eae0;
|
||||
--wa-color-green-80: #afd2bd;
|
||||
--wa-color-green-70: #87ba9b;
|
||||
--wa-color-green-60: #5ea379;
|
||||
--wa-color-green-50: #45825d;
|
||||
--wa-color-green-40: #346246;
|
||||
--wa-color-green-30: #294d37;
|
||||
--wa-color-green-20: #1e3828;
|
||||
--wa-color-green-10: #112117;
|
||||
--wa-color-green-05: #0b140e;
|
||||
--wa-color-green-95: #edf2ee;
|
||||
--wa-color-green-90: #dde8df;
|
||||
--wa-color-green-80: #b8cebc;
|
||||
--wa-color-green-70: #98b79e;
|
||||
--wa-color-green-60: #779e7f;
|
||||
--wa-color-green-50: #53805d;
|
||||
--wa-color-green-40: #366241;
|
||||
--wa-color-green-30: #264d31;
|
||||
--wa-color-green-20: #193922;
|
||||
--wa-color-green-10: #0c2212;
|
||||
--wa-color-green-05: #051509;
|
||||
|
||||
--wa-color-blue-95: #edf3f9;
|
||||
--wa-color-blue-90: #dbe7f3;
|
||||
--wa-color-blue-80: #b3cce6;
|
||||
--wa-color-blue-70: #8cb3da;
|
||||
--wa-color-blue-60: #6599cd;
|
||||
--wa-color-blue-50: #4c79a6;
|
||||
--wa-color-blue-40: #395b7d;
|
||||
--wa-color-blue-30: #2d4762;
|
||||
--wa-color-blue-20: #213448;
|
||||
--wa-color-blue-10: #131f2a;
|
||||
--wa-color-blue-05: #0c131a;
|
||||
--wa-color-blue-95: #eef1f5;
|
||||
--wa-color-blue-90: #e1e6ef;
|
||||
--wa-color-blue-80: #bdc9dc;
|
||||
--wa-color-blue-70: #9fb0ca;
|
||||
--wa-color-blue-60: #8196b8;
|
||||
--wa-color-blue-50: #5f779e;
|
||||
--wa-color-blue-40: #415981;
|
||||
--wa-color-blue-30: #2f466a;
|
||||
--wa-color-blue-20: #203351;
|
||||
--wa-color-blue-10: #101e34;
|
||||
--wa-color-blue-05: #081223;
|
||||
|
||||
--wa-color-base-95: #f0f3f1;
|
||||
--wa-color-base-90: #e2e7e3;
|
||||
--wa-color-base-80: #c2ccc5;
|
||||
--wa-color-base-70: #a4b3a8;
|
||||
--wa-color-base-60: #869a8c;
|
||||
--wa-color-base-50: #697a6e;
|
||||
--wa-color-base-40: #4e5c52;
|
||||
--wa-color-base-30: #3e4840;
|
||||
--wa-color-base-20: #2d342f;
|
||||
--wa-color-base-10: #1a1f1b;
|
||||
--wa-color-base-05: #0f1310;
|
||||
--wa-color-gray-95: #f1f1f0;
|
||||
--wa-color-gray-90: #e7e6e4;
|
||||
--wa-color-gray-80: #cac8c3;
|
||||
--wa-color-gray-70: #b2afa8;
|
||||
--wa-color-gray-60: #98958c;
|
||||
--wa-color-gray-50: #7a766a;
|
||||
--wa-color-gray-40: #5c594f;
|
||||
--wa-color-gray-30: #49453e;
|
||||
--wa-color-gray-20: #35322d;
|
||||
--wa-color-gray-10: #1f1d1a;
|
||||
--wa-color-gray-05: #131210;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-green-95);
|
||||
--wa-color-primary-90: var(--wa-color-green-90);
|
||||
--wa-color-primary-80: var(--wa-color-green-80);
|
||||
--wa-color-primary-70: var(--wa-color-green-70);
|
||||
--wa-color-primary-60: var(--wa-color-green-60);
|
||||
--wa-color-primary-50: var(--wa-color-green-50);
|
||||
--wa-color-primary-40: var(--wa-color-green-40);
|
||||
--wa-color-primary-30: var(--wa-color-green-30);
|
||||
--wa-color-primary-20: var(--wa-color-green-20);
|
||||
--wa-color-primary-10: var(--wa-color-green-10);
|
||||
--wa-color-primary-05: var(--wa-color-green-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);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
|
||||
603
src/themes/migration.css
Normal file
603
src/themes/migration.css
Normal file
@@ -0,0 +1,603 @@
|
||||
@import 'depth_1_semiflat.css';
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-migration-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: #0e662e;
|
||||
--wa-color-green-30: #0d5026;
|
||||
--wa-color-green-20: #0c391d;
|
||||
--wa-color-green-10: #082213;
|
||||
--wa-color-green-05: #02140a;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dee5fd;
|
||||
--wa-color-indigo-80: #bec8f2;
|
||||
--wa-color-indigo-70: #9dabf0;
|
||||
--wa-color-indigo-60: #818cf7;
|
||||
--wa-color-indigo-50: #6063eb;
|
||||
--wa-color-indigo-40: #4941d3;
|
||||
--wa-color-indigo-30: #3930ad;
|
||||
--wa-color-indigo-20: #29247a;
|
||||
--wa-color-indigo-10: #191843;
|
||||
--wa-color-indigo-05: #0f0e26;
|
||||
|
||||
--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-indigo-95);
|
||||
--wa-color-primary-90: var(--wa-color-indigo-90);
|
||||
--wa-color-primary-80: var(--wa-color-indigo-80);
|
||||
--wa-color-primary-70: var(--wa-color-indigo-70);
|
||||
--wa-color-primary-60: var(--wa-color-indigo-60);
|
||||
--wa-color-primary-50: var(--wa-color-indigo-50);
|
||||
--wa-color-primary-40: var(--wa-color-indigo-40);
|
||||
--wa-color-primary-30: var(--wa-color-indigo-30);
|
||||
--wa-color-primary-20: var(--wa-color-indigo-20);
|
||||
--wa-color-primary-10: var(--wa-color-indigo-10);
|
||||
--wa-color-primary-05: var(--wa-color-indigo-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-50);
|
||||
|
||||
/* 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-20) 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% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: var(--wa-color-base-80) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-base-80) 10%;
|
||||
|
||||
/**
|
||||
* 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-primary-40);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-30);
|
||||
--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: color-mix(in oklab, var(--wa-color-primary-80), transparent);
|
||||
--wa-color-brand-border-highlight: color-mix(in oklab, var(--wa-color-primary-70), transparent);
|
||||
--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-40);
|
||||
|
||||
--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: color-mix(in oklab, var(--wa-color-green-80), transparent);
|
||||
--wa-color-success-border-highlight: color-mix(in oklab, var(--wa-color-green-70), transparent);
|
||||
--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: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
|
||||
--wa-color-warning-border-highlight: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
|
||||
--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: color-mix(in oklab, var(--wa-color-red-80), transparent);
|
||||
--wa-color-danger-border-highlight: color-mix(in oklab, var(--wa-color-red-70), transparent);
|
||||
--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-10);
|
||||
--wa-color-neutral-spot-darker: black;
|
||||
--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: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
|
||||
--wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
|
||||
--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-40);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'Inter', sans-serif;
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-medium: 500;
|
||||
--wa-font-weight-heavy: 600;
|
||||
--wa-font-weight-black: 700;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-black);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-heavy);
|
||||
|
||||
/* 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: 14px;
|
||||
--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: calc(1 / 14);
|
||||
--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.375;
|
||||
--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: calc((2 / 14) * 1rem);
|
||||
--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;
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: none;
|
||||
--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-quiet);
|
||||
--wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
|
||||
--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-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-m: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-l: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
|
||||
--wa-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-tooltip-arrow-size: 0.375rem;
|
||||
}
|
||||
|
||||
.wa-theme-migration-dark,
|
||||
.wa-theme-migration-dark :host {
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
--wa-color-surface-raised: color-mix(in oklab, var(--wa-color-base-10) 60%, var(--wa-color-base-20));
|
||||
--wa-color-surface-default: var(--wa-color-base-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-05);
|
||||
--wa-color-surface-border: rgb(255 255 255 / 0.1);
|
||||
|
||||
--wa-color-text-normal: white;
|
||||
--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-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) * 16% + 40%), transparent);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-base-70) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-base-70) 10%;
|
||||
|
||||
/**
|
||||
* 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: color-mix(in oklab, var(--wa-color-primary-20), transparent);
|
||||
--wa-color-brand-border-highlight: color-mix(in oklab, var(--wa-color-primary-30), transparent);
|
||||
--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: color-mix(in oklab, var(--wa-color-green-20), transparent);
|
||||
--wa-color-success-border-highlight: color-mix(in oklab, var(--wa-color-green-30), transparent);
|
||||
--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: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
|
||||
--wa-color-warning-border-highlight: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
|
||||
--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: color-mix(in oklab, var(--wa-color-red-20), transparent);
|
||||
--wa-color-danger-border-highlight: color-mix(in oklab, var(--wa-color-red-30), transparent);
|
||||
--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: white;
|
||||
--wa-color-neutral-spot-darker: var(--wa-color-base-60);
|
||||
--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: color-mix(in oklab, var(--wa-color-base-20), transparent);
|
||||
--wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-base-30), transparent);
|
||||
--wa-color-neutral-text-on-spot: var(--wa-color-base-10);
|
||||
--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) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.hero {
|
||||
--hero-background-color: var(--wa-color-surface-default);
|
||||
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), transparent 30%);
|
||||
background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
|
||||
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 40% 50%,
|
||||
color-mix(in oklab, var(--wa-color-primary-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
color-mix(in oklab, var(--wa-color-primary-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
|
||||
linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
|
||||
linear-gradient(90deg, var(--hero-background-color), transparent),
|
||||
repeating-linear-gradient(
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
var(--hero-background-color);
|
||||
|
||||
& .title {
|
||||
padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
|
||||
|
||||
& .hero-title {
|
||||
font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
|
||||
margin-block: 0 var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-l);
|
||||
left: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
&::part(footer) {
|
||||
border: none;
|
||||
}
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-base-50);
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
margin-top: calc(var(--wa-space-3xl) * -8);
|
||||
}
|
||||
|
||||
pre.codeblock {
|
||||
background-color: var(--wa-color-neutral-fill-highlight);
|
||||
}
|
||||
|
||||
wa-avatar {
|
||||
--wa-color-neutral-spot: var(--wa-color-base-50);
|
||||
}
|
||||
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-medium);
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
--border-color: transparent;
|
||||
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-brand-fill-highlight);
|
||||
--content-color: var(--wa-color-brand-text-on-fill);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-success-fill-highlight);
|
||||
--content-color: var(--wa-color-success-text-on-fill);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-warning-fill-highlight);
|
||||
--content-color: var(--wa-color-warning-text-on-fill);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-danger-fill-highlight);
|
||||
--content-color: var(--wa-color-danger-text-on-fill);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: var(--wa-color-neutral-fill-highlight);
|
||||
--content-color: var(--wa-color-neutral-text-on-fill);
|
||||
}
|
||||
}
|
||||
|
||||
wa-button[outline] {
|
||||
--border-color: color-mix(in oklab, var(--label-color), transparent 75%);
|
||||
}
|
||||
|
||||
wa-input,
|
||||
wa-select {
|
||||
--box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1) -0.08em
|
||||
var(--wa-color-shadow);
|
||||
& wa-icon {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio-button:not([checked]) {
|
||||
--border-color: var(--wa-color-neutral-border-highlight);
|
||||
--label-color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--border-color: transparent;
|
||||
--height: calc(var(--thumb-size) * (18 / 14));
|
||||
--thumb-color: white;
|
||||
--thumb-color-checked: var(--thumb-color);
|
||||
--thumb-size: 1em;
|
||||
--thumb-shadow: var(--wa-shadow-level-2);
|
||||
--width: calc(var(--thumb-size) * (32 / 14));
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* _utility.css */
|
||||
File diff suppressed because it is too large
Load Diff
753
src/themes/premium.css
Normal file
753
src/themes/premium.css
Normal file
@@ -0,0 +1,753 @@
|
||||
@import 'depth_1_semiflat.css';
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-premium-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: #fbeeeb;
|
||||
--wa-color-red-90: #f8e0d9;
|
||||
--wa-color-red-80: #efbdb1;
|
||||
--wa-color-red-70: #e39f8d;
|
||||
--wa-color-red-60: #d1806b;
|
||||
--wa-color-red-50: #b35e49;
|
||||
--wa-color-red-40: #8e4330;
|
||||
--wa-color-red-30: #733223;
|
||||
--wa-color-red-20: #562317;
|
||||
--wa-color-red-10: #36130a;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #fff2b8;
|
||||
--wa-color-yellow-90: #ffe578;
|
||||
--wa-color-yellow-80: #eac46c;
|
||||
--wa-color-yellow-70: #d5a766;
|
||||
--wa-color-yellow-60: #bd8a5e;
|
||||
--wa-color-yellow-50: #9d6a4f;
|
||||
--wa-color-yellow-40: #794f3c;
|
||||
--wa-color-yellow-30: #603d2f;
|
||||
--wa-color-yellow-20: #482b21;
|
||||
--wa-color-yellow-10: #2c1912;
|
||||
--wa-color-yellow-05: #1d0e0a;
|
||||
|
||||
--wa-color-green-95: #dcf8ea;
|
||||
--wa-color-green-90: #bcf1d8;
|
||||
--wa-color-green-80: #6dddad;
|
||||
--wa-color-green-70: #33c685;
|
||||
--wa-color-green-60: #00aa66;
|
||||
--wa-color-green-50: #008754;
|
||||
--wa-color-green-40: #006646;
|
||||
--wa-color-green-30: #00503b;
|
||||
--wa-color-green-20: #003a2d;
|
||||
--wa-color-green-10: #00231b;
|
||||
--wa-color-green-05: #001610;
|
||||
|
||||
--wa-color-teal-95: #cbfaf9;
|
||||
--wa-color-teal-90: #9ff4f3;
|
||||
--wa-color-teal-80: #1adfdb;
|
||||
--wa-color-teal-70: #00c3be;
|
||||
--wa-color-teal-60: #1aa6a0;
|
||||
--wa-color-teal-50: #15837e;
|
||||
--wa-color-teal-40: #10635e;
|
||||
--wa-color-teal-30: #0c4e4a;
|
||||
--wa-color-teal-20: #083936;
|
||||
--wa-color-teal-10: #04221f;
|
||||
--wa-color-teal-05: #021513;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e3e6e9;
|
||||
--wa-color-gray-80: #c3cad1;
|
||||
--wa-color-gray-70: #a6b0ba;
|
||||
--wa-color-gray-60: #8897a3;
|
||||
--wa-color-gray-50: #637787;
|
||||
--wa-color-gray-40: #435b6e;
|
||||
--wa-color-gray-30: #2c485d;
|
||||
--wa-color-gray-20: #11344c;
|
||||
--wa-color-gray-10: #002034;
|
||||
--wa-color-gray-05: #0f1310;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-teal-95);
|
||||
--wa-color-primary-90: var(--wa-color-teal-90);
|
||||
--wa-color-primary-80: var(--wa-color-teal-80);
|
||||
--wa-color-primary-70: var(--wa-color-teal-70);
|
||||
--wa-color-primary-60: var(--wa-color-teal-60);
|
||||
--wa-color-primary-50: var(--wa-color-teal-50);
|
||||
--wa-color-primary-40: var(--wa-color-teal-40);
|
||||
--wa-color-primary-30: var(--wa-color-teal-30);
|
||||
--wa-color-primary-20: var(--wa-color-teal-20);
|
||||
--wa-color-primary-10: var(--wa-color-teal-10);
|
||||
--wa-color-primary-05: var(--wa-color-teal-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);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-80);
|
||||
|
||||
/* 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-50);
|
||||
--wa-color-text-link: var(--wa-color-primary-50);
|
||||
|
||||
/* 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-green-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: color-mix(in oklab, var(--wa-color-primary-70) 76%, transparent);
|
||||
|
||||
/* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
|
||||
--wa-color-overlay: color-mix(in oklab, var(--wa-color-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-10) calc(var(--wa-shadow-blur-base) * 8% + 16%),
|
||||
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 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-primary-50);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-primary-90);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-primary-80);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-primary-80);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-primary-50);
|
||||
--wa-color-brand-text-on-spot: var(--wa-color-primary-95);
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-primary-20);
|
||||
--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-90);
|
||||
--wa-color-success-fill-highlight: var(--wa-color-green-80);
|
||||
--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-green-95);
|
||||
--wa-color-success-text-on-fill: var(--wa-color-green-20);
|
||||
--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-90);
|
||||
--wa-color-warning-fill-highlight: var(--wa-color-yellow-80);
|
||||
--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-yellow-95);
|
||||
--wa-color-warning-text-on-fill: var(--wa-color-yellow-20);
|
||||
--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-90);
|
||||
--wa-color-danger-fill-highlight: var(--wa-color-red-80);
|
||||
--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-red-95);
|
||||
--wa-color-danger-text-on-fill: var(--wa-color-red-20);
|
||||
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
|
||||
|
||||
--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-90);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-80);
|
||||
--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-base-95);
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-20);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'Playfair Display', serif;
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-code: 'IBM Plex Mono', 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
|
||||
monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-medium: 500;
|
||||
--wa-font-weight-heavy: 600;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-medium);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-normal);
|
||||
|
||||
/* 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.09375;
|
||||
--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) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
|
||||
--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: transparent;
|
||||
|
||||
--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: calc(
|
||||
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-m: calc(
|
||||
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
--wa-form-controls-height-l: calc(
|
||||
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
|
||||
);
|
||||
|
||||
--wa-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;
|
||||
|
||||
/* Depth */
|
||||
--wa-shadow-blur-base: 0.375;
|
||||
--wa-shadow-offset-y-base: 0.1875;
|
||||
}
|
||||
|
||||
.wa-theme-premium-dark,
|
||||
.wa-theme-premium-dark :host {
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-30);
|
||||
--wa-color-surface-default: var(--wa-color-base-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-10);
|
||||
--wa-color-surface-border: var(--wa-color-base-30);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-80);
|
||||
--wa-color-text-link: var(--wa-color-primary-80);
|
||||
|
||||
--wa-color-selection-background: var(--wa-color-green-40);
|
||||
--wa-color-selection-text: white;
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
|
||||
|
||||
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-10) calc(var(--wa-shadow-blur-base) * 16% + 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-80);
|
||||
--wa-color-brand-spot-darker: var(--wa-color-primary-60);
|
||||
--wa-color-brand-fill-subtle: var(--wa-color-primary-30);
|
||||
--wa-color-brand-fill-highlight: var(--wa-color-primary-40);
|
||||
--wa-color-brand-border-subtle: var(--wa-color-primary-30);
|
||||
--wa-color-brand-border-highlight: var(--wa-color-primary-40);
|
||||
--wa-color-brand-text-on-spot: var(--wa-color-primary-20);
|
||||
--wa-color-brand-text-on-fill: var(--wa-color-primary-90);
|
||||
--wa-color-brand-text-on-surface: var(--wa-color-primary-70);
|
||||
|
||||
--wa-color-success-spot: var(--wa-color-green-80);
|
||||
--wa-color-success-spot-darker: var(--wa-color-green-60);
|
||||
--wa-color-success-fill-subtle: var(--wa-color-green-30);
|
||||
--wa-color-success-fill-highlight: var(--wa-color-green-40);
|
||||
--wa-color-success-border-subtle: var(--wa-color-green-30);
|
||||
--wa-color-success-border-highlight: var(--wa-color-green-40);
|
||||
--wa-color-success-text-on-spot: var(--wa-color-green-20);
|
||||
--wa-color-success-text-on-fill: var(--wa-color-green-90);
|
||||
--wa-color-success-text-on-surface: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-warning-spot: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-fill-subtle: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-fill-highlight: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-border-subtle: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-highlight: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-text-on-spot: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
|
||||
|
||||
--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-30);
|
||||
--wa-color-danger-fill-highlight: var(--wa-color-red-40);
|
||||
--wa-color-danger-border-subtle: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-highlight: var(--wa-color-red-40);
|
||||
--wa-color-danger-text-on-spot: var(--wa-color-red-20);
|
||||
--wa-color-danger-text-on-fill: var(--wa-color-red-90);
|
||||
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
|
||||
|
||||
--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-20);
|
||||
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-30);
|
||||
--wa-color-neutral-border-highlight: var(--wa-color-base-70);
|
||||
--wa-color-neutral-text-on-spot: var(--wa-color-base-95);
|
||||
--wa-color-neutral-text-on-fill: var(--wa-color-base-90);
|
||||
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.preview-container pre,
|
||||
.preview-container code {
|
||||
background-color: var(--wa-color-base-90);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
.token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-30);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-10);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-30);
|
||||
}
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-border-highlight);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-brand-fill-subtle);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
|
||||
wa-button {
|
||||
--box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-level-1);
|
||||
}
|
||||
|
||||
wa-button[outline] {
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--border-radius: var(--wa-corners-m);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
font-size: var(--wa-font-size-s);
|
||||
--border-color: var(--background);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-activated: var(--wa-color-brand-spot);
|
||||
--pagination-color-resting: var(--wa-color-neutral-fill-highlight);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-button::part(label),
|
||||
wa-tag {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
--border-width: 0;
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) wa-alert {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-95);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-95);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-95);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-95);
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-80);
|
||||
--content-color: var(--wa-color-primary-20);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-80);
|
||||
--content-color: var(--wa-color-green-20);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-80);
|
||||
--content-color: var(--wa-color-yellow-20);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-80);
|
||||
--content-color: var(--wa-color-red-20);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: white;
|
||||
--content-color: var(--wa-color-base-30);
|
||||
}
|
||||
}
|
||||
|
||||
.project-header {
|
||||
background-color: var(--wa-color-warning-fill-highlight);
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 60rem;
|
||||
background: var(--wa-color-warning-fill-highlight) url('/assets/images/kitchen-sink/premium/hero.png') -4rem 12rem no-repeat;
|
||||
background-size: cover;
|
||||
padding-top: var(--wa-space-2xl);
|
||||
padding-left: var(--wa-space-s);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-warning-text-on-fill);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.blog wa-avatar::part(base) {
|
||||
border-radius: var(--wa-corners-circle);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-flow-spacing);
|
||||
right: var(--wa-flow-spacing);
|
||||
}
|
||||
|
||||
.product-card wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.product-card .title {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.product-card .description {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog .authors a {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
--wa-link-decoration-default: none;
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: var(--wa-space-s) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base) {
|
||||
block-size: var(--wa-form-controls-height-s);
|
||||
inline-size: var(--wa-form-controls-height-s);
|
||||
justify-content: center;
|
||||
}
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-highlight);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table th:first-child {
|
||||
border-radius: var(--wa-corners-m) 0 0 0;
|
||||
}
|
||||
|
||||
.support-table th:last-child {
|
||||
border-radius: 0 var(--wa-corners-m) 0 0;
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
--wa-color-surface-border: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.order-item .finish {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wa-theme-premium-dark {
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-subtle: var(--wa-color-base-40);
|
||||
}
|
||||
|
||||
& .preview-container pre,
|
||||
& .preview-container code {
|
||||
background-color: var(--wa-color-base-20);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
& .token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-80);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.strata.hero {
|
||||
background: var(--wa-color-warning-fill-highlight) url('/assets/images/kitchen-sink/premium/hero.png') -4rem 35% no-repeat;
|
||||
padding-top: 15rem;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
|
||||
/* _utility.css */
|
||||
Reference in New Issue
Block a user