@robomous/ui-core 0.1.1 → 0.2.0

package/src/{styles.css → theme/styles.css}

@@ -1,17 +1,22 @@
 /*
  * @robomous/ui-core — the design system's stylesheet.
  *
- * This is the shadcn preset `b2iH` (style `nova` on the Radix base, base colour
- * `neutral`, chart palette `neutral`, icons `lucide`, Geist throughout with the
- * heading face inheriting the body's, radius medium, menu inverted/subtle, and
- * the pointer cursor on pressable controls) — the CLI's exact generated output,
- * transcribed verbatim from a Docker scratch project built with `shadcn` 4.19.0. The preset is the source of truth for every
- * name below except one: `brand` is Robomous's own, justified in
- * `DESIGN.md` and following shadcn's own extension convention — a value
- * in `:root`, a dark counterpart in `.dark`, exposure through `@theme
- * inline`. Consumers add their extensions in their own stylesheet after
- * importing this one. `src/tokens.ts` is the TypeScript mirror of this file
- * and `tokens.test.ts` asserts the two agree, declaration for declaration.
+ * **This file is the design system's one home for a colour.** Tailwind v4 is
+ * CSS-first, so this is not a mirror of a config — it *is* the config, and
+ * every utility in this package and in every consuming app resolves through
+ * the names below. `brand` is Robomous's own identity colour, justified in
+ * `DESIGN.md`, and it is declared the way every other name here is: a value in
+ * `:root`, a dark counterpart in `.dark`, exposure through `@theme inline`.
+ * Consumers add their extensions in their own stylesheet after importing this
+ * one. `tokens.ts` is the TypeScript mirror of this file, for callers that
+ * cannot read CSS, and `tokens.test.ts` asserts the two agree declaration for
+ * declaration.
+ *
+ * `./tailwind.css` carries the variant and utility layer the components paint
+ * through: the `data-*` variants that key off the `data-state` attributes the
+ * behaviour libraries emit, plus the scroll-mask and shimmer utilities. It is
+ * imported ahead of the token blocks because a variant has to exist before a
+ * utility can qualify on it.
  *
  * A consuming app imports exactly this:
  *
@@ -24,7 +29,7 @@
 
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "shadcn/tailwind.css";
+@import "./tailwind.css";
 @import "@fontsource-variable/geist";
 
 /*
@@ -38,15 +43,15 @@
 
 :root {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.2 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.2 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
+  --secondary-foreground: oklch(0.269 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
@@ -71,11 +76,15 @@
   --sidebar-ring: oklch(0.708 0 0);
 
   /*
-   * Robomous coral. Identity only — the wordmark and its styleguide swatch,
-   * named in `DESIGN.md` — never a functional-UI colour. A third site
+   * Robomous orange (#F5580B). Identity only — the wordmark and its styleguide
+   * swatch, named in `DESIGN.md` — never a functional-UI colour. A third site
    * is a design decision, not a styling one.
+   *
+   * At 3.34:1 on `background` it clears 3:1 for large text and non-text marks
+   * and misses 4.5:1 for body copy, which is one more reason the wordmark is
+   * where it belongs.
    */
-  --brand: oklch(0.653 0.178 32.3);
+  --brand: oklch(0.663 0.205 39.9);
 }
 
 .dark {
@@ -111,11 +120,11 @@
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
 
-  --brand: oklch(0.653 0.178 32.3);
+  --brand: oklch(0.663 0.205 39.9);
 }
 
 @theme inline {
-  --font-sans: 'Geist Variable', sans-serif;
+  --font-sans: "Geist Variable", sans-serif;
   --font-heading: var(--font-sans);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
@@ -156,15 +165,16 @@
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
 
-  /* Robomous's one identity token, exposed the same way as every preset colour. */
+  /* Robomous's one identity token, exposed the same way as every other colour. */
   --color-brand: var(--brand);
 }
 
 @layer base {
   /* The hairline and the outline *colour* — the two things every element
-     inherits. The focus treatment itself belongs to the primitives: each one
-     carries Nova's own `ring-3` ring in `ring/50` (DESIGN.md, Borders and
-     focus), so the base layer names the colour and stays out of the geometry.
+     inherits. The focus treatment itself belongs to the components: each
+     focusable one carries its own `ring-3` ring in `ring/50` (DESIGN.md,
+     Borders and focus), so the base layer names the colour and stays out of
+     the geometry.
      Nothing here may declare focus geometry again: one blanket declaration in
      this layer is how thirteen components' rings got overridden at once. */
   * {
@@ -186,19 +196,23 @@
   body {
     @apply bg-background text-foreground;
   }
-  /* The preset's pointer option. Scoped to what is actually pressable and away
-     from what is not: a disabled control keeps the arrow, because a hand over
-     something that will not respond is the cursor telling a lie. */
-  button:not(:disabled), [role="button"]:not(:disabled) {
+  /* Scoped to what is actually pressable and away from what is not: a disabled
+     control keeps the arrow, because a hand over something that will not
+     respond is the cursor telling a lie. */
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
     cursor: pointer;
   }
   html {
     @apply font-sans;
   }
-  /* One family now: the preset sets `--font-heading` to `--font-sans`, so this
-     rule keeps the semantic hook without changing the face. A later preset that
+  /* One family now: `--font-heading` resolves to `--font-sans`, so this rule
+     keeps the semantic hook without changing the face. A later decision that
      splits them again lands here without a diff at every heading. */
-  h1, h2, h3, h4 {
+  h1,
+  h2,
+  h3,
+  h4 {
     @apply font-heading;
   }
 }