@hypoth-ui/css 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.
@@ -0,0 +1,82 @@
1
+ /* Modern CSS Reset */
2
+
3
+ *,
4
+ *::before,
5
+ *::after {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ }
13
+
14
+ html {
15
+ -webkit-text-size-adjust: 100%;
16
+ tab-size: 4;
17
+ }
18
+
19
+ body {
20
+ line-height: 1.5;
21
+ -webkit-font-smoothing: antialiased;
22
+ }
23
+
24
+ img,
25
+ picture,
26
+ video,
27
+ canvas,
28
+ svg {
29
+ display: block;
30
+ max-width: 100%;
31
+ }
32
+
33
+ input,
34
+ button,
35
+ textarea,
36
+ select {
37
+ font: inherit;
38
+ color: inherit;
39
+ }
40
+
41
+ p,
42
+ h1,
43
+ h2,
44
+ h3,
45
+ h4,
46
+ h5,
47
+ h6 {
48
+ overflow-wrap: break-word;
49
+ }
50
+
51
+ a {
52
+ color: inherit;
53
+ text-decoration: inherit;
54
+ }
55
+
56
+ button {
57
+ background: none;
58
+ border: none;
59
+ cursor: pointer;
60
+ }
61
+
62
+ ul,
63
+ ol {
64
+ list-style: none;
65
+ }
66
+
67
+ table {
68
+ border-collapse: collapse;
69
+ border-spacing: 0;
70
+ }
71
+
72
+ /* Remove animations for reduced-motion preference */
73
+ @media (prefers-reduced-motion: reduce) {
74
+ *,
75
+ *::before,
76
+ *::after {
77
+ animation-duration: 0.01ms !important;
78
+ animation-iteration-count: 1 !important;
79
+ transition-duration: 0.01ms !important;
80
+ scroll-behavior: auto !important;
81
+ }
82
+ }
@@ -0,0 +1,3 @@
1
+ /* Token Layer - Design token CSS custom properties */
2
+ /* Import the compiled token CSS from @hypoth-ui/tokens */
3
+ @import "@hypoth-ui/tokens/dist/css/tokens.css";
@@ -0,0 +1,483 @@
1
+ /* Utility Classes */
2
+
3
+ /* Visually hidden - accessible to screen readers */
4
+ .sr-only {
5
+ position: absolute;
6
+ width: 1px;
7
+ height: 1px;
8
+ padding: 0;
9
+ margin: -1px;
10
+ overflow: hidden;
11
+ clip: rect(0, 0, 0, 0);
12
+ white-space: nowrap;
13
+ border-width: 0;
14
+ }
15
+
16
+ /* Not visually hidden */
17
+ .not-sr-only {
18
+ position: static;
19
+ width: auto;
20
+ height: auto;
21
+ padding: 0;
22
+ margin: 0;
23
+ overflow: visible;
24
+ clip: auto;
25
+ white-space: normal;
26
+ }
27
+
28
+ /* Text alignment */
29
+ .text-left {
30
+ text-align: left;
31
+ }
32
+
33
+ .text-center {
34
+ text-align: center;
35
+ }
36
+
37
+ .text-right {
38
+ text-align: right;
39
+ }
40
+
41
+ /* Text colors */
42
+ .text-default {
43
+ color: var(--ds-color-foreground-default);
44
+ }
45
+
46
+ .text-muted {
47
+ color: var(--ds-color-foreground-muted);
48
+ }
49
+
50
+ .text-subtle {
51
+ color: var(--ds-color-foreground-subtle);
52
+ }
53
+
54
+ /* Font weights */
55
+ .font-normal {
56
+ font-weight: var(--ds-font-weight-normal);
57
+ }
58
+
59
+ .font-medium {
60
+ font-weight: var(--ds-font-weight-medium);
61
+ }
62
+
63
+ .font-semibold {
64
+ font-weight: var(--ds-font-weight-semibold);
65
+ }
66
+
67
+ .font-bold {
68
+ font-weight: var(--ds-font-weight-bold);
69
+ }
70
+
71
+ /* Font sizes */
72
+ .text-xs {
73
+ font-size: var(--ds-font-size-xs);
74
+ }
75
+
76
+ .text-sm {
77
+ font-size: var(--ds-font-size-sm);
78
+ }
79
+
80
+ .text-base {
81
+ font-size: var(--ds-font-size-base);
82
+ }
83
+
84
+ .text-lg {
85
+ font-size: var(--ds-font-size-lg);
86
+ }
87
+
88
+ .text-xl {
89
+ font-size: var(--ds-font-size-xl);
90
+ }
91
+
92
+ .text-2xl {
93
+ font-size: var(--ds-font-size-2xl);
94
+ }
95
+
96
+ /* Spacing utilities - margin */
97
+ .ds-m-xs {
98
+ margin: var(--ds-spacing-xs);
99
+ }
100
+ .ds-m-sm {
101
+ margin: var(--ds-spacing-sm);
102
+ }
103
+ .ds-m-md {
104
+ margin: var(--ds-spacing-md);
105
+ }
106
+ .ds-m-lg {
107
+ margin: var(--ds-spacing-lg);
108
+ }
109
+ .ds-m-xl {
110
+ margin: var(--ds-spacing-xl);
111
+ }
112
+
113
+ .ds-mt-xs {
114
+ margin-top: var(--ds-spacing-xs);
115
+ }
116
+ .ds-mt-sm {
117
+ margin-top: var(--ds-spacing-sm);
118
+ }
119
+ .ds-mt-md {
120
+ margin-top: var(--ds-spacing-md);
121
+ }
122
+ .ds-mt-lg {
123
+ margin-top: var(--ds-spacing-lg);
124
+ }
125
+ .ds-mt-xl {
126
+ margin-top: var(--ds-spacing-xl);
127
+ }
128
+
129
+ .ds-mr-xs {
130
+ margin-right: var(--ds-spacing-xs);
131
+ }
132
+ .ds-mr-sm {
133
+ margin-right: var(--ds-spacing-sm);
134
+ }
135
+ .ds-mr-md {
136
+ margin-right: var(--ds-spacing-md);
137
+ }
138
+ .ds-mr-lg {
139
+ margin-right: var(--ds-spacing-lg);
140
+ }
141
+ .ds-mr-xl {
142
+ margin-right: var(--ds-spacing-xl);
143
+ }
144
+
145
+ .ds-mb-xs {
146
+ margin-bottom: var(--ds-spacing-xs);
147
+ }
148
+ .ds-mb-sm {
149
+ margin-bottom: var(--ds-spacing-sm);
150
+ }
151
+ .ds-mb-md {
152
+ margin-bottom: var(--ds-spacing-md);
153
+ }
154
+ .ds-mb-lg {
155
+ margin-bottom: var(--ds-spacing-lg);
156
+ }
157
+ .ds-mb-xl {
158
+ margin-bottom: var(--ds-spacing-xl);
159
+ }
160
+
161
+ .ds-ml-xs {
162
+ margin-left: var(--ds-spacing-xs);
163
+ }
164
+ .ds-ml-sm {
165
+ margin-left: var(--ds-spacing-sm);
166
+ }
167
+ .ds-ml-md {
168
+ margin-left: var(--ds-spacing-md);
169
+ }
170
+ .ds-ml-lg {
171
+ margin-left: var(--ds-spacing-lg);
172
+ }
173
+ .ds-ml-xl {
174
+ margin-left: var(--ds-spacing-xl);
175
+ }
176
+
177
+ .ds-mx-xs {
178
+ margin-inline: var(--ds-spacing-xs);
179
+ }
180
+ .ds-mx-sm {
181
+ margin-inline: var(--ds-spacing-sm);
182
+ }
183
+ .ds-mx-md {
184
+ margin-inline: var(--ds-spacing-md);
185
+ }
186
+ .ds-mx-lg {
187
+ margin-inline: var(--ds-spacing-lg);
188
+ }
189
+ .ds-mx-xl {
190
+ margin-inline: var(--ds-spacing-xl);
191
+ }
192
+
193
+ .ds-my-xs {
194
+ margin-block: var(--ds-spacing-xs);
195
+ }
196
+ .ds-my-sm {
197
+ margin-block: var(--ds-spacing-sm);
198
+ }
199
+ .ds-my-md {
200
+ margin-block: var(--ds-spacing-md);
201
+ }
202
+ .ds-my-lg {
203
+ margin-block: var(--ds-spacing-lg);
204
+ }
205
+ .ds-my-xl {
206
+ margin-block: var(--ds-spacing-xl);
207
+ }
208
+
209
+ /* Spacing utilities - padding */
210
+ .ds-p-xs {
211
+ padding: var(--ds-spacing-xs);
212
+ }
213
+ .ds-p-sm {
214
+ padding: var(--ds-spacing-sm);
215
+ }
216
+ .ds-p-md {
217
+ padding: var(--ds-spacing-md);
218
+ }
219
+ .ds-p-lg {
220
+ padding: var(--ds-spacing-lg);
221
+ }
222
+ .ds-p-xl {
223
+ padding: var(--ds-spacing-xl);
224
+ }
225
+
226
+ .ds-pt-xs {
227
+ padding-top: var(--ds-spacing-xs);
228
+ }
229
+ .ds-pt-sm {
230
+ padding-top: var(--ds-spacing-sm);
231
+ }
232
+ .ds-pt-md {
233
+ padding-top: var(--ds-spacing-md);
234
+ }
235
+ .ds-pt-lg {
236
+ padding-top: var(--ds-spacing-lg);
237
+ }
238
+ .ds-pt-xl {
239
+ padding-top: var(--ds-spacing-xl);
240
+ }
241
+
242
+ .ds-pr-xs {
243
+ padding-right: var(--ds-spacing-xs);
244
+ }
245
+ .ds-pr-sm {
246
+ padding-right: var(--ds-spacing-sm);
247
+ }
248
+ .ds-pr-md {
249
+ padding-right: var(--ds-spacing-md);
250
+ }
251
+ .ds-pr-lg {
252
+ padding-right: var(--ds-spacing-lg);
253
+ }
254
+ .ds-pr-xl {
255
+ padding-right: var(--ds-spacing-xl);
256
+ }
257
+
258
+ .ds-pb-xs {
259
+ padding-bottom: var(--ds-spacing-xs);
260
+ }
261
+ .ds-pb-sm {
262
+ padding-bottom: var(--ds-spacing-sm);
263
+ }
264
+ .ds-pb-md {
265
+ padding-bottom: var(--ds-spacing-md);
266
+ }
267
+ .ds-pb-lg {
268
+ padding-bottom: var(--ds-spacing-lg);
269
+ }
270
+ .ds-pb-xl {
271
+ padding-bottom: var(--ds-spacing-xl);
272
+ }
273
+
274
+ .ds-pl-xs {
275
+ padding-left: var(--ds-spacing-xs);
276
+ }
277
+ .ds-pl-sm {
278
+ padding-left: var(--ds-spacing-sm);
279
+ }
280
+ .ds-pl-md {
281
+ padding-left: var(--ds-spacing-md);
282
+ }
283
+ .ds-pl-lg {
284
+ padding-left: var(--ds-spacing-lg);
285
+ }
286
+ .ds-pl-xl {
287
+ padding-left: var(--ds-spacing-xl);
288
+ }
289
+
290
+ .ds-px-xs {
291
+ padding-inline: var(--ds-spacing-xs);
292
+ }
293
+ .ds-px-sm {
294
+ padding-inline: var(--ds-spacing-sm);
295
+ }
296
+ .ds-px-md {
297
+ padding-inline: var(--ds-spacing-md);
298
+ }
299
+ .ds-px-lg {
300
+ padding-inline: var(--ds-spacing-lg);
301
+ }
302
+ .ds-px-xl {
303
+ padding-inline: var(--ds-spacing-xl);
304
+ }
305
+
306
+ .ds-py-xs {
307
+ padding-block: var(--ds-spacing-xs);
308
+ }
309
+ .ds-py-sm {
310
+ padding-block: var(--ds-spacing-sm);
311
+ }
312
+ .ds-py-md {
313
+ padding-block: var(--ds-spacing-md);
314
+ }
315
+ .ds-py-lg {
316
+ padding-block: var(--ds-spacing-lg);
317
+ }
318
+ .ds-py-xl {
319
+ padding-block: var(--ds-spacing-xl);
320
+ }
321
+
322
+ /* Legacy spacing utilities (kept for compatibility) */
323
+ .m-0 {
324
+ margin: var(--ds-spacing-primitives-0);
325
+ }
326
+
327
+ .p-0 {
328
+ padding: var(--ds-spacing-primitives-0);
329
+ }
330
+
331
+ .m-auto {
332
+ margin: auto;
333
+ }
334
+
335
+ .mx-auto {
336
+ margin-inline: auto;
337
+ }
338
+
339
+ /* Display utilities */
340
+ .ds-block {
341
+ display: block;
342
+ }
343
+ .ds-inline {
344
+ display: inline;
345
+ }
346
+ .ds-inline-block {
347
+ display: inline-block;
348
+ }
349
+ .ds-flex {
350
+ display: flex;
351
+ }
352
+ .ds-inline-flex {
353
+ display: inline-flex;
354
+ }
355
+ .ds-grid {
356
+ display: grid;
357
+ }
358
+ .ds-hidden {
359
+ display: none;
360
+ }
361
+
362
+ /* Text alignment utilities (with ds- prefix) */
363
+ .ds-text-left {
364
+ text-align: left;
365
+ }
366
+ .ds-text-center {
367
+ text-align: center;
368
+ }
369
+ .ds-text-right {
370
+ text-align: right;
371
+ }
372
+
373
+ /* Text color utilities */
374
+ .ds-text-primary {
375
+ color: var(--ds-color-primary-default);
376
+ }
377
+ .ds-text-muted {
378
+ color: var(--ds-color-foreground-muted);
379
+ }
380
+ .ds-text-error {
381
+ color: var(--ds-color-destructive-default);
382
+ }
383
+
384
+ /* Background color utilities */
385
+ .ds-bg-default {
386
+ background-color: var(--ds-color-background-default);
387
+ }
388
+ .ds-bg-subtle {
389
+ background-color: var(--ds-color-background-subtle);
390
+ }
391
+ .ds-bg-muted {
392
+ background-color: var(--ds-color-background-muted);
393
+ }
394
+ .ds-bg-primary {
395
+ background-color: var(--ds-color-primary-default);
396
+ }
397
+
398
+ /* Flexbox utilities (legacy, kept for compatibility) */
399
+ .flex {
400
+ display: flex;
401
+ }
402
+
403
+ .inline-flex {
404
+ display: inline-flex;
405
+ }
406
+
407
+ .flex-col {
408
+ flex-direction: column;
409
+ }
410
+
411
+ .flex-row {
412
+ flex-direction: row;
413
+ }
414
+
415
+ .items-start {
416
+ align-items: flex-start;
417
+ }
418
+
419
+ .items-center {
420
+ align-items: center;
421
+ }
422
+
423
+ .items-end {
424
+ align-items: flex-end;
425
+ }
426
+
427
+ .justify-start {
428
+ justify-content: flex-start;
429
+ }
430
+
431
+ .justify-center {
432
+ justify-content: center;
433
+ }
434
+
435
+ .justify-end {
436
+ justify-content: flex-end;
437
+ }
438
+
439
+ .justify-between {
440
+ justify-content: space-between;
441
+ }
442
+
443
+ .gap-xs {
444
+ gap: var(--ds-spacing-component-gap-xs);
445
+ }
446
+
447
+ .gap-sm {
448
+ gap: var(--ds-spacing-component-gap-sm);
449
+ }
450
+
451
+ .gap-md {
452
+ gap: var(--ds-spacing-component-gap-md);
453
+ }
454
+
455
+ .gap-lg {
456
+ gap: var(--ds-spacing-component-gap-lg);
457
+ }
458
+
459
+ /* Grid utilities */
460
+ .grid {
461
+ display: grid;
462
+ }
463
+
464
+ /* Container */
465
+ .container {
466
+ width: 100%;
467
+ max-width: var(--ds-spacing-layout-container-maxWidth);
468
+ margin-inline: auto;
469
+ padding-inline: var(--ds-spacing-layout-container-padding);
470
+ }
471
+
472
+ /* Stack spacing */
473
+ .stack-sm > * + * {
474
+ margin-top: var(--ds-spacing-layout-stack-sm);
475
+ }
476
+
477
+ .stack-md > * + * {
478
+ margin-top: var(--ds-spacing-layout-stack-md);
479
+ }
480
+
481
+ .stack-lg > * + * {
482
+ margin-top: var(--ds-spacing-layout-stack-lg);
483
+ }