71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
|
const defaultTheme = require("tailwindcss/defaultTheme");
|
||
|
|
const plugin = require("tailwindcss/plugin");
|
||
|
|
|
||
|
|
const colors = {
|
||
|
|
primary: { light: "#33D17E", DEFAULT: "#00c65e" },
|
||
|
|
warning: "#ffd567",
|
||
|
|
error: "#ED5454",
|
||
|
|
palette: {
|
||
|
|
100: "#f5f7f7",
|
||
|
|
200: "#d4dddb",
|
||
|
|
300: "#9e9e9e",
|
||
|
|
400: "#555555",
|
||
|
|
500: "#242424",
|
||
|
|
600: "#0d0d0d",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
content: [
|
||
|
|
"./src/**/*.{js,jsx,ts,tsx}",
|
||
|
|
"./node_modules/skynet-storybook/dist/**/*.{js,jsx,ts,tsx}", // Also apply Tailwind classes to our shared components library
|
||
|
|
],
|
||
|
|
theme: {
|
||
|
|
screens: {
|
||
|
|
sm: "640px",
|
||
|
|
md: "768px",
|
||
|
|
lg: "1024px",
|
||
|
|
xl: "1440px",
|
||
|
|
},
|
||
|
|
backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||
|
|
borderColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||
|
|
textColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||
|
|
placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||
|
|
extend: {
|
||
|
|
fontFamily: {
|
||
|
|
sans: ["Sora", ...defaultTheme.fontFamily.sans],
|
||
|
|
content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
tab: ["18px", "28px"],
|
||
|
|
},
|
||
|
|
backgroundColor: ["disabled"],
|
||
|
|
textColor: ["disabled"],
|
||
|
|
keyframes: {
|
||
|
|
wiggle: {
|
||
|
|
"0%, 100%": { transform: "rotate(-3deg)" },
|
||
|
|
"50%": { transform: "rotate(3deg)" },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
wiggle: "wiggle 3s ease-in-out infinite",
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
page: "100%",
|
||
|
|
"page-md": "640px",
|
||
|
|
"page-lg": "896px",
|
||
|
|
"page-xl": "1312px",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plugins: [
|
||
|
|
plugin(function ({ addBase, theme }) {
|
||
|
|
addBase({
|
||
|
|
body: {
|
||
|
|
color: theme("textColor.palette.600"),
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
};
|