@juwel-development/design-system 3.9.1 → 3.11.0

package/src/Theme/renderTokens.ts

@@ -89,8 +89,9 @@ const UNDERLINE = `:root {
    Tailwind built-in is re-pointed; only new role names. See docs/adr/0004-typography-token-contract.md. */
 const TYPOGRAPHY = `@theme {
   /* Both faces default to inherit, so the library ships no @font-face and no face and a one-face
-     consumer renders as today. --font-primary is carried by content, --font-secondary by labels; a
-     component sets font-variant-numeric: tabular-nums only on a --font-primary carrying tnum and
+     consumer renders as today. --font-primary is the default face of headings, body and controls
+     (the three roles below, #120), --font-secondary the face of labels; a component sets
+     font-variant-numeric: tabular-nums only on an effective body face carrying tnum and
      font-variant-caps: small-caps only on a --font-secondary carrying smcp - both fail silently otherwise. */
   --font-primary: inherit;
   --font-secondary: inherit;
@@ -136,6 +137,24 @@ const TYPOGRAPHY = `@theme {
   --tracking-optical: -0.02em;
 }`;
 
+/* Three family roles that depart from the primary face on demand (#120): heading for every heading,
+   body for reading matter, control for the box a viewer operates. Utilities rather than @theme
+   variables, because the fallback has to resolve on the element reading it: a value at :root would
+   substitute var(--font-primary) there, so a theme re-pointing primary on a wrapper would move its
+   paragraphs and strand its headings. Read this way, a theme re-points a role or primary at any scope
+   and the text underneath follows. No value is declared for the three, so the fallback stays live. */
+const FAMILY_ROLES = `@utility font-heading {
+  font-family: var(--font-heading, var(--font-primary));
+}
+
+@utility font-body {
+  font-family: var(--font-body, var(--font-primary));
+}
+
+@utility font-control {
+  font-family: var(--font-control, var(--font-primary));
+}`;
+
 /* The reading measures are in ch so the character count holds when the body size moves under them:
    --measure-display narrower because bigger type wants fewer characters per line, --measure-wide a
    little past the reading column for the page-head standfirst (PageHead #18). --measure-action is
@@ -147,6 +166,17 @@ const MEASURE = `:root {
   --measure-action: 20rem;
 }`;
 
+/* The table's column width roles (#115) are not colours: like the measures they live in :root only,
+   so a brand re-points one and every table allocating by that role moves. Four column jobs the
+   consumer attests - name, fact, figure, action - and no size ladder (docs/adr/0008, Amendments);
+   action holds --control-min-width plus the comfortable insets. Constraint: positive lengths. */
+const TABLE_COLUMN = `:root {
+  --table-column-name: 12rem;
+  --table-column-fact: 9rem;
+  --table-column-figure: 8rem;
+  --table-column-action: 12.5rem;
+}`;
+
 /* Three spacing roles, not a ladder: --space-stack is the sibling gap in a stack, --space-region the air
    around a region of a page - a form's region groups and the shell's bars, above and below the header and
    the footer and between the header's nav items (#14/#15) - and --space-band the vertical air inside a page
@@ -169,6 +199,44 @@ const COLLECTION_SPACING = `:root {
   --space-collection-item: 1em;
 }`;
 
+/* DefinitionList's spacing and minimum roles (#123): item air per density, in rem like Table's cell padding since
+   the members set their own type roles, and the two columns' minimum readable widths, in rem like
+   --control-min-width since a column is counted against the root. Theme-overridable; the item air
+   accepts any nonnegative length, a minimum any nonnegative length a `calc()` can read. */
+const DEFINITION_SPACING = `:root {
+  --space-definition-item: 1.5rem;
+  --space-definition-item-compact: 0.5rem;
+  --space-definition-column: 3rem;
+  --definition-term-min-width: 9rem;
+  --definition-description-min-width: 10rem;
+}
+
+/* Register the fit value in every token entry point so descriptions inherit a computed fit length. */
+@property --definition-shortfall {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
+}`;
+
+/* Box's inner padding (#117): one role on all four sides, distinct from a sibling gap, a region's
+   air or a page band, so a brand tunes every Box at once and no Box gains a padding prop (ADR 0008,
+   the token-role test). In em like --space-collection-item, so it tracks the inherited type.
+   Constraint: a nonnegative CSS length. */
+const BOX_INSET = `:root {
+  --space-box-inset: 1em;
+}`;
+
+/* Table cell insets (#115): one inline/block pair per density, in :root so a brand tunes both
+   treatments without Table gaining a measurement prop. comfortable is exactly what px-4 / py-2
+   resolved to, so the default moves nothing; compact halves both. In rem: cell type is fixed at the
+   small and label roles. Constraint: nonnegative, each compact inset no larger than its comfortable. */
+const TABLE_CELL_INSET = `:root {
+  --table-cell-inset-inline: 1rem;
+  --table-cell-inset-block: 0.5rem;
+  --table-cell-inset-inline-compact: 0.5rem;
+  --table-cell-inset-block-compact: 0.25rem;
+}`;
+
 /* The gutter is the horizontal inset holding content off the viewport edge (#9), and the one spacing role
    measured against the screen rather than the type: it answers to how much room there is, not how large
    the words are, so it is in rem/vw and never em. A clamp() lets it grow with the viewport with no
@@ -234,6 +302,14 @@ const TAB_MARKER = `:root {
   --tab-marker-thickness: 2px;
 }`;
 
+/* Not a colour: like the tab marker it lives in :root only, so a brand re-points the weight of the
+   mark along a selected row's leading edge (#113) without Table gaining a prop. Not the tab marker's
+   token: that is a line under a tab, a different position (docs/adr/0008). Constraint: > 0 - zero
+   erases the one persistent selection cue. */
+const TABLE_SELECTION_MARKER = `:root {
+  --table-selection-marker-thickness: 2px;
+}`;
+
 /* The slider's two dimensions are not colours: like the tick they live in :root only, never @theme
    inline. Named because both are drawn on vendor pseudo-elements (::-webkit-slider-thumb and kin)
    no consumer selector can reach - ADR 0004's test. The control takes its height from the thumb, so
@@ -280,7 +356,7 @@ const toKebabCase = (name: string): string =>
   name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 
 const declarations = (
-  tokens: PaletteTokens,
+  tokens: Required<PaletteTokens>,
   value: (name: string) => string,
 ): string =>
   Object.keys(tokens)
@@ -290,7 +366,7 @@ const declarations = (
 // The library no longer declares --color-ring but still reads it as a fallback, so a consumer's
 // existing value keeps working; the plain hex in the palette is the default and what the contrast
 // test checks. See docs/adr/0002-focus-ring-token-contract.md.
-const raw = (tokens: PaletteTokens) => (name: string) => {
+const raw = (tokens: Required<PaletteTokens>) => (name: string) => {
   const value = tokens[name as keyof PaletteTokens];
   return name === 'focusRing' ? `var(--color-ring, ${value})` : value;
 };
@@ -330,6 +406,10 @@ ${UNDERLINE}
    utilities, so it is not carried in @theme inline with the palette. */
 ${TYPOGRAPHY}
 
+/* The heading, body and control family roles are utilities with a fallback to the primary face, not
+   @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
+${FAMILY_ROLES}
+
 /* The aspect roles are Tailwind theme namespaces like typography, so they take their own @theme block
    after it and are not carried in @theme inline with the palette. */
 ${ASPECT}
@@ -339,6 +419,10 @@ ${ASPECT}
    of controls rather than a reading line (docs/adr/0008, Amendments). */
 ${MEASURE}
 
+/* The table column width roles have no Tailwind namespace either, and sit in :root beside the measures:
+   widths a column job needs, counted in rem against the root like the action column. */
+${TABLE_COLUMN}
+
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
    re-pointing - so the three roles sit in :root beside the measure. */
 ${SPACING}
@@ -346,6 +430,15 @@ ${SPACING}
 /* Collection's vertical item padding, measured against inherited type. */
 ${COLLECTION_SPACING}
 
+/* DefinitionList's item air and column minimums sit in :root beside the collection role (#123). */
+${DEFINITION_SPACING}
+
+/* Box's inner padding, measured against inherited type, beside Collection's. */
+${BOX_INSET}
+
+/* Table's cell insets, one pair per density, beside Box's. */
+${TABLE_CELL_INSET}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 ${GUTTER}
 
@@ -361,6 +454,9 @@ ${TICK}
 /* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
 ${TAB_MARKER}
 
+/* The table selection marker's thickness is not a colour either, and sits in :root beside the tab marker. */
+${TABLE_SELECTION_MARKER}
+
 ${TAB_INSETS}
 
 ${SLIDER}
@@ -403,7 +499,7 @@ ${colourMapAndTail()}`;
    differ only in header and which palette set lands in `:root`, so both render through here. */
 const renderSingleTheme = (
   header: string,
-  tokens: PaletteTokens,
+  tokens: Required<PaletteTokens>,
 ): string => `${header}
 
 :root {

package/src/index.ts

@@ -1,14 +1,19 @@
 import './styles.css';
 
 export { Cluster } from 'Arrangement/Cluster/Cluster';
+export { ColumnLayout } from 'Arrangement/ColumnLayout/ColumnLayout';
+export { FieldRow } from 'Arrangement/FieldRow/FieldRow';
 export { Stack } from 'Arrangement/Stack/Stack';
+export { Box } from 'Display/Box/Box';
 export { Brandmark } from 'Display/Brandmark/Brandmark';
 export { Checklist } from 'Display/Checklist/Checklist';
 export { Collection } from 'Display/Collection/Collection';
 export { DefinitionList } from 'Display/DefinitionList/DefinitionList';
 export { Figure } from 'Display/Figure/Figure';
+export { Icon } from 'Display/Icon/Icon';
 export { Meter } from 'Display/Meter/Meter';
 export { Rail } from 'Display/Rail/Rail';
+export type { TableColumnAllocation } from 'Display/Table/Table';
 export { Table } from 'Display/Table/Table';
 export { Eyebrow } from 'Display/Typography/Eyebrow/Eyebrow';
 export { H1 } from 'Display/Typography/H1/H1';
@@ -38,6 +43,7 @@ export { Form } from 'Layout/Form/Form';
 export { Header } from 'Layout/Header/Header';
 export { Hero } from 'Layout/Hero/Hero';
 export { PageHead } from 'Layout/PageHead/PageHead';
+export { ScrollContainer } from 'Layout/ScrollContainer/ScrollContainer';
 export { Section } from 'Layout/Section/Section';
 export { Sidebar } from 'Layout/Sidebar/Sidebar';
 export type { PaletteTokens } from 'Theme/Palette';

package/src/tokens.css

@@ -33,6 +33,8 @@
   --color-success: #047857;
   --color-warning: #b45309;
   --color-error: #d63384;
+  --color-error-hover: #be185d;
+  --color-error-foreground: #ffffff;
   --color-info: #0e7490;
 }
 
@@ -50,8 +52,8 @@
   --color-primary: #8b5cf6;
   --color-primary-hover: #a78bfa;
   --color-primary-foreground: #020617;
-  --color-secondary: #0284c7;
-  --color-secondary-hover: #0ea5e9;
+  --color-secondary: #0ea5e9;
+  --color-secondary-hover: #38bdf8;
   --color-secondary-foreground: #020617;
   --color-disabled: #475569;
   --color-disabled-hover: #334155;
@@ -60,6 +62,8 @@
   --color-success: #34d399;
   --color-warning: #fbbf24;
   --color-error: #f48fb1;
+  --color-error-hover: #f8bbd0;
+  --color-error-foreground: #020617;
   --color-info: #22d3ee;
 }
 
