starlight-theme-nova 0.1.0 → 0.1.1

package/lib/aside.css

@@ -0,0 +1,17 @@
+.starlight-aside {
+  border: 1px solid var(--sl-color-asides-border);
+  border-radius: 0.5rem;
+}
+
+.starlight-aside,
+.starlight-aside a {
+  color: color-mix(
+    in srgb,
+    var(--sl-color-asides-text-accent) 50%,
+    var(--sl-color-white)
+  );
+}
+
+.starlight-aside a:is(:hover, :focus-visible) {
+  color: var(--sl-color-asides-text-accent);
+}

package/lib/badge.css

@@ -0,0 +1,23 @@
+.sl-badge {
+  --sl-badge-default-border: var(--sl-color-accent);
+  --sl-badge-default-bg: var(--sl-color-accent-low);
+  --sl-badge-default-text: var(--sl-color-accent-high);
+  --sl-badge-tip-text: var(--sl-color-purple-high);
+  --sl-badge-caution-text: var(--sl-color-orange-high);
+  --sl-badge-note-text: var(--sl-color-blue-high);
+  --sl-badge-success-text: var(--sl-color-green-high);
+  --sl-badge-danger-text: var(--sl-color-red-high);
+}
+
+[data-theme='light'] .sl-badge {
+  --sl-badge-tip-bg: var(--sl-color-purple-low);
+  --sl-badge-tip-text: var(--sl-color-purple-high);
+  --sl-badge-caution-bg: var(--sl-color-orange-low);
+  --sl-badge-caution-text: var(--sl-color-orange-high);
+  --sl-badge-note-bg: var(--sl-color-blue-low);
+  --sl-badge-note-text: var(--sl-color-blue-high);
+  --sl-badge-success-bg: var(--sl-color-green-low);
+  --sl-badge-success-text: var(--sl-color-green-high);
+  --sl-badge-danger-bg: var(--sl-color-red-low);
+  --sl-badge-danger-text: var(--sl-color-red-high);
+}

package/lib/card.css

@@ -0,0 +1,42 @@
+.sl-markdown-content .card-grid.stagger {
+  --stagger-height: 2.5rem;
+}
+
+.sl-markdown-content .card {
+  --sl-text-h1: var(--sl-text-4xl);
+  --sl-text-h2: var(--sl-text-3xl);
+  --sl-text-h3: var(--sl-text-2xl);
+  --sl-text-h4: var(--sl-text-xl);
+  --sl-text-h5: var(--sl-text-lg);
+
+  border-radius: 0.5rem;
+  padding: clamp(1rem, calc(0.125rem + 1.5vw), 2.5rem);
+}
+
+.sl-markdown-content .card .title .icon {
+  font-size: 1.875rem;
+}
+
+.sl-markdown-content .sl-link-card {
+  box-shadow: none;
+}
+
+.sl-markdown-content .sl-link-card:hover {
+  background: initial;
+}
+
+.sl-markdown-content .sl-link-card .title {
+  color: var(--sl-color-white);
+}
+
+.sl-markdown-content .sl-link-card .description {
+  color: var(--sl-color-gray-3);
+}
+
+.sl-markdown-content .sl-link-card:is(:hover, :focus-visible) .description {
+  color: var(--sl-color-gray-2);
+}
+
+.sl-markdown-content .sl-link-card .icon {
+  color: var(--sl-color-gray-2);
+}

package/lib/shiki.css

@@ -42,15 +42,23 @@
   }
 
   .line.highlighted {
-    background-color: rgb(107 114 128 / 0.2) /* #6b7280 */;
+    background-color: var(--nano-color-highlight);
   }
 
   .line.diff.add {
-    background-color: rgb(34 197 94 / 0.5) /* #22c55e */;
+    background-color: var(--sl-color-green-low);
   }
 
   .line.diff.remove {
-    background-color: rgb(239 68 68 / 0.5) /* #ef4444 */;
+    background-color: var(--sl-color-red-low);
+  }
+
+  .highlighted-word {
+    border-radius: 0.25rem;
+    border-color: var(--sl-color-gray-5);
+    border-style: solid;
+    border-width: 1px;
+    padding: 0 0.125rem;
   }
 }
 
