@photon-ai/pho-ui 0.1.1 → 0.2.0

package/src/styles/theme.css

@@ -9,40 +9,53 @@
  * function, resolved by the `color-scheme` set in pho.css (`:root` = light,
  * `[data-mode="dark"]` = dark). No duplicated dark-mode override block.
  *
- * Values are ported from Photon's dashboard-v2 token system (Untitled-UI
- * derived) and re-namespaced. The neutral/red/green/yellow ramps come from
- * Tailwind v4's default theme; the brand ramp (Photon spectrum-blue) is below.
+ * Values are extracted from photon.codes (Framer "Landing V1" color styles +
+ * published CSS) — the single source of truth. The system is monochrome:
+ * black/white surfaces with an alpha-based text hierarchy. "Brand" is the
+ * high-contrast action color (black in light, white in dark — the site's
+ * button fill), not a hue. Functional reds/greens and the categorical accent
+ * set below are the only chromatic tokens.
  *
- * NOTE: brand ramp steps 50/100/200/300/800/900/950 and a few dark brand-text
- * choices are design judgement — flagged for review (see plan).
+ * `static` so every token is emitted as a CSS variable even when no utility
+ * references it — consumers (and the docs) address tokens directly with
+ * var(--color-pho-*) for charts, code themes, and inline swatches.
  */
 
