jk-ui-cli 0.0.1

package/stubs/css/jk-ui/utils.stub

@@ -0,0 +1,214 @@
+@utility dropdown-content {
+  @apply grid max-h-[inherit] grid-cols-[auto_1fr] overflow-y-auto overscroll-contain outline-hidden *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1;
+}
+
+@utility dropdown-item-base-vars {
+  --item-px: var(--dropdown-item-px, calc(var(--spacing) * 3));
+  --item-py: var(--dropdown-item-py, calc(var(--spacing) * 1.5));
+}
+
+@utility dropdown-item-base {
+  border-radius: calc(var(--dropdown-radius) - var(--dropdown-padding));
+  @apply outline-none focus:outline rounded-md px-(--item-px) py-(--item-py) ease-linear duration-200 transition-colors;
+}
+
+
+@utility dropdown-item-grid {
+  @apply col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] supports-[grid-template-columns:subgrid]:grid-cols-subgrid;
+}
+
+
+@utility dropdown-item-icon {
+  @apply *:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-(--mr-icon) *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:shrink-0;
+}
+
+@utility dropdown-item-has-description {
+  @apply not-has-[[slot=description]]:*:data-[slot=icon]:text-sm sm:not-has-[[slot=description]]:*:data-[slot=icon]:text-xs
+}
+
+@utility dropdown-item-description {
+  @apply has-[[slot=description]]:*:data-[slot=icon]:h-lh has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:text-sm sm:has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:text-xs
+}
+
+@utility dropdown-item-label {
+  @apply [&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-1;
+}
+
+@utility dropdown-item-avatar {
+  @apply *:data-[slot=avatar]:*:mr-(--mr-icon) *:data-[slot=avatar]:mr-(--mr-icon) has-[[slot=description]]:*:data-[slot=avatar]:row-span-2 *:data-[slot=avatar]:[--avatar-size:--spacing(6)] sm:*:data-[slot=avatar]:[--avatar-size:--spacing(5)];
+}
+
+@utility dropdown-item-force-color {
+  @apply forced-color-adjust-none forced-colors:text-[CanvasText] forced-colors:**:slot-icon:text-[CanvasText] forced-colors:group-focus:**:slot-icon:text-[CanvasText];
+}
+
+@utility dropdown-item-radius {
+  --popover-inner-radius: calc(var(--popover-radius) - var(--popover-padding));
+}
+
+/* animation */
+@utility popover-animation {
+  @apply placement-left:exiting:slide-out-to-right-1 placement-right:exiting:slide-out-to-left-1 placement-top:exiting:slide-out-to-bottom-1 placement-bottom:exiting:slide-out-to-top-1 placement-left:entering:slide-in-from-right-1 placement-right:entering:slide-in-from-left-1 placement-top:entering:slide-in-from-bottom-1 placement-bottom:entering:slide-in-from-top-1;
+
+}
+
+/* dropdown hover and states  */
+@utility dropdown-item-hover {
+  @apply forced-colors:bg-[Highlight] forced-colors:text-[HighlightText];
+
+  &[data-hovered="true"],
+  &[data-focused="true"] {
+    @apply bg-(--dropdown-item-hover-and-select) text-(--dropdown-item-hover-and-select-fg);
+  }
+}
+
+@utility dropdown-item-danger {
+  @apply [--dropdown-item-hover-and-select:var(--dropdown-item-danger-hover-and-select)] [--dropdown-item-hover-and-select-fg:var(--dropdown-item-danger-hover-and-select-fg)] [--dropdown-item-selected-fg:var(--dropdown-item-danger-fg)];
+}
+
+@utility dropdown-item-warning {
+  @apply [--dropdown-item-hover-and-select:var(--dropdown-item-warning-hover-and-select)] [--dropdown-item-hover-and-select-fg:var(--dropdown-item-warning-hover-and-select-fg)] [--dropdown-item-selected-fg:var(--dropdown-item-warning-fg)];
+}
+
+@utility dropdown-item-selected {
+  &[data-selected="true"] {
+    @apply text-(--dropdown-item-selected-fg);
+  }
+}
+
+@utility dropdown-item-disabled {
+  &[data-disabled="true"] {
+    @apply opacity-50 forced-colors:text-[GrayText];
+  }
+}
+
+
+@utility modal-overlay {
+  height: var(--visual-viewport-height, 100vh);
+  @apply fixed inset-0 z-50 bg-gray-800/60
+}
+
+@utility sheet-overlay {
+  @apply fixed inset-0 z-50 h-(--page-height) w-screen overflow-hidden bg-gray-800/60;
+}
+
+@utility modal-overlay-entering {
+  @apply entering:fade-in entering:animate-in entering:duration-300 entering:ease-out;
+}
+
+@utility modal-overlay-exiting {
+  @apply exiting:fade-out exiting:animate-out exiting:ease-in;
+}
+
+@utility modal-overlay-grid {
+  @apply grid grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr]
+}
+
+
+@utility modal-transition-entering {
+  @apply entering:slide-in-from-bottom sm:entering:zoom-in-95 sm:entering:slide-in-from-bottom-0 entering:animate-in entering:duration-300 entering:ease-out;
+}
+
+@utility modal-transition-exiting {
+  @apply exiting:slide-out-to-bottom sm:exiting:zoom-out-95 sm:exiting:slide-out-to-bottom-0 exiting:animate-out exiting:ease-in;
+}
+
+@utility modal-size-fullscreen {
+  :is(& *) {
+    &[data-slot="dialog-body"] {
+      min-height: calc(var(--visual-viewport-height) - var(--visual-viewport-vertical-padding) - var(--dialog-header-height, 0px) - var(--dialog-footer-height, 0px));
+    }
+  }
+
+  @apply sm:rounded-ui sm:[--visual-viewport-vertical-padding:16px]
+}
+
+@utility overlay-on-enterring {
+  @apply entering:fade-in entering:animate-in entering:duration-500
+}
+
+@utility overlay-on-exiting {
+  @apply exiting:fade-out exiting:animate-out exiting:duration-300
+}
+
+@utility dialog-footer {
+  gap: var(--gap, calc(var(--spacing) * 3));
+  padding-top: calc(var(--gutter) - calc(var(--spacing) * 3));
+  @apply p-(--gutter) flex items-center;
+}
+
+
+/* range calendar  */
+@utility cell-selection-selected {
+  @apply fx-selected:bg-(--range-selected-bg)
+}
+
+@utility cell-radius {
+  @apply [td:first-child_&]:rounded-s-ui data-selection-start:rounded-s-ui [td:last-child_&]:rounded-e-ui data-selection-end:rounded-e-ui
+}
+
+
+@utility cell-span-selection-none {
+  @apply group-hover:bg-bg-muted/60 group-data-pressed:bg-bg-muted/80
+}
+
+@utility cell-span-selection-middle-base {
+  color: var(--range-selected-fg) !important;
+  @apply group-hover:bg-(--range-selected-bg-hover) group-data-pressed:bg-(--range-selected-bg-pressed) forced-colors:group-hover:bg-[Highlight]
+}
+
+@utility cell-span-selection-middle-invalid {
+  @apply text-(--range-selected-invalid-fg) group-invalid:group-hover:bg-(--range-selected-invalid-bg-hover) group-invalid:group-data-pressed:bg-(--range-selected-invalid-bg-pressed) forced-colors:group-invalid:group-hover:bg-[Mark]
+}
+
+
+/* disclosure group */
+@utility disclosure-group {
+  @apply [--disclosure-gutter-x:--spacing(4)] [--disclosure-radius:var(--radius-lg)] [--disclosure-collapsed-border:var(--color-border)] [--disclosure-expanded-border:var(--color-muted-fg)/30] [--disclosure-collapsed-bg:var(--color-bg)] [--disclosure-collapsed-fg:var(--color-muted-fg)] [--disclosure-expanded-bg:var(--color-secondary)]/20 [--disclosure-expanded-fg:var(--color-fg)] flex flex-col gap-y-2;
+}
+
+
+@utility disclosure-solid {
+  --bg: ;
+  --text: ;
+  --bg-active: ;
+  --text-active: ;
+}
+
+@utility disclosure-soft {
+  --bg: ;
+  --text: ;
+  --bg-active: ;
+  --text-active: ;
+}
+
+@utility disclosure-outline {
+  --text: ;
+  --border: ;
+  --border-active: ;
+}
+
+@utility disclosure-subtle {
+  --bg: ;
+  --text: ;
+  --border: ;
+  --bg-active: ;
+  --border-active: ;
+}
+
+
+@utility ui-card {
+  @apply p-(--card-padding) rounded-(--card-radius);
+}
+
+@utility inner-radius {
+  border-radius: calc(var(--card-radius) - var(--card-padding));
+}
+
+@utility d-flex-items-center {
+  @apply flex items-center;
+}
+
+@utility d-flex-place-center {
+  @apply flex justify-center items-center;
+}

