@beforesemicolon/builder 1.8.13 → 1.8.20

package/dist/cjs/docs/templates/fading-citrus/stylesheets/common.css

@@ -4,23 +4,60 @@
 :root {
     --background: oklch(0.18 0.015 250);
     --foreground: oklch(0.96 0.005 250);
+    --heading: var(--foreground);
     --card: oklch(0.22 0.018 250);
     --primary: oklch(0.74 0.18 45);
     --primary-glow: oklch(0.78 0.19 50);
     --primary-foreground: oklch(0.18 0.02 250);
+    --primary-soft: color-mix(in oklch, var(--primary) 12%, transparent);
+    --primary-softer: color-mix(in oklch, var(--primary) 6%, transparent);
+    --primary-border: color-mix(in oklch, var(--primary) 45%, transparent);
     --secondary: oklch(0.27 0.02 250);
     --muted: oklch(0.25 0.018 250);
     --muted-foreground: oklch(0.68 0.02 250);
     --accent: oklch(0.7 0.16 200);
+    --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
+    --accent-softer: color-mix(in oklch, var(--accent) 6%, transparent);
+    --accent-border: color-mix(in oklch, var(--accent) 35%, transparent);
     --border: oklch(0.3 0.02 250);
     --ring: oklch(0.74 0.18 45);
     --radius: 0.75rem;
+    --surface: color-mix(in oklch, var(--card) 40%, transparent);
+    --surface-muted: color-mix(in oklch, var(--card) 60%, transparent);
+    --surface-hover: color-mix(in oklch, var(--card) 70%, transparent);
+    --surface-border: color-mix(in oklch, var(--border) 65%, transparent);
+    --surface-border-strong: color-mix(
+        in oklch,
+        var(--foreground) 20%,
+        transparent
+    );
+    --header-bg: color-mix(in oklch, var(--background) 60%, transparent);
+    --footer-bg: color-mix(in oklch, var(--background) 88%, black 12%);
+    --grid-line: color-mix(in oklch, var(--foreground) 5%, transparent);
+    --inline-code-bg: color-mix(
+        in oklch,
+        var(--background) 82%,
+        var(--foreground) 8%
+    );
     --code-bg: oklch(0.16 0.015 250);
+    --code-header-bg: color-mix(in oklch, var(--card) 60%, transparent);
+    --code-border: var(--surface-border);
+    --code-line-number: color-mix(
+        in oklch,
+        var(--muted-foreground) 65%,
+        transparent
+    );
+    --success: oklch(0.78 0.15 145);
+    --success-soft: color-mix(in oklch, var(--success) 14%, transparent);
+    --warning: oklch(0.78 0.14 90);
+    --warning-soft: color-mix(in oklch, var(--warning) 14%, transparent);
+    --danger: oklch(0.62 0.22 25);
+    --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent);
     --syntax-comment: oklch(0.55 0.02 250);
-    --syntax-keyword: oklch(0.78 0.19 50);
-    --syntax-string: oklch(0.78 0.15 145);
-    --syntax-tag: oklch(0.72 0.16 200);
-    --syntax-attr: oklch(0.82 0.14 90);
+    --syntax-keyword: var(--primary);
+    --syntax-string: var(--success);
+    --syntax-tag: var(--accent);
+    --syntax-attr: var(--warning);
 
     --font-sans:
         ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
@@ -32,7 +69,7 @@
 
     --gradient-hero: radial-gradient(
         ellipse at top,
-        oklch(0.28 0.08 45 / 0.35),
+        color-mix(in oklch, var(--primary) 26%, transparent),
         transparent 60%
     );
     --gradient-primary: linear-gradient(
@@ -47,10 +84,11 @@
     );
     --gradient-border: linear-gradient(
         135deg,
-        oklch(0.74 0.18 45 / 0.5),
-        oklch(0.7 0.16 200 / 0.3)
+        color-mix(in oklch, var(--primary) 50%, transparent),
+        color-mix(in oklch, var(--accent) 30%, transparent)
     );
