@juwel-development/design-system 3.3.0 → 3.5.0

package/src/Theme/Palette.ts

@@ -39,6 +39,20 @@ export type PaletteTokens = {
    *  keeps it near `surface` rather than a mid grey. */
   backing: string;
 
+  /** The colour of a Meter's filled share when it states an amount without judgment - neither an
+   *  action fill nor text ink. The depletion treatment mixes it toward `error` in OKLab, so the
+   *  constraint covers the whole path (WCAG 2.2 SC 1.4.11): this value, `error`, and every colour
+   *  the mix produces between them stay at least 3:1 against `meterTrack` in the same theme. A
+   *  distinct role even while its shipped value matches `foreground` - a consumer re-points either
+   *  without moving the other. See docs/adr/0010-meter-depletion-is-a-treatment.md. */
+  meterFill: string;
+  /** The colour of a Meter's whole capacity behind its filled share. It makes the scale visible
+   *  without turning it into a boundary - the persistent one-pixel `rule` outline is what
+   *  identifies the capacity against `surface`, so this role carries no floor of its own; the
+   *  3:1 floor is stated from the fill side, on `meterFill`. A distinct role even while its
+   *  shipped value matches `border`. See docs/adr/0010-meter-depletion-is-a-treatment.md. */
+  meterTrack: string;
+
   /** The main call-to-action fill. A filled control draws no border, so the fill is the only thing
    *  separating the control from the surface - what `controlBorder` is for an unfilled one.
    *  Constraint (WCAG 2.2 SC 1.4.11): at least 3:1 against `surface` in the same theme,
@@ -88,11 +102,18 @@ export type PaletteTokens = {
    *  least 4.5:1 against `surface` in the same theme. */
   link: string;
 
-  /** Status colours. Not yet consumed by a component - they complete the role set so the
-   *  first Alert or Toast has names to reach for instead of inventing them. */
+  /** The success status tone. Status tones reinforce content independently of their carrier and
+   *  carry no announcement behavior. Constraint (WCAG 2.2 SC 1.4.3): at least 4.5:1 against
+   *  `surface` in the same theme. */
   success: string;
+  /** The warning status tone. Carries the general status-tone contract and 4.5:1-against-`surface`
+   *  constraint stated on `success`. */
   warning: string;
+  /** The error status tone. Carries the general status-tone contract and 4.5:1-against-`surface`
+   *  constraint stated on `success`, plus the depletion-path constraint stated on `meterFill`. */
   error: string;
+  /** The informational status tone. Carries the general status-tone contract and
+   *  4.5:1-against-`surface` constraint stated on `success`. */
   info: string;
 };
 
