@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.
- package/README.md +149 -0
- package/dist/ai/inkblot-ai-reference.json +570 -0
- package/dist/ai/inkblot-tokens-resolved.json +199 -0
- package/dist/ai/inkblot-tokens-schema.json +54 -0
- package/dist/css/inkblot-variables.css +203 -0
- package/dist/js/inkblot-tokens.js +264 -0
- package/dist/js/inkblot-tokens.json +199 -0
- package/dist/scss/_inkblot-variables.scss +200 -0
- package/package.json +61 -0
- package/tokens/primitive/breakpoint.tokens.json +14 -0
- package/tokens/primitive/color.tokens.json +71 -0
- package/tokens/primitive/duration.tokens.json +38 -0
- package/tokens/primitive/grid.tokens.json +34 -0
- package/tokens/primitive/radius.tokens.json +26 -0
- package/tokens/primitive/shadow.tokens.json +41 -0
- package/tokens/primitive/spacing.tokens.json +38 -0
- package/tokens/primitive/typography.tokens.json +60 -0
- package/tokens/primitive/zindex.tokens.json +19 -0
- package/tokens/semantic/dark.tokens.json +43 -0
- package/tokens/semantic/inkblot.semantic.tokens.json +140 -0
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Citron dark mode overrides. Warm dark surfaces — never cold blue-black. Apply via [data-theme='dark'].",
|
|
3
|
+
"inkblot": {
|
|
4
|
+
"dark": {
|
|
5
|
+
"color": {
|
|
6
|
+
"$type": "color",
|
|
7
|
+
"$description": "Dark mode — warm-tinted blacks, elevated citron accent for contrast",
|
|
8
|
+
"background": {
|
|
9
|
+
"primary": { "$value": "#12110e", "$description": "Deep warm black, not pure black" },
|
|
10
|
+
"secondary": { "$value": "#1d1c18", "$description": "Elevated warm surface" },
|
|
11
|
+
"tertiary": { "$value": "#2a2924", "$description": "Grouped content, inset" },
|
|
12
|
+
"inverse": { "$value": "#fafaf7", "$description": "Inverted to warm off-white" }
|
|
13
|
+
},
|
|
14
|
+
"text": {
|
|
15
|
+
"primary": { "$value": "#f5f4f0", "$description": "Warm off-white text" },
|
|
16
|
+
"secondary": { "$value": "#93928a", "$description": "Warm muted text" },
|
|
17
|
+
"tertiary": { "$value": "#6b6a63", "$description": "Placeholder, hints" },
|
|
18
|
+
"inverse": { "$value": "#1d1c19", "$description": "Dark text on light" },
|
|
19
|
+
"link": { "$value": "#d9bc58", "$description": "Citron 400 — bright enough for dark bg" },
|
|
20
|
+
"linkHover": { "$value": "#e8d38a", "$description": "Citron 300 — lighter on hover" }
|
|
21
|
+
},
|
|
22
|
+
"border": {
|
|
23
|
+
"default": { "$value": "#38372f", "$description": "Warm subtle border" },
|
|
24
|
+
"strong": { "$value": "#4d4c44", "$description": "Emphasized warm border" },
|
|
25
|
+
"focus": { "$value": "#d9bc58", "$description": "Focus ring — bright citron" }
|
|
26
|
+
},
|
|
27
|
+
"interactive": {
|
|
28
|
+
"primary": { "$value": "#d9bc58", "$description": "Citron 400 — lighter for dark mode contrast" },
|
|
29
|
+
"primaryHover": { "$value": "#e8d38a", "$description": "Citron 300 — warm glow on hover" },
|
|
30
|
+
"primaryActive": { "$value": "#c4a030", "$description": "Citron 500 — anchor on press" },
|
|
31
|
+
"secondary": { "$value": "#2a2924", "$description": "Warm dark secondary" },
|
|
32
|
+
"secondaryHover":{ "$value": "#38372f", "$description": "Warm dark hover" }
|
|
33
|
+
},
|
|
34
|
+
"status": {
|
|
35
|
+
"success": { "$value": "#4cb864", "$description": "Bright warm green on dark" },
|
|
36
|
+
"warning": { "$value": "#e0a020", "$description": "Warm amber on dark" },
|
|
37
|
+
"error": { "$value": "#e05a52", "$description": "Warm red on dark" },
|
|
38
|
+
"info": { "$value": "#7ab8d6", "$description": "Soft warm blue on dark" }
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Citron semantic tokens. Map primitives to component-ready meanings. Use these in components — never raw primitives.",
|
|
3
|
+
"inkblot": {
|
|
4
|
+
"semantic": {
|
|
5
|
+
"color": {
|
|
6
|
+
"$type": "color",
|
|
7
|
+
"$description": "Semantic color mappings — Citron identity: warm, restrained, premium",
|
|
8
|
+
"background": {
|
|
9
|
+
"primary": { "$value": "{inkblot.color.neutral.gray.50}", "$description": "Body background — warm off-white with barely perceptible beige" },
|
|
10
|
+
"secondary": { "$value": "{inkblot.color.neutral.white}", "$description": "Elevated surfaces — clean white floating above base" },
|
|
11
|
+
"tertiary": { "$value": "{inkblot.color.neutral.gray.100}", "$description": "Grouped content, inset areas" },
|
|
12
|
+
"inverse": { "$value": "{inkblot.color.neutral.gray.900}", "$description": "Inverted surfaces" }
|
|
13
|
+
},
|
|
14
|
+
"text": {
|
|
15
|
+
"primary": { "$value": "{inkblot.color.neutral.gray.900}", "$description": "Primary text — deep warm slate, never pure black" },
|
|
16
|
+
"secondary": { "$value": "{inkblot.color.neutral.gray.500}", "$description": "Secondary text" },
|
|
17
|
+
"tertiary": { "$value": "{inkblot.color.neutral.gray.400}", "$description": "Placeholder, hints, captions" },
|
|
18
|
+
"inverse": { "$value": "{inkblot.color.neutral.white}", "$description": "Text on dark surfaces" },
|
|
19
|
+
"link": { "$value": "{inkblot.color.accent.citron.600}", "$description": "Links — deep citron for readability" },
|
|
20
|
+
"linkHover": { "$value": "{inkblot.color.accent.citron.700}", "$description": "Link hover" }
|
|
21
|
+
},
|
|
22
|
+
"border": {
|
|
23
|
+
"default": { "$value": "{inkblot.color.neutral.gray.200}", "$description": "Subtle warm dividers" },
|
|
24
|
+
"strong": { "$value": "{inkblot.color.neutral.gray.300}", "$description": "Emphasized borders" },
|
|
25
|
+
"focus": { "$value": "{inkblot.color.accent.citron.500}", "$description": "Focus ring — citron accent" }
|
|
26
|
+
},
|
|
27
|
+
"interactive": {
|
|
28
|
+
"primary": { "$value": "{inkblot.color.accent.citron.500}", "$description": "Primary CTA — confident citron" },
|
|
29
|
+
"primaryHover": { "$value": "{inkblot.color.accent.citron.600}", "$description": "Primary hover — deeper, subtle shift" },
|
|
30
|
+
"primaryActive": { "$value": "{inkblot.color.accent.citron.700}", "$description": "Primary pressed" },
|
|
31
|
+
"secondary": { "$value": "{inkblot.color.neutral.gray.100}", "$description": "Secondary surfaces with subtle depth" },
|
|
32
|
+
"secondaryHover":{ "$value": "{inkblot.color.neutral.gray.200}", "$description": "Secondary hover" }
|
|
33
|
+
},
|
|
34
|
+
"status": {
|
|
35
|
+
"success": { "$value": "{inkblot.color.semantic.success.main}", "$description": "Success state" },
|
|
36
|
+
"warning": { "$value": "{inkblot.color.semantic.warning.main}", "$description": "Warning state" },
|
|
37
|
+
"error": { "$value": "{inkblot.color.semantic.error.main}", "$description": "Error state" },
|
|
38
|
+
"info": { "$value": "{inkblot.color.semantic.info.main}", "$description": "Info state" }
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"typography": {
|
|
42
|
+
"$description": "Semantic type styles — composed, intentional hierarchy through spacing and weight",
|
|
43
|
+
"heading": {
|
|
44
|
+
"1": {
|
|
45
|
+
"$type": "typography",
|
|
46
|
+
"$value": {
|
|
47
|
+
"fontFamily": "{inkblot.typography.fontFamily.display}",
|
|
48
|
+
"fontSize": "{inkblot.typography.fontSize.3xl}",
|
|
49
|
+
"fontWeight": "{inkblot.typography.fontWeight.semibold}",
|
|
50
|
+
"lineHeight": "{inkblot.typography.lineHeight.tight}",
|
|
51
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.tight}"
|
|
52
|
+
},
|
|
53
|
+
"$description": "Page title — composed, not dramatic"
|
|
54
|
+
},
|
|
55
|
+
"2": {
|
|
56
|
+
"$type": "typography",
|
|
57
|
+
"$value": {
|
|
58
|
+
"fontFamily": "{inkblot.typography.fontFamily.display}",
|
|
59
|
+
"fontSize": "{inkblot.typography.fontSize.2xl}",
|
|
60
|
+
"fontWeight": "{inkblot.typography.fontWeight.semibold}",
|
|
61
|
+
"lineHeight": "{inkblot.typography.lineHeight.tight}",
|
|
62
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.tight}"
|
|
63
|
+
},
|
|
64
|
+
"$description": "Section title"
|
|
65
|
+
},
|
|
66
|
+
"3": {
|
|
67
|
+
"$type": "typography",
|
|
68
|
+
"$value": {
|
|
69
|
+
"fontFamily": "{inkblot.typography.fontFamily.sans}",
|
|
70
|
+
"fontSize": "{inkblot.typography.fontSize.xl}",
|
|
71
|
+
"fontWeight": "{inkblot.typography.fontWeight.medium}",
|
|
72
|
+
"lineHeight": "{inkblot.typography.lineHeight.snug}",
|
|
73
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.normal}"
|
|
74
|
+
},
|
|
75
|
+
"$description": "Subsection title"
|
|
76
|
+
},
|
|
77
|
+
"4": {
|
|
78
|
+
"$type": "typography",
|
|
79
|
+
"$value": {
|
|
80
|
+
"fontFamily": "{inkblot.typography.fontFamily.sans}",
|
|
81
|
+
"fontSize": "{inkblot.typography.fontSize.lg}",
|
|
82
|
+
"fontWeight": "{inkblot.typography.fontWeight.medium}",
|
|
83
|
+
"lineHeight": "{inkblot.typography.lineHeight.snug}",
|
|
84
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.normal}"
|
|
85
|
+
},
|
|
86
|
+
"$description": "Card title"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
"body": {
|
|
90
|
+
"default": {
|
|
91
|
+
"$type": "typography",
|
|
92
|
+
"$value": {
|
|
93
|
+
"fontFamily": "{inkblot.typography.fontFamily.sans}",
|
|
94
|
+
"fontSize": "{inkblot.typography.fontSize.base}",
|
|
95
|
+
"fontWeight": "{inkblot.typography.fontWeight.regular}",
|
|
96
|
+
"lineHeight": "{inkblot.typography.lineHeight.normal}",
|
|
97
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.normal}"
|
|
98
|
+
},
|
|
99
|
+
"$description": "Body text"
|
|
100
|
+
},
|
|
101
|
+
"small": {
|
|
102
|
+
"$type": "typography",
|
|
103
|
+
"$value": {
|
|
104
|
+
"fontFamily": "{inkblot.typography.fontFamily.sans}",
|
|
105
|
+
"fontSize": "{inkblot.typography.fontSize.sm}",
|
|
106
|
+
"fontWeight": "{inkblot.typography.fontWeight.regular}",
|
|
107
|
+
"lineHeight": "{inkblot.typography.lineHeight.normal}",
|
|
108
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.normal}"
|
|
109
|
+
},
|
|
110
|
+
"$description": "Small body, captions"
|
|
111
|
+
},
|
|
112
|
+
"large": {
|
|
113
|
+
"$type": "typography",
|
|
114
|
+
"$value": {
|
|
115
|
+
"fontFamily": "{inkblot.typography.fontFamily.sans}",
|
|
116
|
+
"fontSize": "{inkblot.typography.fontSize.md}",
|
|
117
|
+
"fontWeight": "{inkblot.typography.fontWeight.regular}",
|
|
118
|
+
"lineHeight": "{inkblot.typography.lineHeight.relaxed}",
|
|
119
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.normal}"
|
|
120
|
+
},
|
|
121
|
+
"$description": "Emphasized body"
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
"label": {
|
|
125
|
+
"default": {
|
|
126
|
+
"$type": "typography",
|
|
127
|
+
"$value": {
|
|
128
|
+
"fontFamily": "{inkblot.typography.fontFamily.sans}",
|
|
129
|
+
"fontSize": "{inkblot.typography.fontSize.xs}",
|
|
130
|
+
"fontWeight": "{inkblot.typography.fontWeight.medium}",
|
|
131
|
+
"lineHeight": "{inkblot.typography.lineHeight.normal}",
|
|
132
|
+
"letterSpacing": "{inkblot.typography.letterSpacing.wide}"
|
|
133
|
+
},
|
|
134
|
+
"$description": "Form labels, badges"
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|