@judarn/ui 0.7.2 → 0.7.12

package/README.md

@@ -1,4 +1,4 @@
-# @judarn/ui
+# `@judarn/ui`
 
 React components and CSS tokens for the Judarn design system, with colors in OKLCh and a fixed 8 px spacing grid.
 

package/dist/Badge/Badge.d.ts

@@ -13,7 +13,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * Resolves the foreground ink ("#000000" or "#ffffff") for a fill from its relative luminance and the 0.50 perceptual crossover (ADR-0006).
+ * Resolves the foreground ink ("#000000" or "#ffffff") for a fill from its relative luminance and the 0.50 perceptual crossover.
  * Accepts #hex, rgb() and oklch(); throws a TypeError for any other format.
  */
 export function getContrastingInk(hexOrRgb: string): string;

package/dist/Card/Card.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   /** Small accent label, set as a `t-label` (uppercase unless `eyebrowCasing` is "asWritten"). */
   eyebrow?: string;
-  /** "asWritten" for an eyebrow holding a unit, a digit, or a mixed-case term (ADR-0009). @default "uppercase" */
+  /** "asWritten" for an eyebrow holding a unit, a digit, or a mixed-case term. @default "uppercase" */
   eyebrowCasing?: "uppercase" | "asWritten";
   title?: React.ReactNode;
   children?: React.ReactNode;

package/dist/DataMatrix/DataMatrix.d.ts

@@ -7,7 +7,7 @@ export interface MatrixColumn {
   numeric?: boolean;
   /** Fixed width in pixels (number) or CSS length (string). */
   width?: number | string;
-  /** "asWritten" for a header holding a unit symbol or mixed-case term, such as kg or e1RM (ADR-0009). @default "uppercase" */
+  /** "asWritten" for a header holding a unit symbol or mixed-case term, such as kg or e1RM. @default "uppercase" */
   casing?: "uppercase" | "asWritten";
 }
 

package/dist/DataTable/DataTable.d.ts

@@ -5,7 +5,7 @@ export interface DataColumn {
   label: string;
   /** Right-align with tabular figures. @default false */
   numeric?: boolean;
-  /** "asWritten" for a header holding a unit symbol or mixed-case term, such as kg or e1RM (ADR-0009). @default "uppercase" */
+  /** "asWritten" for a header holding a unit symbol or mixed-case term, such as kg or e1RM. @default "uppercase" */
   casing?: "uppercase" | "asWritten";
 }
 

package/dist/Footer/Footer.d.ts

@@ -12,7 +12,7 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
   tagline?: string;
   /** Link columns. */
   columns?: FooterColumn[];
-  /** "asWritten" for column heads holding mixed-case terms (ADR-0009). Heads render as `h2`. @default "uppercase" */
+  /** "asWritten" for column heads holding mixed-case terms. Heads render as `h2`. @default "uppercase" */
   headCasing?: "uppercase" | "asWritten";
 }
 

package/dist/LogoLockup/LogoLockup.d.ts

@@ -11,7 +11,7 @@ export interface LogoLockupProps {
   variant?: "horizontal" | "vertical" | "icon" | "reversed";
   /** Pixel size of the placeholder mark. */
   markSize?: number;
-  /** "asWritten" keeps the tagline as written (ADR-0009). @default "uppercase" */
+  /** "asWritten" keeps the tagline as written. @default "uppercase" */
   taglineCasing?: "uppercase" | "asWritten";
 }
 

package/dist/TextField/TextField.d.ts

