@tenphi/renderer 0.27.0 → 0.30.0

package/README.md

@@ -9,13 +9,15 @@ mobile sidebar. Application-owned Astro content
 collections remain independent.
 
 `@tenphi/renderer/styling` exports `tasty`, `useGlobalStyles`, `mergeStyles`,
-the `Styles` type, and the `defineComponent` and `resolveComponentStyles`
-helpers for merging `theme.customStyles` into custom components. The facade exposes
+the `Styles` type, the shared `Button` foundation, and the `defineComponent`,
+`extendComponent`, and `resolveComponentStyles` helpers for merging
+`theme.customStyles` into custom components. The facade exposes
 the same API through `@tenphi/cookbook/styling`.
 
 `@tenphi/renderer/eslint-plugin` exports the default Tasty ESLint plugin,
-`recommended` and `strict` rule maps, its configuration types, and a
-`validationConfig` preset covering Cookbook's theme names and styling helpers.
+`recommended` and `strict` rule maps, its configuration types, a
+`validationConfig` preset covering Cookbook's theme names and styling helpers,
+and `createValidationConfig(theme)` for deriving names from a theme.
 Use `extends: "@tenphi/renderer"` in `tasty.config.ts` to inherit this preset
 and list only your additional tokens, states, or presets.
 It matches `@tenphi/cookbook/eslint-plugin`; see

package/dist/client/preview-height.d.ts

@@ -0,0 +1,16 @@
+//#region src/client/preview-height.d.ts
+/**
+ * The message a scripted preview frame and its page exchange. The frame's
+ * reporter (preview-document.ts) posts `{ type, height }` with its content
+ * height; the page posts `{ type }` to ask for the height again.
+ */
+declare const PREVIEW_HEIGHT_MESSAGE = "cookbook:preview-height";
+/**
+ * Size each preview frame to the height its document reports plus the frame's
+ * `data-buffer` length, a validated CSS length. The frame's `min-height` and
+ * `max-height` clamp the value, so this only sets `height`.
+ */
+declare function initializePreviewHeight(): void;
+//#endregion
+export { PREVIEW_HEIGHT_MESSAGE, initializePreviewHeight };
+//# sourceMappingURL=preview-height.d.ts.map

package/dist/client/preview-height.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-height.d.ts","names":[],"sources":["../../src/client/preview-height.ts"],"mappings":";;;;;;cAKa;;;;;;iBAUG"}

package/dist/client/preview-height.js

@@ -0,0 +1,31 @@
+//#region src/client/preview-height.ts
+/**
+* The message a scripted preview frame and its page exchange. The frame's
+* reporter (preview-document.ts) posts `{ type, height }` with its content
+* height; the page posts `{ type }` to ask for the height again.
+*/
+const PREVIEW_HEIGHT_MESSAGE = "cookbook:preview-height";
+const previewFrames = () => document.querySelectorAll("[data-element=Preview] iframe");
+/**
+* Size each preview frame to the height its document reports plus the frame's
+* `data-buffer` length, a validated CSS length. The frame's `min-height` and
+* `max-height` clamp the value, so this only sets `height`.
+*/
+function initializePreviewHeight() {
+	addEventListener("message", resizePreviewFrame);
+	for (const frame of previewFrames()) frame.contentWindow?.postMessage({ type: PREVIEW_HEIGHT_MESSAGE }, "*");
+}
+function resizePreviewFrame({ data, source }) {
+	const height = data?.type === "cookbook:preview-height" && data.height;
+	if (typeof height !== "number" || !Number.isFinite(height) || height < 0) return;
+	for (const frame of previewFrames()) if (frame.contentWindow === source) {
+		const content = `${Math.ceil(height)}px`;
+		const { buffer } = frame.dataset;
+		frame.style.height = buffer ? `calc(${content} + ${buffer})` : content;
+		return;
+	}
+}
+//#endregion
+export { PREVIEW_HEIGHT_MESSAGE, initializePreviewHeight };
+
+//# sourceMappingURL=preview-height.js.map

