@prokodo/ui 1.0.5 → 1.0.6

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 (38) hide show
  1. package/dist/components/RTE/RTE.css +2 -0
  2. package/dist/components/accordion/Accordion.css +4 -0
  3. package/dist/components/autocomplete/Autocomplete.css +2 -0
  4. package/dist/components/avatar/Avatar.css +3 -0
  5. package/dist/components/button/Button.css +4 -0
  6. package/dist/components/calendly/Calendly.css +2 -0
  7. package/dist/components/card/Card.css +7 -0
  8. package/dist/components/carousel/Carousel.css +2 -0
  9. package/dist/components/datePicker/DatePicker.css +2 -0
  10. package/dist/components/dialog/Dialog.css +2 -0
  11. package/dist/components/drawer/Drawer.css +3 -0
  12. package/dist/components/dynamic-list/DynamicList.css +5 -0
  13. package/dist/components/form/Form.css +184 -0
  14. package/dist/components/headline/Headline.css +2 -0
  15. package/dist/components/image-text/ImageText.css +8 -0
  16. package/dist/components/input/Input.css +2 -0
  17. package/dist/components/inputOTP/InputOTP.css +2 -0
  18. package/dist/components/list/List.css +4 -0
  19. package/dist/components/map/Map.css +2 -0
  20. package/dist/components/post-item/PostItem.css +165 -0
  21. package/dist/components/post-teaser/PostTeaser.css +8 -0
  22. package/dist/components/post-widget/PostWidget.css +5 -0
  23. package/dist/components/post-widget-carousel/PostWidgetCarousel.css +7 -0
  24. package/dist/components/quote/Quote.css +5 -0
  25. package/dist/components/rating/Rating.css +2 -0
  26. package/dist/components/rich-text/RichText.css +5 -0
  27. package/dist/components/select/Select.css +2 -0
  28. package/dist/components/sidenav/SideNav.css +4 -0
  29. package/dist/components/slider/Slider.css +2 -0
  30. package/dist/components/snackbar/Snackbar.css +2 -0
  31. package/dist/components/stepper/Stepper.css +2 -0
  32. package/dist/components/switch/Switch.css +2 -0
  33. package/dist/components/table/Table.css +6 -0
  34. package/dist/components/tabs/Tabs.css +2 -0
  35. package/dist/components/teaser/Teaser.css +8 -0
  36. package/dist/constants/project.js +1 -1
  37. package/dist/theme-tokens.css +723 -0
  38. package/package.json +3 -2
@@ -1,3 +1,5 @@
1
+ @import "../input/Input.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,7 @@
1
+ @import "../button/Button.css";
2
+ @import "../headline/Headline.css";
3
+ @import "../rich-text/RichText.css";
4
+
1
5
  /* stylelint-disable */
2
6
  /**
3
7
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../input/Input.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,6 @@
1
+ @import "../image/Image.css";
2
+ @import "../link/Link.css";
3
+
1
4
  /* stylelint-disable */
2
5
  /**
3
6
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,7 @@
1
+ @import "../icon/Icon.css";
2
+ @import "../image/Image.css";
3
+ @import "../link/Link.css";
4
+
1
5
  /* stylelint-disable */
2
6
  /**
3
7
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../animated/Animated.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,10 @@
1
+ @import "../animated/Animated.css";
2
+ @import "../headline/Headline.css";
3
+ @import "../image/Image.css";
4
+ @import "../link/Link.css";
5
+ @import "../rich-text/RichText.css";
6
+ @import "../skeleton/Skeleton.css";
7
+
1
8
  /* stylelint-disable */
2
9
  /**
3
10
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../button/Button.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../input/Input.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../button/Button.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,6 @@
1
+ @import "../button/Button.css";
2
+ @import "../headline/Headline.css";
3
+
1
4
  /* stylelint-disable */
2
5
  /**
3
6
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,8 @@
1
+ @import "../button/Button.css";
2
+ @import "../input/Input.css";
3
+ @import "../label/Label.css";
4
+ @import "../select/Select.css";
5
+
1
6
  @charset "UTF-8";
2
7
  /* stylelint-disable */
