movie-web/tailwind.config.js

155 lines
3.8 KiB
JavaScript
Raw Normal View History

const themer = require("tailwindcss-themer");
2022-12-13 23:19:07 +01:00
/** @type {import('tailwindcss').Config} */
module.exports = {
2022-12-13 23:19:07 +01:00
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
2022-02-10 23:45:17 +01:00
extend: {
2022-02-13 18:49:03 +01:00
/* colors */
2022-02-10 23:45:17 +01:00
colors: {
2022-02-13 18:49:03 +01:00
"bink-100": "#432449",
"bink-200": "#412B57",
"bink-300": "#533670",
"bink-400": "#714C97",
"bink-500": "#8D66B5",
"bink-600": "#A87FD1",
"bink-700": "#CD97D6",
2023-01-07 23:44:46 +01:00
"denim-100": "#120F1D",
"denim-200": "#191526",
"denim-300": "#211D30",
"denim-400": "#2B263D",
"denim-500": "#38334A",
"denim-600": "#504B64",
"denim-700": "#7A758F",
"ash-600": "#817998",
"ash-500": "#9C93B5",
"ash-400": "#3D394D",
"ash-300": "#2C293A",
"ash-200": "#2B2836",
2023-10-18 17:21:31 +02:00
"ash-100": "#1E1C26"
2022-02-10 23:45:17 +01:00
},
2022-02-13 18:49:03 +01:00
/* fonts */
2022-02-10 23:45:17 +01:00
fontFamily: {
2023-10-18 17:21:31 +02:00
"open-sans": "'Open Sans'"
2022-02-10 23:45:17 +01:00
},
2022-02-13 18:49:03 +01:00
/* animations */
keyframes: {
"loading-pin": {
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
2023-10-18 17:21:31 +02:00
"20%": { height: "1em", "background-color": "white" }
}
2022-02-13 18:49:03 +01:00
},
2023-10-18 17:21:31 +02:00
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
}
},
plugins: [
require("tailwind-scrollbar"),
themer({
defaultTheme: {
extend: {
colors: {
2023-09-06 20:27:17 +02:00
// Branding
pill: {
2023-10-18 17:21:31 +02:00
background: "#1C1C36"
2023-09-06 20:27:17 +02:00
},
2023-08-20 17:59:46 +02:00
// meta data for the theme itself
global: {
accentA: "#505DBD",
2023-10-18 17:21:31 +02:00
accentB: "#3440A1"
2023-08-20 17:59:46 +02:00
},
// light bar
lightBar: {
2023-10-18 17:21:31 +02:00
light: "#2A2A71"
2023-08-20 17:59:46 +02:00
},
// Buttons
buttons: {
toggle: "#8D44D6",
2023-10-18 17:21:31 +02:00
toggleDisabled: "#202836"
},
2023-08-20 17:59:46 +02:00
// only used for body colors/textures
background: {
main: "#0A0A10",
accentA: "#6E3B80",
2023-10-18 17:21:31 +02:00
accentB: "#1F1F50"
},
2023-08-20 17:59:46 +02:00
// typography
type: {
emphasis: "#FFFFFF",
text: "#73739D",
dimmed: "#926CAD",
divider: "#262632",
2023-10-18 17:21:31 +02:00
secondary: "#64647B"
2023-08-20 17:59:46 +02:00
},
// search bar
search: {
background: "#1E1E33",
focused: "#24243C",
placeholder: "#4A4A71",
icon: "#545476",
2023-10-18 17:21:31 +02:00
text: "#FFFFFF"
2023-08-20 21:03:59 +02:00
},
// media cards
mediaCard: {
hoverBackground: "#161622",
hoverAccent: "#4D79A8",
hoverShadow: "#0A0A10",
shadow: "#161622",
barColor: "#4B4B63",
barFillColor: "#BA7FD6",
badge: "#151522",
2023-10-18 17:21:31 +02:00
badgeText: "#5F5F7A"
2023-09-06 20:27:17 +02:00
},
// video player
video: {
buttonBackground: "#444B5C",
scraping: {
card: "#161620",
error: "#E44F4F",
success: "#40B44B",
loading: "#B759D8",
2023-10-18 17:21:31 +02:00
noresult: "#64647B"
},
progress: {
background: "#8787A8",
preloaded: "#8787A8",
2023-10-18 17:21:31 +02:00
watched: "#A75FC9"
},
audio: {
2023-10-18 17:21:31 +02:00
set: "#A75FC9"
},
context: {
background: "#0C1216",
light: "#4D79A8",
2023-10-18 17:21:31 +02:00
border: "#141D23",
buttonFocus: "#202836",
flagBg: "#202836",
cardBorder: "#1B262E",
type: {
main: "#617A8A",
secondary: "#374A56",
2023-10-18 17:21:31 +02:00
accent: "#A570FA"
}
}
}
}
}
}
})
]
};