@byyuurin/ui 0.0.0

package/dist/theme/tabs.mjs

@@ -0,0 +1,117 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    root: "flex items-center gap-2",
+    list: "relative flex p-1 group",
+    indicator: "absolute transition-all duration-200",
+    trigger: [
+      "group relative inline-flex items-center shrink-0 min-w-0 font-medium rounded-ui-tabs transition-colors",
+      "focus:outline-hidden",
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    ],
+    content: "w-full focus:outline-none",
+    leadingIcon: "shrink-0",
+    label: "truncate"
+  },
+  variants: {
+    variant: {
+      solid: {
+        list: "bg-ui-cb/5 rounded-ui-tabs",
+        trigger: [
+          "data-[state=active]:color-ui-c1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill/80",
+          "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+        ],
+        indicator: "bg-ui-fill/90 rounded-ui-tabs shadow-xs"
+      },
+      soft: {
+        list: "bg-ui-c1 rounded-ui-tabs",
+        trigger: [
+          "data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill",
+          "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+        ],
+        indicator: "bg-ui-fill/10 rounded-ui-tabs shadow-xs"
+      },
+      link: {
+        list: "border-ui-cb/10",
+        indicator: "bg-ui-fill rounded-full",
+        trigger: [
+          "data-[state=active]:color-ui-base focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-base",
+          "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+        ]
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        list: "w-full",
+        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
+        trigger: "justify-center"
+      },
+      vertical: {
+        list: "flex-col",
+        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]",
+        trigger: "flex-1 w-full"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-4"
+      },
+      sm: {
+        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4"
+      },
+      md: {
+        trigger: "px-3 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-5"
+      },
+      lg: {
+        trigger: "px-3 py-2 text-sm gap-2",
+        leadingIcon: "size-5"
+      },
+      xl: {
+        trigger: "px-3 py-2 text-base gap-2",
+        leadingIcon: "size-6"
+      }
+    },
+    full: {
+      true: {
+        trigger: "w-full flex-1"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      variant: ["solid", "soft"],
+      class: {
+        indicator: "inset-y-1"
+      }
+    },
+    {
+      orientation: "horizontal",
+      variant: "link",
+      class: {
+        list: "border-b -mb-px",
+        indicator: "-bottom-px h-px"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: ["solid", "soft"],
+      class: {
+        indicator: "inset-x-1",
+        list: "items-center rounded-[calc(var(--ui-radius-tabs)*0.66)]"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "link",
+      class: {
+        list: "border-s -ms-px",
+        indicator: "-start-px w-px"
+      }
+    }
+  ]
+});

package/dist/theme/toast.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        avatar: string;
+        avatarSize: string;
+        actions: string;
+        progress: string;
+        close: string;
+    };
+    variants: {
+        multiline: {
+            true: {
+                root: string;
+                actions: string;
+            };
+            false: {
+                root: string;
+                actions: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        multiline: {
+            true: {
+                root: string;
+                actions: string;
+            };
+            false: {
+                root: string;
+                actions: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        avatar: string;
+        avatarSize: string;
+        actions: string;
+        progress: string;
+        close: string;
+    }, undefined>;
+};
+export default _default;

package/dist/theme/toast.mjs

@@ -0,0 +1,27 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    root: "relative group overflow-hidden bg-ui-c1 shadow-lg rounded-ui-box ring ring-ui-c2 p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-c2",
+    wrapper: "w-0 flex-1 flex flex-col gap-1",
+    title: "text-base font-medium color-ui-cb",
+    description: "text-sm color-ui-cb/80",
+    icon: "shrink-0 size-6 color-ui-cb",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex flex-wrap gap-1.5 shrink-0",
+    progress: "absolute inset-x-0 bottom-0 h-1 z-[-1] color-ui-base/80 bg-current",
+    close: "p-0.5"
+  },
+  variants: {
+    multiline: {
+      true: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      },
+      false: {
+        root: "items-center",
+        actions: "items-center"
+      }
+    }
+  }
+});

package/dist/theme/toaster.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        viewport: string[];
+        base: string[];
+    };
+    variants: {
+        position: {
+            'top-left': {
+                viewport: string;
+            };
+            'top-center': {
+                viewport: string;
+            };
+            'top-right': {
+                viewport: string;
+            };
+            'bottom-left': {
+                viewport: string;
+            };
+            'bottom-center': {
+                viewport: string;
+            };
+            'bottom-right': {
+                viewport: string;
+            };
+        };
+        swipeDirection: {
+            up: {
+                base: string;
+            };
+            right: {
+                base: string;
+            };
+            down: {
+                base: string;
+            };
+            left: {
+                base: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        position: ("top-left" | "top-center" | "top-right")[];
+        class: {
+            viewport: string;
+            base: string;
+        };
+        swipeDirection?: undefined;
+    } | {
+        position: ("bottom-left" | "bottom-center" | "bottom-right")[];
+        class: {
+            viewport: string;
+            base: string;
+        };
+        swipeDirection?: undefined;
+    } | {
+        swipeDirection: ("right" | "left")[];
+        class: {
+            base: string[];
+            viewport?: undefined;
+        };
+        position?: undefined;
+    } | {
+        swipeDirection: ("up" | "down")[];
+        class: {
+            base: string[];
+            viewport?: undefined;
+        };
+        position?: undefined;
+    })[];
+};
+export default _default;