-    --shadow-glow: 0 0 60px -15px oklch(0.74 0.18 45 / 0.5);
+    --shadow-glow: 0 0 60px -15px
+        color-mix(in oklch, var(--primary) 50%, transparent);
     --shadow-card:
         0 1px 0 0 oklch(1 0 0 / 0.05) inset,
         0 20px 40px -20px oklch(0 0 0 / 0.5);
@@ -111,7 +149,7 @@ h4,
 h5,
 h6 {
     font-family: var(--font-title);
-    color: oklch(1 0 0);
+    color: var(--heading);
     font-weight: 800;
 }
 
@@ -194,8 +232,8 @@ ul {
 .bg-grid {
     background-size: 48px 48px;
     background-image:
-        linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
-        linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
+        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
     mask-image: radial-gradient(
         ellipse 80% 60% at 50% 0%,
         black 30%,
@@ -246,8 +284,8 @@ ul {
 header {
     height: 4rem;
     max-width: 1280px;
-    border-bottom: 1px solid oklch(0.3 0.02 250 / 0.5);
-    background-color: oklch(0.18 0.015 250 / 0.6);
+    border-bottom: 1px solid var(--surface-border);
+    background-color: var(--header-bg);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     display: flex;
@@ -315,18 +353,18 @@ header nav a.github-link {
     height: 36px;
     display: inline-grid;
     place-items: center;
-    border: 1px solid oklch(0.3 0.02 250 / 0.7);
+    border: 1px solid var(--surface-border);
     border-radius: 8px;
 }
 
 header nav a.github-link:hover {
-    border-color: oklch(0.74 0.18 45 / 0.45);
+    border-color: var(--primary-border);
     color: var(--primary);
 }
 
 /* footer ------------------- */
 footer {
-    background: oklch(0.14 0.012 250);
+    background: var(--footer-bg);
     color: var(--muted-foreground);
     border-top: 1px solid var(--border);
     padding-top: 60px;
@@ -341,9 +379,8 @@ footer .footer-brand {
     min-width: 280px;
 }
 
-footer .footer-brand .site-logo {
+footer .footer-brand .site-logo-pair {
     margin-bottom: 16px;
-    display: block;
 }
 
 footer .footer-brand p {
@@ -398,7 +435,7 @@ footer address a {
     height: 32px;
     border-radius: 6px;
     border: 1px solid var(--border);
-    background: oklch(1 1 1 / 0.02);
+    background: var(--surface);
     transition: all 0.2s ease;
 }
 
@@ -410,7 +447,7 @@ footer address a img {
 
 footer address a:hover {
     border-color: var(--primary);
-    background: oklch(0.74 0.18 45 / 0.05);
+    background: var(--primary-softer);
 }
 
 footer address a:hover img {
@@ -419,7 +456,7 @@ footer address a:hover img {
 
 footer .copyright-section {
     width: 100%;
-    border-top: 1px solid oklch(1 1 1 / 0.05);
+    border-top: 1px solid var(--surface-border);
     padding-top: 24px;
     margin-top: 20px;
     display: flex;
@@ -445,7 +482,7 @@ footer .copyright-section .brand-logo-container img {
 .code-snippet {
     background: var(--code-bg);
     border-radius: 0.75rem;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--code-border);
     margin: 16px 0;
     width: 100%;
     max-width: 100%;
@@ -464,8 +501,8 @@ footer .copyright-section .brand-logo-container img {
     align-items: center;
     gap: 12px;
     padding: 0 10px 0 16px;
-    background: oklch(0.22 0.018 250 / 0.6);
-    border-bottom: 1px solid oklch(0.3 0.02 250 / 0.6);
+    background: var(--code-header-bg);
+    border-bottom: 1px solid var(--code-border);
 }
 
 .code-snippet .mac-dots {
@@ -481,15 +518,15 @@ footer .copyright-section .brand-logo-container img {
 }
 
 .code-snippet .mac-dots .dot-red {
-    background-color: oklch(0.62 0.22 25 / 0.7);
+    background-color: color-mix(in oklch, var(--danger) 70%, transparent);
 }
 
 .code-snippet .mac-dots .dot-yellow {
-    background-color: oklch(0.78 0.14 90 / 0.7);
+    background-color: color-mix(in oklch, var(--warning) 70%, transparent);
 }
 
 .code-snippet .mac-dots .dot-green {
-    background-color: oklch(0.78 0.15 145 / 0.7);
+    background-color: color-mix(in oklch, var(--success) 70%, transparent);
 }
 
 .code-snippet .filename {
@@ -571,7 +608,7 @@ footer .copyright-section .brand-logo-container img {
     padding-right: 16px;
     flex-shrink: 0;
     text-align: right;
-    color: oklch(0.68 0.02 250 / 0.5);
+    color: var(--code-line-number);
 }
 
 .code-snippet .line-code {
@@ -614,16 +651,16 @@ footer .copyright-section .brand-logo-container img {
 .code-snippet .code-copy-btn::after {
     top: 7px;
     left: 12px;
-    background: oklch(0.22 0.018 250);
+    background: var(--code-header-bg);
 }
 
 .code-snippet .code-copy-btn:hover {
     color: var(--foreground);
-    background: oklch(0.25 0.018 250 / 0.6);
+    background: var(--surface-muted);
 }
 
 .code-snippet .code-copy-btn.copied {
-    color: oklch(0.78 0.15 145);
+    color: var(--success);
 }
 
 @media screen and (max-width: 768px) {
@@ -663,10 +700,52 @@ header.site-header .header-inner {
     justify-content: space-between;
 }
 
+.site-logo-pair {
+    display: inline-grid;
+    align-items: center;
+}
+
+.site-logo-pair .site-logo {
+    grid-area: 1 / 1;
+}
+
+.site-logo-light {
+    display: block;
+}
+
+.site-logo-dark {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    .site-logo-light {
+        display: none;
+    }
+
+    .site-logo-dark {
+        display: block;
+    }
+}
+
+[data-theme='light'] .site-logo-light {
+    display: block;
+}
+
+[data-theme='light'] .site-logo-dark {
+    display: none;
+}
+
+[data-theme='dark'] .site-logo-light {
+    display: none;
+}
+
+[data-theme='dark'] .site-logo-dark {
+    display: block;
+}
+
 header.site-header h1 a .site-logo {
     height: 28px;
     width: auto;
-    display: block;
 }
 
 header.site-header nav a {
@@ -691,7 +770,7 @@ header.site-header nav a.docs-github-link {
 }
 
 .site-footer {
-    border-top: 1px solid oklch(0.3 0.02 250 / 0.5);
+    border-top: 1px solid var(--surface-border);
     background: transparent;
     padding: 56px 0 36px;
 }
@@ -709,7 +788,6 @@ header.site-header nav a.docs-github-link {
 .site-footer .footer-brand .site-logo {
     height: 28px;
     width: auto;
-    display: block;
 }
 
 .site-footer .footer-brand p {
@@ -749,11 +827,12 @@ header.site-header nav a.docs-github-link {
 
 .footer-credit {
     grid-column: 1 / -1;
-    border-top: 1px solid oklch(0.3 0.02 250 / 0.5);
+    border-top: 1px solid var(--surface-border);
     padding-top: 24px;
     display: flex;
     align-items: center;
-    gap: 12px;
+    justify-content: center;
+    text-align: center;
     font-size: 0.8125rem;
 }
 
@@ -771,25 +850,33 @@ header.site-header nav a.docs-github-link {
     display: grid;
     place-items: center;
     border-radius: 6px;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--surface-border);
     color: var(--muted-foreground);
-    background: oklch(0.22 0.018 250 / 0.25);
+    background: var(--surface);
     transition: all 0.2s ease;
 }
 
-.footer-social img {
-    filter: invert(1);
-    opacity: 0.62;
-    transition: opacity 0.2s ease;
+.footer-social-icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+    background-color: var(--muted-foreground);
+    opacity: 0.72;
+    mask: var(--icon) center / contain no-repeat;
+    -webkit-mask: var(--icon) center / contain no-repeat;
+    transition:
+        background-color 0.2s ease,
+        opacity 0.2s ease;
 }
 
 .footer-social a:hover {
     color: var(--primary);
-    border-color: oklch(0.74 0.18 45 / 0.5);
-    background: oklch(0.74 0.18 45 / 0.06);
+    border-color: var(--primary-border);
+    background: var(--primary-softer);
 }
 
-.footer-social a:hover img {
+.footer-social a:hover .footer-social-icon {
+    background-color: var(--primary);
     opacity: 1;
 }
 
@@ -810,8 +897,4 @@ header.site-header nav a.docs-github-link {
     .footer-social {
         justify-content: flex-start;
     }
-
-    .footer-credit {
-        align-items: flex-start;
-    }
 }

package/dist/cjs/docs/templates/fading-citrus/stylesheets/documentation.css

@@ -24,7 +24,7 @@ body {
 /* #mobile-menu-toggle */
 #mobile-menu-toggle {
     height: 48px;
-    background: oklch(0.22 0.018 250 / 0.8);
+    background: var(--surface-muted);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     padding: 14px 20px;
@@ -95,7 +95,7 @@ body {
 }
 
 #documentation nav li:hover {
-    background: oklch(1 1 1 / 0.03);
+    background: var(--surface);
 }
 
 #documentation nav li:hover a {
@@ -103,7 +103,7 @@ body {
 }
 
 #documentation nav li.active {
-    background: oklch(0.74 0.18 45 / 0.08);
+    background: var(--primary-softer);
 }
 
 #documentation nav li.active a {
@@ -185,13 +185,13 @@ body {
     margin: 16px 0;
     font-size: 1rem;
     line-height: 1.7;
-    color: oklch(0.8 0.01 250);
+    color: var(--foreground);
 }
 
 #documentation article p a {
     color: var(--primary);
     font-weight: 500;
-    border-bottom: 1px dashed oklch(0.74 0.18 45 / 0.4);
+    border-bottom: 1px dashed var(--primary-border);
     transition: all 0.2s ease;
 }
 
@@ -222,17 +222,17 @@ body {
 #documentation article li {
     margin: 8px 0;
     font-size: 0.95rem;
-    color: oklch(0.8 0.01 250);
+    color: var(--foreground);
 }
 
 #documentation article code:not(.hljs) {
-    background: oklch(1 1 1 / 0.06);
+    background: var(--inline-code-bg);
     color: var(--primary);
     display: inline-block;
-    padding: 2px 6px;
+    padding: 0 4px;
     border-radius: 4px;
     font-family: var(--font-mono);
-    font-size: 0.85em;
+    font-size: 0.75em;
     border: 1px solid var(--border);
 }
 
@@ -247,27 +247,35 @@ body {
 }
 
 #documentation article div.warning {
-    background: oklch(0.78 0.14 90 / 0.1);
-    border-color: oklch(0.78 0.14 90 / 0.6);
-    color: oklch(0.85 0.1 90);
+    background: var(--warning-soft);
+    border-color: color-mix(in oklch, var(--warning) 60%, transparent);
+    color: var(--warning);
 }
 
 #documentation article div.warning code {
-    background: oklch(0.78 0.14 90 / 0.15) !important;
-    color: oklch(0.85 0.1 90) !important;
-    border-color: oklch(0.78 0.14 90 / 0.2) !important;
+    background: var(--warning-soft) !important;
+    color: var(--warning) !important;
+    border-color: color-mix(
+        in oklch,
+        var(--warning) 20%,
+        transparent
+    ) !important;
 }
 
 #documentation article div.info {
-    background: oklch(0.7 0.16 200 / 0.1);
-    border-color: oklch(0.7 0.16 200 / 0.6);
-    color: oklch(0.85 0.12 200);
+    background: var(--accent-soft);
+    border-color: color-mix(in oklch, var(--accent) 60%, transparent);
+    color: var(--accent);
 }
 
 #documentation article div.info code {
-    background: oklch(0.7 0.16 200 / 0.15) !important;
-    color: oklch(0.85 0.12 200) !important;
-    border-color: oklch(0.7 0.16 200 / 0.2) !important;
+    background: var(--accent-soft) !important;
+    color: var(--accent) !important;
+    border-color: color-mix(
+        in oklch,
+        var(--accent) 20%,
+        transparent
+    ) !important;
 }
 
 #documentation article details summary {
@@ -291,7 +299,7 @@ body {
 #documentation article dl dd {
     margin: 0 0 16px 12px;
     line-height: 1.6;
-    color: oklch(0.8 0.01 250);
+    color: var(--foreground);
 }
 
 /* #edit-doc */
@@ -327,17 +335,27 @@ body {
     padding: 8px 16px;
     border-radius: 8px;
     border: 1px solid var(--border);
-    background: oklch(1 1 1 / 0.02);
+    background: var(--surface);
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--muted-foreground);
     transition: all 0.2s ease;
 }
 
+#next-doc span {
+    margin-left: 8px;
+    display: inline-block;
+}
+
+#prev-doc span {
+    margin-right: 8px;
+    display: inline-block;
+}
+
 #prev-doc:hover,
 #next-doc:hover {
     border-color: var(--primary);
-    background: oklch(0.74 0.18 45 / 0.05);
+    background: var(--primary-softer);
     color: var(--foreground);
 }
 
@@ -395,7 +413,7 @@ body {
     height: 24px;
     margin-right: 12px;
     border-radius: 6px;
-    border: 1px solid oklch(0.74 0.18 45 / 0.25);
+    border: 1px solid var(--primary-border);
     color: var(--primary);
     font-family: var(--font-mono);
     font-size: 0.8rem;
@@ -495,7 +513,7 @@ body {
         width: 100vw;
         max-height: none;
         height: calc(100vh - 112px);
-        background: oklch(0.18 0.015 250 / 0.72);
+        background: var(--header-bg);
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
     }

package/dist/cjs/docs/templates/fading-citrus/stylesheets/github-dark.hightlighter.css

@@ -18,14 +18,14 @@
 .hljs-selector-attr,
 .hljs-selector-class,
 .hljs-selector-id {
-    color: oklch(0.82 0.14 90); /* Yellow syntax-attr */
+    color: var(--syntax-attr);
 }
 
 .hljs-variable,
 .hljs-literal,
 .hljs-number,
 .hljs-doctag {
-    color: var(--primary); /* Orange */
+    color: var(--primary);
 }
 
 .hljs-params {
@@ -33,14 +33,14 @@
 }
 
 .hljs-function {
-    color: var(--accent); /* Cyan */
+    color: var(--accent);
 }
 
 .hljs-class,
 .hljs-tag,
 .hljs-title,
 .hljs-built_in {
-    color: var(--accent); /* Cyan */
+    color: var(--accent);
 }
 
 .hljs-keyword,
@@ -49,16 +49,16 @@
 .hljs-meta-keyword,
 .hljs-template-tag,
 .hljs-template-variable {
-    color: var(--primary); /* Orange keyword */
+    color: var(--syntax-keyword);
 }
 
 .hljs-string,
 .hljs-undefined {
-    color: oklch(0.78 0.15 145); /* Green syntax-string */
+    color: var(--syntax-string);
 }
 
 .hljs-regexp {
-    color: oklch(0.78 0.15 145);
+    color: var(--syntax-string);
 }
 
 .hljs-symbol {
@@ -92,16 +92,16 @@
 }
 
 .hljs-deletion {
-    color: oklch(0.62 0.22 25);
-    background-color: oklch(0.62 0.22 25 / 0.15);
+    color: var(--danger);
+    background-color: var(--danger-soft);
 }
 
 .hljs-addition {
-    color: oklch(0.78 0.15 145);
-    background-color: oklch(0.78 0.15 145 / 0.15);
+    color: var(--success);
+    background-color: var(--success-soft);
 }
 
 .hljs-link {
-    color: oklch(0.78 0.15 145);
+    color: var(--syntax-string);
     font-style: underline;
 }