From 545eb467fc573bc1ff4bbc57e3a46674c5b26d03 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 13 Sep 2023 17:51:21 -0400 Subject: [PATCH] add theme tokens, update usage, add dark mode --- cspell.json | 1 + docs/assets/styles/docs.css | 2 +- src/components/alert/alert.styles.ts | 12 +- src/components/card/card.styles.ts | 4 +- src/components/checkbox/checkbox.styles.ts | 2 +- src/components/details/details.styles.ts | 2 +- src/components/dialog/dialog.styles.ts | 4 +- src/components/drawer/drawer.styles.ts | 2 +- .../progress-bar/progress-bar.styles.ts | 4 +- .../progress-ring/progress-ring.styles.ts | 2 +- src/components/skeleton/skeleton.styles.ts | 4 +- src/components/spinner/spinner.styles.ts | 2 +- src/themes/default.css | 117 ++++++++++++++++-- 13 files changed, 131 insertions(+), 27 deletions(-) diff --git a/cspell.json b/cspell.json index cac686efd..138d03d8b 100644 --- a/cspell.json +++ b/cspell.json @@ -89,6 +89,7 @@ "listbox", "listitem", "litelement", + "longform", "lowercasing", "Lucide", "maxlength", diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 07cdbb46e..bdeb0822b 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -1,5 +1,5 @@ :root { - --docs-background-color: var(--wa-color-surface-raised); + --docs-background-color: var(--wa-color-surface-default); --docs-content-max-width: 860px; --docs-sidebar-width: 320px; --docs-sidebar-transition-speed: 250ms; diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts index a9d924001..6211edcec 100644 --- a/src/components/alert/alert.styles.ts +++ b/src/components/alert/alert.styles.ts @@ -15,7 +15,7 @@ export default css` position: relative; display: flex; align-items: stretch; - border-radius: var(--wa-corners-1x); + border-radius: var(--wa-panel-corners); font: inherit; margin: inherit; } @@ -35,31 +35,31 @@ export default css` .alert--brand { background-color: var(--wa-color-brand-fill-muted); - border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-outline-muted); + border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-brand-outline-muted); color: var(--wa-color-brand-text-on-muted); } .alert--success { background-color: var(--wa-color-success-fill-muted); - border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-outline-muted); + border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-success-outline-muted); color: var(--wa-color-success-text-on-muted); } .alert--neutral { background-color: var(--wa-color-neutral-fill-muted); - border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-outline-muted); + border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-outline-muted); color: var(--wa-color-neutral-text-on-muted); } .alert--warning { background-color: var(--wa-color-warning-fill-muted); - border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-outline-muted); + border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-warning-outline-muted); color: var(--wa-color-warning-text-on-muted); } .alert--danger { background-color: var(--wa-color-danger-fill-muted); - border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-outline-muted); + border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-danger-outline-muted); color: var(--wa-color-danger-text-on-muted); } diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index 1d6e1a826..26086a512 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -6,8 +6,8 @@ export default css` :host { --border-color: var(--wa-color-surface-outline); - --border-radius: var(--wa-corners-1x); - --border-width: var(--wa-border-width-thin); + --border-radius: var(--wa-panel-corners); + --border-width: var(--wa-panel-border-width); --padding: var(--wa-space-l); display: inline-block; diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index 684612541..f6b3b69c5 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -42,7 +42,7 @@ export default css` width: var(--toggle-size); height: var(--toggle-size); border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting); - border-radius: 2px; + border-radius: var(--wa-corners-half); background-color: var(--wa-form-controls-background); color: var(--wa-form-controls-text-color); transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color, diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts index 0fa09d4d3..538081d6e 100644 --- a/src/components/details/details.styles.ts +++ b/src/components/details/details.styles.ts @@ -10,7 +10,7 @@ export default css` .details { border: solid 1px var(--wa-color-surface-outline); - border-radius: var(--wa-corners-1x); + border-radius: var(--wa-panel-corners); background-color: var(--wa-color-surface-default); overflow-anchor: none; } diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts index aa0bf1f08..8dd5bcf5c 100644 --- a/src/components/dialog/dialog.styles.ts +++ b/src/components/dialog/dialog.styles.ts @@ -33,7 +33,7 @@ export default css` max-width: calc(100% - var(--wa-space-2xl)); max-height: calc(100% - var(--wa-space-2xl)); background-color: var(--wa-color-surface-raised); - border-radius: var(--wa-corners-1x); + border-radius: var(--wa-panel-corners); box-shadow: var(--wa-shadow-level-3); } @@ -112,7 +112,7 @@ export default css` right: 0; bottom: 0; left: 0; - background-color: var(--wa-overlay-color); + background-color: var(--wa-color-overlay); } @media (forced-colors: active) { diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts index 40d3a9ae1..17c198414 100644 --- a/src/components/drawer/drawer.styles.ts +++ b/src/components/drawer/drawer.styles.ts @@ -143,7 +143,7 @@ export default css` right: 0; bottom: 0; left: 0; - background-color: var(--wa-overlay-color); + background-color: var(--wa-color-overlay); pointer-events: all; } diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts index 092d8f1cb..ab305601b 100644 --- a/src/components/progress-bar/progress-bar.styles.ts +++ b/src/components/progress-bar/progress-bar.styles.ts @@ -6,7 +6,7 @@ export default css` :host { --height: 1rem; - --track-color: var(--wa-color-neutral-fill-muted); + --track-color: var(--wa-color-neutral-fill-muted-alt); --indicator-color: var(--wa-color-brand-fill-vivid); --label-color: var(--wa-color-brand-text-on-vivid); @@ -18,7 +18,7 @@ export default css` background-color: var(--track-color); height: var(--height); border-radius: var(--wa-corners-pill); - box-shadow: inset var(--wa-shadow-level-1); + box-shadow: var(--wa-shadow-inset); overflow: hidden; } diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts index 3d2e79c4d..c48334dd7 100644 --- a/src/components/progress-ring/progress-ring.styles.ts +++ b/src/components/progress-ring/progress-ring.styles.ts @@ -7,7 +7,7 @@ export default css` :host { --size: 8rem; --track-width: 0.25rem; - --track-color: var(--wa-color-neutral-fill-muted); + --track-color: var(--wa-color-neutral-fill-muted-alt); --indicator-width: var(--track-width); --indicator-color: var(--wa-color-brand-fill-vivid); --indicator-transition-duration: 0.35s; diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts index 9d7cd87ce..f05d50e26 100644 --- a/src/components/skeleton/skeleton.styles.ts +++ b/src/components/skeleton/skeleton.styles.ts @@ -6,8 +6,8 @@ export default css` :host { --border-radius: var(--wa-corners-pill); - --color: var(--wa-color-neutral-fill-muted); - --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), white 50%); + --color: var(--wa-color-neutral-fill-muted-alt); + --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted-alt), var(--wa-color-surface-raised) 30%); display: block; position: relative; diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts index c89aab34e..cb5e93205 100644 --- a/src/components/spinner/spinner.styles.ts +++ b/src/components/spinner/spinner.styles.ts @@ -6,7 +6,7 @@ export default css` :host { --track-width: 2px; - --track-color: var(--wa-color-neutral-fill-muted); + --track-color: var(--wa-color-neutral-fill-muted-alt); --indicator-color: var(--wa-color-brand-fill-vivid); --speed: 2s; diff --git a/src/themes/default.css b/src/themes/default.css index ccc1c324a..d8ca0ca78 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -75,7 +75,6 @@ --wa-color-text-normal: var(--wa-color-neutral-10); --wa-color-text-quiet: var(--wa-color-neutral-40); --wa-color-text-inverse: var(--wa-color-white); - --wa-color-text-link: var(--wa-color-brand-text-on-surface); --wa-color-selection-background: var(--wa-color-blue-80); @@ -89,6 +88,10 @@ --wa-color-tint-hover: black 8%; --wa-color-tint-active: black 16%; + --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent); + + --wa-color-shadow: rgb(0 0 0 / 0.06); + /** * Semantic color variants */ @@ -242,10 +245,11 @@ /** * Shadows */ + --wa-shadow-inset: inset 0 0.0625rem 0 var(--wa-color-shadow); --wa-shadow-level-0: none; - --wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.08); - --wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.06); - --wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.04); + --wa-shadow-level-1: 0 0.0625rem 0.125rem var(--wa-color-shadow); + --wa-shadow-level-2: 0 0.125rem 0.25rem var(--wa-color-shadow); + --wa-shadow-level-3: 0 0.25rem 0.5rem var(--wa-color-shadow); /** * Z-index @@ -266,7 +270,7 @@ /** * Form controls */ - --wa-form-controls-background: var(--wa-color-surface-raised); + --wa-form-controls-background: var(--wa-color-surface-default); --wa-form-controls-border-style: var(--wa-border-style); --wa-form-controls-border-width: var(--wa-border-width-thin); --wa-form-controls-corners: var(--wa-corners-1x); @@ -277,6 +281,12 @@ --wa-form-controls-padding: var(--wa-space-square-s); --wa-form-controls-placeholder-color: var(--wa-color-neutral-60); + /** + * Panels + */ + --wa-panel-border-width: var(--wa-border-width-thin); + --wa-panel-corners: var(--wa-corners-2x); + /** * From 2.x */ @@ -290,9 +300,102 @@ --wa-form-controls-required-content-color: inherit; --wa-form-controls-required-content-offset: -0.1em; - --wa-overlay-color: hsl(240 3.8% 46.1% / 33%); - --wa-tooltip-arrow-size: 0.375rem; } +:root.wa-theme-default-dark { + color-scheme: dark; + + /** + * App + */ + --wa-color-surface-raised: var(--wa-color-neutral-10); + --wa-color-surface-default: var(--wa-color-neutral-10); + --wa-color-surface-lowered: var(--wa-color-black); + --wa-color-surface-outline: var(--wa-color-neutral-20); + + --wa-color-text-normal: var(--wa-color-neutral-95); + --wa-color-text-quiet: var(--wa-color-neutral-60); + --wa-color-text-inverse: var(--wa-color-neutral-10); + --wa-color-text-link: var(--wa-color-brand-text-on-surface); + + --wa-color-selection-background: var(--wa-color-blue-40); + --wa-color-selection-text: var(--wa-color-white); + + --wa-color-focus: var(--wa-color-blue-50); + + --wa-color-tint-white: rgb(255 255 255 / 0.2); + --wa-color-tint-black: rgb(0 0 0 / 0.2); + + --wa-color-tint-hover: black 8%; + --wa-color-tint-active: black 16%; + + --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent); + + --wa-color-shadow: rgb(0 0 0 / 0.25); + + /** + * Semantic color variants + */ + --wa-color-brand-fill-vivid: var(--wa-color-blue-50); + --wa-color-brand-fill-vivid-alt: var(--wa-color-blue-30); + --wa-color-brand-fill-muted: var(--wa-color-blue-10); + --wa-color-brand-fill-muted-alt: var(--wa-color-blue-20); + --wa-color-brand-outline-vivid: var(--wa-color-blue-50); + --wa-color-brand-outline-vivid-alt: var(--wa-color-blue-40); + --wa-color-brand-outline-muted: var(--wa-color-blue-20); + --wa-color-brand-outline-muted-alt: var(--wa-color-blue-30); + --wa-color-brand-text-on-vivid: var(--wa-color-white); + --wa-color-brand-text-on-muted: var(--wa-color-blue-70); + --wa-color-brand-text-on-surface: var(--wa-color-blue-60); + + --wa-color-success-fill-vivid: var(--wa-color-green-50); + --wa-color-success-fill-vivid-alt: var(--wa-color-green-30); + --wa-color-success-fill-muted: var(--wa-color-green-10); + --wa-color-success-fill-muted-alt: var(--wa-color-green-20); + --wa-color-success-outline-vivid: var(--wa-color-green-50); + --wa-color-success-outline-vivid-alt: var(--wa-color-green-40); + --wa-color-success-outline-muted: var(--wa-color-green-20); + --wa-color-success-outline-muted-alt: var(--wa-color-green-30); + --wa-color-success-text-on-vivid: var(--wa-color-white); + --wa-color-success-text-on-muted: var(--wa-color-green-70); + --wa-color-success-text-on-surface: var(--wa-color-green-60); + + --wa-color-warning-fill-vivid: var(--wa-color-yellow-50); + --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30); + --wa-color-warning-fill-muted: var(--wa-color-yellow-10); + --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20); + --wa-color-warning-outline-vivid: var(--wa-color-yellow-50); + --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40); + --wa-color-warning-outline-muted: var(--wa-color-yellow-20); + --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30); + --wa-color-warning-text-on-vivid: var(--wa-color-white); + --wa-color-warning-text-on-muted: var(--wa-color-yellow-70); + --wa-color-warning-text-on-surface: var(--wa-color-yellow-60); + + --wa-color-danger-fill-vivid: var(--wa-color-red-50); + --wa-color-danger-fill-vivid-alt: var(--wa-color-red-30); + --wa-color-danger-fill-muted: var(--wa-color-red-10); + --wa-color-danger-fill-muted-alt: var(--wa-color-red-20); + --wa-color-danger-outline-vivid: var(--wa-color-red-50); + --wa-color-danger-outline-vivid-alt: var(--wa-color-red-40); + --wa-color-danger-outline-muted: var(--wa-color-red-20); + --wa-color-danger-outline-muted-alt: var(--wa-color-red-30); + --wa-color-danger-text-on-vivid: var(--wa-color-white); + --wa-color-danger-text-on-muted: var(--wa-color-red-70); + --wa-color-danger-text-on-surface: var(--wa-color-red-60); + + --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50); + --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30); + --wa-color-neutral-fill-muted: var(--wa-color-neutral-10); + --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20); + --wa-color-neutral-outline-vivid: var(--wa-color-neutral-50); + --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40); + --wa-color-neutral-outline-muted: var(--wa-color-neutral-20); + --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30); + --wa-color-neutral-text-on-vivid: var(--wa-color-white); + --wa-color-neutral-text-on-muted: var(--wa-color-neutral-70); + --wa-color-neutral-text-on-surface: var(--wa-color-neutral-60); +} + /* _utility.css */