livebook/assets/tailwind.config.js
2024-05-16 18:17:45 +02:00

140 lines
3.4 KiB
JavaScript

const plugin = require("tailwindcss/plugin");
module.exports = {
content: [
"../lib/**/*.ex",
"../lib/**/*.leex",
"../lib/**/*.heex",
"../lib/**/*.eex",
"./js/**/*.js",
],
theme: {
fontFamily: {
sans: ["Inter"],
mono: ["JetBrains Mono", "monospace"],
logo: ["Red Hat Text"],
},
extend: {
colors: {
blue: {
50: "#F5F7FF",
100: "#ECF0FF",
200: "#D8E0FF",
300: "#B2C1FF",
400: "#8BA2FF",
500: "#6583FF",
600: "#3E64FF",
700: "#2D4CDB",
800: "#1F37B7",
900: "#132593",
},
gray: {
50: "#F8FAFC",
100: "#F0F5F9",
200: "#E1E8F0",
300: "#CAD5E0",
400: "#91A4B7",
500: "#61758A",
600: "#445668",
700: "#304254",
800: "#1C2A3A",
900: "#0D1829",
},
red: {
50: "#FDF3F4",
100: "#FCE8E9",
200: "#F8D1D2",
300: "#F1A3A6",
400: "#E97579",
500: "#E2474D",
600: "#DB1920",
700: "#BC1227",
800: "#9D0C2B",
900: "#7F072B",
},
green: {
50: "#F3F9F3",
100: "#E9F4E9",
200: "#D2E7D1",
300: "#A5D0A3",
400: "#77B876",
500: "#4AA148",
600: "#1D891A",
700: "#137518",
800: "#0D6219",
900: "#084F18",
},
yellow: {
50: "#FFFAF5",
100: "#FFF7EC",
200: "#FFEED9",
300: "#FFDCB2",
400: "#FFCB8C",
500: "#FFB965",
600: "#FFA83F",
700: "#DB842E",
800: "#B7641F",
900: "#934814",
},
"green-bright": {
50: "#F0FDF4",
100: "#DCFCE7",
200: "#BBF7D0",
300: "#86EFAC",
400: "#4ADE80",
500: "#22C55E",
600: "#16A34A",
700: "#15803D",
800: "#166534",
900: "#14532D",
},
"yellow-bright": {
50: "#FEFCE8",
100: "#FEF9C3",
200: "#FEF08A",
300: "#FDE047",
400: "#FACC15",
500: "#EAB308",
600: "#CA8A04",
700: "#A16207",
800: "#854D0E",
900: "#713F12",
},
"brand-pink": "#e44c75",
},
keyframes: {
shake: {
"0%": { transform: "translateX(0)" },
"20%": { transform: "translateX(-10px)" },
"40%": { transform: "translateX(8px)" },
"60%": { transform: "translateX(-6px)" },
"80%": { transform: "translateX(4px)" },
"100%": { transform: "translateX(0)" },
},
},
animation: {
shake: "shake 0.5s linear 0.2s",
},
},
},
plugins: [
plugin(({ addVariant }) => {
addVariant("phx-loading", [".phx-loading&", ".phx-loading &"]);
addVariant("phx-connected", [".phx-connected&", ".phx-connected &"]);
addVariant("phx-error", [".phx-error&", ".phx-error &"]);
addVariant("phx-click-loading", [
".phx-click-loading&",
".phx-click-loading &",
]);
addVariant("phx-submit-loading", [
".phx-submit-loading&",
".phx-submit-loading &",
]);
addVariant("phx-change-loading", [
".phx-change-loading&",
".phx-change-loading &",
]);
}),
],
};