diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 3384e5a5d..c3d71266b 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -22,8 +22,10 @@ {# Web Awesome #} - + + + {# Docs styles #} diff --git a/src/themes/chic.css b/src/themes/active.css similarity index 72% rename from src/themes/chic.css rename to src/themes/active.css index 269d65db1..c74891420 100644 --- a/src/themes/chic.css +++ b/src/themes/active.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 */ diff --git a/src/themes/applied.css b/src/themes/applied.css index 124b70b9c..1ba42f7fd 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.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); } diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css new file mode 100644 index 000000000..21e3f14da --- /dev/null +++ b/src/themes/brutalist.css @@ -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 */ diff --git a/src/themes/classic.css b/src/themes/classic.css index 5984979d9..ba1728945 100644 --- a/src/themes/classic.css +++ b/src/themes/classic.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 */ diff --git a/src/themes/color_anodized.css b/src/themes/color_anodized.css new file mode 100644 index 000000000..66f1b2476 --- /dev/null +++ b/src/themes/color_anodized.css @@ -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; +} diff --git a/src/themes/color_bright.css b/src/themes/color_bright.css new file mode 100644 index 000000000..86d1f42ac --- /dev/null +++ b/src/themes/color_bright.css @@ -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; +} diff --git a/src/themes/color_classic.css b/src/themes/color_classic.css new file mode 100644 index 000000000..b053d831a --- /dev/null +++ b/src/themes/color_classic.css @@ -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; +} diff --git a/src/themes/color_elegant.css b/src/themes/color_elegant.css new file mode 100644 index 000000000..3f02c32f0 --- /dev/null +++ b/src/themes/color_elegant.css @@ -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; +} diff --git a/src/themes/color_natural.css b/src/themes/color_natural.css new file mode 100644 index 000000000..1139d10b7 --- /dev/null +++ b/src/themes/color_natural.css @@ -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; +} diff --git a/src/themes/color_rudimentary.css b/src/themes/color_rudimentary.css new file mode 100644 index 000000000..228f3bc8c --- /dev/null +++ b/src/themes/color_rudimentary.css @@ -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; +} diff --git a/src/themes/color_standard.css b/src/themes/color_standard.css new file mode 100644 index 000000000..69a0de611 --- /dev/null +++ b/src/themes/color_standard.css @@ -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; +} diff --git a/src/themes/default.css b/src/themes/default.css index e04510b66..a2169e947 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -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 */ diff --git a/src/themes/depth_4_glossy.css b/src/themes/depth_4_glossy.css index dc2bfecaa..ad5100522 100644 --- a/src/themes/depth_4_glossy.css +++ b/src/themes/depth_4_glossy.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 */ diff --git a/src/themes/fa.css b/src/themes/fa.css index 2476f203b..342fa568c 100644 --- a/src/themes/fa.css +++ b/src/themes/fa.css @@ -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 */ diff --git a/src/themes/glassy.css b/src/themes/glassy.css index 6ee4e63e4..21c0c29c0 100644 --- a/src/themes/glassy.css +++ b/src/themes/glassy.css @@ -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 */ diff --git a/src/themes/mellow.css b/src/themes/mellow.css index 707ca2c34..3e73ad15f 100644 --- a/src/themes/mellow.css +++ b/src/themes/mellow.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 diff --git a/src/themes/migration.css b/src/themes/migration.css new file mode 100644 index 000000000..c67a29d14 --- /dev/null +++ b/src/themes/migration.css @@ -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 */ diff --git a/src/themes/playful.css b/src/themes/playful.css index a3e75ff1e..b206c3637 100644 --- a/src/themes/playful.css +++ b/src/themes/playful.css @@ -1,4 +1,5 @@ -@import 'depth_2_chunky.css'; +@import 'depth_1_semiflat.css'; +@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300;400;500;600;700&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); :root, :host, @@ -13,65 +14,101 @@ * 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: #fcf0ed; - --wa-color-red-90: #f8e0dc; - --wa-color-red-80: #f1beb4; - --wa-color-red-70: #ea9b8c; - --wa-color-red-60: #e27662; - --wa-color-red-50: #d63f23; - --wa-color-red-40: #a2301a; - --wa-color-red-30: #802615; - --wa-color-red-20: #5e1c0f; - --wa-color-red-10: #381109; - --wa-color-red-05: #230a06; + --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: #fbf1da; - --wa-color-yellow-90: #f8e4b5; - --wa-color-yellow-80: #f0c45e; - --wa-color-yellow-70: #dfa525; - --wa-color-yellow-60: #bf8c20; - --wa-color-yellow-50: #986f19; - --wa-color-yellow-40: #725313; - --wa-color-yellow-30: #5a410f; - --wa-color-yellow-20: #422f0b; - --wa-color-yellow-10: #271c06; - --wa-color-yellow-05: #181104; + --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: #e9f5ee; - --wa-color-green-90: #d3ebdd; - --wa-color-green-80: #a1d5b5; - --wa-color-green-70: #70bf8e; - --wa-color-green-60: #3da866; - --wa-color-green-50: #008934; - --wa-color-green-40: #006727; - --wa-color-green-30: #00511f; - --wa-color-green-20: #003c17; + --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: #001609; + --wa-color-green-05: #001607; - --wa-color-rose-95: #fdeff2; - --wa-color-rose-90: #fbdfe6; - --wa-color-rose-80: #f7b9c9; - --wa-color-rose-70: #f293ac; - --wa-color-rose-60: #ed698c; - --wa-color-rose-50: #e41e52; - --wa-color-rose-40: #ad173e; - --wa-color-rose-30: #891231; - --wa-color-rose-20: #660d25; - --wa-color-rose-10: #3e0816; - --wa-color-rose-05: #28050e; + --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-base-95: #f2f2f4; - --wa-color-base-90: #e5e5e9; - --wa-color-base-80: #c8c9d0; - --wa-color-base-70: #adaeb8; - --wa-color-base-60: #9394a1; - --wa-color-base-50: #737586; - --wa-color-base-40: #565864; - --wa-color-base-30: #44454f; - --wa-color-base-20: #313239; - --wa-color-base-10: #1d1d21; - --wa-color-base-05: #121214; + --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; + + --wa-color-primary-95: var(--wa-color-violet-95); + --wa-color-primary-90: var(--wa-color-violet-90); + --wa-color-primary-80: var(--wa-color-violet-80); + --wa-color-primary-70: var(--wa-color-violet-70); + --wa-color-primary-60: var(--wa-color-violet-60); + --wa-color-primary-50: var(--wa-color-violet-50); + --wa-color-primary-40: var(--wa-color-violet-40); + --wa-color-primary-30: var(--wa-color-violet-30); + --wa-color-primary-20: var(--wa-color-violet-20); + --wa-color-primary-10: var(--wa-color-violet-10); + --wa-color-primary-05: var(--wa-color-violet-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 @@ -82,23 +119,23 @@ --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); + --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-40); - --wa-color-text-link: var(--wa-color-brand-text-on-surface); + --wa-color-text-quiet: var(--wa-color-base-50); + --wa-color-text-link: var(--wa-color-yellow-40); /* 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-rose-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-rose-60) 96%, transparent); + --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); @@ -106,13 +143,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% + 6%), + var(--wa-color-base-40) 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: white 6%; - --wa-color-mix-active: black 12%; + --wa-color-mix-hover: black 12%; + --wa-color-mix-active: black 20%; /** * Semantic theme colors @@ -128,89 +165,91 @@ * 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-rose-50); - --wa-color-brand-spot-darker: var(--wa-color-rose-40); - --wa-color-brand-fill-subtle: var(--wa-color-rose-95); - --wa-color-brand-fill-highlight: var(--wa-color-rose-90); - --wa-color-brand-border-subtle: var(--wa-color-rose-90); - --wa-color-brand-border-highlight: var(--wa-color-rose-80); - --wa-color-brand-text-on-spot: white; - --wa-color-brand-text-on-fill: var(--wa-color-rose-40); - --wa-color-brand-text-on-surface: var(--wa-color-rose-50); + --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-80); + --wa-color-brand-border-subtle: var(--wa-color-primary-90); + --wa-color-brand-border-highlight: var(--wa-color-primary-70); + --wa-color-brand-text-on-spot: var(--wa-color-primary-95); + --wa-color-brand-text-on-fill: var(--wa-color-primary-30); + --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-fill-highlight: var(--wa-color-green-80); --wa-color-success-border-subtle: var(--wa-color-green-90); - --wa-color-success-border-highlight: var(--wa-color-green-80); - --wa-color-success-text-on-spot: white; - --wa-color-success-text-on-fill: var(--wa-color-green-40); + --wa-color-success-border-highlight: var(--wa-color-green-70); + --wa-color-success-text-on-spot: var(--wa-color-green-95); + --wa-color-success-text-on-fill: var(--wa-color-green-30); --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-fill-highlight: var(--wa-color-yellow-80); --wa-color-warning-border-subtle: var(--wa-color-yellow-90); - --wa-color-warning-border-highlight: var(--wa-color-yellow-80); - --wa-color-warning-text-on-spot: white; - --wa-color-warning-text-on-fill: var(--wa-color-yellow-40); + --wa-color-warning-border-highlight: var(--wa-color-yellow-70); + --wa-color-warning-text-on-spot: var(--wa-color-yellow-95); + --wa-color-warning-text-on-fill: var(--wa-color-yellow-30); --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-fill-highlight: var(--wa-color-red-80); --wa-color-danger-border-subtle: var(--wa-color-red-90); - --wa-color-danger-border-highlight: var(--wa-color-red-80); - --wa-color-danger-text-on-spot: white; - --wa-color-danger-text-on-fill: var(--wa-color-red-40); + --wa-color-danger-border-highlight: var(--wa-color-red-70); + --wa-color-danger-text-on-spot: var(--wa-color-red-95); + --wa-color-danger-text-on-fill: var(--wa-color-red-30); --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-95); - --wa-color-neutral-fill-highlight: var(--wa-color-base-90); + --wa-color-neutral-fill-highlight: var(--wa-color-base-80); --wa-color-neutral-border-subtle: var(--wa-color-base-90); --wa-color-neutral-border-highlight: var(--wa-color-base-80); - --wa-color-neutral-text-on-spot: white; - --wa-color-neutral-text-on-fill: var(--wa-color-base-40); + --wa-color-neutral-text-on-spot: var(--wa-color-base-95); + --wa-color-neutral-text-on-fill: var(--wa-color-base-30); --wa-color-neutral-text-on-surface: var(--wa-color-base-50); /** * Typography */ - --wa-font-family-heading: 'Roboto Slab', sans-serif; - --wa-font-family-body: 'Roboto Flex', sans-serif; - --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; + --wa-font-family-heading: 'Fredoka', serif; + --wa-font-family-body: 'Nunito', sans-serif; + --wa-font-family-code: 'Azeret 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: 600; - --wa-font-weight-heavy: 800; + --wa-font-weight-heavy: 700; + --wa-font-weight-black: 800; - --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); + --wa-font-weight-heading: var(--wa-font-weight-medium); + --wa-font-weight-body: var(--wa-font-weight-medium); + --wa-font-weight-action: var(--wa-font-weight-normal); - /* 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-root: 18px; --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-size-xl: 1.333rem; /* 24px */ + --wa-font-size-2xl: 1.666rem; /* 30px */ + --wa-font-size-3xl: 2.222rem; /* 41px */ + --wa-font-size-4xl: 3.1rem; /* 56px */ --wa-font-line-height-compact: 1.25; --wa-font-line-height-regular: 1.6; - --wa-font-line-height-comfortable: 2; + --wa-font-line-height-comfortable: 2.2; /** * Spacing @@ -225,7 +264,7 @@ */ /* 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.125; + --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 */ @@ -243,27 +282,27 @@ /* 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-base: calc(2 / 18); --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-border-width-m: calc(var(--wa-border-width-base) * 1.5rem); + --wa-border-width-l: calc(var(--wa-border-width-base) * 2rem); --wa-form-controls-border-style: var(--wa-border-style); - --wa-form-controls-border-width: var(--wa-border-width-s); + --wa-form-controls-border-width: var(--wa-border-width-l); --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); + --wa-panel-border-width: 0rem; /** * Corners */ /* Corners are designed to scale according to a single base value. * The base value is intended for calculations and is not used by components directly. */ - --wa-corners-base: 0.5; - --wa-corners-xs: calc(var(--wa-corners-base) * 0.75rem); - --wa-corners-s: calc(var(--wa-corners-base) * 1rem); - --wa-corners-m: calc(var(--wa-corners-base) * 2rem); - --wa-corners-l: calc(var(--wa-corners-base) * 3rem); + --wa-corners-base: calc(8 / 18); + --wa-corners-xs: calc(var(--wa-corners-base) * 1rem); + --wa-corners-s: calc(var(--wa-corners-base) * 1.5rem); + --wa-corners-m: calc(var(--wa-corners-base) * 3rem); + --wa-corners-l: calc(var(--wa-corners-base) * 5rem); /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */ --wa-corners-pill: 9999px; @@ -281,7 +320,7 @@ /** * Links */ - --wa-link-decoration-default: underline; + --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted; --wa-link-decoration-hover: underline; /** @@ -296,16 +335,16 @@ /** * Transitions */ - --wa-transition-normal: 200ms; - --wa-transition-fast: 100ms; + --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-background: transparent; - --wa-form-controls-corners: var(--wa-corners-s); + --wa-form-controls-corners: var(--wa-corners-pill); --wa-form-controls-activated-color: var(--wa-color-brand-spot); --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight); @@ -342,6 +381,10 @@ * From 2.x */ --wa-tooltip-arrow-size: 0.375rem; + + /* Depth */ + --wa-shadow-blur-base: 0.5; + --wa-shadow-offset-y-base: 0.375; } .wa-theme-playful-dark, @@ -351,23 +394,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-raised: var(--wa-color-base-20); + --wa-color-surface-default: var(--wa-color-base-10); + --wa-color-surface-lowered: var(--wa-color-base-10); --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-text-quiet: var(--wa-color-base-70); + --wa-color-text-link: var(--wa-color-yellow-80); - --wa-color-selection-background: var(--wa-color-rose-40); + --wa-color-selection-background: var(--wa-color-green-40); --wa-color-selection-text: white; - --wa-color-focus: color-mix(in oklab, var(--wa-color-rose-60) 90%, transparent); + --wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 90%, transparent); --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-40) calc(var(--wa-shadow-blur-base) * 16% + 40%), + transparent + ); --wa-color-mix-hover: black 8%; --wa-color-mix-active: black 16%; @@ -375,81 +422,590 @@ /** * Semantic theme colors */ - --wa-color-brand-spot: var(--wa-color-rose-50); - --wa-color-brand-spot-darker: var(--wa-color-rose-40); - --wa-color-brand-fill-subtle: var(--wa-color-rose-10); - --wa-color-brand-fill-highlight: var(--wa-color-rose-20); - --wa-color-brand-border-subtle: var(--wa-color-rose-20); - --wa-color-brand-border-highlight: var(--wa-color-rose-30); - --wa-color-brand-text-on-spot: white; - --wa-color-brand-text-on-fill: var(--wa-color-rose-70); - --wa-color-brand-text-on-surface: var(--wa-color-rose-60); + --wa-color-brand-spot: var(--wa-color-primary-50); + --wa-color-brand-spot-darker: var(--wa-color-primary-60); + --wa-color-brand-fill-subtle: var(--wa-color-primary-20); + --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-95); + --wa-color-brand-text-on-fill: var(--wa-color-primary-95); + --wa-color-brand-text-on-surface: var(--wa-color-primary-70); - --wa-color-success-spot: var(--wa-color-green-50); - --wa-color-success-spot-darker: var(--wa-color-green-40); - --wa-color-success-fill-subtle: var(--wa-color-green-10); - --wa-color-success-fill-highlight: var(--wa-color-green-20); - --wa-color-success-border-subtle: var(--wa-color-green-20); - --wa-color-success-border-highlight: var(--wa-color-green-30); - --wa-color-success-text-on-spot: white; - --wa-color-success-text-on-fill: var(--wa-color-green-70); - --wa-color-success-text-on-surface: var(--wa-color-green-60); + --wa-color-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-20); + --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-95); + --wa-color-success-text-on-surface: var(--wa-color-green-70); - --wa-color-warning-spot: var(--wa-color-yellow-50); - --wa-color-warning-spot-darker: var(--wa-color-yellow-40); - --wa-color-warning-fill-subtle: var(--wa-color-yellow-10); - --wa-color-warning-fill-highlight: var(--wa-color-yellow-20); - --wa-color-warning-border-subtle: var(--wa-color-yellow-20); - --wa-color-warning-border-highlight: var(--wa-color-yellow-30); - --wa-color-warning-text-on-spot: white; - --wa-color-warning-text-on-fill: var(--wa-color-yellow-70); - --wa-color-warning-text-on-surface: var(--wa-color-yellow-60); + --wa-color-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-20); + --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-95); + --wa-color-warning-text-on-surface: var(--wa-color-yellow-70); - --wa-color-danger-spot: var(--wa-color-red-50); + --wa-color-danger-spot: var(--wa-color-red-60); --wa-color-danger-spot-darker: var(--wa-color-red-40); - --wa-color-danger-fill-subtle: var(--wa-color-red-10); - --wa-color-danger-fill-highlight: var(--wa-color-red-20); - --wa-color-danger-border-subtle: var(--wa-color-red-20); - --wa-color-danger-border-highlight: var(--wa-color-red-30); - --wa-color-danger-text-on-spot: white; - --wa-color-danger-text-on-fill: var(--wa-color-red-70); - --wa-color-danger-text-on-surface: var(--wa-color-red-60); + --wa-color-danger-fill-subtle: var(--wa-color-red-20); + --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-95); + --wa-color-danger-text-on-surface: var(--wa-color-red-70); - --wa-color-neutral-spot: var(--wa-color-base-50); - --wa-color-neutral-spot-darker: var(--wa-color-base-40); - --wa-color-neutral-fill-subtle: var(--wa-color-base-10); - --wa-color-neutral-fill-highlight: var(--wa-color-base-20); - --wa-color-neutral-border-subtle: var(--wa-color-base-20); - --wa-color-neutral-border-highlight: var(--wa-color-base-30); - --wa-color-neutral-text-on-spot: white; - --wa-color-neutral-text-on-fill: var(--wa-color-base-70); - --wa-color-neutral-text-on-surface: var(--wa-color-base-60); + --wa-color-neutral-spot: var(--wa-color-base-40); + --wa-color-neutral-spot-darker: var(--wa-color-base-70); + --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-40); + --wa-color-neutral-text-on-spot: var(--wa-color-base-20); + --wa-color-neutral-text-on-fill: var(--wa-color-base-95); + --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) { + .preview-container pre { + border-radius: var(--wa-corners-m); + background-color: var(--wa-color-base-90); } - &[variant='success'] { - --border-color: var(--wa-color-success-spot-darker); + .preview-container code { + font-weight: var(--wa-font-weight-normal); + font-size: var(--wa-font-size-s); } - &[variant='neutral'] { - --border-color: var(--wa-color-neutral-spot-darker); + /* syntax highlighting */ + .token { + &.selector { + color: var(--wa-color-green-50); + } + + &.tag { + color: var(--wa-color-blue-50); + } + + &.punctuation { + color: var(--wa-color-base-10); + } + + &.attr-name { + color: var(--wa-color-green-50); + } + + &.attr-value { + color: var(--wa-color-yellow-50); + } } - &[variant='warning'] { - --border-color: var(--wa-color-warning-spot-darker); + wa-rating { + --symbol-size: var(--wa-font-size-m); + --symbol-color: color-mix(in oklab, var(--symbol-color-active) 50%, transparent); } - &[variant='danger'] { - --border-color: var(--wa-color-danger-spot-darker); + wa-switch { + --background: var(--wa-surface-default); + --border-width: var(--wa-form-controls-border-width); + --thumb-color: var(--wa-form-controls-resting-color); + --thumb-color-checked: var(--wa-color-base-95); + --thumb-size: 0.8em; + --height: 1.5em; + --width: calc(var(--thumb-size) * 3); + } + + wa-switch::part(thumb) { + --border-width: 0; + box-shadow: none; + } + + wa-switch[checked]::part(thumb) { + box-shadow: 0 2px 2px var(--wa-color-primary-40); + } + + /* preventing shadows on all form input types */ + wa-input:not(:focus), + wa-input:not([filled]):not([disabled]), + wa-checkbox:not([checked]):not([indeterminate]), + wa-select:not([filled]):not([disabled]) { + --box-shadow: var(--wa-shadow-level-0); + } + + wa-checkbox[checked] { + --box-shadow: var(--wa-shadow-level-1); + --background-checked: linear-gradient( + 180deg, + var(--wa-color-primary-40) 0%, + var(--wa-color-primary-50) 51.88%, + var(--wa-color-primary-60) 100% + ); + } + + wa-button { + --button-gradient-top: var(--wa-color-base-40); + --button-gradient-middle: var(--wa-color-base-50); + --button-gradient-bottom: var(--wa-color-base-60); + --button-shadow-outer: var(--wa-color-base-60); + --button-shadow-inner-a: var(--wa-color-base-30); + --button-shadow-inner-b: var(--wa-color-base-80); + --button-text-shadow: var(--wa-color-base-40); + --background: linear-gradient( + 180deg, + var(--button-gradient-top) 0%, + var(--button-gradient-middle) 51.88%, + var(--button-gradient-bottom) 100% + ); + --box-shadow: 0px 6px 16px var(--button-shadow-outer), inset 0 -2px 8px var(--button-shadow-inner-a), + inset 0 2px 8px var(--button-shadow-inner-b); + --border-color: var(--button-gradient-middle); + --border-width: 1px; + --background-hover: linear-gradient( + 180deg, + var(--button-gradient-bottom) 0%, + var(--button-gradient-middle) 51.88%, + var(--button-gradient-top) 100% + ); + --border-color-hover: var(--button-gradient-middle); + --background-active: linear-gradient( + 180deg, + color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%, + color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%, + color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100% + ); + --border-color-active: var(--button-gradient-middle); + --wa-shadow-offset-y-level-1: 0; + + &::part(prefix) { + padding-inline-start: calc(0.25em - var(--border-width)); + } + &::part(suffix), + &::part(caret) { + padding-inline-end: calc(0.25em - var(--border-width)); + } + + &[variant='brand'] { + --button-gradient-top: var(--wa-color-primary-40); + --button-gradient-middle: var(--wa-color-primary-50); + --button-gradient-bottom: var(--wa-color-primary-60); + --button-shadow-outer: var(--wa-color-primary-60); + --button-shadow-inner-a: var(--wa-color-primary-30); + --button-shadow-inner-b: var(--wa-color-primary-80); + --button-text-shadow: var(--wa-color-primary-40); + --label-color: var(--wa-color-primary-95); + } + + &[variant='success'] { + --button-gradient-top: var(--wa-color-green-40); + --button-gradient-middle: var(--wa-color-green-50); + --button-gradient-bottom: var(--wa-color-green-60); + --button-shadow-outer: var(--wa-color-green-60); + --button-shadow-inner-a: var(--wa-color-green-30); + --button-shadow-inner-b: var(--wa-color-green-80); + --button-text-shadow: var(--wa-color-green-40); + } + + &[variant='warning'] { + --button-gradient-top: var(--wa-color-yellow-40); + --button-gradient-middle: var(--wa-color-yellow-50); + --button-gradient-bottom: var(--wa-color-yellow-60); + --button-shadow-outer: var(--wa-color-yellow-60); + --button-shadow-inner-a: var(--wa-color-yellow-30); + --button-shadow-inner-b: var(--wa-color-yellow-80); + --button-text-shadow: var(--wa-color-yellow-40); + } + + &[variant='danger'] { + --button-gradient-top: var(--wa-color-red-40); + --button-gradient-middle: var(--wa-color-red-50); + --button-gradient-bottom: var(--wa-color-red-60); + --button-shadow-outer: var(--wa-color-red-60); + --button-shadow-inner-a: var(--wa-color-red-30); + --button-shadow-inner-b: var(--wa-color-red-80); + --button-text-shadow: var(--wa-color-red-40); + } + + &[variant='neutral'] { + --button-gradient-top: var(--wa-color-base-40); + --button-gradient-middle: var(--wa-color-base-50); + --button-gradient-bottom: var(--wa-color-base-60); + --button-shadow-outer: var(--wa-color-base-60); + --button-shadow-inner-a: var(--wa-color-base-30); + --button-shadow-inner-b: var(--wa-color-base-80); + --button-text-shadow: var(--wa-color-base-40); + } + + &::part(base) { + transition: all 0.05s ease-out; + } + + &::part(base):hover { + transform: scale(1.02, 1.02); + background: var(--background-hover); + } + + &::part(base):active { + background: var(--background-active); + --box-shadow: inset 0 -2px 8px var(--button-shadow-inner-a), inset 0 2px 8px var(--button-shadow-inner-b); + transform: scale(0.98, 0.98); + } + } + + wa-button::part(label), + wa-button wa-icon { + font-weight: var(--wa-font-weight-black); + text-shadow: 0 2px 2px var(--button-text-shadow); + } + + wa-button[outline] { + --box-shadow: none; + --border-width: var(--wa-form-controls-border-width); + --label-color: var(--wa-color-neutral-text-on-fill); + --label-color-hover: var(--wa-color-neutral-text-on-spot); + + &::part(label) { + text-shadow: none; + } + } + + wa-carousel img { + border-radius: var(--wa-panel-corners); + box-shadow: none; + } + + wa-alert { + --border-style: dashed; + --border-width: var(--wa-form-controls-border-width); + --icon-size: var(--wa-font-size-l); + --padding: var(--wa-space-s); + font-size: var(--wa-font-size-s); + + &::part(message) { + padding-inline-start: var(--wa-space-l); + } + } + + wa-tag { + --border-radius: var(--wa-corners-pill); + --border-width: var(--wa-border-width-m); + --border-style: dashed; + font-weight: var(--wa-font-weight-heavy); + + &[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-badge { + --border-radius: var(--wa-corners-pill); + --border-width: 0; + + &[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 { + color: var(--wa-color-success-text-on-fill); + } + + .hero-background { + position: absolute; + z-index: -1; + top: -60rem; + left: 50%; + width: 250rem; + height: 250rem; + transform: translate(-50%, -50%); + flex-shrink: 0; + border-radius: 50%; + background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%); + } + + .hero-background::after { + background: url(/assets/images/kitchen-sink/playful/hero.png) 0 50% no-repeat; + content: ''; + position: absolute; + width: 520px; + height: 600px; + transform: translateX(-50%); + left: 50%; + bottom: 33rem; + } + + .strata.hero { + padding-top: 19rem; + text-align: center; + } + + .hero .hero-title { + color: var(--wa-color-success-text-on-fill); + font-size: var(--wa-font-size-4xl); + } + + .hero .hero-cta { + font-size: var(--wa-font-size-l); + } + + .product-card .badge-stock { + position: absolute; + top: var(--wa-flow-spacing); + right: var(--wa-flow-spacing); + } + + .product-card { + --wa-panel-corners: var(--wa-corners-l); + } + + .product-card::part(footer) { + border-width: 0; + } + + .product-card wa-button { + margin-inline-end: var(--wa-space-xs); + } + + .blog wa-avatar { + --size: 2rem; + } + + .blog .landscape-frame { + border-radius: var(--wa-corners-l); + box-shadow: var(--wa-shadow-level-1); + } + + .message-composer wa-card { + --background: var(--wa-color-surface-raised); + } + + .message-composer wa-card::part(header) { + --wa-color-neutral-border-subtle: var(--wa-color-base-70); + 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-90); + } + + .message-composer wa-icon-button { + color: var(--wa-text-color-normal); + font-size: var(--wa-font-size-l); + } + + .message-composer wa-card::part(footer) { + padding-top: 0; + } + + .product-detail .price { + font-weight: var(--wa-font-weight-heavy); + } + + .support-table wa-card { + --background: var(--wa-color-surface-raised); + } + + .support-table th { + font-size: var(--wa-font-size-s); + font-weight: var(--wa-font-weight-heavy); + background-color: var(--wa-color-surface-lowered); + } + + .support-table tr { + border-top-color: var(--wa-color-surface-lowered); + } + + .support-table .excerpt { + color: var(--wa-color-text-quiet); + } + + .order-item img { + border-radius: var(--wa-corners-s); + } + + .checkout-form { + font-size: var(--wa-font-size-s); + } + + .checkout-form h2 { + font-size: var(--wa-font-size-3xl); + } + + .checkout-form wa-input::part(form-control-label), + .checkout-form wa-select::part(form-control-label) { + font-size: var(--wa-font-size-s); + padding-block-end: var(--wa-space-xs); + } + + .wa-theme-playful-dark { + & wa-button { + --button-gradient-top: var(--wa-color-base-60); + --button-gradient-middle: var(--wa-color-base-80); + --button-gradient-bottom: var(--wa-color-base-95); + --button-shadow-outer: var(--wa-color-base-30); + --button-shadow-inner-a: var(--wa-color-base-40); + --button-shadow-inner-b: var(--wa-color-base-50); + --button-text-shadow: var(--wa-color-base-70); + --border-color: var(--button-gradient-middle); + --box-shadow: 0px -6px 16px color-mix(in oklab, var(--button-shadow-outer), transparent 50%), + inset 0 -2px 8px var(--button-shadow-inner-a), inset 0 2px 8px var(--button-shadow-inner-b); + + &[variant='brand'] { + --button-gradient-top: var(--wa-color-primary-40); + --button-gradient-middle: var(--wa-color-primary-50); + --button-gradient-bottom: var(--wa-color-primary-60); + --button-shadow-outer: var(--wa-color-primary-60); + --button-shadow-inner-a: var(--wa-color-primary-30); + --button-shadow-inner-b: var(--wa-color-primary-80); + --button-text-shadow: var(--wa-color-primary-40); + --label-color: var(--wa-color-primary-95); + } + + &[variant='success'] { + --button-gradient-top: var(--wa-color-green-40); + --button-gradient-middle: var(--wa-color-green-50); + --button-gradient-bottom: var(--wa-color-green-60); + --button-shadow-outer: var(--wa-color-green-60); + --button-shadow-inner-a: var(--wa-color-green-30); + --button-shadow-inner-b: var(--wa-color-green-80); + --button-text-shadow: var(--wa-color-green-40); + } + + &[variant='warning'] { + --button-gradient-top: var(--wa-color-yellow-40); + --button-gradient-middle: var(--wa-color-yellow-50); + --button-gradient-bottom: var(--wa-color-yellow-60); + --button-shadow-outer: var(--wa-color-yellow-60); + --button-shadow-inner-a: var(--wa-color-yellow-30); + --button-shadow-inner-b: var(--wa-color-yellow-80); + --button-text-shadow: var(--wa-color-yellow-40); + } + + &[variant='danger'] { + --button-gradient-top: var(--wa-color-red-40); + --button-gradient-middle: var(--wa-color-red-50); + --button-gradient-bottom: var(--wa-color-red-60); + --button-shadow-outer: var(--wa-color-red-60); + --button-shadow-inner-a: var(--wa-color-red-30); + --button-shadow-inner-b: var(--wa-color-red-80); + --button-text-shadow: var(--wa-color-red-40); + } + + &[variant='neutral'] { + --button-gradient-top: var(--wa-color-base-70); + --button-gradient-middle: var(--wa-color-base-80); + --button-gradient-bottom: var(--wa-color-base-90); + --button-shadow-outer: var(--wa-color-base-60); + --button-shadow-inner-a: var(--wa-color-base-60); + --button-shadow-inner-b: var(--wa-color-base-95); + --button-text-shadow: var(--wa-color-base-60); + } + } + + & wa-button[outline] { + --box-shadow: none; + --border-color: var(--wa-color-neutral-border-highlight); + } + + & wa-card { + --box-shadow: none; + --border-width: var(--wa-border-width-s); + } + + & .hero-background { + background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%); + } + + & .preview-container pre { + background-color: var(--wa-color-base-20); + } + + /* syntax highlighting */ + & .token { + &.selector { + color: var(--wa-color-green-80); + } + + &.tag { + color: var(--wa-color-blue-80); + } + + &.punctuation { + color: var(--wa-color-base-95); + } + + &.attr-name { + color: var(--wa-color-green-80); + } + + &.attr-value { + color: var(--wa-color-yellow-80); + } + } + + & .message-composer wa-card { + --border-color: var(--wa-color-base-30); + } + + & .message-composer wa-card::part(header) { + background: var(--wa-color-base-40); + } + + & .message-composer wa-card::part(footer) { + border-top: 0; + } + + & .message-composer .tools .grouped-buttons:not(:last-of-type) { + --wa-color-neutral-border-subtle: var(--wa-color-base-40); + } + + & .support-table th { + background: var(--wa-color-surface-lowered); + } + } +} +/* responsive */ +@container preview (min-width: 1040px) and (max-width: 1140px) { + .product-card wa-button { + font-size: 80%; + margin-inline-end: 0; } } /* #endregion */ diff --git a/src/themes/premium.css b/src/themes/premium.css new file mode 100644 index 000000000..f2c812d8b --- /dev/null +++ b/src/themes/premium.css @@ -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 */