3
8
  /**
@@ -1,3 +1,18 @@
1
+ @import "../autocomplete/Autocomplete.css";
2
+ @import "../button/Button.css";
3
+ @import "../checkbox/Checkbox.css";
4
+ @import "../checkbox-group/CheckboxGroup.css";
5
+ @import "../datePicker/DatePicker.css";
6
+ @import "../dynamic-list/DynamicList.css";
7
+ @import "../grid/Grid.css";
8
+ @import "../headline/Headline.css";
9
+ @import "../input/Input.css";
10
+ @import "../inputOTP/InputOTP.css";
11
+ @import "../rating/Rating.css";
12
+ @import "../select/Select.css";
13
+ @import "../slider/Slider.css";
14
+ @import "../switch/Switch.css";
15
+
1
16
  /* stylelint-disable */
2
17
  /**
3
18
  * Calculates a rem-based value by a given pixel size.
@@ -151,4 +166,173 @@
151
166
 
152
167
  .prokodo-FormField {
153
168
  padding-bottom: 1rem;
169
+ }
170
+
171
+ /* stylelint-disable */
172
+ /**
173
+ * Calculates a rem-based value by a given pixel size.
174
+ */
175
+ /* stylelint-disable */
176
+ /**
177
+ * Applies flex-column and gap.
178
+ */
179
+ /*
180
+ As example (light, primary)
181
+ See defined modes in designsystem/config/gradients
182
+ */
183
+ /**
184
+ * Mixin that renders a media query that target screens that are larger than the
185
+ * given size.
186
+ */
187
+ /**
188
+ * Mixin that renders a media query that target screens that are smaller than the
189
+ * given size.
190
+ */
191
+ /**
192
+ * Mixin that renders a media query that target screens in between the given range.
193
+ */
194
+ /**
195
+ * Mixin that renders a media query that target screens that have height larger than the
196
+ * given size.
197
+ */
198
+ /**
199
+ * Mixin that renders a media query that target screens that have height smaller than the
200
+ * given size.
201
+ */
202
+ /* stylelint-disable */
203
+ /* M3/Elevation Light/1 */
204
+ /* M3/Elevation Light/2 */
205
+ /* M3/Elevation/5 */
206
+ /* M3/Elevation/1 Text */
207
+ /* Inner elevations */
208
+ /* stylelint-disable */
209
+ /**
210
+ * Visually hides an element but not removes them for screen readers.
211
+ */
212
+ /**
213
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
214
+ * visible for users.
215
+ */
216
+ /**
217
+ * Creates a selector for :hover effects depending on the current user input
218
+ * device. If the input device is a mouse, this hover effect will appear.
219
+ * Keyboard and touch inputs are ignored.
220
+ *
221
+ * Example usage:
222
+ * .link {
223
+ * color: blue;
224
+ *
225
+ * @include when-hovered() {
226
+ * color: green;
227
+ * }
228
+ * }
229
+ */
230
+ /**
231
+ * Creates a selector for :active effects depending on the current user input
232
+ * device. The state applies when the input device is a mouse or keyboard. Touch
233
+ * devices will not show a pressed state.
234
+ *
235
+ * Example usage:
236
+ * .link {
237
+ * box-shadow: none;
238
+ *
239
+ * @include when-pressed() {
240
+ * box-shadow: inset 0 2px 4px grey;
241
+ * }
242
+ * }
243
+ */
244
+ /**
245
+ * Creates a selector for :focus effects depending on the current user input
246
+ * device. When the user navigates using a keyboard, the focus effect defined in
247
+ * here is applied. For other input devices they don't show up.
248
+ *
249
+ * Example usage:
250
+ * .link {
251
+ * text-decoration: none;
252
+ *
253
+ * @include when-focused() {
254
+ * text-decoration: underline;
255
+ * }
256
+ * }
257
+ */
258
+ /**
259
+ * Creates a selector for :focus-within effects depending on the current user
260
+ * input device. When the user navigates using a keyboard, the focus effect
261
+ * defined in here is applied. For other input devices they don't show up.
262
+ *
263
+ * Example usage:
264
+ * .link {
265
+ * img {
266
+ * opacity: 0.75;
267
+ *
268
+ * @include when-focused-within() {
269
+ * opacity: 1;
270
+ * }
271
+ * }
272
+ * }
273
+ */
274
+ /**
275
+ * Wrapper for media query "prefers-reduced-motion".
276
+ */
277
+ /**
278
+ * This helper hides the outline but still makes it visible for
279
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
280
+ */
281
+ /**
282
+ * This helper hides the outline but still makes it visible for
283
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
284
+ */
285
+ /**
286
+ * Renders an alternative, but application consistent focus-ring.
287
+ */
288
+ /**
289
+ * Specifies the outer layout for all contents across breakpoints. Apply this
290
+ * mixin to the container element, to center the contents on the screen within
291
+ * the layout offsets.
292
+ */
293
+ /**
294
+ * This mixin specifies basic text-styles for components that render a richtext
295
+ * content.
296
+ */
297
+ .prokodo-FormResponse {
298
+ padding: 0 1rem;
299
+ }
300
+ .prokodo-FormResponse__success {
301
+ color: var(--color-success);
302
+ font-weight: 700;
303
+ }
304
+ .prokodo-FormResponse__errors {
305
+ display: block;
306
+ margin-bottom: 0.75rem;
307
+ color: var(--color-grey-300);
308
+ }
309
+ .prokodo-FormResponse__errors__item {
310
+ display: block;
311
+ padding-bottom: 1rem;
312
+ font-weight: 500;
313
+ font-size: 1.125rem;
314
+ font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
315
+ font-style: normal;
316
+ line-height: 1.55;
317
+ letter-spacing: 0.03em;
318
+ text-transform: none;
319
+ text-align: left;
320
+ text-decoration: none;
321
+ }
322
+ @media screen and (min-width: 480px) {
323
+ .prokodo-FormResponse__errors__item {
324
+ font-size: 1.125rem;
325
+ line-height: 1.5;
326
+ }
327
+ }
328
+ @media screen and (min-width: 960px) {
329
+ .prokodo-FormResponse__errors__item {
330
+ font-size: 1.125rem;
331
+ line-height: 1.5;
332
+ }
333
+ }
334
+ .prokodo-FormResponse__errors__desc {
335
+ display: block;
336
+ padding: 0;
337
+ color: var(--color-error);
154
338
  }
