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

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@fileverse/ui",
-  "version": "5.3.3",
+  "version": "5.4.0-unstable-styles-1",
   "files": [
-    "/dist"
+    "/dist",
+    "/tailwind",
+    "!/tailwind/*.test.ts"
   ],
   "repository": {
     "type": "git",
@@ -14,11 +16,13 @@
     ".": {
       "import": "./dist/index.es.js"
     },
-    "./styles": "./dist/index.css"
+    "./styles": "./dist/index.css",
+    "./styles/base": "./dist/base.css",
+    "./tailwind": "./tailwind/preset.cjs"
   },
   "scripts": {
     "dev": "vite",
-    "build-css": "postcss src/index.css -o dist/index.css",
+    "build-css": "postcss src/base.css -o dist/base.css && postcss src/index.css -o dist/tailwind.css && cat dist/tailwind.css dist/base.css > dist/index.css && rm dist/tailwind.css",
     "build": "tsc --project tsconfig.json && vite build && npm run build-css",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -54,6 +58,8 @@
     "emoji-picker-react": "^4.11.1",
     "framer-motion": "^11.18.2",
     "lucide-react": "^0.475.0",
+    "postcss": "^8.5.28",
+    "postcss-js": "^4.1.0",
     "react-day-picker": "^8.10.1",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
@@ -62,7 +68,8 @@
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
@@ -100,7 +107,6 @@
     "husky": "^9.1.4",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.7",
-    "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "prettier": "^3.3.3",
     "storybook": "^8.1.9",
@@ -120,4 +126,4 @@
       "npx prettier --write"
     ]
   }
-}
+}

package/tailwind/components.css

