@tenphi/renderer 0.19.0

package/dist/components/LayoutComponents.js

@@ -0,0 +1,866 @@
+import { tasty } from "@tenphi/tasty";
+import { customizeComponent } from "./customize-component.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export const PageFrameRoot = customizeComponent(
+  "PageFrame",
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      flow: "column",
+      blockSize: "min 100vh",
+      MainFrame: {
+        $: "> .main-frame",
+        inlineSize: { "": "0 100%", "@desktop": "min(100%, $layout-width)" },
+        inlineMargin: "auto",
+        blockPadding: "$docs-nav-height start",
+        inlinePadding: "0 start",
+      },
+      SidebarFrame: {
+        $: "&[data-has-sidebar] > .main-frame",
+        inlinePadding: { "": "$sidebar-width start", "@mobile": "0 start" },
+      },
+      Columns: {
+        $: "> .main-frame > div",
+        display: { "": "flex", "@narrow-layout": "block" },
+        inlineSize: "min 0",
+      },
+    },
+  }),
+);
+
+export const LogoRoot = customizeComponent(
+  "Logo",
+  tasty({
+    as: "span",
+    styles: {
+      display: "inline-grid",
+      flexGrow: "0",
+      flexShrink: "0",
+      flexBasis: "auto",
+      inlineSize: "4rem",
+      blockSize: "4rem",
+      color: "#logo-surface",
+      Svg: {
+        $: "> svg",
+        display: "block",
+        inlineSize: "100%",
+        blockSize: "100%",
+      },
+      Mark: {
+        $: "> svg > .td-logo__mark",
+        color: "#logo-mark",
+      },
+    },
+  }),
+);
+
+export const SiteLogoRoot = customizeComponent(
+  "SiteLogo",
+  tasty({
+    as: "span",
+    styles: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      inlineSize: { "": "auto max 12rem", "@mobile": "auto max 30vw" },
+      blockSize: { "": "2rem", "@mobile": "1.75rem" },
+      Image: {
+        $: "> img",
+        display: "block",
+        inlineSize: "auto max 100%",
+        blockSize: "100%",
+        objectFit: "contain",
+      },
+      Light: {
+        $: "> .td-site-logo__light",
+        hide: {
+          "": false,
+          "@parent(theme=dark)": true,
+          "!@parent(theme) & @media(prefers-color-scheme: dark)": true,
+        },
+      },
+      Dark: {
+        $: "> .td-site-logo__dark",
+        hide: {
+          "": true,
+          "@parent(theme=dark)": false,
+          "!@parent(theme) & @media(prefers-color-scheme: dark)": false,
+        },
+      },
+    },
+  }),
+);
+
+export const PackageVersionRoot = customizeComponent(
+  "PackageVersion",
+  tasty({
+    as: "span",
+    styles: {
+      display: "inline-flex",
+      hide: { "": false, "@compact": true },
+      alignItems: "center",
+      flexShrink: "0",
+      blockSize: "min 1.5rem",
+      inlinePadding: "($gap * 0.75)",
+      color: "#text-soft",
+      fill: "#surface-2",
+      border: true,
+      radius: "999px",
+      preset: "small",
+      whiteSpace: "nowrap",
+    },
+  }),
+);
+
+export const VersionSwitcherRoot = customizeComponent(
+  "VersionSwitcher",
+  tasty({
+    as: "details",
+    styles: {
+      display: "inline-flex",
+      position: "relative",
+      flexShrink: "0",
+      color: "#text-soft",
+      Trigger: {
+        $: "> summary",
+        display: "flex",
+        alignItems: "center",
+        blockSize: "min $control-height",
+        inlinePadding: "$gap",
+        fill: "#surface-2",
+        border: true,
+        radius: "$header-control-radius",
+        preset: "small / strong",
+        cursor: "pointer",
+        whiteSpace: "nowrap",
+      },
+      Panel: {
+        $: "> nav",
+        position: "absolute",
+        inset: { "": "100% auto auto 0", "@mobile": "100% 0 auto auto" },
+        zIndex: "10",
+        inlineSize: "min 8rem",
+        padding: "($gap * 0.5)",
+        fill: "#surface",
+        border: true,
+        radius: "$radius",
+        shadow: "0 0.75rem 2rem #shadow",
+      },
+      OpenPanel: {
+        $: "&[open] > nav",
+        display: "grid",
+      },
+      Link: {
+        $: "> nav > a",
+        display: "block",
+        padding: "($gap * 0.5) $gap",
+        color: "#text-soft",
+        preset: "small",
+        textDecoration: "none",
+      },
+      CurrentLink: {
+        $: '> nav > a[aria-current="page"]',
+        color: "#accent-text",
+        preset: "small / strong",
+      },
+    },
+  }),
+);
+
+export const TopNavigationRoot = customizeComponent(
+  "TopNavigation",
+  tasty({
+    as: "nav",
+    styles: {
+      display: "flex",
+      hide: { "": false, "@mobile": true },
+      alignItems: "stretch",
+      gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
+      inlineSize: "100%",
+      blockSize: "min 2.5rem",
+      blockBorder: "1bw solid #border start",
+      overflowX: "auto",
+      scrollbar: "none",
+
+      Scrollbar: { $: "&::-webkit-scrollbar", hide: true },
+      Link: {
+        $: "a",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        flexGrow: "0",
+        flexShrink: "0",
+        flexBasis: "auto",
+        blockPadding: "($gap * 0.75) start, $gap end",
+        color: "#text-soft",
+        preset: "navigation",
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+      },
+      HoverLink: { $: "a:hover", color: "#text" },
+      CurrentLink: { $: 'a[aria-current="page"]', color: "#accent-text" },
+      ActiveIndicator: {
+        $: 'a[aria-current="page"]::after',
+        content: '""',
+        position: "absolute",
+        inset: "auto 0 0",
+        blockSize: "2px",
+        radius: "999px",
+        fill: "#accent-surface",
+      },
+    },
+  }),
+);
+
+export const HeaderRoot = customizeComponent(
+  "Header",
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      flow: "column",
+      inlineSize: "0 100% ($layout-width - ($docs-sidebar-pad-x * 2))",
+      blockSize: "100%",
+      inlineMargin: "auto",
+
+      Primary: {
+        $: ".td-header__primary",
+        display: "flex",
+        alignItems: "center",
+        gap: { "": "clamp(0.5rem, 1.5vw, 1.5rem)", "@mobile": "0.5rem" },
+        blockSize: { "": "4.5rem", "@mobile": "3.5rem" },
+        flexShrink: "0",
+      },
+      TitleAndSearch: {
+        $: ".td-header__title, .td-header__search",
+        display: "flex",
+        alignItems: "center",
+        inlineSize: "min 0",
+      },
+      Title: {
+        $: ".td-header__title",
+        display: "flex",
+        flow: "row",
+        gap: "$gap",
+        overflow: "hidden",
+        flexShrink: "1",
+        inlineSize: "min 0",
+        inlineMargin: { "": "0 end", "@mobile": "auto end" },
+      },
+      LogoLink: {
+        $: ".td-header__logo-link",
+        display: "inline-grid",
+        flexShrink: "0",
+        placeItems: "center",
+        color: "#text",
+        textDecoration: "none",
+      },
+      Logo: {
+        $: '.td-header__logo[data-tasty-anatomy="Logo"]',
+        inlineSize: {
+          "": "2rem",
+          "@mobile": "1.75rem",
+        },
+        blockSize: {
+          "": "2rem",
+          "@mobile": "1.75rem",
+        },
+      },
+      SiteTitle: {
+        $: ".site-title",
+        inlineSize: "min 0",
+        overflow: "hidden",
+        color: "#text",
+        preset: { "": "h4", "@mobile": "h5" },
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+      },
+      Search: {
+        $: ".td-header__search",
+        flexGrow: { "": "1", "@mobile": "0" },
+        flexShrink: { "": "1", "@mobile": "0" },
+        inlineSize: { "": "min 8rem", "@mobile": "$docs-menu-button-size" },
+        inlineMargin: { "": "auto", "@mobile": "0" },
+      },
+      SearchElement: {
+        $: ".td-header__search site-search",
+        inlineSize: "0 100% 28rem",
+        inlineMargin: "auto",
+      },
+      Tools: {
+        $: ".td-header__tools",
+        display: "flex",
+        hide: { "": false, "@mobile": true },
+        flow: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: "($gap * 0.5)",
+      },
+      ToolItem: {
+        $: ".td-header__tools > *",
+        margin: "0",
+      },
+      Social: {
+        $: ".td-header__social",
+        display: "flex",
+        alignItems: "center",
+      },
+      MobileTheme: {
+        $: ".td-header__mobile-theme",
+        display: "grid",
+        hide: { "": true, "@mobile": false },
+        flexShrink: "0",
+        order: "1",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+      },
+    },
+  }),
+);
+
+export const ThemeSelectRoot = customizeComponent(
+  "ThemeSelect",
+  tasty({
+    as: "cookbook-appearance-menu",
+    styles: {
+      display: "flex",
+      flexShrink: "0",
+      "$popover-transition": "120ms",
+      Trigger: {
+        $: "> button",
+        display: "grid",
+        placeItems: "center",
+        inlineSize: {
+          "": "$control-height",
+          "@mobile": "$docs-menu-button-size",
+        },
+        blockSize: {
+          "": "$control-height",
+          "@mobile": "$docs-menu-button-size",
+        },
+        padding: "0",
+        color: "#text-soft",
+        fill: "#clear",
+        border: "0",
+        radius: "$header-control-radius",
+        transition: "color $transition, fill $transition",
+      },
+      HoverTrigger: {
+        $: "> button:hover, &:has([popover]:popover-open) > button",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      ActiveTrigger: {
+        $: "> button:active",
+        color: "#text",
+        fill: "#surface-2-pressed",
+      },
+      Icon: {
+        $: "> button svg",
+        display: "block",
+        inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
+        blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
+      },
+      Panel: {
+        $: "[popover]",
+        position: "fixed",
+        inset: "auto",
+        blockInset: { "": "4rem start", "@mobile": "3.5rem start" },
+        inlineInset:
+          "max($docs-nav-pad-x, ((100vw - $layout-width) / 2 + $docs-sidebar-pad-x)) end",
+        inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
+        blockSize: "max (100dvh - $docs-nav-height - $gap)",
+        overflowY: "auto",
+        margin: "0",
+        padding: "$gap",
+        color: "#text",
+        fill: "#surface-2",
+        border: true,
+        radius: "$card-radius",
+        shadow: "0 0.75rem 2rem #shadow",
+        opacity: "0",
+        scale: "1 0.96",
+        transformOrigin: "top",
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+        },
+      },
+      OpenPanel: {
+        $: "[popover]:popover-open",
+        opacity: { "": "1", "@starting": "0" },
+        scale: { "": "1", "@starting": "1 0.96" },
+      },
+      Section: {
+        $: "fieldset",
+        inlineSize: "min 0",
+        margin: "0",
+        padding: "0",
+        border: "0",
+      },
+      SectionSpacing: {
+        $: "fieldset + fieldset",
+        blockMargin: "$gap start",
+        blockPadding: "$gap start",
+        blockBorder: "$border-width solid #border start",
+      },
+      SectionLabel: {
+        $: "legend",
+        float: "inline-start",
+        inlineSize: "100%",
+        padding: "($gap * 0.75) $gap",
+        color: "#text-muted",
+        preset: "small / strong",
+      },
+      Option: {
+        $: "label",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: "$gap",
+        inlineSize: "100%",
+        blockSize: "min 2.25rem",
+        padding: "($gap * 0.75) $gap",
+        color: "#text-soft",
+        preset: "small",
+        radius: "$radius",
+        cursor: "pointer",
+      },
+      HoverOption: {
+        $: "label:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      CheckedOption: {
+        $: "label:has(input:checked)",
+        color: "#accent-text",
+        fill: "#accent-surface-2-subtle",
+      },
+      FocusedOption: {
+        $: "label:has(input:focus-visible)",
+        outline: "$outline-width solid #focus / -2px",
+      },
+      Input: {
+        $: "input",
+        position: "absolute",
+        inlineSize: "1px",
+        blockSize: "0 1px",
+        padding: "0",
+        margin: "0",
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+      },
+      OptionIcon: {
+        $: "label > svg",
+        display: "block",
+        flexShrink: "0",
+        inlineSize: "1rem",
+        blockSize: "1rem",
+      },
+      Checkmark: {
+        $: "label > svg:last-child",
+        inlineMargin: "auto start",
+        visibility: "hidden",
+      },
+      SelectedCheckmark: {
+        $: "label:has(input:checked) > svg:last-child",
+        visibility: "visible",
+      },
+    },
+  }),
+);
+
+export const SocialIconsRoot = customizeComponent(
+  "SocialIcons",
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      alignItems: "center",
+      gap: "($gap * 0.5)",
+      Link: {
+        $: "a",
+        display: "grid",
+        placeItems: "center",
+        inlineSize: "$control-height",
+        blockSize: "$control-height",
+        color: "#text-soft",
+        fill: "#clear",
+        radius: "$header-control-radius",
+        textDecoration: "none",
+      },
+      HoverLink: {
+        $: "a:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      Icon: {
+        $: "a > svg",
+        display: "block",
+        inlineSize: "1.25rem",
+        blockSize: "1.25rem",
+      },
+    },
+  }),
+);
+
+export const MobileNavigationTabsRoot = customizeComponent(
+  "MobileNavigationTabs",
+  tasty({
+    as: "nav",
+    styles: {
+      display: "grid",
+      hide: { "": false, "@desktop": true },
+      gap: "$gap",
+      blockMargin: "0",
+      Label: {
+        $: ".td-mobile-tabs__label",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      Trigger: {
+        $: "summary",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "$gap",
+        blockSize: "min 2.75rem",
+        padding: "$gap ($gap * 1.25)",
+        border: true,
+        radius: "$radius",
+        color: "#text-soft",
+        fill: "#surface",
+        preset: "navigation",
+        listStyle: "none",
+      },
+      Marker: {
+        $: "summary::marker, summary::-webkit-details-marker",
+        hide: true,
+      },
+      Caret: { $: "summary > svg", flexShrink: "0" },
+      ExpandedCaret: { $: "details[open] > summary > svg", rotate: "180deg" },
+      List: {
+        $: "ul",
+        display: "grid",
+        gap: "1bw",
+        padding: "$gap",
+        blockMargin: "$gap start",
+        margin: "$gap 0 0",
+        listStyle: "none",
+        border: true,
+        radius: "$radius",
+        fill: "#surface",
+      },
+      Item: { $: "li", margin: "0" },
+      Link: {
+        $: "a",
+        display: "flex",
+        alignItems: "center",
+        blockSize: "min 2.25rem",
+        padding: "($gap * 0.75) ($gap * 1.25)",
+        color: "#text-soft",
+        preset: "navigation",
+        textDecoration: "none",
+        radius: "$radius",
+      },
+      HoverLink: {
+        $: "a:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      CurrentLink: {
+        $: 'a[aria-current="page"]',
+        color: "#accent-text",
+        fill: "#accent-surface-subtle",
+      },
+    },
+  }),
+);
+
+export const MobileMenuFooterRoot = customizeComponent(
+  "MobileMenuFooter",
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flow: "row wrap",
+      gap: "($gap * 2)",
+      blockPadding: "$gap",
+      blockBorder: "$border-width solid #border start",
+      Social: {
+        $: ".td-mobile-preferences__social",
+        display: "flex",
+        hide: { "": false, ":empty": true },
+        alignItems: "center",
+        gap: "($gap * 2)",
+        inlineMargin: "auto end",
+        blockPadding: "($gap * 2)",
+      },
+    },
+  }),
+);
+
+export const FooterRoot = customizeComponent(
+  "Footer",
+  tasty({
+    as: "footer",
+    styles: {
+      display: "flex",
+      flow: "column",
+      gap: "($gap * 3)",
+      Meta: {
+        $: ".td-footer__meta",
+        display: "flex",
+        flow: "row wrap",
+        justifyContent: "space-between",
+        gap: "($gap * 1.5) ($gap * 6)",
+        blockMargin: "($gap * 6) start",
+        color: "#text-muted",
+        preset: "small",
+      },
+      LoneMetaItem: {
+        $: ".td-footer__meta > :only-child",
+        inlineMargin: "auto start",
+      },
+      MetaLink: {
+        $: ".td-footer__meta a",
+        display: "flex",
+        alignItems: "center",
+        gap: "$gap",
+        color: "#text-muted",
+        textDecoration: "none",
+      },
+      HoverMetaLink: {
+        $: ".td-footer__meta a:hover",
+        color: "#text",
+      },
+      Credit: {
+        $: ".td-footer__credit",
+        margin: "($gap * 3) auto",
+        color: "#text",
+        preset: "small",
+        textAlign: "center",
+      },
+      CreditLink: {
+        $: ".td-footer__credit a",
+        color: "#accent-text",
+        preset: "small / strong",
+        textDecoration: "none",
+      },
+      HoverCreditLink: {
+        $: ".td-footer__credit a:hover",
+        color: "#text",
+      },
+    },
+  }),
+);
+
+export const HeaderLinksRoot = customizeComponent(
+  "HeaderLinks",
+  tasty({
+    as: "cookbook-header-links",
+    styles: {
+      display: "flex",
+      flexShrink: "0",
+      order: { "": "0", "@mobile": "2" },
+      Desktop: {
+        $: ".td-header-links__desktop",
+        display: "flex",
+        hide: { "": false, "@mobile": true },
+        alignItems: "center",
+        gap: "($gap * 0.5)",
+      },
+      Link: {
+        $: "a",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        blockSize: "min $control-height",
+        padding: "$gap ($gap * 1.25)",
+        radius: "$radius",
+        color: "#text-soft",
+        fill: "#clear",
+        preset: "small / strong",
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+      },
+      DesktopLink: {
+        $: ".td-header-links__desktop a",
+        radius: "$header-control-radius",
+      },
+      HoverLink: { $: "a:hover", color: "#text", fill: "#surface-2-hover" },
+      PrimaryLink: {
+        $: 'a[data-variant="primary"]',
+        color: "#accent-surface-text",
+        fill: "#accent-surface",
+      },
+      HoverPrimaryLink: {
+        $: 'a[data-variant="primary"]:hover',
+        filter: "brightness(1.1)",
+      },
+      Trigger: {
+        $: ".td-header-links__trigger",
+        display: "grid",
+        hide: { "": true, "@mobile": false },
+        placeItems: "center",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+        padding: "0",
+        border: "0",
+        radius: "$header-control-radius",
+        color: "#text-soft",
+        fill: "#clear",
+      },
+      HoverTrigger: {
+        $: ".td-header-links__trigger:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      Panel: {
+        $: ".td-header-links__panel",
+        position: "fixed",
+        inset: "0.5rem $docs-nav-pad-x auto auto",
+        inlineSize: "min(20rem, calc(100vw - 2 * $docs-nav-pad-x))",
+        blockSize: "max (100dvh - 1rem)",
+        overflowY: "auto",
+        margin: "0",
+        padding: "$gap",
+        color: "#text",
+        fill: "#surface",
+        border: true,
+        radius: "$card-radius",
+        shadow: "0 0.75rem 2rem #shadow",
+      },
+      PanelNavigation: {
+        $: ".td-header-links__panel nav",
+        display: "grid",
+        gap: "1bw",
+      },
+      PanelLink: {
+        $: ".td-header-links__panel a",
+        justifyContent: "flex-start",
+        blockSize: "min $docs-menu-button-size",
+        inlinePadding: "($gap * 1.5)",
+        preset: "navigation",
+        textAlign: "start",
+        whiteSpace: "normal",
+        overflowWrap: "anywhere",
+      },
+      FirstPanelLink: {
+        $: ".td-header-links__panel a:first-child",
+        inlinePadding:
+          "($gap * 1.5) start, ($docs-menu-button-size + $gap) end",
+      },
+      Close: {
+        $: ".td-header-links__close",
+        position: "absolute",
+        inset: "$gap $gap auto auto",
+        display: "grid",
+        placeItems: "center",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+        padding: "0",
+        border: "0",
+        color: "#text-soft",
+        fill: "#clear",
+        radius: "$header-control-radius",
+      },
+      HoverClose: {
+        $: ".td-header-links__close:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+    },
+  }),
+);
+
+export const PageActionsRoot = customizeComponent(
+  "PageActions",
+  tasty({
+    as: "cookbook-page-actions",
+    styles: {
+      display: "flex",
+      flow: "row wrap",
+      alignItems: "center",
+      gap: "$gap",
+      preset: "small",
+      Control: {
+        $: "button, a",
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "$gap ($gap * 1.5)",
+        border: true,
+        radius: "$radius",
+        color: "#text",
+        fill: "#surface",
+        preset: "small",
+        textDecoration: "none",
+        cursor: "pointer",
+      },
+      Hover: { $: "button:hover, a:hover", fill: "#surface-2" },
+      Focus: {
+        $: "button:focus-visible, a:focus-visible",
+        outline: "2px solid #focus / 2px",
+      },
+      Pending: { $: 'button[aria-disabled="true"]', cursor: "wait" },
+      Status: { $: "[role=status]", color: "#text-soft" },
+    },
+  }),
+);
+
+export const MobileTableOfContentsRoot = customizeComponent(
+  "MobileTableOfContents",
+  tasty({
+    as: "cookbook-mobile-toc",
+    styles: {
+      display: "block",
+      hide: { "": true, "@narrow-layout": false },
+      padding: "$gap $docs-sidebar-pad-x",
+      blockBorder: "$border-width solid #border end",
+      fill: "#surface",
+      Summary: {
+        $: "summary",
+        padding: "$gap",
+        color: "#text",
+        preset: "small / strong",
+        cursor: "pointer",
+        radius: "$radius",
+      },
+      List: {
+        $: "ul",
+        listStyle: "none",
+        padding: "0",
+        margin: "0",
+        display: "grid",
+        gap: "2px",
+      },
+      NestedList: { $: "ul ul", inlinePadding: "($gap * 2) start" },
+      Item: { $: "li", listStyle: "none", margin: "0", padding: "0" },
+      Link: {
+        $: "a",
+        display: "block",
+        padding: "$gap",
+        color: "#text-soft",
+        preset: "small",
+        radius: "$radius",
+        textDecoration: "none",
+      },
+      HoverLink: { $: "a:hover", fill: "#surface-2", color: "#text" },
+      Focus: {
+        $: "a:focus-visible, summary:focus-visible",
+        outline: "2px solid #focus / 2px",
+      },
+    },
+  }),
+);