@@ -87,6 +91,8 @@
   --color-success: var(--color-success);
   --color-warning: var(--color-warning);
   --color-error: var(--color-error);
+  --color-error-hover: var(--color-error-hover);
+  --color-error-foreground: var(--color-error-foreground);
   --color-info: var(--color-info);
 }
 
@@ -137,8 +143,9 @@
    utilities, so it is not carried in @theme inline with the palette. */
 @theme {
   /* Both faces default to inherit, so the library ships no @font-face and no face and a one-face
-     consumer renders as today. --font-primary is carried by content, --font-secondary by labels; a
-     component sets font-variant-numeric: tabular-nums only on a --font-primary carrying tnum and
+     consumer renders as today. --font-primary is the default face of headings, body and controls
+     (the three roles below, #120), --font-secondary the face of labels; a component sets
+     font-variant-numeric: tabular-nums only on an effective body face carrying tnum and
      font-variant-caps: small-caps only on a --font-secondary carrying smcp - both fail silently otherwise. */
   --font-primary: inherit;
   --font-secondary: inherit;
@@ -184,6 +191,20 @@
   --tracking-optical: -0.02em;
 }
 
+/* The heading, body and control family roles are utilities with a fallback to the primary face, not
+   @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
+@utility font-heading {
+  font-family: var(--font-heading, var(--font-primary));
+}
+
+@utility font-body {
+  font-family: var(--font-body, var(--font-primary));
+}
+
+@utility font-control {
+  font-family: var(--font-control, var(--font-primary));
+}
+
 /* The aspect roles are Tailwind theme namespaces like typography, so they take their own @theme block
    after it and are not carried in @theme inline with the palette. */
 @theme {
@@ -203,6 +224,15 @@
   --measure-action: 20rem;
 }
 
