@fileverse/ui 5.1.0 → 5.1.1-green-2

package/dist/index.css

@@ -799,6 +799,79 @@ video {
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
+
+  .theme-green {
+    /* Button */
+    --color-button-default: 63, 15%, 74%, 1; /* #C6C7B3 */
+    --color-button-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
+    --color-button-secondary: 120, 9%, 24%, 1; /* #384338 */
+    --color-button-secondary-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
+    --color-button-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+    --color-button-danger: 2, 99%, 68%, 1; /* #FE625D */
+    --color-button-danger-hover: 2, 99%, 72%, 1; /* #FE7571 */
+    --color-button-floating: 120, 9%, 24%, 1; /* #384338 */
+    --color-button-floating-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
+
+    /* Text */
+    --color-text-default: 62, 27%, 83%, 1; /* #DFE0C9 */
+    --color-text-secondary: 84, 5%, 56%, 1; /* #909688 */
+    --color-text-disabled: 104, 7%, 42%, 1; /* #687364 */
+    --color-text-danger: 2, 99%, 68%, 1; /* #FE625D */
+    --color-text-success: 120, 46%, 55%, 1; /* #59C259 */
+    --color-text-inverse: 120, 6%, 16%, 1; /* #262B26 */
+    --color-text-link: 197, 78%, 64%, 1; /* #5BC3EB */
+    --color-text-on-brand: 120, 6%, 16%, 1; /* #262B26 */
+
+    /* Background */
+    --color-bg-default: 120, 9%, 24%, 1; /* #384338 */
+    --color-bg-default-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
+    --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-bg-default-selected: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+    --color-bg-secondary: 120, 6%, 16%, 1; /* #262B26 */
+    --color-bg-secondary-hover: 63, 15%, 74%, 0.08; /* #C6C7B3 8% */
+    --color-bg-disabled: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
+    --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
+    --color-bg-brand-light: 50, 89%, 89%, 1; /* #FCF4C9 */
+    --color-bg-danger: 2, 99%, 68%, 1; /* #FE625D */
+    --color-bg-danger-light: 2, 99%, 68%, 0.12; /* #FE625D 12% */
+    --color-bg-default-inverse: 120, 9%, 76%, 1; /* #BCC7BC */
+    --color-bg-tertiary: 63, 15%, 74%, 0.12; /* #C6C7B3 12% */
+    --color-bg-success: 120, 46%, 55%, 1; /* #59C259 */
+    --color-bg-success-light: 120, 46%, 55%, 0.16; /* #59C259 16% */
+
+    /* Border */
+    --color-border-default: 120, 8%, 30%, 1; /* #465346 */
+    --color-border-hover: 120, 8%, 36%, 1; /* #546354 */
+    --color-border-light: 120, 8%, 44%, 1; /* #677A67 */
+    --color-border-active: 62, 27%, 83%, 1; /* #DFE0C9 */
+    --color-border-focused: 197, 78%, 64%, 1; /* #5BC3EB */
+    --color-border-danger: 2, 99%, 68%, 1; /* #FE625D */
+    --color-border-warning: 10, 85%, 61%, 1; /* #F06449 */
+    --color-border-success: 120, 46%, 55%, 1; /* #59C259 */
+    --color-border-info: 197, 78%, 64%, 1; /* #5BC3EB */
+    --color-border-disabled: 104, 7%, 42%, 1; /* #687364 */
+
+    /* Icon */
+    --color-icon-default: 62, 27%, 83%, 1; /* #DFE0C9 */
+    --color-icon-default-hover: 65, 14%, 82%, 1; /* #D7D8CA */
+    --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-icon-secondary: 84, 5%, 56%, 1; /* #909688 */
+    --color-icon-disabled: 104, 7%, 42%, 1; /* #687364 */
+    --color-icon-inverse: 120, 6%, 16%, 1; /* #262B26 */
+    --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-icon-warning: 10, 85%, 61%, 1; /* #F06449 */
+    --color-icon-info: 197, 78%, 64%, 1; /* #5BC3EB */
+    --color-icon-success: 120, 46%, 55%, 1; /* #59C259 */
+    --color-icon-on-brand: 120, 6%, 16%, 1; /* #262B26 */
+
+    /* Tooltip */
+    --color-bg-tooltip: 120, 9%, 76%, 1; /* #BCC7BC */
+    --color-text-tooltip: 120, 9%, 24%, 1; /* #384338 */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
   * {
     border-color: hsl(var(--color-border-default));
     -webkit-font-smoothing: antialiased;
@@ -1319,6 +1392,9 @@ video {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-1 {
+  bottom: 0.25rem;
+}
 .bottom-2 {
   bottom: 0.5rem;
 }
@@ -2417,6 +2493,9 @@ video {
 .\!bg-transparent {
   background-color: transparent !important;
 }
+.bg-\[hsl\(var\(--color-bg-tooltip\)\)\] {
+  background-color: hsl(var(--color-bg-tooltip));
+}
 .bg-black\/5 {
   background-color: rgb(0 0 0 / 0.05);
 }
@@ -2437,6 +2516,9 @@ video {
 .bg-none {
   background-image: none;
 }
+.fill-\[hsl\(var\(--color-bg-tooltip\)\)\] {
+  fill: hsl(var(--color-bg-tooltip));
+}
 .stroke-\[hsl\(var\(--color-bg-default\)\)\] {
   stroke: hsl(var(--color-bg-default));
 }
@@ -2649,6 +2731,9 @@ video {
 .text-\[32px\] {
   font-size: 32px;
 }
+.text-\[9px\] {
+  font-size: 9px;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2689,6 +2774,9 @@ video {
 .leading-none {
   line-height: 1;
 }
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
 .tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -2705,6 +2793,9 @@ video {
 .text-\[hsl\(var\(--color-text-inverse\)\)\] {
   color: hsl(var(--color-text-inverse));
 }
+.text-\[hsl\(var\(--color-text-tooltip\)\)\] {
+  color: hsl(var(--color-text-tooltip));
+}
 .text-current {
   color: currentColor;
 }
@@ -2720,6 +2811,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-white\/60 {
+  color: rgb(255 255 255 / 0.6);
+}
 .underline {
   text-decoration-line: underline;
 }
@@ -3652,10 +3746,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
-.dark\:bg-\[\#000\]:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
 .dark\:\!text-\[\#363B3F\]:is(.dark *) {
   --tw-text-opacity: 1 !important;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;

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" | "theme-pink";
+declare type Theme = "light" | "dark" | "theme-sepia" | "theme-pink" | "theme-green";
 
 export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => JSX_2.Element;