@juwel-development/design-system 3.0.0 → 3.2.0

package/src/tokens.css

@@ -17,11 +17,11 @@
   --color-control-border: #64748b;
   --color-rule: #808fa3;
   --color-backing: #f1f5f9;
-  --color-primary: #8b5cf6;
-  --color-primary-hover: #7c3aed;
+  --color-primary: #7c3aed;
+  --color-primary-hover: #6d28d9;
   --color-primary-foreground: #f8fafc;
-  --color-secondary: #0ea5e9;
-  --color-secondary-hover: #0284c7;
+  --color-secondary: #0369a1;
+  --color-secondary-hover: #075985;
   --color-secondary-foreground: #f8fafc;
   --color-disabled: #94a3b8;
   --color-disabled-hover: #64748b;
@@ -41,12 +41,12 @@
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
-  --color-primary: #7c3aed;
-  --color-primary-hover: #8b5cf6;
-  --color-primary-foreground: #f8fafc;
+  --color-primary: #8b5cf6;
+  --color-primary-hover: #a78bfa;
+  --color-primary-foreground: #020617;
   --color-secondary: #0284c7;
   --color-secondary-hover: #0ea5e9;
-  --color-secondary-foreground: #f8fafc;
+  --color-secondary-foreground: #020617;
   --color-disabled: #475569;
   --color-disabled-hover: #334155;
   --color-focus-ring: var(--color-ring, #cbd5e1);
@@ -110,6 +110,11 @@
   --control-min-width: 10.5rem;
 }
 
+/* The standing slot's minimum width is not a colour either, and sits in :root beside the control one. */
+:root {
+  --standing-min-width: 7.5rem;
+}
+
 /* The library's underline dimensions are not colours either, and sit in :root beside radius. They are
    not prose's alone: every Link treatment that draws a line draws it from these (docs/adr/0006). */
 :root {
@@ -144,11 +149,17 @@
      subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
   --text-lede: 1.25rem;  /* 20px */
   --leading-lede: 1.4;
-  --text-body: 1.0625rem;  /* 17px */
+  --text-body: 1.0625rem;  /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
   --leading-body: 1.6;
   --text-small: 0.9375rem;  /* 15px floor: below it tabular figures stop comparing column to column */
   --text-label: 0.8125rem;  /* 13px floor: below it the tracking reads as damage, not a device */
 
+  /* The label role's leading, declared standalone and deliberately not paired into text-label's
+     utility: pairing would move every existing label site's line box at once, silently. A component
+     whose own height is measured against its labels reads leading-label explicitly (Header #81). 1.5
+     is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
+  --leading-label: 1.5;
+
   /* 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
@@ -166,11 +177,14 @@
   --aspect-wide:     16 / 9;
 }
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -191,6 +205,11 @@
   --fold-height: min(70vh, 40rem);
 }
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+:root {
+  --cover-height: 100svh;
+}
+
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 :root {
   --tick-length: 0.9rem;

package/src/tokens.dark.css

@@ -12,12 +12,12 @@
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
-  --color-primary: #7c3aed;
-  --color-primary-hover: #8b5cf6;
-  --color-primary-foreground: #f8fafc;
+  --color-primary: #8b5cf6;
+  --color-primary-hover: #a78bfa;
+  --color-primary-foreground: #020617;
   --color-secondary: #0284c7;
   --color-secondary-hover: #0ea5e9;
-  --color-secondary-foreground: #f8fafc;
+  --color-secondary-foreground: #020617;
   --color-disabled: #475569;
   --color-disabled-hover: #334155;
   --color-focus-ring: var(--color-ring, #cbd5e1);
@@ -81,6 +81,11 @@
   --control-min-width: 10.5rem;
 }
 
+/* The standing slot's minimum width is not a colour either, and sits in :root beside the control one. */
+:root {
+  --standing-min-width: 7.5rem;
+}
+
 /* The library's underline dimensions are not colours either, and sit in :root beside radius. They are
    not prose's alone: every Link treatment that draws a line draws it from these (docs/adr/0006). */
 :root {
@@ -115,11 +120,17 @@
      subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
   --text-lede: 1.25rem;  /* 20px */
   --leading-lede: 1.4;
-  --text-body: 1.0625rem;  /* 17px */
+  --text-body: 1.0625rem;  /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
   --leading-body: 1.6;
   --text-small: 0.9375rem;  /* 15px floor: below it tabular figures stop comparing column to column */
   --text-label: 0.8125rem;  /* 13px floor: below it the tracking reads as damage, not a device */
 
+  /* The label role's leading, declared standalone and deliberately not paired into text-label's
+     utility: pairing would move every existing label site's line box at once, silently. A component
+     whose own height is measured against its labels reads leading-label explicitly (Header #81). 1.5
+     is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
+  --leading-label: 1.5;
+
   /* 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
@@ -137,11 +148,14 @@
   --aspect-wide:     16 / 9;
 }
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -162,6 +176,11 @@
   --fold-height: min(70vh, 40rem);
 }
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+:root {
+  --cover-height: 100svh;
+}
+
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 :root {
   --tick-length: 0.9rem;

package/src/tokens.light.css

@@ -12,11 +12,11 @@
   --color-control-border: #64748b;
   --color-rule: #808fa3;
   --color-backing: #f1f5f9;
-  --color-primary: #8b5cf6;
-  --color-primary-hover: #7c3aed;
+  --color-primary: #7c3aed;
+  --color-primary-hover: #6d28d9;
   --color-primary-foreground: #f8fafc;
-  --color-secondary: #0ea5e9;
-  --color-secondary-hover: #0284c7;
+  --color-secondary: #0369a1;
+  --color-secondary-hover: #075985;
   --color-secondary-foreground: #f8fafc;
   --color-disabled: #94a3b8;
   --color-disabled-hover: #64748b;
@@ -81,6 +81,11 @@
   --control-min-width: 10.5rem;
 }
 
+/* The standing slot's minimum width is not a colour either, and sits in :root beside the control one. */
+:root {
+  --standing-min-width: 7.5rem;
+}
+
 /* The library's underline dimensions are not colours either, and sit in :root beside radius. They are
    not prose's alone: every Link treatment that draws a line draws it from these (docs/adr/0006). */
 :root {
@@ -115,11 +120,17 @@
      subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
   --text-lede: 1.25rem;  /* 20px */
   --leading-lede: 1.4;
-  --text-body: 1.0625rem;  /* 17px */
+  --text-body: 1.0625rem;  /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
   --leading-body: 1.6;
   --text-small: 0.9375rem;  /* 15px floor: below it tabular figures stop comparing column to column */
   --text-label: 0.8125rem;  /* 13px floor: below it the tracking reads as damage, not a device */
 
+  /* The label role's leading, declared standalone and deliberately not paired into text-label's
+     utility: pairing would move every existing label site's line box at once, silently. A component
+     whose own height is measured against its labels reads leading-label explicitly (Header #81). 1.5
+     is the line height SC 1.4.12 expects text to survive, so a user stylesheet applying it moves nothing. */
+  --leading-label: 1.5;
+
   /* 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
@@ -137,11 +148,14 @@
   --aspect-wide:     16 / 9;
 }
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -162,6 +176,11 @@
   --fold-height: min(70vh, 40rem);
 }
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+:root {
+  --cover-height: 100svh;
+}
+
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 :root {
   --tick-length: 0.9rem;