package/dist/theme/toaster.mjs

@@ -0,0 +1,89 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    viewport: [
+      "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] focus:outline-none",
+      "data-[expanded=true]:h-[var(--height)]"
+    ],
+    base: [
+      "pointer-events-auto absolute inset-x-0 z-[var(--index)] [transform:var(--transform)] transition-all duration-200 ease-out",
+      "[&[data-expanded=false][data-front=false]]:h-[var(--front-height)]",
+      "[&[data-expanded=false][data-front=false]>*]:invisible",
+      "data-[state=closed]:animate-[toast-closed_200ms_ease-in-out]",
+      "[&[data-state=closed][data-expanded=false][data-front=false]]:animate-[toast-collapsed-closed_200ms_ease-in-out]",
+      "data-[swipe=move]:transition-none"
+    ]
+  },
+  variants: {
+    position: {
+      "top-left": {
+        viewport: "left-4"
+      },
+      "top-center": {
+        viewport: "left-1/2 -translate-x-1/2"
+      },
+      "top-right": {
+        viewport: "right-4"
+      },
+      "bottom-left": {
+        viewport: "left-4"
+      },
+      "bottom-center": {
+        viewport: "left-1/2 -translate-x-1/2"
+      },
+      "bottom-right": {
+        viewport: "right-4"
+      }
+    },
+    swipeDirection: {
+      up: {
+        base: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]"
+      },
+      right: {
+        base: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]"
+      },
+      down: {
+        base: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]"
+      },
+      left: {
+        base: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top-left", "top-center", "top-right"],
+      class: {
+        viewport: "top-4",
+        base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      position: ["bottom-left", "bottom-center", "bottom-right"],
+      class: {
+        viewport: "bottom-4",
+        base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      swipeDirection: ["left", "right"],
+      class: {
+        base: [
+          "data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)]",
+          "data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)]",
+          "data-[swipe=cancel]:translate-x-0"
+        ]
+      }
+    },
+    {
+      swipeDirection: ["up", "down"],
+      class: {
+        base: [
+          "data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)]",
+          "data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)]",
+          "data-[swipe=cancel]:translate-y-0"
+        ]
+      }
+    }
+  ]
+});

package/dist/theme/tooltip.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        content: string;
+        arrow: string;
+        text: string;
+    };
+    variants: {
+        [key: string]: {
+            [key: string]: "" | {
+                content?: import("@byyuurin/ui-kit/index").ClassValue;
+                arrow?: import("@byyuurin/ui-kit/index").ClassValue;
+                text?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        [key: string]: {
+            [key: string]: "" | {
+                content?: import("@byyuurin/ui-kit/index").ClassValue;
+                arrow?: import("@byyuurin/ui-kit/index").ClassValue;
+                text?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    }, {
+        content: string;
+        arrow: string;
+        text: string;
+    }, undefined>;
+};
+export default _default;

package/dist/theme/tooltip.mjs

@@ -0,0 +1,8 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    content: "flex items-center gap-1 bg-ui-c1 color-ui-base shadow-sm rounded-ui-base ring ring-ui-base/10 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-ui-c1 stroke-ui-cb/10",
+    text: "truncate"
+  }
+});

package/dist/types/components.d.ts

