@photon-ai/pho-ui 0.1.0

package/src/styles/theme.css

@@ -0,0 +1,289 @@
+/**
+ * Pho Design System — design tokens.
+ *
+ * Naming: every semantic token lives under the `pho-*` namespace so the
+ * generated utilities (text-pho-*, bg-pho-*, border-pho-*, ring-pho-*) never
+ * collide with a consumer's own Tailwind theme.
+ *
+ * Theming: light/dark values are expressed once with the CSS `light-dark()`
+ * 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.
+ *
+ * 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).
+ */
+
+@theme {
+  /* ============================== Fonts ============================== */
+  --font-sans:
+    "PolySans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    Arial, sans-serif;
+  --font-display: var(--font-sans);
+  --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;
+
+  /* =========================== Type scale =========================== */
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: 0.875rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.125rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-md: 1rem;
+  --text-md--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.875rem;
+
+  --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-md--line-height: 2.75rem;
+  --text-display-md--letter-spacing: -0.72px;
+  --text-display-lg: 3rem;
+  --text-display-lg--line-height: 3.75rem;
+  --text-display-lg--letter-spacing: -0.96px;
+  --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;
+
+  /* ============================= Radius ============================= */
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+
+  /* ============================= Shadows ============================= */
+  --shadow-pho-xs: 0 1px 2px rgba(10, 13, 18, 0.05);
+  --shadow-pho-sm:
+    0 1px 3px rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 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);
+  --shadow-pho-lg:
+    0 12px 16px -4px rgba(10, 13, 18, 0.08),
+    0 4px 6px -2px rgba(10, 13, 18, 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);
+
+  /* =================== Semantic: text (text-pho-*) =================== */
+  --text-color-pho-primary: light-dark(
+    var(--color-neutral-900),
+    var(--color-neutral-50)
+  );
+  --text-color-pho-secondary: light-dark(
+    var(--color-neutral-700),
+    var(--color-neutral-300)
+  );
+  --text-color-pho-secondary-hover: light-dark(
+    var(--color-neutral-800),
+    var(--color-neutral-200)
+  );
+  --text-color-pho-tertiary: light-dark(
+    var(--color-neutral-600),
+    var(--color-neutral-400)
+  );
+  --text-color-pho-tertiary-hover: light-dark(
+    var(--color-neutral-700),
+    var(--color-neutral-300)
+  );
+  --text-color-pho-quaternary: light-dark(
+    var(--color-neutral-500),
+    var(--color-neutral-400)
+  );
+  --text-color-pho-placeholder: var(--color-neutral-500);
+  --text-color-pho-disabled: light-dark(
+    var(--color-neutral-400),
+    var(--color-neutral-600)
+  );
+  --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)
+  );
+
+  /* ============ Semantic: foreground/icons (text-fg-pho-*) ============ */
+  --text-color-fg-pho-primary: light-dark(
+    var(--color-neutral-900),
+    var(--color-white)
+  );
+  --text-color-fg-pho-secondary: light-dark(
+    var(--color-neutral-700),
+    var(--color-neutral-300)
+  );
+  --text-color-fg-pho-quaternary: light-dark(
+    var(--color-neutral-400),
+    var(--color-neutral-600)
+  );
+  --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)
+  );
+
+  /* =============== 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)
+  );
+  --background-color-pho-disabled: light-dark(
+    var(--color-neutral-100),
+    var(--color-neutral-800)
+  );
+  --background-color-pho-brand-solid: var(--color-brand-600);
+  --background-color-pho-brand-solid-hover: light-dark(
+    var(--color-brand-700),
+    var(--color-brand-500)
+  );
+  --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)
+  );
+  --background-color-pho-error-primary: light-dark(
+    var(--color-red-50),
+    var(--color-red-950)
+  );
+  /* Quiet hover wash for ghost surfaces (pre-blended, so no /opacity needed). */
+  --background-color-pho-ghost-hover: light-dark(
+    rgba(10, 13, 18, 0.05),
+    rgba(255, 255, 255, 0.06)
+  );
+  /* Modal/scrim backdrop base (used with an /opacity utility is avoided —
+     callers layer their own alpha). */
+  --background-color-pho-overlay: light-dark(
+    rgba(10, 13, 18, 0.7),
+    rgba(0, 0, 0, 0.6)
+  );
+
+  /* ================ Semantic: border (border-pho-*) ================ */
+  --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)
+  );
+  --border-color-pho-tertiary: light-dark(
+    var(--color-neutral-100),
+    var(--color-neutral-800)
+  );
+  --border-color-pho-brand: light-dark(
+    var(--color-brand-500),
+    var(--color-brand-400)
+  );
+  --border-color-pho-error: light-dark(
+    var(--color-red-500),
+    var(--color-red-400)
+  );
+  --border-color-pho-error-subtle: light-dark(
+    var(--color-red-300),
+    var(--color-red-500)
+  );
+  /* Hairline interactive edge shared by hover/selected surfaces. */
+  --border-color-pho-interactive: light-dark(
+    rgba(10, 13, 18, 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)
+  );
+  --ring-color-pho-brand: var(--color-brand-500);
+  --ring-color-pho-error: var(--color-red-500);
+  --ring-color-pho-error-subtle: light-dark(
+    var(--color-red-300),
+    var(--color-red-500)
+  );
+  --ring-color-pho-interactive: light-dark(
+    rgba(10, 13, 18, 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);
+}