@@ -1,3 +1,5 @@
1
+ @import "../rich-text/RichText.css";
2
+
1
3
  @charset "UTF-8";
2
4
  /* stylelint-disable */
3
5
  /**
@@ -1,3 +1,11 @@
1
+ @import "../animated/Animated.css";
2
+ @import "../button/Button.css";
3
+ @import "../grid/Grid.css";
4
+ @import "../headline/Headline.css";
5
+ @import "../image/Image.css";
6
+ @import "../lottie/Lottie.css";
7
+ @import "../rich-text/RichText.css";
8
+
1
9
  /* stylelint-disable */
2
10
  /**
3
11
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../label/Label.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../input/Input.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,7 @@
1
+ @import "../card/Card.css";
2
+ @import "../icon/Icon.css";
3
+ @import "../link/Link.css";
4
+
1
5
  /* stylelint-disable */
2
6
  /**
3
7
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../skeleton/Skeleton.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,11 @@
1
+ @import "../animated/Animated.css";
2
+ @import "../avatar/Avatar.css";
3
+ @import "../button/Button.css";
4
+ @import "../card/Card.css";
5
+ @import "../headline/Headline.css";
6
+ @import "../image/Image.css";
7
+ @import "../rich-text/RichText.css";
8
+
1
9
  /* stylelint-disable */
