@juwel-development/design-system 4.2.1 → 4.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.
- package/dist/design-system.js +560 -464
- package/dist/styles.css +1 -1
- package/dist/styles.dark.css +1 -1
- package/dist/styles.light.css +1 -1
- package/dist/types/Arrangement/ColumnLayout/ColumnLayout.d.ts +17 -2
- package/dist/types/Display/Table/Table.d.ts +1 -0
- package/dist/types/Interaction/Slider/Slider.d.ts +17 -7
- package/dist/types/Layout/Pane/Pane.d.ts +31 -5
- package/dist/types/Layout/Screen/Screen.d.ts +28 -8
- package/package.json +1 -1
- package/src/Arrangement/ColumnLayout/ColumnLayout.tsx +55 -5
- package/src/Display/Table/Table.tsx +5 -1
- package/src/Interaction/Slider/Slider.tsx +51 -16
- package/src/Interaction/Stepper/Stepper.tsx +2 -1
- package/src/Interaction/Tabs/Tabs.tsx +6 -1
- package/src/Layout/Pane/Pane.tsx +65 -14
- package/src/Layout/Screen/Screen.tsx +123 -13
- package/src/Layout/ScrollContainer/ScrollContainer.tsx +1 -0
- package/src/Theme/renderTokens.ts +13 -0
- package/src/tokens.css +7 -0
- package/src/tokens.dark.css +7 -0
- package/src/tokens.light.css +7 -0
|
@@ -254,6 +254,16 @@ const BOX_INSET = `:root {
|
|
|
254
254
|
--space-box-inset: 1em;
|
|
255
255
|
}`;
|
|
256
256
|
|
|
257
|
+
/* Screen's compact console treatment (#158, ADR 0008): one value per enclosure position, so a
|
|
258
|
+
theme tunes it without retuning the generic region, box-inset and stack roles descendants read.
|
|
259
|
+
In em like those roles. Constraint: nonnegative; Screen and Pane floor them at the focus ring's
|
|
260
|
+
room. */
|
|
261
|
+
const CONSOLE_SPACING = `:root {
|
|
262
|
+
--space-screen-region-compact: 0.5em;
|
|
263
|
+
--space-pane-inset-compact: 0.5em;
|
|
264
|
+
--space-pane-slot-compact: 0.25em;
|
|
265
|
+
}`;
|
|
266
|
+
|
|
257
267
|
/* Table cell insets (#115): one inline/block pair per density, in :root so a brand tunes both
|
|
258
268
|
treatments without Table gaining a measurement prop. comfortable is exactly what px-4 / py-2
|
|
259
269
|
resolved to, so the default moves nothing; compact halves both. In rem: cell type is fixed at the
|
|
@@ -478,6 +488,9 @@ ${COLUMN_LAYOUT_FIT}
|
|
|
478
488
|
/* Box's inner padding, measured against inherited type, beside Collection's. */
|
|
479
489
|
${BOX_INSET}
|
|
480
490
|
|
|
491
|
+
/* Screen's compact console positions, beside the roles they stand in for. */
|
|
492
|
+
${CONSOLE_SPACING}
|
|
493
|
+
|
|
481
494
|
/* Callout marks an edge without enclosing or arranging its content. */
|
|
482
495
|
${CALLOUT_MARK}
|
|
483
496
|
|
package/src/tokens.css
CHANGED
|
@@ -293,6 +293,13 @@
|
|
|
293
293
|
--space-box-inset: 1em;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
|
+
/* Screen's compact console positions, beside the roles they stand in for. */
|
|
297
|
+
:root {
|
|
298
|
+
--space-screen-region-compact: 0.5em;
|
|
299
|
+
--space-pane-inset-compact: 0.5em;
|
|
300
|
+
--space-pane-slot-compact: 0.25em;
|
|
301
|
+
}
|
|
302
|
+
|
|
296
303
|
/* Callout marks an edge without enclosing or arranging its content. */
|
|
297
304
|
:root {
|
|
298
305
|
--callout-mark-width: 0.25rem;
|
package/src/tokens.dark.css
CHANGED
|
@@ -257,6 +257,13 @@
|
|
|
257
257
|
--space-box-inset: 1em;
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
+
/* Screen's compact console positions, beside the roles they stand in for. */
|
|
261
|
+
:root {
|
|
262
|
+
--space-screen-region-compact: 0.5em;
|
|
263
|
+
--space-pane-inset-compact: 0.5em;
|
|
264
|
+
--space-pane-slot-compact: 0.25em;
|
|
265
|
+
}
|
|
266
|
+
|
|
260
267
|
/* Callout marks an edge without enclosing or arranging its content. */
|
|
261
268
|
:root {
|
|
262
269
|
--callout-mark-width: 0.25rem;
|
package/src/tokens.light.css
CHANGED
|
@@ -257,6 +257,13 @@
|
|
|
257
257
|
--space-box-inset: 1em;
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
+
/* Screen's compact console positions, beside the roles they stand in for. */
|
|
261
|
+
:root {
|
|
262
|
+
--space-screen-region-compact: 0.5em;
|
|
263
|
+
--space-pane-inset-compact: 0.5em;
|
|
264
|
+
--space-pane-slot-compact: 0.25em;
|
|
265
|
+
}
|
|
266
|
+
|
|
260
267
|
/* Callout marks an edge without enclosing or arranging its content. */
|
|
261
268
|
:root {
|
|
262
269
|
--callout-mark-width: 0.25rem;
|