@lazar-ui/kit 0.1.0 → 0.2.2

package/dist/button.js

@@ -1,46 +1,52 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import { c as u } from "./clsx-OuTLNxxd.mjs";
-import { g as s } from "./getVariantClassName-D7Nhpuec.mjs";
-import './button.css';const f = "Button", v = "_root_yed10_21", z = "_modeFilled_yed10_32", g = "_variantPrimary_yed10_32", h = "_pressed_yed10_36", S = "_variantSecondary_yed10_42", b = "_variantDanger_yed10_52", x = "_disabled_yed10_62", N = "_modeOutlined_yed10_69", W = "_modeText_yed10_94", C = "_fullWidth_yed10_118", D = "_sizeSm_yed10_121", L = "_sizeMd_yed10_128", M = "_sizeLg_yed10_135", e = {
-  root: v,
-  modeFilled: z,
-  variantPrimary: g,
-  pressed: h,
-  variantSecondary: S,
-  variantDanger: b,
-  disabled: x,
-  modeOutlined: N,
-  modeText: W,
-  fullWidth: C,
-  sizeSm: D,
-  sizeMd: L,
-  sizeLg: M
-}, P = (a) => {
+import { I as v } from "./Icon-flib0kme.mjs";
+import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
+import './button.css';const y = "Button", h = "_root_26zpg_21", x = "_modeFilled_26zpg_32", S = "_variantPrimary_26zpg_32", b = "_pressed_26zpg_36", N = "_variantSecondary_26zpg_42", W = "_variantDanger_26zpg_52", C = "_disabled_26zpg_62", D = "_modeOutlined_26zpg_69", L = "_modeText_26zpg_94", M = "_fullWidth_26zpg_118", P = "_sizeSm_26zpg_121", F = "_sizeMd_26zpg_128", I = "_sizeLg_26zpg_135", O = "_icon_26zpg_143", e = {
+  root: h,
+  modeFilled: x,
+  variantPrimary: S,
+  pressed: b,
+  variantSecondary: N,
+  variantDanger: W,
+  disabled: C,
+  modeOutlined: D,
+  modeText: L,
+  fullWidth: M,
+  sizeSm: P,
+  sizeMd: F,
+  sizeLg: I,
+  icon: O
+}, T = (a) => {
   const {
-    children: d,
-    disabled: t = !1,
-    fullWidth: i = !1,
-    mode: n = "filled",
-    onClick: r,
-    size: _ = "md",
-    variant: l = "primary",
+    children: t,
+    disabled: i = !1,
+    fullWidth: r = !1,
+    icon: n,
+    mode: d = "filled",
+    onClick: _,
+    size: l = "md",
+    variant: c = "primary",
     pressed: m,
-    as: c = "button",
-    ...y
-  } = a, p = u(
+    as: p = "button",
+    ...z
+  } = a, g = u(
     e.root,
-    s("size", _, e),
-    s("variant", l, e),
-    s("mode", n, e),
+    o("size", l, e),
+    o("variant", c, e),
+    o("mode", d, e),
     {
-      [e.fullWidth]: i,
+      [e.fullWidth]: r,
       [e.pressed]: m,
-      [e.disabled]: t
+      [e.disabled]: i
     }
   );
-  return /* @__PURE__ */ o(c, { className: p, disabled: t, onClick: r, ...y, children: d && /* @__PURE__ */ o("span", { children: d }) });
+  return /* @__PURE__ */ f(p, { className: g, disabled: i, onClick: _, ...z, children: [
+    n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(v, { name: n, size: 16 }) }),
+    t && /* @__PURE__ */ s("span", { children: t })
+  ] });
 };
-P.displayName = f;
+T.displayName = y;
 export {
-  P as Button
+  T as Button
 };

package/dist/card.css

@@ -1 +1 @@
-:root{--card-radius: var(--radius-3)}._root_1cztt_5{background:var(--color-background-primary);border-radius:var(--card-radius);display:flex;flex-direction:column;width:100%}._paddingNone_1cztt_13{padding:0}._paddingSm_1cztt_17{padding:var(--space-3)}._paddingMd_1cztt_21{padding:var(--space-5)}._paddingLg_1cztt_25{padding:var(--space-7)}._variantElevated_1cztt_29{box-shadow:var(--shadow-sm)}._variantFilled_1cztt_33{background:var(--color-background-secondary)}._variantOutlined_1cztt_37{border:1px solid var(--color-border-primary)}
+:root{--card-radius: var(--lui-radius-3)}._root_r1od3_5{background:var(--lui-color-background-primary);border-radius:var(--card-radius);display:flex;flex-direction:column;width:100%}._paddingNone_r1od3_13{padding:0}._paddingSm_r1od3_17{padding:var(--lui-space-3)}._paddingMd_r1od3_21{padding:var(--lui-space-5)}._paddingLg_r1od3_25{padding:var(--lui-space-7)}._variantElevated_r1od3_29{box-shadow:var(--lui-shadow-sm)}._variantFilled_r1od3_33{background:var(--lui-color-background-secondary)}._variantOutlined_r1od3_37{border:1px solid var(--lui-color-border-primary)}

