@codecavepro/brand 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +28 -4
  2. package/dist/tokens.css +229 -0
  3. package/package.json +2 -1
package/README.md CHANGED
@@ -43,6 +43,28 @@ That is the whole setup. Every token is now a custom property on `:root`:
43
43
  only so the semantic names have somewhere to point; using them directly is how a
44
44
  redesign turns into a find-and-replace across your codebase.
45
45
 
46
+ ### Already have your own base styles? Import the values only
47
+
48
+ `@codecavepro/brand/css` is the design system **whole**: the tokens, six `@font-face`
49
+ rules, base rules for `html`, `body`, `h1`–`h6` and `a`, two layout primitives and
50
+ around sixty component classes. That is what you want for a page that should look like
51
+ CODECAVE. It is *not* what you want in an app that already has a base layer — dropping
52
+ it in restyles every heading and link you have.
53
+
54
+ For that case there is a second stylesheet holding the custom properties and nothing
55
+ else:
56
+
57
+ ```css
58
+ @import "@codecavepro/brand/tokens.css";
59
+ ```
60
+
61
+ Same 102 properties on `:root`, same values, zero rules. Nothing it declares can change
62
+ how a single existing element renders — a `var()` only takes effect where you write
63
+ one. Fonts come with it only as a *name*: `--font-sans` says Satoshi, and declaring the
64
+ faces stays your call (see below).
65
+
66
+ Use it to end a duplicated palette without signing up for a redesign in the same commit.
67
+
46
68
  ### No build step, if you prefer
47
69
 
48
70
  The same file is served, byte for byte, from the published design system:
@@ -69,6 +91,7 @@ dropped into a project on its own:
69
91
  |---|---|---|
70
92
  | `@codecavepro/brand/css` | `./fonts/Satoshi-*.woff2` | a `fonts/` directory **beside** the stylesheet |
71
93
  | `@codecavepro/brand/fonts.css` | `./Satoshi-*.woff2` | **beside** the stylesheet itself |
94
+ | `@codecavepro/brand/tokens.css` | *none — it declares no faces* | wherever your own `@font-face` rules point |
72
95
 
