@fileverse/ui 5.4.0 → 5.4.2

package/README.md

@@ -48,6 +48,8 @@ The `content` entry for `node_modules/@fileverse/ui/dist/**/*.{js,mjs}` is requi
 
 That literal `node_modules` path assumes a hoisted install; under pnpm, Yarn PnP, or a monorepo workspace it won't resolve, so point `content` at the package's actual install location instead.
 
+The preset loads `tailwindcss`, `postcss`, and `postcss-js` from your project; they are optional peer dependencies, and a Tailwind 3.4 install already provides all three. Under a strict resolver (Yarn PnP, pnpm with hoisting off) add `postcss` and `postcss-js` to your own devDependencies.
+
 ### Legacy bundle (deprecated)
 
 `import '@fileverse/ui/styles'` still works and ships a full Tailwind build (preflight and utilities included). It is deprecated: it duplicates your own Tailwind output and its classes are purged against the ui's source, not yours. Migrate to the setup above.

package/dist/base.css

@@ -402,6 +402,88 @@
   --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 }
 
+.theme-palm {
+  /* Palm (TEC-3020): Sepia is the base; only the paper/ink family changes,
+     taken from the sunlit-editor prototype (paper #EFE5C8, ink #3D3626). */
+
+  /* Button */
+  --color-button-default: 43, 24%, 15%, 1; /* #2F2A1D */
+  --color-button-default-hover: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-button-secondary: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-button-secondary-hover: 42, 23%, 19%, 0.06; /* #3D3626 6% */
+  --color-button-disabled: 42, 23%, 19%, 0.04; /* #3D3626 4% */
+  --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
+  --color-button-floating: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-button-floating-hover: 42, 23%, 19%, 0.06; /* #3D3626 6% */
+
+  /* Text */
+  --color-text-default: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-text-secondary: 46, 16%, 46%, 1; /* #8A8163 */
+  --color-text-disabled: 43, 14%, 56%, 1; /* #9F967F */
+  --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-text-inverse: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-text-link: 199, 100%, 29%, 1; /* #006494 */
+  --color-text-on-brand: 42, 23%, 19%, 1; /* #3D3626 */
+
+  /* Background */
+  --color-bg-default: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-bg-default-hover: 42, 23%, 19%, 0.08; /* #3D3626 8% */
+  --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-bg-default-selected: 42, 23%, 19%, 0.1; /* #3D3626 10% */
+  --color-bg-secondary: 44, 48%, 82%, 1; /* #E7DBBA */
+  --color-bg-secondary-hover: 42, 23%, 19%, 0.12; /* #3D3626 12% */
+  --color-bg-disabled: 42, 23%, 19%, 0.04; /* #3D3626 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: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-bg-tertiary: 44, 40%, 82%, 1; /* #E3D9BD */
+  --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+  --color-bg-info-light: 199, 45%, 87%, 1;
+
+  /* Border */
+  --color-border-default: 44, 31%, 77%, 1; /* #D6CCB1 */
+  --color-border-hover: 45, 22%, 69%, 1; /* #C1B89E */
+  --color-border-light: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-border-active: 42, 23%, 19%, 1; /* #3D3626 */
+  --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: 43, 14%, 56%, 1; /* #9F967F */
+
+  /* Icon */
+  --color-icon-default: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-icon-default-hover: 43, 19%, 26%, 1; /* #4F4836 */
+  --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-icon-secondary: 46, 16%, 46%, 1; /* #8A8163 */
+  --color-icon-disabled: 43, 14%, 56%, 1; /* #9F967F */
+  --color-icon-inverse: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --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: 42, 23%, 19%, 1; /* #3D3626 */
+
+  /* Tooltip */
+  --color-bg-tooltip: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-text-tooltip: 45, 55%, 86%, 1; /* #EFE5C8 */
+
+  /* Inline Comment */
+  --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
+  --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
+
+  /* Utility */
+  --color-bg-transparent: 42, 23%, 19%, 0.04; /* #3D3626 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+}
+
 *,
 ::before,
 ::after {

package/dist/index.css

@@ -1019,6 +1019,9 @@ video {
 .top-4 {
   top: 1rem;
 }
+.top-\[-41px\] {
+  top: -41px;
+}
 .top-\[4rem\] {
   top: 4rem;
 }
@@ -1240,6 +1243,9 @@ video {
 .h-\[68px\] {
   height: 68px;
 }
+.h-\[71px\] {
+  height: 71px;
+}
 .h-\[85vh\] {
   height: 85vh;
 }
@@ -1440,6 +1446,9 @@ video {
 .w-\[48px\] {
   width: 48px;
 }
+.w-\[51px\] {
+  width: 51px;
+}
 .w-\[564px\] {
   width: 564px;
 }
@@ -3775,6 +3784,88 @@ video {
   --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 }
 
+.theme-palm {
+  /* Palm (TEC-3020): Sepia is the base; only the paper/ink family changes,
+     taken from the sunlit-editor prototype (paper #EFE5C8, ink #3D3626). */
+
+  /* Button */
+  --color-button-default: 43, 24%, 15%, 1; /* #2F2A1D */
+  --color-button-default-hover: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-button-secondary: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-button-secondary-hover: 42, 23%, 19%, 0.06; /* #3D3626 6% */
+  --color-button-disabled: 42, 23%, 19%, 0.04; /* #3D3626 4% */
+  --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
+  --color-button-floating: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-button-floating-hover: 42, 23%, 19%, 0.06; /* #3D3626 6% */
+
+  /* Text */
+  --color-text-default: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-text-secondary: 46, 16%, 46%, 1; /* #8A8163 */
+  --color-text-disabled: 43, 14%, 56%, 1; /* #9F967F */
+  --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
+  --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-text-inverse: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-text-link: 199, 100%, 29%, 1; /* #006494 */
+  --color-text-on-brand: 42, 23%, 19%, 1; /* #3D3626 */
+
+  /* Background */
+  --color-bg-default: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-bg-default-hover: 42, 23%, 19%, 0.08; /* #3D3626 8% */
+  --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-bg-default-selected: 42, 23%, 19%, 0.1; /* #3D3626 10% */
+  --color-bg-secondary: 44, 48%, 82%, 1; /* #E7DBBA */
+  --color-bg-secondary-hover: 42, 23%, 19%, 0.12; /* #3D3626 12% */
+  --color-bg-disabled: 42, 23%, 19%, 0.04; /* #3D3626 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: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-bg-tertiary: 44, 40%, 82%, 1; /* #E3D9BD */
+  --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
+  --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+  --color-bg-info-light: 199, 45%, 87%, 1;
+
+  /* Border */
+  --color-border-default: 44, 31%, 77%, 1; /* #D6CCB1 */
+  --color-border-hover: 45, 22%, 69%, 1; /* #C1B89E */
+  --color-border-light: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --color-border-active: 42, 23%, 19%, 1; /* #3D3626 */
+  --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: 43, 14%, 56%, 1; /* #9F967F */
+
+  /* Icon */
+  --color-icon-default: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-icon-default-hover: 43, 19%, 26%, 1; /* #4F4836 */
+  --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+  --color-icon-secondary: 46, 16%, 46%, 1; /* #8A8163 */
+  --color-icon-disabled: 43, 14%, 56%, 1; /* #9F967F */
+  --color-icon-inverse: 45, 55%, 86%, 1; /* #EFE5C8 */
+  --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: 42, 23%, 19%, 1; /* #3D3626 */
+
+  /* Tooltip */
+  --color-bg-tooltip: 42, 23%, 19%, 1; /* #3D3626 */
+  --color-text-tooltip: 45, 55%, 86%, 1; /* #EFE5C8 */
+
+  /* Inline Comment */
+  --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
+  --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
+
+  /* Utility */
+  --color-bg-transparent: 42, 23%, 19%, 0.04; /* #3D3626 4% */
+  --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+}
+
 *,
 ::before,
 ::after {

package/dist/index.es.d.ts

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