@tenphi/starlight 0.6.0 → 0.7.0

package/dist/components/LayoutComponents.js

@@ -1,13 +1,5 @@
 import { tasty } from "@tenphi/tasty";
-import chevronDownIcon from "../icons/chevron-down.svg?raw";
-import closeIcon from "../icons/close.svg?raw";
-import contrastIcon from "../icons/contrast.svg?raw";
-import deviceIcon from "../icons/device-desktop.svg?raw";
-import moonIcon from "../icons/moon.svg?raw";
-import searchIcon from "../icons/search.svg?raw";
-import sunIcon from "../icons/sun.svg?raw";
 import { customizeComponent } from "./customize-component.js";
-import { svgIconUrl } from "./svg-icon.js";
 import { configureCookbookStates } from "./tasty-states.js";
 
 configureCookbookStates();
@@ -31,6 +23,10 @@ export const LogoRoot = customizeComponent(
         inlineSize: "100%",
         blockSize: "100%",
       },
+      Mark: {
+        $: "> svg > .td-logo__mark",
+        color: "#accent-surface-text",
+      },
     },
   }),
 );
@@ -112,7 +108,7 @@ export const StarlightHeaderRoot = customizeComponent(
       display: "flex",
       flow: "column",
       inlineSize: "100%",
-      maxInlineSize: "($layout-width - ($sl-sidebar-pad-x * 2))",
+      maxInlineSize: "($layout-width - ($docs-sidebar-pad-x * 2))",
       blockSize: "100%",
       minInlineSize: "0",
       marginInlineStart: "auto",
@@ -154,13 +150,26 @@ export const StarlightHeaderRoot = customizeComponent(
         overflow: "hidden",
         maxInlineSize: {
           "": "none",
-          "@mobile": "(100% - (($sl-menu-button-size + $sl-nav-gap) * 3))",
+          "@mobile": "(100% - (($docs-menu-button-size + $docs-nav-gap) * 3))",
+        },
+      },
+      Logo: {
+        $: ".td-header__logo",
+        inlineSize: {
+          "": "2rem",
+          "@mobile": "1.75rem",
+        },
+        blockSize: {
+          "": "2rem",
+          "@mobile": "1.75rem",
         },
       },
       SiteTitle: {
         $: ".site-title",
         color: "#text",
         preset: { "": "h4 / strong", "@mobile": "h5 / strong" },
+        textDecoration: "none",
+        whiteSpace: "nowrap",
       },
       Search: {
         $: ".td-header__search",
@@ -168,26 +177,27 @@ export const StarlightHeaderRoot = customizeComponent(
         zIndex: { "": "auto", "@mobile": "10" },
         inset: {
           "": "auto top",
-          "@mobile": "(($sl-nav-height - $sl-menu-button-size) / 2) top",
+          "@mobile": "(($docs-nav-height - $docs-menu-button-size) / 2) top",
         },
         insetInlineEnd: {
           "": "auto",
           "@mobile":
-            "($sl-nav-pad-x + (($sl-menu-button-size + $sl-nav-gap) * 2))",
+            "($docs-nav-pad-x + (($docs-menu-button-size + $docs-nav-gap) * 2))",
         },
         placeItems: { "": "normal", "@mobile": "center" },
-        inlineSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
-        blockSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+        inlineSize: { "": "auto", "@mobile": "$docs-menu-button-size" },
+        blockSize: { "": "auto", "@mobile": "$docs-menu-button-size" },
         marginInlineStart: "0",
       },
       SearchElement: {
         $: ".td-header__search site-search",
         inlineSize: "100%",
-        blockSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+        blockSize: { "": "auto", "@mobile": "$docs-menu-button-size" },
       },
       Tools: {
         $: ".td-header__tools",
         display: "flex",
+        hide: { "": false, "@mobile": true },
         flow: "row",
         alignItems: "center",
         justifyContent: "flex-end",
@@ -210,125 +220,144 @@ export const StarlightHeaderRoot = customizeComponent(
         zIndex: { "": "auto", "@mobile": "10" },
         inset: {
           "": "auto top",
-          "@mobile": "(($sl-nav-height - $sl-menu-button-size) / 2) top",
+          "@mobile": "(($docs-nav-height - $docs-menu-button-size) / 2) top",
         },
         insetInlineEnd: {
           "": "auto",
-          "@mobile": "($sl-nav-pad-x + $sl-menu-button-size + $sl-nav-gap)",
+          "@mobile":
+            "($docs-nav-pad-x + $docs-menu-button-size + $docs-nav-gap)",
         },
         placeItems: { "": "normal", "@mobile": "center" },
-        inlineSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
-        blockSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+        inlineSize: { "": "auto", "@mobile": "$docs-menu-button-size" },
+        blockSize: { "": "auto", "@mobile": "$docs-menu-button-size" },
       },
     },
   }),
 );
 