+/* The table column width roles have no Tailwind namespace either, and sit in :root beside the measures:
+   widths a column job needs, counted in rem against the root like the action column. */
+:root {
+  --table-column-name: 12rem;
+  --table-column-fact: 9rem;
+  --table-column-figure: 8rem;
+  --table-column-action: 12.5rem;
+}
+
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
    re-pointing - so the three roles sit in :root beside the measure. */
 :root {
@@ -216,6 +246,35 @@
   --space-collection-item: 1em;
 }
 
+/* DefinitionList's item air and column minimums sit in :root beside the collection role (#123). */
+:root {
+  --space-definition-item: 1.5rem;
+  --space-definition-item-compact: 0.5rem;
+  --space-definition-column: 3rem;
+  --definition-term-min-width: 9rem;
+  --definition-description-min-width: 10rem;
+}
+
+/* Register the fit value in every token entry point so descriptions inherit a computed fit length. */
+@property --definition-shortfall {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
+}
+
+/* Box's inner padding, measured against inherited type, beside Collection's. */
+:root {
+  --space-box-inset: 1em;
+}
+
+/* Table's cell insets, one pair per density, beside Box's. */
+:root {
+  --table-cell-inset-inline: 1rem;
+  --table-cell-inset-block: 0.5rem;
+  --table-cell-inset-inline-compact: 0.5rem;
+  --table-cell-inset-block-compact: 0.25rem;
+}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 :root {
   --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -242,6 +301,11 @@
   --tab-marker-thickness: 2px;
 }
 