package/dist/client/preview-height.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-height.js","names":[],"sources":["../../src/client/preview-height.ts"],"sourcesContent":["/**\n * The message a scripted preview frame and its page exchange. The frame's\n * reporter (preview-document.ts) posts `{ type, height }` with its content\n * height; the page posts `{ type }` to ask for the height again.\n */\nexport const PREVIEW_HEIGHT_MESSAGE = \"cookbook:preview-height\";\n\nconst previewFrames = () =>\n  document.querySelectorAll<HTMLIFrameElement>(\"[data-element=Preview] iframe\");\n\n/**\n * Size each preview frame to the height its document reports plus the frame's\n * `data-buffer` length, a validated CSS length. The frame's `min-height` and\n * `max-height` clamp the value, so this only sets `height`.\n */\nexport function initializePreviewHeight(): void {\n  addEventListener(\"message\", resizePreviewFrame);\n  // Frames usually load and report before this deferred module runs.\n  for (const frame of previewFrames())\n    frame.contentWindow?.postMessage({ type: PREVIEW_HEIGHT_MESSAGE }, \"*\");\n}\n\nfunction resizePreviewFrame({ data, source }: MessageEvent): void {\n  const height: unknown = data?.type === PREVIEW_HEIGHT_MESSAGE && data.height;\n  if (typeof height !== \"number\" || !Number.isFinite(height) || height < 0)\n    return;\n  for (const frame of previewFrames())\n    if (frame.contentWindow === source) {\n      const content = `${Math.ceil(height)}px`;\n      const { buffer } = frame.dataset;\n      frame.style.height = buffer ? `calc(${content} + ${buffer})` : content;\n      return;\n    }\n}\n"],"mappings":";;;;;;AAKA,MAAa,yBAAyB;AAEtC,MAAM,sBACJ,SAAS,iBAAoC,+BAA+B;;;;;;AAO9E,SAAgB,0BAAgC;CAC9C,iBAAiB,WAAW,kBAAkB;CAE9C,KAAK,MAAM,SAAS,cAAc,GAChC,MAAM,eAAe,YAAY,EAAE,MAAM,uBAAuB,GAAG,GAAG;AAC1E;AAEA,SAAS,mBAAmB,EAAE,MAAM,UAA8B;CAChE,MAAM,SAAkB,MAAM,SAAA,6BAAmC,KAAK;CACtE,IAAI,OAAO,WAAW,YAAY,CAAC,OAAO,SAAS,MAAM,KAAK,SAAS,GACrE;CACF,KAAK,MAAM,SAAS,cAAc,GAChC,IAAI,MAAM,kBAAkB,QAAQ;EAClC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,EAAE;EACrC,MAAM,EAAE,WAAW,MAAM;EACzB,MAAM,MAAM,SAAS,SAAS,QAAQ,QAAQ,KAAK,OAAO,KAAK;EAC/D;CACF;AACJ"}

package/dist/components/Banner.styles.js

