@moduix/react-tailwind 1.0.0

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

@@ -0,0 +1,229 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FolderIcon, FolderOpenIcon, GripIcon, ListRestartIcon, Maximize2Icon, MinusIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RotateCcwIcon, RotateCwIcon, SearchIcon, SquareCenterlineDashedHorizontalIcon, StarIcon, Trash2Icon, UploadIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+function Icons_ChevronLeftIcon(props) {
+    return /*#__PURE__*/ jsx(ChevronLeftIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function Icons_ChevronRightIcon(props) {
+    return /*#__PURE__*/ jsx(ChevronRightIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function Icons_ChevronDownIcon(props) {
+    return /*#__PURE__*/ jsx(ChevronDownIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function Icons_ChevronUpIcon(props) {
+    return /*#__PURE__*/ jsx(ChevronUpIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function ChevronUpDownIcon(props) {
+    return /*#__PURE__*/ jsx(ChevronsUpDownIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function Icons_PlusIcon(props) {
+    return /*#__PURE__*/ jsx(PlusIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function Icons_MinusIcon(props) {
+    return /*#__PURE__*/ jsx(MinusIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function Icons_CheckIcon(props) {
+    return /*#__PURE__*/ jsx(CheckIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function CloseIcon(props) {
+    return /*#__PURE__*/ jsx(XIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function IndeterminateIcon(props) {
+    return /*#__PURE__*/ jsx(MinusIcon, {
+        "aria-hidden": "true",
+        focusable: "false",
+        strokeWidth: 3,
+        ...props
+    });
+}
+function CalendarIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M8 2v4"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M16 2v4"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                width: "18",
+                height: "18",
+                x: "3",
+                y: "4",
+                rx: "2"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M3 10h18"
+            })
+        ]
+    });
+}
+function RestoreIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("rect", {
+                width: "14",
+                height: "14",
+                x: "3",
+                y: "3",
+                rx: "2"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M7 21h10a2 2 0 0 0 2-2V9"
+            })
+        ]
+    });
+}
+function PipetteIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "m2 22 1-1h3l9-9"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M3 21v-3l9-9"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "m9 12 6 6"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "m12 9 3-3 3 3-3 3"
+            })
+        ]
+    });
+}
+function SeparatorMarkIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        viewBox: "0 0 16 4",
+        fill: "none",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M1 2h14",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            strokeLinecap: "round"
+        })
+    });
+}
+function ScrubCursorIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        viewBox: "0 0 25 14",
+        fill: "black",
+        stroke: "white",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M19.5 5.5H6.5V2L1 7l5.5 5v-3.5h13V12L25 7l-5.5-5z"
+        })
+    });
+}
+function PopupArrowIcon({ fillClassName, outerStrokeClassName, innerStrokeClassName, ...props }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 20 10",
+        fill: "none",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+                className: fillClassName
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+                className: outerStrokeClassName
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+                className: innerStrokeClassName
+            })
+        ]
+    });
+}
+export { CalendarIcon, ChevronUpDownIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FolderIcon, FolderOpenIcon, GripIcon, Icons_CheckIcon as CheckIcon, Icons_ChevronDownIcon as ChevronDownIcon, Icons_ChevronLeftIcon as ChevronLeftIcon, Icons_ChevronRightIcon as ChevronRightIcon, Icons_ChevronUpIcon as ChevronUpIcon, Icons_MinusIcon as MinusIcon, Icons_PlusIcon as PlusIcon, IndeterminateIcon, ListRestartIcon as RestartIcon, Maximize2Icon as MaximizeIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PopupArrowIcon, RestoreIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SearchIcon, SeparatorMarkIcon, SquareCenterlineDashedHorizontalIcon as FlipHorizontalIcon, StarIcon as RatingStarIcon, Trash2Icon as TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon };

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, RestartIcon, RestoreIcon, SearchIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, PopupArrowIcon, RatingStarIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SeparatorMarkIcon, 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, PopupArrowIcon, RatingStarIcon, RestartIcon, RestoreIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SearchIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon } from "./Icons.js";

package/dist/internal/overlayPortal.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, RefObject } from 'react';
+type OverlayPortalProps = {
+    portalled?: boolean;
+    portalRef?: RefObject<HTMLElement | null>;
+};
+declare function OverlayPortalProvider({ children, ...value }: OverlayPortalProps & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+declare function OverlayPortal({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export { OverlayPortal, OverlayPortalProvider };
+export type { OverlayPortalProps };

package/dist/internal/overlayPortal.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { createContext, useContext } from "react";
+const OverlayPortalContext = /*#__PURE__*/ createContext({});
+function OverlayPortalProvider({ children, ...value }) {
+    return /*#__PURE__*/ jsx(OverlayPortalContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function OverlayPortal({ children }) {
+    const { portalled = true, portalRef } = useContext(OverlayPortalContext);
+    return /*#__PURE__*/ jsx(Portal, {
+        disabled: !portalled,
+        container: portalRef,
+        children: children
+    });
+}
+export { OverlayPortal, OverlayPortalProvider };

package/dist/locale.d.ts

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

package/dist/locale.js

@@ -0,0 +1 @@
+export { LocaleProvider, useLocaleContext } from "@ark-ui/react/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);
+  }
+}