@beforesemicolon/builder 1.8.13 → 1.8.20

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

@@ -3,13 +3,13 @@
     overflow-x: auto;
     padding: 0.5em;
 
-    color: #24292e;
-    background: #ffffff;
+    color: var(--foreground);
+    background: var(--code-bg);
 }
 
 .hljs-comment,
 .hljs-punctuation {
-    color: #6a737d;
+    color: var(--syntax-comment);
 }
 
 .hljs-attr,
@@ -18,29 +18,29 @@
 .hljs-selector-attr,
 .hljs-selector-class,
 .hljs-selector-id {
-    color: #005cc5;
+    color: var(--syntax-attr);
 }
 
 .hljs-variable,
 .hljs-literal,
 .hljs-number,
 .hljs-doctag {
-    color: #e36209;
+    color: var(--primary);
 }
 
 .hljs-params {
-    color: #24292e;
+    color: var(--foreground);
 }
 
 .hljs-function {
-    color: #6f42c1;
+    color: var(--accent);
 }
 
 .hljs-class,
 .hljs-tag,
 .hljs-title,
 .hljs-built_in {
-    color: #22863a;
+    color: var(--syntax-tag);
 }
 
 .hljs-keyword,
@@ -49,28 +49,28 @@
 .hljs-meta-keyword,
 .hljs-template-tag,
 .hljs-template-variable {
-    color: #d73a49;
+    color: var(--syntax-keyword);
 }
 
 .hljs-string,
 .hljs-undefined {
-    color: #032f62;
+    color: var(--syntax-string);
 }
 
 .hljs-regexp {
-    color: #032f62;
+    color: var(--syntax-string);
 }
 
 .hljs-symbol {
-    color: #005cc5;
+    color: var(--accent);
 }
 
 .hljs-bullet {
-    color: #e36209;
+    color: var(--primary);
 }
 
 .hljs-section {
-    color: #005cc5;
+    color: var(--accent);
     font-weight: bold;
 }
 
@@ -78,30 +78,30 @@
 .hljs-name,
 .hljs-selector-tag,
 .hljs-selector-pseudo {
-    color: #22863a;
+    color: var(--syntax-tag);
 }
 
 .hljs-emphasis {
-    color: #e36209;
+    color: var(--primary);
     font-style: italic;
 }
 
 .hljs-strong {
-    color: #e36209;
+    color: var(--primary);
     font-weight: bold;
 }
 
 .hljs-deletion {
-    color: #b31d28;
-    background-color: #ffeef0;
+    color: var(--danger);
+    background-color: var(--danger-soft);
 }
 
 .hljs-addition {
-    color: #22863a;
-    background-color: #f0fff4;
+    color: var(--success);
+    background-color: var(--success-soft);
 }
 
 .hljs-link {
-    color: #032f62;
+    color: var(--syntax-string);
     font-style: underline;
 }

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

@@ -21,14 +21,10 @@
     background:
         radial-gradient(
             circle at 42% 30%,
-            oklch(0.74 0.18 45 / 0.12),
+            var(--primary-soft),
             transparent 38%
         ),
-        radial-gradient(
-            circle at 68% 48%,
-            oklch(0.7 0.16 200 / 0.11),
-            transparent 34%
-        );
+        radial-gradient(circle at 68% 48%, var(--accent-soft), transparent 34%);
     opacity: 0.95;
 }
 
@@ -51,8 +47,8 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    background: oklch(0.14 0.02 315 / 0.58);
-    border: 1px solid oklch(0.74 0.18 45 / 0.18);
+    background: var(--surface-muted);
+    border: 1px solid var(--surface-border);
     padding: 6px 12px;
     border-radius: 9999px;
     color: var(--muted-foreground);
@@ -61,12 +57,12 @@
     text-decoration: none;
     transition: all 0.2s ease;
     margin-bottom: 26px;
-    box-shadow: inset 0 1px 0 0 oklch(1 1 1 / 0.05);
+    box-shadow: inset 0 1px 0 0 var(--surface-border-strong);
 }
 
 .version-badge:hover {
     border-color: var(--primary);
-    background: oklch(0.74 0.18 45 / 0.05);
+    background: var(--primary-softer);
     color: var(--foreground);
 }
 
@@ -95,6 +91,18 @@
     font-weight: 500;
 }
 
+.hero-subtitle a {
+    color: var(--primary);
+    font-weight: 500;
+    border-bottom: 1px dashed var(--primary-border);
+}
+
+.hero-subtitle a:hover {
+    color: var(--primary-glow);
+    border-bottom-style: solid;
+    border-bottom-color: var(--primary-glow);
+}
+
 .hero-actions {
     display: flex;
     gap: 14px;
@@ -112,7 +120,8 @@
     );
     color: var(--primary-foreground);
     font-weight: 600;
