@nd-storybook/storybook 0.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.
Files changed (29) hide show
  1. package/README.md +71 -0
  2. package/dist/css/badge.css +20 -0
  3. package/dist/css/button.css +0 -0
  4. package/dist/css/components/.DS_Store +0 -0
  5. package/dist/css/components/modal.css +133 -0
  6. package/dist/css/components/portal/accordion.css +39 -0
  7. package/dist/css/components/portal/accordionItem.css +102 -0
  8. package/dist/css/components/portal/alert.css +71 -0
  9. package/dist/css/components/portal/dataFrame.css +450 -0
  10. package/dist/css/components/portal/description-list.css +37 -0
  11. package/dist/css/components/portal/menuItem.css +93 -0
  12. package/dist/css/components/portal/navigationCard.css +86 -0
  13. package/dist/css/components/portal/portal-navigation.css +45 -0
  14. package/dist/css/components/portal/tabs.css +220 -0
  15. package/dist/css/experimental/collapsed-card.css +16 -0
  16. package/dist/css/molecules/form.css +28 -0
  17. package/dist/css/tailwind.css +21 -0
  18. package/dist/css/tokens.css +511 -0
  19. package/dist/css/typography.css +359 -0
  20. package/dist/index.cjs.js +107 -0
  21. package/dist/index.d.ts +396 -0
  22. package/dist/index.es.js +6369 -0
  23. package/dist/tailwind.config.js +96 -0
  24. package/dist/tailwind.tokens.js +452 -0
  25. package/dist/tokens.utilities.js +1042 -0
  26. package/package.json +83 -0
  27. package/tailwind.config.js +86 -0
  28. package/tailwind.tokens.js +252 -0
  29. package/tokens.utilities.js +870 -0
