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

package/tailwind.config.ts

@@ -1,163 +0,0 @@
-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;