@moduix/solid-tailwind 1.0.0

package/dist/internal/icons/ui/Icons.js

@@ -0,0 +1,115 @@
+import { createComponent, mergeProps, spread, template } from "solid-js/web";
+import check from "lucide-solid/icons/check";
+import chevron_down from "lucide-solid/icons/chevron-down";
+import chevron_left from "lucide-solid/icons/chevron-left";
+import chevron_right from "lucide-solid/icons/chevron-right";
+import chevron_up from "lucide-solid/icons/chevron-up";
+import chevrons_up_down from "lucide-solid/icons/chevrons-up-down";
+import minus from "lucide-solid/icons/minus";
+import plus from "lucide-solid/icons/plus";
+import x from "lucide-solid/icons/x";
+var _tmpl$ = /*#__PURE__*/ template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width=18 height=18 x=3 y=4 rx=2></rect><path d="M3 10h18">'), _tmpl$2 = /*#__PURE__*/ template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=14 x=3 y=3 rx=2></rect><path d="M7 21h10a2 2 0 0 0 2-2V9">'), _tmpl$3 = /*#__PURE__*/ template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="m2 22 1-1h3l9-9"></path><path d="M3 21v-3l9-9"></path><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9"></path><path d="m9 12 6 6"></path><path d="m12 9 3-3 3 3-3 3">'), _tmpl$4 = /*#__PURE__*/ template('<svg viewBox="0 0 16 4"fill=none><path d="M1 2h14"stroke=currentColor stroke-width=1.6 stroke-linecap=round>');
+const accessibilityProps = {
+    'aria-hidden': 'true',
+    focusable: 'false'
+};
+function ChevronLeftIcon(props) {
+    return createComponent(chevron_left, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function ChevronRightIcon(props) {
+    return createComponent(chevron_right, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function ChevronDownIcon(props) {
+    return createComponent(chevron_down, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function ChevronUpIcon(props) {
+    return createComponent(chevron_up, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function ChevronUpDownIcon(props) {
+    return createComponent(chevrons_up_down, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function PlusIcon(props) {
+    return createComponent(plus, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function MinusIcon(props) {
+    return createComponent(minus, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function CheckIcon(props) {
+    return createComponent(check, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function CloseIcon(props) {
+    return createComponent(x, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function IndeterminateIcon(props) {
+    return createComponent(minus, mergeProps(accessibilityProps, {
+        strokeWidth: 3
+    }, props));
+}
+function CalendarIcon(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(accessibilityProps, props), true, true);
+        return _el$;
+    })();
+}
+function RestoreIcon(props) {
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(accessibilityProps, props), true, true);
+        return _el$2;
+    })();
+}
+function PipetteIcon(props) {
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        spread(_el$3, mergeProps(accessibilityProps, props), true, true);
+        return _el$3;
+    })();
+}
+function SeparatorMarkIcon(props) {
+    return (()=>{
+        var _el$4 = _tmpl$4();
+        spread(_el$4, mergeProps(accessibilityProps, props), true, true);
+        return _el$4;
+    })();
+}
+export { default as CopyIcon } from "lucide-solid/icons/copy";
+export { default as EyeClosedIcon } from "lucide-solid/icons/eye-closed";
+export { default as EyeIcon } from "lucide-solid/icons/eye";
+export { default as FileIcon } from "lucide-solid/icons/file";
+export { default as FlipHorizontalIcon } from "lucide-solid/icons/square-centerline-dashed-horizontal";
+export { default as FolderIcon } from "lucide-solid/icons/folder";
+export { default as FolderOpenIcon } from "lucide-solid/icons/folder-open";
+export { default as GripIcon } from "lucide-solid/icons/grip";
+export { default as RestartIcon } from "lucide-solid/icons/list-restart";
+export { default as MaximizeIcon } from "lucide-solid/icons/maximize-2";
+export { default as PauseIcon } from "lucide-solid/icons/pause";
+export { default as PencilIcon } from "lucide-solid/icons/pencil";
+export { default as PlayIcon } from "lucide-solid/icons/play";
+export { default as RatingStarIcon } from "lucide-solid/icons/star";
+export { default as RotateCcwIcon } from "lucide-solid/icons/rotate-ccw";
+export { default as RotateCwIcon } from "lucide-solid/icons/rotate-cw";
+export { default as SearchIcon } from "lucide-solid/icons/search";
+export { default as TrashIcon } from "lucide-solid/icons/trash";
+export { default as UploadIcon } from "lucide-solid/icons/upload";
+export { default as ZoomInIcon } from "lucide-solid/icons/zoom-in";
+export { default as ZoomOutIcon } from "lucide-solid/icons/zoom-out";
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, IndeterminateIcon, MinusIcon, PipetteIcon, PlusIcon, RestoreIcon, SeparatorMarkIcon };

package/dist/internal/icons/ui/Icons.jsx

@@ -0,0 +1,93 @@
+import "lucide-solid/icons/check";
+import "lucide-solid/icons/chevron-down";
+import "lucide-solid/icons/chevron-left";
+import "lucide-solid/icons/chevron-right";
+import "lucide-solid/icons/chevron-up";
+import "lucide-solid/icons/chevrons-up-down";
+import "lucide-solid/icons/minus";
+import "lucide-solid/icons/plus";
+import "lucide-solid/icons/x";
+const accessibilityProps = {
+    'aria-hidden': 'true',
+    focusable: 'false'
+};
+function ChevronLeftIcon(props) {
+    return <chevron_left {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function ChevronRightIcon(props) {
+    return <chevron_right {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function ChevronDownIcon(props) {
+    return <chevron_down {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function ChevronUpIcon(props) {
+    return <chevron_up {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function ChevronUpDownIcon(props) {
+    return <chevrons_up_down {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function PlusIcon(props) {
+    return <plus {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function MinusIcon(props) {
+    return <minus {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function CheckIcon(props) {
+    return <check {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function CloseIcon(props) {
+    return <x {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function IndeterminateIcon(props) {
+    return <minus {...accessibilityProps} strokeWidth={3} {...props}/>;
+}
+function CalendarIcon(props) {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" {...accessibilityProps} {...props}>
+      <path d="M8 2v4"/>
+      <path d="M16 2v4"/>
+      <rect width="18" height="18" x="3" y="4" rx="2"/>
+      <path d="M3 10h18"/>
+    </svg>;
+}
+function RestoreIcon(props) {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" {...accessibilityProps} {...props}>
+      <rect width="14" height="14" x="3" y="3" rx="2"/>
+      <path d="M7 21h10a2 2 0 0 0 2-2V9"/>
+    </svg>;
+}
+function PipetteIcon(props) {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" {...accessibilityProps} {...props}>
+      <path d="m2 22 1-1h3l9-9"/>
+      <path d="M3 21v-3l9-9"/>
+      <path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9"/>
+      <path d="m9 12 6 6"/>
+      <path d="m12 9 3-3 3 3-3 3"/>
+    </svg>;
+}
+function SeparatorMarkIcon(props) {
+    return <svg viewBox="0 0 16 4" fill="none" {...accessibilityProps} {...props}>
+      <path d="M1 2h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+    </svg>;
+}
+export { default as CopyIcon } from "lucide-solid/icons/copy";
+export { default as EyeClosedIcon } from "lucide-solid/icons/eye-closed";
+export { default as EyeIcon } from "lucide-solid/icons/eye";
+export { default as FileIcon } from "lucide-solid/icons/file";
+export { default as FlipHorizontalIcon } from "lucide-solid/icons/square-centerline-dashed-horizontal";
+export { default as FolderIcon } from "lucide-solid/icons/folder";
+export { default as FolderOpenIcon } from "lucide-solid/icons/folder-open";
+export { default as GripIcon } from "lucide-solid/icons/grip";
+export { default as RestartIcon } from "lucide-solid/icons/list-restart";
+export { default as MaximizeIcon } from "lucide-solid/icons/maximize-2";
+export { default as PauseIcon } from "lucide-solid/icons/pause";
+export { default as PencilIcon } from "lucide-solid/icons/pencil";
+export { default as PlayIcon } from "lucide-solid/icons/play";
+export { default as RatingStarIcon } from "lucide-solid/icons/star";
+export { default as RotateCcwIcon } from "lucide-solid/icons/rotate-ccw";
+export { default as RotateCwIcon } from "lucide-solid/icons/rotate-cw";
+export { default as SearchIcon } from "lucide-solid/icons/search";
+export { default as TrashIcon } from "lucide-solid/icons/trash";
+export { default as UploadIcon } from "lucide-solid/icons/upload";
+export { default as ZoomInIcon } from "lucide-solid/icons/zoom-in";
+export { default as ZoomOutIcon } from "lucide-solid/icons/zoom-out";
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, IndeterminateIcon, MinusIcon, PipetteIcon, PlusIcon, RestoreIcon, SeparatorMarkIcon };

package/dist/internal/icons/ui/index.d.ts

@@ -0,0 +1 @@
+export { CalendarIcon, CheckIcon, CloseIcon, CopyIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronUpDownIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, RatingStarIcon, RestartIcon, RestoreIcon, RotateCcwIcon, RotateCwIcon, SeparatorMarkIcon, SearchIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon, } from './Icons.js';

package/dist/internal/icons/ui/index.js

@@ -0,0 +1 @@
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, RatingStarIcon, RestartIcon, RestoreIcon, RotateCcwIcon, RotateCwIcon, SearchIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon } from "./Icons.js";

package/dist/internal/icons/ui/index.jsx

@@ -0,0 +1 @@
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, RatingStarIcon, RestartIcon, RestoreIcon, RotateCcwIcon, RotateCwIcon, SearchIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon } from "./Icons.jsx";

package/dist/internal/overlayPortal.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'solid-js';
+type PortalRef = HTMLElement | (() => HTMLElement | null | undefined);
+export type OverlayPortalProps = {
+    portalled?: boolean;
+    portalRef?: PortalRef;
+};
+export declare function OverlayPortalProvider(props: OverlayPortalProps & {
+    children: JSX.Element;
+}): JSX.Element;
+export declare function OverlayPortal(props: {
+    children: JSX.Element;
+}): JSX.Element;
+export {};

package/dist/internal/overlayPortal.js

@@ -0,0 +1,39 @@
+import { Portal, createComponent } from "solid-js/web";
+import { Show, createContext, splitProps, useContext } from "solid-js";
+const OverlayPortalContext = createContext({});
+function OverlayPortalProvider(props) {
+    const [local, value] = splitProps(props, [
+        'children'
+    ]);
+    return createComponent(OverlayPortalContext.Provider, {
+        value: value,
+        get children () {
+            return local.children;
+        }
+    });
+}
+function resolvePortalMount(portalRef) {
+    return 'function' == typeof portalRef ? portalRef() ?? void 0 : portalRef;
+}
+function OverlayPortal(props) {
+    const context = useContext(OverlayPortalContext);
+    return createComponent(Show, {
+        get when () {
+            return false !== context.portalled;
+        },
+        get fallback () {
+            return props.children;
+        },
+        get children () {
+            return createComponent(Portal, {
+                get mount () {
+                    return resolvePortalMount(context.portalRef);
+                },
+                get children () {
+                    return props.children;
+                }
+            });
+        }
+    });
+}
+export { OverlayPortal, OverlayPortalProvider };

package/dist/internal/overlayPortal.jsx

@@ -0,0 +1,19 @@
+import { Show, createContext, splitProps, useContext } from "solid-js";
+import { Portal } from "solid-js/web";
+const OverlayPortalContext = createContext({});
+function OverlayPortalProvider(props) {
+    const [local, value] = splitProps(props, [
+        'children'
+    ]);
+    return <OverlayPortalContext.Provider value={value}>{local.children}</OverlayPortalContext.Provider>;
+}
+function resolvePortalMount(portalRef) {
+    return 'function' == typeof portalRef ? portalRef() ?? void 0 : portalRef;
+}
+function OverlayPortal(props) {
+    const context = useContext(OverlayPortalContext);
+    return <Show when={false !== context.portalled} fallback={props.children}>
+      <Portal mount={resolvePortalMount(context.portalRef)}>{props.children}</Portal>
+    </Show>;
+}
+export { OverlayPortal, OverlayPortalProvider };

package/dist/locale.d.ts

@@ -0,0 +1 @@
+export { LocaleProvider, useLocaleContext } from '@ark-ui/solid/locale';

package/dist/locale.js

@@ -0,0 +1 @@
+export { LocaleProvider, useLocaleContext } from "@ark-ui/solid/locale";

package/dist/locale.jsx

@@ -0,0 +1 @@
+export { LocaleProvider, useLocaleContext } from "@ark-ui/solid/locale";

package/dist/presets/contrast.css

@@ -0,0 +1,65 @@
+[data-moduix-theme='contrast'] {
+  --moduix-background: oklch(0.995 0.001 250);
+  --moduix-foreground: oklch(0.145 0.018 250);
+  --moduix-card: oklch(1 0 0);
+  --moduix-card-foreground: oklch(0.145 0.018 250);
+  --moduix-popover: oklch(1 0 0);
+  --moduix-popover-foreground: oklch(0.145 0.018 250);
+  --moduix-primary: oklch(0.46 0.2 255);
+  --moduix-primary-foreground: oklch(1 0 0);
+  --moduix-secondary: oklch(0.94 0.012 250);
+  --moduix-secondary-foreground: oklch(0.18 0.025 250);
+  --moduix-muted: oklch(0.93 0.01 250);
+  --moduix-muted-foreground: oklch(0.39 0.026 250);
+  --moduix-accent: oklch(0.9 0.04 245);
+  --moduix-accent-foreground: oklch(0.16 0.04 250);
+  --moduix-border: oklch(0.72 0.025 250);
+  --moduix-input: oklch(0.62 0.035 250);
+  --moduix-ring: oklch(0.5 0.19 255);
+  --moduix-overlay: oklch(0.09 0.018 250 / 0.38);
+  --moduix-overlay-foreground: oklch(0.09 0.018 250 / 0.12);
+  --moduix-sidebar: oklch(0.965 0.005 250);
+  --moduix-sidebar-foreground: oklch(0.145 0.018 250);
+  --moduix-sidebar-primary: oklch(0.46 0.2 255);
+  --moduix-sidebar-primary-foreground: oklch(1 0 0);
+  --moduix-sidebar-accent: oklch(0.9 0.04 245);
+  --moduix-sidebar-accent-foreground: oklch(0.16 0.04 250);
+  --moduix-sidebar-border: oklch(0.72 0.025 250);
+  --moduix-sidebar-ring: oklch(0.5 0.19 255);
+  --moduix-radius: 0.375rem;
+  --moduix-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.1);
+  --moduix-shadow-md: 0 4px 10px rgb(15 23 42 / 0.14);
+  --moduix-shadow-lg: 0 16px 30px rgb(15 23 42 / 0.18);
+
+  &[data-moduix-color-scheme='dark'],
+  [data-moduix-color-scheme='dark'] {
+    color-scheme: dark;
+    --moduix-background: oklch(0.11 0.018 250);
+    --moduix-foreground: oklch(0.985 0.004 250);
+    --moduix-card: oklch(0.155 0.022 250);
+    --moduix-card-foreground: oklch(0.985 0.004 250);
+    --moduix-popover: oklch(0.155 0.022 250);
+    --moduix-popover-foreground: oklch(0.985 0.004 250);
+    --moduix-primary: oklch(0.76 0.13 255);
+    --moduix-primary-foreground: oklch(0.12 0.02 250);
+    --moduix-secondary: oklch(0.24 0.026 250);
+    --moduix-secondary-foreground: oklch(0.985 0.004 250);
+    --moduix-muted: oklch(0.225 0.024 250);
+    --moduix-muted-foreground: oklch(0.76 0.018 250);
+    --moduix-accent: oklch(0.3 0.06 250);
+    --moduix-accent-foreground: oklch(0.985 0.004 250);
+    --moduix-border: oklch(0.8 0.025 250 / 0.34);
+    --moduix-input: oklch(0.82 0.025 250 / 0.42);
+    --moduix-ring: oklch(0.74 0.13 255);
+    --moduix-overlay: oklch(0.04 0.014 250 / 0.84);
+    --moduix-overlay-foreground: oklch(0.985 0.004 250 / 0.12);
+    --moduix-sidebar: oklch(0.13 0.02 250);
+    --moduix-sidebar-foreground: oklch(0.985 0.004 250);
+    --moduix-sidebar-primary: oklch(0.76 0.13 255);
+    --moduix-sidebar-primary-foreground: oklch(0.12 0.02 250);
+    --moduix-sidebar-accent: oklch(0.3 0.06 250);
+    --moduix-sidebar-accent-foreground: oklch(0.985 0.004 250);
+    --moduix-sidebar-border: oklch(0.8 0.025 250 / 0.34);
+    --moduix-sidebar-ring: oklch(0.74 0.13 255);
+  }
+}

package/dist/presets/dense.css

@@ -0,0 +1,78 @@
+[data-moduix-theme='dense'] {
+  --moduix-background: oklch(0.985 0.004 255);
+  --moduix-foreground: oklch(0.185 0.014 255);
+  --moduix-card: oklch(0.998 0.002 255);
+  --moduix-card-foreground: oklch(0.185 0.014 255);
+  --moduix-popover: oklch(0.998 0.002 255);
+  --moduix-popover-foreground: oklch(0.185 0.014 255);
+  --moduix-primary: oklch(0.48 0.16 255);
+  --moduix-primary-foreground: oklch(0.99 0.002 255);
+  --moduix-secondary: oklch(0.958 0.009 255);
+  --moduix-secondary-foreground: oklch(0.24 0.02 255);
+  --moduix-muted: oklch(0.952 0.008 255);
+  --moduix-muted-foreground: oklch(0.47 0.02 255);
+  --moduix-accent: oklch(0.925 0.02 255);
+  --moduix-accent-foreground: oklch(0.22 0.025 255);
+  --moduix-border: oklch(0.88 0.015 255);
+  --moduix-input: oklch(0.84 0.018 255);
+  --moduix-ring: oklch(0.56 0.14 255);
+  --moduix-overlay: oklch(0.16 0.02 255 / 0.24);
+  --moduix-overlay-foreground: oklch(0.16 0.02 255 / 0.08);
+  --moduix-sidebar: oklch(0.972 0.007 255);
+  --moduix-sidebar-foreground: oklch(0.185 0.014 255);
+  --moduix-sidebar-primary: oklch(0.48 0.16 255);
+  --moduix-sidebar-primary-foreground: oklch(0.99 0.002 255);
+  --moduix-sidebar-accent: oklch(0.925 0.02 255);
+  --moduix-sidebar-accent-foreground: oklch(0.22 0.025 255);
+  --moduix-sidebar-border: oklch(0.88 0.015 255);
+  --moduix-sidebar-ring: oklch(0.56 0.14 255);
+  --moduix-radius: 0.45rem;
+  --moduix-spacing-1: 3px;
+  --moduix-spacing-2: 6px;
+  --moduix-spacing-3: 10px;
+  --moduix-spacing-4: 14px;
+  --moduix-spacing-5: 18px;
+  --moduix-spacing-6: 22px;
+  --moduix-spacing-8: 28px;
+  --moduix-spacing-10: 36px;
+  --moduix-size-xs: 22px;
+  --moduix-size-sm: 30px;
+  --moduix-size-md: 34px;
+  --moduix-size-lg: 38px;
+  --moduix-size-xl: 44px;
+  --moduix-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
+  --moduix-shadow-md: 0 3px 8px rgb(15 23 42 / 0.1);
+  --moduix-shadow-lg: 0 12px 24px rgb(15 23 42 / 0.12);
+
+  &[data-moduix-color-scheme='dark'],
+  [data-moduix-color-scheme='dark'] {
+    color-scheme: dark;
+    --moduix-background: oklch(0.16 0.014 255);
+    --moduix-foreground: oklch(0.97 0.003 255);
+    --moduix-card: oklch(0.205 0.016 255);
+    --moduix-card-foreground: oklch(0.97 0.003 255);
+    --moduix-popover: oklch(0.205 0.016 255);
+    --moduix-popover-foreground: oklch(0.97 0.003 255);
+    --moduix-primary: oklch(0.76 0.13 255);
+    --moduix-primary-foreground: oklch(0.17 0.018 255);
+    --moduix-secondary: oklch(0.255 0.018 255);
+    --moduix-secondary-foreground: oklch(0.97 0.003 255);
+    --moduix-muted: oklch(0.25 0.016 255);
+    --moduix-muted-foreground: oklch(0.71 0.018 255);
+    --moduix-accent: oklch(0.31 0.03 255);
+    --moduix-accent-foreground: oklch(0.97 0.003 255);
+    --moduix-border: oklch(0.72 0.02 255 / 0.25);
+    --moduix-input: oklch(0.76 0.02 255 / 0.32);
+    --moduix-ring: oklch(0.7 0.12 255);
+    --moduix-overlay: oklch(0.1 0.02 255 / 0.78);
+    --moduix-overlay-foreground: oklch(0.97 0.003 255 / 0.09);
+    --moduix-sidebar: oklch(0.19 0.016 255);
+    --moduix-sidebar-foreground: oklch(0.97 0.003 255);
+    --moduix-sidebar-primary: oklch(0.76 0.13 255);
+    --moduix-sidebar-primary-foreground: oklch(0.17 0.018 255);
+    --moduix-sidebar-accent: oklch(0.31 0.03 255);
+    --moduix-sidebar-accent-foreground: oklch(0.97 0.003 255);
+    --moduix-sidebar-border: oklch(0.72 0.02 255 / 0.25);
+    --moduix-sidebar-ring: oklch(0.7 0.12 255);
+  }
+}

package/dist/presets/soft.css

@@ -0,0 +1,77 @@
+[data-moduix-theme='soft'] {
+  --moduix-background: oklch(0.985 0.012 320);
+  --moduix-foreground: oklch(0.225 0.024 315);
+  --moduix-card: oklch(0.998 0.004 320);
+  --moduix-card-foreground: oklch(0.225 0.024 315);
+  --moduix-popover: oklch(0.998 0.004 320);
+  --moduix-popover-foreground: oklch(0.225 0.024 315);
+  --moduix-primary: oklch(0.54 0.18 305);
+  --moduix-primary-foreground: oklch(0.99 0.004 320);
+  --moduix-secondary: oklch(0.958 0.018 320);
+  --moduix-secondary-foreground: oklch(0.3 0.04 310);
+  --moduix-muted: oklch(0.95 0.016 320);
+  --moduix-muted-foreground: oklch(0.5 0.035 315);
+  --moduix-accent: oklch(0.92 0.04 315);
+  --moduix-accent-foreground: oklch(0.29 0.05 305);
+  --moduix-border: oklch(0.88 0.025 320);
+  --moduix-input: oklch(0.84 0.03 320);
+  --moduix-ring: oklch(0.61 0.15 305);
+  --moduix-overlay: oklch(0.22 0.035 310 / 0.22);
+  --moduix-overlay-foreground: oklch(0.22 0.035 310 / 0.08);
+  --moduix-sidebar: oklch(0.975 0.014 320);
+  --moduix-sidebar-foreground: oklch(0.225 0.024 315);
+  --moduix-sidebar-primary: oklch(0.54 0.18 305);
+  --moduix-sidebar-primary-foreground: oklch(0.99 0.004 320);
+  --moduix-sidebar-accent: oklch(0.92 0.04 315);
+  --moduix-sidebar-accent-foreground: oklch(0.29 0.05 305);
+  --moduix-sidebar-border: oklch(0.88 0.025 320);
+  --moduix-sidebar-ring: oklch(0.61 0.15 305);
+  --moduix-radius: 1rem;
+  --moduix-spacing-2: 9px;
+  --moduix-spacing-3: 14px;
+  --moduix-spacing-4: 18px;
+  --moduix-spacing-5: 22px;
+  --moduix-spacing-6: 28px;
+  --moduix-spacing-8: 36px;
+  --moduix-spacing-10: 44px;
+  --moduix-size-xs: 26px;
+  --moduix-size-sm: 34px;
+  --moduix-size-md: 40px;
+  --moduix-size-lg: 44px;
+  --moduix-size-xl: 52px;
+  --moduix-shadow-sm: 0 2px 6px rgb(97 35 107 / 0.08);
+  --moduix-shadow-md: 0 8px 18px rgb(97 35 107 / 0.12);
+  --moduix-shadow-lg: 0 18px 38px rgb(97 35 107 / 0.16);
+
+  &[data-moduix-color-scheme='dark'],
+  [data-moduix-color-scheme='dark'] {
+    color-scheme: dark;
+    --moduix-background: oklch(0.17 0.018 315);
+    --moduix-foreground: oklch(0.972 0.006 320);
+    --moduix-card: oklch(0.22 0.022 315);
+    --moduix-card-foreground: oklch(0.972 0.006 320);
+    --moduix-popover: oklch(0.22 0.022 315);
+    --moduix-popover-foreground: oklch(0.972 0.006 320);
+    --moduix-primary: oklch(0.78 0.13 305);
+    --moduix-primary-foreground: oklch(0.23 0.026 315);
+    --moduix-secondary: oklch(0.285 0.03 315);
+    --moduix-secondary-foreground: oklch(0.972 0.006 320);
+    --moduix-muted: oklch(0.275 0.026 315);
+    --moduix-muted-foreground: oklch(0.74 0.03 320);
+    --moduix-accent: oklch(0.34 0.06 310);
+    --moduix-accent-foreground: oklch(0.972 0.006 320);
+    --moduix-border: oklch(0.76 0.035 320 / 0.24);
+    --moduix-input: oklch(0.76 0.035 320 / 0.3);
+    --moduix-ring: oklch(0.74 0.11 305);
+    --moduix-overlay: oklch(0.1 0.02 315 / 0.8);
+    --moduix-overlay-foreground: oklch(0.972 0.006 320 / 0.1);
+    --moduix-sidebar: oklch(0.2 0.022 315);
+    --moduix-sidebar-foreground: oklch(0.972 0.006 320);
+    --moduix-sidebar-primary: oklch(0.78 0.13 305);
+    --moduix-sidebar-primary-foreground: oklch(0.23 0.026 315);
+    --moduix-sidebar-accent: oklch(0.34 0.06 310);
+    --moduix-sidebar-accent-foreground: oklch(0.972 0.006 320);
+    --moduix-sidebar-border: oklch(0.76 0.035 320 / 0.24);
+    --moduix-sidebar-ring: oklch(0.74 0.11 305);
+  }
+}