@fileverse/ui 5.0.1-sepia-4 → 5.0.1-sepia-6

package/dist/index.css

@@ -713,6 +713,75 @@ video {
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
+
+  .theme-pink {
+    /* Button */
+    --color-button-default: 349, 25%, 13%, 1; /* #2A191C */
+    --color-button-default-hover: 349, 25%, 22%, 1; /* #462A2F */
+    --color-button-secondary: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-button-secondary-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
+    --color-button-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-button-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-button-danger-hover: 2, 79%, 48%, 1; /* #DB221A */
+    --color-button-floating: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-button-floating-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
+
+    /* Text */
+    --color-text-default: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-text-secondary: 3, 39%, 59%, 1; /* #C0736F */
+    --color-text-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+    --color-text-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-text-success: 139, 35%, 42%, 1; /* #46905E */
+    --color-text-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-text-link: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-text-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
+
+    /* Background */
+    --color-bg-default: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
+    --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
+    --color-bg-secondary: 345, 100%, 92%, 1; /* #FFD6E0 */
+    --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
+    --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-bg-brand-hover: 45, 100%, 56%, 1; /* #FFC61F */
+    --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
+    --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
+    --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+    --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
+    --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
+    --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
+
+    /* Border */
+    --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
+    --color-border-hover: 346, 100%, 86%, 1; /* #FFB8C9 */
+    --color-border-light: 348, 100%, 96%, 1; /* #FFEBEF */
+    --color-border-active: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-border-focused: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-border-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-border-warning: 19, 83%, 53%, 1; /* #EB6424 */
+    --color-border-success: 139, 35%, 42%, 1; /* #46905E */
+    --color-border-info: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-border-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+
+    /* Icon */
+    --color-icon-default: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-icon-default-hover: 3, 88%, 32%, 1; /* #99110A */
+    --color-icon-brand: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-icon-secondary: 3, 39%, 59%, 1; /* #C0736F */
+    --color-icon-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+    --color-icon-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-icon-warning: 19, 83%, 53%, 1; /* #EB6424 */
+    --color-icon-info: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-icon-success: 140, 35%, 45%, 1; /* #4B9B65 */
+    --color-icon-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
   * {
     border-color: hsl(var(--color-border-default));
     -webkit-font-smoothing: antialiased;
@@ -1245,9 +1314,6 @@ video {
 .left-1 {
   left: 0.25rem;
 }
-.left-1\.5 {
-  left: 0.375rem;
-}
 .left-1\/2 {
   left: 50%;
 }
@@ -1284,9 +1350,6 @@ video {
 .top-0 {
   top: 0px;
 }
-.top-1\.5 {
-  top: 0.375rem;
-}
 .top-1\/2 {
   top: 50%;
 }
@@ -1459,9 +1522,6 @@ video {
 .h-12 {
   height: 3rem;
 }
-.h-16 {
-  height: 4rem;
-}
 .h-3 {
   height: 0.75rem;
 }
@@ -2070,9 +2130,6 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
-.gap-1\.5 {
-  gap: 0.375rem;
-}
 .gap-10 {
   gap: 2.5rem;
 }
@@ -2494,6 +2551,9 @@ video {
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2652,9 +2712,6 @@ video {
 .opacity-50 {
   opacity: 0.5;
 }
-.opacity-60 {
-  opacity: 0.6;
-}
 .opacity-90 {
   opacity: 0.9;
 }
@@ -3267,9 +3324,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
-.hover\:opacity-80:hover {
-  opacity: 0.8;
-}
 .hover\:opacity-90:hover {
   opacity: 0.9;
 }

package/dist/index.es.d.ts

@@ -907,7 +907,7 @@ export declare interface TextFieldProps extends React_2.InputHTMLAttributes<HTML
     icon?: LucideIconProps["name"];
 }
 
-declare type Theme = "light" | "dark" | "theme-sepia";
+declare type Theme = "light" | "dark" | "theme-sepia" | "theme-pink";
 
 export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => JSX_2.Element;
 

package/dist/index.es.js

@@ -66226,7 +66226,7 @@ const wNe = ({
   const [n, a] = ce(() => localStorage.getItem("theme") || t);
   Le(() => {
     const s = window.document.documentElement;
-    s.classList.remove("light", "dark", "theme-sepia"), s.classList.add(n), localStorage.setItem("theme", n);
+    s.classList.remove("light", "dark", "theme-sepia", "theme-pink"), s.classList.add(n), localStorage.setItem("theme", n);
   }, [n]);
   const o = Ve(() => {
     a((s) => s === "light" ? "dark" : s === "dark" ? "theme-sepia" : "light");
@@ -66243,13 +66243,7 @@ const wNe = ({
   { value: "light", label: "Light", color: "#FFFFFF" },
   { value: "dark", label: "Dark", color: "#2E2E2E" },
   { value: "theme-sepia", label: "Sepia", color: "#EFDFBD" },
-  {
-    value: "pink",
-    label: "Pink",
-    color: "#F9D7EF",
-    disabled: !0,
-    comingSoon: !0
-  }
+  { value: "theme-pink", label: "Pink", color: "#FFE6EC" }
 ], CNe = () => {
   const { theme: e, setTheme: t } = ECe(), [n, a] = ce(!1);
   return /* @__PURE__ */ f.jsxs("div", { className: "h-9 px-[3px] rounded outline outline-1 outline-offset-[-1px] outline-[hsl(var(--color-border-default))] inline-flex justify-start items-center", children: [
@@ -66308,27 +66302,24 @@ const wNe = ({
           align: "end",
           sideOffset: 8,
           children: [
-            /* @__PURE__ */ f.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ f.jsxs("div", { className: "flex items-center justify-between pb-3 mb-3 border-b color-border-default", children: [
               /* @__PURE__ */ f.jsx("span", { className: "text-heading-xsm color-text-default", children: "Themes" }),
               /* @__PURE__ */ f.jsx(Tke, { asChild: !0, children: /* @__PURE__ */ f.jsx("button", { className: "p-1 rounded hover:color-bg-default-hover transition-colors", children: /* @__PURE__ */ f.jsx(pe, { name: "X", size: "sm" }) }) })
             ] }),
-            /* @__PURE__ */ f.jsx("div", { className: "grid grid-cols-2 gap-3", children: HCe.map((o) => {
+            /* @__PURE__ */ f.jsx("div", { className: "grid grid-cols-2 gap-2", children: HCe.map((o) => {
               const r = e === o.value;
               return /* @__PURE__ */ f.jsxs(
                 "button",
                 {
-                  disabled: o.disabled,
-                  onClick: () => {
-                    !o.disabled && o.value !== "pink" && (t(o.value), a(!1));
-                  },
-                  className: `flex flex-col items-center gap-1.5 cursor-pointer transition-all ${o.disabled ? "opacity-60 cursor-not-allowed" : "hover:opacity-80"}`,
+                  onClick: () => t(o.value),
+                  className: "flex flex-col items-center gap-1 p-1.5 rounded-lg cursor-pointer transition-all hover:color-bg-default-hover",
                   children: [
                     /* @__PURE__ */ f.jsx(
                       "div",
                       {
-                        className: `w-full h-16 rounded-lg border-2 relative transition-all ${r ? "color-border-active" : "color-border-default"}`,
+                        className: "w-full h-10 rounded-xl transition-all flex items-center justify-center border color-border-default",
                         style: { backgroundColor: o.color },
-                        children: r && /* @__PURE__ */ f.jsx("div", { className: "absolute top-1.5 left-1.5 w-5 h-5 rounded-full color-bg-default-inverse flex items-center justify-center", children: /* @__PURE__ */ f.jsx(
+                        children: r && /* @__PURE__ */ f.jsx("div", { className: "w-5 h-5 rounded-full color-bg-default-inverse flex items-center justify-center", children: /* @__PURE__ */ f.jsx(
                           pe,
                           {
                             name: "Check",
@@ -66338,13 +66329,7 @@ const wNe = ({
                         ) })
                       }
                     ),
-                    /* @__PURE__ */ f.jsxs("span", { className: "text-helper-text-sm color-text-default", children: [
-                      o.label,
-                      o.comingSoon && /* @__PURE__ */ f.jsxs("span", { className: "color-text-secondary", children: [
-                        " ",
-                        "(Coming soon)"
-                      ] })
-                    ] })
+                    /* @__PURE__ */ f.jsx("span", { className: "text-helper-text-sm color-text-default whitespace-nowrap", children: o.label })
                   ]
                 },
                 o.value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse/ui",
-  "version": "5.0.1-sepia-4",
+  "version": "5.0.1-sepia-6",
   "files": [
     "/dist"
   ],