Last active
November 30, 2020 21:35
-
-
Save davidpiesse/41ece4b9d5e0ce113588bc6483516d80 to your computer and use it in GitHub Desktop.
Replace the default (still great) colors from Tailwind to those from Material Design maintaining the Tailwind naming convention
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Notes | |
// | |
//For mapping the 100-900 colors we have mapped as follows: | |
//darkest:900 | |
//darker:700 | |
//dark:600 | |
//base:500 | |
//light:400 | |
//lighter:300 | |
//lightest:100 | |
let colors = { | |
transparent: "transparent", | |
black: "#000000", | |
"grey-darkest": "#212121", | |
"grey-darker": "#616161", | |
"grey-dark": "#757575", | |
grey: "#9E9E9E", | |
"grey-light": "#BDBDBD", | |
"grey-lighter": "#E0E0E0", | |
"grey-lightest": "#F5F5F5", | |
white: "#ffffff", | |
"red-darkest": "#b71c1c", | |
"red-darker": "#d32f2f", | |
"red-dark": "#e53935", | |
red: "#f44336", | |
"red-light": "#ef5350", | |
"red-lighter": "#e57373", | |
"red-lightest": "#ffcdd2", | |
"orange-darkest": "#E65100", | |
"orange-darker": "#F57C00", | |
"orange-dark": "#FB8C00", | |
orange: "#FF9800", | |
"orange-light": "#FFA726", | |
"orange-lighter": "#FFB74D", | |
"orange-lightest": "#FFE0B2", | |
"yellow-darkest": "#F57F17", | |
"yellow-darker": "#FBC02D", | |
"yellow-dark": "#FDD835", | |
yellow: "#FFEB3B", | |
"yellow-light": "#FFEE58", | |
"yellow-lighter": "#FFF176", | |
"yellow-lightest": "#FFF9C4", | |
"green-darkest": "#1B5E20", | |
"green-darker": "#388E3C", | |
"green-dark": "#43A047", | |
green: "#4CAF50", | |
"green-light": "#66BB6A", | |
"green-lighter": "#81C784", | |
"green-lightest": "#C8E6C9", | |
"teal-darkest": "#004D40", | |
"teal-darker": "#00796B", | |
"teal-dark": "#00897B", | |
teal: "#009688", | |
"teal-light": "#26A69A", | |
"teal-lighter": "#4DB6AC", | |
"teal-lightest": "#B2DFDB", | |
"blue-darkest": "#0D47A1", | |
"blue-darker": "#1976D2", | |
"blue-dark": "#1E88E5", | |
blue: "#2196F3", | |
"blue-light": "#42A5F5", | |
"blue-lighter": "#64B5F6", | |
"blue-lightest": "#BBDEFB", | |
"indigo-darkest": "#1A237E", | |
"indigo-darker": "#303F9F", | |
"indigo-dark": "#3949AB", | |
indigo: "#3F51B5", | |
"indigo-light": "#5C6BC0", | |
"indigo-lighter": "#7986CB", | |
"indigo-lightest": "#C5CAE9", | |
"purple-darkest": "#4A148C", | |
"purple-darker": "#7B1FA2", | |
"purple-dark": "#8E24AA", | |
purple: "#9C27B0", | |
"purple-light": "#AB47BC", | |
"purple-lighter": "#BA68C8", | |
"purple-lightest": "#E1BEE7", | |
"pink-darkest": "#880E4F", | |
"pink-darker": "#C2185B", | |
"pink-dark": "#D81B60", | |
pink: "#E91E63", | |
"pink-light": "#EC407A", | |
"pink-lighter": "#F06292", | |
"pink-lightest": "#F8BBD0", | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment