@codecavepro/brand 1.2.0 → 1.3.0

package/README.md

@@ -169,20 +169,28 @@ surprises you.
 `vue` is a peer dependency. `gsap` is an optional one, wanted only by `GlowButton`,
 `TypingEffect` and `ContactUsForm`; leave it out and the rest are unaffected.
 
-### They need your Tailwind theme, not just the tokens
+### Import the theme, not just the tokens
 
 Every colour, radius and control height in these components is a token — but they reach
 most of them through **Tailwind utility classes** (`bg-surface-primary`,
-`text-heading-lg`, `rounded-card`), and a utility class only exists if Tailwind knows
-the name. Importing `@codecavepro/brand/tokens.css` gives you the *values*; it does not
-give Tailwind the `@theme` entries that turn them into classes.
+`text-heading-md`, `rounded-custom`), and a utility class exists only if Tailwind knows
+the name. `tokens.css` gives you the *values*; `theme.css` gives Tailwind the names, so
+you need both:
 
-Until this package ships that block, mirror it in your own stylesheet — the definitive
-copy is the `@theme { … }` in codecave.pro's `src/styles/global.css`, reproduced in this
-repository at `docs/source_examples/styles/global.css`. Without it the components mount
-and behave correctly and render nearly unstyled.
+```css
+@import "tailwindcss";
+@import "@codecavepro/brand/tokens.css";
+@import "@codecavepro/brand/theme.css";
+```
+
+**That order is load-bearing, and `tokens.css` must stay unlayered.** Several entries in
+`theme.css` are deliberate self-references (`--color-glow-25: var(--color-glow-25)`):
+the declaration is what makes Tailwind emit the utility, while the value comes from
+`tokens.css`, whose unlayered `:root` outranks `@layer theme`. Wrap `tokens.css` in a
+cascade layer — or leave it out — and those names resolve to nothing.
 
-Tracked as [CCWEB2-333](https://codecave.atlassian.net/browse/CCWEB2-333).
+Import only `tokens.css` and the components mount and behave correctly and render
+nearly unstyled.
 
 ### What is not here, and why
 
@@ -220,8 +228,11 @@ the rules, the reasoning, the anti-patterns — is documented separately:
 
 It authors nothing. Every byte is copied, extracted or compiled out of `docs/` in the
 repository above: `css` and `fonts.css` are copied verbatim, `tokens.css` is extracted
-from the same file `css` is copied from, and the typed module is compiled from
-`docs/tokens/*.ts`. `docs/` stays the single origin, and CI asserts on every push that
+from the same file `css` is copied from, `theme.css` is extracted from the capture of
+codecave.pro's `global.css`, and the typed module is compiled from `docs/tokens/*.ts`.
+A name that `theme.css` and `tokens.css` both give a literal value must agree, and the
+build fails if it does not — otherwise one of the two would be dead and nobody would
+see it. `docs/` stays the single origin, and CI asserts on every push that
 the copies are byte-identical and the extraction still reproduces what shipped.
 
 Two editable copies of a palette is the exact failure this package exists to end, so it

package/dist/theme.css

@@ -0,0 +1,81 @@
+/* ==========================================================================
+ * CODECAVE Tailwind theme — @codecavepro/brand/theme.css
+ * --------------------------------------------------------------------------
+ * GENERATED from docs/source_examples/styles/global.css — do not edit.
+ *
+ * Declares the names Tailwind needs in order to emit CODECAVE utility
+ * classes: bg-surface-primary, text-heading-lg, rounded-card and the rest.
+ * Without it the components in this package mount and behave correctly and
+ * render nearly unstyled.
+ *
+ * IMPORT ORDER MATTERS, and this file is wrong without it:
+ *
+ *   @import "tailwindcss";
+ *   @import "@codecavepro/brand/tokens.css";   <- must come first,
+ *   @import "@codecavepro/brand/theme.css";       and stay unlayered
+ *
+ * Several entries here are deliberate self-references (--x: var(--x)). They
+ * exist so Tailwind emits the utility; the value comes from tokens.css,
+ * whose unlayered :root outranks @layer theme. Import tokens.css inside a
+ * cascade layer, or not at all, and those names resolve to nothing.
+ * ======================================================================== */
+
+@theme {
+
+    /* sizes */
+    --max-width-desktop: 1280px;
+    --breakpoint-sm: 457px;
+    --font-sans: Satoshi, sans-serif;
+    --text-heading-lg: 3.5rem;
+    --text-heading-lg--line-height: 130%;
+    --text-heading-md: 2.75rem;
+    --text-heading-md--line-height: 115%;
+    --text-heading-sm: 2rem;
+    --text-heading-sm--line-height: 110%;
+    --radius-custom: 2.75rem;
+
+    /* colors */
+
+    /* primary */
+    --color-primary-25: var(--color-brand-25);
+    --color-primary-50: var(--color-brand-50);
+    --color-primary-100: var(--color-brand-100);
+    --color-primary-200: var(--color-brand-200);
+    --color-primary-300: var(--color-brand-300);
+    --color-primary-400: var(--color-brand-400);
+    --color-primary-500: var(--color-brand-500); /* button primary*/
+    --color-primary-600: var(--color-brand-600);
+    --color-primary-700: var(--color-brand-700); /* button primary hover*/
+    --color-primary-800: var(--color-brand-800); 
+    --color-primary-900: var(--color-brand-900); /* button primary active*/
+
+
+    /* once used? */
+    --color-glow-25: var(--color-glow-25);
+    --color-progress-0: var(--color-progress-0);
+    --color-technology-gradient-0: var(--color-technology-gradient-0);
+    --color-technology-gradient-25: var(--color-technology-gradient-25);
+    --color-technology-gradient-50: var(--color-technology-gradient-50);
+    --color-shadow-0: var(--color-shadow-0);
+    --color-failureproof-0: var(--color-gray-1000);
+
+    --color-heading: var(--color-gray-50);
+    --color-action: var(--color-brand-500);
+    --color-neutral: var(--color-gray-600);
+    --color-hovered: var(--color-brand-200);
+    --color-outline-primary-hover: var(--color-brand-800);
+    --color-body-primary: var(--color-gray-50);
+    --color-text-body-primary: var(--color-gray-200);
+    --color-body-secondary: var(--color-gray-500);
+    --color-body-secondary-lighter: var(--color-gray-300);
+    --color-surface-primary: var(--color-brand-950);
+    --color-surface-primary-hover: var(--color-gray-800);
+    --color-surface-secondary: var(--color-gray-1100); /* Surface/background-secondary*/
+    --color-surface-tertiary: var(--color-gray-900);
+    --color-surface-primary-transparent: hsl(from var(--color-surface-primary) h s l / 0.3);
+    --color-surface-quaternary: var(--color-gray-700);
+    
+    --color-default-transparent: var(--color-gray-100);
+    
+    --color-error: var(--color-error-300);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",
@@ -26,6 +26,7 @@
     },
     "./css": "./dist/colors_and_type.css",
     "./tokens.css": "./dist/tokens.css",
+    "./theme.css": "./dist/theme.css",
     "./fonts.css": "./dist/fonts.css",
     "./components/*": "./dist/src/components/*",
     "./assets/*": "./dist/src/assets/*",