@@ -7,7 +7,7 @@ export const BannerRoot = defineComponent("Banner", {
   as: "div",
   "data-element": "Banner",
   styles: {
-    padding: "($gap * 1.5) $docs-nav-pad-x",
+    padding: "1.5x $docs-nav-pad-x",
     color: "#accent-surface-text",
     fill: "#accent-surface",
     preset: "body / strong",

package/dist/components/Button.styles.js

@@ -6,7 +6,7 @@ export const Button = defineComponent("Button", {
   styles: {
     display: "flex",
     alignItems: "center",
-    gap: "$gap",
+    gap: "1x",
     blockSize: "min 0",
     color: "#text-soft",
     cursor: "pointer",

package/dist/components/Card.astro

@@ -1,13 +1,12 @@
 ---
-import { CardLink, CardRoot } from "./Card.styles.js";
+import { CardRoot } from "./Card.styles.js";
 
 import type { CardProps as Props } from "./props.js";
 
 const { title, href } = Astro.props;
-const Root = href ? CardLink : CardRoot;
 ---
 
-<Root className="td-card" href={href}>
+<CardRoot as={href ? "a" : undefined} className="td-card" href={href}>
   {title && <h3>{title}</h3>}
   <div><slot /></div>
-</Root>
+</CardRoot>

package/dist/components/Card.styles.js

@@ -1,5 +1,4 @@
 import { configureCookbookStates } from "./tasty-states.js";
-import { tasty } from "@tenphi/tasty";
 import { defineComponent } from "../define-component.js";
 
 configureCookbookStates();
@@ -16,11 +15,24 @@ export const CardRoot = defineComponent("Card", {
     textDecoration: "none",
     border: true,
     radius: "1cr",
-    fill: "#surface-2",
+    fill: {
+      "": "#surface-2",
+      ":any-link & :hover": "#surface-2-hover",
+      ":any-link & :active": "#surface-2-pressed",
+    },
     "$resting-shadow-offset": "1px",
     "$resting-shadow-blur": "2px",
-    shadow: "0 $resting-shadow-offset $resting-shadow-blur #shadow",
-    transition: "fill $transition, shadow $transition, translate $transition",
+    shadow: {
+      "": "0 $resting-shadow-offset $resting-shadow-blur #shadow",
+      ":any-link & :hover": "0 .75x 2x #shadow",
+    },
+    "$hover-offset": "-1px",
+    translate: {
+      "": "0",
+      ":any-link & :hover": "0 $hover-offset",
+      ":any-link & :active": "0",
+    },
+    transition: "fill, shadow, translate",
 
     Heading2: {
       $: "h2",
@@ -45,24 +57,3 @@ export const CardRoot = defineComponent("Card", {
     },
   },
 });
-
-export const CardLink = tasty(CardRoot, {
-  as: "a",
-  styles: {
-    fill: {
-      "": "#surface-2",
-      ":hover": "#surface-2-hover",
-      ":active": "#surface-2-pressed",
-    },
-    shadow: {
-      "": "0 $resting-shadow-offset $resting-shadow-blur #shadow",
-      ":hover": "0 .75x 2x #shadow",
-    },
-    "$hover-offset": "-1px",
-    translate: {
-      "": "0",
-      ":hover": "0 $hover-offset",
-      ":active": "0",
-    },
-  },
-});

package/dist/components/Document.styles.js

@@ -3,7 +3,6 @@ import jetBrainsMonoLatin from "@fontsource-variable/jetbrains-mono/files/jetbra
 import onestLatin from "@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url";
 import { resolveComponentStyles } from "./component-styles.js";
 import { configureCookbookStates } from "./tasty-states.js";
-import { TASTY_SPACING_PROPERTIES } from "../theme/tasty-config.js";
 import { getDefaultFontUsage, getFontFaces } from "../theme/fonts.js";
 
 configureCookbookStates();
@@ -31,11 +30,7 @@ export default function DocumentStyles() {
         "": null,
         ":has(#cookbook__sidebar:popover-open) & !@md": "hidden",
       },
-      colorScheme: {
-        "": "dark",
-        '[data-theme="light"]': "light",
-        "![data-theme] & @system-light": "light",
-      },
+      colorScheme: { "": "dark", "@light": "light" },
       "$docs-nav-height": {
         "": "4.5rem",
         ":has(TopNavigation)": "7.25rem",
@@ -49,7 +44,8 @@ export default function DocumentStyles() {
       "$docs-nav-gap": { "": "0.75rem", "!@md": "0.5rem" },
       "$docs-sidebar-pad-x": "1.5rem",
       "$docs-content-pad-x": {
-        "": "clamp(1.5rem, calc((100% - $content-width) / 2), 4rem)",
+        // Desktop heading links extend 2rem into this gutter; leave room for focus rings.
+        "": "clamp(2.5rem, ((100% - $content-width) / 2), 4rem)",
         "!@md": "1rem",
       },
       "$docs-menu-button-size": { "": "2.5rem", "!@md": "2.25rem" },
@@ -64,10 +60,9 @@ export default function DocumentStyles() {
   useGlobalStyles(
     ":where(html)",
     resolveComponentStyles("Document", {
-      "@property": TASTY_SPACING_PROPERTIES,
       boxSizing: "border-box",
-      scrollBehavior: { "@reduced-motion": "auto" },
-      transitionDuration: { "@reduced-motion": "0.01ms" },
+      scrollBehavior: { "": null, "@reduced-motion": "auto" },
+      transitionDuration: { "": null, "@reduced-motion": "0.01ms" },
       "$margin-block-start": "0",
       "$margin-block-end": "0",
       blockSize: "min 100%",
@@ -76,12 +71,8 @@ export default function DocumentStyles() {
       All: {
         $: "&::before, &::after, *, *::before, *::after",
         boxSizing: "border-box",
-        scrollBehavior: {
-          "@reduced-motion": "auto",
-        },
-        transitionDuration: {
-          "@reduced-motion": "0.01ms",
-        },
+        scrollBehavior: { "": null, "@reduced-motion": "auto" },
+        transitionDuration: { "": null, "@reduced-motion": "0.01ms" },
       },
       BlockSpacing: {
         $: "*",
@@ -122,7 +113,7 @@ export default function DocumentStyles() {
         $: ":where(button), :where(input), :where(select), :where(textarea)",
         preset: "body",
         blockSize: "min $control-height",
-        radius: "$radius",
+        radius: "1r",
         shadow: "none",
       },
       Pointer: {
@@ -152,23 +143,17 @@ export default function DocumentStyles() {
       },
       PrintHidden: {
         $: "*",
-        display: { "": null, "@own(print-hidden) & @media:print": "none" },
+        hide: { "": null, "@own(print-hidden) & @media:print": true },
       },
       DesktopBlock: {
         $: "*",
-        display: {
-          "": null,
-          "@own(desktop-block)": "block",
-          "@own(desktop-block) & !@md": "none",
-        },
+        display: { "": null, "@own(desktop-block)": "block" },
+        hide: { "": null, "@own(desktop-block) & !@md": true },
       },
       DesktopFlex: {
         $: "*",
-        display: {
-          "": null,
-          "@own(desktop-flex)": "flex",
-          "@own(desktop-flex) & !@md": "none",
-        },
+        display: { "": null, "@own(desktop-flex)": "flex" },
+        hide: { "": null, "@own(desktop-flex) & !@md": true },
       },
       ScreenReaderOnly: {
         $: "*",
@@ -200,19 +185,13 @@ export default function DocumentStyles() {
       Link: { $: "a", color: "#accent-text" },
       NarrowBlock: {
         $: "*",
-        display: {
-          "": null,
-          "@own(narrow)": "none",
-          "@own(narrow) & !@lg": "block",
-        },
+        display: { "": null, "@own(narrow)": "block" },
+        hide: { "": null, "@own(narrow) & @lg": true },
       },
       MobileBlock: {
         $: "*",
-        display: {
-          "": null,
-          "@own(mobile)": "none",
-          "@own(mobile) & !@md": "block",
-        },
+        display: { "": null, "@own(mobile)": "block" },
+        hide: { "": null, "@own(mobile) & @md": true },
       },
       Code: {
         $: ":where(code), :where(kbd), :where(samp), :where(pre)",
@@ -228,7 +207,7 @@ export default function DocumentStyles() {
       },
       CurrentLink: {
         $: "a",
-        radius: { "": null, '@own([aria-current="page"])': "$radius" },
+        radius: { "": null, '@own([aria-current="page"])': "1r" },
       },
       SearchOpen: {
         $: "body",
@@ -251,7 +230,7 @@ export default function DocumentStyles() {
         ":is(h6)": "h6",
       },
       textWrap: "balance",
-      "$margin-block-start": { "": null, '[id="_top"]': "($gap * 2)" },
+      "$margin-block-start": { "": null, '[id="_top"]': "2x" },
       blockMargin: "$margin-block-start $margin-block-end",
     }),
   );

package/dist/components/Footer.styles.js

@@ -9,20 +9,20 @@ export const FooterRoot = defineComponent("Footer", {
   styles: {
     display: "flex",
     flow: "column",
-    gap: "($gap * 3)",
+    gap: "3x",
     Meta: {
       display: "flex",
       flow: "row wrap",
       justifyContent: "space-between",
-      gap: "($gap * 1.5) ($gap * 6)",
-      blockMargin: "($gap * 6) start",
+      gap: "1.5x 6x",
+      blockMargin: "6x start",
       color: "#text-muted",
       preset: "small",
     },
     MetaLink: {
       display: "flex",
       alignItems: "center",
-      gap: "$gap",
+      gap: "1x",
       inlineMargin: { "": "0", "@own(:only-child)": "auto start" },
       color: { "": "#text-muted", "@own(:hover)": "#text" },
       textDecoration: "none",
@@ -31,7 +31,7 @@ export const FooterRoot = defineComponent("Footer", {
       inlineMargin: { "": "0", "@own(:only-child)": "auto start" },
     },
     Credit: {
-      margin: "($gap * 3) auto",
+      margin: "3x auto",
       color: "#text",
       preset: "small",
       textAlign: "center",

package/dist/components/Header.styles.js

@@ -24,7 +24,7 @@ export const HeaderRoot = defineComponent("Header", {
       display: "flex",
       alignItems: "center",
       flow: "row",
-      gap: "$gap",
+      gap: "1x",
       overflow: "hidden",
       flexShrink: "1",
       inlineSize: "min 0",
@@ -70,7 +70,7 @@ export const HeaderRoot = defineComponent("Header", {
       flow: "row",
       alignItems: "center",
       justifyContent: "flex-end",
-      gap: "($gap * 0.5)",
+      gap: "0.5x",
     },
     Social: {
       display: "flex",

package/dist/components/HeaderFrame.styles.js

@@ -13,7 +13,7 @@ export const HeaderFrameRoot = defineComponent("HeaderFrame", {
     inlineSize: "100%",
     blockSize: "$docs-nav-height",
     padding: "0 $docs-nav-pad-x",
-    blockBorder: "$border-width solid #border end",
+    blockBorder: "1bw solid #border end",
     fill: "#header",
     "$backdrop-blur": "16px",
     backdropFilter: "blur($backdrop-blur)",

package/dist/components/HeaderLinks.styles.js

@@ -8,7 +8,8 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
   "data-element": "HeaderLinks",
   styles: {
     display: "flex",
-    flexShrink: "0",
+    flexShrink: { "": "1", "!@md": "0" },
+    inlineSize: "min 0",
     order: { "": "0", "!@md": "2" },
     "$popover-transition": "120ms",
     Desktop: {
@@ -16,7 +17,8 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       display: "flex",
       hide: { "": false, "!@md": true },
       alignItems: "center",
-      gap: "($gap * 0.5)",
+      gap: "0.5x",
+      inlineSize: "min 0",
     },
     Link: {
       $: "a",
@@ -24,8 +26,8 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       alignItems: "center",
       justifyContent: "center",
       blockSize: "min $control-height",
-      padding: "$gap ($gap * 1.25)",
-      radius: "$radius",
+      padding: "1x 1.25x",
+      radius: "1r",
       color: "#text-soft",
       fill: "#clear",
       preset: "small / strong",
@@ -34,8 +36,15 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
     },
     DesktopLink: {
       $: "Desktop a",
+      // A flex container can't truncate its text, so center a block instead.
+      display: "block",
+      alignContent: "center",
+      inlineSize: "min 0",
+      overflow: "hidden",
+      textAlign: "center",
+      textOverflow: "ellipsis",
       radius: "$header-control-radius",
-      inlinePadding: "($gap * 2)",
+      inlinePadding: "2x",
     },
     HoverLink: {
       $: "a",
@@ -78,16 +87,17 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
     Panel: {
       $: "Panel",
       position: "fixed",
-      inset: "0.5rem $docs-nav-pad-x auto auto",
-      inlineSize: "min(20rem, calc(100vw - 2 * $docs-nav-pad-x))",
+      blockInset: "0.5rem start",
+      inlineInset: "$docs-nav-pad-x end",
+      inlineSize: "min(20rem, (100vw - 2 * $docs-nav-pad-x))",
       blockSize: "max (100dvh - 1rem)",
       overflowY: "auto",
       margin: "0",
-      padding: "$gap",
+      padding: "1x",
       color: "#text",
       fill: "#surface",
       border: true,
-      radius: "$card-radius",
+      radius: "1cr",
       shadow: "0 0.75rem 2rem #shadow",
       opacity: "0",
       scale: "1 0.96",
@@ -100,8 +110,8 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
     },
     OpenPanel: {
       $: "[data-element=Panel]",
-      opacity: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
-      scale: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
+      opacity: { "": null, "@own(:popover-open & [data-open])": "1" },
+      scale: { "": null, "@own(:popover-open & [data-open])": "1" },
     },
     PanelNavigation: {
       $: "Panel nav",
@@ -112,7 +122,7 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       $: "Panel a",
       justifyContent: "flex-start",
       blockSize: "min $docs-menu-button-size",
-      inlinePadding: "($gap * 1.5)",
+      inlinePadding: "1.5x",
       preset: "navigation",
       textAlign: "start",
       whiteSpace: "normal",
@@ -122,14 +132,14 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       $: "Panel a",
       inlinePadding: {
         "": null,
-        "@own(:first-child)":
-          "($gap * 1.5) start, ($docs-menu-button-size + $gap) end",
+        "@own(:first-child)": "1.5x start, ($docs-menu-button-size + 1x) end",
       },
     },
     Close: {
       $: "Close",
       position: "absolute",
-      inset: "$gap $gap auto auto",
+      blockInset: "1x start",
+      inlineInset: "1x end",
       display: "grid",
       placeItems: "center",
       inlineSize: "$docs-menu-button-size",

package/dist/components/Hero.styles.js

@@ -16,7 +16,7 @@ export const HeroRoot = defineComponent("Hero", {
     gap: "clamp(2rem, 5vw, 5rem)",
     blockPadding: {
       "": "clamp(3rem, 8vw, 7rem) start, clamp(2rem, 6vw, 5rem) end",
-      "!@md": "($gap * 4) start, clamp(2rem, 6vw, 5rem) end",
+      "!@md": "4x start, clamp(2rem, 6vw, 5rem) end",
     },
     Visual: {
       $: "> img, > Visual",
@@ -34,7 +34,7 @@ export const HeroRoot = defineComponent("Hero", {
       hide: {
         "": null,
         '@own([data-hero-image="dark"])': false,
-        '(@own([data-hero-image="dark"])) & (@light)': true,
+        '@own([data-hero-image="dark"]) & @light': true,
       },
     },
     LightVisual: {
@@ -42,7 +42,7 @@ export const HeroRoot = defineComponent("Hero", {
       hide: {
         "": null,
         '@own([data-hero-image="light"])': true,
-        '(@own([data-hero-image="light"])) & (@light)': false,
+        '@own([data-hero-image="light"]) & @light': false,
       },
     },
     Stack: {
@@ -58,7 +58,7 @@ export const HeroRoot = defineComponent("Hero", {
       display: "flex",
       flow: "column",
       alignItems: "inherit",
-      gap: "($gap * 2)",
+      gap: "2x",
     },
     Title: {
       $: "h1",
@@ -80,22 +80,22 @@ export const HeroRoot = defineComponent("Hero", {
       display: "flex",
       flow: "row wrap",
       justifyContent: { "": "flex-start", "!@md": "center" },
-      gap: "($gap * 1.5)",
+      gap: "1.5x",
     },
     Action: {
       $: "Action",
       display: "inline-flex",
       alignItems: "center",
       blockSize: "min $control-height",
-      padding: "($gap * 1.25) ($gap * 2.5)",
-      gap: "$gap",
+      padding: "1.25x 2.5x",
+      gap: "1x",
       color: "#text",
       border: { "": true, "@own(minimal)": "#clear" },
       radius: "round",
       fill: "#surface-2",
       preset: "navigation / strong",
       textDecoration: "none",
-      transition: "fill $transition",
+      transition: "fill",
     },
     HoverAction: {
       $: "[data-element=Action]",

package/dist/components/LanguageSelect.styles.js

@@ -13,7 +13,6 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
     display: "flex",
     flexShrink: "0",
     // Shared selector defaults are resolved once during server-side module evaluation.
-    // eslint-disable-next-line tasty/no-runtime-styles-mutation
     "$popover-transition": languageSelectStyles["$popover-transition"],
     Trigger: {
       // Reuse the shared, server-only popover anatomy.
@@ -21,10 +20,10 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
       ...languageSelectStyles.Trigger,
       inlineSize: "8rem",
       blockSize: "$control-height",
-      padding: "0 $gap",
+      padding: "0 1x",
       fill: "#clear",
       border: "0",
-      transition: "color $transition, fill $transition",
+      transition: "color, fill",
     },
     HoverTrigger: {
       // Reuse the shared, server-only popover anatomy.
@@ -106,14 +105,14 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
         "": null,
         "[data-sidebar]": "auto start, anchor(top) end",
       },
-      blockMargin: { "": null, "[data-sidebar]": "$gap end" },
+      blockMargin: { "": null, "[data-sidebar]": "1x end" },
       inlineInset: {
         "": null,
-        "[data-sidebar]": "$gap start, auto end",
+        "[data-sidebar]": "1x start, auto end",
       },
       inlineSize: {
         "": null,
-        "[data-sidebar]": "min(20rem, calc(100vw - 4rem))",
+        "[data-sidebar]": "min(20rem, (100vw - 4rem))",
       },
       blockSize: {
         "": null,

package/dist/components/MainContent.styles.js

@@ -1,4 +1,3 @@
-import { TASTY_SPACING_PROPERTIES } from "../theme/tasty-config.js";
 import { configureCookbookStates } from "./tasty-states.js";
 import { defineComponent } from "../define-component.js";
 
@@ -8,8 +7,7 @@ export const MainContentRoot = defineComponent("MainContent", {
   as: "main",
   "data-element": "MainContent",
   styles: {
-    "@property": TASTY_SPACING_PROPERTIES,
-    padding: "0 0 5rem",
+    padding: "5rem bottom",
     // A focus target for the skip link and page swaps, not a control. Clicking
     // its text focuses it, so keyboard scrolling would otherwise show a ring.
     outline: "none",
@@ -17,7 +15,7 @@ export const MainContentRoot = defineComponent("MainContent", {
     ContentSpacing: {
       $: ":where(Panel > Container) > * + *",
       blockMargin: "$margin-block-start $margin-block-end",
-      "$margin-block-start": "($gap * 3)",
+      "$margin-block-start": "3x",
     },
     Container: {
       $: "Panel > Container",
@@ -27,12 +25,12 @@ export const MainContentRoot = defineComponent("MainContent", {
     Panel: {
       $: "Panel",
       "$padding-block-start": {
-        "": "($gap * 3)",
-        "@own(:nth-of-type(2))": "($gap * 2)",
+        "": "3x",
+        "@own(:nth-of-type(2))": "2x",
       },
       "$padding-block-end": {
-        "": "($gap * 3)",
-        "@own(:first-of-type)": "($gap * 2)",
+        "": "3x",
+        "@own(:first-of-type)": "2x",
       },
       blockPadding: "$padding-block-start $padding-block-end",
       inlinePadding: "$docs-content-pad-x",

package/dist/components/MainPane.styles.js

@@ -12,8 +12,8 @@ export const MainPaneRoot = defineComponent("MainPane", {
     inlineSize: {
       "": "0 100% initial",
       "[data-has-sidebar] & [data-has-toc]":
-        "min(calc(100% - $sidebar-width), calc($content-width + (100% - $content-width - $sidebar-width) / 2))",
-      "([data-has-sidebar] & [data-has-toc]) & (!@lg)": "100%",
+        "min((100% - $sidebar-width), ($content-width + (100% - $content-width - $sidebar-width) / 2))",
+      "[data-has-sidebar] & [data-has-toc] & !@lg": "100%",
     },
   },
 });