+/* The table selection marker's thickness is not a colour either, and sits in :root beside the tab marker. */
+:root {
+  --table-selection-marker-thickness: 2px;
+}
+
 :root {
   --tab-inset-inline: 1em;
   --tab-inset-block: 0.5em;

package/src/tokens.dark.css

@@ -18,8 +18,8 @@
   --color-primary: #8b5cf6;
   --color-primary-hover: #a78bfa;
   --color-primary-foreground: #020617;
-  --color-secondary: #0284c7;
-  --color-secondary-hover: #0ea5e9;
+  --color-secondary: #0ea5e9;
+  --color-secondary-hover: #38bdf8;
   --color-secondary-foreground: #020617;
   --color-disabled: #475569;
   --color-disabled-hover: #334155;
@@ -28,6 +28,8 @@
   --color-success: #34d399;
   --color-warning: #fbbf24;
   --color-error: #f48fb1;
+  --color-error-hover: #f8bbd0;
+  --color-error-foreground: #020617;
   --color-info: #22d3ee;
 }
 
@@ -55,6 +57,8 @@
   --color-success: var(--color-success);
   --color-warning: var(--color-warning);
   --color-error: var(--color-error);
+  --color-error-hover: var(--color-error-hover);
+  --color-error-foreground: var(--color-error-foreground);
   --color-info: var(--color-info);
 }
 