-@theme {
+@theme static {
   /* ============================== Fonts ============================== */
   --font-sans:
     "PolySans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     Arial, sans-serif;
   --font-display: var(--font-sans);
+  /* Serif accent — the site's italicized editorial voice. */
+  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
   --font-mono:
     "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
-  /* ===================== Brand ramp (spectrum blue) ===================== */
-  --color-brand-50: #eef8fd;
-  --color-brand-100: #d4ecfa;
-  --color-brand-200: #aedcf4;
-  --color-brand-300: #7bc6ec;
-  --color-brand-400: #4eb0e8;
-  --color-brand-500: #2998d9;
-  --color-brand-600: #2486c4;
-  --color-brand-700: #1f6fa3;
-  --color-brand-800: #1d5c85;
-  --color-brand-900: #1c4d6e;
-  --color-brand-950: #123249;
+  /* ================ Accent set (photon.codes palette) ================ */
+  /* The site's categorical colors — code syntax highlighting, charts,
+     avatars. Not for interactive states. */
+  --color-pho-yellow: #c3bb26;
+  --color-pho-blue: #365eb3;
+  --color-pho-sky: #3f88b6;
+  --color-pho-indigo: #6985e4;
+  --color-pho-purple: #bf6eff;
+  --color-pho-green: #36b35b;
+  --color-pho-orange: #e78016;
+  --color-pho-amber: #ffab2a;
+  --color-pho-navy: #1d2650;
+
+  /* ================== Functional anchors (site-exact) ================== */
+  --color-pho-red: #ff2244; /* site Button error state */
 
   /* =========================== Type scale =========================== */
-  --text-2xs: 0.625rem;
-  --text-2xs--line-height: 0.875rem;
+  /* CLOSED scale — the reset removes Tailwind's default sizes (text-base,
+     text-2xl, …) so only these steps generate utilities. Body: 12/14/16/18/20.
+     Display: 24/32/40/48/60, the heading steps measured on photon.codes.
+     NOTE: the reset wipes the whole --text-* prefix; every --text-color-pho-*
+     token is declared AFTER this point in the file, so it survives. */
+  --text-*: initial;
   --text-xs: 0.75rem;
   --text-xs--line-height: 1.125rem;
   --text-sm: 0.875rem;
@@ -54,22 +67,33 @@
   --text-xl: 1.25rem;
   --text-xl--line-height: 1.875rem;
 
+  /* Display sizes — site headings run tight (lh 1.05–1.3) with -0.02em
+     tracking, -0.04em at hero sizes. */
   --text-display-xs: 1.5rem;
-  --text-display-xs--line-height: 2rem;
-  --text-display-sm: 1.875rem;
-  --text-display-sm--line-height: 2.375rem;
-  --text-display-md: 2.25rem;
+  --text-display-xs--line-height: 1.95rem;
+  --text-display-xs--letter-spacing: -0.02em;
+  --text-display-sm: 2rem;
+  --text-display-sm--line-height: 2.4rem;
+  --text-display-sm--letter-spacing: -0.02em;
+  --text-display-md: 2.5rem;
   --text-display-md--line-height: 2.75rem;
-  --text-display-md--letter-spacing: -0.72px;
+  --text-display-md--letter-spacing: -0.02em;
   --text-display-lg: 3rem;
-  --text-display-lg--line-height: 3.75rem;
-  --text-display-lg--letter-spacing: -0.96px;
+  --text-display-lg--line-height: 3.15rem;
+  --text-display-lg--letter-spacing: -0.02em;
   --text-display-xl: 3.75rem;
-  --text-display-xl--line-height: 4.5rem;
-  --text-display-xl--letter-spacing: -1.2px;
-  --text-display-2xl: 4.5rem;
-  --text-display-2xl--line-height: 5.625rem;
-  --text-display-2xl--letter-spacing: -1.44px;
+  --text-display-xl--line-height: 3.9375rem;
+  --text-display-xl--letter-spacing: -0.04em;
+
+  /* ========================== Font weights ========================== */
+  /* CLOSED set — Pho ships four weights; nothing else generates a utility:
+     font-light (300) display/marketing lines · font-normal (400) body ·
+     font-medium (500) UI controls · font-semibold (600) headings. */
+  --font-weight-*: initial;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
 
   /* ============================= Radius ============================= */
   --radius-xs: 0.125rem;
@@ -81,209 +105,182 @@
   --radius-3xl: 1.5rem;
 
   /* ============================= Shadows ============================= */
-  --shadow-pho-xs: 0 1px 2px rgba(10, 13, 18, 0.05);
+  /* Floating layers only (menus, popovers, dialogs). Cards and buttons are
+     flat on photon.codes — hairline borders carry the separation. */
+  --shadow-pho-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-pho-sm:
-    0 1px 3px rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 0.1);
+    0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --shadow-pho-md:
-    0 4px 6px -1px rgba(10, 13, 18, 0.1), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
   --shadow-pho-lg:
-    0 12px 16px -4px rgba(10, 13, 18, 0.08),
-    0 4px 6px -2px rgba(10, 13, 18, 0.03);
+    0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
   --shadow-pho-xl:
-    0 20px 24px -4px rgba(10, 13, 18, 0.08),
-    0 8px 8px -4px rgba(10, 13, 18, 0.03);
-  /* Skeuomorphic inset edge used on solid buttons. */
-  --shadow-pho-skeuomorphic:
-    inset 0 0 0 1px rgba(10, 13, 18, 0.18),
-    inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
-  --shadow-pho-skeuo-xs: var(--shadow-pho-skeuomorphic), var(--shadow-pho-xs);
+    0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03);
 
   /* =================== Semantic: text (text-pho-*) =================== */
