@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/styles.css

@@ -0,0 +1,77 @@
+/**
+ * Local UI stylesheet — Tailwind v4 + shared design tokens.
+ *
+ * Imports the @theme block from @clef-sh/design so utility classes like
+ * `bg-ink-850`, `text-ash-dim`, `border-edge` resolve at build time. Add
+ * any global selectors (focus rings, scrollbar, etc.) inside `@layer base`
+ * so Tailwind utility classes (which live in `@layer utilities`) can still
+ * override them — unlayered rules would beat utilities at equal specificity.
+ */
+@import "tailwindcss";
+@import "@clef-sh/design/theme.css";
+
+@layer base {
+  /* Global focus rings. Pre-Phase-3 the UI had no `:focus-visible` styling
+     at all — `role="button"` divs in Sidebar / MatrixGrid were invisible to
+     keyboard navigation. */
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible,
+  [role="button"]:focus-visible,
+  [role="tab"]:focus-visible,
+  [role="link"]:focus-visible,
+  [tabindex]:not([tabindex="-1"]):focus-visible {
+    outline: 2px solid var(--color-gold-500);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  /* Body defaults — Tailwind's preflight handles margin/padding/box-sizing
+     resets; we only need the bg, text color, and font-family for the
+     pre-React paint. App.tsx's outer div re-applies these via Tailwind
+     classes once the React tree mounts. */
+  body {
+    background-color: var(--color-ink-950);
+    color: var(--color-bone);
+    font-family: var(--font-sans);
+  }
+
+  /* Scrollbar styling (webkit) — keeps the dark theme consistent inside
+     scrollable containers. */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-edge-strong);
+    border-radius: 3px;
+  }
+
+  /* Native dropdown options inherit the OS default light background unless
+     forced. Match the surface scale. */
+  select option {
+    background: var(--color-ink-800);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-ash-dim);
+  }
+}
+
+/**
+ * SchemaEditor's row-validation spinner used to inject this keyframe via a
+ * style tag at module load time (see SchemaEditor.tsx around line 444). We
+ * lift it here so it lives in one place and can be `animate-[name]` from
+ * any future primitive without re-injecting the global style tag.
+ */
+@keyframes clef-schema-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/client/theme.ts

@@ -1,48 +1,27 @@
-export const theme = {
-  bg: "#0A0B0D",
-  surface: "#111318",
-  surfaceHover: "#161A22",
-  border: "#1E2330",
-  borderLight: "#252D3D",
-  accent: "#F0A500",
-  accentDim: "#F0A50022",
-  accentHover: "#FFB733",
-  green: "#22C55E",
-  greenDim: "#22C55E18",
-  red: "#EF4444",
-  redDim: "#EF444418",
-  yellow: "#FBBF24",
-  yellowDim: "#FBBF2418",
-  blue: "#60A5FA",
-  blueDim: "#60A5FA18",
-  purple: "#A78BFA",
-  purpleDim: "#A78BFA18",
-  text: "#E8EAF0",
-  textMuted: "#6B7280",
-  textDim: "#3D4455",
-  mono: "'JetBrains Mono', 'Fira Code', monospace",
-  sans: "'DM Sans', system-ui, sans-serif",
-} as const;
-
-export type ThemeColor = (typeof theme)[keyof typeof theme];
-
-export const ENV_COLORS: Record<string, { color: string; bg: string; label: string }> = {
-  dev: { color: theme.green, bg: theme.greenDim, label: "DEV" },
-  staging: { color: theme.yellow, bg: theme.yellowDim, label: "STG" },
-  production: { color: theme.red, bg: theme.redDim, label: "PRD" },
-};
-
-export const SEVERITY_META: Record<
-  string,
-  { color: string; bg: string; icon: string; label: string }
-> = {
-  error: { color: theme.red, bg: theme.redDim, icon: "\u2715", label: "Error" },
-  warning: { color: theme.yellow, bg: theme.yellowDim, icon: "\u26A0", label: "Warning" },
-  info: { color: theme.blue, bg: theme.blueDim, icon: "i", label: "Info" },
-};
-
-export const CATEGORY_META: Record<string, { label: string; color: string }> = {
-  matrix: { label: "Matrix", color: theme.accent },
-  schema: { label: "Schema", color: theme.blue },
-  sops: { label: "SOPS", color: theme.purple },
-};
+/**
+ * Theme re-export — single source of truth lives in `@clef-sh/design`.
+ *
+ * Pre-Phase-1 this file held the canonical token table. Now that cloud and
+ * the local UI both consume `@clef-sh/design/theme.css` (Tailwind v4 `@theme`)
+ * and `@clef-sh/design` (TS), this file exists only as a stable import path
+ * for screens written before the migration.
+ *
+ * New code should prefer Tailwind class names (`bg-ink-850`,
+ * `text-ash-dim`, etc.). Reach for the TS values only when a runtime hex
+ * literal is genuinely required (computed SVG fills, dynamic style props
+ * the migration hasn't reached yet).
+ *
+ * This module will be deleted in Phase 6 once `grep -r "from \"\\.\\./theme\""`
+ * inside `packages/ui/src/client/` returns empty.
+ */
+export {
+  theme,
+  radius,
+  shadow,
+  duration,
+  space,
+  ENV_COLORS,
+  SEVERITY_META,
+  CATEGORY_META,
+} from "@clef-sh/design";
+export type { ThemeColor } from "@clef-sh/design";