@tenphi/starlight 0.9.6 → 0.10.2

package/dist/components/GlobalStyles.js

@@ -108,17 +108,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 +257,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 +294,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(
@@ -366,170 +349,172 @@ export default function GlobalStyles() {
     fill: "#surface",
   });
 
-  useGlobalStyles("#starlight__sidebar", {
-    CurrentLink: {
-      $: [
-        'a[aria-current="page"]',
-        'a[aria-current="page"]:hover',
-        'a[aria-current="page"]:focus',
-      ],
-      color: "#accent-text",
-      fill: "#accent-surface-subtle",
-    },
-    Content: {
-      $: ".sidebar-content",
-      gap: "($gap * 3)",
-      paddingBlockStart: {
-        "": "($gap * 4)",
-        "@medium-layout": "($gap * 1.5)",
+  useGlobalStyles(
+    "#starlight__sidebar",
+    resolveComponentStyles("Sidebar", {
+      CurrentLink: {
+        $: [
+          'a[aria-current="page"]',
+          'a[aria-current="page"]:hover',
+          'a[aria-current="page"]:focus',
+        ],
+        color: "#accent-text",
+        fill: "#accent-surface-subtle",
       },
-      paddingBlockEnd: "($gap * 6)",
-    },
-    List: {
-      $: "ul",
-      padding: "0",
-      listStyle: "none",
-    },
-    Item: {
-      $: "li",
-      overflowWrap: "anywhere",
-    },
-    TopLevelSpacing: {
-      $: ".top-level > li + li",
-      marginBlockStart: "($gap * 3)",
-    },
-    NestedItem: {
-      $: "ul ul li",
-      marginInlineStart: "($gap * 0.75)",
-      paddingInlineStart: "($gap * 0.75)",
-      borderInlineStart: "0",
-    },
-    Control: {
-      $: ["summary", "a"],
-      padding: "($gap * 0.8) ($gap * 1.25)",
-      color: "#text-soft",
-      lineHeight: "1.45",
-      radius: "$radius",
-      textDecoration: "none",
-    },
-    Summary: {
-      $: "summary",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      cursor: "pointer",
-      userSelect: "none",
-    },
-    GroupLabel: {
-      $: "summary > .group-label",
-      display: "flex",
-      alignItems: "center",
-      minInlineSize: "0",
-      gap: "0.25em",
-    },
-    GroupLabelText: {
-      $: "summary > .group-label > span:first-child",
-      minInlineSize: "0",
-      overflow: "hidden",
-      color: "#text",
-      fontSize: "0.9375rem",
-      fontWeight: "$body-bold-font-weight",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    },
-    Link: {
-      $: "a",
-      display: "flex",
-      alignItems: "center",
-      minInlineSize: "0",
-      gap: "0.25em",
-      fill: "#surface",
-      fontSize: "0.9375rem",
-    },
-    LinkLabel: {
-      $: "a > span:first-child",
-      minInlineSize: "0",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    },
-    InteractiveControl: {
-      $: ["a:hover", "a:focus-visible", "summary:hover"],
-      color: "#text",
-      fill: "#surface-2-hover",
-    },
-    SummaryMarker: {
-      $: "summary::marker",
-      hide: true,
-    },
-    TopLevelLink: {
-      $: "a.large",
-      fontSize: "0.9375rem",
-      fontWeight: "$body-bold-font-weight",
-      color: "#text",
-    },
-  });
-
-  useGlobalStyles(".right-sidebar-panel", {
-    paddingBlockStart: "($gap * 5)",
-    paddingInlineStart: "$docs-sidebar-pad-x",
-    paddingInlineEnd: "$docs-sidebar-pad-x",
+      Content: {
+        $: ".sidebar-content",
+        gap: "($gap * 3)",
+        paddingBlockStart: {
+          "": "($gap * 4)",
+          "@medium-layout": "($gap * 1.5)",
+        },
+        paddingBlockEnd: "($gap * 6)",
+      },
+      List: {
+        $: "ul",
+        padding: "0",
+        listStyle: "none",
+      },
+      Item: {
+        $: "li",
+        overflowWrap: "anywhere",
+      },
+      TopLevelSpacing: {
+        $: ".top-level > li + li",
+        marginBlockStart: "($gap * 3)",
+      },
+      NestedItem: {
+        $: "ul ul li",
+        marginInlineStart: "($gap * 0.75)",
+        paddingInlineStart: "($gap * 0.75)",
+        borderInlineStart: "0",
+      },
+      Control: {
+        $: ["summary", "a"],
+        padding: "($gap * 0.8) ($gap * 1.25)",
+        color: "#text-soft",
+        lineHeight: "1.45",
+        radius: "$radius",
+        textDecoration: "none",
+      },
+      Summary: {
+        $: "summary",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        cursor: "pointer",
+        userSelect: "none",
+      },
+      GroupLabel: {
+        $: "summary > .group-label",
+        display: "flex",
+        alignItems: "center",
+        minInlineSize: "0",
+        gap: "0.25em",
+      },
+      GroupLabelText: {
+        $: "summary > .group-label > span:first-child",
+        minInlineSize: "0",
+        overflow: "hidden",
+        color: "#text",
+        preset: "navigation / strong",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      Link: {
+        $: "a",
+        display: "flex",
+        alignItems: "center",
+        minInlineSize: "0",
+        gap: "0.25em",
+        fill: "#surface",
+        preset: "navigation",
+      },
+      LinkLabel: {
+        $: "a > span:first-child",
+        minInlineSize: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      InteractiveControl: {
+        $: ["a:hover", "a:focus-visible", "summary:hover"],
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      SummaryMarker: {
+        $: "summary::marker",
+        hide: true,
+      },
+      TopLevelLink: {
+        $: "a.large",
+        color: "#text",
+        preset: "navigation / strong",
+      },
+    }),
+  );
 
-    Heading: {
-      $: "h2",
-      marginBlockEnd: "$gap",
-      color: "#text",
-      fontSize: "0.9375rem",
-      fontWeight: "$body-bold-font-weight",
-      lineHeight: "$heading-line-height",
-    },
-    List: {
-      $: "ul",
-      display: "grid",
-      gridTemplateColumns: "minmax(0, 1fr)",
-      minInlineSize: "0",
-      gap: "1px",
-      margin: "0",
-      padding: "0",
-      listStyle: "none",
-    },
-    Item: {
-      $: "li",
-      minInlineSize: "0",
-      margin: "0",
-      padding: "0",
-      listStyle: "none",
-    },
-    Link: {
-      $: "a",
-      display: "block",
-      minInlineSize: "0",
-      maxInlineSize: "100%",
-      paddingBlockStart: "($gap * 0.5)",
-      paddingBlockEnd: "($gap * 0.5)",
-      color: "#text-muted",
-      fontSize: "$small-font-size",
-      lineHeight: "1.45",
-      textDecoration: "none",
-      overflowWrap: "anywhere",
-    },
-    LinkLabel: {
-      $: "a > span",
-      display: "block",
-      minInlineSize: "0",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    },
-    HoverLink: {
-      $: "a:hover",
-      color: "#text",
-    },
-    CurrentLink: {
-      $: 'a[aria-current="true"]',
-      color: "#accent-text",
-    },
-  });
+  useGlobalStyles(
+    ".right-sidebar-panel",
+    resolveComponentStyles("TableOfContents", {
+      paddingBlockStart: "($gap * 5)",
+      paddingInlineStart: "$docs-sidebar-pad-x",
+      paddingInlineEnd: "$docs-sidebar-pad-x",
+
+      Heading: {
+        $: "h2",
+        marginBlockEnd: "$gap",
+        color: "#text",
+        preset: "navigation / strong",
+        lineHeight: "$heading-line-height",
+      },
+      List: {
+        $: "ul",
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
+        minInlineSize: "0",
+        gap: "1px",
+        margin: "0",
+        padding: "0",
+        listStyle: "none",
+      },
+      Item: {
+        $: "li",
+        minInlineSize: "0",
+        margin: "0",
+        padding: "0",
+        listStyle: "none",
+      },
+      Link: {
+        $: "a",
+        display: "block",
+        minInlineSize: "0",
+        maxInlineSize: "100%",
+        paddingBlockStart: "($gap * 0.5)",
+        paddingBlockEnd: "($gap * 0.5)",
+        color: "#text-muted",
+        preset: "small",
+        textDecoration: "none",
+        overflowWrap: "anywhere",
+      },
+      LinkLabel: {
+        $: "a > span",
+        display: "block",
+        minInlineSize: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      HoverLink: {
+        $: "a:hover",
+        color: "#text",
+      },
+      CurrentLink: {
+        $: 'a[aria-current="true"]',
+        color: "#accent-text",
+      },
+    }),
+  );
 
   useGlobalStyles(".content-panel", {
     padding: "($gap * 3) $docs-content-pad-x",
@@ -599,7 +584,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,8 +617,6 @@ export default function GlobalStyles() {
     color: "#syntax-text",
     border: true,
     fill: "#syntax-bg",
-    fontSize: "$code-font-size",
-    lineHeight: "$code-line-height",
     radius: "$card-radius",
     tabSize: "2",
   });
@@ -642,9 +625,6 @@ export default function GlobalStyles() {
     padding: "0",
     color: "inherit",
     fill: "#clear",
-    fontFamily: "$code-font-family",
-    fontSize: "inherit",
-    lineHeight: "inherit",
   });
 
   useGlobalStyles(".sl-markdown-content pre.td-diff", {
@@ -748,7 +728,7 @@ export default function GlobalStyles() {
     marginInlineStart: "-0.5rem",
     paddingInlineStart: "0.5rem",
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
   });
 
   useGlobalStyles(
@@ -788,31 +768,31 @@ export default function GlobalStyles() {
   );
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper", {
-    lineHeight: "$heading-line-height",
+    preset: "heading",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h1", {
-    fontSize: "$h1-font-size",
+    preset: "h1",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h2", {
-    fontSize: "$h2-font-size",
+    preset: "h2",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h3", {
-    fontSize: "$h3-font-size",
+    preset: "h3",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h4", {
-    fontSize: "$h4-font-size",
+    preset: "h4",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h5", {
-    fontSize: "$h5-font-size",
+    preset: "h5",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h6", {
-    fontSize: "$h6-font-size",
+    preset: "h6",
   });
 
   useGlobalStyles(".sl-markdown-content .sl-heading-wrapper > :first-child", {
@@ -853,7 +833,7 @@ export default function GlobalStyles() {
     gap: "$gap",
     margin: "0 0 $gap",
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
   });
 
   useGlobalStyles(".starlight-aside__icon", {
@@ -907,7 +887,7 @@ export default function GlobalStyles() {
 
   useGlobalStyles(".sl-link-card a", {
     color: "#text",
-    fontWeight: "$body-bold-font-weight",
+    preset: "strong",
     textDecoration: "none",
   });
 
@@ -928,7 +908,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",
@@ -961,8 +941,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", {
@@ -986,7 +965,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",
@@ -1006,7 +985,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)",
   });
@@ -1234,8 +1213,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",
@@ -1300,7 +1278,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]", {
@@ -1430,9 +1408,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",
@@ -1494,56 +1470,59 @@ export default function GlobalStyles() {
     whiteSpace: "nowrap",
   });
 
-  useGlobalStyles("mobile-starlight-toc .dropdown .isMobile", {
-    display: "grid",
-    gridTemplateColumns: "minmax(0, 1fr)",
-    minInlineSize: "0",
-    gap: "1px",
-    margin: "0",
-    padding: "0",
-    listStyle: "none",
-
-    Item: {
-      $: "> li",
+  useGlobalStyles(
+    "mobile-starlight-toc .dropdown .isMobile",
+    resolveComponentStyles("MobileTableOfContents", {
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
       minInlineSize: "0",
+      gap: "1px",
       margin: "0",
       padding: "0",
       listStyle: "none",
-    },
-    Link: {
-      $: "a",
-      display: "flex",
-      alignItems: "center",
-      minInlineSize: "0",
-      minBlockSize: "2.5rem",
-      padding: "0.625rem 0.75rem",
-      color: "#text-soft",
-      radius: "$radius",
-      fill: "#surface-2",
-      textDecoration: "none",
-    },
-    LinkLabel: {
-      $: "a > span",
-      minInlineSize: "0",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    },
-    HoverLink: {
-      $: "a:hover",
-      color: "#text",
-      fill: "#surface-2-hover",
-    },
-    CurrentLink: {
-      $: 'a[aria-current="true"]',
-      color: "#accent-text",
-      fill: "#accent-surface-2-subtle",
-    },
-    CurrentIndicator: {
-      $: 'a[aria-current="true"]::after',
-      blockSize: "1rem",
-    },
-  });
+
+      Item: {
+        $: "> li",
+        minInlineSize: "0",
+        margin: "0",
+        padding: "0",
+        listStyle: "none",
+      },
+      Link: {
+        $: "a",
+        display: "flex",
+        alignItems: "center",
+        minInlineSize: "0",
+        minBlockSize: "2.5rem",
+        padding: "0.625rem 0.75rem",
+        color: "#text-soft",
+        radius: "$radius",
+        fill: "#surface-2",
+        textDecoration: "none",
+      },
+      LinkLabel: {
+        $: "a > span",
+        minInlineSize: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      HoverLink: {
+        $: "a:hover",
+        color: "#text",
+        fill: "#surface-2-hover",
+      },
+      CurrentLink: {
+        $: 'a[aria-current="true"]',
+        color: "#accent-text",
+        fill: "#accent-surface-2-subtle",
+      },
+      CurrentIndicator: {
+        $: 'a[aria-current="true"]::after',
+        blockSize: "1rem",
+      },
+    }),
+  );
 
   useGlobalStyles(
     ".sl-markdown-content :where(code):not(:where(.not-content *))",
@@ -1565,8 +1544,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",