feat(colors): added colors

Author: codebender828

src/App.vue

@@ -3,6 +3,9 @@
     {{ state.greeting }}
     <Button>{{ state.buttonText }}</Button>
     <Button @click="increment" variant="ghost" color="success" size="lg" > Increment </Button>
+    <Button @click="increment" variant="flat" color="warning" size="lg" > Increment </Button>
+    <Button @click="increment" variant="ghost" color="danger" size="md" > Increment </Button>
+    <Button @click="increment" variant="link" color="dark" size="lg" > Increment </Button>
     <br>
     <h1>{{ state.count }}</h1>
   </div>

src/lib/theme/colors.js

@@ -0,0 +1,128 @@
+const colors = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  black: '#000',
+  white: '#fff',
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)'
+  },
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)'
+  },
+  gray: {
+    '50': '#e9f3fe',
+    '100': '#d2dae1',
+    '200': '#b9c0c6',
+    '300': '#9ea6ad',
+    '400': '#848d95',
+    '500': '#6a737b',
+    '600': '#525a61',
+    '700': '#394046',
+    '800': '#20262d',
+    '900': '#020e17'
+  },
+  teal: {
+    '50': '#dbfff6',
+    '100': '#affce6',
+    '200': '#82fad7',
+    '300': '#52f7c7',
+    '400': '#24f4b7',
+    '500': '#0bdb9e',
+    '600': '#00aa7b',
+    '700': '#007957',
+    '800': '#004a34',
+    '900': '#001a11'
+  },
+  green: {
+    '50': '#e2fbed',
+    '100': '#c2ebd4',
+    '200': '#9fddb9',
+    '300': '#7ccf9e',
+    '400': '#58c184',
+    '500': '#3ea76a',
+    '600': '#2e8251',
+    '700': '#1f5d3a',
+    '800': '#0f3921',
+    '900': '#001506'
+  },
+  orange: {
+    '50': '#ffefdc',
+    '100': '#ffd4ae',
+    '200': '#ffba7f',
+    '300': '#fe9e4d',
+    '400': '#fd821b',
+    '500': '#e46902',
+    '600': '#b25100',
+    '700': '#7f3900',
+    '800': '#4e2200',
+    '900': '#1f0900'
+  },
+  red: {
+    '50': '#ffe5e9',
+    '100': '#f9bcc2',
+    '200': '#ee919a',
+    '300': '#e66673',
+    '400': '#dd3b4b',
+    '500': '#c42231',
+    '600': '#991826',
+    '700': '#6e101a',
+    '800': '#44070e',
+    '900': '#1e0001'
+  },
+  yellow: {
+    '50': '#fff9da',
+    '100': '#ffecad',
+    '200': '#ffdf7d',
+    '300': '#ffd24b',
+    '400': '#ffc61a',
+    '500': '#e6ac00',
+    '600': '#b38600',
+    '700': '#806000',
+    '800': '#4e3900',
+    '900': '#1d1300'
+  },
+  indigo: {
+    '50': '#f2e5ff',
+    '100': '#d2b5ff',
+    '200': '#b285fa',
+    '300': '#9356f7',
+    '400': '#7425f3',
+    '500': '#5a0cda',
+    '600': '#4608aa',
+    '700': '#32057b',
+    '800': '#1e024c',
+    '900': '#0c001e'
+  },
+  blue: {
+    '50': '#def0ff',
+    '100': '#afd0ff',
+    '200': '#7db1ff',
+    '300': '#4b91ff',
+    '400': '#1a72ff',
+    '500': '#0058e6',
+    '600': '#0045b4',
+    '700': '#003182',
+    '800': '#001d51',
+    '900': '#000a21'
+  }
+}
+
+export default colors