@lotte-innovate/ui-component-test 0.0.25 → 0.0.27

package/dist/lib/index.d.ts

@@ -1,2 +1,3 @@
+import './index.css';
 export * from './components';
 export * from './Typography';

package/dist/lib/index.js

@@ -1,2 +1,3 @@
+import './index.css';
 export * from './components';
 export * from './Typography';

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@lotte-innovate/ui-component-test",
   "description": "Lotte UI Library",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "private": false,
   "type": "module",
   "files": [
-    "dist/lib"
+    "dist/lib",
+    "tailwind.config.ts"
   ],
   "main": "dist/lib/index.js",
   "module": "dist/lib/index.js",
@@ -35,12 +36,14 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build && tsc",
+    "build:css": "npx tailwindcss -i ./src/app/styles.css -o ./dist/lib/index.css",
+    "copy:css": "copyfiles -u 1 src/app/styles.css dist/lib",
     "prepare": "next build",
     "start": "next start",
     "lint": "next lint",
     "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish:npm": "rimraf dist && mkdir dist && tsc && tsc-alias",
+    "publish:npm": "rimraf dist && mkdir dist && tsc && tsc-alias && npm run build:css",
     "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
@@ -109,6 +112,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "chromatic": "^11.5.4",
+    "copyfiles": "^2.4.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.4",
     "eslint-plugin-storybook": "^0.8.0",

package/tailwind.config.ts

@@ -0,0 +1,163 @@
+import type { Config } from 'tailwindcss';
+import * as lightColors from './src/lib/color/light';
+import * as darkColors from './src/lib/color/dark';
+import * as alphaColors from './src/lib/color/alpha';
+import { colorOptions, alphaColorOptions, darkColorOptions } from './src/lib/color/constants';
+
+let classes: string[] = [];
+let darkClasses: string[] = [];
+
+const colorScale = Array.from({ length: 12 }, (_, i) => (i + 1).toString());
+const allColorOptions = [colorOptions, alphaColorOptions];
+
+const generateClasses = (colorList: string[], colorScale: string[]): string[] => {
+  const classPrefixes = ['accent', 'fill', 'border', 'outline', 'bg', 'text'];
+  return colorList.flatMap((color) =>
+    colorScale.flatMap((scale) => classPrefixes.map((prefix) => `${prefix}-${color}-${scale}`)),
+  );
+};
+
+const generateDarkClasses = (colorList: string[], colorScale: string[]): string[] => {
+  const classPrefixes = [
+    'dark:accent',
+    'dark:fill',
+    'dark:outline',
+    'dark:border',
+    'dark:bg',
+    'dark:text',
+    'dark:hover:bg',
+    'dark:hover:border',
+    'dark:hover:text',
+    'dark:active:bg',
+    'dark:active:border',
+    'dark:active:text',
+    'dark:before:checked:bg',
+    'dark:data-[state=on]:bg',
+    'dark:data-[state=open]:bg',
+    'dark:data-[state=on]:text',
+    'dark:data-[state=on]:hover:bg',
+    'dark:data-[state=on]:hover:border',
+    'dark:data-[state=on]:hover:text',
+  ];
+
+  return colorList.flatMap((color) =>
+    colorScale.flatMap((scale) => classPrefixes.map((prefix) => `${prefix}-${color}-${scale}`)),
+  );
+};
+
+allColorOptions.forEach((options) => {
+  classes = classes.concat(generateClasses(options, colorScale));
+});
+
+darkClasses.push(...generateDarkClasses(darkColorOptions, colorScale));
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
+    './src/**/*.{js,ts,jsx,tsx,mdx,zip}',
+  ],
+  safelist: [
+    ...classes,
+    ...classes.map((cls) => `hover:${cls}`),
+    ...classes.map((cls) => `active:${cls}`),
+    ...classes.map((cls) => `before:${cls}`),
+    ...classes.map((cls) => `data-[state=checked]:${cls}`),
+    ...classes.map((cls) => `data-[state=unchecked]:${cls}`),
+    ...classes.map((cls) => `data-[state=on]:${cls}`),
+    ...classes.map((cls) => `data-[state=on]:hover:${cls}`),
+    ...classes.map((cls) => `data-[state=open]:${cls}`),
+    ...classes.map((cls) => `after:checked:${cls}`),
+    ...classes.map((cls) => `before:checked:${cls}`),
+    ...darkClasses,
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Noto Sans KR', 'sans-serif', 'Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial'],
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      colors: {
+        danger: '#C40006',
+        warning: '#AB6400',
+        success: '#00713F',
+        information: '#00749E',
+        ...formatColors(lightColors),
+        ...formatColors(darkColors),
+        ...formatColors(alphaColors),
+      },
+      // radix tailwind
+      keyframes: {
+        overlayShow: {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        contentShow: {
+          from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+          to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+        },
+        slideDown: {
+          from: { height: '0px' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        slideUp: {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0px' },
+        },
+      },
+      animation: {
+        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+      },
+      boxShadow: {
+        'button-classic':
+          '0px 0px 0px 1px #00002D17 inset, 0px -2px 1px 0px #0000330F inset, 0px 4px 2px -2px #FFFFFFB2 inset, 0px 2px 1px -1px #FFFFFFB2 inset',
+        'checkbox-classic':
+          '0px 0px 0px 1px #00002D17 inset, 0px -2px 1px 0px #0000330F inset, 0px 4px 2px -2px #FFFFFF66 inset, 0px 2px 1px -1px #FFFFFF66 inset',
+        'button-dark-classic':
+          '0px 0px 0px 1px #414142 inset, 0px -2px 1px 0px #414142 inset, 0px 4px 2px -2px #414142 inset, 0px 2px 1px -1px #414142 inset',
+        'card-classic':
+          '0px 0px 0px 0.5px #0000000D, 0px 1px 4px 0px #00002D17, 0px 2px 1px -1px #0000000D, 0px 1px 3px 0px #0000000D',
+        'card-dark-classic':
+          '0px 0px 0px 0.5px #414142, 0px 1px 4px 0px #414142, 0px 2px 1px -1px #414142, 0px 1px 3px 0px #414142',
+        'segmented-control-dark-classic':
+          '0px 0px 0px 0.5px #0000000D, 0px 1px 4px 0px #363636, 0px 2px 1px -1px #0000000D, 0px 1px 3px 0px #0000000D',
+      },
+    },
+  },
+  plugins: [
+    function ({ addVariant }) {
+      addVariant('data-placeholder', '&:where([data-placeholder])');
+    },
+  ],
+
+  darkMode: 'class',
+};
+
+/**
+ * tailwind 방식으로 변경
+ * ex) bg-yellow-3
+ */
+function formatColors(colors: Record<string, Record<string, string>>) {
+  const formatcolors: Record<string, string> = {};
+
+  for (const [cn, c] of Object.entries(colors)) {
+    for (const [scale, value] of Object.entries(c)) {
+      if (!scale) {
+        continue;
+      }
+
+      formatcolors[`${cn}-${scale}`] = value;
+    }
+  }
+
+  return formatcolors;
+}
+
+export default config;