-    box-shadow: 0 18px 40px -24px oklch(0.74 0.18 45 / 0.85);
+    box-shadow: 0 18px 40px -24px
+        color-mix(in oklch, var(--primary) 85%, transparent);
 }
 
 .btn-primary {
@@ -129,7 +138,8 @@
 .btn-primary:hover {
     transform: scale(1.02);
     color: var(--primary-foreground);
-    box-shadow: 0 0 35px -5px oklch(0.74 0.18 45 / 0.7);
+    box-shadow: 0 0 35px -5px
+        color-mix(in oklch, var(--primary) 70%, transparent);
     background: var(--primary);
 }
 
@@ -144,9 +154,9 @@
 .btn-secondary {
     display: inline-flex;
     align-items: center;
-    background: oklch(0.17 0.018 250 / 0.72);
-    border: 1px solid oklch(0.3 0.02 250 / 0.78);
-    color: oklch(0.78 0.015 250);
+    background: var(--surface-muted);
+    border: 1px solid var(--surface-border);
+    color: var(--foreground);
     height: 48px;
     padding: 0 24px;
     border-radius: 10px;
@@ -156,9 +166,9 @@
 }
 
 .btn-secondary:hover {
-    border-color: oklch(1 1 1 / 0.2);
+    border-color: var(--surface-border-strong);
     color: var(--foreground);
-    background: oklch(1 1 1 / 0.05);
+    background: var(--surface-hover);
 }
 
 .hero-stats {
@@ -276,8 +286,8 @@
 
 .product-card {
     position: relative;
-    background: oklch(0.22 0.018 250 / 0.4);
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
     border-radius: 1.25rem;
     padding: 40px;
     overflow: hidden;
@@ -292,7 +302,7 @@
 
 .product-card:hover {
     border-color: var(--primary-glow);
-    background: oklch(0.22 0.018 250 / 0.7);
+    background: var(--surface-hover);
     transform: translateY(-2px);
 }
 
@@ -309,20 +319,18 @@
     filter: blur(48px);
 }
 
+.product-card.card-primary .product-glow,
 .product-card.card-orange .product-glow {
     background: radial-gradient(
         circle,
-        oklch(0.74 0.18 45 / 0.15) 0%,
+        var(--primary-soft) 0%,
         transparent 70%
     );
 }
 
+.product-card.card-accent .product-glow,
 .product-card.card-cyan .product-glow {
-    background: radial-gradient(
-        circle,
-        oklch(0.7 0.16 200 / 0.15) 0%,
-        transparent 70%
-    );
+    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
 }
 
 .product-card:hover .product-glow {
@@ -336,28 +344,30 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid oklch(1 1 1 / 0.05);
+    border: 1px solid var(--surface-border);
     margin-bottom: 24px;
     transition: transform 0.3s ease;
 }
 
+.product-card.card-primary .icon-container,
 .product-card.card-orange .icon-container {
     background: radial-gradient(
         circle at top left,
-        oklch(0.74 0.18 45 / 0.2),
-        oklch(0.74 0.18 45 / 0.03)
+        color-mix(in oklch, var(--primary) 20%, transparent),
+        color-mix(in oklch, var(--primary) 3%, transparent)
     );
-    border-color: oklch(0.74 0.18 45 / 0.2);
+    border-color: var(--primary-border);
     color: var(--primary);
 }
 
+.product-card.card-accent .icon-container,
 .product-card.card-cyan .icon-container {
     background: radial-gradient(
         circle at top left,
-        oklch(0.7 0.16 200 / 0.2),
-        oklch(0.7 0.16 200 / 0.03)
+        color-mix(in oklch, var(--accent) 20%, transparent),
+        color-mix(in oklch, var(--accent) 3%, transparent)
     );
-    border-color: oklch(0.7 0.16 200 / 0.2);
+    border-color: var(--accent-border);
     color: var(--accent);
 }
 
@@ -374,7 +384,7 @@
 .package-name {
     font-size: 0.8rem;
     color: var(--muted-foreground);
-    background: oklch(1 1 1 / 0.03);
+    background: var(--surface);
     padding: 3px 8px;
     border-radius: 4px;
     border: 1px solid var(--border);
@@ -395,10 +405,12 @@
     font-weight: 600;
 }
 
+.product-card.card-primary .product-link,
 .product-card.card-orange .product-link {
     color: var(--primary);
 }
 
+.product-card.card-accent .product-link,
 .product-card.card-cyan .product-link {
     color: var(--accent);
 }
@@ -424,8 +436,8 @@
 
 .feature-card {
     position: relative;
-    background: oklch(0.22 0.018 250 / 0.4);
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
     border-radius: 1rem;
     padding: 32px;
     overflow: hidden;
@@ -436,8 +448,8 @@
 }
 
 .feature-card:hover {
-    border-color: oklch(0.74 0.18 45 / 0.4);
-    background: oklch(0.22 0.018 250 / 0.7);
+    border-color: var(--primary-border);
+    background: var(--surface-hover);
 }
 
 .feature-border {
@@ -469,10 +481,10 @@
     justify-content: center;
     background: radial-gradient(
         circle at top left,
-        oklch(0.74 0.18 45 / 0.2),
-        oklch(0.7 0.16 200 / 0.1)
+        color-mix(in oklch, var(--primary) 20%, transparent),
+        color-mix(in oklch, var(--accent) 10%, transparent)
     );
-    border: 1px solid oklch(0.74 0.18 45 / 0.2);
+    border: 1px solid var(--primary-border);
     color: var(--primary);
     margin-bottom: 20px;
     transition: transform 0.3s ease;
@@ -498,7 +510,7 @@
     padding: 100px 0;
     background: radial-gradient(
         ellipse 60% 50% at 50% 50%,
-        oklch(0.7 0.16 200 / 0.06),
+        var(--accent-softer),
         transparent
     );
 }
@@ -506,7 +518,7 @@
 .showcase-glow {
     background: radial-gradient(
         circle at center,
-        oklch(0.7 0.16 200 / 0.04) 0%,
+        color-mix(in oklch, var(--accent) 4%, transparent) 0%,
         transparent 60%
     );
 }
@@ -549,23 +561,23 @@
     cursor: pointer;
     transition: all 0.2s ease;
     border: 1px solid var(--border);
-    background: oklch(0.22 0.018 250 / 0.4);
+    background: var(--surface);
     color: var(--muted-foreground);
 }
 
 .ctrl-btn:hover {
     color: var(--foreground);
-    border-color: oklch(1 1 1 / 0.2);
+    border-color: var(--surface-border-strong);
 }
 
 .btn-next {
-    border-color: oklch(0.74 0.18 45 / 0.5);
-    background: oklch(0.74 0.18 45 / 0.1);
+    border-color: var(--primary-border);
+    background: var(--primary-soft);
     color: var(--primary);
 }
 
 .btn-next:hover {
-    background: oklch(0.74 0.18 45 / 0.2);
+    background: color-mix(in oklch, var(--primary) 20%, transparent);
     border-color: var(--primary);
 }
 
@@ -621,10 +633,12 @@
     font-weight: 500;
 }
 
