222 lines
5.6 KiB
JavaScript
222 lines
5.6 KiB
JavaScript
const themer = require("tailwindcss-themer");
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
/* colors */
|
|
colors: {
|
|
"bink-100": "#432449",
|
|
"bink-200": "#412B57",
|
|
"bink-300": "#533670",
|
|
"bink-400": "#714C97",
|
|
"bink-500": "#8D66B5",
|
|
"bink-600": "#A87FD1",
|
|
"bink-700": "#CD97D6",
|
|
"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",
|
|
"ash-100": "#1E1C26"
|
|
},
|
|
|
|
/* fonts */
|
|
fontFamily: {
|
|
"open-sans": "'Open Sans'"
|
|
},
|
|
|
|
/* animations */
|
|
keyframes: {
|
|
"loading-pin": {
|
|
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
|
|
"20%": { height: "1em", "background-color": "white" }
|
|
}
|
|
},
|
|
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
|
|
}
|
|
},
|
|
plugins: [
|
|
require("tailwind-scrollbar"),
|
|
themer({
|
|
defaultTheme: {
|
|
extend: {
|
|
colors: {
|
|
// Branding
|
|
pill: {
|
|
background: "#1C1C36"
|
|
},
|
|
|
|
// meta data for the theme itself
|
|
global: {
|
|
accentA: "#505DBD",
|
|
accentB: "#3440A1"
|
|
},
|
|
|
|
// light bar
|
|
lightBar: {
|
|
light: "#2A2A71"
|
|
},
|
|
|
|
// Buttons
|
|
buttons: {
|
|
toggle: "#8D44D6",
|
|
toggleDisabled: "#202836",
|
|
danger: "#792131",
|
|
dangerHover: "#8a293b"
|
|
},
|
|
|
|
// only used for body colors/textures
|
|
background: {
|
|
main: "#0A0A10",
|
|
accentA: "#6E3B80",
|
|
accentB: "#1F1F50"
|
|
},
|
|
|
|
// typography
|
|
type: {
|
|
emphasis: "#FFFFFF",
|
|
text: "#73739D",
|
|
dimmed: "#926CAD",
|
|
divider: "#262632",
|
|
secondary: "#64647B"
|
|
},
|
|
|
|
// search bar
|
|
search: {
|
|
background: "#1E1E33",
|
|
focused: "#24243C",
|
|
placeholder: "#4A4A71",
|
|
icon: "#545476",
|
|
text: "#FFFFFF"
|
|
},
|
|
|
|
// media cards
|
|
mediaCard: {
|
|
hoverBackground: "#161622",
|
|
hoverAccent: "#4D79A8",
|
|
hoverShadow: "#0A0A10",
|
|
shadow: "#161622",
|
|
barColor: "#4B4B63",
|
|
barFillColor: "#BA7FD6",
|
|
badge: "#151522",
|
|
badgeText: "#5F5F7A"
|
|
},
|
|
|
|
settings: {
|
|
sidebar: {
|
|
activeLink: "#171728",
|
|
|
|
type: {
|
|
secondary: "#4B395F",
|
|
inactive: "#8D68A9",
|
|
icon: "#926CAD",
|
|
iconActivated: "#6942A8",
|
|
activated: "#CBA1E8"
|
|
}
|
|
},
|
|
|
|
card: {
|
|
border: "#2A243E",
|
|
background: "#29243D",
|
|
altBackground: "#29243D"
|
|
}
|
|
},
|
|
|
|
utils: {
|
|
divider: "#353549"
|
|
},
|
|
|
|
// Error page
|
|
errors: {
|
|
card: "#12121B",
|
|
border: "#252534",
|
|
|
|
type: {
|
|
secondary: "#62627D"
|
|
}
|
|
},
|
|
|
|
// About page
|
|
about: {
|
|
circle: "#262632",
|
|
circleText: "#9A9AC3"
|
|
},
|
|
|
|
progress: {
|
|
background: "#8787A8",
|
|
preloaded: "#8787A8",
|
|
filled: "#A75FC9"
|
|
},
|
|
|
|
// video player
|
|
video: {
|
|
buttonBackground: "#444B5C",
|
|
|
|
scraping: {
|
|
card: "#161620",
|
|
error: "#E44F4F",
|
|
success: "#40B44B",
|
|
loading: "#B759D8",
|
|
noresult: "#64647B"
|
|
},
|
|
|
|
audio: {
|
|
set: "#A75FC9"
|
|
},
|
|
|
|
buttons: {
|
|
secondary: "#161F25",
|
|
secondaryText: "#8EA3B0",
|
|
secondaryHover: "#1B262E",
|
|
primary: "#fff",
|
|
primaryText: "#000",
|
|
primaryHover: "#dedede",
|
|
purple: "#6b298a",
|
|
purpleHover: "#7f35a1",
|
|
cancel: "#252533",
|
|
cancelHover: "#3C3C4A"
|
|
},
|
|
|
|
context: {
|
|
background: "#0C1216",
|
|
light: "#4D79A8",
|
|
border: "#1d252b",
|
|
hoverColor: "#1E2A32",
|
|
buttonFocus: "#202836",
|
|
flagBg: "#202836",
|
|
inputBg: "#202836",
|
|
buttonOverInputHover: "#283040",
|
|
inputPlaceholder: "#374A56",
|
|
cardBorder: "#1B262E",
|
|
slider: "#8787A8",
|
|
sliderFilled: "#A75FC9",
|
|
error: "#E44F4F",
|
|
|
|
buttons: {
|
|
list: "#161C26",
|
|
active: "#0D1317"
|
|
},
|
|
|
|
type: {
|
|
main: "#617A8A",
|
|
secondary: "#374A56",
|
|
accent: "#A570FA"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
]
|
|
};
|