@fileverse/ui 5.0.0 → 5.0.1-sepia-2

package/dist/index.css

@@ -644,6 +644,75 @@ video {
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
+
+  .sepia {
+    /* Button */
+    --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+    --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+    --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
+    --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+
+    /* Text */
+    --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+    --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+    --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-text-link: 199, 100%, 29%, 1; /* #006494 */
+    --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+    /* Background */
+    --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
+    --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
+    --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
+    --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
+    --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
+    --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
+    --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
+    --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+    --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
+    --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+
+    /* Border */
+    --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
+    --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
+    --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
+    --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
+    --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
+    --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-border-info: 199, 100%, 29%, 1; /* #006494 */
+    --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+
+    /* Icon */
+    --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+    --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+    --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+    --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
+    --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
+    --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
   * {
     border-color: hsl(var(--color-border-default));
     -webkit-font-smoothing: antialiased;
@@ -2238,8 +2307,8 @@ video {
 .border-transparent {
   border-color: transparent;
 }
-.border-l-\[hsl\(var\(--color-border-default\)\)\] {
-  border-left-color: hsl(var(--color-border-default));
+.border-l-\[hsl\(var\(--color-border-active\)\)\] {
+  border-left-color: hsl(var(--color-border-active));
 }
 .\!bg-transparent {
   background-color: transparent !important;
@@ -2261,8 +2330,8 @@ video {
 .bg-none {
   background-image: none;
 }
-.stroke-white {
-  stroke: #fff;
+.stroke-\[hsl\(var\(--color-bg-default\)\)\] {
+  stroke: hsl(var(--color-bg-default));
 }
 .object-contain {
   -o-object-fit: contain;
@@ -2596,6 +2665,10 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.sepia {
+  --tw-sepia: sepia(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3070,12 +3143,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=checked\]\:hover\:enabled\:color-bg-brand-hover:enabled:hover[data-state="checked"] {
     background-color: hsl(var(--color-bg-brand-hover));
   }
-.dark\:color-bg-disabled:is(.dark *) {
-    background-color: hsl(var(--color-bg-disabled));
-  }
-.dark\:data-\[state\=active\]\:color-border-light[data-state="active"]:is(.dark *) {
-    border-color: hsl(var(--color-border-light));
-  }
 @media (min-width: 1024px) {
 
   .lg\:\!text-heading-2xlg {
@@ -3139,9 +3206,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .hover\:\!border-transparent:hover {
   border-color: transparent !important;
 }
-.hover\:bg-\[rgba\(0\2c 0\2c 0\2c 0\.1\)\]:hover {
-  background-color: rgba(0,0,0,0.1);
-}
 .hover\:bg-inherit:hover {
   background-color: inherit;
 }
@@ -3448,16 +3512,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
-.dark\:border-l-\[hsl\(var\(--color-border-active\)\)\]:is(.dark *) {
-  border-left-color: hsl(var(--color-border-active));
-}
-.dark\:bg-\[\#000\]:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
-.dark\:stroke-black:is(.dark *) {
-  stroke: #000;
-}
 .dark\:\!text-\[\#363B3F\]:is(.dark *) {
   --tw-text-opacity: 1 !important;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;
@@ -3466,9 +3520,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   --tw-text-opacity: 1;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1));
 }
-.dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.2\)\]:hover:is(.dark *) {
-  background-color: rgba(255,255,255,0.2);
-}
 @media (min-width: 640px) {
 
   .sm\:max-w-fit {

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";
+declare type Theme = "light" | "dark" | "sepia";
 
 export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => JSX_2.Element;
 
@@ -1057,6 +1057,7 @@ export declare function useSortableData(initialData: TableDataProps[], defaultSo
 
 export declare const useTheme: () => {
     theme: Theme;
+    setTheme: (theme: Theme) => void;
     toggleTheme: () => void;
 };