@@ -0,0 +1,18 @@
+export type * from '../components/Accordion.vue';
+export type * from '../components/App.vue';
+export type * from '../components/App.vue';
+export type * from '../components/Button.vue';
+export type * from '../components/Card.vue';
+export type * from '../components/Checkbox.vue';
+export type * from '../components/Drawer.vue';
+export type * from '../components/Input.vue';
+export type * from '../components/Link.vue';
+export type * from '../components/Modal.vue';
+export type * from '../components/Popover.vue';
+export type * from '../components/RadioGroup.vue';
+export type * from '../components/Select.vue';
+export type * from '../components/Switch.vue';
+export type * from '../components/Tabs.vue';
+export type * from '../components/Toast.vue';
+export type * from '../components/Toaster.vue';
+export type * from '../components/Tooltip.vue';

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import type * as _components from '../components';
+import type * as theme from '../theme';
+import type { PartialTheme } from '../types';
+export * from './components';
+export * from './utils';
+export type ThemeExtension = PartialTheme<typeof theme>;
+export type ComponentName = keyof typeof _components;

package/dist/types/index.mjs

@@ -0,0 +1,2 @@
+export * from "./components.mjs";
+export * from "./utils.mjs";

package/dist/types/utils.d.ts

@@ -0,0 +1,29 @@
+import type { ClassValue, CVReturnType, VariantProps } from '@byyuurin/ui-kit';
+export type HintString<T extends string> = T & (string & {});
+export type MaybeArray<T> = T | T[];
+export type MaybeArrayOfArray<T> = T[] | T[][];
+export type MaybeArrayOfArrayItem<T> = T extends Array<infer V1> ? T extends Array<infer V2> ? V2 : V1 : never;
+export type PartialTheme<T> = {
+    [P in keyof T as T[P] extends undefined ? never : P]?: T[P] extends Array<infer V> ? V extends string ? string : V[] : T[P] extends object ? PartialTheme<T[P]> : T[P] extends string ? string : T[P];
+};
+export type DynamicSlots<T extends {
+    slot?: string;
+}, SlotProps, Slot = T['slot']> = Record<string, SlotProps> & (Slot extends string ? Record<Slot, SlotProps> : Record<string, never>);
+export interface ComponentAttrs<T> {
+    class?: MaybeArray<string | Record<string, boolean>>;
+    ui?: T extends {
+        slots: infer S;
+    } ? {
+        [Slot in keyof S]?: string;
+    } : never;
+}
+export interface StylerBaseProps {
+    class?: ClassValue;
+}
+export type StylerReturnType<T> = T extends CVReturnType<infer V, infer S, infer B> ? ReturnType<CVReturnType<V, S, B>> : never;
+export type Styler<T> = T extends CVReturnType<infer V, any, any> ? [keyof V] extends string[] ? (props: Required<VariantProps<T>> & StylerBaseProps) => StylerReturnType<T> : (props?: StylerBaseProps) => StylerReturnType<T> : never;
+export interface SelectModelValueEmits<T, V, M extends boolean = false, DV = T> {
+    (event: 'update:modelValue', payload: SelectModelValue<T, V, M, DV>): void;
+}
+export type SelectModelValue<T, V, M extends boolean = false, DV = T> = (T extends Record<string, any> ? V extends keyof T ? T[V] : DV : T) extends infer U ? M extends true ? U[] : U : never;
+export type SelectOptionKey<T> = T extends Record<string, any> ? keyof T : string;

package/dist/unocss-preset.d.ts

@@ -0,0 +1,37 @@
+import type { Theme } from '@unocss/preset-mini';
+export interface PresetOptions {
+    /** @default "0rem" */
+    radius?: string;
+    /** @default "[radius]" */
+    radiusButton?: string;
+    /** @default "[radius]" */
+    radiusBox?: string;
+    /** @default "[radius]" */
+    radiusTabs?: string;
+    /**
+     * Base content color
+     * @default "#1f2937"
+     */
+    cb?: string;
+    /**
+     * Base color 1
+     * @default "#ffffff"
+     */
+    c1?: string;
+    /**
+     * Base color 2
+     * @default "#f2f2f2"
+     */
+    c2?: string;
+    /**
+     * Base color 3
+     * @default "#e5e6e6"
+     */
+    c3?: string;
+}
+export declare const cssVarsPrefix = "ui";
+export declare const cssVarsBase: string[];
+export declare const cssVarsDynamic: string[];
+export declare const cssVarsAll: string[];
+declare const _default: import("@unocss/core").PresetFactory<Theme, PresetOptions>;
+export default _default;

