From 11eabed45215e015f0ccee2f9416829c3917cc35 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Thu, 14 Sep 2023 15:00:56 -0500
Subject: [PATCH] add second set of tokens for prefers theme mode (#3)

---
 src/css/ds-dark.css       | 283 ++++++++++++++++++++++++++++++++++++++
 src/css/ds-light.css      | 283 ++++++++++++++++++++++++++++++++++++++
 src/css/ds-vars.css       | 283 --------------------------------------
 src/css/site.css          |   2 +
 src/js/07-theme-toggle.js |  11 +-
 5 files changed, 573 insertions(+), 289 deletions(-)
 create mode 100644 src/css/ds-dark.css
 create mode 100644 src/css/ds-light.css

diff --git a/src/css/ds-dark.css b/src/css/ds-dark.css
new file mode 100644
index 00000000..010914d7
--- /dev/null
+++ b/src/css/ds-dark.css
@@ -0,0 +1,283 @@
+html[data-theme="dark"] {
+  --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-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-400);
+  --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-800);
+  --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-500);
+  --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);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {
+    --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-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-400);
+    --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-800);
+    --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-500);
+    --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);
+  }
+}
diff --git a/src/css/ds-light.css b/src/css/ds-light.css
new file mode 100644
index 00000000..2caea6f2
--- /dev/null
+++ b/src/css/ds-light.css
@@ -0,0 +1,283 @@
+html[data-theme="light"] {
+  --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-100);
+  --ds-background-level2: var(--ds-neutral-200);
+  --ds-background-level3: var(--ds-neutral-300);
+  --ds-background-surface: var(--ds-common-white);
+  --ds-background-tooltip: var(--ds-neutral-900);
+  --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-200);
+  --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-100);
+  --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-300);
+  --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-200);
+  --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);
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {
+    --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-100);
+    --ds-background-level2: var(--ds-neutral-200);
+    --ds-background-level3: var(--ds-neutral-300);
+    --ds-background-surface: var(--ds-common-white);
+    --ds-background-tooltip: var(--ds-neutral-900);
+    --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-200);
+    --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-100);
+    --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-300);
+    --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-200);
+    --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);
+  }
+}
diff --git a/src/css/ds-vars.css b/src/css/ds-vars.css
index cc188d14..60100ac6 100644
--- a/src/css/ds-vars.css
+++ b/src/css/ds-vars.css
@@ -1,286 +1,3 @@
-:root,
-html[data-theme="light"] {
-  --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-100);
-  --ds-background-level2: var(--ds-neutral-200);
-  --ds-background-level3: var(--ds-neutral-300);
-  --ds-background-surface: var(--ds-common-white);
-  --ds-background-tooltip: var(--ds-neutral-900);
-  --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-200);
-  --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-100);
-  --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-300);
-  --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-200);
-  --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);
-}
-
-html[data-theme="dark"] {
-  --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-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-400);
-  --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-800);
-  --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-500);
-  --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);
-}
-
 :root {
   --ds-common-black: #090909;
   --ds-common-white: #fff;
diff --git a/src/css/site.css b/src/css/site.css
index 7cd51f1f..9d2eb344 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -3,6 +3,8 @@
 @import "typeface-roboto-mono.css";
 @import "ds-typography.css";
 @import "ds-vars.css";
+@import "ds-light.css";
+@import "ds-dark.css";
 @import "vars.css";
 @import "base.css";
 @import "body.css";
diff --git a/src/js/07-theme-toggle.js b/src/js/07-theme-toggle.js
index 15ac0db9..ab091a0d 100644
--- a/src/js/07-theme-toggle.js
+++ b/src/js/07-theme-toggle.js
@@ -9,19 +9,18 @@ function setIcon (theme) {
   }
 }
 
-var storedTheme =
-  localStorage.getItem('theme') ||
-  (window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light')
+var storedTheme = localStorage.getItem('theme')
+var prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 
 if (storedTheme) {
   document.documentElement.setAttribute('data-theme', storedTheme)
   setIcon(storedTheme)
+} else {
+  setIcon(prefersTheme)
 }
 
 toggle.onclick = function () {
-  var currentTheme = document.documentElement.getAttribute('data-theme')
+  var currentTheme = document.documentElement.getAttribute('data-theme') || prefersTheme
   var targetTheme = 'light'
 
   if (currentTheme === 'light') {