@jinaan/uikit 0.0.0-stage → 0.1.0

package/styles.css

@@ -0,0 +1,371 @@
+@import "tw-animate-css";
+
+@source "./src";
+
+/* Class-based dark mode (toggled on <html class="dark">). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * Semantic design tokens. Components must reference these (via the Tailwind
+ * utilities below) rather than raw palette values, so both themes stay correct.
+ * Values mirror the Clerk "Ceramic" system captured in docs/design-reference.md.
+ */
+:root {
+  --canvas: #fafafb;
+  --surface: #ffffff;
+  --elevated: #f6f6f7;
+  --fg: #131316;
+  --fg-muted: #5f5f6f;
+  --fg-subtle: #90909d;
+  --line: #e3e3e7;
+  --line-strong: #c7c7cf;
+  --primary: #6c47ff;
+  --primary-hover: #5f15fe;
+  --primary-fg: #ffffff;
+  --success: #15892b;
+  --warning: #c3540f;
+  --error: #e02e2e;
+  --info: #236dd7;
+  --focus: #6c47ff;
+  --overlay: rgb(19 19 22 / 0.45);
+  /* Sidebar navigation surfaces: a visible highlight in both themes. */
+  --nav-hover: #f6f6f7;
+  --nav-active: #ececee;
+  --nav-active-fg: var(--fg);
+  --nav-accent: var(--primary);
+
+  --shadow-xs: 0 1px 2px 0 rgb(19 19 22 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(19 19 22 / 0.08), 0 1px 2px -1px rgb(19 19 22 / 0.08);
+  --shadow-md: 0 4px 12px -2px rgb(19 19 22 / 0.1);
+  --shadow-lg: 0 16px 40px -12px rgb(19 19 22 / 0.18);
+
+  /* Data tables: header band is the darkest layer, the body panel sits above it
+     and the page is lighter than the header. */
+  --table-container-bg: #f1f1f3;
+  --table-panel-bg: #ffffff;
+  --table-panel-border: #e3e3e7;
+  --table-header-text: #5f5f6f;
+  --table-header-active-text: #131316;
+  --table-row-text: #131316;
+  --table-muted-text: #5f5f6f;
+  --table-empty-icon-bg: #f6f6f7;
+  --table-empty-icon-border: #e3e3e7;
+  --table-row-hover: #f6f6f7;
+  --table-row-selected: #ececee;
+  --table-accent: var(--primary);
+  /* Table geometry (theme-independent). */
+  --table-radius-outer: 1.5rem;
+  --table-radius-panel: 1.25rem;
+  --table-header-h: 2.75rem;
+  --table-pad-x: 1.5rem;
+  --table-inset: 0.375rem;
+  --table-empty-icon: 5rem;
+
+  /* Control system: shared sizing for Button and Input. */
+  --control-h-xs: 1.75rem;
+  --control-h-sm: 2rem;
+  --control-h-md: 2.25rem;
+  --control-h-lg: 2.5rem;
+  --control-h-xl: 4rem;
+  --control-radius: 0.625rem;
+  --control-radius-xl: 0.75rem;
+  --control-pad-x-xs: 0.625rem;
+  --control-pad-x-sm: 0.75rem;
+  --control-pad-x-md: 1rem;
+  --control-pad-x-lg: 1.25rem;
+  --control-pad-x-xl: 1.375rem;
+  --control-icon-xs: 0.75rem;
+  --control-icon-sm: 0.875rem;
+  --control-icon-md: 1rem;
+  --control-icon-lg: 1.125rem;
+  --control-icon-xl: 1.5rem;
+  --control-gap-xs: 0.375rem;
+  --control-gap: 0.5rem;
+
+  /* Input surfaces. */
+  --input-bg: #ffffff;
+  --input-fg: #131316;
+  --input-placeholder: #90909d;
+  --input-border: #e3e3e7;
+  --input-border-hover: #c7c7cf;
+  --input-border-focus: var(--primary);
+  --input-bg-disabled: #f6f6f7;
+
+  /* Button surfaces. */
+  --button-primary-bg: var(--primary);
+  --button-primary-fg: var(--primary-fg);
+  --button-primary-hover: var(--primary-hover);
+  --button-primary-active: #4a10d9;
+  --button-secondary-bg: color-mix(in oklab, #f1f1f3 95%, black);
+  --button-secondary-border: #e3e3e7;
+  --button-secondary-hover: color-mix(in oklab, #e9e9ec 95%, black);
+  --button-outline-border: #d4d4d8;
+  --button-outline-hover: #f1f1f3;
+  /* Interactive (hover/pressed) surface shared by secondary, outline, ghost. */
+  --button-surface-hover: #f1f1f3;
+  --button-surface-active: #e9e9ec;
+  --button-ghost-hover: var(--button-surface-hover);
+  --button-destructive-bg: var(--error);
+  --button-destructive-fg: #ffffff;
+  /* Destructive keeps its red identity; hover/pressed are red-shifted. */
+  --button-destructive-hover: color-mix(in oklab, var(--error) 88%, black);
+  --button-destructive-active: color-mix(in oklab, var(--error) 78%, black);
+  /* Filled buttons: flat surface + inset gloss + soft drop (Clerk). */
+  --button-inner: rgb(255 255 255 / 0.45);
+  /* Primary and destructive read their own, stronger top gloss. */
+  --button-primary-inner: rgb(255 255 255 / 0.5);
+  --button-destructive-inner: rgb(255 255 255 / 0.5);
+  --button-drop: 0 4px 4px -2px rgb(0 0 0 / 0.1);
+  --button-drop-pressed: 0 2.5px 4px -2px rgb(0 0 0 / 0.08);
+
+  /* Dialog surfaces: a soft shell with an elevated inner panel. */
+  --dialog-shell-bg: #f4f4f5;
+  --dialog-shell-border: #e3e3e7;
+  --dialog-shell-shadow: 0 24px 64px -24px rgb(19 19 22 / 0.28);
+  --dialog-panel-bg: #ffffff;
+  --dialog-panel-border: #e9e9ec;
+  --dialog-panel-shadow:
+    0 1px 2px rgb(19 19 22 / 0.06),
+    0 10px 28px -14px rgb(19 19 22 / 0.2);
+
+  /* Third-party brand marks (identity providers). */
+  --brand-google-blue: #4285f4;
+  --brand-google-green: #34a853;
+  --brand-google-yellow: #fbbc05;
+  --brand-google-red: #ea4335;
+  --brand-microsoft-red: #f25022;
+  --brand-microsoft-green: #7fba00;
+  --brand-microsoft-blue: #00a4ef;
+  --brand-microsoft-yellow: #ffb900;
+}
+
+.dark {
+  --canvas: #131316;
+  --surface: #1b1b1f;
+  --elevated: #232328;
+  --fg: #fcfcfc;
+  --fg-muted: #adadb7;
+  --fg-subtle: #767684;
+  --line: #2b2b34;
+  --line-strong: #3d3d4a;
+  --primary: #6c47ff;
+  --primary-hover: #846bff;
+  --primary-fg: #ffffff;
+  --success: #31c854;
+  --warning: #fd7224;
+  --error: #f73d3d;
+  --info: #6694f8;
+  --focus: #846bff;
+  --overlay: rgb(0 0 0 / 0.6);
+  --nav-hover: #232328;
+  --nav-active: #2b2b34;
+  --nav-active-fg: var(--fg);
+  --nav-accent: var(--primary);
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
+  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.55);
+  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.65);
+
+  /* Data tables: header band (#0a0a0b) is darker than the page canvas
+     (#131316); the body panel (#1b1b1f) is lighter than both. */
+  --table-container-bg: #0a0a0b;
+  --table-panel-bg: #1b1b1f;
+  --table-panel-border: #2b2b34;
+  --table-header-text: #a1a1aa;
+  --table-header-active-text: #f4f4f5;
+  --table-row-text: #f4f4f5;
+  --table-muted-text: #a1a1aa;
+  --table-empty-icon-bg: #232328;
+  --table-empty-icon-border: #373840;
+  --table-row-hover: #232328;
+  --table-row-selected: #2b2b34;
+  --table-accent: var(--primary);
+
+  /* Control system overrides (dark) — surfaces match the Clerk dashboard. */
+  --input-bg: #30303a;
+  --input-fg: #f4f4f5;
+  --input-placeholder: #777783;
+  --input-border: #41414d;
+  --input-border-hover: #4d4d5a;
+  --input-border-focus: var(--primary-hover);
+  --input-bg-disabled: #26262c;
+
+  --button-primary-bg: var(--primary);
+  --button-primary-fg: var(--primary-fg);
+  --button-primary-hover: var(--primary-hover);
+  --button-primary-active: #5f15fe;
+  --button-secondary-bg: #30303a;
+  --button-secondary-border: #41414d;
+  --button-secondary-hover: #3a3a45;
+  --button-outline-border: #41414d;
+  --button-outline-hover: #30303a;
+  /* Interactive (hover/pressed) surface shared by secondary, outline, ghost. */
+  --button-surface-hover: #3a3a45;
+  --button-surface-active: #30303a;
+  --button-ghost-hover: var(--button-surface-hover);
+  --button-destructive-bg: var(--error);
+  --button-destructive-fg: #ffffff;
+  --button-inner: rgb(255 255 255 / 0.12);
+  --button-primary-inner: rgb(255 255 255 / 0.26);
+  --button-destructive-inner: rgb(255 255 255 / 0.26);
+  --button-drop: 0 4px 4px -2px rgb(0 0 0 / 0.24);
+  --button-drop-pressed: 0 2.5px 4px -2px rgb(0 0 0 / 0.24);
+
+  /* Dialog surfaces (dark): near-black shell, elevated charcoal panel. */
+  --dialog-shell-bg: #131316;
+  --dialog-shell-border: #2b2b34;
+  --dialog-shell-shadow: 0 32px 80px -28px rgb(0 0 0 / 0.7);
+  --dialog-panel-bg: #1e1e23;
+  --dialog-panel-border: #2f2f38;
+  --dialog-panel-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.04),
+    0 12px 32px -16px rgb(0 0 0 / 0.6);
+}
+
+@theme inline {
+  --color-canvas: var(--canvas);
+  --color-surface: var(--surface);
+  --color-elevated: var(--elevated);
+  --color-fg: var(--fg);
+  --color-muted: var(--fg-muted);
+  --color-subtle: var(--fg-subtle);
+  --color-line: var(--line);
+  --color-line-strong: var(--line-strong);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-fg: var(--primary-fg);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+  --color-info: var(--info);
+  --color-focus: var(--focus);
+  --color-overlay: var(--overlay);
+  --color-nav-hover: var(--nav-hover);
+  --color-nav-active: var(--nav-active);
+  --color-nav-active-fg: var(--nav-active-fg);
+  --color-nav-accent: var(--nav-accent);
+
+  --font-sans: "Suisse Intl", "Suisse Intl Fallback", ui-sans-serif, system-ui,
+    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-display: "Suisse Intl", "Suisse Intl Fallback", ui-sans-serif, system-ui,
+    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Söhne Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, monospace;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 0.875rem;
+  --radius-3xl: 1rem;
+  --radius-4xl: 2rem;
+  --radius-card: 0.75rem;
+
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+
+  --color-table-container: var(--table-container-bg);
+  --color-table-panel: var(--table-panel-bg);
+  --color-table-panel-border: var(--table-panel-border);
+  --color-table-header: var(--table-header-text);
+  --color-table-header-active: var(--table-header-active-text);
+  --color-table-row: var(--table-row-text);
+  --color-table-muted: var(--table-muted-text);
+  --color-table-empty-icon: var(--table-empty-icon-bg);
+  --color-table-empty-icon-border: var(--table-empty-icon-border);
+  --color-table-row-hover: var(--table-row-hover);
+  --color-table-row-selected: var(--table-row-selected);
+  --color-table-accent: var(--table-accent);
+}
+
+@utility font-numeric {
+  font-family: var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+
+@layer components {
+  /*
+   * Filled control surface: a soft blurred drop plus a 1px inset top gloss
+   * (matches the Clerk dashboard buttons). The Tailwind focus ring replaces
+   * this shadow while focused.
+   */
+  .btn-fill {
+    box-shadow:
+      var(--button-drop),
+      inset 0 1px 0.5px 0 var(--button-inner),
+      inset 0 0 0 1px var(--button-inner-border, transparent);
+  }
+  .btn-fill:active {
+    box-shadow:
+      var(--button-drop-pressed),
+      inset 0 1px 0.5px 0 var(--button-inner),
+      inset 0 0 0 1px var(--button-inner-border, transparent);
+  }
+
+  /*
+   * Light-theme definition for filled buttons: a subtle inset hairline keeps
+   * the surface readable on white, where a white gloss has no contrast.
+   */
+  .btn-inner-border {
+    --button-inner-border: color-mix(in oklab, var(--fg) 12%, transparent);
+  }
+  .dark .btn-inner-border {
+    --button-inner-border: transparent;
+  }
+
+  /*
+   * Shared hover/press treatment (secondary, outline, ghost): the surface
+   * colour is applied with utilities; here we add the gloss and the drop,
+   * swapping to the pressed drop on activation.
+   */
+  .btn-interactive {
+    transition:
+      color 120ms ease,
+      background-color 120ms ease,
+      box-shadow 120ms ease;
+  }
+  .btn-interactive:hover,
+  .btn-interactive:active {
+    color: var(--fg);
+    box-shadow:
+      var(--button-drop),
+      inset 0 1px 0.5px 0 var(--button-inner),
+      inset 0 0 0 1px var(--button-inner-border, transparent);
+  }
+  .btn-interactive:active {
+    box-shadow:
+      var(--button-drop-pressed),
+      inset 0 1px 0.5px 0 var(--button-inner),
+      inset 0 0 0 1px var(--button-inner-border, transparent);
+  }
+
+  /* Fluid display scale for marketing headlines (Suisse Bold, tight). */
+  .text-display {
+    font-family: var(--font-display);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    line-height: 1.02;
+    font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
+  }
+  .text-display-sm {
+    font-family: var(--font-display);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.05;
+    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}