@@ -105,8 +109,9 @@
    utilities, so it is not carried in @theme inline with the palette. */
 @theme {
   /* Both faces default to inherit, so the library ships no @font-face and no face and a one-face
-     consumer renders as today. --font-primary is carried by content, --font-secondary by labels; a
-     component sets font-variant-numeric: tabular-nums only on a --font-primary carrying tnum and
+     consumer renders as today. --font-primary is the default face of headings, body and controls
+     (the three roles below, #120), --font-secondary the face of labels; a component sets
+     font-variant-numeric: tabular-nums only on an effective body face carrying tnum and
      font-variant-caps: small-caps only on a --font-secondary carrying smcp - both fail silently otherwise. */
   --font-primary: inherit;
   --font-secondary: inherit;
@@ -152,6 +157,20 @@
   --tracking-optical: -0.02em;
 }
 
+/* The heading, body and control family roles are utilities with a fallback to the primary face, not
+   @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
+@utility font-heading {
+  font-family: var(--font-heading, var(--font-primary));
+}
+
+@utility font-body {
+  font-family: var(--font-body, var(--font-primary));
+}
+
+@utility font-control {
+  font-family: var(--font-control, var(--font-primary));
+}
+
 /* The aspect roles are Tailwind theme namespaces like typography, so they take their own @theme block
    after it and are not carried in @theme inline with the palette. */
 @theme {
@@ -171,6 +190,15 @@
   --measure-action: 20rem;
 }
 
+/* The table column width roles have no Tailwind namespace either, and sit in :root beside the measures:
+   widths a column job needs, counted in rem against the root like the action column. */
+:root {
+  --table-column-name: 12rem;
+  --table-column-fact: 9rem;
+  --table-column-figure: 8rem;
+  --table-column-action: 12.5rem;
+}
+
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
    re-pointing - so the three roles sit in :root beside the measure. */
 :root {
@@ -184,6 +212,35 @@
   --space-collection-item: 1em;
 }
 
+/* DefinitionList's item air and column minimums sit in :root beside the collection role (#123). */
+:root {
+  --space-definition-item: 1.5rem;
+  --space-definition-item-compact: 0.5rem;
+  --space-definition-column: 3rem;
+  --definition-term-min-width: 9rem;
+  --definition-description-min-width: 10rem;
+}
+
+/* Register the fit value in every token entry point so descriptions inherit a computed fit length. */
+@property --definition-shortfall {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
+}
+
+/* Box's inner padding, measured against inherited type, beside Collection's. */
+:root {
+  --space-box-inset: 1em;
+}
+
+/* Table's cell insets, one pair per density, beside Box's. */
+:root {
+  --table-cell-inset-inline: 1rem;
+  --table-cell-inset-block: 0.5rem;
+  --table-cell-inset-inline-compact: 0.5rem;
+  --table-cell-inset-block-compact: 0.25rem;
+}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 :root {
   --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -210,6 +267,11 @@
   --tab-marker-thickness: 2px;
 }
 
