@digiko-npm/designsystem 0.4.0 → 0.7.1

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 (57) hide show
  1. package/README.md +7 -7
  2. package/dist/designsystem.css +2559 -777
  3. package/dist/designsystem.min.css +2 -2
  4. package/package.json +12 -1
  5. package/src/base/typography.css +8 -8
  6. package/src/components/accordion.css +21 -14
  7. package/src/components/alert.css +25 -19
  8. package/src/components/avatar.css +16 -16
  9. package/src/components/bottom-nav.css +125 -0
  10. package/src/components/breadcrumb.css +7 -0
  11. package/src/components/button.css +10 -2
  12. package/src/components/card.css +6 -42
  13. package/src/components/chip.css +79 -0
  14. package/src/components/collapsible.css +116 -0
  15. package/src/components/command.css +17 -7
  16. package/src/components/custom-select.css +123 -7
  17. package/src/components/datepicker.css +9 -9
  18. package/src/components/description-list.css +98 -0
  19. package/src/components/divider.css +1 -1
  20. package/src/components/drawer.css +28 -19
  21. package/src/components/drop-zone.css +10 -3
  22. package/src/components/dropdown.css +17 -8
  23. package/src/components/empty-state.css +3 -3
  24. package/src/components/field.css +77 -0
  25. package/src/components/icon-btn.css +102 -0
  26. package/src/components/index.css +11 -0
  27. package/src/components/input.css +26 -16
  28. package/src/components/kbd.css +1 -1
  29. package/src/components/modal.css +30 -3
  30. package/src/components/nav.css +20 -10
  31. package/src/components/pagination.css +9 -0
  32. package/src/components/popover.css +10 -10
  33. package/src/components/progress.css +2 -2
  34. package/src/components/result.css +84 -0
  35. package/src/components/search.css +294 -0
  36. package/src/components/skeleton.css +4 -4
  37. package/src/components/slider.css +13 -6
  38. package/src/components/sortable.css +9 -0
  39. package/src/components/spinner.css +60 -0
  40. package/src/components/stat-card.css +41 -0
  41. package/src/components/table.css +3 -3
  42. package/src/components/tabs.css +26 -18
  43. package/src/components/tag.css +11 -3
  44. package/src/components/timeline.css +14 -14
  45. package/src/components/toast.css +19 -7
  46. package/src/components/toggle.css +10 -2
  47. package/src/components/toolbar.css +189 -0
  48. package/src/components/tooltip.css +34 -28
  49. package/src/index.css +6 -4
  50. package/src/tokens/colors.css +18 -6
  51. package/src/tokens/spacing.css +7 -0
  52. package/src/utilities/a11y.css +102 -0
  53. package/src/utilities/index.css +2 -0
  54. package/src/utilities/interactive.css +116 -0
  55. package/src/utilities/layout.css +26 -26
  56. package/src/utilities/spacing.css +52 -52
  57. package/src/utilities/text.css +8 -8
package/src/utilities/text.css CHANGED
@@ -28,7 +28,7 @@
28
28
  .ds-md\:text-4xl { font-size: var(--ds-text-4xl); }
29
29
  .ds-md\:text-6xl { font-size: var(--ds-text-6xl); }
30
30
  }
31
- @media (min-width: 1024px) {
31
+ @media (min-width: 1024px) /* --ds-breakpoint-lg */ {
32
32
  .ds-lg\:text-xl { font-size: var(--ds-text-xl); }
33
33
  .ds-lg\:text-2xl { font-size: var(--ds-text-2xl); }
34
34
  .ds-lg\:text-3xl { font-size: var(--ds-text-3xl); }
@@ -45,9 +45,9 @@
45
45
  .ds-font-bold { font-weight: var(--ds-weight-bold); }
46
46
 
47
47
  /* --- Text Alignment --- */
48
- .ds-text-left { text-align: left; }
48
+ .ds-text-left { text-align: start; }
49
49
  .ds-text-center { text-align: center; }
50
- .ds-text-right { text-align: right; }
50
+ .ds-text-right { text-align: end; }
51
51
  .ds-text-balance { text-wrap: balance; }
52
52
 
53
53
  /* --- Text Color --- */
@@ -164,10 +164,10 @@
164
164
 
165
165
  /* --- Border --- */
166
166
  .ds-border { border: 1px solid var(--ds-color-border); }
167
- .ds-border-t { border-top: 1px solid var(--ds-color-border); }
168
- .ds-border-b { border-bottom: 1px solid var(--ds-color-border); }
169
- .ds-border-l { border-left: 1px solid var(--ds-color-border); }
170
- .ds-border-r { border-right: 1px solid var(--ds-color-border); }
167
+ .ds-border-t { border-block-start: 1px solid var(--ds-color-border); }
168
+ .ds-border-b { border-block-end: 1px solid var(--ds-color-border); }
169
+ .ds-border-l { border-inline-start: 1px solid var(--ds-color-border); }
170
+ .ds-border-r { border-inline-end: 1px solid var(--ds-color-border); }
171
171
  .ds-border-none { border: none; }
172
172
 
173
173
  /* --- Border Color --- */
@@ -179,7 +179,7 @@
179
179
  .ds-border-nav { border-color: var(--ds-color-nav-border); }
180
180
 
181
181
  /* --- Divide --- */
182
- .ds-divide-y > * + * { border-top: 1px solid var(--ds-color-border); }
182
+ .ds-divide-y > * + * { border-block-start: 1px solid var(--ds-color-border); }
183
183
 
184
184
  /* --- Border Radius --- */
185
185
  .ds-rounded-none { border-radius: var(--ds-radius-none); }