Skip to content

Instantly share code, notes, and snippets.

@davidpiesse
Last active November 30, 2020 21:35
Show Gist options
  • Save davidpiesse/41ece4b9d5e0ce113588bc6483516d80 to your computer and use it in GitHub Desktop.
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
//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