@@ -79,15 +87,3 @@ html[data-theme='dark'] .astro-code span {
   font-weight: var(--shiki-dark-font-weight);
   text-decoration: var(--shiki-dark-text-decoration);
 }
-/* 
-.astro-code.twoslash .twoslash-popup-container {
-  transform: translateY(1.8em);
-}
-
-.astro-code.twoslash .twoslash-query-presisted .twoslash-popup-container {
-  transform: translateY(2.2em);
-}
-
-.astro-code.twoslash .twoslash-query-line .twoslash-popup-container {
-  transform: translateY(1.3em);
-} */

package/lib/styles.css

@@ -0,0 +1,6 @@
+@import './styles.gen.css';
+@import './markdown.css';
+@import './shiki.css';
+@import './aside.css';
+@import './badge.css';
+@import './card.css';

package/lib/styles.gen.css

@@ -23,6 +23,28 @@
     --sl-color-bg-inline-code: #1f2937;
     --sl-color-border-inline-code: #374151;
     --sl-color-bg-nav: color-mix(in srgb, #030712 50%, transparent);
+
+    --sl-color-orange-low: #451a03;
+    --sl-color-orange: #78350f;
+    --sl-color-orange-high: #fde68a;
+
+    --sl-color-green-low: #052e16;
+    --sl-color-green: #14532d;
+    --sl-color-green-high: #bbf7d0;
+
+    --sl-color-blue-low: #172554;
+    --sl-color-blue: #1e3a8a;
+    --sl-color-blue-high: #bfdbfe;
+
+    --sl-color-purple-low: #3b0764;
+    --sl-color-purple: #581c87;
+    --sl-color-purple-high: #e9d5ff;
+
+    --sl-color-red-low: #450a0a;
+    --sl-color-red: #7f1d1d;
+    --sl-color-red-high: #fecaca;
+
+    --nano-color-highlight: var(--sl-color-gray-5);
   }
 
   /* Light mode Starlight theme variables */
@@ -44,6 +66,28 @@
     --sl-color-bg-inline-code: #f3f4f6;
     --sl-color-border-inline-code: #d1d5db;
     --sl-color-bg-nav: color-mix(in srgb, #fff 80%, transparent);
+
+    --sl-color-orange-low: #fef3c7;
+    --sl-color-orange: #fbbf24;
+    --sl-color-orange-high: #92400e;
+
+    --sl-color-green-low: #dcfce7;
+    --sl-color-green: #4ade80;
+    --sl-color-green-high: #166534;
+
+    --sl-color-blue-low: #dbeafe;
+    --sl-color-blue: #60a5fa;
+    --sl-color-blue-high: #1e40af;
+
+    --sl-color-purple-low: #f3e8ff;
+    --sl-color-purple: #c084fc;
+    --sl-color-purple-high: #6b21a8;
+
+    --sl-color-red-low: #fee2e2;
+    --sl-color-red: #f87171;
+    --sl-color-red-high: #991b1b;
+
+    --nano-color-highlight: var(--sl-color-gray-6);
   }
 
 /* layer: shortcuts */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",

package/src/components/Search.astro

@@ -5,6 +5,18 @@ import Default from '@astrojs/starlight/components/Search.astro'
 <Default />
 
 <style is:global>
+  site-search {
+    & dialog {
+      background-color: var(--sl-color-bg);
+    }
+
+    & input:focus-visible {
+      outline-style: solid;
+      outline-width: 1px;
+      outline-color: var(--sl-color-accent);
+    }
+  }
+
   ::backdrop {
     --sl-color-backdrop-overlay: hsl(0 0 0% / 0.9);
   }
@@ -26,14 +38,14 @@ import Default from '@astrojs/starlight/components/Search.astro'
       }
 
       & dialog {
-        animation-name: sl-ocavue-search-dialog-zoom-out;
+        animation-name: nova-search-dialog-zoom-out;
         animation-duration: 150ms;
         transform: translateZ(0);
       }
 
       & dialog[open] {
         animation-duration: 50ms;
-        animation-name: sl-ocavue-search-dialog-zoom-in;
+        animation-name: nova-search-dialog-zoom-in;
       }
 
       & dialog::backdrop {
@@ -41,17 +53,17 @@ import Default from '@astrojs/starlight/components/Search.astro'
         backdrop-filter: none;
 
         animation-duration: 150ms;
-        animation-name: sl-ocavue-search-backdrop-fade-out;
+        animation-name: nova-search-backdrop-fade-out;
       }
 
       & dialog[open]::backdrop {
         animation-duration: 50ms;
-        animation-name: sl-ocavue-search-backdrop-fade-in;
+        animation-name: nova-search-backdrop-fade-in;
       }
     }
   }
 