+const appearanceSelectStyles = {
+  display: "grid",
+  flexShrink: "0",
+  placeItems: "center",
+  margin: "0",
+  inlineSize: {
+    "": "$control-height",
+    "@mobile": "$docs-menu-button-size",
+  },
+  blockSize: {
+    "": "$control-height",
+    "@mobile": "$docs-menu-button-size",
+  },
+
+  Label: {
+    $: "label",
+    boxSizing: "border-box",
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    inlineSize: "100%",
+    blockSize: "100%",
+    padding: "0",
+    border: "0",
+    fill: "#clear",
+  },
+  Icon: {
+    $: ".label-icon",
+    position: "absolute",
+    zIndex: "1",
+    insetInlineStart: "50%",
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "#text-soft",
+    translate: "-50% 0",
+    pointerEvents: "none",
+  },
+  IconSvg: {
+    $: ".label-icon > svg",
+    display: "block",
+    inlineSize: "100%",
+    blockSize: "100%",
+  },
+  Select: {
+    $: "select",
+    appearance: "base-select",
+    position: "static",
+    inlineSize: "100%",
+    minInlineSize: "0",
+    blockSize: "100%",
+    minBlockSize: "0",
+    padding: "0",
+    margin: "0",
+    color: "#clear",
+    preset: "small / strong",
+    border: true,
+    radius: "$radius",
+    fill: {
+      "": "#surface-3",
+      ":hover": "#surface-3-hover",
+      ":active": "#surface-3-pressed",
+    },
+    shadow: "none",
+    cursor: "pointer",
+    transition: "color 120ms ease, fill 120ms ease",
+  },
+  PickerIcon: { $: "select::picker-icon", hide: true },
+  Picker: {
+    $: "select::picker(select)",
+    appearance: "base-select",
+    gap: "1px",
+    minInlineSize: "8rem",
+    marginBlockStart: "0.5rem",
+    padding: "4px",
+    color: "#text",
+    border: true,
+    radius: "$card-radius",
+    fill: "#surface-2",
+    shadow: "0 0.75rem 2rem #shadow",
+  },
+  OpenPicker: {
+    $: "select::picker(select):popover-open",
+    display: "grid",
+  },
+  Option: {
+    $: "option",
+    padding: "0.625rem 0.75rem",
+    color: "#text",
+    preset: "small",
+    radius: "$radius",
+    fill: "#surface-2",
+  },
+  HoverOption: {
+    $: "option:hover, option:focus",
+    fill: "#surface-2-hover",
+  },
+  CheckedOption: {
+    $: "option:checked",
+    color: "#accent-text",
+    fill: "#accent-surface-2-subtle",
+  },
+  Checkmark: {
+    $: "option::checkmark",
+    order: "1",
+    marginInlineStart: "auto",
+  },
+};
+
 export const ThemeSelectRoot = customizeComponent(
   "ThemeSelect",
   { as: "starlight-theme-select" },
   tasty({
     as: "starlight-theme-select",
-    styles: {
-      display: "grid",
-      placeItems: "center",
-      margin: "0",
-      inlineSize: {
-        "": "$control-height",
-        "@mobile": "$sl-menu-button-size",
-      },
-      blockSize: {
-        "": "$control-height",
-        "@mobile": "$sl-menu-button-size",
-      },
+    styles: appearanceSelectStyles,
+  }),
+);
 
-      Label: {
-        $: "label",
-        boxSizing: "border-box",
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        inlineSize: "100%",
-        blockSize: "100%",
-        padding: "0",
-        border: "0",
-        fill: "#clear",
-      },
-      Icon: {
-        $: ".label-icon",
-        position: "absolute",
-        zIndex: "1",
-        insetInlineStart: "50%",
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        color: "#text-soft",
-        translate: "-50% 0",
-        pointerEvents: "none",
-      },
-      Select: {
-        $: "select",
-        appearance: "base-select",
-        position: "static",
-        inlineSize: "100%",
-        minInlineSize: "0",
-        blockSize: "100%",
-        minBlockSize: "0",
-        padding: "0",
-        margin: "0",
-        color: "#clear",
-        preset: "small / strong",
-        border: true,
-        radius: "$radius",
-        fill: {
-          "": "#surface-3",
-          ":hover": "#surface-3-hover",
-          ":active": "#surface-3-pressed",
-        },
-        shadow: "none",
-        cursor: "pointer",
-        transition: "color 120ms ease, fill 120ms ease",
-      },
-      PickerIcon: { $: "select::picker-icon", hide: true },
-      Picker: {
-        $: "select::picker(select)",
-        appearance: "base-select",
-        gap: "1px",
-        minInlineSize: "8rem",
-        marginBlockStart: "0.5rem",
-        padding: "4px",
-        color: "#text",
-        border: true,
-        radius: "$card-radius",
-        fill: "#surface-2",
-        shadow: "0 0.75rem 2rem #shadow",
-      },
-      OpenPicker: {
-        $: "select::picker(select):popover-open",
-        display: "grid",
-      },
-      Option: {
-        $: "option",
-        padding: "0.625rem 0.75rem",
-        color: "#text",
-        preset: "small",
-        radius: "$radius",
-        fill: "#surface-2",
-      },
-      HoverOption: {
-        $: "option:hover, option:focus",
-        fill: "#surface-2-hover",
-      },
-      CheckedOption: {
-        $: "option:checked",
-        color: "#accent-text",
-        fill: "color-mix(in oklab, #accent-surface 12%, #surface-2)",
-      },
-      Checkmark: {
-        $: "option::checkmark",
-        order: "1",
-        marginInlineStart: "auto",
-      },
-    },
+export const ContrastSelectRoot = customizeComponent(
+  "ContrastSelect",
+  { as: "cookbook-contrast-select" },
+  tasty({
+    as: "cookbook-contrast-select",
+    styles: appearanceSelectStyles,
   }),
 );
 