@@ -0,0 +1,472 @@
+.font-smoothed {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.text-heading-2xlg {
+  font-family: system-ui;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 40px;
+}
+
+.text-heading-xlg {
+  font-family: system-ui;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.text-heading-xlg-bold {
+  font-family: system-ui;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}
+
+.text-heading-lg {
+  font-family: system-ui;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+.text-heading-lg-bold {
+  font-family: system-ui;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.text-heading-md {
+  font-family: system-ui;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+.text-heading-md-bold {
+  font-family: system-ui;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.text-heading-sm {
+  font-family: system-ui;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.text-heading-sm-bold {
+  font-family: system-ui;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.text-heading-xsm {
+  font-family: system-ui;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.text-heading-xsm-bold {
+  font-family: system-ui;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+.text-body-md {
+  font-family: system-ui;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.text-body-md-bold {
+  font-family: system-ui;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.text-body-sm {
+  font-family: system-ui;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.text-body-sm-bold {
+  font-family: system-ui;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.text-helper-text-sm {
+  font-family: system-ui;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.text-helper-link {
+  font-family: system-ui;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-decoration: underline;
+}
+
+.color-text-default {
+  color: hsl(var(--color-text-default));
+}
+
+.color-text-secondary {
+  color: hsl(var(--color-text-secondary));
+}
+
+.color-text-disabled {
+  color: hsl(var(--color-text-disabled));
+}
+
+.color-text-danger {
+  color: hsl(var(--color-text-danger));
+}
+
+.color-text-success {
+  color: hsl(var(--color-text-success));
+}
+
+.color-text-link {
+  color: hsl(var(--color-text-link));
+}
+
+.color-text-inverse {
+  color: hsl(var(--color-text-inverse));
+}
+
+.color-text-on-brand {
+  color: hsl(var(--color-text-on-brand));
+}
+
+.color-bg-default {
+  background-color: hsl(var(--color-bg-default));
+}
+
+.color-bg-default-hover {
+  background-color: hsl(var(--color-bg-default-hover));
+}
+
+.color-bg-default-active {
+  background-color: hsl(var(--color-bg-default-active));
+}
+
+.color-bg-default-selected {
+  background-color: hsl(var(--color-bg-default-selected));
+}
+
+.color-bg-secondary {
+  background-color: hsl(var(--color-bg-secondary));
+}
+
+.color-bg-secondary-hover {
+  background-color: hsl(var(--color-bg-secondary-hover));
+}
+
+.color-bg-tertiary {
+  background-color: hsl(var(--color-bg-tertiary));
+}
+
+.color-bg-disabled {
+  background-color: hsl(var(--color-bg-disabled));
+}
+
+.color-bg-brand {
+  background-color: hsl(var(--color-bg-brand));
+}
+
+.color-bg-brand-hover {
+  background-color: hsl(var(--color-bg-brand-hover));
+}
+
+.color-bg-brand-light {
+  background-color: hsl(var(--color-bg-brand-light));
+}
+
+.color-bg-danger {
+  background-color: hsl(var(--color-bg-danger));
+}
+
+.color-bg-danger-light {
+  background-color: hsl(var(--color-bg-danger-light));
+}
+
+.color-bg-success-light {
+  background-color: hsl(var(--color-bg-success-light));
+}
+
+.color-bg-info-light {
+  background-color: hsl(var(--color-bg-info-light));
+}
+
+.color-bg-success {
+  background-color: hsl(var(--color-bg-success));
+}
+
+.color-bg-default-inverse {
+  background-color: hsl(var(--color-bg-default-inverse));
+}
+
+.color-bg-tooltip {
+  background-color: hsl(var(--color-bg-tooltip));
+}
+
+.color-text-tooltip {
+  color: hsl(var(--color-text-tooltip));
+}
+
+.color-bg-inline-comment {
+  background-color: hsl(var(--color-inline-comment));
+}
+
+.color-bg-inline-comment-active {
+  background-color: hsl(var(--color-inline-comment-active));
+}
+
+.color-bg-transparent {
+  background-color: hsl(var(--color-bg-transparent));
+}
+
+.color-button-default {
+  background-color: hsl(var(--color-button-default));
+  border-color: hsl(var(--color-button-default));
+}
+
+.color-button-default-hover {
+  background-color: hsl(var(--color-button-default-hover));
+}
+
+.color-button-secondary {
+  border: 2px solid hsl(var(--color-border-active));
+}
+
+.color-button-secondary-hover {
+  background-color: hsl(var(--color-button-secondary-hover));
+}
+
+.color-button-disabled {
+  background-color: hsl(var(--color-button-disabled));
+  border-color: hsl(var(--color-button-disabled));
+  color: hsl(var(--color-text-disabled));
+}
+
+.color-button-danger {
+  background-color: hsl(var(--color-button-danger));
+  border-color: hsl(var(--color-button-danger));
+}
+
+.color-button-danger-hover {
+  background-color: hsl(var(--color-button-danger-hover));
+}
+
+.color-button-floating {
+  background-color: hsl(var(--color-button-floating));
+  border-color: hsl(var(--color-border-default));
+}
+
+.color-button-floating-hover {
+  background-color: hsl(var(--color-button-floating-hover));
+}
+
+.color-border-default {
+  border-color: hsl(var(--color-border-default));
+}
+
+.color-border-toast-warning {
+  border-left-color: hsl(var(--color-border-warning));
+}
+
+.color-border-toast-error {
+  border-left-color: hsl(var(--color-border-danger));
+}
+
+.color-border-toast-success {
+  border-left-color: hsl(var(--color-border-success));
+}
+
+.color-border-toast-info {
+  border-left-color: hsl(var(--color-border-info));
+}
+
+.color-border-hover {
+  border-color: hsl(var(--color-border-hover));
+}
+
+.color-border-light {
+  border-color: hsl(var(--color-border-light));
+}
+
+.color-border-active {
+  border-color: hsl(var(--color-border-active));
+}
+
+.color-border-focused {
+  border-color: hsl(var(--color-border-focused));
+}
+
+.color-border-warning {
+  border-color: hsl(var(--color-border-warning));
+}
+
+.color-border-success {
+  border-color: hsl(var(--color-border-success));
+}
+
+.color-border-info {
+  border-color: hsl(var(--color-border-info));
+}
+
+.color-border-disabled {
+  border-color: hsl(var(--color-border-disabled));
+}
+
+.color-border-danger {
+  border-color: hsl(var(--color-border-danger));
+}
+
+.color-icon-default {
+  background-color: hsl(var(--color-icon-default));
+}
+
+.color-icon-default-hover {
+  color: hsl(var(--color-icon-default-hover));
+}
+
+.color-icon-brand {
+  color: hsl(var(--color-icon-brand));
+}
+
+.color-icon-secondary {
+  color: hsl(var(--color-icon-secondary));
+}
+
+.color-icon-disabled {
+  background-color: hsl(var(--color-icon-disabled));
+}
+
+.color-icon-inverse {
+  color: hsl(var(--color-icon-inverse));
+}
+
+.color-icon-success {
+  color: hsl(var(--color-icon-success));
+}
+
+.color-icon-danger {
+  color: hsl(var(--color-icon-danger));
+}
+
+.color-icon-warning {
+  color: hsl(var(--color-icon-warning));
+}
+
+.color-icon-info {
+  color: hsl(var(--color-icon-info));
+}
+
+.color-icon-on-brand {
+  color: hsl(var(--color-icon-on-brand));
+}
+
+.color-utility-overlay {
+  background-color: hsl(var(--color-utility-overlay));
+}
+
+.shadow-elevation-1 {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.shadow-elevation-2 {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.shadow-elevation-3 {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.shadow-elevation-4 {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+.divider-y-sm {
+  border-right-width: 0px;
+  border-left-width: 0.5px;
+  border-left-color: hsl(var(--color-border-default));
+}
+
+.divider-y-md {
+  border-right-width: 0px;
+  border-left-width: 1px;
+  border-left-color: hsl(var(--color-border-default));
+}
+
+.divider-y-lg {
+  border-right-width: 0px;
+  border-left-width: 2px;
+  border-left-color: hsl(var(--color-border-default));
+}
+
+.divider-y-xlg {
+  border-right-width: 0px;
+  border-left-width: 4px;
+  border-left-color: hsl(var(--color-border-default));
+}
+
+.divider-x-sm {
+  border-bottom-width: 0px;
+  border-top-width: 0.5px;
+  border-left-color: hsl(var(--color-border-default));
+}
+
+.divider-x-md {
+  border-bottom-width: 0px;
+  border-top-width: 1px;
+  border-top-color: hsl(var(--color-border-default));
+}
+
+.divider-x-lg {
+  border-bottom-width: 0px;
+  border-top-width: 2px;
+  border-top-color: hsl(var(--color-border-default));
+}
+
+.divider-x-xlg {
+  border-bottom-width: 0px;
+  border-top-width: 4px;
+  border-top-color: hsl(var(--color-border-default));
+}
+
+.avatar-sm {
+  border-radius: 4px;
+  border-width: 2px;
+}
+
+.avatar-lg {
+  border-radius: 8px;
+  border-width: 4px;
+}
+
+.toggle-default {
+  background-color: hsl(var(--color-bg-disabled));
+}
+
+.toggle-active {
+  background-color: hsl(var(--color-bg-brand));
+}

package/tailwind/preset.cjs

@@ -0,0 +1,44 @@
+const fs = require("fs")
+const path = require("path")
+const postcss = require("postcss")
+const postcssJs = require("postcss-js")
+const plugin = require("tailwindcss/plugin")
+
+// components.css is the single source of truth for the design-system classes.
+const components = postcssJs.objectify(
+  postcss.parse(fs.readFileSync(path.join(__dirname, "components.css"), "utf8")),
+)
+
+module.exports = {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      colors: {
+        focused: "hsl(var(--focused))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    plugin(({ addComponents }) => addComponents(components)),
+  ],
+}