@dreamcommerce/aurora 3.0.0-13 → 3.0.0-130

package/build/tailwind.config.js

@@ -1,5 +1,3 @@
-const { fontFamily } = require('tailwindcss/defaultTheme');
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     prefix: 'aurora-',
@@ -8,296 +6,359 @@ module.exports = {
     theme: {
         colors: {
             brand: {
-                50: 'var(--brand-50)',
-                500: 'var(--brand-500)',
-                700: 'var(--brand-700)',
-                800: 'var(--brand-800)',
-                900: 'var(--brand-900)'
+                50: 'var(--a-brand-50)',
+                500: 'var(--a-brand-500)',
+                700: 'var(--a-brand-700)',
+                800: 'var(--a-brand-800)',
+                900: 'var(--a-brand-900)'
             },
             'brand-helpful': {
-                500: 'var(--brand-helpful-500)'
+                500: 'var(--a-brand-helpful-500)'
             },
             neutral: {
-                0: 'var(--neutral-0)',
-                50: 'var(--neutral-50)',
-                100: 'var(--neutral-100)',
-                200: 'var(--neutral-200)',
-                500: 'var(--neutral-500)',
-                600: 'var(--neutral-600)',
-                700: 'var(--neutral-700)',
-                800: 'var(--neutral-800)',
-                900: 'var(--neutral-900)'
+                0: 'var(--a-neutral-0)',
+                50: 'var(--a-neutral-50)',
+                100: 'var(--a-neutral-100)',
+                200: 'var(--a-neutral-200)',
+                500: 'var(--a-neutral-500)',
+                600: 'var(--a-neutral-600)',
+                700: 'var(--a-neutral-700)',
+                800: 'var(--a-neutral-800)',
+                900: 'var(--a-neutral-900)'
             },
             green: {
-                50: 'var(--green-50)',
-                100: 'var(--green-100)',
-                300: 'var(--green-300)',
-                500: 'var(--green-500)',
-                600: 'var(--green-600)',
-                700: 'var(--green-700)',
-                900: 'var(--green-900)'
+                50: 'var(--a-green-50)',
+                100: 'var(--a-green-100)',
+                300: 'var(--a-green-300)',
+                500: 'var(--a-green-500)',
+                600: 'var(--a-green-600)',
+                700: 'var(--a-green-700)',
+                900: 'var(--a-green-900)'
             },
             red: {
-                50: 'var(--red-50)',
-                100: 'var(--red-100)',
-                300: 'var(--red-300)',
-                500: 'var(--red-500)',
-                600: 'var(--red-600)',
-                700: 'var(--red-700)',
-                900: 'var(--red-900)'
+                50: 'var(--a-red-50)',
+                100: 'var(--a-red-100)',
+                300: 'var(--a-red-300)',
+                500: 'var(--a-red-500)',
+                600: 'var(--a-red-600)',
+                700: 'var(--a-red-700)',
+                900: 'var(--a-red-900)'
             },
             yellow: {
-                50: 'var(--yellow-50)',
-                100: 'var(--yellow-100)',
-                300: 'var(--yellow-300)',
-                500: 'var(--yellow-500)',
-                600: 'var(--yellow-600)',
-                700: 'var(--yellow-700)',
-                900: 'var(--yellow-900)'
+                50: 'var(--a-yellow-50)',
+                100: 'var(--a-yellow-100)',
+                300: 'var(--a-yellow-300)',
+                500: 'var(--a-yellow-500)',
+                600: 'var(--a-yellow-600)',
+                700: 'var(--a-yellow-700)',
+                900: 'var(--a-yellow-900)'
             },
             blue: {
-                50: 'var(--blue-50)',
-                100: 'var(--blue-100)',
-                300: 'var(--blue-300)',
-                500: 'var(--blue-500)',
-                600: 'var(--blue-600)',
-                700: 'var(--blue-700)',
-                900: 'var(--blue-900)'
+                50: 'var(--a-blue-50)',
+                100: 'var(--a-blue-100)',
+                300: 'var(--a-blue-300)',
+                500: 'var(--a-blue-500)',
+                600: 'var(--a-blue-600)',
+                700: 'var(--a-blue-700)',
+                900: 'var(--a-blue-900)'
             },
             'light-transparent': {
-                5: 'var(--light-transparent-5)',
-                0: 'var(--light-transparent-0)',
-                15: 'var(--light-transparent-15)',
-                20: 'var(--light-transparent-20)',
-                50: 'var(--light-transparent-50)',
-                70: 'var(--light-transparent-70)'
+                5: 'var(--a-light-transparent-5)',
+                0: 'var(--a-light-transparent-0)',
+                15: 'var(--a-light-transparent-15)',
+                20: 'var(--a-light-transparent-20)',
+                50: 'var(--a-light-transparent-50)',
+                70: 'var(--a-light-transparent-70)'
             },
             'dark-transparent': {
-                5: 'var(--dark-transparent-5)',
-                0: 'var(--dark-transparent-0)',
-                15: 'var(--dark-transparent-15)',
-                20: 'var(--dark-transparent-20)',
-                50: 'var(--dark-transparent-50)',
-                70: 'var(--dark-transparent-70)'
+                5: 'var(--a-dark-transparent-5)',
+                0: 'var(--a-dark-transparent-0)',
+                15: 'var(--a-dark-transparent-15)',
+                20: 'var(--a-dark-transparent-20)',
+                50: 'var(--a-dark-transparent-50)',
+                70: 'var(--a-dark-transparent-70)'
             },
             'brand-transparent': {
-                5: 'var(--brand-transparent-5)',
-                0: 'var(--brand-transparent-0)',
-                15: 'var(--brand-transparent-15)',
-                20: 'var(--brand-transparent-20)',
-                50: 'var(--brand-transparent-50)',
-                70: 'var(--brand-transparent-70)'
+                5: 'var(--a-brand-transparent-5)',
+                0: 'var(--a-brand-transparent-0)',
+                15: 'var(--a-brand-transparent-15)',
+                20: 'var(--a-brand-transparent-20)',
+                50: 'var(--a-brand-transparent-50)',
+                70: 'var(--a-brand-transparent-70)'
             }
         },
         textColor: {
-            DEFAULT: 'var(--neutral-900)',
+            DEFAULT: 'var(--a-neutral-900)',
             subtle: {
-                DEFAULT: 'var(--neutral-900)',
-                light: 'var(--neutral-700)'
+                DEFAULT: 'var(--a-neutral-800)',
+                light: 'var(--a-neutral-700)'
             },
-            inverse: 'var(--neutral-0)',
+            inverse: 'var(--a-neutral-0)',
             'inverse-subtle': {
-                DEFAULT: 'var(--neutral-500)',
-                light: 'var(--neutral-600)'
+                DEFAULT: 'var(--a-neutral-500)',
+                light: 'var(--a-neutral-600)'
             },
             'inverse-ghost': {
-                DEFAULT: 'var(--light-transparent-70)',
-                light: 'var(--light-transparent-50)'
+                DEFAULT: 'var(--a-light-transparent-70)',
+                light: 'var(--a-light-transparent-50)'
             },
-            interactive: 'var(--brand-500)',
-            'interactive-hover': 'var(--brand-700)',
-            'interactive-active': 'var(--brand-800)',
-            'interactive-inverse': 'var(--neutral-0)',
-            'interactive-inverse-hover': 'var(--neutral-50)',
-            'interactive-inverse-active': 'var(--neutral-200)',
-            success: 'var(--green-500)',
-            'success-hover': 'var(--green-600)',
-            'success-active': 'var(--green-700)',
-            'success-strong': 'var(--green-900)',
-            danger: 'var(--red-500)',
-            'danger-hover': 'var(--red-600)',
-            'danger-active': 'var(--red-700)',
-            'danger-strong': 'var(--red-900)',
-            warning: 'var(--yellow-500)',
-            'warning-hover': 'var(--yellow-600)',
-            'warning-active': 'var(--yellow-700)',
-            'warning-strong': 'var(--yellow-900)',
-            info: 'var(--blue-500)',
-            'info-hover': 'var(--blue-600)',
-            'info-active': 'var(--blue-700)',
-            'info-strong': 'var(--blue-900)'
-        },
-        backgroundColor: {
-            DEFAULT: 'var(--neutral-0)',
-            hover: 'var(--neutral-50)',
-            active: 'var(--neutral-200)',
-            subtle: 'var(--neutral-50)',
-            transparent: 'var(--light-transparent-10)',
-            'transparent-hover': 'var(--light-transparent-15)',
-            'transparent-active': 'var(--light-transparent-20)',
-            'transparent-subtle': 'var(--light-transparent-5)',
-            inverse: 'var(--neutral-900)',
-            'inverse-hover': 'var(--neutral-800)',
-            'inverse-active': 'var(--neutral-700)',
-            'inverse-subtle': 'var(--brand-50)',
-            highlighted: 'var(--brand-helpful-500)',
-            primary: 'var(--brand-500)',
-            'primary-hover': 'var(--brand-700)',
-            'primary-active': 'var(--brand-800)',
-            'primary-dark': 'var(--brand-900)',
-            'primary-transparent': 'var(--brand-transparent-10)',
-            'primary-transparent-hover': 'var(--brand-transparent-20)',
-            'primary-transparent-active': 'var(--brand-transparent-30)',
-            'success-subtle': 'var(--green-50)',
-            'success-subtle-hover': 'var(--green-100)',
-            'success-subtle-active': 'var(--green-300)',
-            success: 'var(--green-500)',
-            'success-hover': 'var(--green-600)',
-            'success-active': 'var(--green-700)',
-            'danger-subtle': 'var(--red-50)',
-            'danger-subtle-hover': 'var(--red-100)',
-            'danger-subtle-active': 'var(--red-300)',
-            danger: 'var(--red-500)',
-            'danger-hover': 'var(--red-600)',
-            'danger-active': 'var(--red-700)',
-            'warning-subtle': 'var(--yellow-50)',
-            'warning-subtle-hover': 'var(--yellow-100)',
-            'warning-subtle-active': 'var(--yellow-300)',
-            warning: 'var(--yellow-500)',
-            'warning-hover': 'var(--yellow-600)',
-            'warning-active': 'var(--yellow-700)',
-            'info-subtle': 'var(--blue-50)',
-            'info-subtle-hover': 'var(--blue-100)',
-            'info-subtle-active': 'var(--blue-300)',
-            info: 'var(--blue-500)',
-            'info-hover': 'var(--blue-600)',
-            'info-active': 'var(--blue-700)'
+            interactive: 'var(--a-brand-500)',
+            'interactive-hover': 'var(--a-brand-700)',
+            'interactive-active': 'var(--a-brand-800)',
+            'interactive-inverse': 'var(--a-neutral-0)',
+            'interactive-inverse-hover': 'var(--a-neutral-50)',
+            'interactive-inverse-active': 'var(--a-neutral-200)',
+            success: 'var(--a-green-500)',
+            'success-hover': 'var(--a-green-600)',
+            'success-active': 'var(--a-green-700)',
+            'success-strong': 'var(--a-green-900)',
+            danger: 'var(--a-red-500)',
+            'danger-hover': 'var(--a-red-600)',
+            'danger-active': 'var(--a-red-700)',
+            'danger-strong': 'var(--a-red-900)',
+            warning: 'var(--a-yellow-500)',
+            'warning-hover': 'var(--a-yellow-600)',
+            'warning-active': 'var(--a-yellow-700)',
+            'warning-strong': 'var(--a-yellow-900)',
+            info: 'var(--a-blue-500)',
+            'info-hover': 'var(--a-blue-600)',
+            'info-active': 'var(--a-blue-700)',
+            'info-strong': 'var(--a-blue-900)'
         },
+        backgroundColor: ({ theme }) => ({
+            ...theme('colors'),
+            DEFAULT: 'var(--a-neutral-0)',
+            hover: 'var(--a-neutral-50)',
+            active: 'var(--a-neutral-200)',
+            subtle: 'var(--a-neutral-50)',
+            transparent: 'var(--a-light-transparent-10)',
+            'transparent-hover': 'var(--a-light-transparent-15)',
+            'transparent-active': 'var(--a-light-transparent-20)',
+            'transparent-subtle': 'var(--a-light-transparent-5)',
+            inverse: 'var(--a-neutral-900)',
+            'inverse-hover': 'var(--a-neutral-800)',
+            'inverse-active': 'var(--a-neutral-700)',
+            'inverse-subtle': 'var(--a-brand-50)',
+            highlighted: 'var(--a-brand-helpful-500)',
+            primary: 'var(--a-brand-500)',
+            'primary-hover': 'var(--a-brand-700)',
+            'primary-active': 'var(--a-brand-800)',
+            'primary-action': 'var(--a-brand-200)',
+            'primary-action-hover': 'var(--a-brand-300)',
+            'primary-dark': 'var(--a-brand-900)',
+            'primary-subtle': 'var(--a-brand-50)',
+            'primary-transparent': 'var(--a-brand-transparent-10)',
+            'primary-transparent-hover': 'var(--a-brand-transparent-20)',
+            'primary-transparent-active': 'var(--a-brand-transparent-30)',
+            'success-subtle': 'var(--a-green-50)',
+            'success-subtle-hover': 'var(--a-green-100)',
+            'success-subtle-active': 'var(--a-green-300)',
+            success: 'var(--a-green-500)',
+            'success-hover': 'var(--a-green-600)',
+            'success-active': 'var(--a-green-700)',
+            'danger-subtle': 'var(--a-red-50)',
+            'danger-subtle-hover': 'var(--a-red-100)',
+            'danger-subtle-active': 'var(--a-red-300)',
+            danger: 'var(--a-red-500)',
+            'danger-hover': 'var(--a-red-600)',
+            'danger-active': 'var(--a-red-700)',
+            'warning-subtle': 'var(--a-yellow-50)',
+            'warning-subtle-hover': 'var(--a-yellow-100)',
+            'warning-subtle-active': 'var(--a-yellow-300)',
+            warning: 'var(--a-yellow-500)',
+            'warning-hover': 'var(--a-yellow-600)',
+            'warning-active': 'var(--a-yellow-700)',
+            'info-subtle': 'var(--a-blue-50)',
+            'info-subtle-hover': 'var(--a-blue-100)',
+            'info-subtle-active': 'var(--a-blue-300)',
+            info: 'var(--a-blue-500)',
+            'info-hover': 'var(--a-blue-600)',
+            'info-active': 'var(--a-blue-700)'
+        }),
         borderColor: {
-            DEFAULT: 'var(--neutral-200)',
-            subtle: 'var(--neutral-100)',
-            strong: 'var(--neutral-500)',
-            active: 'var(--neutral-900)',
-            inverse: 'var(--light-transparent-10)',
-            'inverse-subtle': 'var(--light-transparent-5)',
-            'inverse-strong': 'var(--light-transparent-15)',
-            'inverse-active': 'var(--neutral-0)',
-            danger: 'var(--red-500)',
-            'danger-hover': 'var(--red-600)',
-            'danger-active': 'var(--red-700)',
-            'danger-strong': 'var(--red-900)',
-            focus: 'var(--yellow-500)',
-            info: 'var(--blue-500)',
-            success: 'var(--green-500)',
-            primary: 'var(--brand-500)',
+            DEFAULT: 'var(--a-neutral-200)',
+            subtle: 'var(--a-neutral-100)',
+            strong: 'var(--a-neutral-500)',
+            active: 'var(--a-neutral-900)',
+            inverse: 'var(--a-light-transparent-10)',
+            'primary-action': 'var(--a-brand-200)',
+            'primary-action-hover': 'var(--a-brand-300)',
+            'inverse-subtle': 'var(--a-light-transparent-5)',
+            'inverse-strong': 'var(--a-light-transparent-15)',
+            'inverse-active': 'var(--a-neutral-0)',
+            danger: 'var(--a-red-500)',
+            'danger-hover': 'var(--a-red-600)',
+            'danger-active': 'var(--a-red-700)',
+            'danger-strong': 'var(--a-red-900)',
+            focus: 'var(--a-yellow-500)',
+            info: 'var(--a-blue-500)',
+            success: 'var(--a-green-500)',
+            primary: 'var(--a-brand-500)',
+            'primary-hover': 'var(--a-brand-700)',
+            transparent: 'transparent'
+        },
+        outlineColor: {
+            DEFAULT: 'var(--a-neutral-200)',
+            subtle: 'var(--a-neutral-100)',
+            strong: 'var(--a-neutral-500)',
+            active: 'var(--a-neutral-900)',
+            inverse: 'var(--a-light-transparent-10)',
+            'inverse-subtle': 'var(--a-light-transparent-5)',
+            'inverse-strong': 'var(--a-light-transparent-15)',
+            'inverse-active': 'var(--a-neutral-0)',
+            danger: 'var(--a-red-500)',
+            'danger-hover': 'var(--a-red-600)',
+            'danger-active': 'var(--a-red-700)',
+            'danger-strong': 'var(--a-red-900)',
+            focus: 'var(--a-yellow-500)',
+            info: 'var(--a-blue-500)',
+            success: 'var(--a-green-500)',
+            primary: 'var(--a-brand-500)',
+            'primary-hover': 'var(--a-brand-700)',
             transparent: 'transparent'
         },
+        ringColor: {
+            DEFAULT: 'var(--a-neutral-200)',
+            subtle: 'var(--a-neutral-100)',
+            strong: 'var(--a-neutral-500)',
+            active: 'var(--a-neutral-900)',
+            inverse: 'var(--a-light-transparent-10)',
+            'inverse-subtle': 'var(--a-light-transparent-5)',
+            'inverse-strong': 'var(--a-light-transparent-15)',
+            'inverse-active': 'var(--a-neutral-0)',
+            danger: 'var(--a-red-500)',
+            'danger-hover': 'var(--a-red-600)',
+            'danger-active': 'var(--a-red-700)',
+            'danger-strong': 'var(--a-red-900)',
+            focus: 'var(--a-yellow-500)',
+            info: 'var(--a-blue-500)',
+            success: 'var(--a-green-500)',
+            primary: 'var(--a-brand-500)',
+            'primary-hover': 'var(--a-brand-700)',
+            transparent: 'transparent'
+        },
+        fill: {
+            DEFAULT: 'var(--a-neutral-900)',
+            subtle: 'var(--a-neutral-600)',
+            disabled: 'var(--a-neutral-200)',
+            inverse: 'var(--a-neutral-0)',
+            'inverse-subtle': 'var(--a-light-transparent-20)',
+            'inverse-disabled': 'var(--a-neutral-800)',
+            primary: 'var(--a-brand-500)',
+            'primary-strong': 'var(--a-brand-800)',
+            success: 'var(--a-green-500)',
+            'success-strong': 'var(--a-green-700)',
+            danger: 'var(--a-red-500)',
+            'danger-strong': 'var(--a-red-700)',
+            warning: 'var(--a-yellow-500)',
+            'warning-strong': 'var(--a-yellow-700)',
+            info: 'var(--a-blue-500)',
+            'info-strong': 'var(--a-blue-700)'
+        },
         fontWeight: {
-            normal: 'var(--font-weight-normal)',
-            medium: 'var(--font-weight-medium)',
-            semibold: 'var(--font-weight-semibold)',
-            bold: 'var(--font-weight-bold)',
-            extrabold: 'var(--font-weight-extrabold)'
+            normal: 'var(--a-font-weight-normal)',
+            medium: 'var(--a-font-weight-medium)',
+            semibold: 'var(--a-font-weight-semibold)',
+            bold: 'var(--a-font-weight-bold)',
+            extrabold: 'var(--a-font-weight-extrabold)'
         },
         fontSize: {
             xs: [
-                'var(--font-size-xs)',
+                'var(--a-font-size-xs)',
                 {
-                    lineHeight: 'var(--line-height-xs)'
+                    lineHeight: 'var(--a-line-height-xs)'
                 }
             ],
             s: [
-                'var(--font-size-s)',
+                'var(--a-font-size-s)',
                 {
-                    lineHeight: 'var(--line-height-s)'
+                    lineHeight: 'var(--a-line-height-s)'
                 }
             ],
             base: [
-                'var(--font-size-base)',
+                'var(--a-font-size-base)',
                 {
-                    lineHeight: 'var(--line-height-base)'
+                    lineHeight: 'var(--a-line-height-base)'
                 }
             ],
             lg: [
-                'var(--font-size-lg)',
+                'var(--a-font-size-lg)',
                 {
-                    lineHeight: 'var(--line-height-lg)'
+                    lineHeight: 'var(--a-line-height-lg)'
                 }
             ],
             xl: [
-                'var(--font-size-xl)',
+                'var(--a-font-size-xl)',
                 {
-                    lineHeight: 'var(--line-height-xl)'
+                    lineHeight: 'var(--a-line-height-xl)'
                 }
             ],
             '2xl': [
-                'var(--font-size-2xl)',
+                'var(--a-font-size-2xl)',
                 {
-                    lineHeight: 'var(--line-height-2xl)'
+                    lineHeight: 'var(--a-line-height-2xl)'
                 }
             ],
             '3xl': [
-                'var(--font-size-3xl)',
+                'var(--a-font-size-3xl)',
                 {
-                    lineHeight: 'var(--line-height-3xl)'
+                    lineHeight: 'var(--a-line-height-3xl)'
                 }
             ],
             '4xl': [
-                'var(--font-size-4xl)',
+                'var(--a-font-size-4xl)',
                 {
-                    lineHeight: 'var(--line-height-4xl)'
+                    lineHeight: 'var(--a-line-height-4xl)'
                 }
             ],
             '5xl': [
-                'var(--font-size-5xl)',
+                'var(--a-font-size-5xl)',
                 {
-                    lineHeight: 'var(--line-height-5xl)'
+                    lineHeight: 'var(--a-line-height-5xl)'
                 }
             ],
             '6xl': [
-                'var(--font-size-6xl)',
+                'var(--a-font-size-6xl)',
                 {
-                    lineHeight: 'var(--line-height-6xl)'
+                    lineHeight: 'var(--a-line-height-6xl)'
                 }
             ]
         },
         letterSpacing: {
-            '4xs': 'var(--letter-spacing-4xs)',
-            '3xs': 'var(--letter-spacing-3xs)',
-            '2xs': 'var(--letter-spacing-2xs)',
-            xs: 'var(--letter-spacing-xs)',
-            s: 'var(--letter-spacing-s)',
-            base: 'var(--letter-spacing-base)'
+            '4xs': 'var(--a-letter-spacing-4xs)',
+            '3xs': 'var(--a-letter-spacing-3xs)',
+            '2xs': 'var(--a-letter-spacing-2xs)',
+            xs: 'var(--a-letter-spacing-xs)',
+            s: 'var(--a-letter-spacing-s)',
+            base: 'var(--a-letter-spacing-base)',
+            md: 'var(--a-letter-spacing-md)'
         },
         borderRadius: {
-            0: 'var(--border-radius-0)',
-            2: 'var(--border-radius-2)',
-            4: 'var(--border-radius-4)',
-            6: 'var(--border-radius-6)',
-            8: 'var(--border-radius-8)',
-            12: 'var(--border-radius-12)',
-            16: 'var(--border-radius-16)',
-            24: 'var(--border-radius-24)',
-            40: 'var(--border-radius-40)',
-            full: 'var(--border-radius-full)'
+            0: 'var(--a-border-radius-0)',
+            2: 'var(--a-border-radius-2)',
+            4: 'var(--a-border-radius-4)',
+            6: 'var(--a-border-radius-6)',
+            8: 'var(--a-border-radius-8)',
+            12: 'var(--a-border-radius-12)',
+            16: 'var(--a-border-radius-16)',
+            24: 'var(--a-border-radius-24)',
+            40: 'var(--a-border-radius-40)',
+            full: 'var(--a-border-radius-full)'
         },
         boxShadow: {
-            DEFAULT: 'var(--box-shadow-m)',
-            s: 'var(--box-shadow-s)',
-            m: 'var(--box-shadow-m)',
-            l: 'var(--box-shadow-l)',
+            DEFAULT: 'var(--a-box-shadow-m)',
+            s: 'var(--a-box-shadow-s)',
+            m: 'var(--a-box-shadow-m)',
+            l: 'var(--a-box-shadow-l)',
             xl: 'var(--a-box-shadow-xl)',
-            's-inverse': 'var(--box-shadow-s-inverse)',
-            'm-inverse': 'var(--box-shadow-m-inverse)',
-            'l-inverse': 'var(--box-shadow-l-inverse)'
+            's-inverse': 'var(--a-box-shadow-s-inverse)',
+            'm-inverse': 'var(--a-box-shadow-m-inverse)',
+            'l-inverse': 'var(--a-box-shadow-l-inverse)'
         },
         boxShadowColor: {
-            DEFAULT: 'var(--box-shadow-color)'
+            DEFAULT: 'var(--a-box-shadow-color)'
         },
         extend: {
-            fontFamily: {
-                sans: ['var(--font-sans)', ...fontFamily.sans]
-            },
             keyframes: {
                 'accordion-down': {
                     from: { height: '0' },
@@ -306,11 +367,26 @@ module.exports = {
                 'accordion-up': {
                     from: { height: 'var(--radix-accordion-content-height)' },
                     to: { height: '0' }
+                },
+                'modal-backdrop-fade-in': {
+                    from: { opacity: '0' },
+                    to: { oapcity: '1' }
+                },
+                'modal-slide-in': {
+                    from: { transform: 'translate3d(0, -20vh, 0)' },
+                    to: { transform: 'translate3d(0, 0, 0)' }
+                },
+                'modal-slide-out': {
+                    from: { transform: 'translate3d(0, 0, 0)' },
+                    to: { transform: 'translate3d(0, -20vh, 0)' }
                 }
             },
             animation: {
                 'accordion-down': 'accordion-down 0.2s ease-out',
-                'accordion-up': 'accordion-up 0.2s ease-out'
+                'accordion-up': 'accordion-up 0.2s ease-out',
+                'modal-backdrop-fade-in': 'modal-backdrop-fade-in 0.3s ease',
+                'modal-slide-in': 'modal-slide-in 0.2s ease',
+                'modal-slide-out': 'modal-slide-out 0.2s ease'
             }
         }
     },
@@ -355,6 +431,9 @@ module.exports = {
         },
         {
             pattern: /bottom-.*/
+        },
+        {
+            pattern: /fill-.*/
         }
     ],
     plugins: [require('tailwindcss-animate')]