@common-origin/design-system 1.1.0 → 1.3.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,616 @@
1
+ import tokensJson from './styles/tokens.json';
2
+ export declare const tokens: {
3
+ base: {
4
+ border: {
5
+ radius: {
6
+ "1": string;
7
+ "2": string;
8
+ "3": string;
9
+ "4": string;
10
+ "5": string;
11
+ "6": string;
12
+ "7": string;
13
+ circle: string;
14
+ };
15
+ style: {
16
+ solid: string;
17
+ dashed: string;
18
+ dotted: string;
19
+ };
20
+ width: {
21
+ "0": string;
22
+ "1": string;
23
+ "2": string;
24
+ "3": string;
25
+ "4": string;
26
+ "5": string;
27
+ "6": string;
28
+ "8": string;
29
+ };
30
+ };
31
+ shadow: {
32
+ "1": string;
33
+ "2": string;
34
+ "3": string;
35
+ "4": string;
36
+ "5": string;
37
+ "6": string;
38
+ none: string;
39
+ };
40
+ zIndex: {
41
+ "0": string;
42
+ "1": string;
43
+ "2": string;
44
+ "3": string;
45
+ "4": string;
46
+ "5": string;
47
+ "6": string;
48
+ "7": string;
49
+ "8": string;
50
+ };
51
+ opacity: {
52
+ "0": string;
53
+ "5": string;
54
+ "10": string;
55
+ "20": string;
56
+ "25": string;
57
+ "30": string;
58
+ "40": string;
59
+ "50": string;
60
+ "60": string;
61
+ "70": string;
62
+ "75": string;
63
+ "80": string;
64
+ "90": string;
65
+ "95": string;
66
+ "100": string;
67
+ };
68
+ size: {
69
+ "0": string;
70
+ "1": string;
71
+ "2": string;
72
+ "3": string;
73
+ "4": string;
74
+ "5": string;
75
+ "6": string;
76
+ "7": string;
77
+ "8": string;
78
+ "9": string;
79
+ "10": string;
80
+ "12": string;
81
+ "14": string;
82
+ "16": string;
83
+ "20": string;
84
+ "24": string;
85
+ "28": string;
86
+ "32": string;
87
+ "40": string;
88
+ "48": string;
89
+ "56": string;
90
+ "64": string;
91
+ auto: string;
92
+ full: string;
93
+ screen: string;
94
+ min: string;
95
+ max: string;
96
+ fit: string;
97
+ };
98
+ color: {
99
+ neutral: {
100
+ "100": string;
101
+ "200": string;
102
+ "300": string;
103
+ "400": string;
104
+ "500": string;
105
+ "600": string;
106
+ "700": string;
107
+ "800": string;
108
+ "900": string;
109
+ "1000": string;
110
+ "000": string;
111
+ };
112
+ green: {
113
+ "100": string;
114
+ "200": string;
115
+ "300": string;
116
+ "400": string;
117
+ "500": string;
118
+ "600": string;
119
+ "700": string;
120
+ "800": string;
121
+ "900": string;
122
+ "1000": string;
123
+ "1100": string;
124
+ "1200": string;
125
+ "1300": string;
126
+ };
127
+ orange: {
128
+ "100": string;
129
+ "200": string;
130
+ "300": string;
131
+ "400": string;
132
+ "500": string;
133
+ "600": string;
134
+ "700": string;
135
+ "800": string;
136
+ "900": string;
137
+ "1000": string;
138
+ "1100": string;
139
+ "1200": string;
140
+ "1300": string;
141
+ };
142
+ red: {
143
+ "100": string;
144
+ "200": string;
145
+ "300": string;
146
+ "400": string;
147
+ "500": string;
148
+ "600": string;
149
+ "700": string;
150
+ "800": string;
151
+ "900": string;
152
+ "1000": string;
153
+ "1100": string;
154
+ "1200": string;
155
+ "1300": string;
156
+ };
157
+ blue: {
158
+ "100": string;
159
+ "200": string;
160
+ "300": string;
161
+ "400": string;
162
+ "500": string;
163
+ "600": string;
164
+ "700": string;
165
+ "800": string;
166
+ "900": string;
167
+ "1000": string;
168
+ "1100": string;
169
+ "1200": string;
170
+ "1300": string;
171
+ };
172
+ };
173
+ spacing: {
174
+ "0": string;
175
+ "1": string;
176
+ "2": string;
177
+ "3": string;
178
+ "4": string;
179
+ "5": string;
180
+ "6": string;
181
+ "7": string;
182
+ "8": string;
183
+ "9": string;
184
+ "10": string;
185
+ "12": string;
186
+ "14": string;
187
+ "16": string;
188
+ "20": string;
189
+ "24": string;
190
+ "28": string;
191
+ "32": string;
192
+ "40": string;
193
+ "48": string;
194
+ "56": string;
195
+ "64": string;
196
+ auto: string;
197
+ };
198
+ fontFamily: {
199
+ heading: string;
200
+ body: string;
201
+ monospace: string;
202
+ };
203
+ fontSize: {
204
+ "1": string;
205
+ "2": string;
206
+ "3": string;
207
+ "4": string;
208
+ "5": string;
209
+ "6": string;
210
+ "7": string;
211
+ "8": string;
212
+ "9": string;
213
+ "10": string;
214
+ };
215
+ fontWeight: {
216
+ "1": string;
217
+ "2": string;
218
+ "3": string;
219
+ "4": string;
220
+ "5": string;
221
+ };
222
+ lineHeight: {
223
+ "1": string;
224
+ "2": string;
225
+ "3": string;
226
+ "4": string;
227
+ "5": string;
228
+ "6": string;
229
+ "7": string;
230
+ "8": string;
231
+ "9": string;
232
+ "10": string;
233
+ "11": string;
234
+ };
235
+ letterSpacing: {
236
+ "0": string;
237
+ "1": string;
238
+ "2": string;
239
+ "3": string;
240
+ "4": string;
241
+ };
242
+ breakpoint: {
243
+ xs: string;
244
+ sm: string;
245
+ md: string;
246
+ lg: string;
247
+ xl: string;
248
+ "2xl": string;
249
+ };
250
+ duration: {
251
+ instant: string;
252
+ fast: string;
253
+ normal: string;
254
+ moderate: string;
255
+ slow: string;
256
+ slower: string;
257
+ slowest: string;
258
+ };
259
+ easing: {
260
+ linear: string;
261
+ ease: string;
262
+ easeIn: string;
263
+ easeOut: string;
264
+ easeInOut: string;
265
+ easeInQuart: string;
266
+ easeOutQuart: string;
267
+ easeInOutQuart: string;
268
+ easeInBack: string;
269
+ easeOutBack: string;
270
+ easeInOutBack: string;
271
+ };
272
+ $ref: string;
273
+ };
274
+ component: {
275
+ button: {
276
+ primary: {
277
+ backgroundColor: string;
278
+ textColor: string;
279
+ borderRadius: string;
280
+ padding: string;
281
+ font: string;
282
+ };
283
+ hover: {
284
+ backgroundColor: string;
285
+ };
286
+ active: {
287
+ backgroundColor: string;
288
+ };
289
+ focus: {
290
+ outline: string;
291
+ outlineOffset: string;
292
+ };
293
+ disabled: {
294
+ backgroundColor: string;
295
+ textColor: string;
296
+ };
297
+ variants: {
298
+ secondary: {
299
+ backgroundColor: string;
300
+ textColor: string;
301
+ hover: {
302
+ backgroundColor: string;
303
+ };
304
+ active: {
305
+ backgroundColor: string;
306
+ };
307
+ disabled: {
308
+ backgroundColor: string;
309
+ textColor: string;
310
+ };
311
+ };
312
+ naked: {
313
+ backgroundColor: string;
314
+ textColor: string;
315
+ hover: {
316
+ backgroundColor: string;
317
+ };
318
+ active: {
319
+ backgroundColor: string;
320
+ };
321
+ disabled: {
322
+ backgroundColor: string;
323
+ textColor: string;
324
+ };
325
+ };
326
+ };
327
+ sizes: {
328
+ small: {
329
+ padding: string;
330
+ font: string;
331
+ };
332
+ medium: {
333
+ padding: string;
334
+ font: string;
335
+ };
336
+ large: {
337
+ padding: string;
338
+ font: string;
339
+ };
340
+ };
341
+ };
342
+ chip: {
343
+ default: {
344
+ backgroundColor: string;
345
+ textColor: string;
346
+ borderRadius: string;
347
+ padding: string;
348
+ font: string;
349
+ };
350
+ variants: {
351
+ emphasis: {
352
+ backgroundColor: string;
353
+ textColor: string;
354
+ };
355
+ subtle: {
356
+ backgroundColor: string;
357
+ textColor: string;
358
+ };
359
+ interactive: {
360
+ backgroundColor: string;
361
+ textColor: string;
362
+ };
363
+ };
364
+ sizes: {
365
+ small: {
366
+ padding: string;
367
+ font: string;
368
+ };
369
+ medium: {
370
+ padding: string;
371
+ font: string;
372
+ };
373
+ large: {
374
+ padding: string;
375
+ font: string;
376
+ };
377
+ };
378
+ };
379
+ iconButton: {
380
+ primary: {
381
+ backgroundColor: string;
382
+ borderRadius: string;
383
+ minWidth: string;
384
+ minHeight: string;
385
+ display: string;
386
+ alignItems: string;
387
+ justifyContent: string;
388
+ };
389
+ hover: {
390
+ backgroundColor: string;
391
+ };
392
+ active: {
393
+ backgroundColor: string;
394
+ };
395
+ focus: {
396
+ outline: string;
397
+ outlineOffset: string;
398
+ };
399
+ disabled: {
400
+ backgroundColor: string;
401
+ };
402
+ variants: {
403
+ secondary: {
404
+ backgroundColor: string;
405
+ hover: {
406
+ backgroundColor: string;
407
+ };
408
+ active: {
409
+ backgroundColor: string;
410
+ };
411
+ disabled: {
412
+ backgroundColor: string;
413
+ };
414
+ };
415
+ naked: {
416
+ backgroundColor: string;
417
+ hover: {
418
+ backgroundColor: string;
419
+ };
420
+ active: {
421
+ backgroundColor: string;
422
+ };
423
+ disabled: {
424
+ backgroundColor: string;
425
+ };
426
+ };
427
+ };
428
+ sizes: {
429
+ small: {
430
+ minWidth: string;
431
+ minHeight: string;
432
+ padding: string;
433
+ };
434
+ medium: {
435
+ minWidth: string;
436
+ minHeight: string;
437
+ padding: string;
438
+ };
439
+ large: {
440
+ minWidth: string;
441
+ minHeight: string;
442
+ padding: string;
443
+ };
444
+ };
445
+ };
446
+ separator: {
447
+ border: string;
448
+ margin: string;
449
+ variants: {
450
+ default: {
451
+ border: string;
452
+ margin: string;
453
+ };
454
+ strong: {
455
+ border: string;
456
+ margin: string;
457
+ };
458
+ minimal: {
459
+ border: string;
460
+ margin: string;
461
+ };
462
+ };
463
+ sizes: {
464
+ small: {
465
+ margin: string;
466
+ };
467
+ medium: {
468
+ margin: string;
469
+ };
470
+ large: {
471
+ margin: string;
472
+ };
473
+ xlarge: {
474
+ margin: string;
475
+ };
476
+ };
477
+ };
478
+ $ref: string;
479
+ };
480
+ semantic: {
481
+ border: {
482
+ default: string;
483
+ subtle: string;
484
+ strong: string;
485
+ focus: string;
486
+ tooltip: string;
487
+ };
488
+ size: {
489
+ icon: {
490
+ xs: string;
491
+ sm: string;
492
+ md: string;
493
+ lg: string;
494
+ xl: string;
495
+ "2xl": string;
496
+ };
497
+ avatar: {
498
+ xs: string;
499
+ sm: string;
500
+ md: string;
501
+ lg: string;
502
+ xl: string;
503
+ };
504
+ };
505
+ spacing: {
506
+ separator: {
507
+ sm: string;
508
+ md: string;
509
+ lg: string;
510
+ xl: string;
511
+ };
512
+ layout: {
513
+ none: string;
514
+ xs: string;
515
+ sm: string;
516
+ md: string;
517
+ lg: string;
518
+ xl: string;
519
+ "2xl": string;
520
+ "3xl": string;
521
+ "4xl": string;
522
+ "5xl": string;
523
+ "6xl": string;
524
+ "7xl": string;
525
+ "8xl": string;
526
+ "9xl": string;
527
+ "10xl": string;
528
+ auto: string;
529
+ };
530
+ };
531
+ color: {
532
+ text: {
533
+ default: string;
534
+ emphasis: string;
535
+ subdued: string;
536
+ inverse: string;
537
+ disabled: string;
538
+ interactive: string;
539
+ error: string;
540
+ success: string;
541
+ warning: string;
542
+ };
543
+ background: {
544
+ default: string;
545
+ subtle: string;
546
+ emphasis: string;
547
+ surface: string;
548
+ inverse: string;
549
+ interactive: string;
550
+ "interactive-subtle": string;
551
+ "interactive-hover": string;
552
+ "interactive-active": string;
553
+ error: string;
554
+ "error-subtle": string;
555
+ success: string;
556
+ "success-subtle": string;
557
+ warning: string;
558
+ "warning-subtle": string;
559
+ disabled: string;
560
+ };
561
+ border: {
562
+ default: string;
563
+ subtle: string;
564
+ strong: string;
565
+ interactive: string;
566
+ error: string;
567
+ success: string;
568
+ warning: string;
569
+ };
570
+ icon: {
571
+ default: string;
572
+ emphasis: string;
573
+ subdued: string;
574
+ disabled: string;
575
+ inverse: string;
576
+ interactive: string;
577
+ "interactive-hover": string;
578
+ "interactive-active": string;
579
+ error: string;
580
+ success: string;
581
+ warning: string;
582
+ };
583
+ };
584
+ typography: {
585
+ display: string;
586
+ h1: string;
587
+ h2: string;
588
+ h3: string;
589
+ h4: string;
590
+ h5: string;
591
+ h6: string;
592
+ subtitle: string;
593
+ body: string;
594
+ small: string;
595
+ overline: string;
596
+ caption: string;
597
+ button1: string;
598
+ button2: string;
599
+ button3: string;
600
+ label: string;
601
+ breadcrumb: string;
602
+ };
603
+ motion: {
604
+ transition: {
605
+ fast: string;
606
+ normal: string;
607
+ slow: string;
608
+ };
609
+ hover: string;
610
+ focus: string;
611
+ interactive: string;
612
+ };
613
+ $ref: string;
614
+ };
615
+ };
616
+ export default tokensJson;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@common-origin/design-system",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "description": "Common Origin Design System - Atomic design components with comprehensive WCAG 2.2 AA testing",
5
5
  "private": false,
6
6
  "type": "module",
@@ -18,7 +18,7 @@
18
18
  "types": "./dist/index.d.ts"
19
19
  },
20
20
  "./tokens": {
21
- "import": "./dist/tokens/index.js",
21
+ "import": "./dist/tokens/index.esm.js",
22
22
  "require": "./dist/tokens/index.js",
23
23
  "types": "./dist/tokens/index.d.ts"
24
24
  }
@@ -96,6 +96,6 @@
96
96
  "license": "MIT",
97
97
  "repository": {
98
98
  "type": "git",
99
- "url": "https://github.com/common-origin/design-system.git"
99
+ "url": "https://github.com/common-origin/common-origin-design-system.git"
100
100
  }
101
101
  }
@@ -1 +0,0 @@
1
- export * from './CoverImage';
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- type DateFormatterProps = {
3
- dateString: string;
4
- formatString?: string;
5
- };
6
- export declare const DateFormatter: React.FC<DateFormatterProps>;
7
- export {};