package/dist/card.js

@@ -1,24 +1,24 @@
 import { jsx as e } from "react/jsx-runtime";
 import { c as s } from "./clsx-OuTLNxxd.mjs";
 import { g as a } from "./getVariantClassName-D7Nhpuec.mjs";
-import './card.css';const c = "Card", _ = "_root_1cztt_5", l = "_paddingNone_1cztt_13", g = "_paddingSm_1cztt_17", p = "_paddingMd_1cztt_21", v = "_paddingLg_1cztt_25", m = "_variantElevated_1cztt_29", z = "_variantFilled_1cztt_33", N = "_variantOutlined_1cztt_37", t = {
-  root: _,
-  paddingNone: l,
-  paddingSm: g,
-  paddingMd: p,
+import './card.css';const _ = "Card", l = "_root_r1od3_5", g = "_paddingNone_r1od3_13", p = "_paddingSm_r1od3_17", c = "_paddingMd_r1od3_21", v = "_paddingLg_r1od3_25", m = "_variantElevated_r1od3_29", N = "_variantFilled_r1od3_33", u = "_variantOutlined_r1od3_37", d = {
+  root: l,
+  paddingNone: g,
+  paddingSm: p,
+  paddingMd: c,
   paddingLg: v,
   variantElevated: m,
-  variantFilled: z,
-  variantOutlined: N
-}, u = (d) => {
-  const { children: n, padding: i = "md", variant: o = "elevated" } = d, r = s(
-    t.root,
-    a("padding", i, t),
-    a("variant", o, t)
+  variantFilled: N,
+  variantOutlined: u
+}, C = (n) => {
+  const { children: t, padding: o = "md", variant: i = "elevated" } = n, r = s(
+    d.root,
+    a("padding", o, d),
+    a("variant", i, d)
   );
-  return /* @__PURE__ */ e("div", { className: r, children: n });
+  return /* @__PURE__ */ e("div", { className: r, children: t });
 };
-u.displayName = c;
+C.displayName = _;
 export {
-  u as Card
+  C as Card
 };

package/dist/checkbox.css

@@ -1 +1 @@
-:root{--checkbox-bg: var(--color-background-primary);--checkbox-border: var(--color-border-primary);--checkbox-checked-bg: var(--color-background-brand);--checkbox-checked-border: var(--color-background-brand);--checkbox-check-color: var(--color-text-on-brand);--checkbox-disabled-bg: var(--color-background-disabled);--checkbox-disabled-border: var(--color-border-disabled);--checkbox-disabled-check: var(--color-text-disabled);--checkbox-invalid-border: var(--color-border-focus-error);--checkbox-radius: var(--radius-1);--checkbox-gap-sm: var(--space-1);--checkbox-gap-md: var(--space-2)}._root_wvjw9_16{align-items:center;cursor:pointer;display:flex;position:relative;-webkit-user-select:none;user-select:none;width:100%}._root_wvjw9_16._disabled_wvjw9_24{cursor:not-allowed}._root_wvjw9_16._disabled_wvjw9_24 ._checkbox_wvjw9_27:before{background-color:var(--checkbox-disabled-bg);border-color:var(--checkbox-disabled-border)}._root_wvjw9_16._disabled_wvjw9_24 ._input_wvjw9_31:checked+._checkbox_wvjw9_27:after,._root_wvjw9_16._disabled_wvjw9_24._indeterminate_wvjw9_31 ._checkbox_wvjw9_27:after{background-color:var(--checkbox-disabled-check)}._root_wvjw9_16._invalid_wvjw9_34 ._checkbox_wvjw9_27:before{border-color:var(--checkbox-invalid-border)}._root_wvjw9_16._sizeSm_wvjw9_37{gap:var(--checkbox-gap-sm)}._root_wvjw9_16._sizeSm_wvjw9_37 ._checkbox_wvjw9_27{flex-basis:20px;height:20px;width:20px}._root_wvjw9_16._sizeSm_wvjw9_37 ._checkbox_wvjw9_27:after{height:12px;width:12px}._root_wvjw9_16._sizeSm_wvjw9_37 ._label_wvjw9_49{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-sm)}._root_wvjw9_16._sizeMd_wvjw9_54{gap:var(--checkbox-gap-md)}._root_wvjw9_16._sizeMd_wvjw9_54 ._checkbox_wvjw9_27{flex-basis:24px;height:24px;width:24px}._root_wvjw9_16._sizeMd_wvjw9_54 ._checkbox_wvjw9_27:after{height:14px;width:14px}._root_wvjw9_16._sizeMd_wvjw9_54 ._label_wvjw9_49{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);line-height:var(--line-height-md)}._root_wvjw9_16._sizeLg_wvjw9_71{gap:var(--checkbox-gap-md)}._root_wvjw9_16._sizeLg_wvjw9_71 ._checkbox_wvjw9_27{flex-basis:28px;height:28px;width:28px}._root_wvjw9_16._sizeLg_wvjw9_71 ._checkbox_wvjw9_27:after{height:16px;width:16px}._root_wvjw9_16._sizeLg_wvjw9_71 ._label_wvjw9_49{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);line-height:var(--line-height-lg)}._checkbox_wvjw9_27{flex-grow:0;flex-shrink:0;padding:2px;position:relative}._checkbox_wvjw9_27:after{background-color:var(--checkbox-bg);content:"";height:14px;inset:0;margin:auto;position:absolute;width:14px}._checkbox_wvjw9_27:before{background-color:var(--checkbox-bg);border:1px solid var(--checkbox-border);border-radius:var(--checkbox-radius);content:"";inset:2px;position:absolute}._input_wvjw9_31:checked+._checkbox_wvjw9_27:before,._indeterminate_wvjw9_31 ._checkbox_wvjw9_27:before{background-color:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-border)}._input_wvjw9_31:checked+._checkbox_wvjw9_27:after{clip-path:path(evenodd,"M10.9593 2.79299C11.3498 2.40252 11.9828 2.40263 12.3734 2.79299C12.7639 3.18352 12.7639 3.81653 12.3734 4.20706L5.95735 10.624C5.56693 11.0145 4.93383 11.0142 4.54328 10.624L1.62629 7.70706L1.55793 7.63089C1.23758 7.23811 1.26018 6.65911 1.62629 6.29299C1.99241 5.92688 2.57141 5.90429 2.96418 6.22464L3.04035 6.29299L5.24934 8.50198L10.9593 2.79299Z")}._indeterminate_wvjw9_31 ._checkbox_wvjw9_27:after{clip-path:path(evenodd,"M11.0836 6L11.1852 6.00488C11.6896 6.05592 12.0836 6.4821 12.0836 7C12.0836 7.5179 11.6896 7.94408 11.1852 7.99512L11.0836 8H2.91666C2.36437 8 1.91666 7.55228 1.91666 7C1.91666 6.44772 2.36437 6 2.91666 6H11.0836Z")}._input_wvjw9_31{left:0;position:absolute;visibility:hidden}._label_wvjw9_49{color:var(--color-text-secondary);display:block}
+:root{--checkbox-bg: var(--lui-color-background-primary);--checkbox-border: var(--lui-color-border-primary);--checkbox-checked-bg: var(--lui-color-background-brand);--checkbox-checked-border: var(--lui-color-background-brand);--checkbox-check-color: var(--lui-color-text-on-brand);--checkbox-disabled-bg: var(--lui-color-background-disabled);--checkbox-disabled-border: var(--lui-color-border-disabled);--checkbox-disabled-check: var(--lui-color-text-disabled);--checkbox-invalid-border: var(--lui-color-border-focus-error);--checkbox-radius: var(--lui-radius-1);--checkbox-gap-sm: var(--lui-space-1);--checkbox-gap-md: var(--lui-space-2)}._root_tw8jr_16{align-items:center;cursor:pointer;display:flex;position:relative;-webkit-user-select:none;user-select:none;width:100%}._root_tw8jr_16._disabled_tw8jr_24{cursor:not-allowed}._root_tw8jr_16._disabled_tw8jr_24 ._checkbox_tw8jr_27:before{background-color:var(--checkbox-disabled-bg);border-color:var(--checkbox-disabled-border)}._root_tw8jr_16._disabled_tw8jr_24 ._input_tw8jr_31:checked+._checkbox_tw8jr_27:after,._root_tw8jr_16._disabled_tw8jr_24._indeterminate_tw8jr_31 ._checkbox_tw8jr_27:after{background-color:var(--checkbox-disabled-check)}._root_tw8jr_16._invalid_tw8jr_34 ._checkbox_tw8jr_27:before{border-color:var(--checkbox-invalid-border)}._root_tw8jr_16._sizeSm_tw8jr_37{gap:var(--checkbox-gap-sm)}._root_tw8jr_16._sizeSm_tw8jr_37 ._checkbox_tw8jr_27{flex-basis:20px;height:20px;width:20px}._root_tw8jr_16._sizeSm_tw8jr_37 ._checkbox_tw8jr_27:after{height:12px;width:12px}._root_tw8jr_16._sizeSm_tw8jr_37 ._label_tw8jr_49{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-sm)}._root_tw8jr_16._sizeMd_tw8jr_54{gap:var(--checkbox-gap-md)}._root_tw8jr_16._sizeMd_tw8jr_54 ._checkbox_tw8jr_27{flex-basis:24px;height:24px;width:24px}._root_tw8jr_16._sizeMd_tw8jr_54 ._checkbox_tw8jr_27:after{height:14px;width:14px}._root_tw8jr_16._sizeMd_tw8jr_54 ._label_tw8jr_49{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-md)}._root_tw8jr_16._sizeLg_tw8jr_71{gap:var(--checkbox-gap-md)}._root_tw8jr_16._sizeLg_tw8jr_71 ._checkbox_tw8jr_27{flex-basis:28px;height:28px;width:28px}._root_tw8jr_16._sizeLg_tw8jr_71 ._checkbox_tw8jr_27:after{height:16px;width:16px}._root_tw8jr_16._sizeLg_tw8jr_71 ._label_tw8jr_49{font-size:var(--lui-font-size-lg);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-lg)}._checkbox_tw8jr_27{flex-grow:0;flex-shrink:0;padding:2px;position:relative}._checkbox_tw8jr_27:after{background-color:var(--checkbox-bg);content:"";height:14px;inset:0;margin:auto;position:absolute;width:14px}._checkbox_tw8jr_27:before{background-color:var(--checkbox-bg);border:1px solid var(--checkbox-border);border-radius:var(--checkbox-radius);content:"";inset:2px;position:absolute}._input_tw8jr_31:checked+._checkbox_tw8jr_27:before,._indeterminate_tw8jr_31 ._checkbox_tw8jr_27:before{background-color:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-border)}._input_tw8jr_31:checked+._checkbox_tw8jr_27:after{clip-path:path(evenodd,"M10.9593 2.79299C11.3498 2.40252 11.9828 2.40263 12.3734 2.79299C12.7639 3.18352 12.7639 3.81653 12.3734 4.20706L5.95735 10.624C5.56693 11.0145 4.93383 11.0142 4.54328 10.624L1.62629 7.70706L1.55793 7.63089C1.23758 7.23811 1.26018 6.65911 1.62629 6.29299C1.99241 5.92688 2.57141 5.90429 2.96418 6.22464L3.04035 6.29299L5.24934 8.50198L10.9593 2.79299Z")}._indeterminate_tw8jr_31 ._checkbox_tw8jr_27:after{clip-path:path(evenodd,"M11.0836 6L11.1852 6.00488C11.6896 6.05592 12.0836 6.4821 12.0836 7C12.0836 7.5179 11.6896 7.94408 11.1852 7.99512L11.0836 8H2.91666C2.36437 8 1.91666 7.55228 1.91666 7C1.91666 6.44772 2.36437 6 2.91666 6H11.0836Z")}._input_tw8jr_31{left:0;position:absolute;visibility:hidden}._label_tw8jr_49{color:var(--lui-color-text-secondary);display:block}