+.color-primary,
 .color-orange {
     color: var(--primary);
 }
 
+.color-accent,
 .color-cyan {
     color: var(--accent);
 }
@@ -670,7 +684,7 @@
 .tabs-list {
     display: flex;
     gap: 8px;
-    background: oklch(0.22 0.018 250 / 0.5);
+    background: var(--surface-muted);
     border: 1px solid var(--border);
     border-radius: 9999px;
     padding: 6px;
@@ -726,8 +740,8 @@
 
 .cta-card {
     position: relative;
-    background: oklch(0.22 0.018 250 / 0.4);
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
     border-radius: 2rem;
     padding: 80px 40px;
     text-align: center;
@@ -754,7 +768,7 @@
     transform: translateX(-50%);
     background: radial-gradient(
         circle,
-        oklch(0.74 0.18 45 / 0.12) 0%,
+        var(--primary-soft) 0%,
         transparent 60%
     );
     filter: blur(40px);
@@ -797,8 +811,8 @@
 }
 
 .btn-outline:hover {
-    background: oklch(1 1 1 / 0.05);
-    border-color: oklch(1 1 1 / 0.2);
+    background: var(--surface-hover);
+    border-color: var(--surface-border-strong);
     transform: scale(1.01);
 }
 
@@ -892,7 +906,7 @@
     pointer-events: none;
     background: linear-gradient(
         to bottom,
-        oklch(0.18 0.015 250 / 0),
+        color-mix(in oklch, var(--background) 0%, transparent),
         var(--background) 78%,
         var(--background)
     );
@@ -920,8 +934,8 @@
     padding: 6px 12px;
     font-size: 0.75rem;
     line-height: 1rem;
-    background: oklch(0.22 0.018 250 / 0.6);
-    border-color: oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface-muted);
+    border-color: var(--surface-border);
     backdrop-filter: blur(8px);
     margin-bottom: 0;
 }
