@juwel-development/design-system 3.5.0 → 3.7.0

package/src/tokens.css

@@ -17,6 +17,7 @@
   --color-control-border: #64748b;
   --color-rule: #808fa3;
   --color-backing: #f1f5f9;
+  --color-scrim: rgb(15 23 42 / 0.5);
   --color-meter-fill: #0f172a;
   --color-meter-track: #e2e8f0;
   --color-primary: #7c3aed;
@@ -43,6 +44,7 @@
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
+  --color-scrim: rgb(15 23 42 / 0.5);
   --color-meter-fill: #f8fafc;
   --color-meter-track: #334155;
   --color-primary: #8b5cf6;
@@ -69,6 +71,7 @@
   --color-control-border: var(--color-control-border);
   --color-rule: var(--color-rule);
   --color-backing: var(--color-backing);
+  --color-scrim: var(--color-scrim);
   --color-meter-fill: var(--color-meter-fill);
   --color-meter-track: var(--color-meter-track);
   --color-primary: var(--color-primary);
@@ -109,6 +112,7 @@
 /* Radius is not a colour either: one token for the corner every control reads, beside the others. */
 :root {
   --radius-control: 0.5rem;
+  --radius-dialog: 0.375rem;
 }
 
 /* The control minimum width is not a colour either, and sits in :root beside radius. */
@@ -166,6 +170,12 @@
      is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
   --leading-label: 1.5;
 
+  /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
+     the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
+     role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
+  --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
+  --leading-dialog-title: 1.2;
+
   /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
      style, --tracking-optical a correction that varies with size. The names say which is which, so the
      distinction survives without the ADR in hand. Scope: the title role and above - H1, H2 and the page
@@ -242,7 +252,23 @@
   --slider-thumb-size: 1.5rem;
 }
 
+/* The choice marker's dimensions are not colours either, and sit in :root beside the slider block. */
+:root {
+  --choice-marker-size: 1.125rem;
+  --choice-marker-dot-size: 0.5rem;
+}
+
 /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
 :root {
   --meter-track-thickness: 0.5rem;
 }
+
+/* The scrim's blur is not a colour either, and sits in :root beside the meter track. */
+:root {
+  --scrim-blur: 0;
+}
+
+/* The floating elevation is not a colour either, and sits in :root at the end of the non-colour blocks. */
+:root {
+  --elevation-floating: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

package/src/tokens.dark.css

@@ -12,6 +12,7 @@
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
+  --color-scrim: rgb(15 23 42 / 0.5);
   --color-meter-fill: #f8fafc;
   --color-meter-track: #334155;
   --color-primary: #8b5cf6;
@@ -38,6 +39,7 @@
   --color-control-border: var(--color-control-border);
   --color-rule: var(--color-rule);
   --color-backing: var(--color-backing);
+  --color-scrim: var(--color-scrim);
   --color-meter-fill: var(--color-meter-fill);
   --color-meter-track: var(--color-meter-track);
   --color-primary: var(--color-primary);
@@ -78,6 +80,7 @@
 /* Radius is not a colour either: one token for the corner every control reads, beside the others. */
 :root {
   --radius-control: 0.5rem;
+  --radius-dialog: 0.375rem;
 }
 
 /* The control minimum width is not a colour either, and sits in :root beside radius. */
@@ -135,6 +138,12 @@
      is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
   --leading-label: 1.5;
 
+  /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
+     the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
+     role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
+  --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
+  --leading-dialog-title: 1.2;
+
   /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
      style, --tracking-optical a correction that varies with size. The names say which is which, so the
      distinction survives without the ADR in hand. Scope: the title role and above - H1, H2 and the page
@@ -211,7 +220,23 @@
   --slider-thumb-size: 1.5rem;
 }
 
+/* The choice marker's dimensions are not colours either, and sit in :root beside the slider block. */
+:root {
+  --choice-marker-size: 1.125rem;
+  --choice-marker-dot-size: 0.5rem;
+}
+
 /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
 :root {
   --meter-track-thickness: 0.5rem;
 }
+
+/* The scrim's blur is not a colour either, and sits in :root beside the meter track. */
+:root {
+  --scrim-blur: 0;
+}
+
+/* The floating elevation is not a colour either, and sits in :root at the end of the non-colour blocks. */
+:root {
+  --elevation-floating: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

package/src/tokens.light.css

@@ -12,6 +12,7 @@
   --color-control-border: #64748b;
   --color-rule: #808fa3;
   --color-backing: #f1f5f9;
+  --color-scrim: rgb(15 23 42 / 0.5);
   --color-meter-fill: #0f172a;
   --color-meter-track: #e2e8f0;
   --color-primary: #7c3aed;
@@ -38,6 +39,7 @@
   --color-control-border: var(--color-control-border);
   --color-rule: var(--color-rule);
   --color-backing: var(--color-backing);
+  --color-scrim: var(--color-scrim);
   --color-meter-fill: var(--color-meter-fill);
   --color-meter-track: var(--color-meter-track);
   --color-primary: var(--color-primary);
@@ -78,6 +80,7 @@
 /* Radius is not a colour either: one token for the corner every control reads, beside the others. */
 :root {
   --radius-control: 0.5rem;
+  --radius-dialog: 0.375rem;
 }
 
 /* The control minimum width is not a colour either, and sits in :root beside radius. */
@@ -135,6 +138,12 @@
      is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
   --leading-label: 1.5;
 
+  /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
+     the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
+     role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
+  --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
+  --leading-dialog-title: 1.2;
+
   /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
      style, --tracking-optical a correction that varies with size. The names say which is which, so the
      distinction survives without the ADR in hand. Scope: the title role and above - H1, H2 and the page
@@ -211,7 +220,23 @@
   --slider-thumb-size: 1.5rem;
 }
 
+/* The choice marker's dimensions are not colours either, and sit in :root beside the slider block. */
+:root {
+  --choice-marker-size: 1.125rem;
+  --choice-marker-dot-size: 0.5rem;
+}
+
 /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
 :root {
   --meter-track-thickness: 0.5rem;
 }
+
+/* The scrim's blur is not a colour either, and sits in :root beside the meter track. */
+:root {
+  --scrim-blur: 0;
+}
+
+/* The floating elevation is not a colour either, and sits in :root at the end of the non-colour blocks. */
+:root {
+  --elevation-floating: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}