@citron-systems/citron-ds 1.0.1 → 1.0.3

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 (7) hide show
  1. package/README.md +65 -9
  2. package/dist/brand/readme-hero.png +0 -0
  3. package/dist/brand/readme-hero.svg +61 -0
  4. package/dist/bundle/README.md +1 -1
  5. package/dist/bundle/brand/readme-hero.png +0 -0
  6. package/dist/bundle/brand/readme-hero.svg +61 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,9 +1,18 @@
1
- # @citron-systems/citron-ds
1
+ <div align="center">
2
2
 
3
- > Inkblot Studio design token system — Apple-inspired, accessible, AI-ready. The **Citron** design language: warmly minimal, quietly distinctive.
3
+ <img src="assets/brand/readme-hero.png" width="100%" alt="Citron Design System — mascot and wordmark on citron-toned dark background" />
4
4
 
5
- [![npm version](https://img.shields.io/npm/v/@citron-systems/citron-ds.svg)](https://www.npmjs.com/package/@citron-systems/citron-ds)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+ <br />
6
+
7
+ [![npm](https://img.shields.io/npm/v/@citron-systems/citron-ds?style=flat-square&logo=npm&logoColor=white&color=c4a030)](https://www.npmjs.com/package/@citron-systems/citron-ds)
8
+ [![License: MIT](https://img.shields.io/badge/License-MIT-c4a030?style=flat-square)](https://opensource.org/licenses/MIT)
9
+ [![GitHub](https://img.shields.io/badge/repo-Inkblot--Studio%2Fcitron--ds-1a1814?style=flat-square&logo=github&logoColor=f5f0e6)](https://github.com/Inkblot-Studio/citron-ds)
10
+
11
+ **Citron** — Apple-inspired, accessible, AI-ready design tokens. Warmly minimal, quietly distinctive.
12
+
13
+ [Repository](https://github.com/Inkblot-Studio/citron-ds) · [npm package](https://www.npmjs.com/package/@citron-systems/citron-ds)
14
+
15
+ </div>
7
16
 
8
17
  ---
9
18
 
@@ -78,7 +87,7 @@ import tokens from '@citron-systems/citron-ds/tokens';
78
87
 
79
88
  ---
80
89
 
81
- ## Package Exports
90
+ ## Package exports
82
91
 
83
92
  | Import path | Contents |
84
93
  |-------------|----------|
@@ -87,6 +96,44 @@ import tokens from '@citron-systems/citron-ds/tokens';
87
96
  | `@citron-systems/citron-ds/scss` | SCSS variables |
88
97
  | `@citron-systems/citron-ds/tokens` | Flat JSON (resolved values) |
89
98
  | `@citron-systems/citron-ds/ai-reference` | AI agent reference (token map, patterns, rules) |
99
+ | `@citron-systems/citron-ds/brand/citron-mascot.svg` | Citron mascot (full color; optional `--citron-mascot-fill`) |
100
+ | `@citron-systems/citron-ds/brand/citron-mascot-mono.svg` | Mascot lockup (`currentColor`) |
101
+ | `@citron-systems/citron-ds/bundle` | Bundle entry (`dist/bundle/README.md`) |
102
+ | `@citron-systems/citron-ds/bundle/*` | Resolved tokens, CSS/SCSS bundles, system JSON, etc. |
103
+ | `@citron-systems/citron-ds/preview/mascot.html` | Static mascot preview page |
104
+
105
+ ---
106
+
107
+ ## Brand assets
108
+
109
+ Source SVGs live in `assets/brand/`; `npm run build` copies them into `dist/brand/` for publishing. Import from the package as in the table above, or copy from `dist/brand/` in a checkout.
110
+
111
+ | File | Use |
112
+ |------|-----|
113
+ | `citron-mascot.svg` | Full-color mark (`#c4a030` citron **500**) |
114
+ | `citron-mascot-mono.svg` | Single-color / `currentColor` lockups |
115
+ | `readme-hero.svg` | Vector source for the README banner (export to PNG when refreshing art) |
116
+ | `readme-hero.png` | **GitHub README** header (GitHub does not reliably render SVG in `<img>`) |
117
+
118
+ **GitHub (maintainers):** Set **Social preview** (Settings → General) to **`readme-hero.png`** or a **1280×640** crop of the same art. Use `citron-mascot-mono.svg` for the repo or org avatar so the mark stays clear at small sizes.
119
+
120
+ ---
121
+
122
+ ## CLI
123
+
124
+ The **citron-mascot** binary prints the ASCII Citron mascot (with a short color animation in supported terminals).
125
+
126
+ From a project that already depends on this package:
127
+
128
+ ```bash
129
+ npx citron-mascot
130
+ ```
131
+
132
+ One-off without adding a dependency:
133
+
134
+ ```bash
135
+ npx --package=@citron-systems/citron-ds citron-mascot
136
+ ```
90
137
 
91
138
  ---
92
139
 
@@ -100,7 +147,7 @@ import tokens from '@citron-systems/citron-ds/tokens';
100
147
 
101
148
  ---
102
149
 
103
- ## Color Modes
150
+ ## Color modes
104
151
 
105
152
  Light mode is default. Dark mode activates via:
106
153
 
@@ -109,7 +156,7 @@ Light mode is default. Dark mode activates via:
109
156
 
110
157
  ---
111
158
 
112
- ## For AI Agents
159
+ ## For AI agents
113
160
 
114
161
  **Primary reference** (include in context): `@citron-systems/citron-ds/ai-reference`
115
162
 
@@ -135,13 +182,22 @@ Light mode is default. Dark mode activates via:
135
182
  ## Development
136
183
 
137
184
  ```bash
138
- git clone https://github.com/GHDryanovski19/inkblot-studio-design-tokens.git
139
- cd inkblot-studio-design-tokens
185
+ git clone https://github.com/Inkblot-Studio/citron-ds.git
186
+ cd citron-ds
140
187
  npm install
141
188
  npm run build
142
189
  npm run dev # Live preview at localhost:5173
143
190
  ```
144
191
 
192
+ - **`npm run build`** — Style Dictionary outputs plus copy steps for brand assets, mascot preview, and desktop bundle (`dist/`).
193
+ - **`prepublishOnly`** runs `npm run build` before `npm publish`.
194
+
195
+ ### Publish note (maintainers)
196
+
197
+ If you publish with **npm provenance** from GitHub Actions, `package.json` **`repository.url`** must point at the **same** GitHub repository as the workflow (otherwise the registry returns `422` provenance validation errors). Run `npm pkg fix` if npm warns about normalized fields during publish.
198
+
199
+ ---
200
+
145
201
  ## Deploy preview to Vercel
146
202
 
147
203
  1. Push to GitHub and [import the repo](https://vercel.com/new) in Vercel.
package/dist/brand/readme-hero.png ADDED
Binary file
package/dist/brand/readme-hero.svg ADDED
@@ -0,0 +1,61 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" role="img" aria-labelledby="rh-title rh-desc">
2
+ <title id="rh-title">Citron Design System</title>
3
+ <desc id="rh-desc">Citron brand mascot and wordmark on a warm dark background with citron accent.</desc>
4
+ <defs>
5
+ <linearGradient id="rh-bg" x1="0%" y1="0%" x2="100%" y2="100%">
6
+ <stop offset="0%" stop-color="#3d3111"/>
7
+ <stop offset="45%" stop-color="#1a1814"/>
8
+ <stop offset="100%" stop-color="#0c0b09"/>
9
+ </linearGradient>
10
+ <radialGradient id="rh-glow" cx="50%" cy="42%" r="55%">
11
+ <stop offset="0%" stop-color="#c4a030" stop-opacity="0.22"/>
12
+ <stop offset="55%" stop-color="#c4a030" stop-opacity="0.06"/>
13
+ <stop offset="100%" stop-color="#c4a030" stop-opacity="0"/>
14
+ </radialGradient>
15
+ </defs>
16
+ <rect width="1280" height="320" fill="url(#rh-bg)"/>
17
+ <rect width="1280" height="320" fill="url(#rh-glow)"/>
18
+ <rect x="0" y="316" width="1280" height="4" fill="#c4a030"/>
19
+ <g transform="translate(560 28) scale(1.6)">
20
+ <g fill="#c4a030" stroke="none">
21
+ <rect x="31" y="17" width="13" height="34"/>
22
+ <rect x="56" y="17" width="13" height="34"/>
23
+ </g>
24
+ <path
25
+ d="M 12 40 A 38 38 0 0 0 88 40"
26
+ fill="none"
27
+ stroke="#c4a030"
28
+ stroke-width="10"
29
+ stroke-linecap="butt"
30
+ stroke-linejoin="miter"
31
+ />
32
+ </g>
33
+ <text
34
+ x="640"
35
+ y="248"
36
+ text-anchor="middle"
37
+ font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
38
+ font-size="30"
39
+ font-weight="600"
40
+ fill="#f5f0e6"
41
+ letter-spacing="-0.02em"
42
+ >Citron Design System</text>
43
+ <text
44
+ x="640"
45
+ y="282"
46
+ text-anchor="middle"
47
+ font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
48
+ font-size="16"
49
+ font-weight="500"
50
+ fill="#c4a030"
51
+ letter-spacing="0.01em"
52
+ >@citron-systems/citron-ds</text>
53
+ <text
54
+ x="640"
55
+ y="304"
56
+ text-anchor="middle"
57
+ font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
58
+ font-size="13"
59
+ fill="#8a8274"
60
+ >Inkblot Studio � design tokens � AI-ready</text>
61
+ </svg>
package/dist/bundle/README.md CHANGED
@@ -14,7 +14,7 @@ Single folder with design tokens, system metadata, and brand assets. Generated o
14
14
  | `tokens-schema.json` | Present when Style Dictionary emits it. |
15
15
  | `tokens/` | Authoritative DTCG-style source JSON (primitive + semantic). |
16
16
  | `system/` | Extra system JSON (foundations, motion, icons, `cli.json` for terminal/TUI/AI CLIs, etc.). |
17
- | `brand/` | SVG logos / mascot. |
17
+ | `brand/` | Logos / mascot (SVG + PNG readme banner). |
18
18
  | `preview/mascot.html` | Double-click mascot preview in a browser (no server). |
19
19
 
20
20
  ## Rust / Tauri / egui
package/dist/bundle/brand/readme-hero.svg ADDED
@@ -0,0 +1,61 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" role="img" aria-labelledby="rh-title rh-desc">
2
+ <title id="rh-title">Citron Design System</title>
3
+ <desc id="rh-desc">Citron brand mascot and wordmark on a warm dark background with citron accent.</desc>
4
+ <defs>
5
+ <linearGradient id="rh-bg" x1="0%" y1="0%" x2="100%" y2="100%">
6
+ <stop offset="0%" stop-color="#3d3111"/>
7
+ <stop offset="45%" stop-color="#1a1814"/>
8
+ <stop offset="100%" stop-color="#0c0b09"/>
9
+ </linearGradient>
10
+ <radialGradient id="rh-glow" cx="50%" cy="42%" r="55%">
11
+ <stop offset="0%" stop-color="#c4a030" stop-opacity="0.22"/>
12
+ <stop offset="55%" stop-color="#c4a030" stop-opacity="0.06"/>
13
+ <stop offset="100%" stop-color="#c4a030" stop-opacity="0"/>
14
+ </radialGradient>
15
+ </defs>
16
+ <rect width="1280" height="320" fill="url(#rh-bg)"/>
17
+ <rect width="1280" height="320" fill="url(#rh-glow)"/>
18
+ <rect x="0" y="316" width="1280" height="4" fill="#c4a030"/>
19
+ <g transform="translate(560 28) scale(1.6)">
20
+ <g fill="#c4a030" stroke="none">
21
+ <rect x="31" y="17" width="13" height="34"/>
22
+ <rect x="56" y="17" width="13" height="34"/>
23
+ </g>
24
+ <path
25
+ d="M 12 40 A 38 38 0 0 0 88 40"
26
+ fill="none"
27
+ stroke="#c4a030"
28
+ stroke-width="10"
29
+ stroke-linecap="butt"
30
+ stroke-linejoin="miter"
31
+ />
32
+ </g>
33
+ <text
34
+ x="640"
35
+ y="248"
36
+ text-anchor="middle"
37
+ font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
38
+ font-size="30"
39
+ font-weight="600"
40
+ fill="#f5f0e6"
41
+ letter-spacing="-0.02em"
42
+ >Citron Design System</text>
43
+ <text
44
+ x="640"
45
+ y="282"
46
+ text-anchor="middle"
47
+ font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
48
+ font-size="16"
49
+ font-weight="500"
50
+ fill="#c4a030"
51
+ letter-spacing="0.01em"
52
+ >@citron-systems/citron-ds</text>
53
+ <text
54
+ x="640"
55
+ y="304"
56
+ text-anchor="middle"
57
+ font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
58
+ font-size="13"
59
+ fill="#8a8274"
60
+ >Inkblot Studio � design tokens � AI-ready</text>
61
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citron-systems/citron-ds",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Inkblot Studio design token system — Apple-inspired, accessible, AI-ready. Citron design language.",
5
5
  "type": "module",
6
6
  "main": "dist/js/inkblot-tokens.js",