@codecavepro/brand 1.0.0 → 1.2.0

package/dist/tokens.css

@@ -0,0 +1,229 @@
+/* ==========================================================================
+ * CODECAVE design tokens — @codecavepro/brand/tokens.css
+ * --------------------------------------------------------------------------
+ * GENERATED from docs/colors_and_type.css — do not edit.
+ *
+ * The custom properties and nothing else: no @font-face, no rules for html,
+ * body, headings or links, no layout primitives, no components. Import this
+ * into an app that already has a base layer of its own and wants CODECAVE's
+ * values; import "@codecavepro/brand/css" to get the design system whole.
+ *
+ * Fonts are a separate concern here by design: --font-sans names Satoshi and
+ * supplying the faces is the consuming app's job.
+ * ======================================================================== */
+
+:root {
+  /* =========================================================================
+   * RAW RAMPS — verbatim from global.css :root after the 2026 palette
+   * rebuild. A violet brand ramp, a gray ramp, and single-use accents.
+   * Do not consume directly except where noted (glow-25 is the glow-button
+   * fill; progress-0 is the gradient mid; shadow-0 seeds the section glow).
+   * ====================================================================== */
+
+  /* ---- Brand (violet) ---- */
+  --color-brand-25:  #E8E6F0;  /* near-white tint — gradient endpoint         */
+  --color-brand-50:  #BBB9CB;
+  --color-brand-100: #B8AFDB;
+  --color-brand-200: #B19AFE;  /* hover foreground                            */
+  --color-brand-300: #735CAB;
+  --color-brand-400: #5F3ABD;  /* feature-card ring mid-stop (was cyan)       */
+  --color-brand-500: #5F20FE;  /* ACTION — links, borders, eyebrows           */
+  --color-brand-600: #4705ED;
+  --color-brand-700: #4004AF;  /* primary button hover; tertiary border hover */
+  --color-brand-800: #1B0D4E;  /* text ON the glow button; outline hover      */
+  --color-brand-900: #1E113B;  /* primary button active; secondary fill       */
+  --color-brand-950: #0A0A0B;  /* THE PAGE — a neutral black kept in the
+                                  brand ramp; see WEBSITE-REVIEW.md sect. 5   */
+
+  /* ---- Gray ---- */
+  --color-gray-50:   #F4F4F6;  /* headings, body text                         */
+  --color-gray-100:  #DCDCE5;
+  --color-gray-200:  #D5D5DD;  /* long-form body copy                         */
+  --color-gray-300:  #C7C7DB;  /* secondary body, lighter                     */
+  --color-gray-400:  #A3A3C2;
+  --color-gray-500:  #9595BB;  /* secondary body, placeholders                */
+  --color-gray-600:  #6B6699;  /* neutral — muted metadata, LARGE TEXT ONLY   */
+  --color-gray-700:  #2B2848;  /* borders / quaternary surface                */
+  --color-gray-800:  #232339;  /* surface hover                               */
+  --color-gray-900:  #1C1C27;  /* tertiary surface                            */
+  --color-gray-950:  #15151E;
+  --color-gray-1000: #050505;  /* one dark section ground ("failureproof")    */
+  --color-gray-1100: #0F0F15;  /* card surface — NOTE: lighter than gray-1000;
+                                  the ramp is non-monotonic past 950          */
+
+  /* ---- Single-use accents (global.css calls them "once used") ---- */
+  --color-glow-25:    #9980FF; /* GLOW BUTTON FILL (takes dark text)          */
+  --color-shadow-0:   #281470; /* the upward section glow                     */
+  --color-progress-0: #8252FC; /* gradient mid — .rule / .progress            */
+
+  /* ---- Technology-card wash — the only place cyan survives ---- */
+  --color-technology-gradient-0:  #077689; /* deep cyan                       */
+  --color-technology-gradient-25: #1A0452;
+  --color-technology-gradient-50: #070312;
+
+  /* ---- Error ramp ---- */
+  --color-error-100: #FE9A9A;
+  --color-error-200: #FE2020;
+  --color-error-300: #B42318;
+  --color-error-400: #CA1400;
+
+  /* =========================================================================
+   * SEMANTIC LAYER — use these. Mapping verbatim from the production @theme.
+   * ====================================================================== */
+  --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); /* long-form copy     */
+  --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-transparent: hsl(from var(--color-surface-primary) h s l / 0.3);
+  --color-surface-primary-hover: var(--color-gray-800);
+  --color-surface-secondary:     var(--color-gray-1100);
+  --color-surface-tertiary:      var(--color-gray-900);
+  --color-surface-quaternary:    var(--color-gray-700);
+
+  --color-failureproof-0:        var(--color-gray-1000);
+  --color-default-transparent:   var(--color-gray-100);
+  --color-error:                 var(--color-error-300);
+
+  /* ---- Brand gradient — violet to near-white, left to right.
+   * The mid stop is the once-used progress accent (#8252FC), NOT brand-300:
+   * the rebuilt ramp's brand-300 (#735CAB) is a different, muted violet. ---- */
+  --gradient-brand: linear-gradient(
+    to right,
+    var(--color-brand-500) 0%,
+    var(--color-progress-0) 60%,
+    var(--color-brand-200) 75%,
+    var(--color-brand-25) 100%
+  );
+
+  /* =========================================================================
+   * TYPOGRAPHY
+   * One family. Named heading sizes come from the production @theme block;
+   * the remaining steps are measured from the live site.
+   * ====================================================================== */
+  --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+               "Liberation Mono", "Courier New", monospace;
+
+  --text-heading-lg: 3.5rem;               /* 56px — hero                   */
+  --text-heading-lg--line-height: 130%;
+  --text-heading-md: 2.75rem;              /* 44px — section heading        */
+  --text-heading-md--line-height: 115%;
+  --text-heading-sm: 2rem;                 /* 32px — eyebrow + lead pair    */
+  --text-heading-sm--line-height: 110%;
+
+  /* Named for the thing, not for a t-shirt size — the same rule as RADIUS
+   * below, and here for the same reason rather than for symmetry.
+   *
+   * These were `--text-lg`, `--text-sm` and `--text-base`, which are ALSO
+   * Tailwind default theme names, at 1.125rem, 0.875rem and 1rem. Tailwind
+   * declares its theme inside `@layer theme` and this file declares in a plain
+   * :root, and unlayered CSS beats any cascade layer regardless of source
+   * order — so the collision was not two declarations racing, it was this file
+   * silently and unconditionally winning. Importing the stylesheet into a
+   * Tailwind app resized every `text-lg` and `text-sm` in it, with no warning
+   * anywhere; codecave.pro alone uses those two utilities 72 times across 37
+   * files. CCWEB2-323.
+   *
+   * The old scale was also offset by one step from Tailwind's, which is what
+   * made it dangerous rather than merely wrong: `--text-caption` is 0.875rem,
+   * exactly Tailwind's `text-sm`. Every value looked plausible.
+   *
+   * `md` stays a size word only because Tailwind has no `--text-md` default.
+   * That is luck, not design, and `npm run check:collisions` is what notices
+   * if it stops being true. */
+  --text-stat:    2.25rem;   /* 36px / 40px — stat figures                  */
+  --text-subhead: 1.5rem;    /* 24px / 32px — subsection heading            */
+  --text-md:      1.25rem;   /* 20px / 28px — intro copy                    */
+  --text-label:   1.125rem;  /* 18px / 28px — names, labels                 */
+  --text-body:    1rem;      /* 16px / 24px — body, buttons                 */
+  --text-caption: 0.875rem;  /* 14px / 20px — captions, form labels         */
+
+  --leading-stat:    2.5rem;
+  --leading-subhead: 2rem;
+  --leading-md:      1.75rem;
+  --leading-label:   1.75rem;
+  --leading-body:    1.5rem;
+  --leading-caption: 1.25rem;
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 700;
+
+  /* =========================================================================
+   * RADIUS — the loudest brand signal. Small corners read as off-brand.
+   * ====================================================================== */
+  /* Named for the thing, not for a t-shirt size. `--radius-sm` / `--radius-md`
+   * are also Tailwind default theme names at DIFFERENT values (0.25rem and
+   * 0.375rem), so a component authored against one system and rendered in the
+   * other silently changed shape — see the checkbox note further down. The
+   * remaining six radii were already semantic; these two were the only ones
+   * that could collide, and now they cannot. */
+  --radius-control-sm:0.25rem;  /*   4px — the 16px checkbox box ONLY       */
+  --radius-control:   0.5rem;   /*   8px — inputs, small chips              */
+  --radius-tile:      0.75rem;  /*  12px — inline chips, icon tiles         */
+  --radius-card:      1.5rem;   /*  24px — DEFAULT card, dominant sitewide  */
+  --radius-article:   2.25rem;  /*  36px — article / insight cards          */
+  --radius-custom:    2.75rem;  /*  44px — feature cards (from @theme)      */
+  --radius-section:   4rem;     /*  64px — section panel, <768px            */
+  --radius-section-md:7.5rem;   /* 120px — section panel, >=768px           */
+  --radius-pill:      9999px;   /* buttons, pills, avatars                  */
+
+  /* =========================================================================
+   * LAYOUT AND RHYTHM
+   * ====================================================================== */
+  --max-width-desktop: 1280px;
+  --breakpoint-sm: 457px;
+
+  --gutter-base: 0.5rem;   /* <768px  */
+  --gutter-md:   1rem;     /* >=768px */
+  --gutter-xl:   2rem;     /* >=1280px */
+
+  --section-padding-top: 12.5rem;   /* 200px */
+  --section-padding-bottom: 7.5rem; /* 120px */
+  --card-padding: 2rem 2rem 3rem;   /* heavier bottom seats a footer action */
+
+  --control-height: 3rem;           /* 48px — every button and pill         */
+  --input-height: 4rem;             /* 64px — floating-label text input     */
+
+  /* =========================================================================
+   * ELEVATION — CODECAVE's light comes from BELOW.
+   * Never substitute a conventional downward drop shadow for --shadow-section.
+   * ====================================================================== */
+  --shadow-section:
+    0 -64px 64px 0 hsl(from var(--color-shadow-0) h s l / 0.20),
+    0 -10px 24px 0 hsl(from var(--color-shadow-0) h s l / 0.10),
+    0 -6px  6px 0 hsl(from var(--color-shadow-0) h s l / 0.08);
+
+  /* The GlowButton's own halo — VERBATIM from common/GlowButton.vue.
+   * These three hues are measured production literals and deliberately are NOT
+   * ramp steps: #7A58FF and #5B34FA sit between the progress accent and the
+ * action violet, and
+   * #4F22FF is bluer than the action violet. Rounding them to the nearest token
+   * visibly changes the halo, which is the brand's most recognisable edge. */
+  --shadow-glow-button:
+    0 0 64px 0 #7A58FFA8,
+    0 0 16px 0 #4F22FFA6,
+    0 0 4px 2px #5B34FA;
+
+  /* Focused input halo (source: common/InputText.vue) */
+  --shadow-input-focus:
+    0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
+    0 0 4px  0 hsl(from var(--color-brand-500) h s l / 0.6);
+  --shadow-input-error:
+    0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+    0 0 4px  0 hsl(from var(--color-error-100) h s l / 0.6);
+
+  --transition-base: 200ms ease;
+  --transition-slow: 500ms ease;
+  /* Tailwind's `transition-colors`, which is what every button in production
+   * actually carries — 150ms, not the 200ms used elsewhere in this file. */
+  --transition-colors: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",
@@ -25,12 +25,26 @@
       "import": "./dist/index.js"
     },
     "./css": "./dist/colors_and_type.css",
+    "./tokens.css": "./dist/tokens.css",
     "./fonts.css": "./dist/fonts.css",
+    "./components/*": "./dist/src/components/*",
+    "./assets/*": "./dist/src/assets/*",
+    "./helpers/*": "./dist/src/helpers/*",
+    "./lib/*": "./dist/src/lib/*",
     "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
+  "peerDependencies": {
+    "gsap": "^3.13.0",
+    "vue": "^3.5.22"
+  },
+  "peerDependenciesMeta": {
+    "gsap": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "node scripts/build.mjs",
     "check": "node scripts/build.mjs --check",