@@ -10,7 +10,7 @@ type FieldControlProps = Omit<
 export interface TextFieldProps extends FieldControlProps {
   /** Label above the control, uppercase unless labelCasing is "asWritten". */
   label?: string;
-  /** "asWritten" for a label longer than two words or holding a digit, unit, or mixed-case term (ADR-0009). @default "uppercase" */
+  /** "asWritten" for a label longer than two words or holding a digit, unit, or mixed-case term. @default "uppercase" */
   labelCasing?: "uppercase" | "asWritten";
   /** Helper text below the control, linked with `aria-describedby`. */
   hint?: string;
@@ -26,6 +26,9 @@ export interface TextFieldProps extends FieldControlProps {
   disabled?: boolean;
 }
 
-/** Labelled field – input / textarea / select with Judarn styling. */
+/**
+ * Labelled field – input / textarea / select with Judarn styling. A well set apart by fill alone:
+ * surfaceRecessed on the page, substrate inside a card, and no outline except in high-contrast modes.
+ */
 export function TextField(props: TextFieldProps): React.JSX.Element;
 export default TextField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@judarn/ui",
-  "version": "0.7.2",
+  "version": "0.7.12",
   "description": "Judarn design foundation tokens and React components for the web",
   "author": "Ruben Luthman",
   "license": "MIT",

package/src/tailwind.js

@@ -3,7 +3,7 @@
  * Generated from tokens/judarn-tokens.json  –  do not edit directly.
  */
 module.exports = function judarnTailwindPlugin({ addBase, theme }) {
-  // Do not override global border radius to 0px; adhere to ADR-0002
+  // Do not override global border radius to 0px; adhere to the shape rules in docs/DESIGN.md
 };
 
 module.exports.theme = {

package/styles/colors_and_type.css

@@ -106,7 +106,7 @@
      The resolved --accent, --accent-fg, --accent-ink and --accent-2 are declared in every theme
      scope so a nested scope resolves its own default; a hook set on :root survives nesting.
      --accent defaults to ink-100 and --accent-fg to --accent. --accent-ink is static ink on an
-     accent fill (ADR-0006); a project that sets --jd-accent sets --jd-accent-ink too. */
+     accent fill; a project that sets --jd-accent sets --jd-accent-ink too. */
   --accent:       var(--jd-accent, var(--jd-ink-100));
   --accent-fg:    var(--jd-accent-fg, var(--accent));
   --accent-ink:   var(--jd-accent-ink, #ffffff);
@@ -325,13 +325,26 @@
   font-variant-ligatures: none;
   color: var(--jd-ink-100);
 }
-/* As-written casing for the uppercase label styles: statuses, counts, values, units, messages, controls (ADR-0009). */
+/* As-written casing for the uppercase label styles: statuses, counts, values, units, messages, controls. */
 .t-label.t-as-written,
 .t-micro.t-as-written {
   text-transform: none;
   letter-spacing: var(--jd-track-body);
   font-feature-settings: normal;
 }
+/* Flow: space between the direct children of a container, from the space tokens. A heading belongs to the text below it. Never combine with gap. */
+.flow {
+  display: flow-root;
+}
+.flow > * + * {
+  margin-block-start: var(--jd-space-2);
+}
+.flow > * + :is(h1, h2, h3, h4, h5, h6, .t-display, .t-h1, .t-h2, .t-h3, .t-h4) {
+  margin-block-start: var(--jd-space-4);
+}
+.flow > :is(h1, h2, h3, h4, h5, h6, .t-display, .t-h1, .t-h2, .t-h3, .t-h4) + * {
+  margin-block-start: var(--jd-space-1);
+}
 .t-editorial-nums {
   font-variant-numeric: oldstyle-nums proportional-nums;
   font-feature-settings: "onum" 1, "pnum" 1;

package/styles/components.css

@@ -67,21 +67,29 @@
   text-transform: uppercase;
   color: var(--black);
 }
+/* A field is a well set apart by fill alone (DESIGN.md, Surface Hierarchy): surfaceRecessed on the
+   page, substrate inside a card. The resting border is transparent: it keeps the field's size, and
+   Windows high-contrast mode still draws it. High-contrast modes turn it into an ink-100 outline. */
 .field__input {
   font-family: var(--font-sans);
   font-size: var(--size-body);
   color: var(--black);
-  background: var(--white);
-  border: var(--rule) solid var(--black);
+  background: var(--jd-surface-recessed);
+  border: var(--rule) solid transparent;
   border-radius: var(--radius-control);
   padding: var(--space-2);
   width: 100%;
   transition: border-color 120ms linear, box-shadow 120ms linear;
 }
+.card .field__input { background: var(--paper); }
+@media (prefers-contrast: more) {
+  :where(:root:not([data-contrast="normal"])) .field__input { border-color: var(--ink-100); }
+}
+:where([data-contrast="high"]) .field__input { border-color: var(--ink-100); }
 .field__input::placeholder { color: var(--ink-60); }
 .field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
 .field__input:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
-.field__input:disabled { color: var(--ink-30); border-color: var(--ink-30); background: var(--jd-surface-recessed); cursor: not-allowed; }
+.field__input:disabled { color: var(--ink-30); cursor: not-allowed; }
 .field__input[aria-invalid="true"], .field__input.is-invalid { border-color: var(--signal-error); box-shadow: 0 0 0 1px var(--signal-error); }
 .field__hint { font-size: var(--size-small); color: var(--ink-60); }
 .field__hint.is-error, .field__hint--error { color: var(--signal-error); font-weight: var(--weight-medium); }
@@ -101,7 +109,7 @@ select.field__input { cursor: pointer; } /* native appearance keeps the platform
 .card--flat { border: none; padding: 0; border-radius: 0; }
 .card--compact { padding: var(--space-2); }
 .card--field { background: var(--bg2); border: none; }
-.card__eyebrow { color: var(--accent); } /* type comes from t-label (ADR-0009) */
+.card__eyebrow { color: var(--accent); } /* type comes from t-label */
 .card__title { font-size: var(--size-h4); font-weight: var(--weight-bold); letter-spacing: var(--track-head); }
 .card__body { font-size: var(--size-body); line-height: var(--lh-body); }
 .card__media { aspect-ratio: 3 / 2; background: var(--jd-surface-recessed); border-radius: var(--radius-control); overflow: hidden; }
@@ -151,7 +159,7 @@ select.field__input { cursor: pointer; } /* native appearance keeps the platform
   display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4);
 }
 .footer__col { display: flex; flex-direction: column; gap: var(--gap-tight); }
-.footer__head { margin: 0 0 var(--space-1); color: var(--black); } /* type comes from t-label (ADR-0009) */
+.footer__head { margin: 0 0 var(--space-1); color: var(--black); } /* type comes from t-label */
 .footer__link { font-size: var(--size-small); color: var(--fg2); }
 .footer__link:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
 
@@ -167,7 +175,7 @@ select.field__input { cursor: pointer; } /* native appearance keeps the platform
 .table .num { text-align: right; font-variant-numeric: tabular-nums; }
 
 /* As-written casing for a field label or column header that holds a unit, a mixed-case term,
-   or more than two words (ADR-0009). */
+   or more than two words. */
 .field__label.t-as-written,
 .table th.t-as-written,
 .matrix th.t-as-written { text-transform: none; letter-spacing: var(--track-body); }
@@ -179,7 +187,7 @@ select.field__input { cursor: pointer; } /* native appearance keeps the platform
 .lockup__mark { display: block; flex: none; }
 .lockup__words { display: flex; flex-direction: column; }
 .lockup__name { font-weight: var(--weight-bold); font-size: var(--size-h4); line-height: 1; letter-spacing: var(--track-head); }
-.lockup__tag { color: var(--fg2); margin-top: 4px; } /* type comes from t-label (ADR-0009) */
+.lockup__tag { color: var(--fg2); margin-top: 4px; } /* type comes from t-label */
 .lockup--reversed .lockup__tag { color: var(--ink-30); }
 
 /* ---- DATA MATRIX ------------------------------------------------------- */

package/styles/tailwind-theme.css

@@ -45,7 +45,7 @@
   --border-width-rule-bold: var(--jd-rule-bold);
   --border-width-rule-heavy: var(--jd-rule-heavy);
 
-  /* Platform Authority Radii (ADR-0002) */
+  /* Platform Authority Radii */
   --radius-subtle: var(--jd-radius-subtle, 6px);
   --radius-control: var(--jd-radius-control, 10px);
   --radius-card: var(--jd-radius-card, 16px);