From 97a9e1f6dafb436b08ec671bd6a636c1ba64a8fb Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Fri, 1 Nov 2024 22:36:00 -0500 Subject: [PATCH 01/17] add new tokens as css vars --- src/css/components/btn.css | 12 +- src/css/vars/dark.css | 237 +++++++++++++++---------------------- src/css/vars/light.css | 237 +++++++++++++++---------------------- src/css/vars/vars.css | 100 ---------------- 4 files changed, 202 insertions(+), 384 deletions(-) diff --git a/src/css/components/btn.css b/src/css/components/btn.css index 58730d69..bdf25ee8 100644 --- a/src/css/components/btn.css +++ b/src/css/components/btn.css @@ -8,27 +8,27 @@ } .btn-primary.btn-outlined { - @apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] active:border-[var(--ds-primary-outlined-active-border)] active:bg-[var(--ds-primary-outlined-active-bg)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)]; + @apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)]; } .btn-primary.btn-solid { - @apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] active:bg-[var(--ds-primary-solid-active-bg)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)]; + @apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)]; } .btn-primary.btn-soft { - @apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] active:bg-[var(--ds-primary-soft-active-bg)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)]; + @apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)]; } .btn-neutral.btn-outlined { - @apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] active:border-[var(--ds-neutral-outlined-active-border)] active:bg-[var(--ds-neutral-outlined-active-bg)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)]; + @apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)]; } .btn-neutral.btn-solid { - @apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] active:bg-[var(--ds-neutral-solid-active-bg)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)]; + @apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)]; } .btn-neutral.btn-plain { - @apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] active:bg-[var(--ds-neutral-plain-active-bg)] disabled:text-[var(--ds-neutral-plain-disabled-color)]; + @apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-neutral-plain-disabled-color)]; } .btn-icon { diff --git a/src/css/vars/dark.css b/src/css/vars/dark.css index 2d81d8da..3b1fd565 100644 --- a/src/css/vars/dark.css +++ b/src/css/vars/dark.css @@ -1,143 +1,102 @@ @mixin dark-theme { - --ds-divider: var(--ds-neutral-700); - --ds-focus-visible: var(--ds-common-white); - --ds-background-body: var(--ds-neutral-900); - --ds-background-level1: var(--ds-neutral-800); - --ds-background-level2: var(--ds-neutral-700); - --ds-background-level3: var(--ds-neutral-600); - --ds-background-surface: var(--ds-neutral-900); - --ds-background-tooltip: var(--ds-neutral-0); - --ds-background-backdrop: rgba(10, 10, 10, 0.6); - --ds-cyan-main: var(--ds-cyan-400); - --ds-failure-main: var(--ds-failure-400); - --ds-failure-outlined-active-bg: var(--ds-failure-500); - --ds-failure-outlined-border: var(--ds-failure-600); - --ds-failure-outlined-color: var(--ds-common-white); - --ds-failure-outlined-disabled-border: var(--ds-neutral-800); - --ds-failure-outlined-disabled-color: var(--ds-neutral-600); - --ds-failure-outlined-hover-bg: var(--ds-failure-900); - --ds-failure-outlined-hover-border: var(--ds-failure-500); - --ds-failure-plain-active-bg: var(--ds-failure-700); - --ds-failure-plain-color: var(--ds-failure-300); - --ds-failure-plain-disabled-color: var(--ds-failure-800); - --ds-failure-plain-hover-bg: var(--ds-failure-800); - --ds-failure-soft-active-bg: var(--ds-failure-600); - --ds-failure-soft-bg: var(--ds-failure-900); - --ds-failure-soft-color: var(--ds-failure-200); - --ds-failure-soft-disabled-bg: var(--ds-failure-600); - --ds-failure-soft-disabled-color: var(--ds-failure-800); - --ds-failure-soft-hover-bg: var(--ds-failure-700); - --ds-failure-solid-active-bg: var(--ds-failure-800); - --ds-failure-solid-bg: var(--ds-failure-600); - --ds-failure-solid-color: var(--ds-common-white); - --ds-failure-solid-disabled-bg: var(--ds-neutral-600); - --ds-failure-solid-disabled-color: var(--ds-neutral-800); - --ds-failure-solid-hover-bg: var(--ds-failure-700); - --ds-magenta-main: var(--ds-magenta-400); - --ds-neutral-main: var(--ds-common-white); - --ds-neutral-outlined-active-bg: var(--ds-neutral-500); - --ds-neutral-outlined-border: var(--ds-neutral-600); - --ds-neutral-outlined-color: var(--ds-common-white); - --ds-neutral-outlined-disabled-border: var(--ds-neutral-800); - --ds-neutral-outlined-disabled-color: var(--ds-neutral-600); - --ds-neutral-outlined-hover-bg: var(--ds-neutral-800); - --ds-neutral-outlined-hover-border: var(--ds-neutral-500); - --ds-neutral-plain-active-bg: var(--ds-neutral-700); - --ds-neutral-plain-color: var(--ds-common-white); - --ds-neutral-plain-disabled-color: var(--ds-neutral-800); - --ds-neutral-plain-hover-bg: var(--ds-neutral-800); - --ds-neutral-soft-active-bg: var(--ds-neutral-600); - --ds-neutral-soft-bg: var(--ds-neutral-800); - --ds-neutral-soft-color: var(--ds-common-white); - --ds-neutral-soft-disabled-bg: var(--ds-neutral-600); - --ds-neutral-soft-disabled-color: var(--ds-neutral-800); - --ds-neutral-soft-hover-bg: var(--ds-neutral-700); - --ds-neutral-solid-active-bg: var(--ds-neutral-100); - --ds-neutral-solid-bg: var(--ds-common-white); - --ds-neutral-solid-color: var(--ds-neutral-900); - --ds-neutral-solid-disabled-bg: var(--ds-neutral-600); - --ds-neutral-solid-disabled-color: var(--ds-neutral-800); - --ds-neutral-solid-hover-bg: var(--ds-neutral-0); - --ds-orange-main: var(--ds-orange-400); - --ds-primary-main: var(--ds-primary-300); - --ds-primary-outlined-active-bg: var(--ds-primary-500); - --ds-primary-outlined-border: var(--ds-primary-600); - --ds-primary-outlined-color: var(--ds-common-white); - --ds-primary-outlined-disabled-border: var(--ds-neutral-800); - --ds-primary-outlined-disabled-color: var(--ds-neutral-600); - --ds-primary-outlined-hover-bg: var(--ds-primary-900); - --ds-primary-outlined-hover-border: var(--ds-primary-500); - --ds-primary-plain-active-bg: var(--ds-primary-700); - --ds-primary-plain-color: var(--ds-primary-300); - --ds-primary-plain-disabled-color: var(--ds-primary-800); - --ds-primary-plain-hover-bg: var(--ds-primary-800); - --ds-primary-soft-active-bg: var(--ds-primary-600); - --ds-primary-soft-bg: var(--ds-primary-900); - --ds-primary-soft-color: var(--ds-primary-200); - --ds-primary-soft-disabled-bg: var(--ds-primary-600); - --ds-primary-soft-disabled-color: var(--ds-primary-800); - --ds-primary-soft-hover-bg: var(--ds-primary-700); - --ds-primary-solid-active-bg: var(--ds-primary-600); - --ds-primary-solid-bg: var(--ds-primary-600); - --ds-primary-solid-color: var(--ds-common-white); - --ds-primary-solid-disabled-bg: var(--ds-neutral-600); - --ds-primary-solid-disabled-color: var(--ds-neutral-800); - --ds-primary-solid-hover-bg: var(--ds-primary-700); - --ds-success-main: var(--ds-success-400); - --ds-success-outlined-active-bg: var(--ds-success-500); - --ds-success-outlined-border: var(--ds-success-600); - --ds-success-outlined-color: var(--ds-common-white); - --ds-success-outlined-disabled-border: var(--ds-neutral-800); - --ds-success-outlined-disabled-color: var(--ds-neutral-600); - --ds-success-outlined-hover-bg: var(--ds-success-900); - --ds-success-outlined-hover-border: var(--ds-success-500); - --ds-success-plain-active-bg: var(--ds-success-700); - --ds-success-plain-color: var(--ds-success-300); - --ds-success-plain-disabled-color: var(--ds-success-800); - --ds-success-plain-hover-bg: var(--ds-success-800); - --ds-success-soft-active-bg: var(--ds-success-600); - --ds-success-soft-bg: var(--ds-success-900); - --ds-success-soft-color: var(--ds-success-200); - --ds-success-soft-disabled-bg: var(--ds-success-600); - --ds-success-soft-disabled-color: var(--ds-success-800); - --ds-success-soft-hover-bg: var(--ds-success-700); - --ds-success-solid-active-bg: var(--ds-success-800); - --ds-success-solid-bg: var(--ds-success-600); - --ds-success-solid-color: var(--ds-common-white); - --ds-success-solid-disabled-bg: var(--ds-neutral-600); - --ds-success-solid-disabled-color: var(--ds-neutral-800); - --ds-success-solid-hover-bg: var(--ds-success-700); - --ds-teal-main: var(--ds-teal-400); - --ds-text-disabled: var(--ds-neutral-800); - --ds-text-inverse: var(--ds-neutral-900); - --ds-text-placeholder: var(--ds-neutral-700); - --ds-text-primary: var(--ds-common-white); - --ds-text-secondary: var(--ds-neutral-300); - --ds-text-tertiary: var(--ds-neutral-400); - --ds-warning-main: var(--ds-warning-400); - --ds-warning-outlined-active-bg: var(--ds-warning-500); - --ds-warning-outlined-border: var(--ds-warning-600); - --ds-warning-outlined-color: var(--ds-common-white); - --ds-warning-outlined-disabled-border: var(--ds-neutral-800); - --ds-warning-outlined-disabled-color: var(--ds-neutral-600); - --ds-warning-outlined-hover-bg: var(--ds-warning-900); - --ds-warning-outlined-hover-border: var(--ds-warning-500); - --ds-warning-plain-active-bg: var(--ds-warning-700); - --ds-warning-plain-color: var(--ds-warning-300); - --ds-warning-plain-disabled-color: var(--ds-warning-800); - --ds-warning-plain-hover-bg: var(--ds-warning-800); - --ds-warning-soft-active-bg: var(--ds-warning-600); - --ds-warning-soft-bg: var(--ds-warning-900); - --ds-warning-soft-color: var(--ds-warning-200); - --ds-warning-soft-disabled-bg: var(--ds-warning-600); - --ds-warning-soft-disabled-color: var(--ds-warning-800); - --ds-warning-soft-hover-bg: var(--ds-warning-700); - --ds-warning-solid-active-bg: var(--ds-warning-800); - --ds-warning-solid-bg: var(--ds-warning-600); - --ds-warning-solid-color: var(--ds-common-white); - --ds-warning-solid-disabled-bg: var(--ds-neutral-600); - --ds-warning-solid-disabled-color: var(--ds-neutral-800); - --ds-warning-solid-hover-bg: var(--ds-warning-700); + /* Background */ + --ds-background-body: theme(colors.zinc.900); + --ds-background-level1: theme(colors.zinc.800); + --ds-background-level2: theme(colors.zinc.700); + --ds-background-level3: theme(colors.zinc.600); + --ds-background-surface: theme(colors.zinc.900); + --ds-background-tooltip: theme(colors.white); + --ds-background-modal: theme(colors.zinc.900); + + /* Text */ + --ds-text-disabled: theme(colors.zinc.700); + --ds-text-inverse: theme(colors.black); + --ds-text-placeholder: theme(colors.zinc.500); + --ds-text-primary: theme(colors.white); + --ds-text-secondary: theme(colors.zinc.200); + --ds-text-tertiary: theme(colors.zinc.300); + + /* Divider */ + --ds-divider: theme(colors.zinc.700); + + /* Focus ring */ + --ds-focus-visible: theme(colors.white); + + /* Disabled */ + --ds-disabled-bg: theme(colors.zinc.800); + --ds-disabled-color: theme(colors.zinc.600); + + /* Data */ + --ds-cyan-main: theme(colors.cyan.500); + --ds-indigo-main: theme(colors.indigo.400); + --ds-lime-main: theme(colors.lime.400); + --ds-orange-main: theme(colors.orange.400); + --ds-fuchsia-main: theme(colors.fuchsia.300); + --ds-pink-main: theme(colors.pink.300); + --ds-teal-main: theme(colors.teal.500); + + /* Intents */ + --ds-failure-main: theme(colors.red.500); + --ds-failure-outlined-border: theme(colors.red.600); + --ds-failure-outlined-color: theme(colors.white); + --ds-failure-outlined-hover-bg: theme(colors.red.600); + --ds-failure-outlined-hover-border: theme(colors.red.600); + --ds-failure-soft-bg: theme(colors.red.950); + --ds-failure-soft-color: theme(colors.red.200); + --ds-failure-soft-hover-bg: theme(colors.red.900); + --ds-failure-solid-bg: theme(colors.red.700); + --ds-failure-solid-color: theme(colors.white); + --ds-failure-solid-hover-bg: theme(colors.red.500); + + --ds-neutral-main: theme(colors.white); + --ds-neutral-outlined-border: theme(colors.zinc.700); + --ds-neutral-outlined-color: theme(colors.white); + --ds-neutral-outlined-hover-bg: theme(colors.zinc.700); + --ds-neutral-outlined-hover-border: theme(colors.zinc.700); + --ds-neutral-plain-color: theme(colors.white); + --ds-neutral-plain-hover-bg: theme(colors.zinc.700); + --ds-neutral-soft-bg: theme(colors.zinc.800); + --ds-neutral-soft-color: theme(colors.white); + --ds-neutral-soft-hover-bg: theme(colors.zinc.700); + --ds-neutral-solid-bg: theme(colors.white); + --ds-neutral-solid-color: theme(colors.black); + --ds-neutral-solid-hover-bg: theme(colors.zinc.200); + + --ds-primary-main: theme(colors.purple.400); + --ds-primary-outlined-border: theme(colors.purple.600); + --ds-primary-outlined-color: theme(colors.white); + --ds-primary-outlined-hover-bg: theme(colors.purple.600); + --ds-primary-outlined-hover-border: theme(colors.purple.600); + --ds-primary-soft-bg: theme(colors.purple.950); + --ds-primary-soft-color: theme(colors.purple.200); + --ds-primary-soft-hover-bg: theme(colors.purple.900); + --ds-primary-solid-bg: theme(colors.purple.700); + --ds-primary-solid-color: theme(colors.white); + --ds-primary-solid-hover-bg: theme(colors.purple.500); + + --ds-success-main: theme(colors.emerald.500); + --ds-success-outlined-border: theme(colors.emerald.600); + --ds-success-outlined-color: theme(colors.white); + --ds-success-outlined-hover-bg: theme(colors.emerald.600); + --ds-success-outlined-hover-border: theme(colors.emerald.600); + --ds-success-soft-bg: theme(colors.emerald.950); + --ds-success-soft-color: theme(colors.emerald.200); + --ds-success-soft-hover-bg: theme(colors.emerald.900); + --ds-success-solid-bg: theme(colors.emerald.700); + --ds-success-solid-color: theme(colors.white); + --ds-success-solid-hover-bg: theme(colors.emerald.500); + + --ds-warning-main: theme(colors.amber.400); + --ds-warning-outlined-border: theme(colors.amber.600); + --ds-warning-outlined-color: theme(colors.white); + --ds-warning-outlined-hover-bg: theme(colors.amber.600); + --ds-warning-outlined-hover-border: theme(colors.amber.600); + --ds-warning-soft-bg: theme(colors.amber.950); + --ds-warning-soft-color: theme(colors.amber.300); + --ds-warning-soft-hover-bg: theme(colors.amber.900); + --ds-warning-solid-bg: theme(colors.amber.500); + --ds-warning-solid-color: theme(colors.black); + --ds-warning-solid-hover-bg: theme(colors.amber.400); } @layer base { diff --git a/src/css/vars/light.css b/src/css/vars/light.css index a1aafa90..a250847d 100644 --- a/src/css/vars/light.css +++ b/src/css/vars/light.css @@ -1,143 +1,102 @@ @mixin light-theme { - --ds-divider: var(--ds-neutral-200); - --ds-focus-visible: var(--ds-neutral-900); - --ds-background-body: var(--ds-common-white); - --ds-background-level1: var(--ds-neutral-0); - --ds-background-level2: var(--ds-neutral-100); - --ds-background-level3: var(--ds-neutral-300); - --ds-background-surface: var(--ds-common-white); - --ds-background-tooltip: var(--ds-neutral-900); - --ds-background-backdrop: rgba(0, 0, 0, 0.6); - --ds-cyan-main: var(--ds-cyan-600); - --ds-failure-main: var(--ds-failure-500); - --ds-failure-outlined-active-bg: var(--ds-failure-100); - --ds-failure-outlined-border: var(--ds-failure-300); - --ds-failure-outlined-color: var(--ds-failure-500); - --ds-failure-outlined-disabled-border: var(--ds-neutral-100); - --ds-failure-outlined-disabled-color: var(--ds-neutral-300); - --ds-failure-outlined-hover-bg: var(--ds-failure-0); - --ds-failure-outlined-hover-border: var(--ds-failure-500); - --ds-failure-plain-active-bg: var(--ds-failure-200); - --ds-failure-plain-color: var(--ds-failure-600); - --ds-failure-plain-disabled-color: var(--ds-failure-200); - --ds-failure-plain-hover-bg: var(--ds-failure-100); - --ds-failure-soft-active-bg: var(--ds-failure-300); - --ds-failure-soft-bg: var(--ds-failure-0); - --ds-failure-soft-color: var(--ds-failure-600); - --ds-failure-soft-disabled-bg: var(--ds-failure-100); - --ds-failure-soft-disabled-color: var(--ds-failure-300); - --ds-failure-soft-hover-bg: var(--ds-failure-200); - --ds-failure-solid-active-bg: var(--ds-failure-700); - --ds-failure-solid-bg: var(--ds-failure-500); - --ds-failure-solid-color: var(--ds-common-white); - --ds-failure-solid-disabled-bg: var(--ds-neutral-100); - --ds-failure-solid-disabled-color: var(--ds-neutral-300); - --ds-failure-solid-hover-bg: var(--ds-failure-600); - --ds-magenta-main: var(--ds-magenta-600); - --ds-neutral-main: var(--ds-neutral-900); - --ds-neutral-outlined-active-bg: var(--ds-neutral-200); - --ds-neutral-outlined-border: var(--ds-neutral-200); - --ds-neutral-outlined-color: var(--ds-neutral-900); - --ds-neutral-outlined-disabled-border: var(--ds-neutral-100); - --ds-neutral-outlined-disabled-color: var(--ds-neutral-300); - --ds-neutral-outlined-hover-bg: var(--ds-neutral-0); - --ds-neutral-outlined-hover-border: var(--ds-neutral-900); - --ds-neutral-plain-active-bg: var(--ds-neutral-100); - --ds-neutral-plain-color: var(--ds-neutral-900); - --ds-neutral-plain-disabled-color: var(--ds-neutral-200); - --ds-neutral-plain-hover-bg: var(--ds-neutral-0); - --ds-neutral-soft-active-bg: var(--ds-neutral-300); - --ds-neutral-soft-bg: var(--ds-neutral-0); - --ds-neutral-soft-color: var(--ds-neutral-900); - --ds-neutral-soft-disabled-bg: var(--ds-neutral-100); - --ds-neutral-soft-disabled-color: var(--ds-neutral-300); - --ds-neutral-soft-hover-bg: var(--ds-neutral-200); - --ds-neutral-solid-active-bg: var(--ds-neutral-600); - --ds-neutral-solid-bg: var(--ds-neutral-900); - --ds-neutral-solid-color: var(--ds-common-white); - --ds-neutral-solid-disabled-bg: var(--ds-neutral-100); - --ds-neutral-solid-disabled-color: var(--ds-neutral-300); - --ds-neutral-solid-hover-bg: var(--ds-neutral-800); - --ds-orange-main: var(--ds-orange-600); - --ds-primary-main: var(--ds-primary-500); - --ds-primary-outlined-active-bg: var(--ds-primary-100); - --ds-primary-outlined-border: var(--ds-primary-300); - --ds-primary-outlined-color: var(--ds-primary-500); - --ds-primary-outlined-disabled-border: var(--ds-neutral-100); - --ds-primary-outlined-disabled-color: var(--ds-neutral-300); - --ds-primary-outlined-hover-bg: var(--ds-primary-0); - --ds-primary-outlined-hover-border: var(--ds-primary-500); - --ds-primary-plain-active-bg: var(--ds-primary-200); - --ds-primary-plain-color: var(--ds-primary-600); - --ds-primary-plain-disabled-color: var(--ds-primary-200); - --ds-primary-plain-hover-bg: var(--ds-primary-100); - --ds-primary-soft-active-bg: var(--ds-primary-200); - --ds-primary-soft-bg: var(--ds-primary-0); - --ds-primary-soft-color: var(--ds-primary-600); - --ds-primary-soft-disabled-bg: var(--ds-primary-100); - --ds-primary-soft-disabled-color: var(--ds-primary-300); - --ds-primary-soft-hover-bg: var(--ds-primary-100); - --ds-primary-solid-active-bg: var(--ds-primary-700); - --ds-primary-solid-bg: var(--ds-primary-500); - --ds-primary-solid-color: var(--ds-common-white); - --ds-primary-solid-disabled-bg: var(--ds-neutral-100); - --ds-primary-solid-disabled-color: var(--ds-neutral-300); - --ds-primary-solid-hover-bg: var(--ds-primary-600); - --ds-success-main: var(--ds-success-500); - --ds-success-outlined-active-bg: var(--ds-success-100); - --ds-success-outlined-border: var(--ds-success-300); - --ds-success-outlined-color: var(--ds-success-500); - --ds-success-outlined-disabled-border: var(--ds-neutral-100); - --ds-success-outlined-disabled-color: var(--ds-neutral-300); - --ds-success-outlined-hover-bg: var(--ds-success-0); - --ds-success-outlined-hover-border: var(--ds-success-500); - --ds-success-plain-active-bg: var(--ds-success-200); - --ds-success-plain-color: var(--ds-success-600); - --ds-success-plain-disabled-color: var(--ds-success-200); - --ds-success-plain-hover-bg: var(--ds-success-100); - --ds-success-soft-active-bg: var(--ds-success-300); - --ds-success-soft-bg: var(--ds-success-0); - --ds-success-soft-color: var(--ds-success-600); - --ds-success-soft-disabled-bg: var(--ds-success-100); - --ds-success-soft-disabled-color: var(--ds-success-300); - --ds-success-soft-hover-bg: var(--ds-success-200); - --ds-success-solid-active-bg: var(--ds-success-700); - --ds-success-solid-bg: var(--ds-success-500); - --ds-success-solid-color: var(--ds-common-white); - --ds-success-solid-disabled-bg: var(--ds-neutral-100); - --ds-success-solid-disabled-color: var(--ds-neutral-300); - --ds-success-solid-hover-bg: var(--ds-success-600); - --ds-teal-main: var(--ds-teal-600); - --ds-text-disabled: var(--ds-neutral-200); - --ds-text-inverse: var(--ds-common-white); - --ds-text-placeholder: var(--ds-neutral-300); - --ds-text-primary: var(--ds-neutral-900); - --ds-text-secondary: var(--ds-neutral-700); - --ds-text-tertiary: var(--ds-neutral-500); - --ds-warning-main: var(--ds-warning-500); - --ds-warning-outlined-active-bg: var(--ds-warning-100); - --ds-warning-outlined-border: var(--ds-warning-300); - --ds-warning-outlined-color: var(--ds-warning-500); - --ds-warning-outlined-disabled-border: var(--ds-neutral-100); - --ds-warning-outlined-disabled-color: var(--ds-neutral-300); - --ds-warning-outlined-hover-bg: var(--ds-warning-0); - --ds-warning-outlined-hover-border: var(--ds-warning-500); - --ds-warning-plain-active-bg: var(--ds-warning-200); - --ds-warning-plain-color: var(--ds-warning-600); - --ds-warning-plain-disabled-color: var(--ds-warning-200); - --ds-warning-plain-hover-bg: var(--ds-warning-100); - --ds-warning-soft-active-bg: var(--ds-warning-300); - --ds-warning-soft-bg: var(--ds-warning-0); - --ds-warning-soft-color: var(--ds-warning-600); - --ds-warning-soft-disabled-bg: var(--ds-warning-100); - --ds-warning-soft-disabled-color: var(--ds-warning-300); - --ds-warning-soft-hover-bg: var(--ds-warning-200); - --ds-warning-solid-active-bg: var(--ds-warning-700); - --ds-warning-solid-bg: var(--ds-warning-500); - --ds-warning-solid-color: var(--ds-common-white); - --ds-warning-solid-disabled-bg: var(--ds-neutral-100); - --ds-warning-solid-disabled-color: var(--ds-neutral-300); - --ds-warning-solid-hover-bg: var(--ds-warning-600); + /* Background */ + --ds-background-body: theme(colors.white); + --ds-background-level1: theme(colors.zinc.50); + --ds-background-level2: theme(colors.zinc.100); + --ds-background-level3: theme(colors.zinc.200); + --ds-background-surface: theme(colors.white); + --ds-background-tooltip: theme(colors.black); + --ds-background-modal: theme(colors.white); + + /* Text */ + --ds-text-disabled: theme(colors.zinc.200); + --ds-text-inverse: theme(colors.white); + --ds-text-placeholder: theme(colors.zinc.400); + --ds-text-primary: theme(colors.black); + --ds-text-secondary: theme(colors.zinc.700); + --ds-text-tertiary: theme(colors.zinc.500); + + /* Divider */ + --ds-divider: theme(colors.zinc.200); + + /* Focus ring */ + --ds-focus-visible: theme(colors.black); + + /* Disabled */ + --ds-disabled-bg: theme(colors.zinc.100); + --ds-disabled-color: theme(colors.zinc.300); + + /* Data */ + --ds-cyan-main: theme(colors.cyan.600); + --ds-indigo-main: theme(colors.indigo.700); + --ds-lime-main: theme(colors.lime.700); + --ds-orange-main: theme(colors.orange.600); + --ds-fuchsia-main: theme(colors.fuchsia.600); + --ds-teal-main: theme(colors.teal.700); + --ds-pink-main: theme(colors.pink.600); + + /* Intents */ + --ds-failure-main: theme(colors.red.600); + --ds-failure-outlined-border: theme(colors.red.300); + --ds-failure-outlined-color: theme(colors.black); + --ds-failure-outlined-hover-bg: theme(colors.red.300); + --ds-failure-outlined-hover-border: theme(colors.red.300); + --ds-failure-soft-bg: theme(colors.red.100); + --ds-failure-soft-color: theme(colors.red.800); + --ds-failure-soft-hover-bg: theme(colors.red.200); + --ds-failure-solid-bg: theme(colors.red.600); + --ds-failure-solid-color: theme(colors.white); + --ds-failure-solid-hover-bg: theme(colors.red.800); + + --ds-neutral-main: theme(colors.black); + --ds-neutral-outlined-border: theme(colors.zinc.200); + --ds-neutral-outlined-color: theme(colors.black); + --ds-neutral-outlined-hover-bg: theme(colors.zinc.200); + --ds-neutral-outlined-hover-border: theme(colors.zinc.200); + --ds-neutral-plain-color: theme(colors.black); + --ds-neutral-plain-hover-bg: theme(colors.zinc.200); + --ds-neutral-soft-bg: theme(colors.zinc.100); + --ds-neutral-soft-color: theme(colors.black); + --ds-neutral-soft-hover-bg: theme(colors.zinc.200); + --ds-neutral-solid-bg: theme(colors.black); + --ds-neutral-solid-color: theme(colors.white); + --ds-neutral-solid-hover-bg: theme(colors.zinc.700); + + --ds-primary-main: theme(colors.purple.600); + --ds-primary-outlined-border: theme(colors.purple.300); + --ds-primary-outlined-color: theme(colors.black); + --ds-primary-outlined-hover-bg: theme(colors.purple.300); + --ds-primary-outlined-hover-border: theme(colors.purple.300); + --ds-primary-soft-bg: theme(colors.purple.100); + --ds-primary-soft-color: theme(colors.purple.800); + --ds-primary-soft-hover-bg: theme(colors.purple.200); + --ds-primary-solid-bg: theme(colors.purple.600); + --ds-primary-solid-color: theme(colors.white); + --ds-primary-solid-hover-bg: theme(colors.purple.800); + + --ds-success-main: theme(colors.emerald.600); + --ds-success-outlined-border: theme(colors.emerald.300); + --ds-success-outlined-color: theme(colors.black); + --ds-success-outlined-hover-bg: theme(colors.emerald.300); + --ds-success-outlined-hover-border: theme(colors.emerald.300); + --ds-success-soft-bg: theme(colors.emerald.100); + --ds-success-soft-color: theme(colors.emerald.800); + --ds-success-soft-hover-bg: theme(colors.emerald.200); + --ds-success-solid-bg: theme(colors.emerald.600); + --ds-success-solid-color: theme(colors.white); + --ds-success-solid-hover-bg: theme(colors.emerald.800); + + --ds-warning-main: theme(colors.amber.600); + --ds-warning-outlined-border: theme(colors.amber.300); + --ds-warning-outlined-color: theme(colors.black); + --ds-warning-outlined-hover-bg: theme(colors.amber.300); + --ds-warning-outlined-hover-border: theme(colors.amber.300); + --ds-warning-soft-bg: theme(colors.amber.100); + --ds-warning-soft-color: theme(colors.amber.700); + --ds-warning-soft-hover-bg: theme(colors.amber.200); + --ds-warning-solid-bg: theme(colors.amber.600); + --ds-warning-solid-color: theme(colors.white); + --ds-warning-solid-hover-bg: theme(colors.amber.700); } @layer base { diff --git a/src/css/vars/vars.css b/src/css/vars/vars.css index db294d1c..f890fe2c 100644 --- a/src/css/vars/vars.css +++ b/src/css/vars/vars.css @@ -1,106 +1,6 @@ @layer base { :root { --rem-base: 16; - --ds-common-black: #090909; - --ds-common-white: #fff; - --ds-cyan-0: #d8f1ff; - --ds-cyan-100: #bae6ff; - --ds-cyan-200: #99d9ff; - --ds-cyan-300: #7cf; - --ds-cyan-400: #33b1ff; - --ds-cyan-50: #c9ecff; - --ds-cyan-500: #1a92e1; - --ds-cyan-600: #0072c3; - --ds-cyan-700: #005698; - --ds-cyan-800: #003a6d; - --ds-cyan-900: #07243d; - --ds-failure-0: #ffebee; - --ds-failure-100: #fbcfd4; - --ds-failure-200: #f6b2ba; - --ds-failure-300: #ec7985; - --ds-failure-400: #e34853; - --ds-failure-50: #fddde1; - --ds-failure-500: #d91620; - --ds-failure-600: #b00f16; - --ds-failure-700: #86070b; - --ds-failure-800: #5d0406; - --ds-failure-900: #330001; - --ds-magenta-0: #ffdeed; - --ds-magenta-100: #ffcfe5; - --ds-magenta-200: #ffc0dc; - --ds-magenta-300: #ffaacf; - --ds-magenta-400: #ff7eb6; - --ds-magenta-50: #ffd7e9; - --ds-magenta-500: #e85293; - --ds-magenta-600: #d02670; - --ds-magenta-700: #a21854; - --ds-magenta-800: #740937; - --ds-magenta-900: #480b26; - --ds-neutral-0: #f7f7f7; - --ds-neutral-100: #e3e4e5; - --ds-neutral-200: #ced0d2; - --ds-neutral-300: #a6aaae; - --ds-neutral-400: #898d91; - --ds-neutral-500: #6b6f73; - --ds-neutral-600: #5a5d60; - --ds-neutral-700: #494a4d; - --ds-neutral-800: #232324; - --ds-neutral-900: #090909; - --ds-orange-0: #ffe7d7; - --ds-orange-100: #ffd9be; - --ds-orange-200: #ffc49a; - --ds-orange-300: #ffae75; - --ds-orange-400: #ff832b; - --ds-orange-50: #ffe0cb; - --ds-orange-500: #dd6916; - --ds-orange-600: #ba4e00; - --ds-orange-700: #8c3c00; - --ds-orange-800: #5e2900; - --ds-orange-900: #391800; - --ds-primary-0: #f3e5f5; - --ds-primary-100: #e5c6ea; - --ds-primary-200: #d7a7df; - --ds-primary-300: #ba68c8; - --ds-primary-400: #9946b9; - --ds-primary-50: #ecd6f0; - --ds-primary-500: #7724aa; - --ds-primary-600: #611c9b; - --ds-primary-700: #4a148c; - --ds-primary-800: #350a60; - --ds-primary-900: #200033; - --ds-success-0: #ecffeb; - --ds-success-100: #ace0b0; - --ds-success-200: #8cd092; - --ds-success-300: #6bc074; - --ds-success-400: #42a056; - --ds-success-50: #ccf0ce; - --ds-success-500: #198038; - --ds-success-600: #116d36; - --ds-success-700: #095933; - --ds-success-800: #05462c; - --ds-success-900: #003325; - --ds-teal-0: #d9f9f9; - --ds-teal-100: #bcf5f5; - --ds-teal-200: #9ef0f0; - --ds-teal-300: #53d7d5; - --ds-teal-400: #08bdba; - --ds-teal-50: #cbf7f7; - --ds-teal-500: #049d9a; - --ds-teal-600: #007d79; - --ds-teal-700: #005f5f; - --ds-teal-800: #004144; - --ds-teal-900: #0d2b2c; - --ds-warning-0: #ffefe0; - --ds-warning-100: #fadbb2; - --ds-warning-200: #f5c783; - --ds-warning-300: #ea9f26; - --ds-warning-400: #cc7b1d; - --ds-warning-50: #fde5c9; - --ds-warning-500: #ad5713; - --ds-warning-600: #8f4a0a; - --ds-warning-700: #703c00; - --ds-warning-800: #522b00; - --ds-warning-900: #331900; --ds-space-q: calc(2 / var(--rem-base) * 1rem); /* 2px */ --ds-space-h: calc(4 / var(--rem-base) * 1rem); /* 4px */ --ds-space-1: calc(8 / var(--rem-base) * 1rem); /* 8px */ From 9ccd250d7402229c92fec9ef2b17828b72a09d5b Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Mon, 4 Nov 2024 16:06:55 -0600 Subject: [PATCH 02/17] theme toggle and more updates --- src/css/asciidoc/source-block.css | 4 +-- src/css/asciidoc/tabs.css | 4 +-- src/css/base.css | 17 +++++++++--- src/css/components/btn.css | 12 ++++----- src/css/components/dialog.css | 2 +- src/css/docsearch.css | 8 +++--- src/css/global-nav.css | 4 +-- src/css/vars/dark.css | 5 +--- src/css/vars/light.css | 7 ++--- src/js/03-theme-toggle.js | 44 ++++++++++++++++++++++--------- src/partials/body-end-scripts.hbs | 4 +++ src/partials/footer.hbs | 1 + src/partials/global-nav.hbs | 2 +- src/partials/head-scripts.hbs | 15 +++++++---- src/partials/nav-secondary.hbs | 10 +++---- src/partials/nav-tree.hbs | 2 +- src/partials/nav.hbs | 4 +-- src/partials/navbar.hbs | 8 ------ src/partials/page-versions.hbs | 2 +- src/partials/theme-toggle.hbs | 27 +++++++++++++++++++ 20 files changed, 117 insertions(+), 65 deletions(-) create mode 100644 src/partials/theme-toggle.hbs diff --git a/src/css/asciidoc/source-block.css b/src/css/asciidoc/source-block.css index 5474bdf8..9f3afb87 100644 --- a/src/css/asciidoc/source-block.css +++ b/src/css/asciidoc/source-block.css @@ -78,11 +78,11 @@ } html[data-theme="light"] .doc .source-toolbox { - background: linear-gradient(to right, rgba(247, 247, 247, 0), rgb(247, 247, 247), rgb(247, 247, 247) 50%); + background: linear-gradient(to right, rgba(250, 250, 250, 0), rgb(250, 250, 250), rgb(250, 250, 250) 50%); } html[data-theme="dark"] .doc .source-toolbox { - background: linear-gradient(to right, rgba(35, 35, 36, 0), rgb(35, 35, 36), rgb(35, 35, 36) 50%); + background: linear-gradient(to right, rgba(39, 39, 42, 0), rgb(39, 39, 42), rgb(39, 39, 42) 50%); } .doc .source-toolbox .copy-toast { diff --git a/src/css/asciidoc/tabs.css b/src/css/asciidoc/tabs.css index ecc34c68..200fc718 100644 --- a/src/css/asciidoc/tabs.css +++ b/src/css/asciidoc/tabs.css @@ -67,7 +67,7 @@ html[data-theme="light"] .tablist > .scroll-btn-left { } html[data-theme="dark"] .tablist > .scroll-btn-left { - background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to left, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } html[data-theme="light"] .tablist > .scroll-btn-right { @@ -75,7 +75,7 @@ html[data-theme="light"] .tablist > .scroll-btn-right { } html[data-theme="dark"] .tablist > .scroll-btn-right { - background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to right, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } .tabs .tablist li::after { diff --git a/src/css/base.css b/src/css/base.css index d8ad91c5..19a9f032 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -21,6 +21,15 @@ tab-size: 4; } + html:has(dialog[open]) { + overflow: hidden; + } + + ::backdrop { + background-color: var(--ds-background-backdrop); + backdrop-filter: blur(4px); + } + *, ::before, ::after { @@ -77,12 +86,12 @@ @media (pointer: fine) { @supports (scrollbar-width: thin) { html { - scrollbar-color: var(--ds-neutral-outlined-border) var(--ds-background-body); + scrollbar-color: var(--ds-text-placeholder) var(--ds-background-body); } body * { scrollbar-width: thin; - scrollbar-color: var(--ds-neutral-outlined-border) transparent; + scrollbar-color: var(--ds-text-placeholder) transparent; } } @@ -99,7 +108,7 @@ ::-webkit-scrollbar-thumb { background-clip: padding-box; - background-color: var(--ds-neutral-outlined-border); + background-color: var(--ds-text-placeholder); border: 3px solid transparent; border-radius: 12px; } @@ -110,7 +119,7 @@ } ::-webkit-scrollbar-thumb:hover { - background-color: var(--ds-neutral-outlined-hover-border); + background-color: var(--ds-text-tertiary); } } } diff --git a/src/css/components/btn.css b/src/css/components/btn.css index bdf25ee8..7ba5a35a 100644 --- a/src/css/components/btn.css +++ b/src/css/components/btn.css @@ -8,27 +8,27 @@ } .btn-primary.btn-outlined { - @apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)]; + @apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-text-disabled)] disabled:text-[var(--ds-disabled-color)]; } .btn-primary.btn-solid { - @apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)]; + @apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)]; } .btn-primary.btn-soft { - @apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)]; + @apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)]; } .btn-neutral.btn-outlined { - @apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)]; + @apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-text-disabled)] disabled:text-[var(--ds-disabled-color)]; } .btn-neutral.btn-solid { - @apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)]; + @apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)]; } .btn-neutral.btn-plain { - @apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-neutral-plain-disabled-color)]; + @apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-disabled-color)]; } .btn-icon { diff --git a/src/css/components/dialog.css b/src/css/components/dialog.css index 94972b52..ff5b6443 100644 --- a/src/css/components/dialog.css +++ b/src/css/components/dialog.css @@ -1,6 +1,6 @@ @layer components { .dialog { - @apply rounded border; + @apply rounded dark:border dark:shadow-none; overscroll-behavior: contain; box-shadow: 0 6px 16px 0 #0a0a0a1f; diff --git a/src/css/docsearch.css b/src/css/docsearch.css index 3d205da4..4588c263 100644 --- a/src/css/docsearch.css +++ b/src/css/docsearch.css @@ -76,6 +76,10 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal { display: none; } +.DocSearch .DocSearch-Container { + backdrop-filter: blur(4px); +} + .DocSearch .DocSearch-Button-Container::before, .DocSearch .DocSearch-MagnifierLabel::before { font-family: "Material Icons Outlined", sans-serif; @@ -106,9 +110,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal { --docsearch-modal-width: 720px; --docsearch-modal-height: 600px; --docsearch-modal-background: var(--ds-background-body); - --docsearch-modal-shadow: - inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), - 0 3px 8px 0 rgba(85, 90, 100, 1); + --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1); /* searchbox */ --docsearch-searchbox-height: var(--ds-space-7); diff --git a/src/css/global-nav.css b/src/css/global-nav.css index b10059be..fe56293f 100644 --- a/src/css/global-nav.css +++ b/src/css/global-nav.css @@ -20,7 +20,7 @@ html[data-theme="light"] .global-nav > .scroll-btn-left { } html[data-theme="dark"] .global-nav > .scroll-btn-left { - background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to left, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } html[data-theme="light"] .global-nav > .scroll-btn-right { @@ -28,5 +28,5 @@ html[data-theme="light"] .global-nav > .scroll-btn-right { } html[data-theme="dark"] .global-nav > .scroll-btn-right { - background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to right, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } \ No newline at end of file diff --git a/src/css/vars/dark.css b/src/css/vars/dark.css index 3b1fd565..786d7a56 100644 --- a/src/css/vars/dark.css +++ b/src/css/vars/dark.css @@ -7,6 +7,7 @@ --ds-background-surface: theme(colors.zinc.900); --ds-background-tooltip: theme(colors.white); --ds-background-modal: theme(colors.zinc.900); + --ds-background-backdrop: rgba(0, 0, 0, 0.5); /* Text */ --ds-text-disabled: theme(colors.zinc.700); @@ -112,10 +113,6 @@ display: none; } - html[data-theme="dark"] ::backdrop { - --ds-background-backdrop: rgba(10, 10, 10, 0.6); - } - @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { @include dark-theme; diff --git a/src/css/vars/light.css b/src/css/vars/light.css index a250847d..d1b77bf9 100644 --- a/src/css/vars/light.css +++ b/src/css/vars/light.css @@ -1,5 +1,5 @@ @mixin light-theme { - /* Background */ + /* Background */ --ds-background-body: theme(colors.white); --ds-background-level1: theme(colors.zinc.50); --ds-background-level2: theme(colors.zinc.100); @@ -7,6 +7,7 @@ --ds-background-surface: theme(colors.white); --ds-background-tooltip: theme(colors.black); --ds-background-modal: theme(colors.white); + --ds-background-backdrop: rgba(0, 0, 0, 0.5); /* Text */ --ds-text-disabled: theme(colors.zinc.200); @@ -112,10 +113,6 @@ display: none; } - html[data-theme="light"] ::backdrop { - --ds-background-backdrop: rgba(0, 0, 0, 0.6); - } - @media (prefers-color-scheme: light) { :root:not([data-theme="light"]):not([data-theme="dark"]) { @include light-theme; diff --git a/src/js/03-theme-toggle.js b/src/js/03-theme-toggle.js index 8aa31af9..54c9cd74 100644 --- a/src/js/03-theme-toggle.js +++ b/src/js/03-theme-toggle.js @@ -2,22 +2,40 @@ ;(function () { 'use strict' - var toggle = document.getElementById('theme-toggle') + var toggleButtons = document.querySelectorAll('#theme-toggle .toggle-button') + if (!toggleButtons) return - var prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - var storedTheme = localStorage.getItem('theme') || prefersTheme + var storedTheme = localStorage.getItem('themePreference') + var theme = storedTheme || 'system' - if (!toggle) return + var toggleThumb = document.querySelector('#theme-toggle .thumb') + toggleThumb.classList.add(theme) - toggle.onclick = function () { - var currentTheme = document.documentElement.getAttribute('data-theme') || storedTheme || 'light' - var targetTheme = 'light' + var currentButton = document.querySelector(`#theme-toggle .toggle-button[value="${theme}"]`) + if (currentButton) { + currentButton.ariaPressed = 'true' + currentButton.classList.add('active') + } - if (currentTheme === 'light') { - targetTheme = 'dark' + toggleButtons.forEach((button) => { + button.onclick = function () { + var systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + var currentTheme = localStorage.getItem('themePreference') || systemPreference + if (button.value === currentTheme) return + if (button.value === 'system') { + document.documentElement.setAttribute('data-theme', systemPreference) + } else { + document.documentElement.setAttribute('data-theme', button.value) + } + localStorage.setItem('themePreference', button.value) + toggleThumb.classList.remove('system', 'light', 'dark') + toggleThumb.classList.add(button.value) + toggleButtons.forEach((btn) => { + btn.ariaPressed = 'false' + btn.classList.remove('active') + }) + button.ariaPressed = 'true' + button.classList.add('active') } - - document.documentElement.setAttribute('data-theme', targetTheme) - localStorage.setItem('theme', targetTheme) - } + }) })() diff --git a/src/partials/body-end-scripts.hbs b/src/partials/body-end-scripts.hbs index b231022a..f697baa0 100644 --- a/src/partials/body-end-scripts.hbs +++ b/src/partials/body-end-scripts.hbs @@ -18,5 +18,9 @@ {{/if}} {{/with}} + + {{> intercom}} {{> scarf}} diff --git a/src/partials/footer.hbs b/src/partials/footer.hbs index 9aa6d2fd..8518a15d 100644 --- a/src/partials/footer.hbs +++ b/src/partials/footer.hbs @@ -71,6 +71,7 @@ data-track="YouTube Link Clicked" class="h-6 w-6 bg-[url('../img/social-youtube.svg')] bg-no-repeat dark:invert" > + {{> theme-toggle}}

General Inquiries: diff --git a/src/partials/head-scripts.hbs b/src/partials/head-scripts.hbs index ce82fbdd..98ad4c19 100644 --- a/src/partials/head-scripts.hbs +++ b/src/partials/head-scripts.hbs @@ -39,11 +39,16 @@ diff --git a/src/partials/nav-secondary.hbs b/src/partials/nav-secondary.hbs index c15c4bbf..85a787cb 100644 --- a/src/partials/nav-secondary.hbs +++ b/src/partials/nav-secondary.hbs @@ -1,7 +1,7 @@ -