package/stubs/css/light/buttons.stub

@@ -0,0 +1,114 @@
+@utility btn-solid-primary {
+    --btn-solid-top-shadow: var(--color-primary-500);
+    --btn-solid-bottom-shadow: var(--color-primary-700);
+    --btn-solid-top-shadow-hover: var(--color-primary-600);
+    --btn-solid-bottom-shadow-hover: var(--color-primary-800);
+    --btn-solid-color: var(--color-primary-600);
+    --btn-solid-color-hover: var(--color-primary-700);
+    --btn-solid-color-press: var(--color-primary-800);
+}
+
+@utility btn-solid-secondary {
+    --btn-solid-top-shadow: var(--color-secondary-500);
+    --btn-solid-bottom-shadow: var(--color-secondary-700);
+    --btn-solid-top-shadow-hover: var(--color-secondary-600);
+    --btn-solid-bottom-shadow-hover: var(--color-secondary-800);
+    --btn-solid-color: var(--color-secondary-600);
+    --btn-solid-color-hover: var(--color-secondary-700);
+    --btn-solid-color-press: var(--color-secondary-800);
+}
+
+@utility btn-solid-success {
+    --btn-solid-top-shadow: var(--color-success-500);
+    --btn-solid-bottom-shadow: var(--color-success-700);
+    --btn-solid-top-shadow-hover: var(--color-success-600);
+    --btn-solid-bottom-shadow-hover: var(--color-success-800);
+    --btn-solid-color: var(--color-success-600);
+    --btn-solid-color-hover: var(--color-success-700);
+    --btn-solid-color-press: var(--color-success-800);
+}
+
+@utility btn-solid-neutral {
+    --btn-solid-top-shadow: var(--color-gray-800);
+    --btn-solid-bottom-shadow: var(--color-gray-700);
+    --btn-solid-top-shadow-hover: var(--color-gray-800);
+    --btn-solid-bottom-shadow-hover: var(--color-gray-900);
+    --btn-solid-color: var(--color-gray-900);
+    --btn-solid-color-hover: var(--color-gray-950);
+    --btn-solid-color-press: var(--color-gray-900);
+}    
+
+@utility btn-flexi-white {
+    --btn-flexi-bg: var(--color-white);
+    --btn-flexi-hover-bg: var(--color-gray-100);
+    --btn-flexi-active-bg: var(--color-gray-50);
+    --btn-flexi-shadow-a: var(--color-gray-300);
+    --btn-flexi-shadow-b: var(--color-gray-200);
+    --btn-flexi-shadow-c: var(--color-gray-50);
+    --btn-flexi-shadow-active-a: var(--color-gray-400);
+    --btn-flexi-shadow-active-b: var(--color-gray-300);
+    --btn-flexi-shadow-active-c: var(--color-gray-500);
+}
+
+@utility btn-flexi-neutral {
+    --btn-flexi-bg: var(--color-gray-900);
+    --btn-flexi-hover-bg: var(--color-gray-800);
+    --btn-flexi-active-bg: var(--color-gray-950);
+    --btn-flexi-shadow-a: var(--color-gray-700);
+    --btn-flexi-shadow-b: var(--color-gray-500);
+    --btn-flexi-shadow-c: var(--color-gray-400);
+    --btn-flexi-shadow-active-a: var(--color-gray-700);
+    --btn-flexi-shadow-active-b: var(--color-gray-600);
+    --btn-flexi-shadow-active-c: var(--color-gray-500);
+}
+
+
+@utility btn-outline-danger {
+    --btn-outline-bg: var(--color-danger-50);
+    --btn-outline-color: var(--color-danger-200);
+    --btn-outline-text-color: var(--color-danger-800);
+    --btn-outline-bg-hover: --alpha(var(--color-danger-100) / 60%);
+}
+
+@utility btn-outline-gray {
+    --btn-outline-bg: var(--color-gray-50);
+    --btn-outline-color: var(--color-gray-200);
+    --btn-outline-text-color: var(--color-gray-800);
+    --btn-outline-bg-hover: --alpha(var(--color-gray-100) / 60%);
+}
+
+@utility btn-soft-primary {
+    --btn-soft-bg-color: var(--color-primary-50);
+    --btn-soft-bg-color-hover: --alpha(var(--color-primary-400) / 60%);
+    --btn-soft-bg-color-press: --alpha(var(--color-primary-400) / 40%);
+    --btn-soft-text-color: var(--color-primary-600);
+    --btn-soft-text-color-hover: var(--color-primary-700);
+}
+
+@utility btn-soft-gray {
+    --btn-soft-bg-color: var(--color-gray-50);
+    --btn-soft-bg-color-hover: --alpha(var(--color-gray-200) / 75%);
+    --btn-soft-bg-color-press: --alpha(var(--color-gray-200) / 80%);
+    --btn-soft-text-color: var(--color-gray-800);
+    --btn-soft-text-color-hover: var(--color-gray-900);
+}
+
+@utility btn-ghost-primary {
+    --btn-ghost-bg-color-hover: --alpha(var(--color-primary-100) / 50%);
+    --btn-ghost-bg-color-press: --alpha(var(--color-primary-100) / 70%);
+    --btn-ghost-text-color: var(--color-primary-600);
+    --btn-ghost-text-color-hover: var(--color-primary-700);
+}
+@utility btn-ghost-danger {
+    --btn-ghost-bg-color-hover: --alpha(var(--color-danger-100) / 50%);
+    --btn-ghost-bg-color-press: --alpha(var(--color-danger-100) / 70%);
+    --btn-ghost-text-color: var(--color-danger-600);
+    --btn-ghost-text-color-hover: var(--color-danger-700);
+}
+
+@utility btn-ghost-gray {
+    --btn-ghost-bg-color-hover: --alpha(var(--color-gray-200) / 40%);
+    --btn-ghost-bg-color-press: --alpha(var(--color-gray-200) / 75%);
+    --btn-ghost-text-color: var(--color-gray-800);
+    --btn-ghost-text-color-hover: var(--color-gray-900);
+}

