@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
644 lines (643 loc) • 13.9 kB
JavaScript
const grey = {
100: "#FFFFFF",
200: "#F1F1F1",
300: "#E3E3E3",
400: "#D5D5D5",
500: "#C7C6C7",
600: "#BAB8BA",
700: "#ACAAAC",
800: "#9F9B9F",
900: "#918D91",
1000: "#858185",
1100: "#797579",
1200: "#6D6A6D",
1300: "#615E61",
1400: "#555355",
1500: "#494749",
1600: "#3D3C3D"
};
const black = {
100: "#4D4C4C",
200: "#4A4949",
300: "#464545",
400: "#434242",
500: "#403E3F",
600: "#3C3B3B",
700: "#393738",
800: "#353435",
900: "#323131",
1000: "#2F2D2E",
1100: "#2B2A2B",
1200: "#282627",
1300: "#242324",
1400: "#212021",
1500: "#1D1C1D",
1600: "#1A191A"
};
const navy = {
100: "#F1F1F4",
200: "#DADAE3",
300: "#C4C3D3",
400: "#ACABC4",
500: "#9592B5",
600: "#7E78A7",
700: "#675F98",
800: "#574E82",
900: "#463E6B",
1000: "#362E53",
1100: "#302652",
1200: "#2B1F51",
1300: "#25194F",
1400: "#21134D",
1500: "#1C0E49",
1600: "#180A46"
};
const purple = {
100: "#F4F1F4",
200: "#F0E1EE",
300: "#E1B4E2",
400: "#DD9CE0",
500: "#DB82DF",
600: "#DB66E0",
700: "#DB48E3",
800: "#DD28E9",
900: "#D90EE8",
1000: "#C705D7",
1100: "#BC00CC",
1200: "#920E9D",
1300: "#77157F",
1400: "#5E1964",
1500: "#481A4C",
1600: "#341936"
};
const violet = {
100: "#EFE9FB",
200: "#DCCCF7",
300: "#CBAEF4",
400: "#BC8FF3",
500: "#AE6FF3",
600: "#A34DF4",
700: "#9B2BF6",
800: "#9606F9",
900: "#8C01DE",
1000: "#7C01C5",
1100: "#6B01AB",
1200: "#5B0092",
1300: "#4B0078",
1400: "#3B005F",
1500: "#2B0045",
1600: "#1B002C"
};
const blue = {
100: "#F5F8FF",
200: "#D9E5FF",
300: "#BDD3FE",
400: "#A2C3FD",
500: "#87B4FC",
600: "#6DA5FA",
700: "#5298F8",
800: "#388CF6",
900: "#1F81F3",
1000: "#176CDC",
1100: "#1D5AB6",
1200: "#214B94",
1300: "#223D74",
1400: "#203057",
1500: "#1B243C",
1600: "#141824"
};
const lime = {
100: "#F8FEC5",
200: "#F4FCA1",
300: "#F0FA85",
400: "#EBF669",
500: "#E6F24F",
600: "#E1ED35",
700: "#DBE71B",
800: "#C2CB18",
900: "#A6AD18",
1000: "#8C9219",
1100: "#75791D",
1200: "#60631E",
1300: "#4C4E1E",
1400: "#3A3B1C",
1500: "#292A18",
1600: "#1A1B12"
};
const orange = {
100: "#F1BEB1",
200: "#EEAF9B",
300: "#ECA185",
400: "#EB956E",
500: "#E98957",
600: "#E97F3F",
700: "#E87727",
800: "#D76A14",
900: "#CC6212",
1000: "#B65410",
1100: "#9F470D",
1200: "#893B0B",
1300: "#722F09",
1400: "#5B2407",
1500: "#441905",
1600: "#2D1003"
};
const red = {
100: "#FEF0F0",
200: "#FCD3D3",
300: "#FAB7B7",
400: "#F79B9B",
500: "#F57F7F",
600: "#F26363",
700: "#EF4848",
800: "#EB2D2D",
900: "#E41616",
1000: "#C71414",
1100: "#AB1616",
1200: "#901717",
1300: "#771616",
1400: "#5E1515",
1500: "#471212",
1600: "#310E0E"
};
const green = {
100: "#F3FBEF",
200: "#E0F4D7",
300: "#CBEDC0",
400: "#B6E5A9",
500: "#A0DD93",
600: "#8AD37D",
700: "#73C968",
800: "#5CBF54",
900: "#49B142",
1000: "#3E9939",
1100: "#348230",
1200: "#2A6A27",
1300: "#20521E",
1400: "#163B15",
1500: "#0D230D",
1600: "#040B04"
};
const yellow = {
100: "#FFFCF7",
200: "#FFF4E2",
300: "#FFEDCE",
400: "#FFE5B9",
500: "#FFDDA4",
600: "#FFD68F",
700: "#FFCE7B",
800: "#FFC766",
900: "#F9BA4C",
1000: "#F0AD35",
1100: "#E59E20",
1200: "#C68B1F",
1300: "#A47622",
1400: "#846122",
1500: "#664D20",
1600: "#4A3A1C"
};
const white = "#FFFFFF";
const white_alpha = {
5: "#FFFFFF0D",
10: "#FFFFFF1A",
15: "#FFFFFF26",
20: "#FFFFFF33",
25: "#FFFFFF40",
30: "#FFFFFF4D",
35: "#FFFFFF59",
40: "#FFFFFF66",
45: "#FFFFFF73",
50: "#FFFFFF80",
55: "#FFFFFF8C",
60: "#FFFFFF99",
65: "#FFFFFFA6",
70: "#FFFFFFB3"
};
const black_alpha = {
2: "#00000005",
4: "#0000000A",
6: "#0000000F",
8: "#00000014",
10: "#0000001A",
12: "#0000001F",
14: "#00000024",
16: "#00000029",
18: "#0000002E",
20: "#00000033",
22: "#00000038",
24: "#0000003D",
26: "#00000042",
28: "#00000047",
30: "#0000004D",
32: "#00000052",
34: "#00000057"
};
const navy_alpha = {
1: "#30265203",
2: "#30265205",
3: "#30265208",
4: "#3026520A",
5: "#3026520D",
6: "#3026520F",
7: "#30265212",
8: "#30265214",
9: "#30265217",
10: "#3026521A",
12: "#3026521F",
14: "#30265224",
16: "#30265229",
18: "#3026522E",
20: "#30265233",
22: "#30265238",
24: "#3026523D",
26: "#30265242",
28: "#30265247",
30: "#3026524D",
32: "#30265252",
34: "#30265257",
36: "#3026525C",
38: "#30265261",
40: "#30265266",
42: "#3026526B",
44: "#30265270",
46: "#30265275",
48: "#3026527A",
50: "#30265280",
52: "#30265285",
54: "#3026528A",
56: "#3026528F",
58: "#30265294",
60: "#30265299",
62: "#3026529E",
64: "#302652A3",
66: "#302652A8",
68: "#302652AD",
70: "#302652B3",
72: "#302652B8",
74: "#302652BD",
76: "#302652C2",
78: "#302652C7",
80: "#302652CC",
82: "#302652D1",
84: "#302652D6",
86: "#302652DB",
88: "#302652E0",
90: "#302652E6",
92: "#302652EB",
94: "#302652F0",
96: "#302652F5",
98: "#302652FA"
};
const grey_alpha = {
1: "#E3E3E303",
2: "#E3E3E305",
3: "#E3E3E308",
4: "#E3E3E30A",
5: "#E3E3E30D",
6: "#E3E3E30F",
7: "#E3E3E312",
8: "#E3E3E314",
9: "#E3E3E317",
10: "#E3E3E31A",
15: "#E3E3E326",
20: "#E3E3E333",
25: "#E3E3E340",
30: "#E3E3E34D",
35: "#E3E3E359",
40: "#E3E3E366",
45: "#E3E3E373",
50: "#E3E3E380",
55: "#E3E3E38C",
60: "#E3E3E399",
65: "#E3E3E3A6",
70: "#E3E3E3B3",
75: "#E3E3E3BF",
80: "#E3E3E3CC",
85: "#E3E3E3D9",
90: "#E3E3E3E6",
95: "#E3E3E3F2"
};
const palette = {
grey: {
100: "#FFFFFF",
200: "#F1F1F1",
300: "#E3E3E3",
400: "#D5D5D5",
500: "#C7C6C7",
600: "#BAB8BA",
700: "#ACAAAC",
800: "#9F9B9F",
900: "#918D91",
1000: "#858185",
1100: "#797579",
1200: "#6D6A6D",
1300: "#615E61",
1400: "#555355",
1500: "#494749",
1600: "#3D3C3D"
},
black: {
100: "#4D4C4C",
200: "#4A4949",
300: "#464545",
400: "#434242",
500: "#403E3F",
600: "#3C3B3B",
700: "#393738",
800: "#353435",
900: "#323131",
1000: "#2F2D2E",
1100: "#2B2A2B",
1200: "#282627",
1300: "#242324",
1400: "#212021",
1500: "#1D1C1D",
1600: "#1A191A"
},
navy: {
100: "#F1F1F4",
200: "#DADAE3",
300: "#C4C3D3",
400: "#ACABC4",
500: "#9592B5",
600: "#7E78A7",
700: "#675F98",
800: "#574E82",
900: "#463E6B",
1000: "#362E53",
1100: "#302652",
1200: "#2B1F51",
1300: "#25194F",
1400: "#21134D",
1500: "#1C0E49",
1600: "#180A46"
},
purple: {
100: "#F4F1F4",
200: "#F0E1EE",
300: "#E1B4E2",
400: "#DD9CE0",
500: "#DB82DF",
600: "#DB66E0",
700: "#DB48E3",
800: "#DD28E9",
900: "#D90EE8",
1000: "#C705D7",
1100: "#BC00CC",
1200: "#920E9D",
1300: "#77157F",
1400: "#5E1964",
1500: "#481A4C",
1600: "#341936"
},
violet: {
100: "#EFE9FB",
200: "#DCCCF7",
300: "#CBAEF4",
400: "#BC8FF3",
500: "#AE6FF3",
600: "#A34DF4",
700: "#9B2BF6",
800: "#9606F9",
900: "#8C01DE",
1000: "#7C01C5",
1100: "#6B01AB",
1200: "#5B0092",
1300: "#4B0078",
1400: "#3B005F",
1500: "#2B0045",
1600: "#1B002C"
},
blue: {
100: "#F5F8FF",
200: "#D9E5FF",
300: "#BDD3FE",
400: "#A2C3FD",
500: "#87B4FC",
600: "#6DA5FA",
700: "#5298F8",
800: "#388CF6",
900: "#1F81F3",
1000: "#176CDC",
1100: "#1D5AB6",
1200: "#214B94",
1300: "#223D74",
1400: "#203057",
1500: "#1B243C",
1600: "#141824"
},
lime: {
100: "#F8FEC5",
200: "#F4FCA1",
300: "#F0FA85",
400: "#EBF669",
500: "#E6F24F",
600: "#E1ED35",
700: "#DBE71B",
800: "#C2CB18",
900: "#A6AD18",
1000: "#8C9219",
1100: "#75791D",
1200: "#60631E",
1300: "#4C4E1E",
1400: "#3A3B1C",
1500: "#292A18",
1600: "#1A1B12"
},
orange: {
100: "#F1BEB1",
200: "#EEAF9B",
300: "#ECA185",
400: "#EB956E",
500: "#E98957",
600: "#E97F3F",
700: "#E87727",
800: "#D76A14",
900: "#CC6212",
1000: "#B65410",
1100: "#9F470D",
1200: "#893B0B",
1300: "#722F09",
1400: "#5B2407",
1500: "#441905",
1600: "#2D1003"
},
red: {
100: "#FEF0F0",
200: "#FCD3D3",
300: "#FAB7B7",
400: "#F79B9B",
500: "#F57F7F",
600: "#F26363",
700: "#EF4848",
800: "#EB2D2D",
900: "#E41616",
1000: "#C71414",
1100: "#AB1616",
1200: "#901717",
1300: "#771616",
1400: "#5E1515",
1500: "#471212",
1600: "#310E0E"
},
green: {
100: "#F3FBEF",
200: "#E0F4D7",
300: "#CBEDC0",
400: "#B6E5A9",
500: "#A0DD93",
600: "#8AD37D",
700: "#73C968",
800: "#5CBF54",
900: "#49B142",
1000: "#3E9939",
1100: "#348230",
1200: "#2A6A27",
1300: "#20521E",
1400: "#163B15",
1500: "#0D230D",
1600: "#040B04"
},
yellow: {
100: "#FFFCF7",
200: "#FFF4E2",
300: "#FFEDCE",
400: "#FFE5B9",
500: "#FFDDA4",
600: "#FFD68F",
700: "#FFCE7B",
800: "#FFC766",
900: "#F9BA4C",
1000: "#F0AD35",
1100: "#E59E20",
1200: "#C68B1F",
1300: "#A47622",
1400: "#846122",
1500: "#664D20",
1600: "#4A3A1C"
},
white: "#FFFFFF",
white_alpha: {
5: "#FFFFFF0D",
10: "#FFFFFF1A",
15: "#FFFFFF26",
20: "#FFFFFF33",
25: "#FFFFFF40",
30: "#FFFFFF4D",
35: "#FFFFFF59",
40: "#FFFFFF66",
45: "#FFFFFF73",
50: "#FFFFFF80",
55: "#FFFFFF8C",
60: "#FFFFFF99",
65: "#FFFFFFA6",
70: "#FFFFFFB3"
},
black_alpha: {
2: "#00000005",
4: "#0000000A",
6: "#0000000F",
8: "#00000014",
10: "#0000001A",
12: "#0000001F",
14: "#00000024",
16: "#00000029",
18: "#0000002E",
20: "#00000033",
22: "#00000038",
24: "#0000003D",
26: "#00000042",
28: "#00000047",
30: "#0000004D",
32: "#00000052",
34: "#00000057"
},
navy_alpha: {
1: "#30265203",
2: "#30265205",
3: "#30265208",
4: "#3026520A",
5: "#3026520D",
6: "#3026520F",
7: "#30265212",
8: "#30265214",
9: "#30265217",
10: "#3026521A",
12: "#3026521F",
14: "#30265224",
16: "#30265229",
18: "#3026522E",
20: "#30265233",
22: "#30265238",
24: "#3026523D",
26: "#30265242",
28: "#30265247",
30: "#3026524D",
32: "#30265252",
34: "#30265257",
36: "#3026525C",
38: "#30265261",
40: "#30265266",
42: "#3026526B",
44: "#30265270",
46: "#30265275",
48: "#3026527A",
50: "#30265280",
52: "#30265285",
54: "#3026528A",
56: "#3026528F",
58: "#30265294",
60: "#30265299",
62: "#3026529E",
64: "#302652A3",
66: "#302652A8",
68: "#302652AD",
70: "#302652B3",
72: "#302652B8",
74: "#302652BD",
76: "#302652C2",
78: "#302652C7",
80: "#302652CC",
82: "#302652D1",
84: "#302652D6",
86: "#302652DB",
88: "#302652E0",
90: "#302652E6",
92: "#302652EB",
94: "#302652F0",
96: "#302652F5",
98: "#302652FA"
},
grey_alpha: {
1: "#E3E3E303",
2: "#E3E3E305",
3: "#E3E3E308",
4: "#E3E3E30A",
5: "#E3E3E30D",
6: "#E3E3E30F",
7: "#E3E3E312",
8: "#E3E3E314",
9: "#E3E3E317",
10: "#E3E3E31A",
15: "#E3E3E326",
20: "#E3E3E333",
25: "#E3E3E340",
30: "#E3E3E34D",
35: "#E3E3E359",
40: "#E3E3E366",
45: "#E3E3E373",
50: "#E3E3E380",
55: "#E3E3E38C",
60: "#E3E3E399",
65: "#E3E3E3A6",
70: "#E3E3E3B3",
75: "#E3E3E3BF",
80: "#E3E3E3CC",
85: "#E3E3E3D9",
90: "#E3E3E3E6",
95: "#E3E3E3F2"
}
};
export default palette;
export { black, black_alpha, blue, green, grey, grey_alpha, lime, navy, navy_alpha, orange, purple, red, violet, white, white_alpha, yellow };
//# sourceMappingURL=palette.js.map