@getvitops/generator 0.1.0 → 0.2.0

package/assets/css/patterns/carousel.css

@@ -64,7 +64,7 @@
       border: none;
       border-radius: 50%;
       color: var(--carousel-button-color, currentColor);
-      background: var(--color-surface-xl);
+      background: var(--surface-bg-muted);
       opacity: 0.9;
       transition:
         opacity 0.2s ease,
@@ -73,7 +73,7 @@
 
     &::scroll-button(*):hover {
       opacity: 1;
-      background: var(--color-surface-l);
+      background: var(--color-surface-muted);
     }
 
     &::scroll-button(*):focus-visible {
@@ -211,7 +211,7 @@
     block-size: 2rem;
     border: none;
     border-radius: 50%;
-    background: var(--color-surface-xl);
+    background: var(--surface-bg-muted);
     color: var(--carousel-button-color, currentColor);
     opacity: 0.7;
     cursor: pointer;

package/assets/css/patterns/code.css

@@ -10,8 +10,8 @@
 :where(:not(pre) > code) {
   font-family: var(--font-mono);
   font-size: 0.85em;
-  background: var(--color-neutral-xl);
-  color: var(--color-neutral-xxd);
+  background: var(--neutral-border);
+  color: var(--neutral-text);
   padding: 0.1em 0.4em;
   border-radius: var(--br-default);
 }

package/assets/css/patterns/combobox.css

@@ -20,7 +20,7 @@
     border-radius: var(--_br);
 
     &:focus {
-      outline: 2px solid var(--combobox-focus-color, var(--color-brand-primary-l));
+      outline: 2px solid var(--combobox-focus-color, var(--color-brand-primary-muted));
       outline-offset: 2px;
     }
   }
@@ -35,7 +35,7 @@
     border: var(--_b);
     border-radius: var(--_br);
     box-shadow: var(--_ds);
-    background: var(--color-surface-xxl);
+    background: var(--surface-bg);
     max-block-size: 15rem;
     overflow-y: auto;
     list-style: none;
@@ -55,7 +55,7 @@
 
     &:hover,
     &[aria-selected='true'] {
-      background: var(--color-surface-l);
+      background: var(--color-surface-muted);
     }
 
     &[aria-disabled='true'] {

package/assets/css/patterns/comment.css

@@ -62,7 +62,7 @@
     grid-column: 1 / -1;
     margin-inline-start: var(--comment-indent, 2rem);
     padding-inline-start: var(--comment-indent, 2rem);
-    border-inline-start: 2px solid var(--color-surface-l);
+    border-inline-start: 2px solid var(--color-surface-muted);
     display: flex;
     flex-direction: column;
     gap: 1rem;

package/assets/css/patterns/copy.css

@@ -38,7 +38,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-l));
+      outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-muted));
       outline-offset: 2px;
     }
   }
@@ -66,8 +66,8 @@
     font-size: 0.75rem;
     border-radius: 0.25rem;
     white-space: nowrap;
-    background: var(--color-surface-xxd);
-    color: var(--color-surface-xxl);
+    background: var(--surface-text);
+    color: var(--surface-bg);
     opacity: 0;
     visibility: hidden;
     transition:

package/assets/css/patterns/dialog.css

