@juwel-development/design-system 3.2.0 → 3.4.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 (31) hide show
  1. package/README.md +32 -0
  2. package/dist/design-system.js +390 -138
  3. package/dist/index.css +1 -1
  4. package/dist/types/Arrangement/Stack/Stack.d.ts +19 -6
  5. package/dist/types/Display/Collection/Collection.d.ts +30 -0
  6. package/dist/types/Display/Meter/Meter.d.ts +59 -0
  7. package/dist/types/Display/Meter/MeterConfigurationError.d.ts +3 -0
  8. package/dist/types/Interaction/Slider/Slider.d.ts +41 -0
  9. package/dist/types/Interaction/Slider/SliderConfigurationError.d.ts +3 -0
  10. package/dist/types/Interaction/Tabs/Tabs.d.ts +79 -0
  11. package/dist/types/Interaction/Tabs/TabsCompositionError.d.ts +3 -0
  12. package/dist/types/Layout/Sidebar/Sidebar.d.ts +69 -0
  13. package/dist/types/Theme/Palette.d.ts +13 -0
  14. package/dist/types/index.d.ts +5 -0
  15. package/package.json +1 -1
  16. package/src/Arrangement/Stack/Stack.tsx +30 -10
  17. package/src/Display/Collection/Collection.tsx +58 -0
  18. package/src/Display/Meter/Meter.tsx +136 -0
  19. package/src/Display/Meter/MeterConfigurationError.ts +6 -0
  20. package/src/Interaction/Slider/Slider.tsx +125 -0
  21. package/src/Interaction/Slider/SliderConfigurationError.ts +6 -0
  22. package/src/Interaction/Tabs/Tabs.tsx +284 -0
  23. package/src/Interaction/Tabs/TabsCompositionError.ts +6 -0
  24. package/src/Layout/Cover/Cover.tsx +3 -3
  25. package/src/Layout/Sidebar/Sidebar.tsx +224 -0
  26. package/src/Theme/Palette.ts +20 -0
  27. package/src/Theme/renderTokens.ts +54 -0
  28. package/src/index.ts +5 -0
  29. package/src/tokens.css +31 -0
  30. package/src/tokens.dark.css +29 -0
  31. package/src/tokens.light.css +29 -0
package/src/tokens.css CHANGED
@@ -17,6 +17,8 @@
17
17
  --color-control-border: #64748b;
18
18
  --color-rule: #808fa3;
19
19
  --color-backing: #f1f5f9;
20
+ --color-meter-fill: #0f172a;
21
+ --color-meter-track: #e2e8f0;
20
22
  --color-primary: #7c3aed;
21
23
  --color-primary-hover: #6d28d9;
22
24
  --color-primary-foreground: #f8fafc;
@@ -41,6 +43,8 @@
41
43
  --color-control-border: #94a3b8;
42
44
  --color-rule: #5b6a80;
43
45
  --color-backing: #1e293b;
46
+ --color-meter-fill: #f8fafc;
47
+ --color-meter-track: #334155;
44
48
  --color-primary: #8b5cf6;
45
49
  --color-primary-hover: #a78bfa;
46
50
  --color-primary-foreground: #020617;
@@ -65,6 +69,8 @@
65
69
  --color-control-border: var(--color-control-border);
66
70
  --color-rule: var(--color-rule);
67
71
  --color-backing: var(--color-backing);
72
+ --color-meter-fill: var(--color-meter-fill);
73
+ --color-meter-track: var(--color-meter-track);
68
74
  --color-primary: var(--color-primary);
69
75
  --color-primary-hover: var(--color-primary-hover);
70
76
  --color-primary-foreground: var(--color-primary-foreground);
@@ -195,6 +201,11 @@
195
201
  --space-band: 4em;
196
202
  }
197
203
 
204
+ /* Collection's vertical item padding, measured against inherited type. */
205
+ :root {
206
+ --space-collection-item: 1em;
207
+ }
208
+
198
209
  /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
199
210
  :root {
200
211
  --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -215,3 +226,23 @@
215
226
  --tick-length: 0.9rem;
216
227
  --tick-thickness: 1px;
217
228
  }
