@ai-matrx/design-system 0.60.1 → 0.60.6

package/dist/desktop.css

@@ -0,0 +1,234 @@
+/* @ai-matrx/design-system/desktop.css — THE DESKTOP STANDARD (macOS-class apps).
+
+   Importing this file IS the opt-in. A desktop host (Matrx 2) imports it from its Tailwind entry
+   stylesheet AFTER theme.css; the web app never imports it, so nothing here changes the web look
+   (FEATURE.md: a look that suits one app is an option, never the new default).
+
+     @import "tailwindcss";
+     @import "@ai-matrx/design-system/theme.css";
+     @import "@ai-matrx/design-system/styles.css";
+     @import "@ai-matrx/design-system/desktop.css";
+
+   Reference: Apple Human Interface Guidelines for macOS — Finder, System Settings, Xcode, Mail.
+   Every size an app may use is named here. App code composes `@ai-matrx/design-system/desktop`
+   components and these named utilities only; raw pixel values, raw colours and Tailwind's
+   palette are banned in desktop app code by lint (see DESKTOP.md in this folder).
+
+   Values are defaults. A host owns its brand by re-declaring a token (window, content, tint)
+   in its own stylesheet; it never adds a new size. */
+
+@source "./";
+
+@layer matrx-design-system-tokens {
+  :root {
+    /* Labels: four levels of text emphasis (NSColor.labelColor … quaternaryLabelColor). */
+    --mx-label: rgb(0 0 0 / 0.85);
+    --mx-label-secondary: rgb(0 0 0 / 0.55);
+    --mx-label-tertiary: rgb(0 0 0 / 0.32);
+    --mx-label-quaternary: rgb(0 0 0 / 0.14);
+
+    /* Hairlines and fills (separatorColor, fill levels for controls and hover/pressed). */
+    --mx-separator: rgb(0 0 0 / 0.1);
+    --mx-fill: rgb(0 0 0 / 0.04);
+    --mx-fill-secondary: rgb(0 0 0 / 0.07);
+    --mx-fill-tertiary: rgb(0 0 0 / 0.11);
+
+    /* Surfaces: the window chrome, the content page, a grouped box on the page, a raised control. */
+    --mx-window: #f6f6f6;
+    --mx-content: #ffffff;
+    --mx-group: rgb(0 0 0 / 0.025);
+    --mx-control: #ffffff;
+    --mx-control-edge: rgb(0 0 0 / 0.14);
+    --mx-elevated: #ffffff;
+
+    /* The tint (controlAccentColor) and selection. */
+    --mx-tint: #007aff;
+    --mx-tint-label: #ffffff;
+    --mx-selection: var(--mx-tint);
+    --mx-selection-label: #ffffff;
+    --mx-selection-muted: rgb(0 0 0 / 0.07);
+    --mx-focus: color-mix(in srgb, var(--mx-tint) 50%, transparent);
+
+    /* System colours: status only, never decoration. */
+    --mx-red: #ff3b30;
+    --mx-orange: #ff9500;
+    --mx-yellow: #ffcc00;
+    --mx-green: #28cd41;
+    --mx-blue: #007aff;
+    --mx-purple: #af52de;
+    --mx-gray: #8e8e93;
+
+    /* Elevation. */
+    --mx-shadow-control: 0 0 0 0.5px var(--mx-control-edge), 0 0.5px 1.5px rgb(0 0 0 / 0.12);
+    --mx-shadow-raised: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.08);
+    --mx-shadow-popover: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 8px 28px rgb(0 0 0 / 0.16);
+  }
+
+  .dark {
+    --mx-label: rgb(255 255 255 / 0.88);
+    --mx-label-secondary: rgb(255 255 255 / 0.58);
+    --mx-label-tertiary: rgb(255 255 255 / 0.32);
+    --mx-label-quaternary: rgb(255 255 255 / 0.14);
+
+    --mx-separator: rgb(255 255 255 / 0.1);
+    --mx-fill: rgb(255 255 255 / 0.065);
+    --mx-fill-secondary: rgb(255 255 255 / 0.1);
+    --mx-fill-tertiary: rgb(255 255 255 / 0.16);
+
+    --mx-window: #1e1e1e;
+    --mx-content: #252525;
+    --mx-group: rgb(255 255 255 / 0.035);
+    --mx-control: rgb(255 255 255 / 0.1);
+    --mx-control-edge: rgb(255 255 255 / 0.06);
+    --mx-elevated: #2c2c2c;
+
+    --mx-tint: #0a84ff;
+    --mx-selection-muted: rgb(255 255 255 / 0.08);
+
+    --mx-red: #ff453a;
+    --mx-orange: #ff9f0a;
+    --mx-yellow: #ffd60a;
+    --mx-green: #32d74b;
+    --mx-blue: #0a84ff;
+    --mx-purple: #bf5af2;
+    --mx-gray: #98989d;
+
+    --mx-shadow-control: 0 0 0 0.5px var(--mx-control-edge), 0 0.5px 1.5px rgb(0 0 0 / 0.3);
+    --mx-shadow-raised: 0 0 0 0.5px rgb(255 255 255 / 0.06), 0 1px 3px rgb(0 0 0 / 0.35);
+    --mx-shadow-popover: 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 8px 28px rgb(0 0 0 / 0.45);
+  }
+}
+
+/* THE NAMED SCALE. Each line below becomes a Tailwind utility (text-body, h-control, rounded-group,
+   bg-content, text-label-secondary, max-w-page …). These are the only sizes desktop code uses. */
+@theme inline {
+  /* Type — the macOS text styles (13 pt body). */
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI Variable", "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --text-title-large: 26px;
+  --text-title-large--line-height: 32px;
+  --text-title-large--font-weight: 700;
+  --text-title-1: 22px;
+  --text-title-1--line-height: 28px;
+  --text-title-1--font-weight: 700;
+  --text-title-2: 17px;
+  --text-title-2--line-height: 22px;
+  --text-title-2--font-weight: 600;
+  --text-title-3: 15px;
+  --text-title-3--line-height: 20px;
+  --text-title-3--font-weight: 600;
+  --text-headline: 13px;
+  --text-headline--line-height: 16px;
+  --text-headline--font-weight: 600;
+  --text-body: 13px;
+  --text-body--line-height: 16px;
+  --text-callout: 12px;
+  --text-callout--line-height: 15px;
+  --text-caption: 11px;
+  --text-caption--line-height: 14px;
+
+  /* Controls and rows (heights). The spacing grid itself is Tailwind's 4 px step: 1 = 4 px. */
+  --spacing-control-sm: 22px;
+  --spacing-control: 28px;
+  --spacing-control-lg: 32px;
+  --spacing-row-compact: 24px;
+  --spacing-sidebar-row: 28px;
+  --spacing-row: 36px;
+  --spacing-row-tall: 48px;
+  --spacing-toolbar: 52px;
+  --spacing-icon-sm: 14px;
+  --spacing-icon: 16px;
+  --spacing-icon-lg: 20px;
+  --spacing-icon-xl: 32px;
+
+  /* Content widths. */
+  --container-form: 640px;
+  --container-page: 880px;
+  --container-wide: 1120px;
+
+  /* Radii. */
+  --radius-control: 6px;
+  --radius-group: 10px;
+  --radius-panel: 12px;
+
+  /* Colours (semantic names only). */
+  --color-label: var(--mx-label);
+  --color-label-secondary: var(--mx-label-secondary);
+  --color-label-tertiary: var(--mx-label-tertiary);
+  --color-label-quaternary: var(--mx-label-quaternary);
+  --color-separator: var(--mx-separator);
+  --color-fill: var(--mx-fill);
+  --color-fill-secondary: var(--mx-fill-secondary);
+  --color-fill-tertiary: var(--mx-fill-tertiary);
+  --color-window: var(--mx-window);
+  --color-content: var(--mx-content);
+  --color-group: var(--mx-group);
+  --color-control: var(--mx-control);
+  --color-elevated: var(--mx-elevated);
+  --color-tint: var(--mx-tint);
+  --color-tint-label: var(--mx-tint-label);
+  --color-selection: var(--mx-selection);
+  --color-selection-label: var(--mx-selection-label);
+  --color-selection-muted: var(--mx-selection-muted);
+  --color-focus: var(--mx-focus);
+  --color-system-red: var(--mx-red);
+  --color-system-orange: var(--mx-orange);
+  --color-system-yellow: var(--mx-yellow);
+  --color-system-green: var(--mx-green);
+  --color-system-blue: var(--mx-blue);
+  --color-system-purple: var(--mx-purple);
+  --color-system-gray: var(--mx-gray);
+
+  --shadow-control: var(--mx-shadow-control);
+  --shadow-raised: var(--mx-shadow-raised);
+  --shadow-popover: var(--mx-shadow-popover);
+}
+
+/* The one focus ring: macOS draws a soft tint halo outside the control's edge. */
+@utility focus-ring {
+  outline: none;
+  &:focus-visible {
+    outline: 3px solid var(--mx-focus);
+    outline-offset: 0;
+  }
+}
+
+/* Native window chrome: what drags the window, and what never does. */
+@utility window-drag {
+  -webkit-app-region: drag;
+}
+@utility window-no-drag {
+  -webkit-app-region: no-drag;
+}
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    font-size: 13px;
+    line-height: 16px;
+    color: var(--mx-label);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--mx-tint) 28%, transparent);
+  }
+}
+
+/* The activity indicator (NSProgressIndicator, spinning style): twelve spokes, stepped. */
+@keyframes mx-spokes {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.mx-spinner {
+  animation: mx-spokes 0.9s steps(12, end) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .mx-spinner {
+    animation-duration: 2.4s;
+  }
+}