@xex/tokens 0.1.0 → 0.2.0

package/dist/styles.css

@@ -1,19 +1,17 @@
 /* Generated by scripts/gen-css.mjs — do not edit. Compiled to dist/styles.css at build time. */
 
 /* ------------------------------------------------------------------ *
- * Brand overrides (runtime theming)
+ * Tokens
  *
- * Tailwind compiles bg-brand-600 etc. at build time; relying on the
- * compiled output to repaint when --brand-* changes is not reliable
- * across every build setup. These plain-CSS rules use !important to
- * re-declare the brand utilities we use as direct var() lookups, so a
- * theme switch repaints immediately wherever this file is loaded.
- * Only add a utility here if you use it. (Opacity modifiers such as
- * bg-brand-600/50 are not supported by var() colors.)
+ * --brand-*  is written onto <html> at runtime by <ThemeProvider> (the fallback below is Classic,
+ *            so the first paint is never unstyled).
+ * --gray-*   the Tailwind gray scale is remapped to these (see @xex/tailwind-preset), so every
+ *            gray-* utility flips automatically in dark mode.
+ * the rest   semantic names used by components: surface, canvas, accent*, and the status tones
+ *            danger / success / warning / info / purple (solid, -soft, -line, -ink).
  * ------------------------------------------------------------------ */
 
 :root {
-  /* Fallback = Classic, so the first paint is never unstyled. */
   --brand-50: #eff6ff;
   --brand-100: #dbeafe;
   --brand-200: #bfdbfe;
@@ -25,8 +23,101 @@
   --brand-800: #1e40af;
   --brand-900: #1e3a8a;
   --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --canvas: var(--gray-50);
+  --surface: #ffffff;
+  --accent: var(--brand-700);
+  /* text and icons in the brand colour (AA on accent-soft/softer in every theme) */
+  --accent-strong: var(--brand-800);
+  --accent-soft: var(--brand-50);
+  /* tinted backgrounds */
+  --accent-softer: var(--brand-100);
+  --accent-line: var(--brand-200);
+  /* tinted borders and rings */
+  --danger: #ef4444;
+  --danger-soft: #fee2e2;
+  --danger-line: #fecaca;
+  --danger-ink: #b91c1c;
+  --success: #10b981;
+  --success-soft: #d1fae5;
+  --success-line: #a7f3d0;
+  --success-ink: #047857;
+  --warning: #f59e0b;
+  --warning-soft: #fef3c7;
+  --warning-line: #fde68a;
+  --warning-ink: #b45309;
+  --info: #0ea5e9;
+  --info-soft: #e0f2fe;
+  --info-line: #bae6fd;
+  --info-ink: #0369a1;
+  --purple: #a855f7;
+  --purple-soft: #f3e8ff;
+  --purple-line: #e9d5ff;
+  --purple-ink: #7e22ce;
+  --ring-track: #e5e7eb;
+  --overlay: rgb(255 255 255 / 0.65);
+}
+
+html[data-mode='dark'] {
+  color-scheme: dark;
+  --gray-50: #1a2138;
+  --gray-100: #222a45;
+  --gray-200: #2c3454;
+  --gray-300: #3a4468;
+  --gray-400: #7d88a8;
+  --gray-500: #8d97b3;
+  --gray-600: #b4bcd0;
+  --gray-700: #cbd2e1;
+  --gray-800: #e5e7eb;
+  --gray-900: #f3f4f6;
+  --canvas: #0b1020;
+  --surface: #141a2e;
+  --accent: var(--brand-300);
+  --accent-strong: var(--brand-200);
+  --accent-soft: color-mix(in srgb, var(--brand-500) 16%, #0b1020);
+  --accent-softer: color-mix(in srgb, var(--brand-500) 26%, #0b1020);
+  --accent-line: color-mix(in srgb, var(--brand-500) 40%, #0b1020);
+  --danger-soft: #4a1a22;
+  --danger-line: #7f1d1d;
+  --danger-ink: #fca5a5;
+  --success-soft: #0c3a2c;
+  --success-line: #14532d;
+  --success-ink: #6ee7b7;
+  --warning-soft: #4a3410;
+  --warning-line: #78350f;
+  --warning-ink: #fcd34d;
+  --info-soft: #0c3350;
+  --info-line: #075985;
+  --info-ink: #7dd3fc;
+  --purple-soft: #3a1f5a;
+  --purple-line: #581c87;
+  --purple-ink: #d8b4fe;
+  --ring-track: #2a3352;
+  --overlay: rgb(20 26 46 / 0.65);
 }
 
+/* ------------------------------------------------------------------ *
+ * Brand overrides (runtime theming)
+ *
+ * Tailwind compiles bg-brand-600 etc. at build time; relying on the
+ * compiled output to repaint when --brand-* changes is not reliable
+ * across every build setup. These plain-CSS rules use !important to
+ * re-declare the brand utilities we use as direct var() lookups, so a
+ * theme switch repaints immediately wherever this file is loaded.
+ * They are the SOLID brand colours: for tinted backgrounds, accent text
+ * and borders that must adapt to dark mode use the accent-* tokens.
+ * (Opacity modifiers such as bg-brand-600/50 are not supported by var() colors.)
+ * ------------------------------------------------------------------ */
+
 .bg-brand-50 {
   background-color: var(--brand-50) !important;
 }
@@ -208,18 +299,11 @@
  * ------------------------------------------------------------------ */
 
 body {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
   font-family: var(--font-sans), Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-html[data-mode='dark'] body {
-  background-color: #1a2138;
-  color: #f3f4f6;
+  background-color: var(--canvas);
+  color: var(--gray-900);
 }
 
 input[type='checkbox'], input[type='radio'], input[type='range'] {
@@ -241,20 +325,13 @@ input[type='checkbox'], input[type='radio'], input[type='range'] {
 .card {
   border-radius: 0.75rem;
   border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  border-color: var(--gray-200);
+  background-color: var(--surface);
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-html[data-mode='dark'] .card {
-  background-color: #141a2e;
-  border-color: #2a3352;
-}
-
 .nav-item-active {
   display: flex;
   align-items: center;
@@ -284,61 +361,50 @@ html[data-mode='dark'] .card {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: var(--gray-600);
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
- html[data-mode='dark'] .nav-item-inactive:hover {
-  background-color: #222a45;
-}
-
- html[data-mode='dark'] .nav-item-inactive {
-  color: #cbd2e1;
-}
-
 .nav-item-inactive:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  background-color: var(--gray-100);
+  color: var(--gray-900);
 }
 
 .stat-indigo {
   border-width: 1px;
-  background-color: var(--brand-50);
-  color: var(--brand-700);
-  border-color: var(--brand-200);
+  background-color: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent-line);
 }
 
 .stat-emerald {
   border-width: 1px;
-  background-color: #ecfdf5;
-  color: #047857;
-  border-color: #a7f3d0;
+  background-color: var(--success-soft);
+  color: var(--success-ink);
+  border-color: var(--success-line);
 }
 
 .stat-amber {
   border-width: 1px;
-  background-color: #fffbeb;
-  color: #b45309;
-  border-color: #fde68a;
+  background-color: var(--warning-soft);
+  color: var(--warning-ink);
+  border-color: var(--warning-line);
 }
 
 .stat-rose {
   border-width: 1px;
-  background-color: #fff1f2;
-  color: #be123c;
-  border-color: #fecdd3;
+  background-color: var(--danger-soft);
+  color: var(--danger-ink);
+  border-color: var(--danger-line);
 }
 
 .stat-sky {
   border-width: 1px;
-  background-color: #f0f9ff;
-  color: #0369a1;
-  border-color: #bae6fd;
+  background-color: var(--info-soft);
+  color: var(--info-ink);
+  border-color: var(--info-line);
 }
 
 .weight-pill {
@@ -347,8 +413,7 @@ html[data-mode='dark'] .card {
   align-items: center;
   justify-content: center;
   border-radius: 0.375rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  background-color: var(--gray-100);
   padding-left: 0.375rem;
   padding-right: 0.375rem;
   padding-top: 0.125rem;
@@ -358,13 +423,7 @@ html[data-mode='dark'] .card {
   font-weight: 600;
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
-}
-
-html[data-mode='dark'] .weight-pill {
-  background-color: #222a45;
-  color: #cbd2e1;
+  color: var(--gray-700);
 }
 
 /* LoadingDots */
@@ -420,11 +479,11 @@ html[data-mode='dark'] .weight-pill {
 }
 
 .xex-ring-track {
-  stroke: #e5e7eb;
+  stroke: var(--ring-track);
 }
 
 .xex-overlay {
-  background-color: rgb(255 255 255 / 0.65);
+  background-color: var(--overlay);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -440,183 +499,3 @@ html[data-mode='dark'] .weight-pill {
     opacity: 0.5;
   }
 }
-
-/* ------------------------------------------------------------------ *
- * Dark mode (per theme): remap neutral surfaces + soften brand tints.
- * Driven by <html data-mode="dark">, set by ThemeProvider.
- * ------------------------------------------------------------------ */
-
-html[data-mode='dark'] body {
-  background-color: #0b1020;
-  color: #e5e7eb;
-}
-
-html[data-mode='dark'] .bg-white {
-  background-color: #141a2e !important;
-}
-
-html[data-mode='dark'] .xex-ring-track {
-  stroke: #2a3352;
-}
-
-html[data-mode='dark'] .xex-overlay {
-  background-color: rgb(20 26 46 / 0.65);
-}
-
-html[data-mode='dark'] .group:focus-visible .group-focus-visible\:ring-offset-white {
-  --tw-ring-offset-color: #141a2e;
-}
-
-html[data-mode='dark'] .bg-gray-50, html[data-mode='dark'] .hover\:bg-gray-50:hover {
-  background-color: #1a2138 !important;
-}
-
-html[data-mode='dark'] .bg-gray-100, html[data-mode='dark'] .hover\:bg-gray-100:hover, html[data-mode='dark'] .weight-pill {
-  background-color: #222a45 !important;
-}
-
-html[data-mode='dark'] .bg-gray-200 {
-  background-color: #323b5c !important;
-}
-
-html[data-mode='dark'] .border-gray-100 {
-  border-color: #1f2740 !important;
-}
-
-html[data-mode='dark'] .border-gray-200 {
-  border-color: #2a3352 !important;
-}
-
-html[data-mode='dark'] .border-gray-300 {
-  border-color: #3a4468 !important;
-}
-
-html[data-mode='dark'] .text-gray-900, html[data-mode='dark'] .text-gray-800 {
-  color: #f3f4f6 !important;
-}
-
-html[data-mode='dark'] .text-gray-700, html[data-mode='dark'] .text-gray-600, html[data-mode='dark'] .weight-pill {
-  color: #cbd2e1 !important;
-}
-
-html[data-mode='dark'] .text-gray-500, html[data-mode='dark'] .text-gray-400 {
-  color: #8d97b3 !important;
-}
-
-html[data-mode='dark'] .bg-brand-50, html[data-mode='dark'] .hover\:bg-brand-50:hover {
-  background-color: color-mix(in srgb, var(--brand-500) 16%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .bg-brand-100 {
-  background-color: color-mix(in srgb, var(--brand-500) 26%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .text-brand-600, html[data-mode='dark'] .text-brand-700, html[data-mode='dark'] .text-brand-800 {
-  color: var(--brand-300) !important;
-}
-
-html[data-mode='dark'] .border-brand-200 {
-  border-color: color-mix(in srgb, var(--brand-500) 40%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .from-brand-50 {
-  --tw-gradient-from: color-mix(in srgb, var(--brand-500) 16%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .from-brand-100 {
-  --tw-gradient-from: color-mix(in srgb, var(--brand-500) 26%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .to-brand-100 {
-  --tw-gradient-to: color-mix(in srgb, var(--brand-500) 30%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .ring-brand-200 {
-  --tw-ring-color: color-mix(in srgb, var(--brand-500) 40%, #0b1020) !important;
-}
-
-html[data-mode='dark'] .stat-indigo {
-  background-color: color-mix(in srgb, var(--brand-500) 16%, #0b1020);
-  color: var(--brand-300);
-  border-color: color-mix(in srgb, var(--brand-500) 40%, #0b1020);
-}
-
-html[data-mode='dark'] .bg-red-50 {
-  background-color: #3a1620 !important;
-}
-
-html[data-mode='dark'] .border-red-200 {
-  border-color: #7f1d1d !important;
-}
-
-html[data-mode='dark'] .text-red-600, html[data-mode='dark'] .text-red-700, html[data-mode='dark'] .text-red-800 {
-  color: #fca5a5 !important;
-}
-
-html[data-mode='dark'] .bg-emerald-100 {
-  background-color: #0c3a2c !important;
-}
-
-html[data-mode='dark'] .text-emerald-700 {
-  color: #6ee7b7 !important;
-}
-
-html[data-mode='dark'] .bg-amber-100 {
-  background-color: #4a3410 !important;
-}
-
-html[data-mode='dark'] .text-amber-700 {
-  color: #fcd34d !important;
-}
-
-html[data-mode='dark'] .bg-red-100 {
-  background-color: #4a1a22 !important;
-}
-
-html[data-mode='dark'] .bg-sky-100 {
-  background-color: #0c3350 !important;
-}
-
-html[data-mode='dark'] .text-sky-700 {
-  color: #7dd3fc !important;
-}
-
-html[data-mode='dark'] .bg-purple-100 {
-  background-color: #3a1f5a !important;
-}
-
-html[data-mode='dark'] .text-purple-700 {
-  color: #d8b4fe !important;
-}
-
-html[data-mode='dark'] .stat-emerald {
-  background-color: #0c2f25;
-  color: #6ee7b7;
-  border-color: #14532d;
-}
-
-html[data-mode='dark'] .stat-amber {
-  background-color: #3a2a0c;
-  color: #fcd34d;
-  border-color: #78350f;
-}
-
-html[data-mode='dark'] .stat-rose {
-  background-color: #3a1420;
-  color: #fda4af;
-  border-color: #881337;
-}
-
-html[data-mode='dark'] .stat-sky {
-  background-color: #0c2a40;
-  color: #7dd3fc;
-  border-color: #075985;
-}
-
-html[data-mode='dark'] input::-moz-placeholder, html[data-mode='dark'] textarea::-moz-placeholder {
-  color: #6b7592;
-}
-
-html[data-mode='dark'] input::placeholder, html[data-mode='dark'] textarea::placeholder {
-  color: #6b7592;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xex/tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "XeX design tokens: colour themes, font helpers and the shared stylesheet.",
   "license": "MIT",
   "keywords": [
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@xex/tailwind-preset": "^0.1.0",
+    "@xex/tailwind-preset": "^0.2.0",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"