-  @keyframes sl-ocavue-search-backdrop-fade-in {
+  @keyframes nova-search-backdrop-fade-in {
     from {
       background-color: transparent;
     }
@@ -60,7 +72,7 @@ import Default from '@astrojs/starlight/components/Search.astro'
     }
   }
 
-  @keyframes sl-ocavue-search-backdrop-fade-out {
+  @keyframes nova-search-backdrop-fade-out {
     from {
       background-color: var(--sl-color-backdrop-overlay);
     }
@@ -69,23 +81,23 @@ import Default from '@astrojs/starlight/components/Search.astro'
     }
   }
 
-  :root {
-    --sl-ocavue-search-dialog-zoom-scale: 1;
-    --sl-ocavue-search-dialog-zoom-translate-y: 0;
+  site-search {
+    --nova-search-dialog-zoom-scale: 1;
+    --nova-search-dialog-zoom-translate-y: 0;
   }
 
   @media (min-width: 72rem) {
-    :root {
-      --sl-ocavue-search-dialog-zoom-scale: 0.95;
-      --sl-ocavue-search-dialog-zoom-translate-y: -1rem;
+    site-search {
+      --nova-search-dialog-zoom-scale: 0.95;
+      --nova-search-dialog-zoom-translate-y: -1rem;
     }
   }
 
-  @keyframes sl-ocavue-search-dialog-zoom-in {
+  @keyframes nova-search-dialog-zoom-in {
     from {
       opacity: 0;
-      transform: scale(var(--sl-ocavue-search-dialog-zoom-scale))
-        translateY(var(--sl-ocavue-search-dialog-zoom-translate-y));
+      transform: scale(var(--nova-search-dialog-zoom-scale))
+        translateY(var(--nova-search-dialog-zoom-translate-y));
     }
     to {
       opacity: 1;
@@ -93,15 +105,15 @@ import Default from '@astrojs/starlight/components/Search.astro'
     }
   }
 
-  @keyframes sl-ocavue-search-dialog-zoom-out {
+  @keyframes nova-search-dialog-zoom-out {
     from {
       opacity: 1;
       transform: scale(1) translateY(0);
     }
     to {
       opacity: 0;
-      transform: scale(var(--sl-ocavue-search-dialog-zoom-scale))
-        translateY(var(--sl-ocavue-search-dialog-zoom-translate-y));
+      transform: scale(var(--nova-search-dialog-zoom-scale))
+        translateY(var(--nova-search-dialog-zoom-translate-y));
     }
   }
 </style>

package/src/index.ts

@@ -36,9 +36,7 @@ export default function starlightThemeNova(
         const newConfig = {
           customCss: [
             // Including any user CSS *after* our own.
-            'starlight-theme-nova/styles.gen.css',
-            'starlight-theme-nova/shiki.css',
-            'starlight-theme-nova/markdown.css',
+            'starlight-theme-nova/styles.css',
             ...(config.customCss || []),
           ],
           components: {

package/src/shiki-config.ts

@@ -1,7 +1,9 @@
 import {
   transformerMetaHighlight,
+  transformerMetaWordHighlight,
   transformerNotationDiff,
   transformerNotationHighlight,
+  transformerNotationWordHighlight,
 } from '@shikijs/transformers'
 import { transformerTwoslash } from '@shikijs/twoslash'
 import type { ShikiTransformer } from '@shikijs/types'
@@ -12,9 +14,12 @@ import { transformerCopyButton } from './shiki-transformer-copy-button'
 
 export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
   const transformers: ShikiTransformer[] = [
+    transformerMetaHighlight(),
+    transformerMetaWordHighlight(),
     transformerNotationDiff(),
     transformerNotationHighlight(),
-    transformerMetaHighlight(),
+    transformerNotationWordHighlight(),
+
     transformerCopyButton(),
     options.twoslash
       ? transformerTwoslash({