Chrysoblog/tailwind.config.ts

157 lines
4.8 KiB
TypeScript

import { fontFamily } from "tailwindcss/defaultTheme";
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: ["./src/**/*.{html,js,svelte,ts}"],
safelist: ["dark"],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px"
}
},
extend: {
colors: {
border: "hsl(var(--border) / <alpha-value>)",
input: "hsl(var(--input) / <alpha-value>)",
ring: "hsl(var(--ring) / <alpha-value>)",
background: "hsl(var(--background) / <alpha-value>)",
foreground: "hsl(var(--foreground) / <alpha-value>)",
primary: {
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
},
secondary: {
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
},
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
},
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
},
accent: {
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
},
popover: {
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
},
card: {
DEFAULT: "hsl(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
},
eucalyptus: {
100: '#E6F3EF',
200: '#C0E1D7',
300: '#9ACFBF',
400: '#4EAB90',
500: '#028760',
600: '#027A56',
700: '#01513A',
800: '#013D2B',
900: '#01291D',
},
java: {
100: '#EDF9F8',
200: '#D2EFED',
300: '#B6E5E2',
400: '#80D2CD',
500: '#49BEB7',
600: '#42ABA5',
700: '#2C726E',
800: '#215652',
900: '#163937',
},
sunglow: {
100: '#FFFAEF',
200: '#FEF3D6',
300: '#FDECBD',
400: '#FCDD8C',
500: '#FACF5A',
600: '#E1BA51',
700: '#967C36',
800: '#715D29',
900: '#4B3E1B',
},
magenta: {
100: '#F9ECF4',
200: '#F1D0E4',
300: '#E8B3D3',
400: '#D77AB2',
500: '#C64191',
600: '#B23B83',
700: '#772757',
800: '#591D41',
900: '#3B142C',
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)"
},
fontFamily: {
//sans: [...fontFamily.sans],
sans: '"Source Han Sans SC", "Source Han Sans CN","Noto Sans CJK SC", "Noto Sans", -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif',
//For varible font usage sometimes
// 'serif': '"Source Han Serif CN Variable", "Source Han Serif SC", "Source Han Serif CN","Noto Serif CJK SC", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif',
serif: '"Source Han Serif SC", "Source Han Serif CN","Noto Serif CJK SC", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif',
cursive: 'FancyTitleFont,"Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif',
mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
},
typography: ((theme) => {
let markdownCommon = {
h1: {
color: theme('colors.eucalyptus.700'),
},
h2: {
color: theme('colors.eucalyptus.700'),
},
h3: {
color: theme('colors.eucalyptus.800'),
},
h4: {
color: theme('colors.eucalyptus.800'),
},
a: {
color: theme('colors.eucalyptus.400'),
"&:focus": {
color: theme('colors.java.500'),
},
},
ul: {
listStyleType: "square",
listStylePosition: "outside",
},
ol: {
listStyleType: "decimal",
listStylePosition: "outside",
},
maxWidth: "100%",
};
return {
DEFAULT: {
css: {
...markdownCommon,
},
},
};
}),
}
},
plugins: [
require('@tailwindcss/typography'),
],
};
export default config;