sid-ui 0.0.0-stage → 0.1.0

package/src/styles/tokens.css

@@ -0,0 +1,338 @@
+/* Joined theme tokens — Joined (Meta) token contract.
+   Names, scales, and light/dark pairs match https://astryx.atmeta.com/docs/color
+   (and typography / spacing / shape). The only brand override is the accent:
+   Meta / Facebook blue instead of Joined's default near-black accent. */
+
+:root {
+  color-scheme: light;
+
+  /* Primitive Meta blue series — the only brand palette we own. */
+  --color-blue-50: #e7f3ff;
+  --color-blue-100: #c5dcff;
+  --color-blue-200: #9ec2ff;
+  --color-blue-300: #6aa6ff;
+  --color-blue-400: #4599ff;
+  --color-blue-500: #2e89ff;
+  --color-blue-600: #1877f2;
+  --color-blue-700: #166fe5;
+  --color-blue-800: #0c5dc7;
+  --color-blue-900: #003978;
+  --color-blue-950: #02165e;
+
+  /* Accent — Joined's --color-accent, re-pointed at the blue series. */
+  --color-accent: light-dark(#1877f2, #2e89ff);
+  --color-accent-muted: light-dark(#e7f3ff, #253c5a);
+  --color-on-accent: #ffffff;
+  --color-text-accent: light-dark(#003978, #a1caff);
+  --color-icon-accent: light-dark(#003978, #88bcff);
+
+  --color-neutral: light-dark(#0000000f, #ffffff1a);
+  --color-background-surface: light-dark(#ffffff, #262626);
+  --color-background-body: light-dark(#f1f1f1, #1b1b1b);
+  --color-background-muted: light-dark(#f1f1f1, #1b1b1b);
+  --color-background-card: light-dark(#ffffff, #1b1b1b);
+  --color-background-popover: light-dark(#ffffff, #1b1b1b);
+  --color-overlay: light-dark(#00000080, #000000cc);
+  --color-overlay-hover: light-dark(#0000000d, #ffffff0d);
+  --color-overlay-pressed: light-dark(#0000001a, #ffffff1a);
+
+  --color-text-primary: light-dark(#000000, #ffffff);
+  --color-text-secondary: light-dark(#474747, #9e9e9e);
+  --color-text-disabled: light-dark(#919191, #525252);
+  --color-on-dark: #ffffff;
+  --color-on-light: #111111;
+
+  --color-icon-primary: light-dark(#000000, #ffffff);
+  --color-icon-secondary: light-dark(#6a6a6a, #9e9e9e);
+  --color-icon-disabled: light-dark(#919191, #525252);
+
+  --color-success: light-dark(#00490b, #a4d6a3);
+  --color-success-muted: light-dark(#bce0bb, #2b422b);
+  --color-on-success: light-dark(#ffffff, #111111);
+  --color-error: light-dark(#76000c, #ffc4be);
+  --color-error-muted: light-dark(#ffc4be, #5b2b28);
+  --color-on-error: light-dark(#ffffff, #111111);
+  --color-warning: light-dark(#4b3900, #f8d36a);
+  --color-warning-muted: light-dark(#fae19e, #453a1c);
+  --color-on-warning: #111111;
+
+  --color-border: light-dark(#00000014, #ffffff1a);
+  --color-border-emphasized: light-dark(#d4d4d4, #525252);
+  --color-skeleton: light-dark(#f1f1f1, #525252);
+  --color-track: light-dark(#ccd3db, #5a5e66);
+  --color-shadow: light-dark(#0000001a, #0000004d);
+
+  --color-background-blue: light-dark(#b9d7ff, #253c5a);
+  --color-border-blue: light-dark(#a1caff, #5aa0f8);
+  --color-icon-blue: light-dark(#003978, #88bcff);
+  --color-text-blue: light-dark(#003978, #a1caff);
+
+  /* Spacing — 4px grid, Joined --spacing-* */
+  --spacing-0: 0px;
+  --spacing-0-5: 2px;
+  --spacing-1: 4px;
+  --spacing-1-5: 6px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+
+  /* Shape — inner → element → container → page */
+  --radius-none: 0px;
+  --radius-inner: 8px;
+  --radius-element: 12px;
+  --radius-container: 16px;
+  --radius-page: 32px;
+  --radius-chat: 28px;
+  --radius-full: 9999px;
+
+  /* Type — system UI stack, 14px × 1.2 geometric scale */
+  --font-family-body:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-family-heading: var(--font-family-body);
+  --font-family-code: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  --font-size-xs: 0.625rem;
+  --font-size-sm: 0.75rem;
+  --font-size-base: 0.875rem;
+  --font-size-lg: 1.0625rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.8125rem;
+  --font-size-4xl: 2.1875rem;
+  --font-size-5xl: 2.625rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --text-display-1-size: var(--font-size-5xl);
+  --text-heading-1-size: var(--font-size-2xl);
+  --text-heading-2-size: var(--font-size-xl);
+  --text-heading-3-size: var(--font-size-lg);
+  --text-body-size: var(--font-size-base);
+  --text-label-size: var(--font-size-base);
+  --text-supporting-size: var(--font-size-sm);
+
+  --duration-fast: 80ms;
+  --duration-normal: 120ms;
+  --duration-slow: 200ms;
+  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
+
+  --z-nav: 40;
+  --z-overlay: 100;
+  --z-toast: 110;
+  --z-tooltip: 120;
+
+  --control-height: 36px;
+  --control-height-sm: 32px;
+  --control-height-lg: 48px;
+
+  /* Compatibility aliases used by existing .os-* CSS */
+  --canvas: var(--color-background-body);
+  --surface: var(--color-background-surface);
+  --surface-sunken: var(--color-background-muted);
+  --surface-hover: color-mix(
+    in srgb,
+    var(--color-text-primary) 6%,
+    var(--color-background-surface)
+  );
+  --surface-selected: var(--color-neutral);
+  --border-subtle: var(--color-border);
+  --border-default: var(--color-border-emphasized);
+  --border-strong: var(--color-border-emphasized);
+  --border-focus: var(--color-accent);
+  --ink: var(--color-text-primary);
+  --ink-muted: var(--color-text-secondary);
+  --ink-faint: var(--color-text-disabled);
+  --on-primary: var(--color-on-accent);
+  --primary: var(--color-accent);
+  --primary-hover: light-dark(#166fe5, #4599ff);
+  --primary-active: light-dark(#0c5dc7, #1877f2);
+  --primary-bg: var(--color-accent-muted);
+  --link: var(--color-accent);
+  --link-hover: var(--color-text-accent);
+  --success: var(--color-success);
+  --success-bg: var(--color-success-muted);
+  --warning: var(--color-warning);
+  --warning-bg: var(--color-warning-muted);
+  --danger: var(--color-error);
+  --danger-hover: light-dark(#8a0011, #ffaea7);
+  --danger-bg: var(--color-error-muted);
+  --overlay: var(--color-overlay);
+
+  --radius-sm: var(--radius-inner);
+  --radius-md: var(--radius-element);
+  --radius-lg: var(--radius-container);
+  --radius-xl: var(--radius-container);
+  --radius-2xl: var(--radius-page);
+  --radius-pill: var(--radius-full);
+
+  /* Astryx spacing aliases used by the migrated design-system components. */
+  --space-1: var(--spacing-1);
+  --space-2: var(--spacing-2);
+  --space-3: var(--spacing-3);
+  --space-4: var(--spacing-4);
+  --space-5: var(--spacing-5);
+  --space-6: var(--spacing-6);
+  --space-8: var(--spacing-8);
+  --space-12: var(--spacing-12);
+  --space-16: var(--spacing-16);
+
+  --elevation-0: none;
+  --elevation-1: 0 1px 2px var(--color-shadow);
+  --elevation-2: 0 4px 16px var(--color-shadow);
+  --elevation-3: 0 16px 48px var(--color-shadow);
+
+  --border-width-hairline: 1px;
+  --border-width-thick: 2px;
+  --opacity-disabled: 0.45;
+
+  --font-sans: var(--font-family-body);
+  --font-mono: var(--font-family-code);
+
+  --meta-blue-50: var(--color-blue-50);
+  --meta-blue-100: var(--color-blue-100);
+  --meta-blue-200: var(--color-blue-200);
+  --meta-blue-300: var(--color-blue-300);
+  --meta-blue-400: var(--color-blue-400);
+  --meta-blue-500: var(--color-blue-500);
+  --meta-blue-600: var(--color-blue-600);
+  --meta-blue-700: var(--color-blue-700);
+  --meta-blue-800: var(--color-blue-800);
+  --meta-blue-900: var(--color-blue-900);
+  --meta-blue-950: var(--color-blue-950);
+
+  /* Data visualization series — fills for charts, meters and status marks. */
+  --color-chart-accent: light-dark(#1877f2, #4599ff);
+  --color-chart-accent-soft: light-dark(#9ec2ff, #1f4f94);
+  --color-chart-positive: light-dark(#1a8a3a, #4bb56a);
+  --color-chart-caution: light-dark(#d99a00, #f0b429);
+  --color-chart-critical: light-dark(#c5311f, #f07167);
+  --color-chart-violet: light-dark(#6b4fd8, #a08cf2);
+  --color-chart-neutral: light-dark(#b4bac4, #5a5e66);
+  --color-chart-grid: light-dark(#0000000f, #ffffff14);
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* Type styles — Joined semantic scale */
+.display {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.24;
+  letter-spacing: -0.03em;
+  color: var(--color-text-primary);
+}
+.h1 {
+  font-family: var(--font-family-heading);
+  font-size: var(--text-heading-1-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.33;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
+}
+.h2 {
+  font-family: var(--font-family-heading);
+  font-size: var(--text-heading-2-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+  color: var(--color-text-primary);
+}
+.h3 {
+  font-family: var(--font-family-heading);
+  font-size: var(--text-heading-3-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.41;
+  color: var(--color-text-primary);
+}
+.body-lg,
+.body,
+.body-strong,
+.body-sm,
+.label,
+.caption,
+.button {
+  font-family: var(--font-family-body);
+  color: var(--color-text-primary);
+}
+.body-lg {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.41;
+}
+.body {
+  font-size: var(--text-body-size);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.43;
+}
+.body-strong {
+  font-size: var(--text-body-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.43;
+}
+.body-sm {
+  font-size: var(--text-supporting-size);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.67;
+}
+.label {
+  font-size: var(--text-label-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.43;
+}
+.caption {
+  font-size: var(--text-supporting-size);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.67;
+  color: var(--color-text-secondary);
+}
+.button {
+  font-size: var(--text-label-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+}
+
+.text-ink {
+  color: var(--color-text-primary);
+}
+.text-ink-muted {
+  color: var(--color-text-secondary);
+}
+.text-ink-faint {
+  color: var(--color-text-disabled);
+}
+.text-primary {
+  color: var(--color-accent);
+}
+.text-link {
+  color: var(--color-accent);
+}
+.text-danger {
+  color: var(--color-error);
+}
+.text-success {
+  color: var(--color-success);
+}
+.text-warning {
+  color: var(--color-warning);
+}
+.text-on-primary {
+  color: var(--color-on-accent);
+}

package/src/theme/JoinedProvider.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { LayerProvider } from "@astryxdesign/core/Layer";
+import { LinkProvider, type LinkComponentType } from "@astryxdesign/core/Link";
+import { Theme, type ThemeMode } from "@astryxdesign/core/theme";
+import { ToastViewport, type ToastPosition } from "@astryxdesign/core/Toast";
+
+import { NotificationViewport } from "../components/NotificationTrigger";
+
+import { joinedTheme } from "./joined";
+
+import type { ReactNode } from "react";
+
+export type ColorMode = ThemeMode;
+
+export interface JoinedProviderProps {
+  children: ReactNode;
+  /** light, dark, or system. */
+  mode?: ColorMode;
+  /** Router-aware link used by Link and Button `href`, e.g. Next.js `Link`. */
+  linkComponent?: LinkComponentType;
+  /** Where toasts from useToast stack. */
+  toastPosition?: ToastPosition;
+}
+
+/**
+ * Everything an app needs to render Joined: the Astryx theme, the link
+ * component for routing, the layer root for menus and tooltips, and the
+ * toast viewport behind useToast.
+ * Pair it with `sid-ui/styles/joined.css`.
+ */
+export function JoinedProvider({
+  children,
+  mode = "system",
+  linkComponent,
+  toastPosition = "bottomEnd",
+}: JoinedProviderProps) {
+  const layered = (
+    <LayerProvider>
+      <ToastViewport position={toastPosition}>
+        <NotificationViewport>{children}</NotificationViewport>
+      </ToastViewport>
+    </LayerProvider>
+  );
+  return (
+    <Theme theme={joinedTheme} mode={mode}>
+      {linkComponent ? <LinkProvider component={linkComponent}>{layered}</LinkProvider> : layered}
+    </Theme>
+  );
+}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export { joinedTheme } from "./joined";
+export { JoinedProvider } from "./JoinedProvider";
+export type { JoinedProviderProps, ColorMode } from "./JoinedProvider";

package/src/theme/joined.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/joined.theme.ts
+ * Command: astryx theme build src/theme/joined.theme.ts --out src/theme/theme.css
+ * CLI: @astryxdesign/cli@0.6.2
+ * Core: @astryxdesign/core@0.6.2
+ */
+
+/// <reference path="./joined.variants.d.ts" />
+import type { DefinedTheme } from "@astryxdesign/core/theme";
+export declare const joinedTheme: DefinedTheme;