sid-ui 0.0.0-stage → 0.1.0

package/src/styles/components.css

@@ -0,0 +1,423 @@
+/* Joined-shaped UI kit. Visual language matches https://astryx.atmeta.com/
+   (system fonts, pill buttons, no chrome borders on primary/ghost).
+   Color comes only from tokens.css. Control sizes are one step up from Astryx:
+   sm is the old md, md is the old lg, and lg is a larger step. */
+
+@import "./components/picker.css";
+@import "./components/tree.css";
+@import "./components/timeline.css";
+@import "./components/table.css";
+@import "./components/time.css";
+@import "./components/calendar.css";
+@import "./components/responsive.css";
+@import "./components/notification.css";
+@import "./components/sticky.css";
+@import "./components/charts.css";
+@import "./components/message-list.css";
+@import "./components/pill-nav.css";
+@import "./components/code-input.css";
+@import "./components/brand.css";
+@import "./components/google.css";
+
+/* Input / Field */
+.os-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+}
+
+.os-field-helper {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+.os-field-helper-error {
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+}
+
+/* Form controls */
+.os-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  color: var(--ink);
+}
+.os-check input {
+  accent-color: var(--color-accent, var(--primary));
+  width: 18px;
+  height: 18px;
+  margin: 0;
+}
+
+/* Preview / docs chrome */
+.os-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--spacing-4);
+}
+.os-preview {
+  background: transparent;
+  border-radius: var(--radius-container);
+  overflow: hidden;
+  border: none;
+}
+.os-preview-stage {
+  min-height: 220px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-8);
+  background: var(--color-background-muted);
+  box-sizing: border-box;
+  border-radius: var(--radius-container);
+}
+.os-preview-label {
+  margin: 8px 0 0;
+  padding: 0;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+.os-page-body {
+  max-width: 880px;
+  padding: 40px 48px 96px;
+  box-sizing: border-box;
+}
+
+/* Kanban surfaces need their own contrast layer. The default muted Card is
+   intentionally subtle, but that makes adjacent columns merge in dark mode. */
+.os-kanban-row > .os-kanban-cell {
+  position: relative;
+  overflow: hidden;
+  background: var(--color-background-muted);
+  border: 1px solid var(--color-border-emphasized);
+  border-block-start: 4px solid var(--color-accent);
+  box-shadow: var(--shadow-sm);
+}
+
+.os-kanban-row > .os-kanban-cell:nth-child(2) {
+  border-block-start-color: var(--color-warning);
+}
+
+.os-kanban-row > .os-kanban-cell:nth-child(3) {
+  border-block-start-color: var(--color-success);
+}
+
+.os-kanban-row > .os-kanban-cell:nth-child(4) {
+  border-block-start-color: var(--color-error);
+}
+
+.os-kanban-cell [role="list"] {
+  min-height: inherit;
+}
+
+.os-kanban-cell [data-kanban-card] {
+  border-radius: var(--radius-inner);
+  transition:
+    transform 160ms ease,
+    filter 160ms ease;
+}
+
+.os-kanban-cell [data-kanban-card]:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.04);
+}
+
+.os-kanban-cell [data-kanban-card]:focus-visible {
+  outline: 3px solid var(--color-accent);
+  outline-offset: 3px;
+}
+.os-page-hero {
+  max-width: 720px;
+  margin: 0 auto 48px;
+  text-align: center;
+  padding-top: 48px;
+}
+
+/* Field — quiet fill, label above, accent ring on focus */
+.os-field-label {
+  font-size: var(--font-size-sm, 0.75rem);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  letter-spacing: 0.01em;
+}
+.os-field-description {
+  margin: 0;
+  font-size: var(--font-size-sm, 0.75rem);
+  color: var(--color-text-secondary);
+}
+.os-control {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 40px;
+  padding: 0 var(--spacing-3);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-emphasized);
+  border-radius: var(--radius-element);
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.os-control-sm {
+  min-height: 32px;
+}
+.os-control-md {
+  min-height: 40px;
+}
+.os-control-lg {
+  min-height: 48px;
+}
+.os-control:hover {
+  border-color: var(--color-text-disabled);
+}
+.os-control:focus-within {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+  border-color: var(--color-accent);
+}
+.os-control-error {
+  border-color: var(--color-error);
+  background: var(--color-background-surface);
+}
+.os-control-error:focus-within {
+  outline-color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.os-control-disabled {
+  opacity: 0.45;
+}
+
+/* Rating */
+.os-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+.os-rating-stars {
+  display: inline-flex;
+  gap: 2px;
+}
+.os-star {
+  border: 0;
+  background: transparent;
+  color: var(--color-border-emphasized, var(--color-border));
+  font-size: 20px;
+  line-height: 1;
+  padding: 0;
+  cursor: default;
+}
+button.os-star {
+  cursor: pointer;
+}
+.os-star-on {
+  color: var(--color-warning);
+}
+.os-rating-sm .os-star {
+  font-size: 14px;
+}
+.os-rating-lg .os-star {
+  font-size: 28px;
+}
+.os-rating-value {
+  font-size: var(--font-size-sm, 0.75rem);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.os-rating-caption {
+  font-size: var(--font-size-sm, 0.75rem);
+  color: var(--color-text-primary);
+}
+
+/* One step up from the Astryx scale, on :root so portaled menus inherit it.
+   sm 32 (old md), md 36 (old lg), lg 48. */
+:root {
+  --size-element-sm: 32px;
+  --size-element-md: 36px;
+  --size-element-lg: 48px;
+  --control-height-sm: var(--size-element-sm);
+  --control-height: var(--size-element-md);
+  --control-height-lg: var(--size-element-lg);
+}
+
+/* Pill buttons, same idea as the nav pills: a full radius, and enough inline
+   padding that the label sits clear of the curve. The radius is the private
+   Astryx variable, so a chat composer or thumbnail can still tighten the
+   buttons inside it. Icon-only controls stay circles. */
+[data-astryx-theme] {
+  --_button-radius: var(--radius-full);
+}
+
+.astryx-button {
+  padding-inline: var(--spacing-5);
+}
+
+.astryx-button[data-size="sm"] {
+  padding-inline: var(--spacing-4);
+}
+
+.astryx-button[data-size="lg"] {
+  padding-inline: var(--spacing-8);
+  font-size: var(--font-size-lg);
+}
+
+/* Icon slot: sm keeps 16. md takes the old large mark. lg steps up again. */
+.astryx-button[data-size="md"] > span > span:has(> svg),
+.astryx-button[data-size="md"] > span > span:has(> svg) > svg {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+.astryx-button[data-size="lg"] > span > span:has(> svg),
+.astryx-button[data-size="lg"] > span > span:has(> svg) > svg {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+/* Menu rows follow the same ladder. sm is the old md row, md is the old lg
+   row, lg is a full large control. */
+.astryx-dropdown-menu-item[data-size="sm"] {
+  min-height: var(--size-element-sm);
+  padding-block: var(--spacing-1-5);
+}
+
+.astryx-dropdown-menu-item[data-size="md"] {
+  min-height: var(--size-element-md);
+  padding-block: var(--spacing-2);
+}
+
+.astryx-dropdown-menu-item[data-size="md"] .astryx-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1.25rem;
+}
+
+.astryx-dropdown-menu-item[data-size="lg"] {
+  min-height: var(--size-element-lg);
+  padding-block: var(--spacing-3);
+  padding-inline: var(--spacing-3);
+  font-size: var(--font-size-lg);
+}
+
+.astryx-dropdown-menu-item[data-size="lg"] .astryx-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+
+/* Segmented control is a pill track. Neutral shrinks each item by 8px, which
+   after the size step-up lands on the old small height, and the radius token
+   is the element radius. Items use the control size; the track is fully round. */
+.astryx-segmented-control {
+  --_segmented-control-radius: var(--radius-full);
+  border-radius: var(--radius-full);
+}
+
+.astryx-segmented-control-item[data-size="sm"] {
+  height: var(--size-element-sm);
+}
+
+.astryx-segmented-control-item[data-size="md"] {
+  height: var(--size-element-md);
+}
+
+.astryx-segmented-control-item[data-size="lg"] {
+  height: var(--size-element-lg);
+}
+
+.astryx-button:has(> span > span:only-child svg) {
+  padding-inline: 0;
+  padding-block: 0;
+}
+
+/* Joined buttons share one capsule: outer ends are full, seams stay square.
+   The trailing test matches Astryx, so a menu layer after the last button
+   does not steal the end cap. */
+.astryx-button-group[data-orientation="horizontal"] .astryx-button:first-child {
+  border-start-start-radius: var(--radius-full);
+  border-end-start-radius: var(--radius-full);
+}
+
+.astryx-button-group[data-orientation="horizontal"]
+  .astryx-button:not(:has(~ *:not([popover]):not(template))) {
+  border-start-end-radius: var(--radius-full);
+  border-end-end-radius: var(--radius-full);
+}
+
+.astryx-button-group[data-orientation="vertical"] .astryx-button:first-child {
+  border-start-start-radius: var(--radius-full);
+  border-start-end-radius: var(--radius-full);
+}
+
+.astryx-button-group[data-orientation="vertical"]
+  .astryx-button:not(:has(~ *:not([popover]):not(template))) {
+  border-end-start-radius: var(--radius-full);
+  border-end-end-radius: var(--radius-full);
+}
+
+.astryx-button-group[data-elevation="low"],
+.astryx-button-group[data-elevation="med"],
+.astryx-button-group[data-elevation="high"] {
+  border-radius: var(--radius-full);
+}
+
+/* Pressed toggles stay outlined. A weak accent wash sits behind the accent
+   icon and label, so on reads as color rather than a solid fill. */
+.astryx-toggle-button[data-is-pressed="true"] {
+  background-color: var(--color-accent-muted);
+  color: var(--color-accent);
+}
+.astryx-toggle-button[data-is-pressed="true"] .os-glyph {
+  color: var(--color-accent);
+  fill: none;
+}
+
+@media (forced-colors: active) {
+  .astryx-toggle-button[data-is-pressed="true"] {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
+.os-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  gap: var(--space-2);
+}
+.os-swatch {
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  border: var(--border-width-hairline) solid var(--border-subtle);
+  background: var(--surface-sunken);
+}
+.os-swatch-chip {
+  height: 40px;
+  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
+}
+.os-swatch-body {
+  padding: var(--space-2);
+}
+.os-swatch-body .caption {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.os-token-demo {
+  border: var(--border-width-hairline) solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  padding: var(--space-4);
+}
+.os-token-demo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+}
+.os-token-group {
+  margin-bottom: var(--space-8);
+}

package/src/styles/joined.css

@@ -0,0 +1,4 @@
+/* The full Joined stylesheet — Astryx foundation, then Joined
+   composites. Apps import this one file. */
+@import "./astryx.css";
+@import "./components.css";

package/src/styles/theme.css

@@ -0,0 +1,79 @@
+@import "./tokens.css";
+@import "./components.css";
+
+@source "../components/**/*.{ts,tsx}";
+
+/* Point Tailwind's dark: variant at our [data-theme] attribute instead of
+   prefers-color-scheme, so dark: utilities and the Joined tokens read
+   from the same switch. */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/* Exposes the Joined tokens as Tailwind v4 utilities (bg-primary,
+   text-ink-muted, rounded-pill, duration-fast, …). "inline" keeps these
+   bound to the live custom property so the dark/light swap keeps working. */
+@theme inline {
+  --color-canvas: var(--canvas);
+  --color-surface: var(--surface);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-selected: var(--surface-selected);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-border-focus: var(--border-focus);
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-ink-faint: var(--ink-faint);
+  --color-on-primary: var(--on-primary);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-primary-bg: var(--primary-bg);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-success: var(--success);
+  --color-success-bg: var(--success-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-bg: var(--danger-bg);
+  --color-meta-blue-50: var(--meta-blue-50);
+  --color-meta-blue-100: var(--meta-blue-100);
+  --color-meta-blue-200: var(--meta-blue-200);
+  --color-meta-blue-300: var(--meta-blue-300);
+  --color-meta-blue-400: var(--meta-blue-400);
+  --color-meta-blue-500: var(--meta-blue-500);
+  --color-meta-blue-600: var(--meta-blue-600);
+  --color-meta-blue-700: var(--meta-blue-700);
+  --color-meta-blue-800: var(--meta-blue-800);
+  --color-meta-blue-900: var(--meta-blue-900);
+  --color-meta-blue-950: var(--meta-blue-950);
+
+  --radius-pill: 999px;
+
+  --shadow-1: var(--elevation-1);
+  --shadow-2: var(--elevation-2);
+  --shadow-3: var(--elevation-3);
+
+  --duration-fast: 80ms;
+  --duration-normal: 120ms;
+  --duration-slow: 200ms;
+  --ease-standard: var(--ease-standard);
+  --ease-decelerate: var(--ease-decelerate);
+  --ease-accelerate: var(--ease-accelerate);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  background: var(--canvas);
+  color: var(--ink);
+  font-family: var(--font-sans);
+}