@@ -124,6 +145,9 @@ export const light: PaletteTokens = {
   rule: '#808fa3',
   backing: '#f1f5f9',
 
+  meterFill: '#0f172a',
+  meterTrack: '#e2e8f0',
+
   primary: '#7c3aed',
   primaryHover: '#6d28d9',
   primaryForeground: '#f8fafc',
@@ -139,10 +163,10 @@ export const light: PaletteTokens = {
 
   link: '#2563eb',
 
-  success: '#10b981',
-  warning: '#f59e0b',
+  success: '#047857',
+  warning: '#b45309',
   error: '#d63384',
-  info: '#06b6d4',
+  info: '#0e7490',
 };
 
 /**
@@ -169,6 +193,9 @@ export const dark: PaletteTokens = {
   rule: '#5b6a80',
   backing: '#1e293b',
 
+  meterFill: '#f8fafc',
+  meterTrack: '#334155',
+
   primary: '#8b5cf6',
   primaryHover: '#a78bfa',
   primaryForeground: '#020617',

package/src/Theme/renderTokens.ts

@@ -227,6 +227,24 @@ const TAB_MARKER = `:root {
   --tab-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
+   1.5rem keeps the pointer target at WCAG 2.5.8's 24px minimum; a brand re-pointing it lower gives
+   that up knowingly. Constraint: thumb > track, or the thumb vanishes into the line it rides. */
+const SLIDER = `:root {
+  --slider-track-thickness: 0.25rem;
+  --slider-thumb-size: 1.5rem;
+}`;
+
+/* Not a colour: like the tick it lives in :root only, never @theme inline, so a brand can
+   re-point the bar's weight. Meter reads it as h-[var(--meter-track-thickness)]. Constraint:
+   > 0 - a zero-thickness track erases the display. 0.5rem is the height the accepted Negotiation
+   prototype hand-rolled (#105), carried over so the first consumer changes nothing visually. */
+const METER_TRACK = `:root {
+  --meter-track-thickness: 0.5rem;
+}`;
+
 const toKebabCase = (name: string): string =>
   name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 
@@ -313,6 +331,11 @@ ${TICK}
 ${TAB_MARKER}
 
 ${TAB_INSETS}
+
+${SLIDER}
+
+/* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
+${METER_TRACK}
 `;
 
 /**

package/src/index.ts

@@ -7,6 +7,7 @@ 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 { Meter } from 'Display/Meter/Meter';
 export { Rail } from 'Display/Rail/Rail';
 export { Table } from 'Display/Table/Table';
 export { Eyebrow } from 'Display/Typography/Eyebrow/Eyebrow';
@@ -22,6 +23,7 @@ export { Prose } from 'Display/Typography/Prose/Prose';
 export { Button } from 'Interaction/Button/Button';
 export { Input } from 'Interaction/Input/Input';
 export { Link } from 'Interaction/Link/Link';
+export { Slider } from 'Interaction/Slider/Slider';
 export { Tabs } from 'Interaction/Tabs/Tabs';
 export { TextArea } from 'Interaction/TextArea/TextArea';
 export { Cover } from 'Layout/Cover/Cover';

package/src/tokens.css

@@ -17,6 +17,8 @@
   --color-control-border: #64748b;
   --color-rule: #808fa3;
   --color-backing: #f1f5f9;
+  --color-meter-fill: #0f172a;
+  --color-meter-track: #e2e8f0;
   --color-primary: #7c3aed;
   --color-primary-hover: #6d28d9;
   --color-primary-foreground: #f8fafc;
@@ -27,10 +29,10 @@
   --color-disabled-hover: #64748b;
   --color-focus-ring: var(--color-ring, #475569);
   --color-link: #2563eb;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
+  --color-success: #047857;
+  --color-warning: #b45309;
   --color-error: #d63384;
-  --color-info: #06b6d4;
+  --color-info: #0e7490;
 }
 
 .dark {
@@ -41,6 +43,8 @@
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
+  --color-meter-fill: #f8fafc;
+  --color-meter-track: #334155;
   --color-primary: #8b5cf6;
   --color-primary-hover: #a78bfa;
   --color-primary-foreground: #020617;
@@ -65,6 +69,8 @@
   --color-control-border: var(--color-control-border);
   --color-rule: var(--color-rule);
   --color-backing: var(--color-backing);
+  --color-meter-fill: var(--color-meter-fill);
+  --color-meter-track: var(--color-meter-track);
   --color-primary: var(--color-primary);
   --color-primary-hover: var(--color-primary-hover);
   --color-primary-foreground: var(--color-primary-foreground);
@@ -230,3 +236,13 @@
   --tab-inset-inline: 1em;
   --tab-inset-block: 0.5em;
 }
+
+:root {
+  --slider-track-thickness: 0.25rem;
+  --slider-thumb-size: 1.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;
+}

package/src/tokens.dark.css

@@ -12,6 +12,8 @@
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
+  --color-meter-fill: #f8fafc;
+  --color-meter-track: #334155;
   --color-primary: #8b5cf6;
   --color-primary-hover: #a78bfa;
   --color-primary-foreground: #020617;
@@ -36,6 +38,8 @@
   --color-control-border: var(--color-control-border);
   --color-rule: var(--color-rule);
   --color-backing: var(--color-backing);
+  --color-meter-fill: var(--color-meter-fill);
+  --color-meter-track: var(--color-meter-track);
   --color-primary: var(--color-primary);
   --color-primary-hover: var(--color-primary-hover);
   --color-primary-foreground: var(--color-primary-foreground);
@@ -201,3 +205,13 @@
   --tab-inset-inline: 1em;
   --tab-inset-block: 0.5em;
 }
+
+:root {
+  --slider-track-thickness: 0.25rem;
+  --slider-thumb-size: 1.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;
+}

package/src/tokens.light.css

@@ -12,6 +12,8 @@
   --color-control-border: #64748b;
   --color-rule: #808fa3;
   --color-backing: #f1f5f9;
+  --color-meter-fill: #0f172a;
+  --color-meter-track: #e2e8f0;
   --color-primary: #7c3aed;
   --color-primary-hover: #6d28d9;
   --color-primary-foreground: #f8fafc;
@@ -22,10 +24,10 @@
   --color-disabled-hover: #64748b;
   --color-focus-ring: var(--color-ring, #475569);
   --color-link: #2563eb;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
+  --color-success: #047857;
+  --color-warning: #b45309;
   --color-error: #d63384;
-  --color-info: #06b6d4;
+  --color-info: #0e7490;
 }
 
 @theme inline {
@@ -36,6 +38,8 @@
   --color-control-border: var(--color-control-border);
   --color-rule: var(--color-rule);
   --color-backing: var(--color-backing);
+  --color-meter-fill: var(--color-meter-fill);
+  --color-meter-track: var(--color-meter-track);
   --color-primary: var(--color-primary);
   --color-primary-hover: var(--color-primary-hover);
   --color-primary-foreground: var(--color-primary-foreground);
@@ -201,3 +205,13 @@
   --tab-inset-inline: 1em;
   --tab-inset-block: 0.5em;
 }
+
+:root {
+  --slider-track-thickness: 0.25rem;
+  --slider-thumb-size: 1.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;
+}