+/* The table selection marker's thickness is not a colour either, and sits in :root beside the tab marker. */
+:root {
+  --table-selection-marker-thickness: 2px;
+}
+
 :root {
   --tab-inset-inline: 1em;
   --tab-inset-block: 0.5em;

package/src/tokens.light.css

@@ -28,6 +28,8 @@
   --color-success: #047857;
   --color-warning: #b45309;
   --color-error: #d63384;
+  --color-error-hover: #be185d;
+  --color-error-foreground: #ffffff;
   --color-info: #0e7490;
 }
 
@@ -55,6 +57,8 @@
   --color-success: var(--color-success);
   --color-warning: var(--color-warning);
   --color-error: var(--color-error);
+  --color-error-hover: var(--color-error-hover);
+  --color-error-foreground: var(--color-error-foreground);
   --color-info: var(--color-info);
 }
 
@@ -105,8 +109,9 @@
    utilities, so it is not carried in @theme inline with the palette. */
 @theme {
   /* Both faces default to inherit, so the library ships no @font-face and no face and a one-face
-     consumer renders as today. --font-primary is carried by content, --font-secondary by labels; a
-     component sets font-variant-numeric: tabular-nums only on a --font-primary carrying tnum and
+     consumer renders as today. --font-primary is the default face of headings, body and controls
+     (the three roles below, #120), --font-secondary the face of labels; a component sets
+     font-variant-numeric: tabular-nums only on an effective body face carrying tnum and
      font-variant-caps: small-caps only on a --font-secondary carrying smcp - both fail silently otherwise. */
   --font-primary: inherit;
   --font-secondary: inherit;
@@ -152,6 +157,20 @@
   --tracking-optical: -0.02em;
 }
 
+/* The heading, body and control family roles are utilities with a fallback to the primary face, not
+   @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
+@utility font-heading {
+  font-family: var(--font-heading, var(--font-primary));
+}
+
+@utility font-body {
+  font-family: var(--font-body, var(--font-primary));
+}
+
+@utility font-control {
+  font-family: var(--font-control, var(--font-primary));
+}
+
 /* The aspect roles are Tailwind theme namespaces like typography, so they take their own @theme block
    after it and are not carried in @theme inline with the palette. */
 @theme {
@@ -171,6 +190,15 @@
   --measure-action: 20rem;
 }
 
+/* The table column width roles have no Tailwind namespace either, and sit in :root beside the measures:
+   widths a column job needs, counted in rem against the root like the action column. */
+:root {
+  --table-column-name: 12rem;
+  --table-column-fact: 9rem;
+  --table-column-figure: 8rem;
+  --table-column-action: 12.5rem;
+}
+
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
    re-pointing - so the three roles sit in :root beside the measure. */
 :root {
@@ -184,6 +212,35 @@
   --space-collection-item: 1em;
 }
 
+/* DefinitionList's item air and column minimums sit in :root beside the collection role (#123). */
+:root {
+  --space-definition-item: 1.5rem;
+  --space-definition-item-compact: 0.5rem;
+  --space-definition-column: 3rem;
+  --definition-term-min-width: 9rem;
+  --definition-description-min-width: 10rem;
+}
+
+/* Register the fit value in every token entry point so descriptions inherit a computed fit length. */
+@property --definition-shortfall {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
+}
+
+/* Box's inner padding, measured against inherited type, beside Collection's. */
+:root {
+  --space-box-inset: 1em;
+}
+
+/* Table's cell insets, one pair per density, beside Box's. */
+:root {
+  --table-cell-inset-inline: 1rem;
+  --table-cell-inset-block: 0.5rem;
+  --table-cell-inset-inline-compact: 0.5rem;
+  --table-cell-inset-block-compact: 0.25rem;
+}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 :root {
   --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -210,6 +267,11 @@
   --tab-marker-thickness: 2px;
 }
 
+/* The table selection marker's thickness is not a colour either, and sits in :root beside the tab marker. */
+:root {
+  --table-selection-marker-thickness: 2px;
+}
+
 :root {
   --tab-inset-inline: 1em;
   --tab-inset-block: 0.5em;