nextui/apps/docs/tailwind.config.js
2023-04-30 21:34:36 -03:00

97 lines
3.0 KiB
JavaScript

const {nextui} = require("@nextui-org/theme/plugin");
const {commonColors} = require("@nextui-org/theme/colors");
// get tailwindcss default config
const defaultConfig = require("tailwindcss/defaultConfig");
const twColors = require("tailwindcss/colors.js");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./layouts/**/*.{js,ts,jsx,tsx,mdx}",
"../../packages/core/theme/dist/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {
colors: {
"code-foreground": "#F4F4F4",
"code-syntax1": "#61AFEF",
"code-syntax2": "#98C379",
"code-syntax3": "#c678dd",
"code-syntax4": commonColors.yellow[600],
"code-syntax5": "#E06C75",
"code-syntax6": commonColors.yellow[600],
"code-removed": commonColors.red[300],
"code-added": commonColors.green[300],
"code-line-number": twColors.zinc[300],
"code-faded-line": twColors.zinc[500],
"code-comment": twColors.zinc[500],
"code-highlighted-word1-bg": commonColors.purple[500],
"code-highlighted-word1-bg-active": commonColors.purple[600],
"code-highlighted-word1-text": commonColors.purple[800],
"code-highlighted-word2-bg": commonColors.red[100],
"code-highlighted-word2-bg-active": commonColors.red[500],
"code-highlighted-word2-text": commonColors.red[200],
"code-highlighted-word3-bg": commonColors.green[300],
"code-highlighted-word3-bg-active": commonColors.green[300],
"code-highlighted-word3-text": commonColors.green[100],
},
boxShadow: {
highlighted: `${commonColors.purple[500]} 1px 0 0, ${commonColors.purple[500]} -1px 0 0`,
},
fontFamily: {
sans: ["Inter", ...defaultConfig.theme.fontFamily.sans],
serif: defaultConfig.theme.fontFamily.serif,
mono: defaultConfig.theme.fontFamily.mono,
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
keyframes: {
heartbeat: {
"0%": {transform: "scale(1)"},
"50%": {transform: "scale(1.2)"},
"100%": {transform: "scale(1)"},
},
levitate: {
"0%": {
transform: "translateY(0)",
},
"30%": {
transform: "translateY(-10px)",
},
"50%": {
transform: "translateY(4px)",
},
"70%": {
transform: "translateY(-15px)",
},
"100%": {
transform: "translateY(0)",
},
},
},
animation: {
heartbeat: "heartbeat 1s ease-in-out infinite",
levitate: "levitate 5s ease infinite",
},
},
plugins: [
nextui({
themes: {
light: {
"code-background": "#363449",
},
dark: {
"code-background": "#111111",
},
},
}),
],
};