@juwel-development/design-system 3.5.0 → 3.6.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 (18) hide show
  1. package/README.md +8 -0
  2. package/dist/design-system.js +317 -180
  3. package/dist/index.css +1 -1
  4. package/dist/types/Layout/Dialog/Dialog.d.ts +104 -0
  5. package/dist/types/Layout/Dialog/DialogCompositionError.d.ts +3 -0
  6. package/dist/types/Layout/Dialog/DialogNamingError.d.ts +3 -0
  7. package/dist/types/Theme/Palette.d.ts +10 -0
  8. package/dist/types/index.d.ts +1 -0
  9. package/package.json +1 -1
  10. package/src/Layout/Dialog/Dialog.tsx +478 -0
  11. package/src/Layout/Dialog/DialogCompositionError.ts +6 -0
  12. package/src/Layout/Dialog/DialogNamingError.ts +8 -0
  13. package/src/Theme/Palette.ts +15 -0
  14. package/src/Theme/renderTokens.ts +31 -3
  15. package/src/index.ts +1 -0
  16. package/src/tokens.css +20 -0
  17. package/src/tokens.dark.css +19 -0
  18. package/src/tokens.light.css +19 -0
package/src/tokens.dark.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --color-control-border: #94a3b8;
13
13
  --color-rule: #5b6a80;
14
14
  --color-backing: #1e293b;
15
+ --color-scrim: rgb(15 23 42 / 0.5);
15
16
  --color-meter-fill: #f8fafc;
16
17
  --color-meter-track: #334155;
17
18
  --color-primary: #8b5cf6;
@@ -38,6 +39,7 @@
38
39
  --color-control-border: var(--color-control-border);
39
40
  --color-rule: var(--color-rule);
40
41
  --color-backing: var(--color-backing);
42
+ --color-scrim: var(--color-scrim);
41
43
  --color-meter-fill: var(--color-meter-fill);
42
44
  --color-meter-track: var(--color-meter-track);
43
45
  --color-primary: var(--color-primary);
@@ -78,6 +80,7 @@
78
80
  /* Radius is not a colour either: one token for the corner every control reads, beside the others. */
79
81
  :root {
80
82
  --radius-control: 0.5rem;
83
+ --radius-dialog: 0.375rem;
81
84
  }
82
85
 
83
86
  /* The control minimum width is not a colour either, and sits in :root beside radius. */
@@ -135,6 +138,12 @@
135
138
  is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
136
139
  --leading-label: 1.5;
137
140
 
141
+ /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
142
+ the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
143
+ role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
144
+ --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
145
+ --leading-dialog-title: 1.2;
146
+
138
147
  /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
139
148
  style, --tracking-optical a correction that varies with size. The names say which is which, so the
140
149
  distinction survives without the ADR in hand. Scope: the title role and above - H1, H2 and the page
@@ -215,3 +224,13 @@
215
224
  :root {
216
225
  --meter-track-thickness: 0.5rem;
217
226
  }
227
+
228
+ /* The scrim's blur is not a colour either, and sits in :root beside the meter track. */
229
+ :root {
230
+ --scrim-blur: 0;
231
+ }
232
+
233
+ /* The floating elevation is not a colour either, and sits in :root at the end of the non-colour blocks. */
234
+ :root {
235
+ --elevation-floating: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
236
+ }
package/src/tokens.light.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --color-control-border: #64748b;
13
13
  --color-rule: #808fa3;
14
14
  --color-backing: #f1f5f9;
15
+ --color-scrim: rgb(15 23 42 / 0.5);
15
16
  --color-meter-fill: #0f172a;
16
17
  --color-meter-track: #e2e8f0;
17
18
  --color-primary: #7c3aed;
@@ -38,6 +39,7 @@
38
39
  --color-control-border: var(--color-control-border);
39
40
  --color-rule: var(--color-rule);
40
41
  --color-backing: var(--color-backing);
42
+ --color-scrim: var(--color-scrim);
41
43
  --color-meter-fill: var(--color-meter-fill);
42
44
  --color-meter-track: var(--color-meter-track);
43
45
  --color-primary: var(--color-primary);
@@ -78,6 +80,7 @@
78
80
  /* Radius is not a colour either: one token for the corner every control reads, beside the others. */
79
81
  :root {
80
82
  --radius-control: 0.5rem;
83
+ --radius-dialog: 0.375rem;
81
84
  }
82
85
 
83
86
  /* The control minimum width is not a colour either, and sits in :root beside radius. */
@@ -135,6 +138,12 @@
135
138
  is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
136
139
  --leading-label: 1.5;
137
140
 
141
+ /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
142
+ the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
143
+ role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
144
+ --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
145
+ --leading-dialog-title: 1.2;
146
+
138
147
  /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
139
148
  style, --tracking-optical a correction that varies with size. The names say which is which, so the
140
149
  distinction survives without the ADR in hand. Scope: the title role and above - H1, H2 and the page
@@ -215,3 +224,13 @@
215
224
  :root {
216
225
  --meter-track-thickness: 0.5rem;
217
226
  }
227
+
228
+ /* The scrim's blur is not a colour either, and sits in :root beside the meter track. */
229
+ :root {
230
+ --scrim-blur: 0;
231
+ }
232
+
233
+ /* The floating elevation is not a colour either, and sits in :root at the end of the non-colour blocks. */
234
+ :root {
235
+ --elevation-floating: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
236
+ }