Pranay/add colors (#84)

src/colors/amber.js

@@ -0,0 +1,36 @@
+const amber = {
+    light: {
+
+        50: '#fefdfb',
+        100: '#fefbe9',
+        200: '#fff7c2',
+        300: '#ffee9c',
+        400: '#fbe577',
+        500: '#f3d673',
+        600: '#e9c162',
+        700: '#e2a336',
+        800: '#ffc53d',
+        900: '#ffba18',
+        950: '#ab6400',
+        1000: '#4f3422',
+
+    },
+    dark: {
+
+        50: '#16120c',
+        100: '#1d180f',
+        200: '#302008',
+        300: '#3f2700',
+        400: '#4d3000',
+        500: '#5c3d05',
+        600: '#714f19',
+        700: '#8f6424',
+        800: '#ffc53d',
+        900: '#ffd60a',
+        950: '#ffca16',
+        1000: '#ffe7b3',
+
+    },
+};
+
+export default amber;

src/colors/blue.js

@@ -0,0 +1,35 @@
+const blue = {
+    light: {
+
+        50: '#fbfdff',
+        100: '#f4faff',
+        200: '#e6f4fe',
+        300: '#d5efff',
+        400: '#c2e5ff',
+        500: '#acd8fc',
+        600: '#8ec8f6',
+        700: '#5eb1ef',
+        800: '#0090ff',
+        900: '#0588f0',
+        950: '#0d74ce',
+        1000: '#113264',
+
+    },
+    dark: {
+
+        50: '#0d1520',
+        100: '#111927',
+        200: '#0d2847',
+        300: '#003362',
+        400: '#004074',
+        500: '#104d87',
+        600: '#205d9e',
+        700: '#2870bd',
+        800: '#0090ff',
+        900: '#3b9eff',
+        950: '#70b8ff',
+        1000: '#c2e6ff',
+    },
+};
+
+export default blue;

src/colors/bronze.js

@@ -0,0 +1,37 @@
+
+const bronze = {
+    light: {
+
+        50: '#fdfcfc',
+        100: '#fcf9f6',
+        200: '#f6eee7',
+        300: '#f0e4d9',
+        400: '#ebdaca',
+        500: '#e4cdb7',
+        600: '#dcbc9f',
+        700: '#cea37e',
+        800: '#ad7f58',
+        900: '#a07553',
+        950: '#815e46',
+        1000: '#3e332e',
+
+    },
+    dark: {
+
+        50: '#141110',
+        100: '#1a1715',
+        200: '#26221e',
+        300: '#2f2a24',
+        400: '#3b3330',
+        500: '#493e3a',
+        600: '#5a4c47',
+        700: '#6f5f58',
+        800: '#a18072',
+        900: '#ae8c7e',
+        950: '#d4b3a5',
+        1000: '#ede0d9',
+
+    },
+};
+
+export default bronze;

src/colors/brown.js

@@ -0,0 +1,36 @@
+
+const brown = {
+    light: {
+
+        50: '#fefdfc',
+        100: '#fcf9f6',
+        200: '#f6eee7',
+        300: '#f0e4d9',
+        400: '#ebdaca',
+        500: '#e4cdb7',
+        600: '#dcbc9f',
+        700: '#cea37e',
+        800: '#ad7f58',
+        900: '#a07553',
+        950: '#815e46',
+        1000: '#3e332e',
+
+    },
+    dark: {
+
+        50: '#12110f',
+        100: '#1c1816',
+        200: '#28211d',
+        300: '#322922',
+        400: '#3e3128',
+        500: '#4d3c2f',
+        600: '#614a39',
+        700: '#7c5f46',
+        800: '#ad7f58',
+        900: '#b88c67',
+        950: '#dbb594',
+        1000: '#f2e1ca',
+    },
+};
+
+export default brown;

src/colors/cyan.js

@@ -0,0 +1,33 @@
+const cyan = {
+    light: {
+        50: '#fafdfe',
+        100: '#f2fafb',
+        200: '#def7f9',
+        300: '#caf1f6',
+        400: '#b5e9f0',
+        500: '#9ddde7',
+        600: '#7dcedc',
+        700: '#3db9cf',
+        800: '#00a2c7',
+        900: '#0797b9',
+        950: '#107d98',
+        1000: '#0d3c48',
+    },
+    dark: {
+
+        50: '#0b161a',
+        100: '#101b20',
+        200: '#082c36',
+        300: '#003848',
+        400: '#004558',
+        500: '#045468',
+        600: '#12677e',
+        700: '#11809c',
+        800: '#00a2c7',
+        900: '#23afd0',
+        950: '#4ccce6',
+        1000: '#b6ecf7',
+    },
+};
+
+export default cyan;

src/colors/gold.js

@@ -0,0 +1,34 @@
+const gold = {
+    light: {
+
+        50: '#fdfdfc',
+        100: '#faf9f2',
+        200: '#f2f0e7',
+        300: '#eae6db',
+        400: '#e1dccf',
+        500: '#d8d0bf',
+        600: '#cbc0aa',
+        700: '#b9a88d',
+        800: '#978365',
+        900: '#8c7a5e',
+        950: '#71624b',
+        1000: '#3b352b',
+    },
+    dark: {
+
+        50: '#121211',
+        100: '#1b1a17',
+        200: '#24231f',
+        300: '#2d2b26',
+        400: '#38352e',
+        500: '#444039',
+        600: '#544f46',
+        700: '#696256',
+        800: '#978365',
+        900: '#a39073',
+        950: '#cbb99f',
+        1000: '#e8e2d9',
+    },
+};
+
+export default gold;

src/colors/grass.js

@@ -0,0 +1,36 @@
+
+const grass = {
+    light: {
+        50: '#fbfefb',
+        100: '#f5fbf5',
+        200: '#e9f6e9',
+        300: '#daf1db',
+        400: '#c9e8ca',
+        500: '#b2ddb5',
+        600: '#94ce9a',
+        700: '#65ba74',
+        800: '#46a758',
+        900: '#3e9b4f',
+        950: '#2a7e3b',
+        1000: '#203c25',
+
+    },
+    dark: {
+
+        50: '#0e1511',
+        100: '#141a15',
+        200: '#1b2a1e',
+        300: '#1d3a24',
+        400: '#25482d',
+        500: '#2d5736',
+        600: '#366740',
+        700: '#3e7949',
+        800: '#46a758',
+        900: '#53b365',
+        950: '#71d083',
+        1000: '#c2f0c2',
+
+    },
+};
+
+export default grass;

src/colors/green.js

@@ -0,0 +1,34 @@
+const green = {
+    light: {
+        50: '#fbfefc',
+        100: '#f4fbf6',
+        200: '#e6f6eb',
+        300: '#d6f1df',
+        400: '#c4e8d1',
+        500: '#adddc0',
+        600: '#8eceaa',
+        700: '#5bb98b',
+        800: '#30a46c',
+        900: '#2b9a66',
+        950: '#218358',
+        1000: '#193b2d',
+
+    },
+    dark: {
+
+        50: '#0e1512',
+        100: '#121b17',
+        200: '#132d21',
+        300: '#113b29',
+        400: '#174933',
+        500: '#20573e',
+        600: '#28684a',
+        700: '#2f7c57',
+        800: '#30a46c',
+        900: '#33b074',
+        950: '#3dd68c',
+        1000: '#b1f1cb',
+    },
+};
+
+export default green;

src/colors/index.js

@@ -15,6 +15,25 @@ import crimson from './crimson.js';
 import pink from './pink.js';
 import plum from './plum.js';
 import purple from './purple.js';
+import violet from './violet.js';
+
+import iris from './iris.js';
+import indigo from './indigo.js';
+import blue from './blue.js';
+import cyan from './cyan.js';
+import teal from './teal.js';
+import jade from './jade.js';
+import green from './green.js';
+import grass from './grass.js';
+import brown from './brown.js';
+import bronze from './bronze.js';
+import gold from './gold.js';
+import sky from './sky.js';
+import mint from './mint.js';
+import lime from './lime.js';
+import yellow from './yellow.js';
+import amber from './amber.js';
+import orange from './orange.js';
 
 const colors = {
     gray: gray,
@@ -30,6 +49,25 @@ const colors = {
     pink: pink,
     plum: plum,
     purple: purple,
+    violet: violet,
+    iris: iris,
+    indigo: indigo,
+    blue: blue,
+    cyan: cyan,
+    teal: teal,
+    jade: jade,
+    green: green,
+    grass: grass,
+    brown: brown,
+    bronze: bronze,
+    gold: gold,
+    sky: sky,
+    mint: mint,
+    lime: lime,
+    yellow: yellow,
+    amber: amber,
+    orange: orange,
+
 };
 
 export default colors;

src/colors/indigo.js

@@ -0,0 +1,32 @@
+const indigo = {
+    light: {
+        50: '#fdfdfe',
+        100: '#f7f9ff',
+        200: '#edf2fe',
+        300: '#e1e9ff',
+        400: '#d2deff',
+        500: '#c1d0ff',
+        600: '#abbdf9',
+        700: '#8da4ef',
+        800: '#3e63dd',
+        900: '#3358d4',
+        950: '#3a5bc7',
+        1000: '#1f2d5c',
+    },
+    dark: {
+        50: '#11131f',
+        100: '#141726',
+        200: '#182449',
+        300: '#1d2e62',
+        400: '#253974',
+        500: '#304384',
+        600: '#3a4f97',
+        700: '#435db1',
+        800: '#3e63dd',
+        900: '#5472e4',
+        950: '#9eb1ff',
+        1000: '#d6e1ff',
+    },
+};
+
+export default indigo;