@profiq/ui 0.1.1 → 0.1.3

package/dist/components/custom/basic/button.d.ts

@@ -1,7 +1,7 @@
 import { types, sizes } from '../../lib/buttonVariants';
 import { BaseProps } from '../../lib/baseProps';
 import { IconProps, IconKey } from '../../components/custom/icons/Icons';
-export type ButtonProps = BaseProps & {
+type ButtonProps = BaseProps & {
     variant: types;
     size: sizes;
     title: string;
@@ -12,4 +12,5 @@ export type ButtonProps = BaseProps & {
     onClick?: () => void;
 };
 export declare function Button({ variant, size, title, leftIcon, rightIcon, leftIconProps, rightIconProps, dataTestId, onClick, theme, ariaLabel, className, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/components/custom/basic/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/stories/basic/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EACL,KAAK,SAAS,EACd,KAAK,OAAO,EAEb,MAAM,iCAAiC,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG;IACpC,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAgB,EAChB,KAAqB,EACrB,QAAiB,EACjB,SAAkB,EAClB,aAAa,EACb,cAAc,EACd,UAAU,EACV,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,GACV,EAAE,WAAW,2CAkCb"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/stories/basic/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EACL,KAAK,SAAS,EACd,KAAK,OAAO,EAEb,MAAM,iCAAiC,CAAC;AAGzC,KAAK,WAAW,GAAG,SAAS,GAAG;IAC7B,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAgB,EAChB,KAAqB,EACrB,QAAiB,EACjB,SAAkB,EAClB,aAAa,EACb,cAAc,EACd,UAAU,EACV,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,GACV,EAAE,WAAW,2CAkCb"}

package/dist/components/custom/basic/input.d.ts

@@ -1,6 +1,6 @@
 import { BaseProps } from '../../lib/baseProps';
 export type inputType = "text" | "number" | "url" | "email" | "password" | "search";
-export type InputFieldProps = BaseProps & {
+type InputFieldProps = BaseProps & {
     fieldLabel: React.ReactNode;
     fieldPlaceholder: string;
     fieldDescription: string;
@@ -18,4 +18,5 @@ export type InputFieldProps = BaseProps & {
     msg?: React.ReactNode | string;
 };
 export declare function InputField({ fieldLabel, fieldPlaceholder, fieldDescription, isDisabled, isInvalid, isRequired, msg, type, leftNode, rightNode, defaultValue, value, onChange, onBlur, onFocus, dataTestId, theme, className, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/components/custom/basic/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/stories/basic/input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,UAAU,GACV,QAAQ,CAAC;AAEb,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,IAAI,EAAE,SAAS,CAAC;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,gBAAqB,EACrB,gBAAqB,EAErB,UAAkB,EAClB,SAAiB,EACjB,UAAkB,EAElB,GAAQ,EACR,IAAI,EAEJ,QAAQ,EACR,SAAS,EAET,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EAEP,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,eAAe,2CA8FjB"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/stories/basic/input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,UAAU,GACV,QAAQ,CAAC;AAEb,KAAK,eAAe,GAAG,SAAS,GAAG;IACjC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,IAAI,EAAE,SAAS,CAAC;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,gBAAqB,EACrB,gBAAqB,EAErB,UAAkB,EAClB,SAAiB,EACjB,UAAkB,EAElB,GAAQ,EACR,IAAI,EAEJ,QAAQ,EACR,SAAS,EAET,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EAEP,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,eAAe,2CA8FjB"}

package/dist/components/ui/buttonVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../../src/components/ui/buttonVariants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;iEA+B1B,CAAC"}
+{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../../src/components/ui/buttonVariants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;iEAgC1B,CAAC"}

package/dist/components/ui/buttonVariants.js

@@ -1,10 +1,10 @@
 import { cva as e } from "../../node_modules/class-variance-authority/dist/index.js";
 const i = e(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-white",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-[var(--primary-foreground)]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-white hover:bg-primary/90",
+        default: "bg-primary text-[var(--primary-foreground)] hover:bg-primary/90",
         destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline: "text-foreground border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary: "text-primary border border-primary hover:bg-primary/15",

package/dist/components/ui/slider.js

@@ -6,28 +6,28 @@ import { Root as N, Track as z, Range as A, Thumb as h } from "../../node_module
 function M({
   className: b,
   defaultValue: o,
-  thumbClassname: d = "",
-  rangeClassname: g = "",
-  tooltip: u = !1,
-  tooltipClassname: v = "",
-  prefix: f = "",
-  suffix: m = "",
-  invalid: e = !1,
-  value: i,
+  thumbClassname: s = "",
+  rangeClassname: v = "",
+  tooltip: g = !1,
+  tooltipClassname: u = "",
+  prefix: m = "",
+  suffix: f = "",
+  invalid: i = !1,
+  value: e,
   min: t = 0,
   max: a = 100,
   ...p
 }) {
-  const s = w.useMemo(
-    () => Array.isArray(i) ? i : Array.isArray(o) ? o : [t, a],
-    [i, o, t, a]
+  const d = w.useMemo(
+    () => Array.isArray(e) ? e : Array.isArray(o) ? o : [t, a],
+    [e, o, t, a]
   );
   return /* @__PURE__ */ r(y, { children: /* @__PURE__ */ c(
     N,
     {
       "data-slot": "slider",
       defaultValue: o,
-      value: i,
+      value: e,
       min: t,
       max: a,
       className: l(
@@ -49,16 +49,16 @@ function M({
                 "data-slot": "slider-range",
                 className: l(
                   "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-                  g,
-                  e ? "bg-[var(--destructive)]" : "bg-[var(--foreground)]"
+                  v,
+                  i ? "bg-[var(--destructive)]" : "bg-[var(--primary)]"
                 )
               }
             )
           }
         ),
         Array.from(
-          { length: s.length },
-          (x, n) => u ? /* @__PURE__ */ c(T, { children: [
+          { length: d.length },
+          (x, n) => g ? /* @__PURE__ */ c(T, { children: [
             /* @__PURE__ */ r($, { asChild: !0, children: /* @__PURE__ */ r(
               h,
               {
@@ -66,17 +66,17 @@ function M({
                 className: `border-primary ring-ring/50 block size-4 shrink-0 rounded-full border
                               bg-white shadow-sm transition-[color,box-shadow]
                               hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden
-                              disabled:pointer-events-none disabled:opacity-50 ${d}
-                              ${e ? "!border-[var(--destructive)] !ring-[var(--destructive)]" : "!border-[var(--foreground)] !ring-[var(--foreground)]"}`
+                              disabled:pointer-events-none disabled:opacity-50 ${s}
+                              ${i ? "!border-[var(--destructive)] !ring-[var(--destructive)]" : "!border-[var(--primary)] !ring-[var(--ring)]"}`
               },
               n
             ) }),
             /* @__PURE__ */ r(
               k,
               {
-                className: v,
-                invalid: e,
-                children: `${f}${s[n]}${m}`
+                className: u,
+                invalid: i,
+                children: `${m}${d[n]}${f}`
               }
             )
           ] }) : /* @__PURE__ */ r(
@@ -86,8 +86,8 @@ function M({
               className: `border-primary ring-ring/50 block size-4 shrink-0 rounded-full border
                           bg-white shadow-sm transition-[color,box-shadow]
                           hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden
-                          disabled:pointer-events-none disabled:opacity-50 ${d}
-                          ${e ? "!border-[var(--destructive)] !ring-[var(--destructive)]" : "!border-[var(--foreground)] !ring-[var(--foreground)]"}`
+                          disabled:pointer-events-none disabled:opacity-50 ${s}
+                          ${i ? "!border-[var(--destructive)] !ring-[var(--destructive)]" : "!border-[var(--foreground)] !ring-[var(--foreground)]"}`
             },
             n
           )

package/dist/index.css

@@ -98,8 +98,38 @@
   --sidebar-ring: var(--ring);
 }
 
+.profiq-dark {
+  --background: var(--brand-gradient);
+  --foreground: #ffffff;
+  --card: #0f172a;
+  --card-foreground: #ffffff;
+  --popover: #0f172a;
+  --popover-foreground: #ffffff;
+  --primary: var(--brand-green);
+  --primary-foreground: #ffffff;
+  --secondary: color-mix(in srgb, var(--brand-grey) 25%, #0f172a);
+  --secondary-foreground: #ffffff;
+  --muted: #111827;
+  --muted-foreground: color-mix(in srgb, white 75%, var(--brand-grey));
+  --accent: color-mix(in srgb, var(--brand-green) 70%, #0b1220);
+  --accent-foreground: #ffffff;
+  --destructive: #ef4444;
+  --destructive-foreground: #0b1220;
+  --border: color-mix(in srgb, white 12%, #0f172a);
+  --input: color-mix(in srgb, white 14%, #0f172a);
+  --ring: color-mix(in srgb, var(--brand-green) 45%, white);
+  --sidebar: #0f172a;
+  --sidebar-foreground: #ffffff;
+  --sidebar-primary: var(--brand-green);
+  --sidebar-primary-foreground: #0b1220;
+  --sidebar-accent: #111827;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
 .shadcn {
-  --radius: 0.625rem;
+  --radius: 0.65rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -115,7 +145,6 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -124,6 +153,7 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -134,42 +164,12 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 
-.profiq-dark {
-  --background: var(--brand-gradient);
-  --foreground: #ffffff;
-  --card: #0f172a;
-  --card-foreground: #ffffff;
-  --popover: #0f172a;
-  --popover-foreground: #ffffff;
-  --primary: var(--brand-green);
-  --primary-foreground: #ffffff;
-  --secondary: color-mix(in srgb, var(--brand-grey) 25%, #0f172a);
-  --secondary-foreground: #ffffff;
-  --muted: #111827;
-  --muted-foreground: color-mix(in srgb, white 75%, var(--brand-grey));
-  --accent: color-mix(in srgb, var(--brand-green) 70%, #0b1220);
-  --accent-foreground: #ffffff;
-  --destructive: #ef4444;
-  --destructive-foreground: #0b1220;
-  --border: color-mix(in srgb, white 12%, #0f172a);
-  --input: color-mix(in srgb, white 14%, #0f172a);
-  --ring: color-mix(in srgb, var(--brand-green) 45%, white);
-  --sidebar: #0f172a;
-  --sidebar-foreground: #ffffff;
-  --sidebar-primary: var(--brand-green);
-  --sidebar-primary-foreground: #0b1220;
-  --sidebar-accent: #111827;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: var(--border);
-  --sidebar-ring: var(--ring);
-}
-
 .shadcn-dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.269 0 0);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
@@ -177,10 +177,9 @@
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -196,243 +195,145 @@
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
-.lightGreen {
-  --background: oklch(0.9892 0.0054 117.9205);
-  --foreground: oklch(0.2077 0.0398 265.7549);
+.green {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.2077 0.0398 265.7549);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.2077 0.0398 265.7549);
-  --primary: oklch(0.8871 0.2122 128.5041);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.3717 0.0392 257.287);
-  --secondary-foreground: oklch(0.9842 0.0034 247.8575);
-  --muted: oklch(0.9683 0.0069 247.8956);
-  --muted-foreground: oklch(0.5544 0.0407 257.4166);
-  --accent: oklch(0.9819 0.0181 155.8263);
-  --accent-foreground: oklch(0.4479 0.1083 151.3277);
-  --destructive: oklch(0.6368 0.2078 25.3313);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9288 0.0126 255.5078);
-  --input: oklch(0.9288 0.0126 255.5078);
-  --ring: oklch(0.8871 0.2122 128.5041);
-  --chart-1: oklch(0.8871 0.2122 128.5041);
-  --chart-2: oklch(0.3717 0.0392 257.287);
-  --chart-3: oklch(0.7227 0.192 149.5793);
-  --chart-4: oklch(0.5544 0.0407 257.4166);
-  --chart-5: oklch(0.7107 0.0351 256.7878);
-  --sidebar: oklch(1 0 0);
-  --sidebar-foreground: oklch(0.2077 0.0398 265.7549);
-  --sidebar-primary: oklch(0.8871 0.2122 128.5041);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.9842 0.0034 247.8575);
-  --sidebar-accent-foreground: oklch(0.2077 0.0398 265.7549);
-  --sidebar-border: oklch(0.9683 0.0069 247.8956);
-  --sidebar-ring: oklch(0.8871 0.2122 128.5041);
-  --font-sans: Inter, system-ui, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: JetBrains Mono, monospace;
-  --radius: 1rem;
-  --shadow-x: 0px;
-  --shadow-y: 8px;
-  --shadow-blur: 20px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.05;
-  --shadow-color: #000000;
-  --shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
-  --shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
-  --shadow-sm:
-    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
-  --shadow:
-    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
-  --shadow-md:
-    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
-  --shadow-lg:
-    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xl:
-    0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
-  --shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.13);
-  --tracking-normal: -0.01em;
-  --spacing: 0.25rem;
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.648 0.2 131.684);
+  --primary-foreground: oklch(0.986 0.031 120.757);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.841 0.238 128.85);
+  --chart-1: oklch(0.871 0.15 154.449);
+  --chart-2: oklch(0.723 0.219 149.579);
+  --chart-3: oklch(0.627 0.194 149.214);
+  --chart-4: oklch(0.527 0.154 150.069);
+  --chart-5: oklch(0.448 0.119 151.328);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.648 0.2 131.684);
+  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.841 0.238 128.85);
 }
 
-.lightGreen-dark {
-  --background: oklch(0.1288 0.0406 264.6952);
-  --foreground: oklch(0.9842 0.0034 247.8575);
-  --card: oklch(0.2077 0.0398 265.7549);
-  --card-foreground: oklch(0.9842 0.0034 247.8575);
-  --popover: oklch(0.2077 0.0398 265.7549);
-  --popover-foreground: oklch(0.9842 0.0034 247.8575);
-  --primary: oklch(0.8871 0.2122 128.5041);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.2795 0.0368 260.031);
-  --secondary-foreground: oklch(0.9842 0.0034 247.8575);
-  --muted: oklch(0.2795 0.0368 260.031);
-  --muted-foreground: oklch(0.7107 0.0351 256.7878);
-  --accent: oklch(0.3925 0.0896 152.5353);
-  --accent-foreground: oklch(0.8871 0.2122 128.5041);
-  --destructive: oklch(0.4437 0.1613 26.8994);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.2795 0.0368 260.031);
-  --input: oklch(0.2795 0.0368 260.031);
-  --ring: oklch(0.8871 0.2122 128.5041);
-  --chart-1: oklch(0.8871 0.2122 128.5041);
-  --chart-2: oklch(0.6231 0.188 259.8145);
-  --chart-3: oklch(0.7227 0.192 149.5793);
-  --chart-4: oklch(0.6268 0.2325 303.9004);
-  --chart-5: oklch(0.7686 0.1647 70.0804);
-  --sidebar: oklch(0.1288 0.0406 264.6952);
-  --sidebar-foreground: oklch(0.9842 0.0034 247.8575);
-  --sidebar-primary: oklch(0.8871 0.2122 128.5041);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.2795 0.0368 260.031);
-  --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
-  --sidebar-border: oklch(0.2795 0.0368 260.031);
-  --sidebar-ring: oklch(0.8871 0.2122 128.5041);
-  --font-sans: Inter, system-ui, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: JetBrains Mono, monospace;
-  --radius: 1rem;
-  --shadow-x: 0px;
-  --shadow-y: 10px;
-  --shadow-blur: 25px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.4;
-  --shadow-color: #000000;
-  --shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
-  --shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
-  --shadow-sm:
-    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
-  --shadow:
-    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
-  --shadow-md:
-    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
-  --shadow-lg:
-    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
-  --shadow-xl:
-    0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
-  --shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1);
+.green-dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.648 0.2 131.684);
+  --primary-foreground: oklch(0.986 0.031 120.757);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.405 0.101 131.063);
+  --chart-1: oklch(0.871 0.15 154.449);
+  --chart-2: oklch(0.723 0.219 149.579);
+  --chart-3: oklch(0.627 0.194 149.214);
+  --chart-4: oklch(0.527 0.154 150.069);
+  --chart-5: oklch(0.448 0.119 151.328);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.768 0.233 130.85);
+  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.405 0.101 131.063);
 }
 
-.alpine {
-  --background: oklch(0.9761 0.0079 357.7954);
-  --foreground: oklch(0.2151 0.0518 259.4035);
+.red {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.2151 0.0518 259.4035);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.2151 0.0518 259.4035);
-  --primary: oklch(0.4284 0.172 259.7023);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.6785 0.2131 14.7192);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.9365 0.0158 266.2758);
-  --muted-foreground: oklch(0.4474 0.0343 261.3244);
-  --accent: oklch(0.8422 0.09 7.0366);
-  --accent-foreground: oklch(0.2151 0.0518 259.4035);
-  --destructive: oklch(0.5858 0.222 17.5846);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.869 0.0198 252.8943);
-  --input: oklch(1 0 0);
-  --ring: oklch(0.4284 0.172 259.7023);
-  --chart-1: oklch(0.4284 0.172 259.7023);
-  --chart-2: oklch(0.6785 0.2131 14.7192);
-  --chart-3: oklch(0.7909 0.125 39.5147);
-  --chart-4: oklch(0.2853 0.1242 261.1229);
-  --chart-5: oklch(0.7325 0.169 10.5065);
-  --sidebar: oklch(0.2151 0.0518 259.4035);
-  --sidebar-foreground: oklch(0.9842 0.0034 247.8575);
-  --sidebar-primary: oklch(0.4284 0.172 259.7023);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.2795 0.0368 260.031);
-  --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
-  --sidebar-border: oklch(0.2795 0.0368 260.031);
-  --sidebar-ring: oklch(0.4284 0.172 259.7023);
-  --font-sans: "Montserrat", sans-serif;
-  --font-serif: "Playfair Display", serif;
-  --font-mono: "Fira Code", monospace;
-  --radius: 0.75rem;
-  --shadow-x: 0px;
-  --shadow-y: 4px;
-  --shadow-blur: 10px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.05;
-  --shadow-color: #000000;
-  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
-  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
-  --shadow-sm:
-    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
-  --shadow:
-    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
-  --shadow-md:
-    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
-  --shadow-lg:
-    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xl:
-    0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
-  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
-  --tracking-normal: 0.02em;
-  --spacing: 0.25rem;
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.577 0.245 27.325);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.704 0.191 22.216);
+  --chart-1: oklch(0.808 0.114 19.571);
+  --chart-2: oklch(0.637 0.237 25.331);
+  --chart-3: oklch(0.577 0.245 27.325);
+  --chart-4: oklch(0.505 0.213 27.518);
+  --chart-5: oklch(0.444 0.177 26.899);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.577 0.245 27.325);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.704 0.191 22.216);
 }
 
-.alpine-dark {
-  --background: oklch(0.1107 0.0274 244.1227);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.1728 0.0527 252.6119);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.1107 0.0274 244.1227);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(0.7222 0.1514 248.5089);
-  --primary-foreground: oklch(0.1107 0.0274 244.1227);
-  --secondary: oklch(0.6785 0.2131 14.7192);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.2254 0.08 257.0037);
-  --muted-foreground: oklch(0.869 0.0198 252.8943);
-  --accent: oklch(0.5673 0.1955 16.2602);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.6489 0.237 26.9728);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.2364 0.084 258.6542);
-  --input: oklch(0.2254 0.08 257.0037);
-  --ring: oklch(0.7222 0.1514 248.5089);
-  --chart-1: oklch(0.7222 0.1514 248.5089);
-  --chart-2: oklch(0.6785 0.2131 14.7192);
-  --chart-3: oklch(0.8422 0.09 7.0366);
-  --chart-4: oklch(0.787 0.1124 249.7946);
-  --chart-5: oklch(0.6307 0.2549 23.6145);
-  --sidebar: oklch(0.0812 0.0193 242.2089);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(0.7222 0.1514 248.5089);
-  --sidebar-primary-foreground: oklch(0.1107 0.0274 244.1227);
-  --sidebar-accent: oklch(0.2254 0.08 257.0037);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.3233 0.1025 253.8852);
-  --sidebar-ring: oklch(0.7222 0.1514 248.5089);
-  --font-sans: "Montserrat", sans-serif;
-  --font-serif: "Playfair Display", serif;
-  --font-mono: "Fira Code", monospace;
-  --radius: 0.75rem;
-  --shadow-x: 0px;
-  --shadow-y: 12px;
-  --shadow-blur: 25px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.6;
-  --shadow-color: #000000;
-  --shadow-2xs: 0px 12px 25px 0px hsl(0 0% 0% / 0.3);
-  --shadow-xs: 0px 12px 25px 0px hsl(0 0% 0% / 0.3);
-  --shadow-sm:
-    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 1px 2px -1px hsl(0 0% 0% / 0.6);
-  --shadow:
-    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 1px 2px -1px hsl(0 0% 0% / 0.6);
-  --shadow-md:
-    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 2px 4px -1px hsl(0 0% 0% / 0.6);
-  --shadow-lg:
-    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 4px 6px -1px hsl(0 0% 0% / 0.6);
-  --shadow-xl:
-    0px 12px 25px 0px hsl(0 0% 0% / 0.6), 0px 8px 10px -1px hsl(0 0% 0% / 0.6);
-  --shadow-2xl: 0px 12px 25px 0px hsl(0 0% 0% / 1.5);
+.red-dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.637 0.237 25.331);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.396 0.141 25.723);
+  --chart-1: oklch(0.808 0.114 19.571);
+  --chart-2: oklch(0.637 0.237 25.331);
+  --chart-3: oklch(0.577 0.245 27.325);
+  --chart-4: oklch(0.505 0.213 27.518);
+  --chart-5: oklch(0.444 0.177 26.899);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.637 0.237 25.331);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.396 0.141 25.723);
 }
 
 @theme inline {