@citron-systems/citron-ds 1.0.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 (20) hide show
  1. package/README.md +149 -0
  2. package/dist/ai/inkblot-ai-reference.json +570 -0
  3. package/dist/ai/inkblot-tokens-resolved.json +199 -0
  4. package/dist/ai/inkblot-tokens-schema.json +54 -0
  5. package/dist/css/inkblot-variables.css +203 -0
  6. package/dist/js/inkblot-tokens.js +264 -0
  7. package/dist/js/inkblot-tokens.json +199 -0
  8. package/dist/scss/_inkblot-variables.scss +200 -0
  9. package/package.json +61 -0
  10. package/tokens/primitive/breakpoint.tokens.json +14 -0
  11. package/tokens/primitive/color.tokens.json +71 -0
  12. package/tokens/primitive/duration.tokens.json +38 -0
  13. package/tokens/primitive/grid.tokens.json +34 -0
  14. package/tokens/primitive/radius.tokens.json +26 -0
  15. package/tokens/primitive/shadow.tokens.json +41 -0
  16. package/tokens/primitive/spacing.tokens.json +38 -0
  17. package/tokens/primitive/typography.tokens.json +60 -0
  18. package/tokens/primitive/zindex.tokens.json +19 -0
  19. package/tokens/semantic/dark.tokens.json +43 -0
  20. package/tokens/semantic/inkblot.semantic.tokens.json +140 -0
package/README.md ADDED
@@ -0,0 +1,149 @@
1
+ # @citron-systems/citron-ds
2
+
3
+ > Inkblot Studio design token system — Apple-inspired, accessible, AI-ready. The **Citron** design language: warmly minimal, quietly distinctive.
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)
7
+
8
+ ---
9
+
10
+ ## Install
11
+
12
+ ```bash
13
+ npm install @citron-systems/citron-ds
14
+ ```
15
+
16
+ ### CDN (no build step)
17
+
18
+ ```html
19
+ <link rel="stylesheet" href="https://unpkg.com/@citron-systems/citron-ds/dist/css/inkblot-variables.css">
20
+ ```
21
+
22
+ ---
23
+
24
+ ## Quick Start
25
+
26
+ ### CSS (recommended)
27
+
28
+ ```css
29
+ @import '@citron-systems/citron-ds/css';
30
+
31
+ .button {
32
+ background: var(--inkblot-semantic-color-interactive-primary);
33
+ color: var(--inkblot-semantic-color-text-inverse);
34
+ padding: var(--inkblot-spacing-3) var(--inkblot-spacing-6);
35
+ border-radius: var(--inkblot-radius-lg);
36
+ font-weight: var(--inkblot-typography-font-weight-medium);
37
+ min-height: var(--inkblot-size-touch-target-min);
38
+ transition: all var(--inkblot-duration-fast) var(--inkblot-easing-default);
39
+ }
40
+ ```
41
+
42
+ ### SCSS
43
+
44
+ ```scss
45
+ @use '@citron-systems/citron-ds/scss' as *;
46
+
47
+ .card {
48
+ background: var(--inkblot-semantic-color-background-secondary);
49
+ border: 1px solid var(--inkblot-semantic-color-border-default);
50
+ border-radius: var(--inkblot-radius-xl);
51
+ padding: var(--inkblot-spacing-6);
52
+ }
53
+ ```
54
+
55
+ ### JavaScript / ESM
56
+
57
+ ```javascript
58
+ import {
59
+ InkblotColorAccentCitron500,
60
+ InkblotSpacing4,
61
+ InkblotRadiusLg,
62
+ } from '@citron-systems/citron-ds';
63
+
64
+ // Use in JS-driven styling (e.g. React inline, Canvas, etc.)
65
+ const styles = {
66
+ backgroundColor: InkblotColorAccentCitron500,
67
+ padding: InkblotSpacing4,
68
+ borderRadius: InkblotRadiusLg,
69
+ };
70
+ ```
71
+
72
+ ### JSON (for tooling, build scripts, AI)
73
+
74
+ ```javascript
75
+ import tokens from '@citron-systems/citron-ds/tokens';
76
+ // Flat resolved values: { "inkblot.color.accent.citron.500": "#c4a030", ... }
77
+ ```
78
+
79
+ ---
80
+
81
+ ## Package Exports
82
+
83
+ | Import path | Contents |
84
+ |-------------|----------|
85
+ | `@citron-systems/citron-ds` | ESM JS tokens (default) |
86
+ | `@citron-systems/citron-ds/css` | CSS variables (`:root`) |
87
+ | `@citron-systems/citron-ds/scss` | SCSS variables |
88
+ | `@citron-systems/citron-ds/tokens` | Flat JSON (resolved values) |
89
+ | `@citron-systems/citron-ds/ai-reference` | AI agent reference (token map, patterns, rules) |
90
+
91
+ ---
92
+
93
+ ## Principles
94
+
95
+ - **Radical Clarity** — One correct interpretation per rule. No ambiguity.
96
+ - **Composable Independence** — Every component is self-contained and works in isolation.
97
+ - **Universal Access** — WCAG AAA. 7:1 contrast. 44px touch targets. Full keyboard nav.
98
+ - **AI-First** — Every token, component, and rule is machine-parseable JSON.
99
+ - **Deliberate Restraint** — Minimum visual complexity. Every element earns its place.
100
+
101
+ ---
102
+
103
+ ## Color Modes
104
+
105
+ Light mode is default. Dark mode activates via:
106
+
107
+ - `[data-theme="dark"]` on a parent element, or
108
+ - `prefers-color-scheme: dark` (system preference)
109
+
110
+ ---
111
+
112
+ ## For AI Agents
113
+
114
+ **Primary reference** (include in context): `@citron-systems/citron-ds/ai-reference`
115
+
116
+ - CSS variable map for all semantic tokens
117
+ - Composite patterns (form, card, modal, table, list item)
118
+ - Breakpoints, grid, easing (in CSS format)
119
+ - Icon semantics, CSS snippets, component spacing
120
+ - Validation and ARIA patterns
121
+
122
+ **Rule**: Always use semantic tokens (`var(--inkblot-semantic-color-*)`), never primitives.
123
+
124
+ ---
125
+
126
+ ## Standards
127
+
128
+ - **Tokens**: [W3C Design Tokens Community Group](https://www.designtokens.org/)
129
+ - **Build**: [Style Dictionary](https://styledictionary.com/) v4
130
+ - **Accessibility**: WCAG 2.2 AAA
131
+ - **Contrast**: 7:1 normal text, 4.5:1 large text, 3:1 UI components
132
+
133
+ ---
134
+
135
+ ## Development
136
+
137
+ ```bash
138
+ git clone https://github.com/GHDryanovski19/inkblot-studio-design-tokens.git
139
+ cd inkblot-studio-design-tokens
140
+ npm install
141
+ npm run build
142
+ npm run dev # Live preview at localhost:5173
143
+ ```
144
+
145
+ ---
146
+
147
+ ## License
148
+
149
+ MIT © Inkblot Studio