starlight-theme-nova 0.11.0 → 0.11.2

package/lib/tailwind.css

@@ -3,6 +3,26 @@
 @source '../src/**/*.ts';
 @source '../src/**/*.astro';
 
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  /* 
+   Match Starlight breakpoints 
+   https://github.com/withastro/starlight/blob/893be3b4a106ab75b706142bbd06b00268ccc298/packages/starlight/style/util.css#L22-L43 
+  */
+  --breakpoint-md: 50rem;
+  --breakpoint-lg: 72rem;
+}
+
+@layer utilities {
+  /* Wire up Starlight theme to use Tailwind config. */
+  :root {
+    /* Use Tailwind-configured font families. */
+    --sl-font: var(--font-sans);
+    --sl-font-mono: var(--font-mono);
+  }
+}
+
 :root,
 ::backdrop {
   --sl-content-width: 50rem;

package/lib/tailwind.gen.css

@@ -734,115 +734,115 @@
     }
   }
   .max-md\:w-full {
-    @media (width < 48rem) {
+    @media (width < 50rem) {
       width: 100%;
     }
   }
   .max-md\:\*\*\:hidden {
-    @media (width < 48rem) {
+    @media (width < 50rem) {
       :is(& *) {
         display: none;
       }
     }
   }
   .md\:visible {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       visibility: visible;
     }
   }
   .md\:flex {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       display: flex;
     }
   }
   .md\:hidden {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       display: none;
     }
   }
   .md\:h-9 {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       height: calc(var(--spacing) * 9);
     }
   }
   .md\:w-\(--sl-sidebar-width\) {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       width: var(--sl-sidebar-width);
     }
   }
   .md\:w-full {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       width: 100%;
     }
   }
   .md\:max-w-60 {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       max-width: calc(var(--spacing) * 60);
     }
   }
   .md\:max-w-88 {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       max-width: calc(var(--spacing) * 88);
     }
   }
   .md\:flex-1 {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       flex: 1;
     }
   }
   .md\:rounded-md {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       border-radius: var(--radius-md);
     }
   }
   .md\:border {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       border-style: var(--tw-border-style);
       border-width: 1px;
     }
   }
   .md\:border-r {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       border-right-style: var(--tw-border-style);
       border-right-width: 1px;
     }
   }
   .md\:border-solid {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       --tw-border-style: solid;
       border-style: solid;
     }
   }
   .md\:border-\(--sl-color-gray-5\) {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       border-color: var(--sl-color-gray-5);
     }
   }
   .md\:p-2 {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       padding: calc(var(--spacing) * 2);
     }
   }
   .md\:text-lg {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       font-size: var(--text-lg);
       line-height: var(--tw-leading, var(--text-lg--line-height));
     }
   }
   .md\:text-\(--sl-color-text\) {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       color: var(--sl-color-text);
     }
   }
   .md\:transition-colors {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
   }
   .md\:hover\:bg-gray-400\/10 {
-    @media (width >= 48rem) {
+    @media (width >= 50rem) {
       &:hover {
         @media (hover: hover) {
           background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 10%, transparent);
@@ -864,12 +864,12 @@
     }
   }
   .dark\:bg-gray-100 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-gray-100);
     }
   }
   .dark\:bg-gray-600\/30 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
@@ -877,27 +877,27 @@
     }
   }
   .dark\:bg-gray-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-gray-800);
     }
   }
   .dark\:text-gray-200 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       color: var(--color-gray-200);
     }
   }
   .dark\:text-gray-900 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       color: var(--color-gray-900);
     }
   }
   .dark\:text-white {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       color: var(--color-white);
     }
   }
   .dark\:hover\:bg-gray-300 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-gray-300);
@@ -906,7 +906,7 @@
     }
   }
   .dark\:hover\:bg-gray-700 {
-    @media (prefers-color-scheme: dark) {
+    &:where([data-theme=dark], [data-theme=dark] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-gray-700);
@@ -917,7 +917,7 @@
   .hover\:dark\:bg-gray-500\/50 {
     &:hover {
       @media (hover: hover) {
-        @media (prefers-color-scheme: dark) {
+        &:where([data-theme=dark], [data-theme=dark] *) {
           background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 50%, transparent);
           @supports (color: color-mix(in lab, red, red)) {
             background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
@@ -995,7 +995,7 @@
   }
   .\[body\[data-mobile-menu-expanded\]_\&\]\:max-md\:visible {
     body[data-mobile-menu-expanded] & {
-      @media (width < 48rem) {
+      @media (width < 50rem) {
         visibility: visible;
       }
     }
@@ -1006,6 +1006,12 @@
     }
   }
 }
+@layer utilities {
+  :root {
+    --sl-font: var(--font-sans);
+    --sl-font-mono: var(--font-mono);
+  }
+}
 :root, ::backdrop {
   --sl-content-width: 50rem;
   --sl-text-h1: var(--sl-text-3xl);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "A beautiful theme for Astro Starlight",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",