@@ -25,8 +25,8 @@ dialog.dialog {
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--color-surface-xxl);
-  color: var(--color-surface-xxd);
+  background: var(--surface-bg);
+  color: var(--surface-text);
   max-block-size: calc(100vh - 2rem);
 
   &::backdrop {

package/assets/css/patterns/drawer.css

@@ -15,8 +15,8 @@
   padding: var(--_p);
   border: var(--_b);
   box-shadow: var(--_ds);
-  background: var(--color-surface-xxl);
-  color: var(--color-surface-xxd);
+  background: var(--surface-bg);
+  color: var(--surface-text);
   max-inline-size: none;
   max-block-size: none;
 

package/assets/css/patterns/forms.css

@@ -32,7 +32,7 @@
 
   .form-group__error {
     font-size: var(--form-error-size, 0.75rem);
-    color: var(--color-danger-d);
+    color: var(--color-danger-bold);
     display: flex;
     align-items: center;
     gap: 0.25rem;
@@ -87,7 +87,7 @@ fieldset.fieldset,
   border: var(--_b);
   border-radius: var(--_br);
   padding: var(--_p);
-  background: var(--color-surface-xxl);
+  background: var(--surface-bg);
 }
 
 /* ── Input group — input flanked by icons/addons ───────────────────────────── */
@@ -171,7 +171,7 @@ fieldset.fieldset,
     block-size: var(--_check-size);
     border: var(--_b);
     border-radius: var(--_br);
-    background: var(--color-surface-xxl);
+    background: var(--surface-bg);
     color: #fff;
     display: flex;
     align-items: center;
@@ -194,8 +194,8 @@ fieldset.fieldset,
   }
 
   input:checked + .custom-check__box {
-    background: var(--color-brand-primary);
-    border-color: var(--color-brand-primary);
+    background: var(--brand-primary-solid);
+    border-color: var(--brand-primary-solid);
 
     .custom-check__indicator {
       opacity: 1;
@@ -204,7 +204,7 @@ fieldset.fieldset,
   }
 
   input:focus-visible + .custom-check__box {
-    outline: 2px solid var(--check-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--check-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 
@@ -257,7 +257,7 @@ fieldset.fieldset,
     inline-size: var(--_switch-width);
     block-size: var(--_switch-height);
     border-radius: var(--br-switch-track, var(--br-pill, 999px));
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
     transition: background-color 0.2s ease;
   }
 
@@ -275,7 +275,7 @@ fieldset.fieldset,
   }
 
   input:checked + .switch__track {
-    background: var(--color-brand-primary);
+    background: var(--brand-primary-solid);
 
     .switch__thumb {
       inset-inline-start: calc(100% - var(--_switch-thumb-size) - 2px);
@@ -283,7 +283,7 @@ fieldset.fieldset,
   }
 
   input:focus-visible + .switch__track {
-    outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 
@@ -329,7 +329,7 @@ select.custom-select {
   cursor: pointer;
 
   &:focus-visible {
-    outline: 2px solid var(--select-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--select-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 }

package/assets/css/patterns/icon.css

@@ -57,11 +57,11 @@
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 

package/assets/css/patterns/list.css

@@ -62,7 +62,7 @@
   }
 
   &.list--divided .list__item + .list__item {
-    border-block-start: 1px solid var(--list-divider-color, var(--color-surface-l));
+    border-block-start: 1px solid var(--list-divider-color, var(--color-surface-muted));
   }
 
   &.list--bordered {
@@ -110,7 +110,7 @@
     font-size: 0.75em;
     padding: 0.125rem 0.375rem;
     border-radius: var(--br-count, var(--br-pill, 999px));
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
   }
 
   .facet-list__item--active .facet-list__name {
@@ -140,7 +140,7 @@
     border-radius: var(--_br);
 
     &:focus {
-      outline: 2px solid var(--filter-focus-color, var(--color-brand-primary-l));
+      outline: 2px solid var(--filter-focus-color, var(--color-brand-primary-muted));
       outline-offset: 2px;
     }
   }
@@ -185,7 +185,7 @@
   .filtered-list__match {
     padding-inline: 0.125rem;
     border-radius: 0.125rem;
-    background: var(--color-warning-l);
+    background: var(--color-warning-muted);
   }
 }
 
@@ -239,7 +239,7 @@
     padding: 0.25rem 0.5rem;
     border-radius: var(--br-chip, var(--br-tag, 0.25rem));
     font-size: 0.875rem;
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
   }
 
   .chip-list__chip-remove {
@@ -266,7 +266,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--chip-list-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--chip-list-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 }

package/assets/css/patterns/media.css

@@ -43,7 +43,7 @@
   color: inherit;
 
   &:focus-visible {
-    outline: 2px solid var(--tile-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--tile-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 

package/assets/css/patterns/nav.css

@@ -13,7 +13,7 @@ nav:has(> .nav-items) {
 
 .nav-header {
   padding-bottom: 1rem;
-  border-bottom: 1px solid var(--nav-border-color, var(--color-surface-l));
+  border-bottom: 1px solid var(--nav-border-color, var(--color-surface-muted));
 }
 
 .nav-items {
@@ -49,7 +49,7 @@ nav:has(> .nav-items) {
   flex-direction: column;
   gap: 1rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--nav-border-color, var(--color-surface-l));
+  border-top: 1px solid var(--nav-border-color, var(--color-surface-muted));
 }
 
 /* ── Dropdown submenu ─────────────────────────────────────────────────────── */
@@ -106,7 +106,7 @@ nav:has(> .nav-items) {
     border-radius: 0.375rem;
 
     &:hover {
-      background-color: var(--color-surface-l);
+      background-color: var(--color-surface-muted);
     }
   }
 }
@@ -131,8 +131,8 @@ nav:has(> .nav-items) {
   inset: 0;
   height: 100dvh;
   width: 100%;
-  background: var(--color-surface-xxl);
-  color: var(--color-surface-xxd);
+  background: var(--surface-bg);
+  color: var(--surface-text);
   opacity: 0;
   translate: -100%;
   transition-timing-function: var(--interact-easing, ease);

package/assets/css/patterns/notification.css

@@ -18,8 +18,8 @@
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--color-surface-xxl);
-  color: var(--color-surface-xxd);
+  background: var(--surface-bg);
+  color: var(--surface-text);
   animation: notification-enter 0.3s ease;
 
   &.notification--exiting {
@@ -77,7 +77,7 @@
     inset-block-end: 0;
     inset-inline: 0;
     block-size: 3px;
-    background: var(--color-brand-primary);
+    background: var(--brand-primary-solid);
     border-radius: 0 0 var(--_br) var(--_br);
     transform-origin: left;
     animation: notification-progress var(--notification-duration, 5s) linear forwards;

package/assets/css/patterns/scroll-based.css

@@ -123,7 +123,7 @@
 
   .scroll-progress__bar {
     block-size: 100%;
-    background: var(--scroll-progress-color, var(--color-brand-primary));
+    background: var(--scroll-progress-color, var(--brand-primary-solid));
     transform-origin: left;
     animation: scroll-progress-grow linear;
     animation-timeline: scroll(root);

package/assets/css/patterns/scroll-target.css

@@ -18,7 +18,7 @@
    (deferred.ts) on engines without `scroll-target-group` support. */
 .scroll-target-group a:target-current,
 .scroll-target-group a.is-current {
-  color: var(--scroll-target-active-color, var(--color-brand-primary));
+  color: var(--scroll-target-active-color, var(--brand-primary-solid));
 }
 
 .scroll-target-group--indicator a {
@@ -47,7 +47,7 @@
 .scroll-target-group--bar a:target-current::before,
 .scroll-target-group--indicator a.is-current::before,
 .scroll-target-group--bar a.is-current::before {
-  background-color: var(--scroll-target-active-color, var(--color-brand-primary));
+  background-color: var(--scroll-target-active-color, var(--brand-primary-solid));
 }
 
 .scroll-target-group--bar a {
@@ -107,7 +107,7 @@
 
 .toc-sidebar a:target-current,
 .toc-sidebar a.is-current {
-  color: var(--scroll-target-active-color, var(--color-brand-primary));
+  color: var(--scroll-target-active-color, var(--brand-primary-solid));
   font-weight: 500;
 }
 

package/assets/css/patterns/sitenav.css

@@ -47,11 +47,11 @@
   border-radius: var(--br-control, 0.375rem);
 
   &:hover {
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 }
@@ -73,8 +73,8 @@
   max-inline-size: 100dvw;
   padding: 1.5rem;
   padding-block-start: 3.5rem; /* clearance for the close button */
-  background: var(--color-surface-xxl);
-  color: var(--color-surface-xxd);
+  background: var(--surface-bg);
+  color: var(--surface-text);
   border: none;
   box-shadow: var(--ds-panel);
   overflow-y: auto;
@@ -149,11 +149,11 @@
   border-radius: var(--br-control, 0.375rem);
 
   &:hover {
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 }
@@ -280,8 +280,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--color-surface-xxl);
-      color: var(--color-surface-xxd);
+      background: var(--surface-bg);
+      color: var(--surface-text);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -366,8 +366,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--color-surface-xxl);
-      color: var(--color-surface-xxd);
+      background: var(--surface-bg);
+      color: var(--surface-text);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -453,8 +453,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--color-surface-xxl);
-      color: var(--color-surface-xxd);
+      background: var(--surface-bg);
+      color: var(--surface-text);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -540,8 +540,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--color-surface-xxl);
-      color: var(--color-surface-xxd);
+      background: var(--surface-bg);
+      color: var(--surface-text);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);

package/assets/css/patterns/split-link.css

@@ -38,11 +38,11 @@
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: var(--color-surface-l);
+    background: var(--color-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-l));
+    outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-muted));
     outline-offset: 2px;
   }
 
