@fileverse/ui 5.4.0-unstable-styles-1 → 5.4.0

package/README.md

@@ -25,6 +25,11 @@ import './globals.css';              // your tailwind entry
 import '@fileverse/ui/styles/base';  // tokens, `*`/`body` rules, third-party overrides
 ```
 
+`styles/base` also ships the legacy `!important` spacing/border-radius utilities
+(`.space-*`, `.gap-*`, `.border-radius-*`, and friends) at the same position they held in the old
+bundle; if your own Tailwind theme defines spacing/radius keys with the same names, these
+`!important` rules win. Treat them as deprecated.
+
 2. Add the preset and scan the ui bundle in `tailwind.config.js`:
 
 ```js
@@ -32,12 +37,16 @@ module.exports = {
   presets: [require('@fileverse/ui/tailwind')],
   content: [
     './src/**/*.{ts,tsx}',
-    './node_modules/@fileverse/ui/dist/index.es.js',
+    './node_modules/@fileverse/ui/dist/**/*.{js,mjs}',
   ],
 };
 ```
 
-The preset sets `darkMode: ['class']`, adds `tailwindcss-animate`, and registers the `color-*`, `text-heading-*`, `text-body-*`, `shadow-elevation-*`, `divider-*`, `avatar-*`, and `toggle-*` classes, so variants such as `hover:color-bg-default-hover` work.
+The preset sets `darkMode: ['class']`, adds `tailwindcss-animate`, and registers the `color-*`, `text-heading-*`, `text-body-*`, `text-helper-text-sm`, `text-helper-link`, `font-smoothed`, `shadow-elevation-*`, `divider-*`, `avatar-*`, and `toggle-*` classes, so variants such as `hover:color-bg-default-hover` work.
+
+The `content` entry for `node_modules/@fileverse/ui/dist/**/*.{js,mjs}` is required: Tailwind 3 does not merge `content` from presets, and without it the design-system classes and the utilities the ui components use are purged from your build. The preset targets Tailwind 3.4; Tailwind 4 is not supported.
+
+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.
 
 ### Legacy bundle (deprecated)
 

package/dist/base.css

@@ -402,7 +402,9 @@
   --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 }
 
-* {
+*,
+::before,
+::after {
   border-color: hsl(var(--color-border-default));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -414,12 +416,6 @@ body {
   color: hsl(var(--color-text-default));
 }
 
-/** COLORS **/
-
-/* ELEVATIONS */
-
-/* DIVIDERS */
-
 #selected-value > div > div > p {
   display: none;
 }

package/dist/index.css

@@ -816,16 +816,24 @@ video {
   background-color: hsl(var(--color-utility-overlay));
 }
 .shadow-elevation-1 {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .shadow-elevation-2 {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .shadow-elevation-3 {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .shadow-elevation-4 {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .divider-y-sm {
   border-right-width: 0px;
@@ -3767,7 +3775,9 @@ video {
   --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 }
 
-* {
+*,
+::before,
+::after {
   border-color: hsl(var(--color-border-default));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -3779,12 +3789,6 @@ body {
   color: hsl(var(--color-text-default));
 }
 
-/** COLORS **/
-
-/* ELEVATIONS */
-
-/* DIVIDERS */
-
 #selected-value > div > div > p {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse/ui",
-  "version": "5.4.0-unstable-styles-1",
+  "version": "5.4.0",
   "files": [
     "/dist",
     "/tailwind",
@@ -71,6 +71,11 @@
     "react-dom": "^18.2.0 || ^19.0.0",
     "tailwindcss": "^3.4.0"
   },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
     "@storybook/addon-actions": "^8.1.9",

package/tailwind/components.css

@@ -390,19 +390,27 @@
 }
 
 .shadow-elevation-1 {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-elevation-2 {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-elevation-3 {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-elevation-4 {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --tw-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .divider-y-sm {

package/tailwind/preset.cjs

@@ -39,6 +39,8 @@ module.exports = {
   },
   plugins: [
     require("tailwindcss-animate"),
-    plugin(({ addComponents }) => addComponents(components)),
+    plugin(({ addComponents }) =>
+      addComponents(components, { respectPrefix: false }),
+    ),
   ],
 }