Update tailwind using figma style guide ref

lib/index.js

@@ -39,36 +39,41 @@ module.exports = plugin(
 
  const components = {
  '.mxa-btn-primary': {
- "@apply rounded-full": {},
- "@apply bg-teal-100": {},
+ "@apply rounded": {},
+ "@apply bg-forest-400": {},
  "@apply text-white": {},
- "@apply px-5": {},
- "@apply py-1": {},
+ "@apply px-6": {},
+ "@apply py-2": {},
  "@apply border": {},
- "@apply border-teal-100": {}
+ "@apply border-forest-400": {}
  },
 
  '.mxa-btn-secondary': {
- "@apply rounded-full": {},
+ "@apply rounded": {},
  "@apply bg-white": {},
- "@apply text-gray-300": {},
- "@apply px-5": {},
- "@apply py-1": {},
+ "@apply text-slate-400": {},
+ "@apply px-6": {},
+ "@apply py-2": {},
  "@apply border": {},
- "@apply border-gray-300": {}
+ "@apply border-slate-200": {}
  },
 
  '.mxa-input': {
  "@apply rounded": {},
- "@apply outline-none": {},
  "@apply border": {},
- "@apply border-gray-200": {},
- "@apply px-3": {},
+ "@apply border-transparent": {},
+ "@apply bg-frost-100": {},
+ "@apply px-4": {},
  "@apply py-2": {},
+ "@apply placeholder-slate-300": {},
+ '@apply text-slate-400': {}
  },
 
  '.mxa-input:focus': {
- "@apply border-blue-300": {}
+ "@apply outline-none": {},
+ "@apply bg-white": {},
+ "@apply ring": {},
+ "@apply border-plum-400": {},
  }
  }
 
@@ -95,34 +100,73 @@ module.exports = plugin(
  ],
  },
  colors: {
- white: '#FFFFFF',
- blue: {
- 100: '#D5F5FA',
- 200: '#95E7F2',
- 300: '#20BED9',
+ slate: {
+ 100: '#F5F5F5',
+ 200: '#D6D7D9',
+ 300: '#85878D',
+ 400: '#333741',
+ 'dark': '#282D39'
  },
- teal: {
- 100: '#087D92',
- 200: '#0A5E6C',
+
+ forest: {
+ 100: '#F2F7F7',
+ 200: '#CEDFE2',
+ 300: '#6C9EA7',
+ 400: '#0B525E'
  },
- gray: {
-  100: '#F4F4F6',
- 200: '#DADDE5',
- 300: '#838B9B',
- 400: '#848B9A',
- 500: '#323742'
+
+ sky: {
+ 100: '#F4FBFD',
+ 200: '#D2F2F7',
+ 300: '#79D8E8',
+ 400: '#20BED9'
  },
- yellow: {
- 100: '#FFE695',
- 200: '#EEC53E'
+
+ canary: {
+ 100: '#FEFCF5',
+ 200: '#FCF3D8',
+ 300: '#F5DC8B',
+ 400: '#EEC53E'
+ },
+
+ saffron: {
+ 100: '#FDF6F5',
+ 200: '#F8DED8',
+ 300: '#EB9B8B',
+ 400: '#DE583E'
+ },
+
+ plum: {
+ 100: '#FAF5FD',
+ 200: '#EBD8F8',
+ 300: '#C48AE9',
+ 400: '#9C3CDB'
+ },
+
+ frost: {
+ 100: '#F3F3F4',
+ 200: '#DADDE5'
+ },
+
+ kale: '#00A191',
+
+ white: '#FFFFFF',
+ black: '#000000',
+ transparent: 'transparent'
+ },
+ extend: {
+ // Absolute positioning extensions
+ // I.E. top-16, left-32
+ inset: {
+ '16': '4rem',
+ '32': '8rem'
  },
- red: {
- 100: '#FEA797',
- 200: '#DE583E'
- }
  },
- extend: {},
  },
- variants: {},
+ variants: {
+ borderWidth: ['hover', 'focus'],
+ borderColor: ['focus'],
+ ringWidth: ['focus']
+ }
  }
-)
+)