@@ -71,8 +71,8 @@
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--color-surface-xxl);
-  color: var(--color-surface-xxd);
+  background: var(--surface-bg);
+  color: var(--surface-text);
 }
 
 /* Top-layer popover: anchored + placed via position-area. */

package/assets/css/patterns/tag.css

@@ -41,7 +41,7 @@
   font-weight: 600;
   line-height: 1;
   border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
-  background: var(--color-danger-d);
+  background: var(--color-danger-bold);
   color: #fff;
 
   &.badge-indicator--dot {

package/assets/css/patterns/text-effects.css

@@ -225,7 +225,7 @@
 
 /* ── Highlight sweep ──────────────────────────────────────────────────────── */
 .text-highlight {
-  --_highlight-color: var(--text-highlight-color, var(--color-warning-l));
+  --_highlight-color: var(--text-highlight-color, var(--color-warning-muted));
   --_highlight-duration: var(--text-highlight-duration, 0.5s);
   --_highlight-pad-block: var(--text-highlight-pad-block, 0.1em);
   --_highlight-pad-inline: var(--text-highlight-pad-inline, 0);

package/assets/css/patterns/tooltip.css

@@ -44,8 +44,8 @@
   padding: var(--_p);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--color-surface-xxd);
-  color: var(--color-surface-xxl);
+  background: var(--surface-text);
+  color: var(--surface-bg);
   font-size: var(--_fs);
   white-space: nowrap;
   max-inline-size: 20rem;

package/assets/css/patterns/tree.css

@@ -18,7 +18,7 @@
   .tree__item > .tree {
     margin-inline-start: var(--tree-indent, 1.5rem);
     padding-inline-start: var(--tree-indent, 1.5rem);
-    border-inline-start: 1px solid var(--color-surface-l);
+    border-inline-start: 1px solid var(--color-surface-muted);
   }
 
   .tree__content,
@@ -115,8 +115,8 @@
       inset-block-start: 0;
       block-size: 1rem;
       inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
-      border-inline-start: 1px solid var(--color-surface-l);
-      border-block-end: 1px solid var(--color-surface-l);
+      border-inline-start: 1px solid var(--color-surface-muted);
+      border-block-end: 1px solid var(--color-surface-muted);
     }
   }