@hjmds/react 1.3.5 → 1.5.0

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,2DAA2D,CAAC;AAOnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,aAAa,GACvC,MAAM,CAAC,SAAS,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAU7C,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,GAC/B,aAAa,CAmFf"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,2DAA2D,CAAC;AAWnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,aAAa,GACvC,MAAM,CAAC,SAAS,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAmB7C,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,GAC/B,aAAa,CAyHf"}

package/dist/theme.js

@@ -1,10 +1,18 @@
-import { control, easing, fontFamily, fontWeight, motion, radius, spacing, typography, } from "@hjmds/design-contracts/foundations";
+import { control, easing, fontFamily, fontWeight, motion, radius, shadow, spacing, stroke, typography, } from "@hjmds/design-contracts/foundations";
+import { resolveColorReference } from "@hjmds/design-contracts/color-references";
+import { focusIndicatorContract } from "@hjmds/design-contracts/contracts";
 import { visibleControlHeight, } from "@hjmds/design-contracts/components/design-system-provider";
-import { fieldRecipe } from "@hjmds/design-contracts/recipes/base";
-import { listRowRecipe, skeletonRecipe, switchRecipe, } from "@hjmds/design-contracts/recipes";
+import { buttonRecipe, fieldRecipe } from "@hjmds/design-contracts/recipes/base";
+import { bottomNavigationRecipe, dialogRecipe, listRowRecipe, sheetRecipe, skeletonRecipe, switchRecipe, toastRecipe, } from "@hjmds/design-contracts/recipes";
 function kebab(value) {
     return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
+// RN shadow token -> CSS; blur = radius, as react-native-web maps it.
+function shadowCss(token) {
+    const hex = token.color.replace("#", "");
+    const [r, g, b] = [0, 2, 4].map((start) => Number.parseInt(hex.slice(start, start + 2), 16));
+    return `0 ${token.offsetY}px ${token.radius}px rgb(${r} ${g} ${b} / ${Math.round(token.opacity * 100)}%)`;
+}
 function rem(value) {
     return `${Number((value / 16).toFixed(5))}rem`;
 }
@@ -48,6 +56,14 @@ export function createHjmThemeStyle(value) {
             : `${value}ms`;
     }
     style["--hjm-font-family-ui"] = fontFamily.ui.join(", ");
+    for (const [name, value] of Object.entries(stroke)) {
+        style[`--hjm-stroke-${kebab(name)}`] = `${value}px`;
+    }
+    // Unset before 1.4.1, so focus rules were invalid and drew no ring.
+    style["--hjm-color-focus"] = resolveColorReference(focusIndicatorContract.color, palette);
+    style["--hjm-focus-width"] = `${focusIndicatorContract.width}px`;
+    style["--hjm-focus-offset"] = `${focusIndicatorContract.offset}px`;
+    style["--hjm-bottom-navigation-pressed-background"] = resolveColorReference(bottomNavigationRecipe.states.pressedBackground, palette);
     // Row rhythm and the leading frame come from the recipe so the stylesheet
     // does not carry a second copy of the same numbers.
     style["--hjm-list-row-gap"] = rem(listRowRecipe.gap);
@@ -75,6 +91,34 @@ export function createHjmThemeStyle(value) {
     style["--hjm-skeleton-easing"] = `cubic-bezier(${skeletonCurve.join(", ")})`;
     style["--hjm-skeleton-from-opacity"] = skeletonRecipe.animation.fromOpacity;
     style["--hjm-skeleton-to-opacity"] = skeletonRecipe.animation.toOpacity;
+    for (const [name, token] of Object.entries(shadow)) {
+        style[`--hjm-shadow-${kebab(name)}`] = shadowCss(token);
+    }
+    // Overlay chrome and sizes come from the recipes Native reads (1.5.0).
+    for (const [name, chrome] of [["dialog", dialogRecipe.content], ["sheet", sheetRecipe.content], ["toast", toastRecipe.surface]]) {
+        style[`--hjm-${name}-background`] = resolveColorReference(chrome.background, palette);
+        style[`--hjm-${name}-border`] = resolveColorReference(chrome.border, palette);
+        style[`--hjm-${name}-border-width`] = `${chrome.borderWidth}px`;
+        style[`--hjm-${name}-radius`] = `var(--hjm-radius-${chrome.radius})`;
+        style[`--hjm-${name}-shadow`] = shadowCss(chrome.shadow);
+    }
+    style["--hjm-sheet-max-height"] = `${sheetRecipe.content.maxHeightRatio * 100}dvh`;
+    style["--hjm-sheet-max-width"] = `${sheetRecipe.web.maxWidth}px`;
+    style["--hjm-sheet-handle-width"] = `${sheetRecipe.handle.width}px`;
+    style["--hjm-sheet-handle-height"] = `${sheetRecipe.handle.height}px`;
+    style["--hjm-sheet-handle-color"] = resolveColorReference(sheetRecipe.handle.color, palette);
+    for (const [name, ratio] of Object.entries(sheetRecipe.sizes)) {
+        if (ratio !== null)
+            style[`--hjm-sheet-size-${name}`] = `${ratio * 100}dvh`;
+    }
+    const toastExit = toastRecipe.transition.web.exit;
+    style["--hjm-toast-exit-duration"] = environment.reducedMotion ? "0ms" : `${toastExit.duration}ms`;
+    style["--hjm-toast-exit-easing"] = `cubic-bezier(${easing[toastExit.easing].join(", ")})`;
+    style["--hjm-button-pressed-opacity"] = buttonRecipe.opacity.pressed;
+    style["--hjm-button-disabled-opacity"] = buttonRecipe.opacity.disabled;
+    style["--hjm-field-border-width"] = `${fieldRecipe.borderWidth}px`;
+    style["--hjm-field-focus-ring-width"] = `${fieldRecipe.focusRingWidth}px`;
+    style["--hjm-field-disabled-opacity"] = fieldRecipe.disabledOpacity;
     style["--hjm-control-min-touch-target"] = `${control.minTouchTarget}px`;
     style["--hjm-control-field-height"] = `${control.fieldHeight}px`;
     style["--hjm-field-multiline-min-height"] = rem(fieldRecipe.multilineMinHeight);

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  control,\n  easing,\n  fontFamily,\n  fontWeight,\n  motion,\n  radius,\n  spacing,\n  typography,\n} from \"@hjmds/design-contracts/foundations\";\nimport {\n  visibleControlHeight,\n  type DesignSystemProviderValue,\n} from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { fieldRecipe } from \"@hjmds/design-contracts/recipes/base\";\nimport {\n  listRowRecipe,\n  skeletonRecipe,\n  switchRecipe,\n} from \"@hjmds/design-contracts/recipes\";\nimport type { CSSProperties } from \"react\";\n\nexport type HjmThemeStyle = CSSProperties &\n  Record<`--hjm-${string}`, string | number>;\n\nfunction kebab(value: string): string {\n  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\nfunction rem(value: number): string {\n  return `${Number((value / 16).toFixed(5))}rem`;\n}\n\nexport function createHjmThemeStyle(\n  value: DesignSystemProviderValue,\n): HjmThemeStyle {\n  const { environment, palette } = value;\n  const style: HjmThemeStyle = {\n    \"--hjm-text-scale\": environment.textScale,\n    \"--hjm-motion-scale\": environment.reducedMotion ? 0 : 1,\n    colorScheme: environment.theme,\n    backgroundColor: palette.theme.bg,\n    color: palette.theme.text,\n  };\n\n  for (const [name, color] of Object.entries(palette.theme)) {\n    style[`--hjm-color-${kebab(name)}`] = color;\n  }\n  for (const [name, color] of Object.entries(palette.statusAccents)) {\n    style[`--hjm-accent-${kebab(name)}`] = color;\n  }\n  for (const [name, color] of Object.entries(palette.statusAccentFills)) {\n    style[`--hjm-accent-fill-${kebab(name)}`] = color;\n  }\n  for (const [name, value] of Object.entries(spacing)) {\n    style[`--hjm-space-${kebab(name)}`] = `${value}px`;\n  }\n  for (const [name, value] of Object.entries(radius)) {\n    style[`--hjm-radius-${kebab(name)}`] = `${value}px`;\n  }\n  for (const [name, value] of Object.entries(typography)) {\n    style[`--hjm-type-${kebab(name)}-size`] =\n      `calc(${rem(value.fontSize)} * var(--hjm-text-scale))`;\n    style[`--hjm-type-${kebab(name)}-line-height`] =\n      `calc(${rem(value.lineHeight)} * var(--hjm-text-scale))`;\n    style[`--hjm-type-${kebab(name)}-weight`] = value.fontWeight;\n  }\n  for (const [name, value] of Object.entries(fontWeight)) {\n    style[`--hjm-font-weight-${kebab(name)}`] = value;\n  }\n  for (const [name, value] of Object.entries(motion)) {\n    style[`--hjm-motion-${kebab(name)}`] = environment.reducedMotion\n      ? \"0ms\"\n      : `${value}ms`;\n  }\n\n  style[\"--hjm-font-family-ui\"] = fontFamily.ui.join(\", \");\n  // Row rhythm and the leading frame come from the recipe so the stylesheet\n  // does not carry a second copy of the same numbers.\n  style[\"--hjm-list-row-gap\"] = rem(listRowRecipe.gap);\n  style[\"--hjm-list-row-leading-size\"] = rem(listRowRecipe.leadingSize);\n  for (const [name, value] of Object.entries(switchRecipe.sizes)) {\n    style[`--hjm-switch-${kebab(name)}-width`] = rem(value.width);\n    style[`--hjm-switch-${kebab(name)}-height`] = rem(value.height);\n    style[`--hjm-switch-${kebab(name)}-thumb`] = rem(value.thumb);\n    style[`--hjm-switch-${kebab(name)}-inset`] = rem(value.inset);\n    style[`--hjm-switch-${kebab(name)}-offset`] = rem(\n      value.width - value.thumb - value.inset * 2,\n    );\n  }\n  for (const [name, value] of Object.entries(listRowRecipe.density)) {\n    style[`--hjm-list-row-${kebab(name)}-one-line`] = rem(value.oneLineMinHeight);\n    style[`--hjm-list-row-${kebab(name)}-two-line`] = rem(value.twoLineMinHeight);\n    style[`--hjm-list-row-${kebab(name)}-padding-inline`] = rem(value.paddingHorizontal);\n    style[`--hjm-list-row-${kebab(name)}-padding-block`] = rem(value.paddingVertical);\n  }\n  // The recipe owns these; a second copy in the stylesheet drifts silently\n  // because the gates read that file as text only. Block and text heights\n  // already resolve through --hjm-space-*, so they are not re-emitted.\n  const skeletonCurve = easing[skeletonRecipe.animation.easing];\n  style[\"--hjm-skeleton-circle-size\"] =\n    `${skeletonRecipe.shapes.circle.defaultHeight}px`;\n  style[\"--hjm-skeleton-duration\"] = `${skeletonRecipe.animation.duration}ms`;\n  style[\"--hjm-skeleton-easing\"] = `cubic-bezier(${skeletonCurve.join(\", \")})`;\n  style[\"--hjm-skeleton-from-opacity\"] = skeletonRecipe.animation.fromOpacity;\n  style[\"--hjm-skeleton-to-opacity\"] = skeletonRecipe.animation.toOpacity;\n  style[\"--hjm-control-min-touch-target\"] = `${control.minTouchTarget}px`;\n  style[\"--hjm-control-field-height\"] = `${control.fieldHeight}px`;\n  style[\"--hjm-field-multiline-min-height\"] = rem(fieldRecipe.multilineMinHeight);\n  style[\"--hjm-field-padding-block\"] = rem(fieldRecipe.paddingVertical);\n  for (const [name, value] of Object.entries(control.buttonHeight)) {\n    // The axis is applied to the emitted variables rather than to each rule so\n    // that every stylesheet consumer of a control height honours it at once.\n    style[`--hjm-control-button-${kebab(name)}`] =\n      `${visibleControlHeight(value, environment.minimumVisualTarget)}px`;\n  }\n\n  return style;\n}\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,MAAM,EACN,UAAU,EACV,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,GACX,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EACL,oBAAoB,GAErB,MAAM,2DAA2D,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EACL,sBAAsB,EACtB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,iCAAiC,CAAC;AAMzC,SAAS,KAAK,CAAC,KAAa;IAC1B,OAAO,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACzE,CAAC;AAID,sEAAsE;AACtE,SAAS,SAAS,CAAC,KAAkB;IACnC,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7F,OAAO,KAAK,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC;AAC5G,CAAC;AAED,SAAS,GAAG,CAAC,KAAa;IACxB,OAAO,GAAG,MAAM,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,KAAgC;IAEhC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,KAAK,GAAkB;QAC3B,kBAAkB,EAAE,WAAW,CAAC,SAAS;QACzC,oBAAoB,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,WAAW,EAAE,WAAW,CAAC,KAAK;QAC9B,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE;QACjC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;KAC1B,CAAC;IAEF,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1D,KAAK,CAAC,eAAe,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;IAC9C,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;QAClE,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;IAC/C,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC;QACtE,KAAK,CAAC,qBAAqB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;IACpD,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QACpD,KAAK,CAAC,eAAe,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;IACrD,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACnD,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;IACtD,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;QACvD,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,2BAA2B,CAAC;QACzD,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC;YAC5C,QAAQ,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC;QAC3D,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC;IAC/D,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;QACvD,KAAK,CAAC,qBAAqB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;IACpD,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACnD,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,aAAa;YAC9D,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC;IACnB,CAAC;IAED,KAAK,CAAC,sBAAsB,CAAC,GAAG,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACnD,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;IACtD,CAAC;IACD,oEAAoE;IACpE,KAAK,CAAC,mBAAmB,CAAC,GAAG,qBAAqB,CAAC,sBAAsB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1F,KAAK,CAAC,mBAAmB,CAAC,GAAG,GAAG,sBAAsB,CAAC,KAAK,IAAI,CAAC;IACjE,KAAK,CAAC,oBAAoB,CAAC,GAAG,GAAG,sBAAsB,CAAC,MAAM,IAAI,CAAC;IACnE,KAAK,CAAC,4CAA4C,CAAC,GAAG,qBAAqB,CACzE,sBAAsB,CAAC,MAAM,CAAC,iBAAiB,EAC/C,OAAO,CACR,CAAC;IACF,0EAA0E;IAC1E,oDAAoD;IACpD,KAAK,CAAC,oBAAoB,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACrD,KAAK,CAAC,6BAA6B,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACtE,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;QAC/D,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9D,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChE,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9D,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9D,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,CAC/C,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAC5C,CAAC;IACJ,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC;QAClE,KAAK,CAAC,kBAAkB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QAC9E,KAAK,CAAC,kBAAkB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QAC9E,KAAK,CAAC,kBAAkB,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACrF,KAAK,CAAC,kBAAkB,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACpF,CAAC;IACD,yEAAyE;IACzE,wEAAwE;IACxE,qEAAqE;IACrE,MAAM,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9D,KAAK,CAAC,4BAA4B,CAAC;QACjC,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,IAAI,CAAC;IACpD,KAAK,CAAC,yBAAyB,CAAC,GAAG,GAAG,cAAc,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC;IAC5E,KAAK,CAAC,uBAAuB,CAAC,GAAG,gBAAgB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IAC7E,KAAK,CAAC,6BAA6B,CAAC,GAAG,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC;IAC5E,KAAK,CAAC,2BAA2B,CAAC,GAAG,cAAc,CAAC,SAAS,CAAC,SAAS,CAAC;IACxE,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACnD,KAAK,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAC1D,CAAC;IACD,uEAAuE;IACvE,KAAK,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAU,EAAE,CAAC;QACzI,KAAK,CAAC,SAAS,IAAI,aAAa,CAAC,GAAG,qBAAqB,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;QACtF,KAAK,CAAC,SAAS,IAAI,SAAS,CAAC,GAAG,qBAAqB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC9E,KAAK,CAAC,SAAS,IAAI,eAAe,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,IAAI,CAAC;QAChE,KAAK,CAAC,SAAS,IAAI,SAAS,CAAC,GAAG,oBAAoB,MAAM,CAAC,MAAM,GAAG,CAAC;QACrE,KAAK,CAAC,SAAS,IAAI,SAAS,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC;IACD,KAAK,CAAC,wBAAwB,CAAC,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,GAAG,GAAG,KAAK,CAAC;IACnF,KAAK,CAAC,uBAAuB,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC;IACjE,KAAK,CAAC,0BAA0B,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,2BAA2B,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC;IACtE,KAAK,CAAC,0BAA0B,CAAC,GAAG,qBAAqB,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC7F,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9D,IAAI,KAAK,KAAK,IAAI;YAAE,KAAK,CAAC,oBAAoB,IAAI,EAAE,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,KAAK,CAAC;IAC9E,CAAC;IACD,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;IAClD,KAAK,CAAC,2BAA2B,CAAC,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,CAAC;IACnG,KAAK,CAAC,yBAAyB,CAAC,GAAG,gBAAgB,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IAC1F,KAAK,CAAC,8BAA8B,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC;IACrE,KAAK,CAAC,+BAA+B,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC;IACvE,KAAK,CAAC,0BAA0B,CAAC,GAAG,GAAG,WAAW,CAAC,WAAW,IAAI,CAAC;IACnE,KAAK,CAAC,8BAA8B,CAAC,GAAG,GAAG,WAAW,CAAC,cAAc,IAAI,CAAC;IAC1E,KAAK,CAAC,8BAA8B,CAAC,GAAG,WAAW,CAAC,eAAe,CAAC;IACpE,KAAK,CAAC,gCAAgC,CAAC,GAAG,GAAG,OAAO,CAAC,cAAc,IAAI,CAAC;IACxE,KAAK,CAAC,4BAA4B,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,IAAI,CAAC;IACjE,KAAK,CAAC,kCAAkC,CAAC,GAAG,GAAG,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAChF,KAAK,CAAC,2BAA2B,CAAC,GAAG,GAAG,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IACtE,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QACjE,2EAA2E;QAC3E,yEAAyE;QACzE,KAAK,CAAC,wBAAwB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1C,GAAG,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC,mBAAmB,CAAC,IAAI,CAAC;IACxE,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import {\n  control,\n  easing,\n  fontFamily,\n  fontWeight,\n  motion,\n  radius,\n  shadow,\n  spacing,\n  stroke,\n  typography,\n} from \"@hjmds/design-contracts/foundations\";\nimport { resolveColorReference } from \"@hjmds/design-contracts/color-references\";\nimport { focusIndicatorContract } from \"@hjmds/design-contracts/contracts\";\nimport {\n  visibleControlHeight,\n  type DesignSystemProviderValue,\n} from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { buttonRecipe, fieldRecipe } from \"@hjmds/design-contracts/recipes/base\";\nimport {\n  bottomNavigationRecipe,\n  dialogRecipe,\n  listRowRecipe,\n  sheetRecipe,\n  skeletonRecipe,\n  switchRecipe,\n  toastRecipe,\n} from \"@hjmds/design-contracts/recipes\";\nimport type { CSSProperties } from \"react\";\n\nexport type HjmThemeStyle = CSSProperties &\n  Record<`--hjm-${string}`, string | number>;\n\nfunction kebab(value: string): string {\n  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\ntype ShadowToken = Readonly<{ color: string; opacity: number; radius: number; offsetY: number }>;\n\n// RN shadow token -> CSS; blur = radius, as react-native-web maps it.\nfunction shadowCss(token: ShadowToken): string {\n  const hex = token.color.replace(\"#\", \"\");\n  const [r, g, b] = [0, 2, 4].map((start) => Number.parseInt(hex.slice(start, start + 2), 16));\n  return `0 ${token.offsetY}px ${token.radius}px rgb(${r} ${g} ${b} / ${Math.round(token.opacity * 100)}%)`;\n}\n\nfunction rem(value: number): string {\n  return `${Number((value / 16).toFixed(5))}rem`;\n}\n\nexport function createHjmThemeStyle(\n  value: DesignSystemProviderValue,\n): HjmThemeStyle {\n  const { environment, palette } = value;\n  const style: HjmThemeStyle = {\n    \"--hjm-text-scale\": environment.textScale,\n    \"--hjm-motion-scale\": environment.reducedMotion ? 0 : 1,\n    colorScheme: environment.theme,\n    backgroundColor: palette.theme.bg,\n    color: palette.theme.text,\n  };\n\n  for (const [name, color] of Object.entries(palette.theme)) {\n    style[`--hjm-color-${kebab(name)}`] = color;\n  }\n  for (const [name, color] of Object.entries(palette.statusAccents)) {\n    style[`--hjm-accent-${kebab(name)}`] = color;\n  }\n  for (const [name, color] of Object.entries(palette.statusAccentFills)) {\n    style[`--hjm-accent-fill-${kebab(name)}`] = color;\n  }\n  for (const [name, value] of Object.entries(spacing)) {\n    style[`--hjm-space-${kebab(name)}`] = `${value}px`;\n  }\n  for (const [name, value] of Object.entries(radius)) {\n    style[`--hjm-radius-${kebab(name)}`] = `${value}px`;\n  }\n  for (const [name, value] of Object.entries(typography)) {\n    style[`--hjm-type-${kebab(name)}-size`] =\n      `calc(${rem(value.fontSize)} * var(--hjm-text-scale))`;\n    style[`--hjm-type-${kebab(name)}-line-height`] =\n      `calc(${rem(value.lineHeight)} * var(--hjm-text-scale))`;\n    style[`--hjm-type-${kebab(name)}-weight`] = value.fontWeight;\n  }\n  for (const [name, value] of Object.entries(fontWeight)) {\n    style[`--hjm-font-weight-${kebab(name)}`] = value;\n  }\n  for (const [name, value] of Object.entries(motion)) {\n    style[`--hjm-motion-${kebab(name)}`] = environment.reducedMotion\n      ? \"0ms\"\n      : `${value}ms`;\n  }\n\n  style[\"--hjm-font-family-ui\"] = fontFamily.ui.join(\", \");\n  for (const [name, value] of Object.entries(stroke)) {\n    style[`--hjm-stroke-${kebab(name)}`] = `${value}px`;\n  }\n  // Unset before 1.4.1, so focus rules were invalid and drew no ring.\n  style[\"--hjm-color-focus\"] = resolveColorReference(focusIndicatorContract.color, palette);\n  style[\"--hjm-focus-width\"] = `${focusIndicatorContract.width}px`;\n  style[\"--hjm-focus-offset\"] = `${focusIndicatorContract.offset}px`;\n  style[\"--hjm-bottom-navigation-pressed-background\"] = resolveColorReference(\n    bottomNavigationRecipe.states.pressedBackground,\n    palette,\n  );\n  // Row rhythm and the leading frame come from the recipe so the stylesheet\n  // does not carry a second copy of the same numbers.\n  style[\"--hjm-list-row-gap\"] = rem(listRowRecipe.gap);\n  style[\"--hjm-list-row-leading-size\"] = rem(listRowRecipe.leadingSize);\n  for (const [name, value] of Object.entries(switchRecipe.sizes)) {\n    style[`--hjm-switch-${kebab(name)}-width`] = rem(value.width);\n    style[`--hjm-switch-${kebab(name)}-height`] = rem(value.height);\n    style[`--hjm-switch-${kebab(name)}-thumb`] = rem(value.thumb);\n    style[`--hjm-switch-${kebab(name)}-inset`] = rem(value.inset);\n    style[`--hjm-switch-${kebab(name)}-offset`] = rem(\n      value.width - value.thumb - value.inset * 2,\n    );\n  }\n  for (const [name, value] of Object.entries(listRowRecipe.density)) {\n    style[`--hjm-list-row-${kebab(name)}-one-line`] = rem(value.oneLineMinHeight);\n    style[`--hjm-list-row-${kebab(name)}-two-line`] = rem(value.twoLineMinHeight);\n    style[`--hjm-list-row-${kebab(name)}-padding-inline`] = rem(value.paddingHorizontal);\n    style[`--hjm-list-row-${kebab(name)}-padding-block`] = rem(value.paddingVertical);\n  }\n  // The recipe owns these; a second copy in the stylesheet drifts silently\n  // because the gates read that file as text only. Block and text heights\n  // already resolve through --hjm-space-*, so they are not re-emitted.\n  const skeletonCurve = easing[skeletonRecipe.animation.easing];\n  style[\"--hjm-skeleton-circle-size\"] =\n    `${skeletonRecipe.shapes.circle.defaultHeight}px`;\n  style[\"--hjm-skeleton-duration\"] = `${skeletonRecipe.animation.duration}ms`;\n  style[\"--hjm-skeleton-easing\"] = `cubic-bezier(${skeletonCurve.join(\", \")})`;\n  style[\"--hjm-skeleton-from-opacity\"] = skeletonRecipe.animation.fromOpacity;\n  style[\"--hjm-skeleton-to-opacity\"] = skeletonRecipe.animation.toOpacity;\n  for (const [name, token] of Object.entries(shadow)) {\n    style[`--hjm-shadow-${kebab(name)}`] = shadowCss(token);\n  }\n  // Overlay chrome and sizes come from the recipes Native reads (1.5.0).\n  for (const [name, chrome] of [[\"dialog\", dialogRecipe.content], [\"sheet\", sheetRecipe.content], [\"toast\", toastRecipe.surface]] as const) {\n    style[`--hjm-${name}-background`] = resolveColorReference(chrome.background, palette);\n    style[`--hjm-${name}-border`] = resolveColorReference(chrome.border, palette);\n    style[`--hjm-${name}-border-width`] = `${chrome.borderWidth}px`;\n    style[`--hjm-${name}-radius`] = `var(--hjm-radius-${chrome.radius})`;\n    style[`--hjm-${name}-shadow`] = shadowCss(chrome.shadow);\n  }\n  style[\"--hjm-sheet-max-height\"] = `${sheetRecipe.content.maxHeightRatio * 100}dvh`;\n  style[\"--hjm-sheet-max-width\"] = `${sheetRecipe.web.maxWidth}px`;\n  style[\"--hjm-sheet-handle-width\"] = `${sheetRecipe.handle.width}px`;\n  style[\"--hjm-sheet-handle-height\"] = `${sheetRecipe.handle.height}px`;\n  style[\"--hjm-sheet-handle-color\"] = resolveColorReference(sheetRecipe.handle.color, palette);\n  for (const [name, ratio] of Object.entries(sheetRecipe.sizes)) {\n    if (ratio !== null) style[`--hjm-sheet-size-${name}`] = `${ratio * 100}dvh`;\n  }\n  const toastExit = toastRecipe.transition.web.exit;\n  style[\"--hjm-toast-exit-duration\"] = environment.reducedMotion ? \"0ms\" : `${toastExit.duration}ms`;\n  style[\"--hjm-toast-exit-easing\"] = `cubic-bezier(${easing[toastExit.easing].join(\", \")})`;\n  style[\"--hjm-button-pressed-opacity\"] = buttonRecipe.opacity.pressed;\n  style[\"--hjm-button-disabled-opacity\"] = buttonRecipe.opacity.disabled;\n  style[\"--hjm-field-border-width\"] = `${fieldRecipe.borderWidth}px`;\n  style[\"--hjm-field-focus-ring-width\"] = `${fieldRecipe.focusRingWidth}px`;\n  style[\"--hjm-field-disabled-opacity\"] = fieldRecipe.disabledOpacity;\n  style[\"--hjm-control-min-touch-target\"] = `${control.minTouchTarget}px`;\n  style[\"--hjm-control-field-height\"] = `${control.fieldHeight}px`;\n  style[\"--hjm-field-multiline-min-height\"] = rem(fieldRecipe.multilineMinHeight);\n  style[\"--hjm-field-padding-block\"] = rem(fieldRecipe.paddingVertical);\n  for (const [name, value] of Object.entries(control.buttonHeight)) {\n    // The axis is applied to the emitted variables rather than to each rule so\n    // that every stylesheet consumer of a control height honours it at once.\n    style[`--hjm-control-button-${kebab(name)}`] =\n      `${visibleControlHeight(value, environment.minimumVisualTarget)}px`;\n  }\n\n  return style;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/react",
-  "version": "1.3.5",
+  "version": "1.5.0",
   "description": "Accessible React 19 renderers for HJM design contracts.",
   "license": "MIT",
   "publishConfig": {
@@ -293,7 +293,8 @@
       "import": "./dist/evidence.js",
       "default": "./dist/evidence.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./styles.layered.css": "./dist/styles.layered.css"
   },
   "files": [
     "dist",
@@ -301,7 +302,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@hjmds/design-contracts": ">=1.3.0 <1.4.0",
+    "@hjmds/design-contracts": ">=1.5.0 <1.6.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -315,14 +316,15 @@
     "react-dom": "19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.11",
-    "@hjmds/design-contracts": "1.3.5"
+    "@hjmds/design-contracts": "1.5.0"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test:ssr": "vitest run --config vitest.ssr.config.ts",
     "test:browser": "vitest run --config vitest.browser.config.ts",
     "test": "pnpm test:ssr && pnpm test:browser",
-    "check": "pnpm typecheck && pnpm test && pnpm build"
+    "check": "pnpm typecheck && pnpm test && pnpm build",
+    "test:visual": "vitest run --config vitest.visual.config.ts"
   }
 }