@ivao/atmosphere-react 2.1.0-next.0 → 3.0.0-next.1

package/tailwind.preset.ts

@@ -1,238 +0,0 @@
-import { colors, fonts } from '@ivao/atmosphere-brand';
-
-import { type Config } from 'tailwindcss';
-import animatePlugin from 'tailwindcss-animate';
-import radixPlugin from 'tailwindcss-radix';
-import defaultTheme from 'tailwindcss/defaultTheme';
-
-interface Colors {
-  [key: string]: string | Colors;
-}
-
-const convertColorsToCSSVariables = (
-  colors: Colors,
-  prefix: string = '--',
-): Colors => {
-  return Object.entries(colors).reduce<Colors>((acc, [key, value]) => {
-    if (typeof value === 'object') {
-      return {
-        ...acc,
-        [key]: convertColorsToCSSVariables(
-          value,
-          `${prefix}${prefix.length === 2 ? '' : '-'}${key}`,
-        ),
-      };
-    } else {
-      return {
-        ...acc,
-        [key]:
-          'rgb(var(' +
-          (key === 'DEFAULT' ? prefix : `${prefix}-${key}`) +
-          ') / <alpha-value>)',
-      };
-    }
-  }, {});
-};
-
-const tailwindColors = convertColorsToCSSVariables(colors);
-
-export default {
-  darkMode: 'class',
-  safelist: ['dark'],
-  theme: {
-    screens: {
-      xs: '400px',
-      ...defaultTheme.screens,
-    },
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        ...tailwindColors,
-        /*
-         * Shadcn UI Color Palette for components
-         * @see ui.shadcn.com
-         */
-        body: 'rgb(var(--body) / <alpha-value>)',
-        border: 'rgb(var(--border) / <alpha-value>)',
-        input: 'rgb(var(--input) / <alpha-value>)',
-        ring: 'rgb(var(--ring) / <alpha-value>)',
-        background: 'rgb(var(--background) / <alpha-value>)',
-        foreground: 'rgb(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
-          foreground: 'rgb(var(--primary-foreground) / <alpha-value>)',
-        },
-        secondary: {
-          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
-          foreground: 'rgb(var(--secondary-foreground) / <alpha-value>)',
-        },
-        destructive: {
-          DEFAULT: 'rgb(var(--destructive) / <alpha-value>)',
-          foreground: 'rgb(var(--destructive-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT: 'rgb(var(--muted) / <alpha-value>)',
-          foreground: 'rgb(var(--muted-foreground) / <alpha-value>)',
-        },
-        accent: {
-          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
-          foreground: 'rgb(var(--accent-foreground) / <alpha-value>)',
-        },
-        popover: {
-          DEFAULT: 'rgb(var(--popover) / <alpha-value>)',
-          foreground: 'rgb(var(--popover-foreground) / <alpha-value>)',
-        },
-        card: {
-          DEFAULT: 'rgb(var(--card) / <alpha-value>)',
-          foreground: 'rgb(var(--card-foreground) / <alpha-value>)',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      fontFamily: {
-        head: [fonts.head],
-        sans: [fonts.sans, ...defaultTheme.fontFamily.sans],
-        mono: [fonts.mono, ...defaultTheme.fontFamily.mono],
-      },
-      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' },
-        },
-        // Dropdown menu
-        'scale-in': {
-          '0%': { opacity: '0', transform: 'scale(0)' },
-          '100%': { opacity: '1', transform: 'scale(1)' },
-        },
-        'slide-down': {
-          '0%': { opacity: '0', transform: 'translateY(-10px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        'slide-up': {
-          '0%': { opacity: '0', transform: 'translateY(10px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        // Tooltip
-        'slide-up-fade': {
-          '0%': { opacity: '0', transform: 'translateY(2px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        'slide-right-fade': {
-          '0%': { opacity: '0', transform: 'translateX(-2px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' },
-        },
-        'slide-down-fade': {
-          '0%': { opacity: '0', transform: 'translateY(-2px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        'slide-left-fade': {
-          '0%': { opacity: '0', transform: 'translateX(2px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' },
-        },
-        // Navigation menu
-        'enter-from-right': {
-          '0%': { transform: 'translateX(200px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
-        },
-        'enter-from-left': {
-          '0%': { transform: 'translateX(-200px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
-        },
-        'exit-to-right': {
-          '0%': { transform: 'translateX(0)', opacity: '1' },
-          '100%': { transform: 'translateX(200px)', opacity: '0' },
-        },
-        'exit-to-left': {
-          '0%': { transform: 'translateX(0)', opacity: '1' },
-          '100%': { transform: 'translateX(-200px)', opacity: '0' },
-        },
-        'scale-in-content': {
-          '0%': { transform: 'rotateX(-30deg) scale(0.9)', opacity: '0' },
-          '100%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
-        },
-        'scale-out-content': {
-          '0%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
-          '100%': { transform: 'rotateX(-10deg) scale(0.95)', opacity: '0' },
-        },
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'fade-out': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
-        },
-        // Toast
-        'toast-hide': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
-        },
-        'toast-slide-in-right': {
-          '0%': { transform: `translateX(calc(100% + 1rem))` },
-          '100%': { transform: 'translateX(0)' },
-        },
-        'toast-slide-in-bottom': {
-          '0%': { transform: `translateY(calc(100% + 1rem))` },
-          '100%': { transform: 'translateY(0)' },
-        },
-        'toast-swipe-out-x': {
-          '0%': { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
-          '100%': {
-            transform: `translateX(calc(100% + 1rem))`,
-          },
-        },
-        'toast-swipe-out-y': {
-          '0%': { transform: 'translateY(var(--radix-toast-swipe-end-y))' },
-          '100%': {
-            transform: `translateY(calc(100% + 1rem))`,
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        // Dropdown menu
-        'scale-in': 'scale-in 0.2s ease-in-out',
-        'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-        // Tooltip
-        'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-right-fade':
-          'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        // Navigation menu
-        'enter-from-right': 'enter-from-right 0.25s ease',
-        'enter-from-left': 'enter-from-left 0.25s ease',
-        'exit-to-right': 'exit-to-right 0.25s ease',
-        'exit-to-left': 'exit-to-left 0.25s ease',
-        'scale-in-content': 'scale-in-content 0.2s ease',
-        'scale-out-content': 'scale-out-content 0.2s ease',
-        'fade-in': 'fade-in 0.2s ease',
-        'fade-out': 'fade-out 0.2s ease',
-        // Toast
-        'toast-hide': 'toast-hide 100ms ease-in forwards',
-        'toast-slide-in-right':
-          'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'toast-slide-in-bottom':
-          'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'toast-swipe-out-x': 'toast-swipe-out-x 100ms ease-out forwards',
-        'toast-swipe-out-y': 'toast-swipe-out-y 100ms ease-out forwards',
-      },
-    },
-  },
-  plugins: [animatePlugin, radixPlugin],
-} satisfies Partial<Config>;