package/dist/css/typography.css ADDED
@@ -0,0 +1,359 @@
1
+ /* Typography styles based on text.styles.tokens.json */
2
+
3
+ /* Article styles */
4
+ .text-article-heading {
5
+ font-family: var(--font-family-gulliver);
6
+ font-size: var(--font-size-heading-xl);
7
+ font-weight: var(--font-weight-bold);
8
+ letter-spacing: var(--letter-spacing-0);
9
+ line-height: 130%;
10
+ text-transform: none;
11
+ text-decoration: none;
12
+ }
13
+
14
+ .text-article-heading-light {
15
+ font-family: var(--font-family-gulliver);
16
+ font-size: var(--font-size-heading-xl);
17
+ font-weight: var(--font-weight-regular);
18
+ letter-spacing: var(--letter-spacing-0);
19
+ line-height: 130%;
20
+ text-transform: none;
21
+ text-decoration: none;
22
+ }
23
+
24
+ .text-article-heading-alternate {
25
+ font-family: var(--font-family-montserrat);
26
+ font-size: var(--font-size-heading-xl);
27
+ font-weight: var(--font-weight-light);
28
+ letter-spacing: var(--letter-spacing-0);
29
+ line-height: 130%;
30
+ text-transform: none;
31
+ text-decoration: none;
32
+ }
33
+
34
+ .text-article-heading-2 {
35
+ font-family: var(--font-family-gulliver);
36
+ font-size: var(--font-size-heading-m);
37
+ font-weight: var(--font-weight-bold);
38
+ letter-spacing: var(--letter-spacing-0);
39
+ line-height: 130%;
40
+ text-transform: none;
41
+ text-decoration: none;
42
+ }
43
+
44
+ .text-article-heading-2-light {
45
+ font-family: var(--font-family-gulliver);
46
+ font-size: var(--font-size-heading-m);
47
+ font-weight: var(--font-weight-regular);
48
+ letter-spacing: var(--letter-spacing-0);
49
+ line-height: 130%;
50
+ text-transform: none;
51
+ text-decoration: none;
52
+ }
53
+
54
+ .text-article-heading-2-alternate {
55
+ font-family: var(--font-family-montserrat);
56
+ font-size: var(--font-size-heading-m);
57
+ font-weight: var(--font-weight-bold);
58
+ letter-spacing: var(--letter-spacing-0);
59
+ line-height: 130%;
60
+ text-transform: none;
61
+ text-decoration: none;
62
+ }
63
+
64
+ .text-article-body {
65
+ font-family: var(--font-family-fira-sans);
66
+ font-size: var(--font-size-body-m);
67
+ font-weight: var(--font-weight-regular);
68
+ letter-spacing: var(--letter-spacing-0);
69
+ line-height: 160%;
70
+ text-transform: none;
71
+ text-decoration: none;
72
+ }
73
+
74
+ .text-article-type {
75
+ font-family: var(--font-family-fira-sans);
76
+ font-size: var(--font-size-body-xl);
77
+ font-weight: var(--font-weight-bold);
78
+ letter-spacing: var(--letter-spacing-s);
79
+ line-height: 160%;
80
+ text-transform: small-caps;
81
+ text-decoration: none;
82
+ }
83
+
84
+ .text-article-intro {
85
+ font-family: var(--font-family-fira-sans);
86
+ font-size: var(--font-size-body-l);
87
+ font-weight: var(--font-weight-light);
88
+ letter-spacing: var(--letter-spacing-0);
89
+ line-height: 160%;
90
+ text-transform: none;
91
+ text-decoration: none;
92
+ }
93
+
94
+ .text-article-city {
95
+ font-family: var(--font-family-fira-sans);
96
+ font-size: var(--font-size-body-xl);
97
+ font-weight: var(--font-weight-regular);
98
+ letter-spacing: var(--letter-spacing-m);
99
+ line-height: 160%;
100
+ text-transform: small-caps;
101
+ text-decoration: none;
102
+ }
103
+
104
+ .text-article-quote {
105
+ font-family: var(--font-family-gulliver);
106
+ font-size: var(--font-size-body-xxl);
107
+ font-weight: var(--font-weight-bold);
108
+ letter-spacing: var(--letter-spacing-0);
109
+ line-height: 130%;
110
+ text-transform: none;
111
+ text-decoration: none;
112
+ }
113
+
114
+ .text-article-question {
115
+ font-family: var(--font-family-fira-sans);
116
+ font-size: var(--font-size-body-m);
117
+ font-weight: var(--font-weight-bold);
118
+ letter-spacing: var(--letter-spacing-0);
119
+ line-height: 160%;
120
+ text-transform: none;
121
+ text-decoration: none;
122
+ }
123
+
124
+ .text-article-drop-cap {
125
+ font-family: var(--font-family-abril-fatface);
126
+ font-size: var(--font-size-body-drop-cap);
127
+ font-weight: var(--font-weight-bold);
128
+ letter-spacing: var(--letter-spacing-0);
129
+ line-height: 160%;
130
+ text-transform: none;
131
+ text-decoration: none;
132
+ }
133
+
134
+ .text-article-drop-cap-alternate {
135
+ font-family: var(--font-family-montserrat);
136
+ font-size: var(--font-size-body-drop-cap);
137
+ font-weight: var(--font-weight-light);
138
+ letter-spacing: var(--letter-spacing-0);
139
+ line-height: 160%;
140
+ text-transform: none;
141
+ text-decoration: none;
142
+ }
143
+
144
+ /* Body styles */
145
+ .text-body-light {
146
+ font-family: var(--font-family-fira-sans);
147
+ font-size: var(--font-size-body-m);
148
+ font-weight: var(--font-weight-light);
149
+ letter-spacing: var(--letter-spacing-0);
150
+ line-height: 160%;
151
+ text-transform: none;
152
+ text-decoration: none;
153
+ }
154
+
155
+ .text-body {
156
+ font-family: var(--font-family-fira-sans);
157
+ font-size: var(--font-size-body-m);
158
+ font-weight: var(--font-weight-regular);
159
+ letter-spacing: var(--letter-spacing-0);
160
+ line-height: 160%;
161
+ text-transform: none;
162
+ text-decoration: none;
163
+ }
164
+
165
+ .text-body-bold {
166
+ font-family: var(--font-family-fira-sans);
167
+ font-size: var(--font-size-body-m);
168
+ font-weight: var(--font-weight-bold);
169
+ letter-spacing: var(--letter-spacing-0);
170
+ line-height: 160%;
171
+ text-transform: none;
172
+ text-decoration: none;
173
+ }
174
+
175
+ .text-body-uppercase {
176
+ font-family: var(--font-family-fira-sans);
177
+ font-size: var(--font-size-body-xl);
178
+ font-weight: var(--font-weight-regular);
179
+ letter-spacing: var(--letter-spacing-s);
180
+ line-height: normal;
181
+ text-transform: small-caps;
182
+ text-decoration: none;
183
+ }
184
+
185
+ .text-body-uppercase-bold {
186
+ font-family: var(--font-family-fira-sans);
187
+ font-size: var(--font-size-body-xl);
188
+ font-weight: var(--font-weight-bold);
189
+ letter-spacing: var(--letter-spacing-s);
190
+ line-height: normal;
191
+ text-transform: small-caps;
192
+ text-decoration: none;
193
+ }
194
+
195
+ .text-body-uppercase-bold-small {
196
+ font-family: var(--font-family-fira-sans);
197
+ font-size: var(--font-size-body-m);
198
+ font-weight: var(--font-weight-bold);
199
+ letter-spacing: var(--letter-spacing-s);
200
+ line-height: normal;
201
+ text-transform: small-caps;
202
+ text-decoration: none;
203
+ }
204
+
205
+ /* Heading styles */
206
+ .text-heading-2 {
207
+ font-family: var(--font-family-gulliver);
208
+ font-size: var(--font-size-heading-m);
209
+ font-weight: var(--font-weight-bold);
210
+ letter-spacing: var(--letter-spacing-0);
211
+ line-height: 130%;
212
+ text-transform: none;
213
+ text-decoration: none;
214
+ }
215
+
216
+ .text-heading-3 {
217
+ font-family: var(--font-family-fira-sans);
218
+ font-size: var(--font-size-heading-s);
219
+ font-weight: var(--font-weight-bold);
220
+ letter-spacing: var(--letter-spacing-0);
221
+ line-height: 130%;
222
+ text-transform: none;
223
+ text-decoration: none;
224
+ }
225
+
226
+ .text-heading-page {
227
+ font-family: var(--font-family-gulliver);
228
+ font-size: var(--font-size-heading-l);
229
+ font-weight: var(--font-weight-bold);
230
+ letter-spacing: var(--letter-spacing-0);
231
+ line-height: 130%;
232
+ text-transform: none;
233
+ text-decoration: none;
234
+ }
235
+
236
+ .text-heading-subheading {
237
+ font-family: var(--font-family-gulliver);
238
+ font-size: var(--font-size-heading-l);
239
+ font-weight: var(--font-weight-regular);
240
+ letter-spacing: var(--letter-spacing-0);
241
+ line-height: 130%;
242
+ text-transform: none;
243
+ text-decoration: none;
244
+ }
245
+
246
+ .text-heading-uppercase {
247
+ font-family: var(--font-family-fira-sans);
248
+ font-size: var(--font-size-heading-xs);
249
+ font-weight: var(--font-weight-bold);
250
+ letter-spacing: var(--letter-spacing-l);
251
+ line-height: 130%;
252
+ text-transform: small-caps;
253
+ text-decoration: none;
254
+ }
255
+
256
+ /* Meta styles */
257
+ .text-meta-light {
258
+ font-family: var(--font-family-fira-sans);
259
+ font-size: var(--font-size-meta);
260
+ font-weight: var(--font-weight-light);
261
+ letter-spacing: var(--letter-spacing-0);
262
+ line-height: 140%;
263
+ text-transform: none;
264
+ text-decoration: none;
265
+ }
266
+
267
+ .text-meta {
268
+ font-family: var(--font-family-fira-sans);
269
+ font-size: var(--font-size-meta);
270
+ font-weight: var(--font-weight-regular);
271
+ letter-spacing: var(--letter-spacing-0);
272
+ line-height: 140%;
273
+ text-transform: none;
274
+ text-decoration: none;
275
+ }
276
+
277
+ .text-meta-bold {
278
+ font-family: var(--font-family-fira-sans);
279
+ font-size: var(--font-size-meta);
280
+ font-weight: var(--font-weight-bold);
281
+ letter-spacing: var(--letter-spacing-0);
282
+ line-height: 140%;
283
+ text-transform: none;
284
+ text-decoration: none;
285
+ }
286
+
287
+ /* Additional styles */
288
+ .text-heading {
289
+ font-family: var(--font-family-gulliver);
290
+ font-size: var(--font-size-heading-xl);
291
+ font-weight: var(--font-weight-bold);
292
+ letter-spacing: var(--letter-spacing-0);
293
+ line-height: 130%;
294
+ text-transform: none;
295
+ text-decoration: none;
296
+ }
297
+
298
+ .text-heading-light {
299
+ font-family: var(--font-family-gulliver);
300
+ font-size: var(--font-size-heading-xl);
301
+ font-weight: var(--font-weight-regular);
302
+ letter-spacing: var(--letter-spacing-0);
303
+ line-height: 130%;
304
+ text-transform: none;
305
+ text-decoration: none;
306
+ }
307
+
308
+ .text-heading-alternate {
309
+ font-family: var(--font-family-montserrat);
310
+ font-size: var(--font-size-heading-xl);
311
+ font-weight: var(--font-weight-light);
312
+ letter-spacing: var(--letter-spacing-0);
313
+ line-height: 130%;
314
+ text-transform: none;
315
+ text-decoration: none;
316
+ }
317
+
318
+ .text-heading-2-light {
319
+ font-family: var(--font-family-gulliver);
320
+ font-size: var(--font-size-heading-m);
321
+ font-weight: var(--font-weight-regular);
322
+ letter-spacing: var(--letter-spacing-0);
323
+ line-height: 130%;
324
+ text-transform: none;
325
+ text-decoration: none;
326
+ }
327
+
328
+ .text-heading-2-alternate {
329
+ font-family: var(--font-family-montserrat);
330
+ font-size: var(--font-size-heading-m);
331
+ font-weight: var(--font-weight-bold);
332
+ letter-spacing: var(--letter-spacing-0);
333
+ line-height: 130%;
334
+ text-transform: none;
335
+ text-decoration: none;
336
+ }
337
+
338
+ .text-quote {
339
+ font-family: var(--font-family-gulliver);
340
+ font-size: var(--font-size-body-xxl);
341
+ font-weight: var(--font-weight-bold);
342
+ letter-spacing: var(--letter-spacing-0);
343
+ line-height: 130%;
344
+ text-transform: none;
345
+ text-decoration: none;
346
+ }
347
+
348
+ .text-intro {
349
+ font-family: var(--font-family-fira-sans);
350
+ font-size: var(--font-size-body-l);
351
+ font-weight: var(--font-weight-light);
352
+ letter-spacing: var(--letter-spacing-0);
353
+ line-height: 160%;
354
+ text-transform: none;
355
+ text-decoration: none;
356
+ }
357
+
358
+ /* Responsive typography classes are handled by CSS variables in tokens.css */
359
+ /* No media queries needed here as the variables themselves change based on screen size */