package/dist/unocss-preset.mjs

@@ -0,0 +1,164 @@
+import { definePreset } from "@unocss/core";
+import { parseColor, parseCssColor } from "@unocss/preset-mini/utils";
+export const cssVarsPrefix = "ui";
+export const cssVarsBase = ["cb", "c1", "c2", "c3"];
+export const cssVarsDynamic = ["fill", "content"];
+export const cssVarsAll = [...cssVarsBase, ...cssVarsDynamic];
+export default definePreset((options = {}) => {
+  const theme = {
+    colors: {
+      [cssVarsPrefix]: {
+        cb: cssColor(cssVar("cb")),
+        c: {
+          1: cssColor(cssVar("c1")),
+          2: cssColor(cssVar("c2")),
+          3: cssColor(cssVar("c3"))
+        },
+        fill: cssColor(cssVar("fill", cssVar("cb"))),
+        content: cssColor(cssVar("content", cssVar("cb")))
+      }
+    },
+    backgroundColor: {
+      [cssVarsPrefix]: {
+        base: cssColor(cssVar("fill", cssVar("c1")))
+      }
+    },
+    textColor: {
+      [cssVarsPrefix]: {
+        base: cssColor(cssVar("content", cssVar("cb")))
+      }
+    },
+    borderColor: {
+      [cssVarsPrefix]: {
+        base: cssColor(cssVar("fill", cssVar("cb")))
+      }
+    },
+    borderRadius: {
+      [`${cssVarsPrefix}-base`]: cssVar("radius"),
+      [`${cssVarsPrefix}-button`]: cssVar("radius-button", cssVar("radius")),
+      [`${cssVarsPrefix}-box`]: cssVar("radius-box", cssVar("radius")),
+      [`${cssVarsPrefix}-tabs`]: cssVar("radius-tabs", cssVar("radius"))
+    },
+    ringWidth: {
+      DEFAULT: "1px"
+    },
+    shadowColor: {
+      [cssVarsPrefix]: {
+        base: cssColor(cssVar("fill", cssVar("cb")))
+      }
+    },
+    animation: {
+      keyframes: {
+        "fade-in": "{from {opacity: 0;}to {opacity: 1;}}",
+        "fade-out": "{from {opacity: 1;}to {opacity: 0;}}",
+        "scale-in": "{from {opacity: 0;scale: 0.95;}to {opacity: 1;scale: 1;}}",
+        "scale-out": "{from {opacity: 1;scale: 1;}to {opacity: 0;scale: 0.95;}}",
+        "slide-in-from-top": "{from {transform: translateY(-100%);}to {transform: translateY(0);}}",
+        "slide-out-to-top": "{from {transform: translateY(0);}to {transform: translateY(-100%);}}",
+        "slide-in-from-right": "{from {transform: translateX(100%);}to {transform: translateX(0);}}",
+        "slide-out-to-right": "{from {transform: translateX(0);}to {transform: translateX(100%);}}",
+        "slide-in-from-bottom": "{from {transform: translateY(100%);}to {transform: translateY(0);}}",
+        "slide-out-to-bottom": "{from {transform: translateY(0);}to {transform: translateY(100%);}}",
+        "slide-in-from-left": "{from {transform: translateX(-100%);}to {transform: translateX(0);}}",
+        "slide-out-to-left": "{from {transform: translateX(0);}to {transform: translateX(-100%);}}",
+        "slide-in-from-top-and-fade": "{from {opacity: 0;transform: translateY(-4px);}to {opacity: 1;transform: translateY(0);}}",
+        "slide-out-to-top-and-fade": "{from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(-4px);}}",
+        "slide-in-from-right-and-fade": "{from {opacity: 0;transform: translateX(4px);}to {opacity: 1;transform: translateX(0);}}",
+        "slide-out-to-right-and-fade": "{from {opacity: 1;transform: translateX(0);}to {opacity: 0;transform: translateX(4px);}}",
+        "slide-in-from-bottom-and-fade": "{from {opacity: 0;transform: translateY(4px);}to {opacity: 1;transform: translateY(0);}}",
+        "slide-out-to-bottom-and-fade": "{from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(4px);}}",
+        "slide-in-from-left-and-fade": "{from {opacity: 0;transform: translateX(-4px);}to {opacity: 1;transform: translateX(0);}}",
+        "slide-out-to-left-and-fade": "{from {opacity: 1;transform: translateX(0);}to {opacity: 0;transform: translateX(-4px);}}"
+      }
+    }
+  };
+  const resolveRuleValue = (data) => {
+    if (data?.color && data.cssColor?.components) {
+      let value = data.cssColor.components.join(" ");
+      if (!/var\s*\((.+)\)(.*)/.test(data.color))
+        value += ` /* ${data.color} */`;
+      return value;
+    }
+    return null;
+  };
+  return {
+    name: "unocss-preset-ui",
+    theme,
+    rules: [
+      [
+        new RegExp(`^${cssVarsPrefix}-([^/]+)$`),
+        ([_, color], ctx) => {
+          const data = parseColor(color, ctx.theme);
+          const value = resolveRuleValue(data);
+          if (value)
+            return Object.fromEntries(cssVarsDynamic.map((prop) => [`--${cssVarsPrefix}-${prop}`, value]));
+        },
+        { autocomplete: `${cssVarsPrefix}-$colors` }
+      ],
+      [
+        new RegExp(`^${cssVarsPrefix}-(?:(${cssVarsAll.join("|")})-)([^/]+)$`),
+        ([_, prop, color], ctx) => {
+          const data = parseColor(color, ctx.theme);
+          const value = resolveRuleValue(data);
+          if (value)
+            return { [`--${cssVarsPrefix}-${prop}`]: value };
+        },
+        { autocomplete: `${cssVarsPrefix}-(${cssVarsAll.join("|")})-$colors` }
+      ],
+      // overrides
+      [/^rotate-(\d+)$/, ([_, d]) => ({ rotate: `${d}deg` })]
+    ],
+    preflights: [
+      { getCSS: () => createRootCSS(mergeOptions(options)) }
+    ],
+    safelist: Object.keys(theme.animation.keyframes).map((v) => `keyframes-${v}`)
+  };
+});
+function mergeOptions(options) {
+  const defaults = {
+    radius: "0rem",
+    radiusButton: "",
+    radiusBox: "",
+    radiusTabs: "",
+    cb: "#1f2937",
+    c1: "#ffffff",
+    c2: "#f2f2f2",
+    c3: "#e5e6e6"
+  };
+  return {
+    ...defaults,
+    ...options
+  };
+}
+function cssVar(name, ...defaultValue) {
+  return `var(${[`--${cssVarsPrefix}-${name}`, ...defaultValue].join(",")})`;
+}
+function cssColor(...rgb) {
+  return `rgb(${rgb.join(" ")})`;
+}
+function createRootCSS(kv) {
+  const kebabCase = (input) => input.replace(/([A-Z][^A-Z]*)/g, "-$1").replace(/^-/, "").toLowerCase();
+  const join = (input) => input.map((item) => item.endsWith(";") ? item : `${item};`).join("");
+  const css = [
+    // initial
+    `:root{${join(Object.entries(kv).filter(([_, v]) => Boolean(v)).map(([k, v]) => {
+      const name = kebabCase(k);
+      const content = parseCssColor(v)?.components.join(" ") ?? v;
+      return `--${cssVarsPrefix}-${name}:${content}`;
+    }))}}`,
+    // reset
+    `:root{${join([
+      `color:${cssColor(cssVar("cb"))}`
+    ])}}`,
+    `*,::before,::after{${join([
+      `--un-default-border-color:color-mix(in srgb,${cssColor(cssVar("cb"))} 10%,transparent)`,
+      `accent-color:${cssColor(cssVar("fill", cssVar("cb")))}`,
+      `scrollbar-color:color-mix(in srgb,${cssColor(cssVar("cb"))} 25%,transparent) transparent`
+    ])}}`,
+    `*::selection{${join([
+      `color:${cssColor(cssVar("c1"))}`,
+      `background-color:${cssColor(cssVar("fill", cssVar("cb")))}`
+    ])}}`
+  ];
+  return css.join("");
+}