@thatch-health/slab-tokens 0.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 +91 -0
- package/dist/app-tokens-raw/color/danger.tokens.json +1780 -0
- package/dist/app-tokens-raw/color/info.tokens.json +1780 -0
- package/dist/app-tokens-raw/color/neutral-inverted.tokens.json +1780 -0
- package/dist/app-tokens-raw/color/neutral.tokens.json +1780 -0
- package/dist/app-tokens-raw/color/success.tokens.json +1780 -0
- package/dist/app-tokens-raw/color/warning.tokens.json +1780 -0
- package/dist/app-tokens-raw/color-primitives.tokens.json +1551 -0
- package/dist/app-tokens-raw/resolver.json +130 -0
- package/dist/app-tokens-raw/spacing-primitives.tokens.json +210 -0
- package/dist/app-tokens-raw/spacing.tokens.json +952 -0
- package/dist/app-tokens-raw/type-primitives/default.tokens.json +676 -0
- package/dist/app-tokens-raw/type-primitives/selecta-inter.tokens.json +676 -0
- package/dist/app-tokens-raw/type-primitives/selecta.tokens.json +676 -0
- package/dist/app-tokens-raw/type.tokens.json +1763 -0
- package/dist/index.css +1025 -0
- package/dist/index.css.d.ts +1 -0
- package/dist/index.d.mts +5 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +8 -0
- package/dist/index.mjs.map +1 -0
- package/dist/tailwind-plugin.cjs +424 -0
- package/dist/tailwind-plugin.d.ts +6 -0
- package/package.json +61 -0
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://www.designtokens.org/schemas/2025.10/resolver.json",
|
|
3
|
+
"name": "Slab Design System",
|
|
4
|
+
"version": "2025.10",
|
|
5
|
+
"description": "Token resolver for the Thatch Slab design system. Three-layer color architecture: Color Primitives (ramps, internal) → Color Core (semantic aliases per mode, internal) → Color (published consumer tokens, scoped by color-mode modifier).",
|
|
6
|
+
"sets": {
|
|
7
|
+
"color-primitives": {
|
|
8
|
+
"description": "Raw color ramp values (brand, gray, slate, red, orange, yellow, green, blue, violet). Internal only — never consumed directly by designers or developers.",
|
|
9
|
+
"sources": [
|
|
10
|
+
{
|
|
11
|
+
"$ref": "color-primitives.tokens.json"
|
|
12
|
+
}
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
"spacing-primitives": {
|
|
16
|
+
"description": "Raw spacing scale primitives (size-0px → size-Npx). Internal only — semantic spacing tokens in the spacing set should be used by consumers.",
|
|
17
|
+
"sources": [
|
|
18
|
+
{
|
|
19
|
+
"$ref": "spacing-primitives.tokens.json"
|
|
20
|
+
}
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
"spacing": {
|
|
24
|
+
"description": "Semantic spacing tokens — inset (square and squash), gap, radius, size, and stroke values.",
|
|
25
|
+
"sources": [
|
|
26
|
+
{
|
|
27
|
+
"$ref": "spacing.tokens.json"
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
"type-primitives": {
|
|
32
|
+
"description": "Typography primitive scale — font size ramp, font families, weights, line-heights, and letter-spacing. The default (Inter) variant is loaded here; font-family modifier contexts override family values.",
|
|
33
|
+
"sources": [
|
|
34
|
+
{
|
|
35
|
+
"$ref": "type-primitives/default.tokens.json"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
"type": {
|
|
40
|
+
"description": "Semantic typography tokens — DTCG typography composites for display, header, body, control, and mono styles.",
|
|
41
|
+
"sources": [
|
|
42
|
+
{
|
|
43
|
+
"$ref": "type.tokens.json"
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"modifiers": {
|
|
49
|
+
"color-mode": {
|
|
50
|
+
"description": "Semantic color mode. Controls the meaning of published surface, action, and form color tokens. Components and surfaces can independently set their color-mode to communicate semantic intent (e.g. danger, success) without changing token names. Defaults to neutral.",
|
|
51
|
+
"default": "neutral",
|
|
52
|
+
"contexts": {
|
|
53
|
+
"neutral": [
|
|
54
|
+
{
|
|
55
|
+
"$ref": "color/neutral.tokens.json"
|
|
56
|
+
}
|
|
57
|
+
],
|
|
58
|
+
"neutral-inverted": [
|
|
59
|
+
{
|
|
60
|
+
"$ref": "color/neutral-inverted.tokens.json"
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"danger": [
|
|
64
|
+
{
|
|
65
|
+
"$ref": "color/danger.tokens.json"
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
"info": [
|
|
69
|
+
{
|
|
70
|
+
"$ref": "color/info.tokens.json"
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"success": [
|
|
74
|
+
{
|
|
75
|
+
"$ref": "color/success.tokens.json"
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
"warning": [
|
|
79
|
+
{
|
|
80
|
+
"$ref": "color/warning.tokens.json"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"font-family": {
|
|
86
|
+
"description": "Font family variant. Defaults to the standard Inter-only stack. The selecta context switches to Selecta for all styles, and selecta-inter uses Selecta for display/heading with Inter for body copy.",
|
|
87
|
+
"default": "default",
|
|
88
|
+
"contexts": {
|
|
89
|
+
"default": [
|
|
90
|
+
{
|
|
91
|
+
"$ref": "type-primitives/default.tokens.json"
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
"selecta": [
|
|
95
|
+
{
|
|
96
|
+
"$ref": "type-primitives/selecta.tokens.json"
|
|
97
|
+
}
|
|
98
|
+
],
|
|
99
|
+
"selecta-inter": [
|
|
100
|
+
{
|
|
101
|
+
"$ref": "type-primitives/selecta-inter.tokens.json"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
"resolutionOrder": [
|
|
108
|
+
{
|
|
109
|
+
"$ref": "#/sets/color-primitives"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"$ref": "#/sets/spacing-primitives"
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"$ref": "#/sets/spacing"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"$ref": "#/sets/type-primitives"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"$ref": "#/sets/type"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"$ref": "#/modifiers/font-family"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"$ref": "#/modifiers/color-mode"
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
{
|
|
2
|
+
"size-0px": {
|
|
3
|
+
"$type": "dimension",
|
|
4
|
+
"$value": {
|
|
5
|
+
"value": 0,
|
|
6
|
+
"unit": "rem"
|
|
7
|
+
},
|
|
8
|
+
"$extensions": {
|
|
9
|
+
"com.figma.variableId": "VariableID:74:51",
|
|
10
|
+
"com.figma.hiddenFromPublishing": true,
|
|
11
|
+
"com.figma.scopes": [
|
|
12
|
+
"TEXT_CONTENT",
|
|
13
|
+
"WIDTH_HEIGHT"
|
|
14
|
+
],
|
|
15
|
+
"com.figma.isOverride": true
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"size-2px": {
|
|
19
|
+
"$type": "dimension",
|
|
20
|
+
"$value": {
|
|
21
|
+
"value": 0.125,
|
|
22
|
+
"unit": "rem"
|
|
23
|
+
},
|
|
24
|
+
"$extensions": {
|
|
25
|
+
"com.figma.variableId": "VariableID:74:52",
|
|
26
|
+
"com.figma.hiddenFromPublishing": true,
|
|
27
|
+
"com.figma.scopes": [
|
|
28
|
+
"TEXT_CONTENT",
|
|
29
|
+
"WIDTH_HEIGHT"
|
|
30
|
+
],
|
|
31
|
+
"com.figma.isOverride": true
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"size-4px": {
|
|
35
|
+
"$type": "dimension",
|
|
36
|
+
"$value": {
|
|
37
|
+
"value": 0.25,
|
|
38
|
+
"unit": "rem"
|
|
39
|
+
},
|
|
40
|
+
"$extensions": {
|
|
41
|
+
"com.figma.variableId": "VariableID:74:53",
|
|
42
|
+
"com.figma.hiddenFromPublishing": true,
|
|
43
|
+
"com.figma.scopes": [
|
|
44
|
+
"TEXT_CONTENT",
|
|
45
|
+
"WIDTH_HEIGHT"
|
|
46
|
+
],
|
|
47
|
+
"com.figma.isOverride": true
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"size-8px": {
|
|
51
|
+
"$type": "dimension",
|
|
52
|
+
"$value": {
|
|
53
|
+
"value": 0.5,
|
|
54
|
+
"unit": "rem"
|
|
55
|
+
},
|
|
56
|
+
"$extensions": {
|
|
57
|
+
"com.figma.variableId": "VariableID:74:54",
|
|
58
|
+
"com.figma.hiddenFromPublishing": true,
|
|
59
|
+
"com.figma.scopes": [
|
|
60
|
+
"TEXT_CONTENT",
|
|
61
|
+
"WIDTH_HEIGHT"
|
|
62
|
+
],
|
|
63
|
+
"com.figma.isOverride": true
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"size-12px": {
|
|
67
|
+
"$type": "dimension",
|
|
68
|
+
"$value": {
|
|
69
|
+
"value": 0.75,
|
|
70
|
+
"unit": "rem"
|
|
71
|
+
},
|
|
72
|
+
"$extensions": {
|
|
73
|
+
"com.figma.variableId": "VariableID:138:161",
|
|
74
|
+
"com.figma.hiddenFromPublishing": true,
|
|
75
|
+
"com.figma.scopes": [
|
|
76
|
+
"TEXT_CONTENT",
|
|
77
|
+
"WIDTH_HEIGHT"
|
|
78
|
+
],
|
|
79
|
+
"com.figma.isOverride": true
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"size-16px": {
|
|
83
|
+
"$type": "dimension",
|
|
84
|
+
"$value": {
|
|
85
|
+
"value": 1,
|
|
86
|
+
"unit": "rem"
|
|
87
|
+
},
|
|
88
|
+
"$extensions": {
|
|
89
|
+
"com.figma.variableId": "VariableID:74:55",
|
|
90
|
+
"com.figma.hiddenFromPublishing": true,
|
|
91
|
+
"com.figma.scopes": [
|
|
92
|
+
"TEXT_CONTENT",
|
|
93
|
+
"WIDTH_HEIGHT"
|
|
94
|
+
],
|
|
95
|
+
"com.figma.isOverride": true
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
"size-24px": {
|
|
99
|
+
"$type": "dimension",
|
|
100
|
+
"$value": {
|
|
101
|
+
"value": 1.5,
|
|
102
|
+
"unit": "rem"
|
|
103
|
+
},
|
|
104
|
+
"$extensions": {
|
|
105
|
+
"com.figma.variableId": "VariableID:74:56",
|
|
106
|
+
"com.figma.hiddenFromPublishing": true,
|
|
107
|
+
"com.figma.scopes": [
|
|
108
|
+
"TEXT_CONTENT",
|
|
109
|
+
"WIDTH_HEIGHT"
|
|
110
|
+
],
|
|
111
|
+
"com.figma.isOverride": true
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"size-32px": {
|
|
115
|
+
"$type": "dimension",
|
|
116
|
+
"$value": {
|
|
117
|
+
"value": 2,
|
|
118
|
+
"unit": "rem"
|
|
119
|
+
},
|
|
120
|
+
"$extensions": {
|
|
121
|
+
"com.figma.variableId": "VariableID:74:57",
|
|
122
|
+
"com.figma.hiddenFromPublishing": true,
|
|
123
|
+
"com.figma.scopes": [
|
|
124
|
+
"TEXT_CONTENT",
|
|
125
|
+
"WIDTH_HEIGHT"
|
|
126
|
+
],
|
|
127
|
+
"com.figma.isOverride": true
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
"size-40px": {
|
|
131
|
+
"$type": "dimension",
|
|
132
|
+
"$value": {
|
|
133
|
+
"value": 2.5,
|
|
134
|
+
"unit": "rem"
|
|
135
|
+
},
|
|
136
|
+
"$extensions": {
|
|
137
|
+
"com.figma.variableId": "VariableID:74:58",
|
|
138
|
+
"com.figma.hiddenFromPublishing": true,
|
|
139
|
+
"com.figma.scopes": [
|
|
140
|
+
"TEXT_CONTENT",
|
|
141
|
+
"WIDTH_HEIGHT"
|
|
142
|
+
],
|
|
143
|
+
"com.figma.isOverride": true
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
"size-48px": {
|
|
147
|
+
"$type": "dimension",
|
|
148
|
+
"$value": {
|
|
149
|
+
"value": 3,
|
|
150
|
+
"unit": "rem"
|
|
151
|
+
},
|
|
152
|
+
"$extensions": {
|
|
153
|
+
"com.figma.variableId": "VariableID:74:59",
|
|
154
|
+
"com.figma.hiddenFromPublishing": true,
|
|
155
|
+
"com.figma.scopes": [
|
|
156
|
+
"TEXT_CONTENT",
|
|
157
|
+
"WIDTH_HEIGHT"
|
|
158
|
+
],
|
|
159
|
+
"com.figma.isOverride": true
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
"size-64px": {
|
|
163
|
+
"$type": "dimension",
|
|
164
|
+
"$value": {
|
|
165
|
+
"value": 4,
|
|
166
|
+
"unit": "rem"
|
|
167
|
+
},
|
|
168
|
+
"$extensions": {
|
|
169
|
+
"com.figma.variableId": "VariableID:74:60",
|
|
170
|
+
"com.figma.hiddenFromPublishing": true,
|
|
171
|
+
"com.figma.scopes": [
|
|
172
|
+
"TEXT_CONTENT",
|
|
173
|
+
"WIDTH_HEIGHT"
|
|
174
|
+
],
|
|
175
|
+
"com.figma.isOverride": true
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"size-96px": {
|
|
179
|
+
"$type": "dimension",
|
|
180
|
+
"$value": {
|
|
181
|
+
"value": 6,
|
|
182
|
+
"unit": "rem"
|
|
183
|
+
},
|
|
184
|
+
"$extensions": {
|
|
185
|
+
"com.figma.variableId": "VariableID:74:61",
|
|
186
|
+
"com.figma.hiddenFromPublishing": true,
|
|
187
|
+
"com.figma.scopes": [
|
|
188
|
+
"TEXT_CONTENT",
|
|
189
|
+
"WIDTH_HEIGHT"
|
|
190
|
+
],
|
|
191
|
+
"com.figma.isOverride": true
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
"size-128px": {
|
|
195
|
+
"$type": "dimension",
|
|
196
|
+
"$value": {
|
|
197
|
+
"value": 8,
|
|
198
|
+
"unit": "rem"
|
|
199
|
+
},
|
|
200
|
+
"$extensions": {
|
|
201
|
+
"com.figma.variableId": "VariableID:74:62",
|
|
202
|
+
"com.figma.hiddenFromPublishing": true,
|
|
203
|
+
"com.figma.scopes": [
|
|
204
|
+
"TEXT_CONTENT",
|
|
205
|
+
"WIDTH_HEIGHT"
|
|
206
|
+
],
|
|
207
|
+
"com.figma.isOverride": true
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|