@tenphi/starlight 0.6.1 → 0.8.0

package/dist/components/LayoutComponents.js

@@ -23,6 +23,10 @@ export const LogoRoot = customizeComponent(
         inlineSize: "100%",
         blockSize: "100%",
       },
+      Mark: {
+        $: "> svg > .td-logo__mark",
+        color: "#accent-surface-text",
+      },
     },
   }),
 );
@@ -104,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",
@@ -146,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",
@@ -160,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",
@@ -202,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,
   }),
 );
 
@@ -371,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",
       },
     },
   }),

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>

package/dist/components/component-styles.test.ts

@@ -62,6 +62,30 @@ describe("component style configuration", () => {
     });
   });
 
+  it("exposes bridged Markdown components through the same style registry", () => {
+    configureComponentStyles({
+      MarkdownTable: { Table: { radius: "0" } },
+      Mermaid: { Diagram: { maxInlineSize: "90%" } },
+    });
+
+    expect(
+      resolveComponentStyles("MarkdownTable", {
+        Table: { border: true, radius: "1cr" },
+        Cell: { padding: "1.5x 2x" },
+      }),
+    ).toEqual({
+      Table: { border: true, radius: "0" },
+      Cell: { padding: "1.5x 2x" },
+    });
+    expect(
+      resolveComponentStyles("Mermaid", {
+        Diagram: { display: "block", maxInlineSize: "100%" },
+      }),
+    ).toEqual({
+      Diagram: { display: "block", maxInlineSize: "90%" },
+    });
+  });
+
   it("keeps custom anatomy styles on the compatibility bridge", () => {
     expect(
       resolveLegacyAnatomyStyles({

package/dist/icons/contrast.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0M12 3v18"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0M12 3v18"/></svg>

package/dist/index.d.ts

@@ -35,6 +35,8 @@ interface ResolvedDocsTheme {
     focus: Record<string, string>;
     shadow: Record<string, string>;
   };
+  /** Glaze-generated Tasty color tokens, including interaction and status roles. */
+  colorTokens: Record<string, Record<string, string>>;
   tokens: ThemeTokens;
   presets: Record<string, TypographyPreset>;
   contrast: {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCmC7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBA4aa,eACd,QAAQ,kBAAkB,gBACzB;;;UCldc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;EAEV,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCpC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UC+C7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBAoiBa,eACd,QAAQ,kBAAkB,gBACzB;;;UCrlBc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;;EAGV,aAAa,eAAe;EAC5B,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCvC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}