@@ -379,7 +408,7 @@ export const MobileNavigationTabsRoot = customizeComponent(
       CurrentLink: {
         $: 'a[aria-current="page"]',
         color: "#accent-text",
-        fill: "color-mix(in oklab, #accent-surface 12%, #surface)",
+        fill: "#accent-surface-subtle",
       },
     },
   }),
@@ -410,343 +439,3 @@ export const MobileMenuFooterRoot = customizeComponent(
     },
   }),
 );
-
-export const NavigationTreeRoot = customizeComponent(
-  "NavigationTree",
-  { as: "ul" },
-  tasty({
-    as: "ul",
-    styles: {
-      margin: "0",
-      padding: "0",
-      listStyle: "none",
-      NestedList: {
-        $: "ul",
-        margin: "0",
-        padding: "0 0 0 ($gap * 1.5)",
-        listStyle: "none",
-      },
-      Summary: {
-        $: "details > summary",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "($gap * 0.9) ($gap * 1.25)",
-        color: "#text",
-        preset: "body / strong",
-        cursor: "pointer",
-        listStyle: "none",
-      },
-      Marker: { $: "details > summary::-webkit-details-marker", hide: true },
-      SummaryIcon: {
-        $: "details > summary::after",
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        fill: "#text-soft",
-        mask: `url("${svgIconUrl(chevronDownIcon)}") center / contain no-repeat`,
-      },
-      ClosedSummaryIcon: {
-        $: "details:not([open]) > summary::after",
-        rotate: "-90deg",
-      },
-      Link: {
-        $: "a",
-        display: "block",
-        padding: "($gap * 0.9) ($gap * 1.25)",
-        color: "#text-soft",
-        radius: "$radius",
-        textDecoration: "none",
-      },
-      HoverLink: { $: "a:hover", color: "#text", fill: "#surface-2" },
-      CurrentLink: {
-        $: 'a[aria-current="page"]',
-        color: "#accent-text",
-        preset: "body / strong",
-        fill: "color-mix(in oklab, #accent-surface 12%, #surface)",
-      },
-    },
-  }),
-);
-
-export const StandaloneHeaderRoot = customizeComponent(
-  "StandaloneHeader",
-  { as: "header" },
-  tasty({
-    as: "header",
-    styles: {
-      position: "sticky",
-      inset: "0 top",
-      zIndex: "2",
-      display: "flex",
-      flow: "column",
-      paddingInline: {
-        "": "clamp(1.25rem, 3vw, 2rem)",
-        "@shell-mobile": "1rem",
-      },
-      fill: "color-mix(in oklab, #surface 96%, #clear)",
-      backdropFilter: "blur(12px)",
-      border: { "": "0", "@desktop": "1bw bottom" },
-      Primary: {
-        $: ".td-shell__header-primary",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "($gap * 3)",
-        inlineSize: "100%",
-        maxInlineSize: "($layout-width - ($gap * 6))",
-        minBlockSize: "4.5rem",
-        marginInlineStart: "auto",
-        marginInlineEnd: "auto",
-      },
-      Brand: {
-        $: ".td-shell__brand",
-        display: "flex",
-        alignItems: "center",
-        gap: "$gap",
-        minInlineSize: "0",
-      },
-      BrandLink: {
-        $: ".td-shell__brand > a",
-        color: "#text",
-        preset: "heading",
-        textDecoration: "none",
-      },
-      Actions: {
-        $: ".td-shell__actions",
-        display: "flex",
-        alignItems: { "": "center", "@shell-mobile": "stretch" },
-        flow: { "": "row nowrap", "@shell-mobile": "row wrap" },
-        gap: "$gap",
-      },
-      TopNavigation: {
-        $: "> .td-top-tabs",
-        maxInlineSize: "($layout-width - ($gap * 6))",
-        marginInlineStart: "auto",
-        marginInlineEnd: "auto",
-      },
-    },
-  }),
-);
-
-export const AppearanceControlRoot = customizeComponent(
-  "AppearanceControl",
-  { as: "label" },
-  tasty({
-    as: "label",
-    styles: {
-      position: "relative",
-      display: "grid",
-      placeItems: "center",
-      inlineSize: "$control-height",
-      blockSize: "$control-height",
-      radius: "$radius",
-      fill: { "": "#surface-2", ":hover": "#surface-2-hover" },
-      Select: {
-        $: "select",
-        position: "absolute",
-        inset: "0",
-        inlineSize: "100%",
-        blockSize: "100%",
-        padding: "0",
-        border: "0",
-        opacity: "0",
-        cursor: "pointer",
-      },
-      Icon: {
-        $: "&::before",
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        fill: "#text-soft",
-        mask: {
-          "": `url("${svgIconUrl(deviceIcon)}") center / contain no-repeat`,
-          ':has([data-docs-theme] option[value="light"]:checked)': `url("${svgIconUrl(sunIcon)}") center / contain no-repeat`,
-          ':has([data-docs-theme] option[value="dark"]:checked)': `url("${svgIconUrl(moonIcon)}") center / contain no-repeat`,
-          ".td-appearance-control--contrast": `url("${svgIconUrl(contrastIcon)}") center / contain no-repeat`,
-        },
-        pointerEvents: "none",
-      },
-    },
-  }),
-);
-
-export const SearchTriggerRoot = customizeComponent(
-  "SearchTrigger",
-  { as: "button" },
-  tasty({
-    as: "button",
-    styles: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "$gap",
-      paddingInline: "($gap * 1.5)",
-      color: "#text",
-      border: true,
-      radius: "$radius",
-      fill: {
-        "": "#surface-2",
-        ":hover": "#surface-2-hover",
-        ":active": "#surface-2-pressed",
-      },
-      transition: "fill 120ms ease",
-      Icon: {
-        $: "&::before",
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        flexGrow: "0",
-        flexShrink: "0",
-        flexBasis: "auto",
-        fill: "#current",
-        mask: `url("${svgIconUrl(searchIcon)}") center / contain no-repeat`,
-      },
-      Shortcut: {
-        $: "> kbd",
-        display: "flex",
-        gap: "0.125rem",
-        marginInlineStart: "($gap * 1.5)",
-        color: "#text-soft",
-        preset: "small",
-        font: "$body-font-family",
-      },
-      Key: { $: "kbd", font: "$body-font-family" },
-    },
-  }),
-);
-
-export const DocsLayoutRoot = customizeComponent(
-  "DocsLayout",
-  { as: "div" },
-  tasty({
-    as: "div",
-    styles: {
-      display: "grid",
-      gridColumns: {
-        "": "minmax(13rem, $sidebar-width) minmax(0, 1fr)",
-        "@shell-mobile": "1fr",
-      },
-      inlineSize: "min(100%, $layout-width)",
-      minBlockSize: "100vh",
-      marginInlineStart: "auto",
-      marginInlineEnd: "auto",
-    },
-  }),
-);
-
-export const DocsSidebarRoot = customizeComponent(
-  "DocsSidebar",
-  { as: "nav" },
-  tasty({
-    as: "nav",
-    styles: {
-      padding: {
-        "": "($gap * 5) ($gap * 3)",
-        "@shell-mobile": "($gap * 2) ($gap * 3)",
-      },
-    },
-  }),
-);
-
-export const DocsArticleRoot = customizeComponent(
-  "DocsArticle",
-  { as: "main" },
-  tasty({
-    as: "main",
-    styles: {
-      inlineSize: "min(100%, $content-width)",
-      padding: "($gap * 3) clamp(1.5rem, 5vw, 4rem) ($gap * 10)",
-    },
-  }),
-);
-
-export const SearchDialogRoot = customizeComponent(
-  "SearchDialog",
-  { as: "dialog" },
-  tasty({
-    as: "dialog",
-    styles: {
-      inlineSize: "min(42rem, calc(100% - 2rem))",
-      padding: "($gap * 2.5)",
-      color: "#text",
-      fill: "#surface",
-      border: "$border-width solid #border-strong",
-      radius: "$card-radius",
-      shadow: "$sl-shadow-lg",
-      Backdrop: { $: "&::backdrop", fill: "#overlay" },
-      Form: { $: "form", float: "inline-end" },
-      LabelAndInput: {
-        $: "label, input",
-        display: "block",
-        inlineSize: "100%",
-      },
-      Input: {
-        $: "input",
-        marginBlock: "$gap ($gap * 2)",
-        paddingInline: "($gap * 1.5)",
-        color: "#text",
-        border: true,
-        radius: "$radius",
-        fill: "#surface",
-      },
-      Close: {
-        $: 'button[aria-label="Close search"]',
-        display: "grid",
-        placeItems: "center",
-        inlineSize: "$control-height",
-        padding: "0",
-        overflow: "hidden",
-        color: "#clear",
-        border: true,
-        radius: "$radius",
-        fill: {
-          "": "#surface-2",
-          ":hover": "#surface-2-hover",
-          ":active": "#surface-2-pressed",
-        },
-      },
-      CloseIcon: {
-        $: 'button[aria-label="Close search"]::before',
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        color: "#text",
-        fill: "#current",
-        mask: `url("${svgIconUrl(closeIcon)}") center / contain no-repeat`,
-      },
-    },
-  }),
-);
-
-export const SkipLinkRoot = customizeComponent(
-  "SkipLink",
-  { as: "a" },
-  tasty({
-    as: "a",
-    styles: {
-      position: "fixed",
-      inset: "$gap auto auto $gap",
-      zIndex: "4",
-      translate: { "": "0 -150%", ":focus": "0" },
-      padding: "$gap ($gap * 1.5)",
-      color: "#accent-surface-text",
-      radius: "$radius",
-      fill: "#accent-surface",
-    },
-  }),
-);
-
-export const VisuallyHiddenRoot = tasty({
-  as: "span",
-  styles: {
-    position: "absolute",
-    inlineSize: "1px",
-    blockSize: "1px",
-    padding: "0",
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: "0",
-  },
-});

package/dist/components/Logo.astro

@@ -28,11 +28,13 @@ const {
   >
     <rect width="64" height="64" rx="14" fill="currentColor"></rect>
     <path
-      fill="#fff"
+      class="td-logo__mark"
+      fill="currentColor"
       d="M14.8 16c6.7.2 12.3 2 16.7 5.4v28.4c-4.4-3.1-10-4.7-16.6-4.9a3 3 0 0 1-2.9-3V19a3 3 0 0 1 2.8-3Z"
     ></path>
     <path
-      fill="#fff"
+      class="td-logo__mark"
+      fill="currentColor"
       d="M49.2 16c-6.7.2-12.3 2-16.7 5.4v28.4c4.4-3.1 10-4.7 16.6-4.9a3 3 0 0 0 2.9-3V19a3 3 0 0 0-2.8-3Z"
     ></path>
   </svg>