@pcoi/tokens 0.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.
- package/build/index.d.ts +308 -0
- package/build/index.js +310 -0
- package/build/index.mjs +309 -0
- package/build/tokens.css +473 -0
- package/build/tokens.json +1423 -0
- package/build/tokens.scss +270 -0
- package/package.json +29 -0
- package/src/color/light.json +52 -0
- package/src/color/primitives.json +130 -0
- package/src/color/semantics.json +90 -0
- package/src/effects/primitives.json +122 -0
- package/src/layout/primitives.json +101 -0
- package/src/radius/primitives.json +11 -0
- package/src/radius/semantics.json +31 -0
- package/src/sizing/primitives.json +15 -0
- package/src/sizing/semantics.json +14 -0
- package/src/spacing/primitives.json +29 -0
- package/src/spacing/semantics.json +83 -0
- package/src/typography/primitives.json +69 -0
- package/src/typography/semantics.json +220 -0
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
{
|
|
2
|
+
"semantic-type": {
|
|
3
|
+
"$description": "Semantic typography tokens. Map typography primitives to usage-based roles.",
|
|
4
|
+
|
|
5
|
+
"heading-font": {
|
|
6
|
+
"$type": "fontFamily",
|
|
7
|
+
"$value": "{font.family.sans}",
|
|
8
|
+
"$description": "Font family for headings"
|
|
9
|
+
},
|
|
10
|
+
"body-font": {
|
|
11
|
+
"$type": "fontFamily",
|
|
12
|
+
"$value": "{font.family.sans}",
|
|
13
|
+
"$description": "Font family for body text and form inputs"
|
|
14
|
+
},
|
|
15
|
+
"mono-font": {
|
|
16
|
+
"$type": "fontFamily",
|
|
17
|
+
"$value": "{font.family.mono}",
|
|
18
|
+
"$description": "Font family for code, labels, badges, and step numbers"
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
"display-size": {
|
|
22
|
+
"$type": "fontSize",
|
|
23
|
+
"$value": "clamp(2.5rem, 5vw, 4rem)",
|
|
24
|
+
"$description": "Hero h1 — fluid 40–64px"
|
|
25
|
+
},
|
|
26
|
+
"section-title-size": {
|
|
27
|
+
"$type": "fontSize",
|
|
28
|
+
"$value": "clamp(1.75rem, 3.5vw, 2.75rem)",
|
|
29
|
+
"$description": "Main section headings — fluid 28–44px (SectionHeader)"
|
|
30
|
+
},
|
|
31
|
+
"section-title-sm-size": {
|
|
32
|
+
"$type": "fontSize",
|
|
33
|
+
"$value": "clamp(1.75rem, 3.5vw, 2.5rem)",
|
|
34
|
+
"$description": "CTA section headings — fluid 28–40px"
|
|
35
|
+
},
|
|
36
|
+
"section-title-xs-size": {
|
|
37
|
+
"$type": "fontSize",
|
|
38
|
+
"$value": "clamp(1.5rem, 3vw, 2.25rem)",
|
|
39
|
+
"$description": "Smaller section headings — fluid 24–36px"
|
|
40
|
+
},
|
|
41
|
+
"heading-md-size": {
|
|
42
|
+
"$type": "fontSize",
|
|
43
|
+
"$value": "{font.size.h3}",
|
|
44
|
+
"$description": "Card/subsection heading (h3)"
|
|
45
|
+
},
|
|
46
|
+
"heading-sm-size": {
|
|
47
|
+
"$type": "fontSize",
|
|
48
|
+
"$value": "{font.size.sub}",
|
|
49
|
+
"$description": "Small heading — modal titles, panel titles, signals headings"
|
|
50
|
+
},
|
|
51
|
+
"step-title-size": {
|
|
52
|
+
"$type": "fontSize",
|
|
53
|
+
"$value": "{font.size.h3-lg}",
|
|
54
|
+
"$description": "How-step titles"
|
|
55
|
+
},
|
|
56
|
+
"card-subtitle-size": {
|
|
57
|
+
"$type": "fontSize",
|
|
58
|
+
"$value": "{font.size.lead}",
|
|
59
|
+
"$description": "Principle card titles"
|
|
60
|
+
},
|
|
61
|
+
"body-size": {
|
|
62
|
+
"$type": "fontSize",
|
|
63
|
+
"$value": "{font.size.body-default}",
|
|
64
|
+
"$description": "Default body text — descriptions, form inputs, buttons, toast"
|
|
65
|
+
},
|
|
66
|
+
"body-lg-size": {
|
|
67
|
+
"$type": "fontSize",
|
|
68
|
+
"$value": "{font.size.body-lg}",
|
|
69
|
+
"$description": "Large body text — mobile menu links, large buttons"
|
|
70
|
+
},
|
|
71
|
+
"body-compact-size": {
|
|
72
|
+
"$type": "fontSize",
|
|
73
|
+
"$value": "{font.size.body}",
|
|
74
|
+
"$description": "Compact body — table cells, signals items, who-card body"
|
|
75
|
+
},
|
|
76
|
+
"body-sm-size": {
|
|
77
|
+
"$type": "fontSize",
|
|
78
|
+
"$value": "{font.size.body-sm}",
|
|
79
|
+
"$description": "Small body — attributions, step numbers, footer tagline"
|
|
80
|
+
},
|
|
81
|
+
"nav-size": {
|
|
82
|
+
"$type": "fontSize",
|
|
83
|
+
"$value": "{font.size.nav}",
|
|
84
|
+
"$description": "Navigation links, footer links"
|
|
85
|
+
},
|
|
86
|
+
"label-size": {
|
|
87
|
+
"$type": "fontSize",
|
|
88
|
+
"$value": "{font.size.caption}",
|
|
89
|
+
"$description": "Form labels, table headers, error messages"
|
|
90
|
+
},
|
|
91
|
+
"section-label-size": {
|
|
92
|
+
"$type": "fontSize",
|
|
93
|
+
"$value": "{font.size.sm}",
|
|
94
|
+
"$description": "Section labels (The Problem, How It Works, etc.)"
|
|
95
|
+
},
|
|
96
|
+
"badge-size": {
|
|
97
|
+
"$type": "fontSize",
|
|
98
|
+
"$value": "{font.size.xs}",
|
|
99
|
+
"$description": "Badge text"
|
|
100
|
+
},
|
|
101
|
+
"callout-size": {
|
|
102
|
+
"$type": "fontSize",
|
|
103
|
+
"$value": "{font.size.callout}",
|
|
104
|
+
"$description": "Callout quote text"
|
|
105
|
+
},
|
|
106
|
+
"logo-size": {
|
|
107
|
+
"$type": "fontSize",
|
|
108
|
+
"$value": "{font.size.logo}",
|
|
109
|
+
"$description": "Logo mark text"
|
|
110
|
+
},
|
|
111
|
+
"close-sm-size": {
|
|
112
|
+
"$type": "fontSize",
|
|
113
|
+
"$value": "{font.size.close-sm}",
|
|
114
|
+
"$description": "Toast close button icon"
|
|
115
|
+
},
|
|
116
|
+
"close-lg-size": {
|
|
117
|
+
"$type": "fontSize",
|
|
118
|
+
"$value": "{font.size.close-lg}",
|
|
119
|
+
"$description": "Modal close button icon"
|
|
120
|
+
},
|
|
121
|
+
|
|
122
|
+
"display-weight": {
|
|
123
|
+
"$type": "fontWeight",
|
|
124
|
+
"$value": "{font.weight.extrabold}",
|
|
125
|
+
"$description": "Hero h1 weight (800)"
|
|
126
|
+
},
|
|
127
|
+
"heading-weight": {
|
|
128
|
+
"$type": "fontWeight",
|
|
129
|
+
"$value": "{font.weight.bold}",
|
|
130
|
+
"$description": "Section headings (h2)"
|
|
131
|
+
},
|
|
132
|
+
"emphasis-weight": {
|
|
133
|
+
"$type": "fontWeight",
|
|
134
|
+
"$value": "{font.weight.semibold}",
|
|
135
|
+
"$description": "Buttons, card titles, step titles, modal titles"
|
|
136
|
+
},
|
|
137
|
+
"label-weight": {
|
|
138
|
+
"$type": "fontWeight",
|
|
139
|
+
"$value": "{font.weight.medium}",
|
|
140
|
+
"$description": "Labels, nav links, mono elements"
|
|
141
|
+
},
|
|
142
|
+
"body-weight": {
|
|
143
|
+
"$type": "fontWeight",
|
|
144
|
+
"$value": "{font.weight.regular}",
|
|
145
|
+
"$description": "Body text"
|
|
146
|
+
},
|
|
147
|
+
"callout-weight": {
|
|
148
|
+
"$type": "fontWeight",
|
|
149
|
+
"$value": "{font.weight.light}",
|
|
150
|
+
"$description": "Callout quotes"
|
|
151
|
+
},
|
|
152
|
+
|
|
153
|
+
"display-line-height": {
|
|
154
|
+
"$type": "lineHeight",
|
|
155
|
+
"$value": "{font.lineHeight.tight}",
|
|
156
|
+
"$description": "Hero h1 line-height (1.1)"
|
|
157
|
+
},
|
|
158
|
+
"heading-line-height": {
|
|
159
|
+
"$type": "lineHeight",
|
|
160
|
+
"$value": "{font.lineHeight.heading}",
|
|
161
|
+
"$description": "Headings (1.2)"
|
|
162
|
+
},
|
|
163
|
+
"body-line-height": {
|
|
164
|
+
"$type": "lineHeight",
|
|
165
|
+
"$value": "{font.lineHeight.body}",
|
|
166
|
+
"$description": "Body text (1.6)"
|
|
167
|
+
},
|
|
168
|
+
"body-compact-line-height": {
|
|
169
|
+
"$type": "lineHeight",
|
|
170
|
+
"$value": "{font.lineHeight.body-sm}",
|
|
171
|
+
"$description": "Compact body — callout, table cells, signals, footer, toast (1.5)"
|
|
172
|
+
},
|
|
173
|
+
"step-line-height": {
|
|
174
|
+
"$type": "lineHeight",
|
|
175
|
+
"$value": "{font.lineHeight.step}",
|
|
176
|
+
"$description": "Step descriptions (1.65)"
|
|
177
|
+
},
|
|
178
|
+
"relaxed-line-height": {
|
|
179
|
+
"$type": "lineHeight",
|
|
180
|
+
"$value": "{font.lineHeight.relaxed}",
|
|
181
|
+
"$description": "Section descriptions (1.7)"
|
|
182
|
+
},
|
|
183
|
+
"none-line-height": {
|
|
184
|
+
"$type": "lineHeight",
|
|
185
|
+
"$value": "{font.lineHeight.none}",
|
|
186
|
+
"$description": "No extra leading — buttons, badges, close icons (1)"
|
|
187
|
+
},
|
|
188
|
+
|
|
189
|
+
"display-letter-spacing": {
|
|
190
|
+
"$type": "letterSpacing",
|
|
191
|
+
"$value": "{font.letterSpacing.tight}",
|
|
192
|
+
"$description": "Hero h1 letter-spacing (-0.03em)"
|
|
193
|
+
},
|
|
194
|
+
"heading-letter-spacing": {
|
|
195
|
+
"$type": "letterSpacing",
|
|
196
|
+
"$value": "{font.letterSpacing.heading}",
|
|
197
|
+
"$description": "Section headings (-0.02em)"
|
|
198
|
+
},
|
|
199
|
+
"label-letter-spacing": {
|
|
200
|
+
"$type": "letterSpacing",
|
|
201
|
+
"$value": "{font.letterSpacing.label}",
|
|
202
|
+
"$description": "Form labels, table headers (0.06em)"
|
|
203
|
+
},
|
|
204
|
+
"section-label-letter-spacing": {
|
|
205
|
+
"$type": "letterSpacing",
|
|
206
|
+
"$value": "{font.letterSpacing.section}",
|
|
207
|
+
"$description": "Section labels (0.1em)"
|
|
208
|
+
},
|
|
209
|
+
"badge-letter-spacing": {
|
|
210
|
+
"$type": "letterSpacing",
|
|
211
|
+
"$value": "{font.letterSpacing.badge}",
|
|
212
|
+
"$description": "Badges (0.08em)"
|
|
213
|
+
},
|
|
214
|
+
"logo-letter-spacing": {
|
|
215
|
+
"$type": "letterSpacing",
|
|
216
|
+
"$value": "{font.letterSpacing.logo}",
|
|
217
|
+
"$description": "Logo mark (0.04em)"
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|