@@ -960,19 +974,12 @@
 
 .btn-secondary {
     gap: 8px;
-    border-color: oklch(0.3 0.02 250 / 0.8);
-    background: oklch(0.22 0.018 250 / 0.4);
+    border-color: var(--surface-border);
+    background: var(--surface);
     backdrop-filter: blur(8px);
     color: var(--foreground);
 }
 
-.btn-secondary::before {
-    content: '$';
-    color: var(--muted-foreground);
-    font-family: var(--font-mono);
-    font-size: 0.875rem;
-}
-
 .btn-secondary {
     font-size: 0.875rem;
 }
@@ -1006,8 +1013,8 @@
     left: auto;
     background: linear-gradient(
         to right,
-        oklch(0.74 0.18 45 / 0.2),
-        oklch(0.7 0.16 200 / 0.2)
+        color-mix(in oklch, var(--primary) 20%, transparent),
+        color-mix(in oklch, var(--accent) 20%, transparent)
     );
     filter: blur(48px);
     opacity: 0.5;
@@ -1082,14 +1089,14 @@
 .product-card {
     border-radius: 16px;
     padding: 24px;
-    background: oklch(0.22 0.018 250 / 0.4);
-    border-color: oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface);
+    border-color: var(--surface-border);
     isolation: isolate;
 }
 
 .product-card:hover {
     transform: none;
-    border-color: oklch(0.74 0.18 45 / 0.4);
+    border-color: var(--primary-border);
 }
 
 .product-glow {
@@ -1133,14 +1140,14 @@
     place-items: center;
     flex-shrink: 0;
     border-radius: 6px;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--surface-border);
     color: var(--muted-foreground);
     transition: all 0.2s ease;
 }
 
 .product-card:hover .product-arrow {
     color: var(--primary);
-    border-color: oklch(0.74 0.18 45 / 0.5);
+    border-color: var(--primary-border);
     transform: rotate(12deg);
 }
 
@@ -1149,8 +1156,8 @@
     height: 44px;
     border-radius: 8px;
     margin: 0;
-    background: oklch(0.18 0.015 250 / 0.4) !important;
-    border-color: oklch(0.3 0.02 250 / 0.6) !important;
+    background: var(--surface) !important;
+    border-color: var(--surface-border) !important;
 }
 
 .product-card h3 {
@@ -1222,13 +1229,13 @@
 .feature-card {
     border-radius: 12px;
     padding: 24px;
-    background: oklch(0.22 0.018 250 / 0.4);
-    border-color: oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface);
+    border-color: var(--surface-border);
 }
 
 .feature-card:hover {
-    background: oklch(0.22 0.018 250 / 0.7);
-    border-color: oklch(0.74 0.18 45 / 0.4);
+    background: var(--surface-hover);
+    border-color: var(--primary-border);
 }
 
 .feature-border {
@@ -1268,7 +1275,7 @@
     opacity: 0.4;
     background: radial-gradient(
         ellipse 60% 50% at 50% 50%,
-        oklch(0.7 0.16 200 / 0.15),
+        var(--accent-soft),
         transparent
     );
 }
@@ -1340,8 +1347,8 @@
     border-radius: 8px;
     padding: 4px;
     margin-bottom: 24px;
-    background: oklch(0.22 0.018 250 / 0.5);
-    border-color: oklch(0.3 0.02 250 / 0.6);
+    background: var(--surface-muted);
+    border-color: var(--surface-border);
 }
 
 .tab-trigger {
@@ -1358,7 +1365,7 @@
     gap: 16px;
     text-align: left;
     border-radius: 12px;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--code-border);
     background: var(--code-bg);
     box-shadow: var(--shadow-card);
     overflow: hidden;
@@ -1394,7 +1401,7 @@
     flex-shrink: 0;
     padding: 6px 12px;
     border-radius: 6px;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--surface-border);
     color: var(--muted-foreground);
     font-size: 0.75rem;
     cursor: pointer;
@@ -1403,7 +1410,7 @@
 
 .install-copy-btn:hover {
     color: var(--foreground);
-    border-color: oklch(0.74 0.18 45 / 0.5);
+    border-color: var(--primary-border);
 }
 
 .install-copy-btn .check-icon {
@@ -1416,7 +1423,7 @@
 
 .install-copy-btn.copied .check-icon {
     display: block;
-    color: oklch(0.78 0.15 145);
+    color: var(--success);
 }
 
 .install-section .code-snippet {
@@ -1441,7 +1448,7 @@
     transform: none;
     background: radial-gradient(
         ellipse 70% 80% at 50% 0%,
-        oklch(0.74 0.18 45 / 0.25),
+        color-mix(in oklch, var(--primary) 25%, transparent),
         transparent 60%
     );
     opacity: 0.6;