@boopdoopgoop/design-system 0.0.0-stage → 0.2.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 (19) hide show
  1. package/README.md +442 -2
  2. package/dist/components/index.cjs +233 -0
  3. package/dist/components/index.cjs.map +1 -0
  4. package/dist/components/index.d.cts +63 -0
  5. package/dist/components/index.d.ts +63 -0
  6. package/dist/components/index.js +208 -0
  7. package/dist/components/index.js.map +1 -0
  8. package/dist/index.cjs +777 -0
  9. package/dist/index.cjs.map +1 -0
  10. package/dist/index.d.cts +775 -0
  11. package/dist/index.d.ts +775 -0
  12. package/dist/index.js +745 -0
  13. package/dist/index.js.map +1 -0
  14. package/package.json +99 -4
  15. package/src/tokens/primitives.json +354 -0
  16. package/src/tokens/semantic.json +133 -0
  17. package/styles/components.css +290 -0
  18. package/styles/fonts.css +8 -0
  19. package/styles/theme.css +271 -0
package/styles/theme.css ADDED
@@ -0,0 +1,271 @@
1
+ /* Generated from src/tokens/*.json. Run pnpm generate; do not edit. */
2
+ :root {
3
+ --ds-border-app: var(--ds-primitive-dimension-one);
4
+ --ds-border-riso: var(--ds-primitive-dimension-three);
5
+ --ds-color-app-canvas: var(--ds-primitive-color-white);
6
+ --ds-color-app-control-line: var(--ds-primitive-color-control-line);
7
+ --ds-color-app-danger: var(--ds-primitive-color-danger);
8
+ --ds-color-app-focus: var(--ds-primitive-color-ink);
9
+ --ds-color-app-info: var(--ds-primitive-color-info);
10
+ --ds-color-app-ink: var(--ds-primitive-color-ink);
11
+ --ds-color-app-line: var(--ds-primitive-color-line);
12
+ --ds-color-app-mist: var(--ds-primitive-color-mist);
13
+ --ds-color-app-muted: var(--ds-primitive-color-muted);
14
+ --ds-color-app-on-signal: var(--ds-primitive-color-white);
15
+ --ds-color-app-paper: var(--ds-primitive-color-white);
16
+ --ds-color-app-placeholder: var(--ds-primitive-color-placeholder);
17
+ --ds-color-app-signal: var(--ds-primitive-color-signal);
18
+ --ds-color-app-success: var(--ds-primitive-color-success);
19
+ --ds-color-app-tile-clay: var(--ds-primitive-color-clay);
20
+ --ds-color-app-tile-clay-ink: var(--ds-primitive-color-clay-ink);
21
+ --ds-color-app-tile-mauve: var(--ds-primitive-color-mauve);
22
+ --ds-color-app-tile-mauve-ink: var(--ds-primitive-color-mauve-ink);
23
+ --ds-color-app-tile-ochre: var(--ds-primitive-color-ochre);
24
+ --ds-color-app-tile-ochre-ink: var(--ds-primitive-color-ochre-ink);
25
+ --ds-color-app-tile-sage: var(--ds-primitive-color-sage);
26
+ --ds-color-app-tile-sage-ink: var(--ds-primitive-color-sage-ink);
27
+ --ds-color-app-tile-slate: var(--ds-primitive-color-slate);
28
+ --ds-color-app-tile-slate-ink: var(--ds-primitive-color-slate-ink);
29
+ --ds-color-app-tile-stone: var(--ds-primitive-color-stone);
30
+ --ds-color-app-tile-stone-ink: var(--ds-primitive-color-stone-ink);
31
+ --ds-color-app-warning: var(--ds-primitive-color-warning);
32
+ --ds-color-riso-highlight: var(--ds-primitive-color-yellow);
33
+ --ds-color-riso-ink: var(--ds-primitive-color-black);
34
+ --ds-color-riso-ink-2: var(--ds-primitive-color-ink-70);
35
+ --ds-color-riso-paper: var(--ds-primitive-color-paper);
36
+ --ds-color-riso-sheet: var(--ds-primitive-color-sheet);
37
+ --ds-color-riso-tint-18: var(--ds-primitive-color-ink-18);
38
+ --ds-color-riso-tint-35: var(--ds-primitive-color-ink-35);
39
+ --ds-focus-app-offset: var(--ds-primitive-dimension-two);
40
+ --ds-focus-app-width: var(--ds-primitive-dimension-two);
41
+ --ds-focus-riso-offset: var(--ds-primitive-dimension-three);
42
+ --ds-focus-riso-width: var(--ds-primitive-dimension-three);
43
+ --ds-font-weight-black: var(--ds-primitive-weight-black);
44
+ --ds-font-weight-bold: var(--ds-primitive-weight-bold);
45
+ --ds-font-weight-medium: var(--ds-primitive-weight-medium);
46
+ --ds-font-weight-regular: var(--ds-primitive-weight-regular);
47
+ --ds-font-weight-semibold: var(--ds-primitive-weight-semibold);
48
+ --ds-font-body: var(--ds-primitive-font-body);
49
+ --ds-font-display: var(--ds-primitive-font-display);
50
+ --ds-font-mono: var(--ds-primitive-font-mono);
51
+ --ds-font-sans: var(--ds-font-body);
52
+ --ds-font-ui: var(--ds-font-body);
53
+ --ds-layer-modal: var(--ds-primitive-layer-modal);
54
+ --ds-leading-body: var(--ds-primitive-ratio-body);
55
+ --ds-leading-display: var(--ds-primitive-ratio-display);
56
+ --ds-leading-label: var(--ds-primitive-ratio-label);
57
+ --ds-leading-ui: var(--ds-primitive-ratio-copy);
58
+ --ds-opacity-disabled: var(--ds-primitive-ratio-disabled);
59
+ --ds-opacity-disabled-close: var(--ds-primitive-ratio-overlay);
60
+ --ds-opacity-hover: var(--ds-primitive-ratio-hover);
61
+ --ds-opacity-overlay: var(--ds-primitive-ratio-overlay);
62
+ --ds-opacity-riso-grain: var(--ds-primitive-ratio-grain);
63
+ --ds-primitive-color-black: #000000;
64
+ --ds-primitive-color-clay: #f0dbd0;
65
+ --ds-primitive-color-clay-ink: #74432f;
66
+ --ds-primitive-color-control-line: #949494;
67
+ --ds-primitive-color-danger: #9b2c2c;
68
+ --ds-primitive-color-info: #33509c;
69
+ --ds-primitive-color-ink: #1a1a1a;
70
+ --ds-primitive-color-ink-18: #c6c2b9;
71
+ --ds-primitive-color-ink-35: #9d9a93;
72
+ --ds-primitive-color-ink-70: #494744;
73
+ --ds-primitive-color-line: #d1d1d1;
74
+ --ds-primitive-color-mauve: #e8dcec;
75
+ --ds-primitive-color-mauve-ink: #5e4068;
76
+ --ds-primitive-color-mist: #f4f4f2;
77
+ --ds-primitive-color-muted: #666666;
78
+ --ds-primitive-color-ochre: #f0e3c4;
79
+ --ds-primitive-color-ochre-ink: #664c16;
80
+ --ds-primitive-color-paper: #f2ede2;
81
+ --ds-primitive-color-placeholder: #767676;
82
+ --ds-primitive-color-sage: #dce8d4;
83
+ --ds-primitive-color-sage-ink: #2f4a29;
84
+ --ds-primitive-color-sheet: #f8f5ee;
85
+ --ds-primitive-color-signal: #454545;
86
+ --ds-primitive-color-slate: #dbe5ef;
87
+ --ds-primitive-color-slate-ink: #324860;
88
+ --ds-primitive-color-stone: #e6e3db;
89
+ --ds-primitive-color-stone-ink: #4f4c43;
90
+ --ds-primitive-color-success: #386f24;
91
+ --ds-primitive-color-warning: #8a6a12;
92
+ --ds-primitive-color-white: #ffffff;
93
+ --ds-primitive-color-yellow: #ffe800;
94
+ --ds-primitive-component-size-control: 44px;
95
+ --ds-primitive-component-size-modal: 480px;
96
+ --ds-primitive-component-size-textarea: 96px;
97
+ --ds-primitive-dimension-one: 1px;
98
+ --ds-primitive-dimension-three: 3px;
99
+ --ds-primitive-dimension-two: 2px;
100
+ --ds-primitive-dimension-zero: 0px;
101
+ --ds-primitive-font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
102
+ --ds-primitive-font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", "Arial", sans-serif;
103
+ --ds-primitive-font-mono: "Spline Sans Mono", ui-monospace, "Menlo", monospace;
104
+ --ds-primitive-layer-modal: 50;
105
+ --ds-primitive-ratio-body: 1.45;
106
+ --ds-primitive-ratio-copy: 1.4;
107
+ --ds-primitive-ratio-disabled: 0.55;
108
+ --ds-primitive-ratio-display: 1;
109
+ --ds-primitive-ratio-grain: 0.1;
110
+ --ds-primitive-ratio-hover: 0.05;
111
+ --ds-primitive-ratio-label: 1.25;
112
+ --ds-primitive-ratio-overlay: 0.4;
113
+ --ds-primitive-ratio-tracking-control: 0.08;
114
+ --ds-primitive-ratio-tracking-label: 0.12;
115
+ --ds-primitive-ratio-tracking-panel: 0.14;
116
+ --ds-primitive-size-11: 11px;
117
+ --ds-primitive-size-12: 12px;
118
+ --ds-primitive-size-14: 14px;
119
+ --ds-primitive-size-15: 15px;
120
+ --ds-primitive-size-18: 18px;
121
+ --ds-primitive-size-24: 24px;
122
+ --ds-primitive-size-32: 32px;
123
+ --ds-primitive-space-10: 10px;
124
+ --ds-primitive-space-12: 12px;
125
+ --ds-primitive-space-16: 16px;
126
+ --ds-primitive-space-20: 20px;
127
+ --ds-primitive-space-24: 24px;
128
+ --ds-primitive-space-32: 32px;
129
+ --ds-primitive-space-4: 4px;
130
+ --ds-primitive-space-6: 6px;
131
+ --ds-primitive-space-8: 8px;
132
+ --ds-primitive-weight-black: 900;
133
+ --ds-primitive-weight-bold: 700;
134
+ --ds-primitive-weight-medium: 500;
135
+ --ds-primitive-weight-regular: 400;
136
+ --ds-primitive-weight-semibold: 600;
137
+ --ds-radius-control: var(--ds-primitive-dimension-zero);
138
+ --ds-size-close: var(--ds-primitive-size-32);
139
+ --ds-size-close-icon: var(--ds-primitive-size-14);
140
+ --ds-size-control: var(--ds-primitive-component-size-control);
141
+ --ds-size-icon: var(--ds-primitive-size-12);
142
+ --ds-size-modal: var(--ds-primitive-component-size-modal);
143
+ --ds-size-textarea: var(--ds-primitive-component-size-textarea);
144
+ --ds-space-hint: var(--ds-primitive-space-6);
145
+ --ds-space-lg: var(--ds-primitive-space-16);
146
+ --ds-space-md: var(--ds-primitive-space-12);
147
+ --ds-space-modal: var(--ds-primitive-space-24);
148
+ --ds-space-panel: var(--ds-primitive-space-20);
149
+ --ds-space-sm: var(--ds-primitive-space-8);
150
+ --ds-space-tag-inline: var(--ds-primitive-space-10);
151
+ --ds-space-viewport: var(--ds-primitive-space-32);
152
+ --ds-space-xs: var(--ds-primitive-space-4);
153
+ --ds-text-body: var(--ds-primitive-size-15);
154
+ --ds-text-display: var(--ds-primitive-size-32);
155
+ --ds-text-heading: var(--ds-primitive-size-24);
156
+ --ds-text-label: var(--ds-primitive-size-11);
157
+ --ds-text-mono: var(--ds-primitive-size-12);
158
+ --ds-text-ui: var(--ds-primitive-size-14);
159
+ --ds-tracking-control: var(--ds-primitive-ratio-tracking-control);
160
+ --ds-tracking-label: var(--ds-primitive-ratio-tracking-label);
161
+ --ds-tracking-panel: var(--ds-primitive-ratio-tracking-panel);
162
+ --ds-color-canvas: var(--ds-color-app-canvas);
163
+ --ds-color-paper: var(--ds-color-app-paper);
164
+ --ds-color-sheet: var(--ds-color-app-paper);
165
+ --ds-color-ink: var(--ds-color-app-ink);
166
+ --ds-color-muted: var(--ds-color-app-muted);
167
+ --ds-color-line: var(--ds-color-app-line);
168
+ --ds-color-control-line: var(--ds-color-app-control-line);
169
+ --ds-color-placeholder: var(--ds-color-app-placeholder);
170
+ --ds-color-signal: var(--ds-color-app-signal);
171
+ --ds-color-on-signal: var(--ds-color-app-on-signal);
172
+ --ds-color-focus: var(--ds-color-app-focus);
173
+ }
174
+
175
+ [data-intangibility-tier="app"] {
176
+ --ds-color-canvas: var(--ds-color-app-canvas);
177
+ --ds-color-paper: var(--ds-color-app-paper);
178
+ --ds-color-sheet: var(--ds-color-app-paper);
179
+ --ds-color-ink: var(--ds-color-app-ink);
180
+ --ds-color-muted: var(--ds-color-app-muted);
181
+ --ds-color-line: var(--ds-color-app-line);
182
+ --ds-color-control-line: var(--ds-color-app-control-line);
183
+ --ds-color-placeholder: var(--ds-color-app-placeholder);
184
+ --ds-color-signal: var(--ds-color-app-signal);
185
+ --ds-color-on-signal: var(--ds-color-app-on-signal);
186
+ --ds-color-focus: var(--ds-color-app-focus);
187
+ }
188
+
189
+ [data-intangibility-tier="riso"] {
190
+ --ds-color-canvas: var(--ds-color-riso-paper);
191
+ --ds-color-paper: var(--ds-color-riso-paper);
192
+ --ds-color-sheet: var(--ds-color-riso-sheet);
193
+ --ds-color-ink: var(--ds-color-riso-ink);
194
+ --ds-color-muted: var(--ds-color-riso-ink-2);
195
+ --ds-color-line: var(--ds-color-riso-tint-18);
196
+ --ds-color-control-line: var(--ds-color-riso-ink);
197
+ --ds-color-placeholder: var(--ds-color-riso-tint-35);
198
+ --ds-color-signal: var(--ds-color-riso-ink);
199
+ --ds-color-on-signal: var(--ds-color-riso-paper);
200
+ --ds-color-focus: var(--ds-color-riso-ink);
201
+ }
202
+
203
+ /* Inline utilities resolve scoped roles on the consuming element. */
204
+ @theme inline static {
205
+ --color-app-canvas: var(--ds-color-app-canvas);
206
+ --color-app-control-line: var(--ds-color-app-control-line);
207
+ --color-app-danger: var(--ds-color-app-danger);
208
+ --color-app-focus: var(--ds-color-app-focus);
209
+ --color-app-info: var(--ds-color-app-info);
210
+ --color-app-ink: var(--ds-color-app-ink);
211
+ --color-app-line: var(--ds-color-app-line);
212
+ --color-app-mist: var(--ds-color-app-mist);
213
+ --color-app-muted: var(--ds-color-app-muted);
214
+ --color-app-on-signal: var(--ds-color-app-on-signal);
215
+ --color-app-paper: var(--ds-color-app-paper);
216
+ --color-app-placeholder: var(--ds-color-app-placeholder);
217
+ --color-app-signal: var(--ds-color-app-signal);
218
+ --color-app-success: var(--ds-color-app-success);
219
+ --color-app-tile-clay: var(--ds-color-app-tile-clay);
220
+ --color-app-tile-clay-ink: var(--ds-color-app-tile-clay-ink);
221
+ --color-app-tile-mauve: var(--ds-color-app-tile-mauve);
222
+ --color-app-tile-mauve-ink: var(--ds-color-app-tile-mauve-ink);
223
+ --color-app-tile-ochre: var(--ds-color-app-tile-ochre);
224
+ --color-app-tile-ochre-ink: var(--ds-color-app-tile-ochre-ink);
225
+ --color-app-tile-sage: var(--ds-color-app-tile-sage);
226
+ --color-app-tile-sage-ink: var(--ds-color-app-tile-sage-ink);
227
+ --color-app-tile-slate: var(--ds-color-app-tile-slate);
228
+ --color-app-tile-slate-ink: var(--ds-color-app-tile-slate-ink);
229
+ --color-app-tile-stone: var(--ds-color-app-tile-stone);
230
+ --color-app-tile-stone-ink: var(--ds-color-app-tile-stone-ink);
231
+ --color-app-warning: var(--ds-color-app-warning);
232
+ --color-riso-highlight: var(--ds-color-riso-highlight);
233
+ --color-riso-ink: var(--ds-color-riso-ink);
234
+ --color-riso-ink-2: var(--ds-color-riso-ink-2);
235
+ --color-riso-paper: var(--ds-color-riso-paper);
236
+ --color-riso-sheet: var(--ds-color-riso-sheet);
237
+ --color-riso-tint-18: var(--ds-color-riso-tint-18);
238
+ --color-riso-tint-35: var(--ds-color-riso-tint-35);
239
+ --font-weight-black: var(--ds-font-weight-black);
240
+ --font-weight-bold: var(--ds-font-weight-bold);
241
+ --font-weight-medium: var(--ds-font-weight-medium);
242
+ --font-weight-regular: var(--ds-font-weight-regular);
243
+ --font-weight-semibold: var(--ds-font-weight-semibold);
244
+ --font-body: var(--ds-font-body);
245
+ --font-display: var(--ds-font-display);
246
+ --font-mono: var(--ds-font-mono);
247
+ --font-sans: var(--ds-font-sans);
248
+ --font-ui: var(--ds-font-ui);
249
+ --leading-body: var(--ds-leading-body);
250
+ --leading-display: var(--ds-leading-display);
251
+ --leading-label: var(--ds-leading-label);
252
+ --leading-ui: var(--ds-leading-ui);
253
+ --radius-control: var(--ds-radius-control);
254
+ --text-body: var(--ds-text-body);
255
+ --text-display: var(--ds-text-display);
256
+ --text-heading: var(--ds-text-heading);
257
+ --text-label: var(--ds-text-label);
258
+ --text-mono: var(--ds-text-mono);
259
+ --text-ui: var(--ds-text-ui);
260
+ --color-canvas: var(--ds-color-canvas);
261
+ --color-paper: var(--ds-color-paper);
262
+ --color-sheet: var(--ds-color-sheet);
263
+ --color-ink: var(--ds-color-ink);
264
+ --color-muted: var(--ds-color-muted);
265
+ --color-line: var(--ds-color-line);
266
+ --color-control-line: var(--ds-color-control-line);
267
+ --color-placeholder: var(--ds-color-placeholder);
268
+ --color-signal: var(--ds-color-signal);
269
+ --color-on-signal: var(--ds-color-on-signal);
270
+ --color-focus: var(--ds-color-focus);
271
+ }