@fileverse/ui 5.0.1-sepia-3 → 5.0.1-sepia-5

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,6 +1314,9 @@ video {
 .left-1 {
   left: 0.25rem;
 }
+.left-1\.5 {
+  left: 0.375rem;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -1281,6 +1353,9 @@ video {
 .top-0 {
   top: 0px;
 }
+.top-1\.5 {
+  top: 0.375rem;
+}
 .top-1\/2 {
   top: 50%;
 }
@@ -1351,6 +1426,9 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1450,6 +1528,12 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-16 {
+  height: 4rem;
+}
+.h-3 {
+  height: 0.75rem;
+}
 .h-3\.5 {
   height: 0.875rem;
 }
@@ -1541,6 +1625,9 @@ video {
 .max-h-40 {
   max-height: 10rem;
 }
+.max-h-7 {
+  max-height: 1.75rem;
+}
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1614,6 +1701,9 @@ video {
 .w-24 {
   width: 6rem;
 }
+.w-3 {
+  width: 0.75rem;
+}
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -2049,6 +2139,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-1\.5 {
+  gap: 0.375rem;
+}
 .gap-10 {
   gap: 2.5rem;
 }
@@ -2313,6 +2406,9 @@ video {
 .\!bg-transparent {
   background-color: transparent !important;
 }
+.bg-black\/5 {
+  background-color: rgb(0 0 0 / 0.05);
+}
 .bg-green-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
@@ -2350,6 +2446,9 @@ video {
 .p-1 {
   padding: 0.25rem;
 }
+.p-1\.5 {
+  padding: 0.375rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2381,6 +2480,10 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2409,6 +2512,10 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.px-\[3px\] {
+  padding-left: 3px;
+  padding-right: 3px;
+}
 .px-px {
   padding-left: 1px;
   padding-right: 1px;
@@ -2575,6 +2682,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 129 138 / var(--tw-text-opacity, 1));
 }
+.text-\[hsl\(var\(--color-bg-default\)\)\] {
+  color: hsl(var(--color-bg-default));
+}
+.text-\[hsl\(var\(--color-icon-secondary\)\)\] {
+  color: hsl(var(--color-icon-secondary));
+}
 .text-\[hsl\(var\(--color-text-inverse\)\)\] {
   color: hsl(var(--color-text-inverse));
 }
@@ -2608,6 +2721,9 @@ video {
 .opacity-50 {
   opacity: 0.5;
 }
+.opacity-60 {
+  opacity: 0.6;
+}
 .opacity-90 {
   opacity: 0.9;
 }
@@ -2635,6 +2751,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.outline {
+  outline-style: solid;
+}
+.outline-1 {
+  outline-width: 1px;
+}
+.outline-offset-\[-1px\] {
+  outline-offset: -1px;
+}
+.outline-\[hsl\(var\(--color-border-default\)\)\] {
+  outline-color: hsl(var(--color-border-default));
+}
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3208,6 +3336,9 @@ 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;