From 1444a66bb201ce5fdf16552a32bcd281089c64ed Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Wed, 4 Mar 2026 23:14:43 -0500
Subject: [PATCH] feat(08-01): define design token CSS custom properties for
 icon sizes and type scale

- New tokens.css.ts exports designTokens with --yj-icon-sm/md/lg and --yj-text-xs/sm/md/lg/xl
- Values derived from existing pixel sizes scattered across codebase
- :host scoped for component-level adoption via static styles array
---
 frontend/src/styles/tokens.css.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 frontend/src/styles/tokens.css.ts

diff --git a/frontend/src/styles/tokens.css.ts b/frontend/src/styles/tokens.css.ts
new file mode 100644
index 0000000..7e0d398
--- /dev/null
+++ b/frontend/src/styles/tokens.css.ts
@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+/**
+ * Design tokens for consistent sizing across all components.
+ * Import and include in a component's static styles array:
+ *
+ *   import { designTokens } from '../../styles/tokens.css';
+ *   static styles = [designTokens, css`...`];
+ */
+export const designTokens = css`
+    :host {
+        /* ── Icon sizes ── */
+        --yj-icon-sm: 14px;
+        --yj-icon-md: 18px;
+        --yj-icon-lg: 24px;
+
+        /* ── Type scale ── */
+        --yj-text-xs: 11px;
+        --yj-text-sm: 12px;
+        --yj-text-md: 13px;
+        --yj-text-lg: 15px;
+        --yj-text-xl: 18px;
+    }
+`;