@inkorange/space-ui 1.0.0

package/dist/tokens.css

@@ -0,0 +1,176 @@
+/* ============================================================
+   Space design-system tokens — Phase 1 of the Radix removal.
+   Grays are 7 ROLE tokens (consolidated from 15 Radix variants);
+   spacing is a t-shirt scale on the 8pt grid (xs is the 4px
+   half-step). Accent/type values are seeded from the measured
+   Radix dark theme so the swap is visually silent.
+   Spec: docs/superpowers/specs/2026-07-31-radix-removal-design.md
+   ============================================================ */
+:root {
+  /* Grays — role-based (seeded from Radix slate, dark) */
+  --sp-gray-text: #edeef0;        /* headings, primary text        (was gray-12) */
+  --sp-gray-text-dim: #b0b4ba;    /* secondary text, labels        (was gray-11) */
+  --sp-gray-muted: #696e77;       /* placeholder, disabled, faint  (was gray-9)  */
+  --sp-gray-border: #d6ebfd30;    /* hairlines, control borders    (was gray-a6) */
+  --sp-gray-surface: #d8f4f609;   /* subtle washes: hovers, wells  (was gray-a2) */
+  --sp-gray-panel: #18191b;       /* solid card/panel fills        (was gray-2);
+                                     split from surface after visual review —
+                                     one alpha value can't serve both the old
+                                     solid panels and the old 3.5% washes */
+  --sp-gray-track: #272a2d;       /* recessed meter/progress tracks (was gray-4);
+                                     split from border after visual review —
+                                     tracks need the old solid, not 19% alpha */
+
+  /* ---- Accents ------------------------------------------------------
+     Named for the job, never the hue or a step on a ramp — the treatment
+     the grays above already had. Two axes, because emphasis and status
+     answer different questions: calling "success" a secondary colour
+     would say less than "green" did.
+
+     Suffixes are roles, not tones: -solid fills a shape, -text sits on
+     the dark ground, -soft is a wash behind it, -border outlines, -glow
+     is a halo. Values are the measured Radix dark theme, so the swap was
+     visually silent. */
+
+  /* Emphasis */
+  --sp-primary-solid: #0090ff;   /* solid fill: badges, progress          */
+  --sp-primary-text: #70b8ff;    /* links and text on the dark ground     */
+  --sp-primary-soft: #0077ff3a;  /* wash behind soft badges               */
+  --sp-primary-border: #2870bd;  /* focus outlines                        */
+  --sp-primary-glow: #0f89fd7f;  /* halo on the loader                    */
+  --sp-primary-deep: #111927;    /* deepest tint, gradient ends           */
+
+  /* Status */
+  --sp-success-solid: #30a46c;
+  --sp-success-text: #3dd68c;
+  --sp-success-soft: #22ff991e;
+  --sp-warning-text: #ffca16;
+  --sp-warning-soft: #fa820022;
+  --sp-danger-text: #ff9592;
+  --sp-danger-soft: #ff173f2d;
+  --sp-accent-text: #baa7ff;
+  --sp-accent-soft: #8354fe36;
+
+  /* ---- Component sizing ---------------------------------------------
+     Defaults a consumer can move without touching a component. */
+
+  /* A Select sizes itself to its widest option, so it never changes width as
+     you select. This caps that, past which the label ellipsizes. */
+  /* One height for every single-line control, so a field, a select and a
+     button line up in a row. Shared as a token because two stylesheets used
+     to state it separately with a "keep in sync" comment — and had already
+     drifted, the field having no height at all. */
+  --sp-control-height: 40px;
+
+  --sp-select-trigger-max-width: 20rem;
+
+  /* The option panel grows past the trigger to fit its longest option, so a
+     label need not wrap just because the control is narrow. min() keeps it on
+     screen on a small viewport. */
+  --sp-select-panel-max-width: min(90vw, 28rem);
+
+  /* ---- Component colours --------------------------------------------
+     Values specific to one component's identity rather than a shared role.
+     They live here, not in the component, so the promise holds: every colour
+     in the system is in this file and swapping it restyles everything. */
+  /* Tabs are folder-shaped: they seat onto the surface below and the active
+     one breaks through its top border, so the component needs to know that
+     surface's colour to recreate it. Set this to whatever the tabs sit on. */
+  --sp-tabs-surface-color: #16181b;
+  --sp-tabs-rest-from-color: rgba(15, 20, 40, 0.6);
+  --sp-tabs-rest-to-color: rgba(7, 10, 20, 0.3);
+  --sp-tabs-hover-from-color: rgba(24, 32, 62, 0.75);
+  --sp-tabs-hover-to-color: rgba(10, 14, 28, 0.45);
+  --sp-tabs-active-from-color: rgba(30, 40, 76, 0.9);
+  --sp-tabs-active-edge-color: rgba(190, 215, 255, 0.45);
+
+  --sp-select-panel-color: #101216;
+
+  --sp-radio-group-orb-highlight-color: #cfe0ff;
+  --sp-radio-group-orb-mid-color: #8fb4ff;
+  --sp-radio-group-orb-rim-color: rgba(150, 195, 255, 0.9);
+  --sp-radio-group-orb-glow-color: rgba(190, 215, 255, 0.85);
+  --sp-radio-group-orb-halo-color: rgba(120, 170, 255, 0.55);
+
+  --sp-icon-toggle-label-color: #dbe6ef;
+  --sp-icon-toggle-label-dim-color: rgba(219, 230, 239, 0.55);
+  --sp-icon-toggle-active-from-color: rgba(90, 130, 220, 0.28);
+  --sp-icon-toggle-active-rim-color: rgba(140, 170, 255, 0.45);
+  --sp-icon-toggle-active-to-color: rgba(90, 130, 220, 0.35);
+
+  --sp-slider-thumb-highlight-color: #e6f0ff;
+  --sp-slider-thumb-mid-color: #86abe8;
+  --sp-slider-thumb-shade-color: #23386b;
+  --sp-slider-thumb-limb-color: #0b1330;
+  --sp-slider-thumb-rim-color: rgba(160, 195, 255, 0.75);
+  --sp-slider-thumb-rim-hover-color: rgba(190, 215, 255, 0.9);
+  --sp-slider-thumb-glow-hover-color: rgba(130, 175, 255, 0.75);
+  --sp-slider-range-from-color: rgba(70, 110, 210, 0.85);
+  --sp-panel-item-highlight-color: rgba(220, 230, 255, 0.45);
+
+  /* A faint neutral wash, for a badge carrying no status. */
+  --sp-muted-soft: #ffffff12;
+  --sp-on-solid: #ffffff;          /* text on a solid accent fill */
+
+  /* ---- Categorical --------------------------------------------------
+     For telling data apart — star classes, planet types — where colour
+     distinguishes rather than signals. These keep hue names on purpose:
+     in a categorical scale the hue IS the identity, and a ranking word
+     like "tertiary" would imply an order that does not exist. */
+  --sp-category-cyan-soft: #00befd28;
+  --sp-category-cyan-text: #4ccce6;
+  --sp-category-purple-soft: #c150ff2d;
+  --sp-category-purple-text: #d19dff;
+  --sp-category-orange-soft: #fb6a0025;
+  --sp-category-orange-text: #ffa057;
+  --sp-category-yellow-soft: #ffaa001e;
+  --sp-category-yellow-text: #f5e147;
+
+  /* ---- Lit-glass surfaces -------------------------------------------
+     Stored as raw channels, not colours, so a component can vary alpha
+     locally — `rgb(var(--sp-rim-rgb) / 0.4)` — while the hue stays a
+     single system-level decision. Alpha is about layering; hue is brand.
+     Change one line here and every glass surface moves with it. */
+  --sp-glass-rgb: 15 20 40;        /* panel/button fill, upper stop     */
+  --sp-glass-deep-rgb: 5 7 15;     /* the same fill, lower stop         */
+  --sp-sheen-rgb: 96 150 250;      /* top-left light catching the glass */
+  --sp-rim-rgb: 150 190 255;       /* the lit atmosphere limb           */
+  --sp-glow-rgb: 110 160 255;      /* hover/focus bloom                 */
+  --sp-glint-rgb: 225 238 255;     /* the sweep across the surface      */
+  --sp-star-rgb: 255 255 255;      /* speck highlights                  */
+  --sp-shadow-rgb: 0 0 0;          /* ambient drop shadow               */
+  --sp-glass-text: #eaf2ff;        /* text sitting on a glass surface   */
+  --sp-focus-ring: #9cc0ff;        /* keyboard focus outline            */
+
+  /* Ember — the warm variant, for destructive-leaning controls. */
+  --sp-ember-glass-rgb: 30 16 14;
+  --sp-ember-glass-deep-rgb: 12 6 5;
+  --sp-ember-sheen-rgb: 250 150 96;
+  --sp-ember-rim-rgb: 255 180 130;
+  --sp-ember-glow-rgb: 255 150 100;
+
+  /* Spacing — 8pt grid, xs = 4px half-step */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+
+  /* Font family. The library does NOT set a family on any component —
+     everything inherits the host app's font, and nothing portals out of
+     the tree, so inheritance always reaches it. Badge is the sole
+     exception: Radix deliberately pinned badges to the system stack and
+     the port kept that for parity. This token IS that pin, exposed so a
+     consumer can bring badges onto their own brand font instead of being
+     stuck on the system stack. Override it and only Badge changes;
+     everything else already follows your app. */
+  --sp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI (Custom)", Roboto,
+    "Helvetica Neue", "Open Sans (Custom)", system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji";
+
+  /* Type scale (seeded from Radix font-size steps in use) */
+  --sp-font-xs: 12px;
+  --sp-font-sm: 14px;
+  --sp-font-md: 16px;
+  --sp-font-xl: 24px;
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@inkorange/space-ui",
+  "version": "1.0.0",
+  "description": "SpaceUI — a space-themed React component library and design system",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/inkorange/space-ui"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/space-ui.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./spaceControls": {
+      "types": "./dist/spaceControls.d.ts",
+      "import": "./dist/spaceControls.js",
+      "require": "./dist/spaceControls.cjs"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4.6.0",
+    "happy-dom": "^18.0.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "sass": "^1.89.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.0",
+    "vitest": "^3.2.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly && cp src/styles/tokens.css dist/tokens.css",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}