73
96
  Get the cuts from [Fontshare](https://www.fontshare.com/fonts/satoshi) — Light 300,
74
97
  Regular 400, Italic, Medium 500, Bold 700, Black 900. Bind each with a real
@@ -141,10 +164,11 @@ the rules, the reasoning, the anti-patterns — is documented separately:
141
164
 
142
165
  ## How this package is built
143
166
 
144
- It authors nothing. Every byte is copied or compiled out of `docs/` in the repository
145
- above: the CSS is copied verbatim, and the typed module is compiled from
146
- `docs/tokens/*.ts`. `docs/` stays the single origin, and CI asserts the byte-identity
147
- on every push.
167
+ It authors nothing. Every byte is copied, extracted or compiled out of `docs/` in the
168
+ repository above: `css` and `fonts.css` are copied verbatim, `tokens.css` is extracted
169
+ from the same file `css` is copied from, and the typed module is compiled from
170
+ `docs/tokens/*.ts`. `docs/` stays the single origin, and CI asserts on every push that
171
+ the copies are byte-identical and the extraction still reproduces what shipped.
148
172
 
149
173
  Two editable copies of a palette is the exact failure this package exists to end, so it
150
174
  would be self-defeating to introduce a second one on the way there. **Fixes go to
package/dist/tokens.css ADDED
@@ -0,0 +1,229 @@
1
+ /* ==========================================================================
2
+ * CODECAVE design tokens — @codecavepro/brand/tokens.css
3
+ * --------------------------------------------------------------------------
4
+ * GENERATED from docs/colors_and_type.css — do not edit.
5
+ *
6
+ * The custom properties and nothing else: no @font-face, no rules for html,
7
+ * body, headings or links, no layout primitives, no components. Import this
8
+ * into an app that already has a base layer of its own and wants CODECAVE's
9
+ * values; import "@codecavepro/brand/css" to get the design system whole.
10
+ *
11
+ * Fonts are a separate concern here by design: --font-sans names Satoshi and
12
+ * supplying the faces is the consuming app's job.
13
+ * ======================================================================== */
14
+
15
+ :root {
16
+ /* =========================================================================
17
+ * RAW RAMPS — verbatim from global.css :root after the 2026 palette
18
+ * rebuild. A violet brand ramp, a gray ramp, and single-use accents.
19
+ * Do not consume directly except where noted (glow-25 is the glow-button
20
+ * fill; progress-0 is the gradient mid; shadow-0 seeds the section glow).
21
+ * ====================================================================== */
22
+
23
+ /* ---- Brand (violet) ---- */
24
+ --color-brand-25: #E8E6F0; /* near-white tint — gradient endpoint */
25
+ --color-brand-50: #BBB9CB;
26
+ --color-brand-100: #B8AFDB;
27
+ --color-brand-200: #B19AFE; /* hover foreground */
28
+ --color-brand-300: #735CAB;
29
+ --color-brand-400: #5F3ABD; /* feature-card ring mid-stop (was cyan) */
30
+ --color-brand-500: #5F20FE; /* ACTION — links, borders, eyebrows */
31
+ --color-brand-600: #4705ED;
32
+ --color-brand-700: #4004AF; /* primary button hover; tertiary border hover */
33
+ --color-brand-800: #1B0D4E; /* text ON the glow button; outline hover */
34
+ --color-brand-900: #1E113B; /* primary button active; secondary fill */
35
+ --color-brand-950: #0A0A0B; /* THE PAGE — a neutral black kept in the
36
+ brand ramp; see WEBSITE-REVIEW.md sect. 5 */
37
+
38
+ /* ---- Gray ---- */
39
+ --color-gray-50: #F4F4F6; /* headings, body text */
40
+ --color-gray-100: #DCDCE5;
41
+ --color-gray-200: #D5D5DD; /* long-form body copy */
42
+ --color-gray-300: #C7C7DB; /* secondary body, lighter */
43
+ --color-gray-400: #A3A3C2;
44
+ --color-gray-500: #9595BB; /* secondary body, placeholders */
45
+ --color-gray-600: #6B6699; /* neutral — muted metadata, LARGE TEXT ONLY */
46
+ --color-gray-700: #2B2848; /* borders / quaternary surface */
47
+ --color-gray-800: #232339; /* surface hover */
48
+ --color-gray-900: #1C1C27; /* tertiary surface */
49
+ --color-gray-950: #15151E;
50
+ --color-gray-1000: #050505; /* one dark section ground ("failureproof") */
51
+ --color-gray-1100: #0F0F15; /* card surface — NOTE: lighter than gray-1000;
52
+ the ramp is non-monotonic past 950 */
53
+
54
+ /* ---- Single-use accents (global.css calls them "once used") ---- */
55
+ --color-glow-25: #9980FF; /* GLOW BUTTON FILL (takes dark text) */
56
+ --color-shadow-0: #281470; /* the upward section glow */
57
+ --color-progress-0: #8252FC; /* gradient mid — .rule / .progress */
58
+
59
+ /* ---- Technology-card wash — the only place cyan survives ---- */
60
+ --color-technology-gradient-0: #077689; /* deep cyan */
61
+ --color-technology-gradient-25: #1A0452;
62
+ --color-technology-gradient-50: #070312;
63
+
64
+ /* ---- Error ramp ---- */
65
+ --color-error-100: #FE9A9A;
66
+ --color-error-200: #FE2020;
67
+ --color-error-300: #B42318;
68
+ --color-error-400: #CA1400;
69
+
70
+ /* =========================================================================
71
+ * SEMANTIC LAYER — use these. Mapping verbatim from the production @theme.
72
+ * ====================================================================== */
73
+ --color-heading: var(--color-gray-50);
74
+ --color-action: var(--color-brand-500);
75
+ --color-neutral: var(--color-gray-600);
76
+ --color-hovered: var(--color-brand-200);
77
+ --color-outline-primary-hover: var(--color-brand-800);
78
+
79
+ --color-body-primary: var(--color-gray-50);
80
+ --color-text-body-primary: var(--color-gray-200); /* long-form copy */
81
+ --color-body-secondary: var(--color-gray-500);
82
+ --color-body-secondary-lighter:var(--color-gray-300);
83
+
84
+ --color-surface-primary: var(--color-brand-950);
85
+ --color-surface-primary-transparent: hsl(from var(--color-surface-primary) h s l / 0.3);
86
+ --color-surface-primary-hover: var(--color-gray-800);
87
+ --color-surface-secondary: var(--color-gray-1100);
88
+ --color-surface-tertiary: var(--color-gray-900);
89
+ --color-surface-quaternary: var(--color-gray-700);
90
+
91
+ --color-failureproof-0: var(--color-gray-1000);
92
+ --color-default-transparent: var(--color-gray-100);
93
+ --color-error: var(--color-error-300);
94
+
95
+ /* ---- Brand gradient — violet to near-white, left to right.
96
+ * The mid stop is the once-used progress accent (#8252FC), NOT brand-300:
97
+ * the rebuilt ramp's brand-300 (#735CAB) is a different, muted violet. ---- */
98
+ --gradient-brand: linear-gradient(
99
+ to right,
100
+ var(--color-brand-500) 0%,
101
+ var(--color-progress-0) 60%,
102
+ var(--color-brand-200) 75%,
103
+ var(--color-brand-25) 100%
104
+ );
105
+
106
+ /* =========================================================================
107
+ * TYPOGRAPHY
108
+ * One family. Named heading sizes come from the production @theme block;
109
+ * the remaining steps are measured from the live site.
110
+ * ====================================================================== */
111
+ --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
112
+ "Helvetica Neue", "Noto Sans", Arial, sans-serif;
113
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
114
+ "Liberation Mono", "Courier New", monospace;
115
+
116
+ --text-heading-lg: 3.5rem; /* 56px — hero */
117
+ --text-heading-lg--line-height: 130%;
118
+ --text-heading-md: 2.75rem; /* 44px — section heading */
119
+ --text-heading-md--line-height: 115%;
120
+ --text-heading-sm: 2rem; /* 32px — eyebrow + lead pair */
121
+ --text-heading-sm--line-height: 110%;
122
+
123
+ /* Named for the thing, not for a t-shirt size — the same rule as RADIUS
124
+ * below, and here for the same reason rather than for symmetry.
125
+ *
126
+ * These were `--text-lg`, `--text-sm` and `--text-base`, which are ALSO
127
+ * Tailwind default theme names, at 1.125rem, 0.875rem and 1rem. Tailwind
128
+ * declares its theme inside `@layer theme` and this file declares in a plain
129
+ * :root, and unlayered CSS beats any cascade layer regardless of source
130
+ * order — so the collision was not two declarations racing, it was this file
131
+ * silently and unconditionally winning. Importing the stylesheet into a
132
+ * Tailwind app resized every `text-lg` and `text-sm` in it, with no warning
133
+ * anywhere; codecave.pro alone uses those two utilities 72 times across 37
134
+ * files. CCWEB2-323.
135
+ *
136
+ * The old scale was also offset by one step from Tailwind's, which is what
137
+ * made it dangerous rather than merely wrong: `--text-caption` is 0.875rem,
138
+ * exactly Tailwind's `text-sm`. Every value looked plausible.
139
+ *
140
+ * `md` stays a size word only because Tailwind has no `--text-md` default.
141
+ * That is luck, not design, and `npm run check:collisions` is what notices
142
+ * if it stops being true. */
143
+ --text-stat: 2.25rem; /* 36px / 40px — stat figures */
144
+ --text-subhead: 1.5rem; /* 24px / 32px — subsection heading */
145
+ --text-md: 1.25rem; /* 20px / 28px — intro copy */
146
+ --text-label: 1.125rem; /* 18px / 28px — names, labels */
147
+ --text-body: 1rem; /* 16px / 24px — body, buttons */
148
+ --text-caption: 0.875rem; /* 14px / 20px — captions, form labels */
149
+
150
+ --leading-stat: 2.5rem;
151
+ --leading-subhead: 2rem;
152
+ --leading-md: 1.75rem;
153
+ --leading-label: 1.75rem;
154
+ --leading-body: 1.5rem;
155
+ --leading-caption: 1.25rem;
156
+
157
+ --font-weight-regular: 400;
158
+ --font-weight-bold: 700;
159
+
160
+ /* =========================================================================
161
+ * RADIUS — the loudest brand signal. Small corners read as off-brand.
162
+ * ====================================================================== */
163
+ /* Named for the thing, not for a t-shirt size. `--radius-sm` / `--radius-md`
164
+ * are also Tailwind default theme names at DIFFERENT values (0.25rem and
165
+ * 0.375rem), so a component authored against one system and rendered in the
166
+ * other silently changed shape — see the checkbox note further down. The
167
+ * remaining six radii were already semantic; these two were the only ones
168
+ * that could collide, and now they cannot. */
169
+ --radius-control-sm:0.25rem; /* 4px — the 16px checkbox box ONLY */
170
+ --radius-control: 0.5rem; /* 8px — inputs, small chips */
171
+ --radius-tile: 0.75rem; /* 12px — inline chips, icon tiles */
172
+ --radius-card: 1.5rem; /* 24px — DEFAULT card, dominant sitewide */
173
+ --radius-article: 2.25rem; /* 36px — article / insight cards */
174
+ --radius-custom: 2.75rem; /* 44px — feature cards (from @theme) */
175
+ --radius-section: 4rem; /* 64px — section panel, <768px */
176
+ --radius-section-md:7.5rem; /* 120px — section panel, >=768px */
177
+ --radius-pill: 9999px; /* buttons, pills, avatars */
178
+
179
+ /* =========================================================================
180
+ * LAYOUT AND RHYTHM
181
+ * ====================================================================== */
182
+ --max-width-desktop: 1280px;
183
+ --breakpoint-sm: 457px;
184
+
185
+ --gutter-base: 0.5rem; /* <768px */
186
+ --gutter-md: 1rem; /* >=768px */
187
+ --gutter-xl: 2rem; /* >=1280px */
188
+
189
+ --section-padding-top: 12.5rem; /* 200px */
190
+ --section-padding-bottom: 7.5rem; /* 120px */
191
+ --card-padding: 2rem 2rem 3rem; /* heavier bottom seats a footer action */
192
+
193
+ --control-height: 3rem; /* 48px — every button and pill */
194
+ --input-height: 4rem; /* 64px — floating-label text input */
195
+
196
+ /* =========================================================================
197
+ * ELEVATION — CODECAVE's light comes from BELOW.
198
+ * Never substitute a conventional downward drop shadow for --shadow-section.
199
+ * ====================================================================== */
200
+ --shadow-section:
201
+ 0 -64px 64px 0 hsl(from var(--color-shadow-0) h s l / 0.20),
202
+ 0 -10px 24px 0 hsl(from var(--color-shadow-0) h s l / 0.10),
203
+ 0 -6px 6px 0 hsl(from var(--color-shadow-0) h s l / 0.08);
204
+
205
+ /* The GlowButton's own halo — VERBATIM from common/GlowButton.vue.
206
+ * These three hues are measured production literals and deliberately are NOT
207
+ * ramp steps: #7A58FF and #5B34FA sit between the progress accent and the
208
+ * action violet, and
209
+ * #4F22FF is bluer than the action violet. Rounding them to the nearest token
210
+ * visibly changes the halo, which is the brand's most recognisable edge. */
211
+ --shadow-glow-button:
212
+ 0 0 64px 0 #7A58FFA8,
213
+ 0 0 16px 0 #4F22FFA6,
214
+ 0 0 4px 2px #5B34FA;
215
+
216
+ /* Focused input halo (source: common/InputText.vue) */
217
+ --shadow-input-focus:
218
+ 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
219
+ 0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.6);
220
+ --shadow-input-error:
221
+ 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
222
+ 0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
223
+
224
+ --transition-base: 200ms ease;
225
+ --transition-slow: 500ms ease;
226
+ /* Tailwind's `transition-colors`, which is what every button in production
227
+ * actually carries — 150ms, not the 200ms used elsewhere in this file. */
228
+ --transition-colors: 150ms cubic-bezier(0.4, 0, 0.2, 1);
229
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codecavepro/brand",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
5
5
  "license": "Unlicense",
6
6
  "type": "module",
@@ -25,6 +25,7 @@
25
25
  "import": "./dist/index.js"
26
26
  },
27
27
  "./css": "./dist/colors_and_type.css",
28
+ "./tokens.css": "./dist/tokens.css",
28
29
  "./fonts.css": "./dist/fonts.css",
29
30
  "./package.json": "./package.json"
30
31
  },