package/stubs/css/light/utilities.stub

@@ -0,0 +1,71 @@
+@utility ui-solid-gray {
+    --ui-solid-bg: var(--color-gray-100);
+    --ui-solid-text: var(--color-gray-700);
+}
+@utility ui-solid-success {
+    --ui-solid-bg: var(--color-success-600);
+    --ui-solid-text: var(--color-white);
+}
+
+@utility ui-solid-warning {
+    --ui-solid-bg: var(--color-warning-600);
+    --ui-solid-text: var(--color-white);
+}
+
+@utility ui-solid-danger {
+    --ui-solid-bg: var(--color-danger-600);
+    --ui-solid-text: var(--color-white);
+}
+
+@utility ui-solid-neutral {
+    --ui-solid-bg: var(--color-gray-900);
+    --ui-solid-text: var(--color-white);
+}
+
+@utility ui-outline-success {
+    --ui-outline-border: var(--color-success-600);
+    --ui-outline-text: var(--color-success-600);
+}
+
+@utility ui-outline-warning {
+    --ui-outline-border: var(--color-warning-600);
+    --ui-outline-text: var(--color-warning-600);
+}
+
+@utility ui-outline-danger {
+    --ui-outline-border: var(--color-danger-600);
+    --ui-outline-text: var(--color-danger-600);
+}
+
+@utility ui-soft-success {
+    --ui-soft-bg: --alpha(var(--color-success-100) / 40%);
+    --ui-soft-text: var(--color-success-600);
+}
+
+@utility ui-soft-warning {
+    --ui-soft-bg: --alpha(var(--color-warning-100) / 40%);
+    --ui-soft-text: var(--color-warning-600);
+}
+
+@utility ui-soft-danger {
+    --ui-soft-bg: --alpha(var(--color-danger-100) / 40%);
+    --ui-soft-text: var(--color-danger-600);
+}
+
+@utility ui-subtle-success {
+    --ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
+    --ui-subtle-text: var(--color-success-600);
+    --ui-subtle-border: var(--color-success-300);
+}
+
+@utility ui-subtle-warning {
+    --ui-subtle-bg: --alpha(var(--color-warning-100) / 40%);
+    --ui-subtle-text: var(--color-warning-600);
+    --ui-subtle-border: var(--color-warning-300);
+}
+
+@utility ui-subtle-danger {
+    --ui-subtle-bg: --alpha(var(--color-danger-100) / 40%);
+    --ui-subtle-text: var(--color-danger-600);
+    --ui-subtle-border: var(--color-danger-300);
+}