2
10
  /**
3
11
  * Calculates a rem-based value by a given pixel size.
@@ -286,4 +294,161 @@
286
294
  .prokodo-PostItem__button {
287
295
  width: auto;
288
296
  }
297
+ }
298
+
299
+ /* stylelint-disable */
300
+ /**
301
+ * Calculates a rem-based value by a given pixel size.
302
+ */
303
+ /* stylelint-disable */
304
+ /**
305
+ * Applies flex-column and gap.
306
+ */
307
+ /*
308
+ As example (light, primary)
309
+ See defined modes in designsystem/config/gradients
310
+ */
311
+ /**
312
+ * Mixin that renders a media query that target screens that are larger than the
313
+ * given size.
314
+ */
315
+ /**
316
+ * Mixin that renders a media query that target screens that are smaller than the
317
+ * given size.
318
+ */
319
+ /**
320
+ * Mixin that renders a media query that target screens in between the given range.
321
+ */
322
+ /**
323
+ * Mixin that renders a media query that target screens that have height larger than the
324
+ * given size.
325
+ */
326
+ /**
327
+ * Mixin that renders a media query that target screens that have height smaller than the
328
+ * given size.
329
+ */
330
+ /* stylelint-disable */
331
+ /* M3/Elevation Light/1 */
332
+ /* M3/Elevation Light/2 */
333
+ /* M3/Elevation/5 */
334
+ /* M3/Elevation/1 Text */
335
+ /* Inner elevations */
336
+ /* stylelint-disable */
337
+ /**
338
+ * Visually hides an element but not removes them for screen readers.
339
+ */
340
+ /**
341
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
342
+ * visible for users.
343
+ */
344
+ /**
345
+ * Creates a selector for :hover effects depending on the current user input
346
+ * device. If the input device is a mouse, this hover effect will appear.
347
+ * Keyboard and touch inputs are ignored.
348
+ *
349
+ * Example usage:
350
+ * .link {
351
+ * color: blue;
352
+ *
353
+ * @include when-hovered() {
354
+ * color: green;
355
+ * }
356
+ * }
357
+ */
358
+ /**
359
+ * Creates a selector for :active effects depending on the current user input
360
+ * device. The state applies when the input device is a mouse or keyboard. Touch
361
+ * devices will not show a pressed state.
362
+ *
363
+ * Example usage:
364
+ * .link {
365
+ * box-shadow: none;
366
+ *
367
+ * @include when-pressed() {
368
+ * box-shadow: inset 0 2px 4px grey;
369
+ * }
370
+ * }
371
+ */
372
+ /**
373
+ * Creates a selector for :focus effects depending on the current user input
374
+ * device. When the user navigates using a keyboard, the focus effect defined in
375
+ * here is applied. For other input devices they don't show up.
376
+ *
377
+ * Example usage:
378
+ * .link {
379
+ * text-decoration: none;
380
+ *
381
+ * @include when-focused() {
382
+ * text-decoration: underline;
383
+ * }
384
+ * }
385
+ */
386
+ /**
387
+ * Creates a selector for :focus-within effects depending on the current user
388
+ * input device. When the user navigates using a keyboard, the focus effect
389
+ * defined in here is applied. For other input devices they don't show up.
390
+ *
391
+ * Example usage:
392
+ * .link {
393
+ * img {
394
+ * opacity: 0.75;
395
+ *
396
+ * @include when-focused-within() {
397
+ * opacity: 1;
398
+ * }
399
+ * }
400
+ * }
401
+ */
402
+ /**
403
+ * Wrapper for media query "prefers-reduced-motion".
404
+ */
405
+ /**
406
+ * This helper hides the outline but still makes it visible for
407
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
408
+ */
409
+ /**
410
+ * This helper hides the outline but still makes it visible for
411
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
412
+ */
413
+ /**
414
+ * Renders an alternative, but application consistent focus-ring.
415
+ */
416
+ /**
417
+ * Specifies the outer layout for all contents across breakpoints. Apply this
418
+ * mixin to the container element, to center the contents on the screen within
419
+ * the layout offsets.
420
+ */
421
+ /**
422
+ * This mixin specifies basic text-styles for components that render a richtext
423
+ * content.
424
+ */
425
+ .prokodo-PostItemAuthor {
426
+ display: flex;
427
+ align-items: center;
428
+ padding-right: 1.5rem;
429
+ }
430
+ .prokodo-PostItemAuthor__name {
431
+ padding-left: 0.75rem;
432
+ color: var(--color-grey-500);
433
+ font-weight: 500;
434
+ font-size: 1.125rem;
435
+ font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
436
+ font-style: normal;
437
+ line-height: 1.55;
438
+ letter-spacing: 0.03em;
439
+ text-transform: none;
440
+ text-align: left;
441
+ text-decoration: none;
442
+ }
443
+ @media screen and (min-width: 480px) {
444
+ .prokodo-PostItemAuthor__name {
445
+ font-size: 1.125rem;
446
+ line-height: 1.5;
447
+ }
448
+ }
449
+ @media screen and (min-width: 960px) {
450
+ .prokodo-PostItemAuthor__name {
451
+ font-size: 1.125rem;
452
+ line-height: 1.5;
453
+ }
289
454
  }
