P粉7380461722023-09-05 00:15:13
Okay, I found tailwindcss-themer and it worked.
https://github.com/RyanClementsHax/tailwindcss-themer
const defaultTheme = require('tailwindcss/defaultTheme');
var colors = {
gray: {
DEFAULT: '#868692',
50: '#F9FAFB',
100: '#F5F5FA',
200: '#E9E9EE',
300: '#D1D5DB',
400: '#9CA3AF',
500: '#868692',
600: '#667085',
700: '#504F4F',
800: '#2D3047',
900: '#111827'
},
primary: {
DEFAULT: '#009BF5',
50: '#DBF2FF',
100: '#E5F6FE',
200: '#8FD6FF',
300: '#5CC3FF',
400: '#29B0FF',
500: '#009BF5',
600: '#0078BD',
700: '#005485',
800: '#00314D',
900: '#000D15',
contrast: '#FFFFFF'
},
secondary: {
DEFAULT: '#744FC6',
50: '#EFEBF9',
100: '#E2DAF3',
200: '#C6B7E8',
300: '#AB94DC',
400: '#8F72D1',
500: '#744FC6',
600: '#5936A7',
700: '#42287C',
800: '#2C1B52',
900: '#150D28',
contrast: '#FFFFFF'
},
success: {
DEFAULT: '#14CC76',
50: '#B7F8D9',
100: '#A2F6CF',
200: '#78F2B9',
300: '#4EEEA3',
400: '#24EA8D',
500: '#14CC76',
600: '#10A761',
700: '#0D824B',
800: '#095D36',
900: '#053720',
contrast: '#FFFFFF'
},
error: {
DEFAULT: '#FC446F',
50: '#FFF9FA',
100: '#FFE5EB',
200: '#FEBCCC',
300: '#FD94AD',
400: '#FD6C8E',
500: '#FC446F',
600: '#FB0D44',
700: '#CD0332',
800: '#950225',
900: '#5E0217',
contrast: '#FFFFFF'
},
warning: {
DEFAULT: '#FD8204',
50: '#FEDDBA',
100: '#FEF8EF',
200: '#FEBE7D',
300: '#FEAA55',
400: '#FD962C',
500: '#FD8204',
600: '#D66D02',
700: '#AE5901',
800: '#864401',
900: '#5D2F01',
contrast: '#FFFFFF'
},
info: { // used for alarts and status
DEFAULT: '#009BF5',
50: '#DBF2FF',
100: '#E5F6FE',
200: '#8FD6FF',
300: '#5CC3FF',
400: '#29B0FF',
500: '#009BF5',
600: '#0078BD',
700: '#005485',
800: '#00314D',
900: '#000D15',
contrast: '#FFFFFF'
},
};
colors.ui = {
text: colors.gray['800'],
textDim: colors.gray['500'],
border: colors.gray['200'],
borderDim: colors.gray['100'],
borderDark: colors.gray['500'],
bg: '#FFFFFF',
bgDim: colors.gray['100'],
bgDimmer: colors.gray['50']
};
var colorsSB = {
gray: {
DEFAULT: '#868692',
50: '#F9FAFB',
100: '#F5F5FA',
200: '#E9E9EE',
300: '#D1D5DB',
400: '#9CA3AF',
500: '#868692',
600: '#667085',
700: '#504F4F',
800: '#2D3047',
900: '#111827'
},
primary: {
DEFAULT: '#F7941D',
50: '#FDEBDB',
100: '#FCE3CC',
200: '#F9C298',
300: '#F7AD64',
400: '#F69430',
500: '#F7941D',
600: '#F67900',
700: '#E06200',
800: '#C74A00',
900: '#A83100',
contrast: '#FFFFFF'
},
secondary: {
DEFAULT: '#744FC6',
50: '#EFEBF9',
100: '#E2DAF3',
200: '#C6B7E8',
300: '#AB94DC',
400: '#8F72D1',
500: '#744FC6',
600: '#5936A7',
700: '#42287C',
800: '#2C1B52',
900: '#150D28',
contrast: '#FFFFFF'
},
success: {
DEFAULT: '#14CC76',
50: '#B7F8D9',
100: '#A2F6CF',
200: '#78F2B9',
300: '#4EEEA3',
400: '#24EA8D',
500: '#14CC76',
600: '#10A761',
700: '#0D824B',
800: '#095D36',
900: '#053720',
contrast: '#FFFFFF'
},
error: {
DEFAULT: '#FC446F',
50: '#FFF9FA',
100: '#FFE5EB',
200: '#FEBCCC',
300: '#FD94AD',
400: '#FD6C8E',
500: '#FC446F',
600: '#FB0D44',
700: '#CD0332',
800: '#950225',
900: '#5E0217',
contrast: '#FFFFFF'
},
warning: {
DEFAULT: '#FD8204',
50: '#FEDDBA',
100: '#FEF8EF',
200: '#FEBE7D',
300: '#FEAA55',
400: '#FD962C',
500: '#FD8204',
600: '#D66D02',
700: '#AE5901',
800: '#864401',
900: '#5D2F01',
contrast: '#FFFFFF'
},
info: { // used for alarts and status
DEFAULT: '#009BF5',
50: '#DBF2FF',
100: '#E5F6FE',
200: '#8FD6FF',
300: '#5CC3FF',
400: '#29B0FF',
500: '#009BF5',
600: '#0078BD',
700: '#005485',
800: '#00314D',
900: '#000D15',
contrast: '#FFFFFF'
},
};
colorsSB.ui = {
text: colorsSB.gray['800'],
textDim: colorsSB.gray['500'],
border: colorsSB.gray['200'],
borderDim: colorsSB.gray['100'],
borderDark: colorsSB.gray['500'],
bg: '#FFFFFF',
bgDim: colorsSB.gray['100'],
bgDimmer: colorsSB.gray['50']
};
/** @type {import("tailwindcss").Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
corePlugins: {
preflight: false // To replace with another that solves some issues with tailwind preflight classes
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('tailwindcss-themer')({
defaultTheme: {
// put the default values of any config you want themed
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
extend: {
colors: colors,
textColor: {
default: colors.ui.text,
dim: colors.ui.textDim
},
backgroundColor: {
default: colors.ui.bg,
dim: colors.ui.bgDim,
dimmer: colors.ui.bgDimmer
},
borderColor: {
default: colors.ui.border,
dim: colors.ui.borderDim,
dark: colors.ui.borderDark
},
borderRadius: {
card: '0.625rem'
},
boxShadow: {
lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)'
},
fontSize: {
'2xs': '0.625rem',
'3.5xl': '2rem'
},
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans],
// TODO: Install Gibson font
mono: [
'canada-type-gibson, sans-serif',
...defaultTheme.fontFamily.mono
]
// serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif]
},
zIndex: {
dropdown: 1000,
modal: 9000
},
transitionProperty: {
position: 'width,height,left,top'
},
transitionTimingFunction: {
'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)'
}
}
},
themes: [
{
// name your theme anything that could be a valid css class name
// remember what you named your theme because you will use it as a class to enable the theme
name: 'additionalThemeName',
// put any overrides your theme has here
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
extend: {
colors: colorsSB,
textColor: {
default: colorsSB.ui.text,
dim: colorsSB.ui.textDim
},
backgroundColor: {
default: colorsSB.ui.bg,
dim: colorsSB.ui.bgDim,
dimmer: colorsSB.ui.bgDimmer
},
borderColor: {
default: colorsSB.ui.border,
dim: colorsSB.ui.borderDim,
dark: colorsSB.ui.borderDark
},
borderRadius: {
card: '0.625rem'
},
boxShadow: {
lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)'
},
fontSize: {
'2xs': '0.625rem',
'3.5xl': '2rem'
},
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans],
// TODO: Install Gibson font
mono: [
'canada-type-gibson, sans-serif',
...defaultTheme.fontFamily.mono
]
// serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif]
},
zIndex: {
dropdown: 1000,
modal: 9000
},
transitionProperty: {
position: 'width,height,left,top'
},
transitionTimingFunction: {
'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)'
}
}
}
]
})
]
};