Initial commit

1 files changed, 142 insertions, 0 deletions

diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
new file mode 100644
index 0000000..8371da2
--- /dev/null
+++ b/front-end/tailwind.config.js
@@ -0,0 +1,142 @@
+import colors from 'tailwindcss/colors'
+import plugin from 'tailwindcss/plugin'
+
+export default {
+  cpurge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    colors: {
+      //Tw colors
+      ...colors,
+      primary: {
+        default: '#52d9a7',
+        50: '#E9FAF4',
+        100: '#D8F6EB',
+        200: '#B6EFDA',
+        300: '#95E8C9',
+        400: '#73E0B8',
+        500: '#52d9a7',
+        600: '#2CC78E',
+        700: '#22996D',
+        800: '#186B4C',
+        900: '#0D3D2B'
+      },
+      secondary: {
+        default: '#22D2FF',
+        50: '#DAF7FF',
+        100: '#C5F3FF',
+        200: '#9CEBFF',
+        300: '#74E3FF',
+        400: '#4BDAFF',
+        500: '#22D2FF',
+        600: '#00B9E9',
+        700: '#008DB1',
+        800: '#006079',
+        900: '#003341'
+      },
+      dark: {
+        default: '#303843',
+        100: '#5a6a7f',
+        200: '#4f5d70',
+        300: '#455161',
+        400: '#3a4452',
+        500: '#303843',
+        600: '#252c34',
+        700: '#1a1f25',
+        800: '#101316',
+        900: '#050607'
+      }
+    },
+  },
+  plugins: [
+    //Adds button variants for each color
+    plugin(({ theme, addUtilities }) =>{
+      const coloredButtons = {}
+
+      for (let color in theme('colors')) {
+
+        //Buttons must also have the .btn class
+        coloredButtons[`.btn.${color}`] = {
+          'color': theme(`colors.white`),
+          'border-color': theme(`colors.${color}.500`),
+          'background-color': theme(`colors.${color}.500`),
+
+          '&:hover': {
+            'border-color': theme(`colors.${color}.600`),
+            'background-color': theme(`colors.${color}.600`),
+          },
+
+          '&:active': {
+            'border-color': theme(`colors.${color}.700`),
+            'background-color': theme(`colors.${color}.700`),
+          },
+
+          '&:focus': {
+            '--tw-ring-color': theme(`colors.${color}.500`),
+          },
+
+          '&:disabled': {
+            'border-color': theme(`colors.${color}.300`),
+            'background-color': theme(`colors.${color}.300`),
+            color: theme(`colors.white`),
+          },
+
+          '&.borderless, &.no-border, &.b-0': {
+            'color': theme(`colors.${color}.500`),
+            '&:hover': {
+              'color': theme(`colors.${color}.600`),
+            },
+            'border': 'none',
+            'background-color': 'transparent',
+          },
+
+          '.dark &': {
+            'border-color': theme(`colors.${color}.600`),
+            'background-color': 'transparent',
+            'color': theme(`colors.${color}.600`),
+
+            '&:hover': {
+              'border-color': theme(`colors.${color}.500`),
+              'color': theme(`colors.${color}.500`),
+            },
+
+            '&:focus': {
+              '--tw-ring-color': theme(`colors.${color}.500`),
+            },
+
+            '&:disabled': {
+              'border-color': theme(`colors.${color}.800`),
+              'color': theme(`colors.${color}.800`),
+            }
+          }
+        }
+      }
+      
+      addUtilities(coloredButtons)
+    }),
+
+    //Plugin for input variants
+    plugin(({ theme, addUtilities }) =>{
+      const coloredInputs = {}
+
+      for (let color in theme('colors')) {
+        coloredInputs[`.input.${color}`] = {
+          'outline': 'none',
+
+          '&:focus, &:active, &::after, &:focus:hover':{
+            'border-color': theme(`colors.${color}.500`),
+            'dark &':{
+              'border-color': theme(`colors.${color}.600`),
+            }
+          }
+        }
+      }
+
+      addUtilities(coloredInputs)
+    })
+  ]
+}