@@ -1,3 +1,11 @@
1
+ @import "../card/Card.css";
2
+ @import "../chip/Chip.css";
3
+ @import "../headline/Headline.css";
4
+ @import "../icon/Icon.css";
5
+ @import "../image/Image.css";
6
+ @import "../link/Link.css";
7
+ @import "../rich-text/RichText.css";
8
+
1
9
  /* stylelint-disable */
2
10
  /**
3
11
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,8 @@
1
+ @import "../card/Card.css";
2
+ @import "../headline/Headline.css";
3
+ @import "../image/Image.css";
4
+ @import "../link/Link.css";
5
+
1
6
  /* stylelint-disable */
2
7
  /**
3
8
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,10 @@
1
+ @import "../button/Button.css";
2
+ @import "../card/Card.css";
3
+ @import "../carousel/Carousel.css";
4
+ @import "../headline/Headline.css";
5
+ @import "../image/Image.css";
6
+ @import "../link/Link.css";
7
+
1
8
  /* stylelint-disable */
2
9
  /**
3
10
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,8 @@
1
+ @import "../avatar/Avatar.css";
2
+ @import "../card/Card.css";
3
+ @import "../headline/Headline.css";
4
+ @import "../rich-text/RichText.css";
5
+
1
6
  /* stylelint-disable */
2
7
  /**
3
8
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../label/Label.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,8 @@
1
+ @import "../headline/Headline.css";
2
+ @import "../icon/Icon.css";
3
+ @import "../image/Image.css";
4
+ @import "../link/Link.css";
5
+
1
6
  /* stylelint-disable */
2
7
  /**
3
8
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../label/Label.css";
2
+
1
3
  @charset "UTF-8";
2
4
  /* stylelint-disable */
3
5
  /**
@@ -1,3 +1,7 @@
1
+ @import "../headline/Headline.css";
2
+ @import "../icon/Icon.css";
3
+ @import "../link/Link.css";
4
+
1
5
  @charset "UTF-8";
2
6
  /* stylelint-disable */
3
7
  /**
@@ -1,3 +1,5 @@
1
+ @import "../label/Label.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../icon/Icon.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../icon/Icon.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../icon/Icon.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,9 @@
1
+ @import "../animated/Animated.css";
2
+ @import "../headline/Headline.css";
3
+ @import "../icon/Icon.css";
4
+ @import "../link/Link.css";
5
+ @import "../rich-text/RichText.css";
6
+
1
7
  /* stylelint-disable */
2
8
  /**
3
9
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,5 @@
1
+ @import "../chip/Chip.css";
2
+
1
3
  /* stylelint-disable */
2
4
  /**
3
5
  * Calculates a rem-based value by a given pixel size.
@@ -1,3 +1,11 @@
1
+ @import "../card/Card.css";
2
+ @import "../headline/Headline.css";
3
+ @import "../icon/Icon.css";
4
+ @import "../image/Image.css";
5
+ @import "../link/Link.css";
6
+ @import "../lottie/Lottie.css";
7
+ @import "../rich-text/RichText.css";
8
+
1
9
  /* stylelint-disable */
2
10
  /**
3
11
  * Calculates a rem-based value by a given pixel size.
@@ -1,4 +1,4 @@
1
- const PROKODO_UI_VERSION = "1.0.5";
1
+ const PROKODO_UI_VERSION = "1.0.6";
2
2
  export {
3
3
  PROKODO_UI_VERSION
4
4
  };