package/dist/checkbox.js

@@ -1,42 +1,42 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { useRef as u, useCallback as p, useEffect as v } from "react";
-import { c as h } from "./clsx-OuTLNxxd.mjs";
-import { g as j } from "./getVariantClassName-D7Nhpuec.mjs";
-import './checkbox.css';const x = "Checkbox", z = "_root_wvjw9_16", g = "_disabled_wvjw9_24", k = "_checkbox_wvjw9_27", C = "_input_wvjw9_31", N = "_indeterminate_wvjw9_31", y = "_invalid_wvjw9_34", L = "_sizeSm_wvjw9_37", M = "_label_wvjw9_49", S = "_sizeMd_wvjw9_54", R = "_sizeLg_wvjw9_71", e = {
-  root: z,
-  disabled: g,
-  checkbox: k,
-  input: C,
-  indeterminate: N,
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { useRef as p, useCallback as h, useEffect as j } from "react";
+import { c as x } from "./clsx-OuTLNxxd.mjs";
+import { g as z } from "./getVariantClassName-D7Nhpuec.mjs";
+import './checkbox.css';const w = "Checkbox", g = "_root_tw8jr_16", k = "_disabled_tw8jr_24", C = "_checkbox_tw8jr_27", N = "_input_tw8jr_31", v = "_indeterminate_tw8jr_31", y = "_invalid_tw8jr_34", L = "_sizeSm_tw8jr_37", M = "_label_tw8jr_49", S = "_sizeMd_tw8jr_54", R = "_sizeLg_tw8jr_71", e = {
+  root: g,
+  disabled: k,
+  checkbox: C,
+  input: N,
+  indeterminate: v,
   invalid: y,
   sizeSm: L,
   label: M,
   sizeMd: S,
   sizeLg: R
-}, A = (l) => {
-  const { ref: s, children: c, indeterminate: n, invalid: r = !1, size: _ = "md", onChange: d, ...o } = l, i = u(null), m = p(
-    (t) => {
-      i.current = t, typeof s == "function" ? s(t) : s && (s.current = t);
+}, A = (o) => {
+  const { ref: t, children: r, indeterminate: n, invalid: l = !1, size: _ = "md", onChange: d, ...c } = o, i = p(null), m = h(
+    (s) => {
+      i.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
     },
-    [s]
+    [t]
   );
-  v(() => {
+  j(() => {
     i.current && (i.current.indeterminate = !!n);
   }, [n]);
-  const w = h(e.root, j("size", _, e), {
-    [e.disabled]: o.disabled === !0,
+  const b = x(e.root, z("size", _, e), {
+    [e.disabled]: c.disabled === !0,
     [e.indeterminate]: n,
-    [e.invalid]: r
-  }), b = (t) => {
-    d?.(t.target.checked);
+    [e.invalid]: l
+  }), f = (s) => {
+    d?.(s.target.checked);
   };
-  return /* @__PURE__ */ f("label", { className: w, children: [
-    /* @__PURE__ */ a("input", { ref: m, className: e.input, onChange: b, type: "checkbox", ...o }),
+  return /* @__PURE__ */ u("label", { className: b, children: [
+    /* @__PURE__ */ a("input", { ref: m, className: e.input, onChange: f, type: "checkbox", ...c }),
     /* @__PURE__ */ a("span", { className: e.checkbox }),
-    c && /* @__PURE__ */ a("span", { className: e.label, children: c })
+    r && /* @__PURE__ */ a("span", { className: e.label, children: r })
   ] });
 };
-A.displayName = x;
+A.displayName = w;
 export {
   A as Checkbox
 };

package/dist/css/palettes/indigo.css

@@ -1,104 +1,104 @@
 :root {
   /* Brand */
-  --palette-brand: #6366f3;
-  --palette-brand-hover: #5558e6;
-  --palette-brand-secondary: #eef2ff;
+  --lui-palette-brand: #6366f3;
+  --lui-palette-brand-hover: #5558e6;
+  --lui-palette-brand-secondary: #eef2ff;
 
   /* Gray scale */
-  --palette-gray-25: #fcfcfd;
-  --palette-gray-50: #f9fafb;
-  --palette-gray-100: #f2f4f7;
-  --palette-gray-200: #e4e7ec;
-  --palette-gray-300: #d0d5dd;
-  --palette-gray-400: #98a2b3;
-  --palette-gray-500: #667085;
-  --palette-gray-600: #475467;
-  --palette-gray-700: #344054;
-  --palette-gray-800: #1d2939;
-  --palette-gray-900: #101828;
+  --lui-palette-gray-25: #fcfcfd;
+  --lui-palette-gray-50: #f9fafb;
+  --lui-palette-gray-100: #f2f4f7;
+  --lui-palette-gray-200: #e4e7ec;
+  --lui-palette-gray-300: #d0d5dd;
+  --lui-palette-gray-400: #98a2b3;
+  --lui-palette-gray-500: #667085;
+  --lui-palette-gray-600: #475467;
+  --lui-palette-gray-700: #344054;
+  --lui-palette-gray-800: #1d2939;
+  --lui-palette-gray-900: #101828;
 
   /* Colors */
-  --palette-red-500: #d92d20;
-  --palette-red-600: #b42318;
-  --palette-orange-500: #b54708;
-  --palette-orange-600: #93370d;
-  --palette-green-500: #079455;
-  --palette-green-600: #067647;
-  --palette-blue-500: #175cd3;
-  --palette-blue-600: #1250b3;
+  --lui-palette-red-500: #d92d20;
+  --lui-palette-red-600: #b42318;
+  --lui-palette-orange-500: #b54708;
+  --lui-palette-orange-600: #93370d;
+  --lui-palette-green-500: #079455;
+  --lui-palette-green-600: #067647;
+  --lui-palette-blue-500: #175cd3;
+  --lui-palette-blue-600: #1250b3;
 
   /* Neutral */
-  --palette-white: #fff;
-  --palette-black: #000;
-  --palette-overlay: rgb(0, 0, 0 / 0.4);
+  --lui-palette-white: #fff;
+  --lui-palette-black: #000;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.4);
 }
 
 [data-theme="dark"] {
   /* Brand */
-  --palette-brand: #818cf8;
-  --palette-brand-hover: #6366f3;
-  --palette-brand-secondary: #1e1b4b;
+  --lui-palette-brand: #818cf8;
+  --lui-palette-brand-hover: #6366f3;
+  --lui-palette-brand-secondary: #1e1b4b;
 
   /* Gray scale */
-  --palette-gray-25: #0a0a0b;
-  --palette-gray-50: #141416;
-  --palette-gray-100: #1c1c1f;
-  --palette-gray-200: #26262b;
-  --palette-gray-300: #3a3a42;
-  --palette-gray-400: #5c5c66;
-  --palette-gray-500: #7a7a85;
-  --palette-gray-600: #9d9da8;
-  --palette-gray-700: #bebec9;
-  --palette-gray-800: #dedee6;
-  --palette-gray-900: #f2f2f7;
+  --lui-palette-gray-25: #0a0a0b;
+  --lui-palette-gray-50: #141416;
+  --lui-palette-gray-100: #1c1c1f;
+  --lui-palette-gray-200: #26262b;
+  --lui-palette-gray-300: #3a3a42;
+  --lui-palette-gray-400: #5c5c66;
+  --lui-palette-gray-500: #7a7a85;
+  --lui-palette-gray-600: #9d9da8;
+  --lui-palette-gray-700: #bebec9;
+  --lui-palette-gray-800: #dedee6;
+  --lui-palette-gray-900: #f2f2f7;
 
   /* Colors */
-  --palette-red-500: #f97066;
-  --palette-red-600: #f04438;
-  --palette-orange-500: #fdb022;
-  --palette-orange-600: #f79009;
-  --palette-green-500: #47cd89;
-  --palette-green-600: #2ed477;
-  --palette-blue-500: #53b1fd;
-  --palette-blue-600: #2e90fa;
+  --lui-palette-red-500: #f97066;
+  --lui-palette-red-600: #f04438;
+  --lui-palette-orange-500: #fdb022;
+  --lui-palette-orange-600: #f79009;
+  --lui-palette-green-500: #47cd89;
+  --lui-palette-green-600: #2ed477;
+  --lui-palette-blue-500: #53b1fd;
+  --lui-palette-blue-600: #2e90fa;
 
   /* Neutral */
-  --palette-white: #141416;
-  --palette-black: #fff;
-  --palette-overlay: rgb(0, 0, 0 / 0.6);
+  --lui-palette-white: #141416;
+  --lui-palette-black: #fff;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.6);
 }
 
 [data-theme="contrast"] {
   /* Brand */
-  --palette-brand: #00f;
-  --palette-brand-hover: #00c;
-  --palette-brand-secondary: #e6e6ff;
+  --lui-palette-brand: #00f;
+  --lui-palette-brand-hover: #00c;
+  --lui-palette-brand-secondary: #e6e6ff;
 
   /* Gray scale */
-  --palette-gray-25: #fff;
-  --palette-gray-50: #f0f0f0;
-  --palette-gray-100: #e0e0e0;
-  --palette-gray-200: #c0c0c0;
-  --palette-gray-300: #808080;
-  --palette-gray-400: #606060;
-  --palette-gray-500: #404040;
-  --palette-gray-600: #202020;
-  --palette-gray-700: #101010;
-  --palette-gray-800: #080808;
-  --palette-gray-900: #000;
+  --lui-palette-gray-25: #fff;
+  --lui-palette-gray-50: #f0f0f0;
+  --lui-palette-gray-100: #e0e0e0;
+  --lui-palette-gray-200: #c0c0c0;
+  --lui-palette-gray-300: #808080;
+  --lui-palette-gray-400: #606060;
+  --lui-palette-gray-500: #404040;
+  --lui-palette-gray-600: #202020;
+  --lui-palette-gray-700: #101010;
+  --lui-palette-gray-800: #080808;
+  --lui-palette-gray-900: #000;
 
   /* Colors */
-  --palette-red-500: #c00;
-  --palette-red-600: #900;
-  --palette-orange-500: #c60;
-  --palette-orange-600: #994d00;
-  --palette-green-500: #060;
-  --palette-green-600: #004d00;
-  --palette-blue-500: #04c;
-  --palette-blue-600: #039;
+  --lui-palette-red-500: #c00;
+  --lui-palette-red-600: #900;
+  --lui-palette-orange-500: #c60;
+  --lui-palette-orange-600: #994d00;
+  --lui-palette-green-500: #060;
+  --lui-palette-green-600: #004d00;
+  --lui-palette-blue-500: #04c;
+  --lui-palette-blue-600: #039;
 
   /* Neutral */
-  --palette-white: #fff;
-  --palette-black: #000;
-  --palette-overlay: rgb(0, 0, 0 / 0.7);
+  --lui-palette-white: #fff;
+  --lui-palette-black: #000;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.7);
 }

package/dist/css/palettes/monochrome.css

@@ -1,104 +1,104 @@
 :root {
   /* Brand */
-  --palette-brand: #44403c;
-  --palette-brand-hover: #292524;
-  --palette-brand-secondary: #f5f5f4;
+  --lui-palette-brand: #44403c;
+  --lui-palette-brand-hover: #292524;
+  --lui-palette-brand-secondary: #f5f5f4;
 
   /* Gray scale (warm) */
-  --palette-gray-25: #fcfcf9;
-  --palette-gray-50: #fafaf9;
-  --palette-gray-100: #f5f5f4;
-  --palette-gray-200: #e7e5e4;
-  --palette-gray-300: #d6d3d1;
-  --palette-gray-400: #a8a29e;
-  --palette-gray-500: #78716c;
-  --palette-gray-600: #57534e;
-  --palette-gray-700: #44403c;
-  --palette-gray-800: #292524;
-  --palette-gray-900: #1c1917;
+  --lui-palette-gray-25: #fcfcf9;
+  --lui-palette-gray-50: #fafaf9;
+  --lui-palette-gray-100: #f5f5f4;
+  --lui-palette-gray-200: #e7e5e4;
+  --lui-palette-gray-300: #d6d3d1;
+  --lui-palette-gray-400: #a8a29e;
+  --lui-palette-gray-500: #78716c;
+  --lui-palette-gray-600: #57534e;
+  --lui-palette-gray-700: #44403c;
+  --lui-palette-gray-800: #292524;
+  --lui-palette-gray-900: #1c1917;
 
   /* Colors (same as indigo) */
-  --palette-red-500: #d92d20;
-  --palette-red-600: #b42318;
-  --palette-orange-500: #b54708;
-  --palette-orange-600: #93370d;
-  --palette-green-500: #079455;
-  --palette-green-600: #067647;
-  --palette-blue-500: #175cd3;
-  --palette-blue-600: #1250b3;
+  --lui-palette-red-500: #d92d20;
+  --lui-palette-red-600: #b42318;
+  --lui-palette-orange-500: #b54708;
+  --lui-palette-orange-600: #93370d;
+  --lui-palette-green-500: #079455;
+  --lui-palette-green-600: #067647;
+  --lui-palette-blue-500: #175cd3;
+  --lui-palette-blue-600: #1250b3;
 
   /* Neutral */
-  --palette-white: #fff;
-  --palette-black: #000;
-  --palette-overlay: rgb(0, 0, 0 / 0.4);
+  --lui-palette-white: #fff;
+  --lui-palette-black: #000;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.4);
 }
 
 [data-theme="dark"] {
   /* Brand */
-  --palette-brand: #d6d3d1;
-  --palette-brand-hover: #e7e5e4;
-  --palette-brand-secondary: #292524;
+  --lui-palette-brand: #d6d3d1;
+  --lui-palette-brand-hover: #e7e5e4;
+  --lui-palette-brand-secondary: #292524;
 
   /* Gray scale (warm, inverted) */
-  --palette-gray-25: #0c0a09;
-  --palette-gray-50: #141211;
-  --palette-gray-100: #1c1917;
-  --palette-gray-200: #292524;
-  --palette-gray-300: #44403c;
-  --palette-gray-400: #57534e;
-  --palette-gray-500: #78716c;
-  --palette-gray-600: #a8a29e;
-  --palette-gray-700: #d6d3d1;
-  --palette-gray-800: #e7e5e4;
-  --palette-gray-900: #f5f5f4;
+  --lui-palette-gray-25: #0c0a09;
+  --lui-palette-gray-50: #141211;
+  --lui-palette-gray-100: #1c1917;
+  --lui-palette-gray-200: #292524;
+  --lui-palette-gray-300: #44403c;
+  --lui-palette-gray-400: #57534e;
+  --lui-palette-gray-500: #78716c;
+  --lui-palette-gray-600: #a8a29e;
+  --lui-palette-gray-700: #d6d3d1;
+  --lui-palette-gray-800: #e7e5e4;
+  --lui-palette-gray-900: #f5f5f4;
 
   /* Colors (same as indigo) */
-  --palette-red-500: #f97066;
-  --palette-red-600: #f04438;
-  --palette-orange-500: #fdb022;
-  --palette-orange-600: #f79009;
-  --palette-green-500: #47cd89;
-  --palette-green-600: #2ed477;
-  --palette-blue-500: #53b1fd;
-  --palette-blue-600: #2e90fa;
+  --lui-palette-red-500: #f97066;
+  --lui-palette-red-600: #f04438;
+  --lui-palette-orange-500: #fdb022;
+  --lui-palette-orange-600: #f79009;
+  --lui-palette-green-500: #47cd89;
+  --lui-palette-green-600: #2ed477;
+  --lui-palette-blue-500: #53b1fd;
+  --lui-palette-blue-600: #2e90fa;
 
   /* Neutral */
-  --palette-white: #141211;
-  --palette-black: #fff;
-  --palette-overlay: rgb(0, 0, 0 / 0.6);
+  --lui-palette-white: #141211;
+  --lui-palette-black: #fff;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.6);
 }
 
 [data-theme="contrast"] {
   /* Brand */
-  --palette-brand: #000;
-  --palette-brand-hover: #333;
-  --palette-brand-secondary: #fff;
+  --lui-palette-brand: #000;
+  --lui-palette-brand-hover: #333;
+  --lui-palette-brand-secondary: #fff;
 
   /* Gray scale (pure b/w) */
-  --palette-gray-25: #fff;
-  --palette-gray-50: #f0f0f0;
-  --palette-gray-100: #e0e0e0;
-  --palette-gray-200: #c0c0c0;
-  --palette-gray-300: #808080;
-  --palette-gray-400: #606060;
-  --palette-gray-500: #404040;
-  --palette-gray-600: #202020;
-  --palette-gray-700: #101010;
-  --palette-gray-800: #080808;
-  --palette-gray-900: #000;
+  --lui-palette-gray-25: #fff;
+  --lui-palette-gray-50: #f0f0f0;
+  --lui-palette-gray-100: #e0e0e0;
+  --lui-palette-gray-200: #c0c0c0;
+  --lui-palette-gray-300: #808080;
+  --lui-palette-gray-400: #606060;
+  --lui-palette-gray-500: #404040;
+  --lui-palette-gray-600: #202020;
+  --lui-palette-gray-700: #101010;
+  --lui-palette-gray-800: #080808;
+  --lui-palette-gray-900: #000;
 
   /* Colors (same as indigo) */
-  --palette-red-500: #c00;
-  --palette-red-600: #900;
-  --palette-orange-500: #c60;
-  --palette-orange-600: #994d00;
-  --palette-green-500: #060;
-  --palette-green-600: #004d00;
-  --palette-blue-500: #04c;
-  --palette-blue-600: #039;
+  --lui-palette-red-500: #c00;
+  --lui-palette-red-600: #900;
+  --lui-palette-orange-500: #c60;
+  --lui-palette-orange-600: #994d00;
+  --lui-palette-green-500: #060;
+  --lui-palette-green-600: #004d00;
+  --lui-palette-blue-500: #04c;
+  --lui-palette-blue-600: #039;
 
   /* Neutral */
-  --palette-white: #fff;
-  --palette-black: #000;
-  --palette-overlay: rgb(0, 0, 0 / 0.7);
+  --lui-palette-white: #fff;
+  --lui-palette-black: #000;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.7);
 }