package/stubs/css/scroll-config.stub

@@ -0,0 +1,30 @@
+
+@layer base {
+    * {
+        text-rendering: optimizeLegibility;
+        scrollbar-width: thin;
+        scrollbar-color: var(--color-border-strong) transparent;
+    }
+
+    html {
+        font-variation-settings: normal;
+        height: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: transparent;
+        scroll-behavior: smooth;
+    }
+
+    ::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--color-border-strong);
+        border-radius: 4px;
+    }
+}

package/stubs/css/utilities.stub

@@ -0,0 +1,178 @@
+@utility ui-solid-gray {
+    --ui-solid-bg: var(--color-gray-100);
+    --ui-solid-text: var(--color-gray-700);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-gray-900);
+        --ui-solid-text: var(--color-gray-300);
+    }
+}
+@utility ui-solid-success {
+    --ui-solid-bg: var(--color-success-600);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-success-500);
+    }
+}
+
+@utility ui-solid-warning {
+    --ui-solid-bg: var(--color-warning-600);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-warning-500);
+    }
+}
+
+@utility ui-solid-danger {
+    --ui-solid-bg: var(--color-danger-600);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-danger-500);
+    }
+}
+
+@utility ui-solid-neutral {
+    --ui-solid-bg: var(--color-gray-900);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-white);
+        --ui-solid-text: var(--color-gray-900);
+    }
+}
+@utility ui-solid-success {
+    --ui-solid-bg: var(--color-success-600);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-success-500);
+    }
+}
+
+@utility ui-solid-warning {
+    --ui-solid-bg: var(--color-warning-600);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-warning-500);
+    }
+}
+
+@utility ui-solid-danger {
+    --ui-solid-bg: var(--color-danger-600);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-danger-500);
+    }
+}
+
+@utility ui-solid-neutral {
+    --ui-solid-bg: var(--color-gray-900);
+    --ui-solid-text: var(--color-white);
+
+    &:is(.dark *) {
+        --ui-solid-bg: var(--color-white);
+        --ui-solid-text: var(--color-gray-900);
+    }
+}
+
+@utility ui-outline-success {
+    --ui-outline-border: var(--color-success-600);
+    --ui-outline-text: var(--color-success-600);
+
+    &:is(.dark *) {
+        --ui-outline-border: var(--color-secondary-500);
+        --ui-outline-text: var(--color-secondary-500);
+    }
+}
+
+@utility ui-outline-warning {
+    --ui-outline-border: var(--color-warning-600);
+    --ui-outline-text: var(--color-warning-600);
+
+    &:is(.dark *) {
+        --ui-outline-border: var(--color-warning-500);
+        --ui-outline-text: var(--color-warning-500);
+    }
+}
+
+@utility ui-outline-danger {
+    --ui-outline-border: var(--color-danger-600);
+    --ui-outline-text: var(--color-danger-600);
+
+    &:is(.dark *) {
+        --ui-outline-border: var(--color-danger-500);
+        --ui-outline-text: var(--color-danger-500);
+    }
+}
+
+@utility ui-soft-success {
+    --ui-soft-bg: --alpha(var(--color-success-100) / 40%);
+    --ui-soft-text: var(--color-success-600);
+
+    &:is(.dark *) {
+        --ui-soft-bg: --alpha(var(--color-success-900) / 30%);
+        --ui-soft-text: var(--color-success-300);
+    }
+}
+
+@utility ui-soft-warning {
+    --ui-soft-bg: --alpha(var(--color-warning-100) / 40%);
+    --ui-soft-text: var(--color-warning-600);
+
+    &:is(.dark *) {
+        --ui-soft-bg: --alpha(var(--color-warning-900) / 30%);
+        --ui-soft-text: var(--color-warning-300);
+    }
+}
+
+@utility ui-soft-danger {
+    --ui-soft-bg: --alpha(var(--color-danger-100) / 40%);
+    --ui-soft-text: var(--color-danger-600);
+
+    &:is(.dark *) {
+        --ui-soft-bg: --alpha(var(--color-danger-900) / 30%);
+        --ui-soft-text: var(--color-danger-300);
+    }
+}
+
+
+@utility ui-subtle-success {
+    --ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
+    --ui-subtle-text: var(--color-success-600);
+    --ui-subtle-border: var(--color-success-300);
+
+    &:is(.dark *) {
+        --ui-subtle-bg: --alpha(var(--color-success-900) / 30%);
+        --ui-subtle-text: var(--color-success-300);
+        --ui-subtle-border: --alpha(var(--color-success-900) / 60%);
+    }
+}
+
+@utility ui-subtle-warning {
+    --ui-subtle-bg: --alpha(var(--color-warning-100) / 40%);
+    --ui-subtle-text: var(--color-warning-600);
+    --ui-subtle-border: var(--color-warning-300);
+
+    &:is(.dark *) {
+        --ui-subtle-bg: --alpha(var(--color-warning-900) / 30%);
+        --ui-subtle-text: var(--color-warning-300);
+        --ui-subtle-border: --alpha(var(--color-warning-900) / 60%);
+    }
+}
+
+@utility ui-subtle-danger {
+    --ui-subtle-bg: --alpha(var(--color-danger-100) / 40%);
+    --ui-subtle-text: var(--color-danger-600);
+    --ui-subtle-border: var(--color-danger-300);
+
+    &:is(.dark *) {
+        --ui-subtle-bg: --alpha(var(--color-danger-900) / 30%);
+        --ui-subtle-text: var(--color-danger-300);
+        --ui-subtle-border: --alpha(var(--color-danger-900) / 60%);
+    }
+}

package/stubs/rasengan/config.stub

@@ -0,0 +1,9 @@
+import { defineConfig } from "rasengan";
+import { rasengan } from "rasengan/plugin";
+import UnoCSS from "unocss/vite";
+
+export default defineConfig({
+  vite: {
+    plugins: [rasengan(), UnoCSS()],
+  },
+});