feat(modes): add support for theme modes

.node-version

@@ -1 +1 @@
-v20.13.1
+v22.13.0

package.json

@@ -18,22 +18,24 @@
     "lint": "npm run lint --if-present -ws && prettier -c .",
     "version": "changeset version && npm i",
     "release": "changeset publish",
-    "storybook": "npm run build && npm run dev -w @holisticon/hap-documentation"
+    "storybook": "npm run build && npm run dev -w @holisticon/hap-documentation",
+    "update": "ncu -i -ws"
   },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",
     "*.{ts,tsx,js,mjs}": "eslint --fix"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.7",
-    "eslint": "^9.3.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.4",
-    "prettier": "^3.2.5",
-    "prettier-plugin-organize-imports": "^3.2.4",
+    "@changesets/cli": "^2.27.11",
+    "eslint": "^9.17.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0",
+    "npm-check-updates": "^17.1.13",
+    "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "storybook-addon-pseudo-states": "4.0.2",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^8.0.0-alpha.16"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.19.1"
   }
 }

packages/documentation/.storybook/preview.ts

@@ -1,16 +1,44 @@
 import "@holisticon/hap-foundation/atomic-playfulness.css";
 import type { Preview } from "@storybook/web-components";
+import { html } from "lit";
 import { holisticonTheme } from "./theme.js";
 
 const preview: Preview = {
   parameters: {
     docs: { theme: holisticonTheme },
+    backgrounds: { disable: true },
     options: {
       storySort: {
         order: ["Introduction", "Foundation", "Design Tokens"],
       },
     },
   },
+  globalTypes: {
+    mode: {
+      description: "Theme mode to apply to the canvas.",
+      toolbar: {
+        title: "Mode",
+        icon: "photo",
+        items: ["light", "dark"],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: "light",
+  },
+  decorators: (story, context) => {
+    const mode = context.globals["mode"] ?? "light";
+    document.documentElement.setAttribute("data-mode", mode);
+    return html`
+      <style>
+        body {
+          background-color: var(--hap-color-background-neutral);
+        }
+      </style>
+      ${story()}
+    `;
+  },
 };
 
 export default preview;

packages/documentation/package.json

@@ -20,13 +20,13 @@
     "@holisticon/hap-foundation": "^0.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.2.2",
-    "@storybook/blocks": "^8.2.2",
-    "@storybook/manager-api": "^8.2.2",
-    "@storybook/theming": "^8.2.2",
-    "@storybook/web-components": "^8.2.2",
-    "@storybook/web-components-vite": "^8.2.2",
-    "lit": "^3.1.4",
-    "storybook": "^8.2.2"
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
+    "lit": "^3.2.1",
+    "storybook": "^8.4.7"
   }
 }

packages/foundation/package.json

@@ -22,7 +22,7 @@
     "lint": "eslint . && tz lint"
   },
   "devDependencies": {
-    "@terrazzo/cli": "^0.2.8",
-    "@terrazzo/plugin-css": "^0.2.0"
+    "@terrazzo/cli": "^0.3.3",
+    "@terrazzo/plugin-css": "^0.3.0"
   }
 }

packages/foundation/terrazzo.config.mjs

@@ -13,6 +13,22 @@ export default defineConfig({
         name = name.replace("hap-tokens", "hap");
         return name;
       },
+      modeSelectors: [
+        {
+          mode: "Light",
+          selectors: [
+            "@media (prefers-color-scheme: light)",
+            '[data-mode="light"]',
+          ],
+        },
+        {
+          mode: "Dark",
+          selectors: [
+            "@media (prefers-color-scheme: dark)",
+            '[data-mode="dark"]',
+          ],
+        },
+      ],
       transform: (token) => {
         // letter-spacing values in figma are float decimals
         if (