@kennycorrea/ui 0.1.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kennycorrea/ui",
+  "version": "0.1.0",
+  "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
+  "private": false,
+  "type": "module",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "tokens.css",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./tokens.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rimraf dist",
+    "lint": "biome check .",
+    "format": "biome check --write .",
+    "prepublishOnly": "npm run build",
+    "test": "biome check . && tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "@radix-ui/themes": "^3.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.13",
+    "@radix-ui/themes": "^3.3.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "~6.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/kennyrafael/upfront-ui.git"
+  }
+}

package/tokens.css

@@ -0,0 +1,240 @@
+/**
+ * Upfront's token bridge — the shared half of every app's stylesheet.
+ *
+ * Two apps said `text-ink-muted` and `bg-brand-700/8` and each carried its own copy of what
+ * those meant. The values below are the dashboard's, which was the more complete of the two.
+ *
+ * **How far the two copies had actually drifted, measured rather than assumed**, because the
+ * answer is narrower than "two copies always diverge" and the difference matters:
+ *
+ * - **The live values agreed.** `--color-ink` resolved to `var(--gray-12)` in both,
+ *   `--color-hairline` to `var(--gray-a6)`, and the backdrop to the same `oklch` literal. The
+ *   `.radix-themes` blocks had been kept in step by hand, and they were right.
+ * - **The static fallbacks in `@theme` had not been.** `--color-ink` was `#1d3b31` here and
+ *   `#1a211f` there; the hairline 12% against 10%. Those only show if the Radix stylesheet
+ *   fails to load, so the drift was real and invisible — the worst kind to leave lying around,
+ *   and the least urgent.
+ * - **`--font-sans` was the one live difference**: `'Inter', …` in the dashboard against
+ *   `ui-sans-serif, …` on the site. ⚠ And neither app loads Inter, so the dashboard has been
+ *   asking for a font it does not have and both render the system stack. Unified here; if Inter
+ *   is ever wanted it needs adding to the apps' HTML, and then it will apply to all three at
+ *   once, which is the point.
+ *
+ * The drift that was live and visible was in the **components**, not the colours — see the
+ * `Button` note in the README.
+ *
+ * **How to use it**, in an app's own `index.css`:
+ *
+ *     @import 'tailwindcss';
+ *     @source '../node_modules/@kennycorrea/ui/dist';
+ *     @import '@kennycorrea/ui/tokens.css';
+ *
+ * The `@source` line is not optional. Tailwind does not scan `node_modules`, so without it
+ * every utility class used *inside* the atoms — `w-full`, `inline-flex` — is absent from the
+ * generated CSS, and the components come out subtly unstyled with nothing in the console.
+ */
+
+
+/**
+ * Upfront's token names, registered with Tailwind.
+ *
+ * The values here are static fallbacks, not the live palette — the real assignments are in
+ * the `.radix-themes` rule below. Two blocks rather than one because of how custom
+ * properties resolve: `@theme` emits to `:root`, Radix Themes defines `--accent-*` and
+ * `--gray-*` on its own element, and `var(--accent-9)` written at `:root` resolves against
+ * a variable that does not exist there — to nothing at all. It has to be written where the
+ * Radix variables live.
+ *
+ * Keeping real colours here rather than empty placeholders means the app still renders
+ * something sane if the Themes stylesheet ever fails to load.
+ */
+@theme {
+  --color-brand-50: #f4fbf7;
+  --color-brand-100: #e6f7ed;
+  --color-brand-200: #d6f1e3;
+  --color-brand-300: #c3e9d7;
+  --color-brand-400: #acdec8;
+  --color-brand-500: #8bceb6;
+  --color-brand-600: #56ba9f;
+  --color-brand-700: #29a383;
+  --color-brand-ink: #208368;
+  --color-brand-800: #26997b;
+  --color-brand-900: #1d3b31;
+  --color-brand-950: #1d3b31;
+
+  --color-oncolor: #ffffff;
+  --color-canvas: #fbfefd;
+  --color-ink: #1d3b31;
+  --color-ink-muted: #5f6d68;
+  --color-sheet: #ffffff;
+  --color-backdrop: #1d3b31;
+  --color-onbackdrop: rgba(255, 255, 255, 0.75);
+  --color-scrim: rgba(0, 0, 0, 0.6);
+  --color-hairline: rgba(29, 59, 49, 0.12);
+
+  --color-warn: #ffc53d;
+  --color-warn-ink: #ab6400;
+  --color-warn-solid: #ffc53d;
+  --color-danger: #e5484d;
+  --color-danger-ink: #ce2c31;
+  --color-danger-solid: #e5484d;
+  --color-good: #29a383;
+  --color-good-ink: #208368;
+
+  --shadow-panel: 0 1px 2px rgba(29, 59, 49, 0.06), 0 16px 40px -20px rgba(29, 59, 49, 0.22);
+  --shadow-raised: 0 1px 2px rgba(29, 59, 49, 0.09), 0 24px 56px -24px rgba(29, 59, 49, 0.32);
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+}
+
+/**
+ * The live bridge: Upfront's names, pointed at Radix Themes' palette.
+ *
+ * Every colour in the app now comes from Themes. This is the only place that names a Radix
+ * variable — the components keep saying `brand-700`, `ink-muted`, `surface`, and nothing
+ * had to be rewritten to adopt them.
+ *
+ * **Light and dark are no longer ours to maintain.** Themes redefines these under its own
+ * `.light` and `.dark` classes, so the hand-written dark palette that used to live here —
+ * two near-identical eighty-line blocks — is gone. Setting `appearance` on the `<Theme>` in
+ * App.tsx is the whole of it now.
+ *
+ * The step numbering is Radix's, and it is semantic rather than a lightness ramp: 9 is the
+ * solid fill an action is painted with, 11 is low-contrast text, 12 is high-contrast text.
+ * Those meanings hold in both appearances, which is why `text-brand-900` reads correctly on
+ * a dark ground without a second definition.
+ */
+@layer base {
+  .radix-themes {
+    --color-brand-50: var(--accent-2);
+    --color-brand-100: var(--accent-3);
+    --color-brand-200: var(--accent-4);
+    --color-brand-300: var(--accent-5);
+    --color-brand-400: var(--accent-6);
+    --color-brand-500: var(--accent-7);
+    --color-brand-600: var(--accent-8);
+    /* 700 is the primary action colour, so it maps to the step Radix paints buttons with. */
+    --color-brand-700: var(--accent-9);
+    --color-brand-800: var(--accent-10);
+    --color-brand-900: var(--accent-12);
+    --color-brand-950: var(--accent-12);
+
+    /**
+     * Brand **text**, which is not the same colour as a brand fill.
+     *
+     * Step 9 is the one Radix paints buttons with — a saturated block meant to have
+     * something written on top of it, not to be written with. As a link on a pale surface
+     * it was always thin for jade, and once the accent became the business's choice it
+     * broke outright: yellow-9 on white is a highlighter pen. Step 11 is Radix's
+     * "low-contrast text", which is exactly this job and holds in both appearances.
+     *
+     * Fills and washes keep 700. Only the ink moved.
+     */
+    --color-brand-ink: var(--accent-11);
+
+    /* What Radix itself writes on top of accent-9, so a label on a button is never guesswork. */
+    --color-oncolor: var(--accent-contrast);
+
+    --color-canvas: var(--color-background);
+    --color-ink: var(--gray-12);
+    --color-ink-muted: var(--gray-11);
+
+    /**
+     * The material every card, dialog and bar is made of.
+     *
+     * Called `sheet` and not `surface`, which is the obvious name, because Radix Themes
+     * already defines `--color-surface` for its own translucent component fills. Theirs is
+     * unlayered CSS and ours sits in `@layer base`, so unlayered wins the cascade and every
+     * `bg-surface` in the app quietly painted at 85% — which is what made the mobile
+     * sidebar see-through.
+     *
+     * Solid rather than translucent: these are already stacked on a washed ground, and
+     * layering two translucencies turns the text grey.
+     */
+    --color-sheet: var(--color-panel-solid);
+
+    /**
+     * The deep field behind sign-in and the public booking page, and the wash behind a
+     * dialog. Both have to stay dark in *either* appearance.
+     *
+     * **Neither can be a step from an accent scale.** Themes flips the whole ramp between
+     * appearances, so `--jade-12` is a near-black green in light and a pale mint in dark —
+     * which turned the sign-in screen into a bright green field with a dark card on it. The
+     * scrim was worse: `--gray-a11` inverted to a near-white wash, so a dialog *lightened*
+     * the page behind it instead of dimming it.
+     *
+     * So the backdrop is a literal, and the scrim uses Radix's own `--color-overlay`, which
+     * is what they dim their dialogs with and is dark in both.
+     */
+    --color-backdrop: oklch(0.24 0.046 162);
+    /* Its pair. Anything written on the backdrop needs an ink that does not flip either —
+       the sign-in footer used `brand-100`, which is a pale green in light and a near-black
+       one in dark, and vanished against the field it sits on. */
+    --color-onbackdrop: rgba(255, 255, 255, 0.75);
+    --color-scrim: var(--color-overlay);
+
+    /* An alpha step, so a hairline stays a hairline over whatever surface is beneath it. */
+    --color-hairline: var(--gray-a6);
+
+    /**
+     * Warning, danger and success, from Radix's own scales.
+     *
+     * A fill and an ink, because the two move in opposite directions between appearances:
+     * the fill stays a faint wash while the ink goes from nearly black to nearly white.
+     * Step 11 is Radix's "text on a tinted background", which is precisely this job — and
+     * it is what makes a pending booking legible in the dark theme without a second rule.
+     */
+    --color-warn: var(--amber-9);
+    --color-warn-ink: var(--amber-11);
+    --color-warn-solid: var(--amber-9);
+
+    --color-danger: var(--red-9);
+    --color-danger-ink: var(--red-11);
+    --color-danger-solid: var(--red-9);
+
+    --color-good: var(--jade-9);
+    --color-good-ink: var(--jade-11);
+
+    /* Radix ships six depths; 2 is a resting panel and 4 is something floating over it. */
+    --shadow-panel: var(--shadow-2);
+    --shadow-raised: var(--shadow-4);
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    @apply antialiased;
+  }
+}
+
+/**
+ * Pins a subtree to the light appearance whatever the provider chose.
+ *
+ * Only `color-scheme` — the palette itself comes from the nested `<Theme appearance="light">`
+ * in `PublicLayout`. This is what stops the browser painting form controls and scrollbars
+ * dark inside an otherwise light page.
+ */
+@utility theme-light {
+  color-scheme: light;
+}
+
+@utility panel {
+  /* The shared surface: a panel over the washed ground, hairline ring, soft shadow.
+     Everything card-like in the app uses this.
+
+     **Opaque, and no `backdrop-blur`.** Both were chasing the same artifact: hovering a
+     control left a lighter rectangle over the page that faded out on its own a moment later,
+     in dark mode only.
+
+     What a translucent panel costs is a blend on every repainted pixel. Chromium repaints
+     the damaged rectangle around whatever changed, and blending 85% over a dark ground does
+     not land on exactly the colour the full paint produced — so the repainted rectangle sits
+     visibly lighter until the next full paint takes it away. The blur made the same thing
+     worse by re-sampling a backdrop as well.
+
+     Neither bought anything here: this is a flat colour over a flat canvas, so the alpha
+     was a blend with nothing to reveal. */
+  @apply rounded-2xl bg-sheet shadow-panel ring-1 ring-hairline;
+}