-  --text-color-pho-primary: light-dark(
-    var(--color-neutral-900),
-    var(--color-neutral-50)
-  );
+  /* The site's "Font/*" styles: pure black/white stepped by alpha. */
+  --text-color-pho-primary: light-dark(#000, #fff);
   --text-color-pho-secondary: light-dark(
-    var(--color-neutral-700),
-    var(--color-neutral-300)
+    rgba(0, 0, 0, 0.75),
+    rgba(255, 255, 255, 0.75)
   );
   --text-color-pho-secondary-hover: light-dark(
-    var(--color-neutral-800),
-    var(--color-neutral-200)
+    rgba(0, 0, 0, 0.85),
+    rgba(255, 255, 255, 0.85)
   );
   --text-color-pho-tertiary: light-dark(
-    var(--color-neutral-600),
-    var(--color-neutral-400)
+    rgba(0, 0, 0, 0.5),
+    rgba(255, 255, 255, 0.5)
   );
   --text-color-pho-tertiary-hover: light-dark(
-    var(--color-neutral-700),
-    var(--color-neutral-300)
+    rgba(0, 0, 0, 0.65),
+    rgba(255, 255, 255, 0.65)
   );
   --text-color-pho-quaternary: light-dark(
-    var(--color-neutral-500),
-    var(--color-neutral-400)
+    rgba(0, 0, 0, 0.4),
+    rgba(255, 255, 255, 0.4)
+  );
+  --text-color-pho-placeholder: light-dark(
+    rgba(0, 0, 0, 0.4),
+    rgba(255, 255, 255, 0.4)
   );
-  --text-color-pho-placeholder: var(--color-neutral-500);
   --text-color-pho-disabled: light-dark(
-    var(--color-neutral-400),
-    var(--color-neutral-600)
+    rgba(0, 0, 0, 0.25),
+    rgba(255, 255, 255, 0.25)
   );
   --text-color-pho-white: #fff;
-  --text-color-pho-brand: light-dark(
-    var(--color-brand-700),
-    var(--color-brand-400)
-  );
-  --text-color-pho-brand-hover: light-dark(
-    var(--color-brand-800),
-    var(--color-brand-300)
-  );
-  --text-color-pho-error: light-dark(
-    var(--color-red-600),
-    var(--color-red-400)
-  );
-  --text-color-pho-error-hover: light-dark(
-    var(--color-red-700),
-    var(--color-red-300)
-  );
-  --text-color-pho-success: light-dark(
-    var(--color-green-600),
-    var(--color-green-400)
-  );
-  --text-color-pho-warning: light-dark(
-    var(--color-yellow-600),
-    var(--color-yellow-400)
-  );
+  /* Content sitting on bg-pho-brand-solid (button labels, check marks…). */
+  --text-color-pho-on-brand: light-dark(#fff, #000);
+  /* Content sitting on bg-pho-inverse. */
+  --text-color-pho-inverse: light-dark(#fff, #101010);
+  --text-color-pho-brand: light-dark(#000, #fff);
+  --text-color-pho-brand-hover: light-dark(#000, #fff);
+  --text-color-pho-error: light-dark(#d61f3d, #ff5c75);
+  --text-color-pho-error-hover: light-dark(#b81a34, #ff8095);
+  --text-color-pho-success: light-dark(#2a8a46, #4cc571);
+  --text-color-pho-warning: light-dark(#a86a00, #ffab2a);
 
   /* ============ Semantic: foreground/icons (text-fg-pho-*) ============ */
-  --text-color-fg-pho-primary: light-dark(
-    var(--color-neutral-900),
-    var(--color-white)
-  );
+  --text-color-fg-pho-primary: light-dark(#000, #fff);
   --text-color-fg-pho-secondary: light-dark(
-    var(--color-neutral-700),
-    var(--color-neutral-300)
+    rgba(0, 0, 0, 0.75),
+    rgba(255, 255, 255, 0.75)
   );
   --text-color-fg-pho-quaternary: light-dark(
-    var(--color-neutral-400),
-    var(--color-neutral-600)
+    rgba(0, 0, 0, 0.3),
+    rgba(255, 255, 255, 0.3)
   );
   --text-color-fg-pho-quaternary-hover: light-dark(
-    var(--color-neutral-500),
-    var(--color-neutral-500)
-  );
-  --text-color-fg-pho-brand: light-dark(
-    var(--color-brand-600),
-    var(--color-brand-500)
-  );
-  --text-color-fg-pho-error: light-dark(
-    var(--color-red-500),
-    var(--color-red-400)
+    rgba(0, 0, 0, 0.45),
+    rgba(255, 255, 255, 0.45)
   );
+  --text-color-fg-pho-brand: light-dark(#000, #fff);
+  --text-color-fg-pho-error: light-dark(#e01e3d, #ff5c75);
 
   /* =============== Semantic: background (bg-pho-*) =============== */
-  --background-color-pho-primary: light-dark(#fff, var(--color-neutral-950));
-  --background-color-pho-primary-hover: light-dark(
-    var(--color-neutral-50),
-    var(--color-neutral-900)
-  );
-  --background-color-pho-secondary: light-dark(
-    var(--color-neutral-50),
-    var(--color-neutral-900)
-  );
-  --background-color-pho-secondary-hover: light-dark(
-    var(--color-neutral-100),
-    var(--color-neutral-800)
-  );
-  --background-color-pho-tertiary: light-dark(
-    var(--color-neutral-100),
-    var(--color-neutral-800)
-  );
-  --background-color-pho-quaternary: light-dark(
-    var(--color-neutral-200),
-    var(--color-neutral-700)
-  );
+  /* App/page canvas — the site's "Primary BG". */
+  --background-color-pho-page: light-dark(#f5f5f7, #000);
+  /* Main surface: cards, inputs, panels — the site's "BG/Card". */
+  --background-color-pho-primary: light-dark(#fff, #101010);
+  --background-color-pho-primary-hover: light-dark(#f5f5f7, #1a1a1a);
+  --background-color-pho-secondary: light-dark(#f5f5f7, #0b0b0b);
+  --background-color-pho-secondary-hover: light-dark(#eee, #161616);
+  --background-color-pho-tertiary: light-dark(#eee, #202020);
+  --background-color-pho-quaternary: light-dark(#e2e2e4, #2e2e2e);
+  /* Inverted chip surface — the site's "msgbbl" (dark chip in light mode,
+     light chip in dark mode). Pair with text-pho-inverse. */
+  --background-color-pho-inverse: light-dark(#202020, #eee);
   --background-color-pho-disabled: light-dark(
-    var(--color-neutral-100),
-    var(--color-neutral-800)
+    rgba(0, 0, 0, 0.05),
+    rgba(255, 255, 255, 0.05)
   );
-  --background-color-pho-brand-solid: var(--color-brand-600);
+  /* High-contrast action fill — the site's button. Pair with
+     text-pho-on-brand, never text-white. */
+  --background-color-pho-brand-solid: light-dark(#000, #fff);
   --background-color-pho-brand-solid-hover: light-dark(
-    var(--color-brand-700),
-    var(--color-brand-500)
+    rgba(16, 16, 16, 0.85),
+    #eee
   );
   --background-color-pho-brand-secondary: light-dark(
-    var(--color-brand-50),
-    var(--color-brand-900)
-  );
-  --background-color-pho-error-solid: var(--color-red-600);
-  --background-color-pho-error-solid-hover: light-dark(
-    var(--color-red-700),
-    var(--color-red-500)
+    rgba(0, 0, 0, 0.05),
+    rgba(255, 255, 255, 0.05)
   );
+  /* Knob/dot sitting on brand-solid (switch thumb, radio indicator). */
+  --background-color-pho-on-brand: light-dark(#fff, #000);
+  --background-color-pho-error-solid: #ff2244;
+  --background-color-pho-error-solid-hover: light-dark(#e01e3d, #ff4761);
   --background-color-pho-error-primary: light-dark(
-    var(--color-red-50),
-    var(--color-red-950)
+    rgba(255, 34, 68, 0.08),
+    rgba(255, 34, 68, 0.15)
   );
-  /* Quiet hover wash for ghost surfaces (pre-blended, so no /opacity needed). */
+  /* Quiet hover wash for ghost surfaces — the site's "Font/5%". */
   --background-color-pho-ghost-hover: light-dark(
-    rgba(10, 13, 18, 0.05),
-    rgba(255, 255, 255, 0.06)
+    rgba(0, 0, 0, 0.05),
+    rgba(255, 255, 255, 0.05)
   );
-  /* Modal/scrim backdrop base (used with an /opacity utility is avoided —
-     callers layer their own alpha). */
+  /* Modal/scrim backdrop. */
   --background-color-pho-overlay: light-dark(
-    rgba(10, 13, 18, 0.7),
+    rgba(0, 0, 0, 0.5),
     rgba(0, 0, 0, 0.6)
   );
 
   /* ================ Semantic: border (border-pho-*) ================ */
+  /* Strong edge — inputs, interactive outlines. */
   --border-color-pho-primary: light-dark(
-    var(--color-neutral-300),
-    var(--color-neutral-700)
-  );
-  --border-color-pho-secondary: light-dark(
-    var(--color-neutral-200),
-    var(--color-neutral-800)
+    rgba(0, 0, 0, 0.15),
+    rgba(255, 255, 255, 0.15)
   );
+  /* Hairline card stroke — the site's "BG/Card Stroke". */
+  --border-color-pho-secondary: light-dark(#eee, #202020);
   --border-color-pho-tertiary: light-dark(
-    var(--color-neutral-100),
-    var(--color-neutral-800)
+    rgba(0, 0, 0, 0.05),
+    rgba(255, 255, 255, 0.05)
   );
+  /* Selected/focus edge — monochrome at 40%, matching ring/outline-pho-brand. */
   --border-color-pho-brand: light-dark(
-    var(--color-brand-500),
-    var(--color-brand-400)
+    rgba(0, 0, 0, 0.4),
+    rgba(255, 255, 255, 0.4)
   );
-  --border-color-pho-error: light-dark(
-    var(--color-red-500),
-    var(--color-red-400)
+  /* Hairline edge for elements ON a brand-solid fill (EffectButton pill). */
+  --border-color-pho-on-brand: light-dark(
+    rgba(255, 255, 255, 0.15),
+    rgba(0, 0, 0, 0.08)
   );
+  --border-color-pho-error: #ff2244;
   --border-color-pho-error-subtle: light-dark(
-    var(--color-red-300),
-    var(--color-red-500)
+    rgba(255, 34, 68, 0.3),
+    rgba(255, 34, 68, 0.4)
   );
   /* Hairline interactive edge shared by hover/selected surfaces. */
   --border-color-pho-interactive: light-dark(
-    rgba(10, 13, 18, 0.1),
+    rgba(0, 0, 0, 0.1),
     rgba(255, 255, 255, 0.1)
   );
 
   /* ================== Semantic: ring (ring-pho-*) ================== */
   --ring-color-pho-primary: light-dark(
-    var(--color-neutral-300),
-    var(--color-neutral-700)
+    rgba(0, 0, 0, 0.15),
+    rgba(255, 255, 255, 0.15)
   );
-  --ring-color-pho-brand: var(--color-brand-500);
-  --ring-color-pho-error: var(--color-red-500);
+  --ring-color-pho-secondary: light-dark(#eee, #202020);
+  --ring-color-pho-brand: light-dark(
+    rgba(0, 0, 0, 0.4),
+    rgba(255, 255, 255, 0.4)
+  );
+  --ring-color-pho-error: #ff2244;
   --ring-color-pho-error-subtle: light-dark(
-    var(--color-red-300),
-    var(--color-red-500)
+    rgba(255, 34, 68, 0.3),
+    rgba(255, 34, 68, 0.4)
   );
   --ring-color-pho-interactive: light-dark(
-    rgba(10, 13, 18, 0.1),
+    rgba(0, 0, 0, 0.1),
     rgba(255, 255, 255, 0.1)
   );
 
   /* ============== Semantic: outline (focus rings) ============== */
-  --outline-color-pho-brand: var(--color-brand-500);
-  --outline-color-pho-error: var(--color-red-500);
+  --outline-color-pho-brand: light-dark(
+    rgba(0, 0, 0, 0.4),
+    rgba(255, 255, 255, 0.4)
+  );
+  --outline-color-pho-error: #ff2244;
 }