@tenphi/starlight 0.10.0 → 0.11.0

package/dist/components/GlobalStyles.js

@@ -3,8 +3,10 @@ import jetBrainsMonoLatin from "@fontsource-variable/jetbrains-mono/files/jetbra
 import onestLatin from "@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url";
 import arrowLeftIcon from "../icons/arrow-left.svg?raw";
 import arrowRightIcon from "../icons/arrow-right.svg?raw";
+import checkIcon from "../icons/check.svg?raw";
 import chevronRightIcon from "../icons/chevron-right.svg?raw";
 import closeIcon from "../icons/close.svg?raw";
+import copyIcon from "../icons/copy.svg?raw";
 import searchIcon from "../icons/search.svg?raw";
 import { resolveComponentStyles } from "./component-styles.js";
 import { svgIconUrl } from "./svg-icon.js";
@@ -108,17 +110,14 @@ export default function GlobalStyles() {
     border: "0",
   });
 
-  useGlobalStyles("html, body, button, input, select, textarea", {
-    fontFamily: "$body-font-family",
-  });
-
   useGlobalStyles("body", {
     color: "#text",
     fill: "#surface",
-    fontSize: "$body-font-size",
-    fontWeight: "$body-font-weight",
-    lineHeight: "$body-line-height",
-    letterSpacing: "$body-letter-spacing",
+    preset: "body",
+  });
+
+  useGlobalStyles(":where(strong, b)", {
+    preset: "strong",
   });
 
   useGlobalStyles("a", {
@@ -260,7 +259,7 @@ export default function GlobalStyles() {
     padding: "($gap * 1.5) $docs-nav-pad-x",
     color: "#accent-surface-text",
     fill: "#accent-surface",
-    fontWeight: "$body-bold-font-weight",
+    preset: "body / strong",
     lineHeight: "$heading-line-height",
     textAlign: "center",
     textWrap: "balance",
@@ -297,50 +296,36 @@ export default function GlobalStyles() {
 
   useGlobalStyles(":where(h1, h2, h3, h4, h5, h6), .site-title", {
     color: "#text",
-    fontFamily: "$heading-font-family",
-    fontWeight: "$heading-font-weight",
-    letterSpacing: "$heading-letter-spacing",
+    preset: "heading",
     textWrap: "balance",
   });
 
   useGlobalStyles("h1", {
-    fontSize: "$h1-font-size",
-    lineHeight: "$h1-line-height",
-    letterSpacing: "$h1-letter-spacing",
+    preset: "h1",
   });
 
   useGlobalStyles("h2", {
-    fontSize: "$h2-font-size",
-    lineHeight: "$h2-line-height",
-    letterSpacing: "$h2-letter-spacing",
+    preset: "h2",
   });
 
   useGlobalStyles("h3", {
-    fontSize: "$h3-font-size",
-    lineHeight: "$h3-line-height",
-    letterSpacing: "$h3-letter-spacing",
+    preset: "h3",
   });
 
   useGlobalStyles("h4", {
-    fontSize: "$h4-font-size",
-    lineHeight: "$h4-line-height",
-    letterSpacing: "$h4-letter-spacing",
+    preset: "h4",
   });
 
   useGlobalStyles("h5", {
-    fontSize: "$h5-font-size",
-    lineHeight: "$h5-line-height",
-    letterSpacing: "$h5-letter-spacing",
+    preset: "h5",
   });
 
   useGlobalStyles("h6", {
-    fontSize: "$h6-font-size",
-    lineHeight: "$h6-line-height",
-    letterSpacing: "$h6-letter-spacing",
+    preset: "h6",
   });
 
   useGlobalStyles(":where(code, kbd, samp, pre)", {
-    fontFamily: "$code-font-family",
+    preset: "code",
   });
 
   useGlobalStyles(
@@ -434,8 +419,7 @@ export default function GlobalStyles() {
         minInlineSize: "0",
         overflow: "hidden",
         color: "#text",
-        fontSize: "0.9375rem",
-        fontWeight: "$body-bold-font-weight",
+        preset: "navigation / strong",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
       },
@@ -446,7 +430,7 @@ export default function GlobalStyles() {
         minInlineSize: "0",
         gap: "0.25em",
         fill: "#surface",
-        fontSize: "0.9375rem",
+        preset: "navigation",
       },
       LinkLabel: {
         $: "a > span:first-child",
@@ -466,9 +450,8 @@ export default function GlobalStyles() {
       },
       TopLevelLink: {
         $: "a.large",
-        fontSize: "0.9375rem",
-        fontWeight: "$body-bold-font-weight",
         color: "#text",
+        preset: "navigation / strong",
       },
     }),
   );
@@ -484,8 +467,7 @@ export default function GlobalStyles() {
         $: "h2",
         marginBlockEnd: "$gap",
         color: "#text",
-        fontSize: "0.9375rem",
-        fontWeight: "$body-bold-font-weight",
+        preset: "navigation / strong",
         lineHeight: "$heading-line-height",
       },
       List: {
@@ -513,8 +495,7 @@ export default function GlobalStyles() {
         paddingBlockStart: "($gap * 0.5)",
         paddingBlockEnd: "($gap * 0.5)",
         color: "#text-muted",
-        fontSize: "$small-font-size",
-        lineHeight: "1.45",
+        preset: "small",
         textDecoration: "none",
         overflowWrap: "anywhere",
       },
@@ -551,6 +532,116 @@ export default function GlobalStyles() {
     preset: "h1",
   });
 
+  useGlobalStyles(
+    ".hero",
+    resolveComponentStyles("Hero", {
+      display: "grid",
+      gridTemplateColumns: {
+        "": "minmax(0, 7fr) minmax(12rem, 4fr)",
+        "@mobile": "minmax(0, 1fr)",
+      },
+      alignItems: "center",
+      gap: "clamp(2rem, 5vw, 5rem)",
+      paddingBlockStart: {
+        "": "clamp(3rem, 8vw, 7rem)",
+        "@mobile": "($gap * 4)",
+      },
+      paddingBlockEnd: "clamp(2rem, 6vw, 5rem)",
+      Visual: {
+        $: "> img, > .hero-html",
+        order: { "": "2", "@mobile": "0" },
+        display: "grid",
+        placeItems: "center",
+        inlineSize: "min(100%, 22rem)",
+        marginInlineStart: "auto",
+        marginInlineEnd: "auto",
+        color: "#accent-surface",
+      },
+      Stack: {
+        $: "> .stack",
+        display: "flex",
+        flow: "column",
+        alignItems: { "": "flex-start", "@mobile": "center" },
+        gap: "clamp(1.5rem, 3vw, 2rem)",
+        textAlign: { "": "start", "@mobile": "center" },
+      },
+      Copy: {
+        $: "> .stack > .copy",
+        display: "flex",
+        flow: "column",
+        alignItems: "inherit",
+        gap: "($gap * 2)",
+      },
+      Title: {
+        $: "h1",
+        maxInlineSize: "16ch",
+        margin: "0",
+        color: "#text",
+        preset: "h1",
+        fontSize: "clamp(2.75rem, 7vw, 4.75rem)",
+        textWrap: "balance",
+      },
+      Tagline: {
+        $: ".tagline",
+        maxInlineSize: "48ch",
+        color: "#text-soft",
+        fontSize: "clamp(1.05rem, 2.5vw, 1.35rem)",
+        lineHeight: "1.55",
+        textWrap: "balance",
+      },
+      Actions: {
+        $: ".actions",
+        display: "flex",
+        flow: "row wrap",
+        justifyContent: { "": "flex-start", "@mobile": "center" },
+        gap: "($gap * 1.5)",
+      },
+      Action: {
+        $: ".sl-link-button",
+        display: "inline-flex",
+        alignItems: "center",
+        minBlockSize: "$control-height",
+        padding: "($gap * 1.25) ($gap * 2.5)",
+        gap: "$gap",
+        color: "#text",
+        border: true,
+        radius: "999px",
+        fill: "#surface-2",
+        preset: "navigation / strong",
+        textDecoration: "none",
+        transition: "fill 120ms ease, translate 120ms ease",
+      },
+      HoverAction: {
+        $: ".sl-link-button:hover",
+        fill: "#surface-2-hover",
+        translate: "0 -1px",
+      },
+      PrimaryAction: {
+        $: ".sl-link-button.primary",
+        color: "#accent-surface-text",
+        borderColor: "#accent-surface",
+        fill: "#accent-surface",
+      },
+      SecondaryAction: {
+        $: ".sl-link-button.secondary",
+        color: "#accent-text",
+        borderColor: "#border-strong",
+      },
+      MinimalAction: {
+        $: ".sl-link-button.minimal",
+        paddingInlineStart: "0",
+        paddingInlineEnd: "0",
+        color: "#accent-text",
+        border: "0",
+        fill: "#clear",
+      },
+      ActionIcon: {
+        $: ".sl-link-button svg",
+        flexShrink: "0",
+      },
+    }),
+  );
+
   useGlobalStyles("main > .content-panel:first-of-type", {
     paddingBlockStart: "($gap * 3)",
     paddingBlockEnd: "($gap * 2)",
@@ -605,7 +696,7 @@ export default function GlobalStyles() {
   });
 
   useGlobalStyles(".sl-markdown-content dt:not(:where(.not-content *))", {
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
   });
 
   useGlobalStyles(".sl-markdown-content dd:not(:where(.not-content *))", {
@@ -632,25 +723,87 @@ export default function GlobalStyles() {
     },
   );
 
-  useGlobalStyles(".sl-markdown-content pre:not(:where(.not-content *))", {
-    padding: "0.875rem 1rem",
-    overflowX: "auto",
-    color: "#syntax-text",
-    border: true,
-    fill: "#syntax-bg",
-    fontSize: "$code-font-size",
-    lineHeight: "$code-line-height",
-    radius: "$card-radius",
-    tabSize: "2",
-  });
+  useGlobalStyles(
+    ".sl-markdown-content .td-code-block",
+    resolveComponentStyles("MarkdownCodeBlock", {
+      display: "block",
+      position: "relative",
+      minInlineSize: "0",
+      Pre: {
+        $: "> pre",
+        margin: "0",
+        padding: "0.875rem 3.75rem 0.875rem 1rem",
+        overflowX: "auto",
+        color: "#syntax-text",
+        border: true,
+        fill: "#syntax-bg",
+        radius: "$card-radius",
+        tabSize: "2",
+      },
+      CopyButton: {
+        $: "> [data-copy-code]",
+        position: "absolute",
+        zIndex: "1",
+        insetBlockStart: "$gap",
+        insetInlineEnd: "$gap",
+        margin: "0",
+        display: "grid",
+        placeItems: "center",
+        inlineSize: "2rem",
+        minInlineSize: "2rem",
+        blockSize: "2rem",
+        minBlockSize: "2rem",
+        padding: "0",
+        color: "#text-soft",
+        border: true,
+        fill: "#surface-2",
+        radius: "$radius",
+        preset: "small / strong",
+        cursor: "pointer",
+        transition: "color 120ms ease, fill 120ms ease",
+      },
+      HoverCopyButton: {
+        $: "> [data-copy-code]:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      CopiedButton: {
+        $: '> [data-copy-code][data-copy-state="copied"]',
+        color: "#green-text",
+        borderColor: "#green",
+      },
+      CopyIcon: {
+        $: "> [data-copy-code] > [data-copy-icon]",
+        display: "block",
+        inlineSize: "1rem",
+        blockSize: "1rem",
+        fill: "#current",
+        mask: `url("${svgIconUrl(copyIcon)}") center / contain no-repeat`,
+      },
+      CopiedIcon: {
+        $: '> [data-copy-code][data-copy-state="copied"] > [data-copy-icon]',
+        mask: `url("${svgIconUrl(checkIcon)}") center / contain no-repeat`,
+      },
+    }),
+  );
+
+  useGlobalStyles(
+    '.sl-markdown-content pre[data-language="mermaid"]:not(:where(.not-content *))',
+    {
+      padding: "0.875rem 1rem",
+      overflowX: "auto",
+      color: "#syntax-text",
+      border: true,
+      fill: "#syntax-bg",
+      radius: "$card-radius",
+      tabSize: "2",
+    },
+  );
 
   useGlobalStyles(".sl-markdown-content pre code", {
     padding: "0",
     color: "inherit",
     fill: "#clear",
-    fontFamily: "$code-font-family",
-    fontSize: "inherit",
-    lineHeight: "inherit",
   });
 
   useGlobalStyles(".sl-markdown-content pre.td-diff", {
@@ -754,7 +907,7 @@ export default function GlobalStyles() {
     marginInlineStart: "-0.5rem",
     paddingInlineStart: "0.5rem",
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
   });
 
   useGlobalStyles(
@@ -793,57 +946,34 @@ export default function GlobalStyles() {
     },
   );
 
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper", {
-    lineHeight: "$heading-line-height",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h1", {
-    fontSize: "$h1-font-size",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h2", {
-    fontSize: "$h2-font-size",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h3", {
-    fontSize: "$h3-font-size",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h4", {
-    fontSize: "$h4-font-size",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h5", {
-    fontSize: "$h5-font-size",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h6", {
-    fontSize: "$h6-font-size",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-heading-wrapper > :first-child", {
-    display: "inline",
-    paddingInlineEnd: "1.1em",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-anchor-link", {
-    position: "relative",
-    display: "inline-flex",
-    marginInlineStart: "-0.85em",
-    color: "#text-muted",
-    userSelect: "none",
-    textDecoration: "none",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-anchor-link:hover", {
-    color: "#accent-text",
-  });
-
-  useGlobalStyles(".sl-markdown-content .sl-anchor-icon > svg", {
-    display: "inline",
-    inlineSize: "0.8275em",
-    verticalAlign: "middle",
-  });
+  useGlobalStyles(
+    ".sl-markdown-content .sl-heading-wrapper",
+    resolveComponentStyles("MarkdownHeading", {
+      preset: "heading",
+      Heading: {
+        $: "> :first-child",
+        display: "inline",
+        paddingInlineEnd: "0.35em",
+      },
+      Heading1: { $: "&.level-h1", preset: "h1" },
+      Heading2: { $: "&.level-h2", preset: "h2" },
+      Heading3: { $: "&.level-h3", preset: "h3" },
+      Heading4: { $: "&.level-h4", preset: "h4" },
+      Heading5: { $: "&.level-h5", preset: "h5" },
+      Heading6: { $: "&.level-h6", preset: "h6" },
+      Link: {
+        $: "> .sl-anchor-link",
+        display: "inline-flex",
+        color: "#text-muted",
+        userSelect: "none",
+        textDecoration: "none",
+      },
+      HoverLink: {
+        $: "> .sl-anchor-link:hover",
+        color: "#accent-text",
+      },
+    }),
+  );
 
   useGlobalStyles(".starlight-aside", {
     padding: "($gap * 2) ($gap * 2.5)",
@@ -859,7 +989,7 @@ export default function GlobalStyles() {
     gap: "$gap",
     margin: "0 0 $gap",
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
   });
 
   useGlobalStyles(".starlight-aside__icon", {
@@ -913,7 +1043,7 @@ export default function GlobalStyles() {
 
   useGlobalStyles(".sl-link-card a", {
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
     textDecoration: "none",
   });
 
@@ -934,7 +1064,7 @@ export default function GlobalStyles() {
     border: true,
     radius: "$radius",
     fill: "#surface-3",
-    fontFamily: "$code-font-family",
+    preset: "code",
     fontSize: "$small-font-size",
     lineHeight: "1",
     overflowWrap: "anywhere",
@@ -967,8 +1097,7 @@ export default function GlobalStyles() {
     border: true,
     radius: "999px",
     fill: "#surface-3",
-    fontSize: "$small-font-size",
-    fontWeight: "$body-bold-font-weight",
+    preset: "small / strong",
   });
 
   useGlobalStyles(".sl-steps > li::after", {
@@ -992,7 +1121,7 @@ export default function GlobalStyles() {
     color: "#text-soft",
     border: true,
     fill: "#surface",
-    fontSize: "$small-font-size",
+    preset: "small",
     boxShadow: "none",
     cursor: "pointer",
     transition: "color 120ms ease, background-color 120ms ease",
@@ -1012,7 +1141,7 @@ export default function GlobalStyles() {
     paddingInlineStart: "0.375rem",
     paddingInlineEnd: "0.375rem",
     fill: "#surface-3",
-    fontFamily: "$body-font-family",
+    preset: "body",
     fontSize: "0.75rem",
     radius: "($radius * 0.75)",
   });
@@ -1070,29 +1199,52 @@ export default function GlobalStyles() {
     preset: "h5 / strong",
   });
 
-  useGlobalStyles("starlight-lang-select label", {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    gap: "($gap * 0.5)",
-    color: "#text-soft",
-  });
-
-  useGlobalStyles("starlight-lang-select label:hover", {
-    color: "#text",
-  });
-
-  useGlobalStyles("starlight-lang-select select", {
-    color: "#text-soft",
-    border: "0",
-    fill: "#clear",
-    cursor: "pointer",
-  });
-
-  useGlobalStyles("starlight-lang-select option", {
-    color: "#text",
-    fill: "#surface-2",
-  });
+  useGlobalStyles(
+    "starlight-lang-select",
+    resolveComponentStyles("LanguageSelect", {
+      display: "block",
+      Label: {
+        $: "label",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        color: "#text-soft",
+      },
+      HoverLabel: { $: "label:hover", color: "#text" },
+      LabelIcon: {
+        $: ".label-icon",
+        position: "absolute",
+        zIndex: "1",
+        insetInlineStart: "$gap",
+        pointerEvents: "none",
+      },
+      Select: {
+        $: "select",
+        appearance: "none",
+        inlineSize: "8rem",
+        minBlockSize: "$control-height",
+        paddingInlineStart: "($gap * 3.5)",
+        paddingInlineEnd: "($gap * 3.5)",
+        color: "#text-soft",
+        border: "0",
+        fill: "#clear",
+        preset: "small",
+        cursor: "pointer",
+        textOverflow: "ellipsis",
+      },
+      Caret: {
+        $: ".caret",
+        position: "absolute",
+        insetInlineEnd: "$gap",
+        pointerEvents: "none",
+      },
+      Option: {
+        $: "option",
+        color: "#text",
+        fill: "#surface-2",
+      },
+    }),
+  );
 
   useGlobalStyles(".td-header__social a, .td-mobile-preferences__social a", {
     color: "#accent-text",
@@ -1240,8 +1392,7 @@ export default function GlobalStyles() {
     borderColor: "#border",
     radius: "$radius",
     fill: "#surface-3",
-    fontSize: "$small-font-size",
-    fontWeight: "$body-bold-font-weight",
+    preset: "small / strong",
     boxShadow: "none",
     cursor: "pointer",
     transition: "color 120ms ease, background-color 120ms ease",
@@ -1306,7 +1457,7 @@ export default function GlobalStyles() {
 
   useGlobalStyles("#starlight__search .pagefind-ui__result-link", {
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
   });
 
   useGlobalStyles("[data-search-modal-open]", {
@@ -1436,9 +1587,7 @@ export default function GlobalStyles() {
       margin: "0",
       padding: "0",
       color: "#text-soft",
-      fontSize: "$small-font-size",
-      fontWeight: "$body-bold-font-weight",
-      lineHeight: "$small-line-height",
+      preset: "small / strong",
       border: "0",
       radius: "0",
       fill: "#clear",
@@ -1574,8 +1723,7 @@ export default function GlobalStyles() {
         borderCollapse: "separate",
         borderSpacing: "0",
         color: "#text-soft",
-        fontSize: "$small-font-size",
-        lineHeight: "$small-line-height",
+        preset: "small",
         border: true,
         borderColor: "#border",
         radius: "$card-radius",
@@ -1623,6 +1771,9 @@ export default function GlobalStyles() {
     "$docs-nav-pad-x": {
       "@mobile": "1rem",
     },
+    "$docs-content-pad-x": {
+      "@mobile": "1rem",
+    },
     "$docs-nav-gap": {
       "@mobile": "0.5rem",
     },

package/dist/components/LayoutComponents.js

@@ -36,6 +36,7 @@ export const PackageVersionRoot = customizeComponent(
     as: "span",
     styles: {
       display: "inline-flex",
+      hide: { "": false, "@compact": true },
       alignItems: "center",
       flexShrink: "0",
       minBlockSize: "1.5rem",
@@ -162,10 +163,13 @@ export const StarlightHeaderRoot = customizeComponent(
       },
       SiteTitle: {
         $: ".site-title",
+        minInlineSize: "0",
+        overflow: "hidden",
         color: "#text",
         preset: { "": "h4 / strong", "@mobile": "h5 / strong" },
         textDecoration: "none",
         whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
       },
       Search: {
         $: ".td-header__search",
@@ -231,7 +235,7 @@ export const StarlightHeaderRoot = customizeComponent(
   }),
 );
 
-const appearanceSelectStyles = {
+export const appearanceSelectStyles = {
   display: "grid",
   flexShrink: "0",
   placeItems: "center",
@@ -276,7 +280,7 @@ const appearanceSelectStyles = {
   },
   Select: {
     $: "select",
-    appearance: { "": "base-select", "@mobile": "none" },
+    appearance: "base-select",
     position: "static",
     inlineSize: "100%",
     minInlineSize: "0",