229
+
230
+ /* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
231
+ :root {
232
+ --tab-marker-thickness: 2px;
233
+ }
234
+
235
+ :root {
236
+ --tab-inset-inline: 1em;
237
+ --tab-inset-block: 0.5em;
238
+ }
239
+
240
+ :root {
241
+ --slider-track-thickness: 0.25rem;
242
+ --slider-thumb-size: 1.5rem;
243
+ }
244
+
245
+ /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
246
+ :root {
247
+ --meter-track-thickness: 0.5rem;
248
+ }
package/src/tokens.dark.css CHANGED
@@ -12,6 +12,8 @@
12
12
  --color-control-border: #94a3b8;
13
13
  --color-rule: #5b6a80;
14
14
  --color-backing: #1e293b;
15
+ --color-meter-fill: #f8fafc;
16
+ --color-meter-track: #334155;
15
17
  --color-primary: #8b5cf6;
16
18
  --color-primary-hover: #a78bfa;
17
19
  --color-primary-foreground: #020617;
@@ -36,6 +38,8 @@
36
38
  --color-control-border: var(--color-control-border);
37
39
  --color-rule: var(--color-rule);
38
40
  --color-backing: var(--color-backing);
41
+ --color-meter-fill: var(--color-meter-fill);
42
+ --color-meter-track: var(--color-meter-track);
39
43
  --color-primary: var(--color-primary);
40
44
  --color-primary-hover: var(--color-primary-hover);
41
45
  --color-primary-foreground: var(--color-primary-foreground);
@@ -166,6 +170,11 @@
166
170
  --space-band: 4em;
167
171
  }
168
172
 
173
+ /* Collection's vertical item padding, measured against inherited type. */
174
+ :root {
175
+ --space-collection-item: 1em;
176
+ }
177
+
169
178
  /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
170
179
  :root {
171
180
  --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -186,3 +195,23 @@
186
195
  --tick-length: 0.9rem;
187
196
  --tick-thickness: 1px;
188
197
  }
198
+
199
+ /* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
200
+ :root {
201
+ --tab-marker-thickness: 2px;
202
+ }
203
+
204
+ :root {
205
+ --tab-inset-inline: 1em;
206
+ --tab-inset-block: 0.5em;
207
+ }
208
+
209
+ :root {
210
+ --slider-track-thickness: 0.25rem;
211
+ --slider-thumb-size: 1.5rem;
212
+ }
213
+
214
+ /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
215
+ :root {
216
+ --meter-track-thickness: 0.5rem;
217
+ }
package/src/tokens.light.css CHANGED
@@ -12,6 +12,8 @@
12
12
  --color-control-border: #64748b;
13
13
  --color-rule: #808fa3;
14
14
  --color-backing: #f1f5f9;
15
+ --color-meter-fill: #0f172a;
16
+ --color-meter-track: #e2e8f0;
15
17
  --color-primary: #7c3aed;
16
18
  --color-primary-hover: #6d28d9;
17
19
  --color-primary-foreground: #f8fafc;
@@ -36,6 +38,8 @@
36
38
  --color-control-border: var(--color-control-border);
37
39
  --color-rule: var(--color-rule);
38
40
  --color-backing: var(--color-backing);
41
+ --color-meter-fill: var(--color-meter-fill);
42
+ --color-meter-track: var(--color-meter-track);
39
43
  --color-primary: var(--color-primary);
40
44
  --color-primary-hover: var(--color-primary-hover);
41
45
  --color-primary-foreground: var(--color-primary-foreground);
@@ -166,6 +170,11 @@
166
170
  --space-band: 4em;
167
171
  }
168
172
 
173
+ /* Collection's vertical item padding, measured against inherited type. */
174
+ :root {
175
+ --space-collection-item: 1em;
176
+ }
177
+
169
178
  /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
170
179
  :root {
171
180
  --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -186,3 +195,23 @@
186
195
  --tick-length: 0.9rem;
187
196
  --tick-thickness: 1px;
188
197
  }
198
+
199
+ /* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
200
+ :root {
201
+ --tab-marker-thickness: 2px;
202
+ }
203
+
204
+ :root {
205
+ --tab-inset-inline: 1em;
206
+ --tab-inset-block: 0.5em;
207
+ }
208
+
209
+ :root {
210
+ --slider-track-thickness: 0.25rem;
211
+ --slider-thumb-size: 1.5rem;
212
+ }
213
+
214
+ /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
215
+ :root {
216
+ --meter-track-thickness: 0.5rem;
217
+ }