@citron-systems/citron-ds 1.0.1 → 1.0.2
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.
- package/README.md +64 -9
- package/dist/brand/readme-hero.svg +61 -0
- package/dist/bundle/brand/readme-hero.svg +61 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<img src="assets/brand/readme-hero.svg" width="100%" alt="Citron Design System — mascot and wordmark on citron-toned dark background" />
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
<br />
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@citron-systems/citron-ds)
|
|
8
|
+
[](https://opensource.org/licenses/MIT)
|
|
9
|
+
[](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
|
|
90
|
+
## Package exports
|
|
82
91
|
|
|
83
92
|
| Import path | Contents |
|
|
84
93
|
|-------------|----------|
|
|
@@ -87,6 +96,43 @@ 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` | README banner (warm dark + citron accent **900→950**) |
|
|
116
|
+
|
|
117
|
+
**GitHub (maintainers):** Set the repository **Social preview** (Settings → General) to a **1280×640** image exported from `readme-hero.svg` (or a wider crop). Use `citron-mascot-mono.svg` for the repo or org avatar so the mark stays clear at small sizes.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## CLI
|
|
122
|
+
|
|
123
|
+
The **citron-mascot** binary prints the ASCII Citron mascot (with a short color animation in supported terminals).
|
|
124
|
+
|
|
125
|
+
From a project that already depends on this package:
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
npx citron-mascot
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
One-off without adding a dependency:
|
|
132
|
+
|
|
133
|
+
```bash
|
|
134
|
+
npx --package=@citron-systems/citron-ds citron-mascot
|
|
135
|
+
```
|
|
90
136
|
|
|
91
137
|
---
|
|
92
138
|
|
|
@@ -100,7 +146,7 @@ import tokens from '@citron-systems/citron-ds/tokens';
|
|
|
100
146
|
|
|
101
147
|
---
|
|
102
148
|
|
|
103
|
-
## Color
|
|
149
|
+
## Color modes
|
|
104
150
|
|
|
105
151
|
Light mode is default. Dark mode activates via:
|
|
106
152
|
|
|
@@ -109,7 +155,7 @@ Light mode is default. Dark mode activates via:
|
|
|
109
155
|
|
|
110
156
|
---
|
|
111
157
|
|
|
112
|
-
## For AI
|
|
158
|
+
## For AI agents
|
|
113
159
|
|
|
114
160
|
**Primary reference** (include in context): `@citron-systems/citron-ds/ai-reference`
|
|
115
161
|
|
|
@@ -135,13 +181,22 @@ Light mode is default. Dark mode activates via:
|
|
|
135
181
|
## Development
|
|
136
182
|
|
|
137
183
|
```bash
|
|
138
|
-
git clone https://github.com/
|
|
139
|
-
cd
|
|
184
|
+
git clone https://github.com/Inkblot-Studio/citron-ds.git
|
|
185
|
+
cd citron-ds
|
|
140
186
|
npm install
|
|
141
187
|
npm run build
|
|
142
188
|
npm run dev # Live preview at localhost:5173
|
|
143
189
|
```
|
|
144
190
|
|
|
191
|
+
- **`npm run build`** — Style Dictionary outputs plus copy steps for brand assets, mascot preview, and desktop bundle (`dist/`).
|
|
192
|
+
- **`prepublishOnly`** runs `npm run build` before `npm publish`.
|
|
193
|
+
|
|
194
|
+
### Publish note (maintainers)
|
|
195
|
+
|
|
196
|
+
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.
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
145
200
|
## Deploy preview to Vercel
|
|
146
201
|
|
|
147
202
|
1. Push to GitHub and [import the repo](https://vercel.com/new) in Vercel.
|
|
@@ -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>
|
|
@@ -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