mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-03 15:05:01 -05:00
d35c24af42
* add active style * add disable state * add support for full-width * add custom focus outline
115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
|
|
module.exports = {
|
|
content: [
|
|
'./src/**/*.html',
|
|
'./src/**/*.js',
|
|
'./src/**/*.ts',
|
|
'./src/**/*.tsx'
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
colors: {
|
|
transparent: 'transparent',
|
|
'dark-theme-background': 'var(--gray90)',
|
|
'light-theme-background': 'var(--gray00)',
|
|
// Foreground
|
|
'default-foreground-primary': 'var(--default-foreground-primary)',
|
|
'default-foreground-secondary': 'var(--default-foreground-secondary)',
|
|
'default-foreground-tertiary': 'var(--default-foreground-tertiary)',
|
|
'default-foreground-quaternary': 'var(--default-foreground-quaternary)',
|
|
'default-foreground-danger': 'var(--default-foreground-danger)',
|
|
'default-foreground-info': 'var(--default-foreground-info)',
|
|
// Background
|
|
'default-background-primary': 'var(--default-background-primary)',
|
|
'default-background-secondary': 'var(--default-background-secondary)',
|
|
'default-background-tertiary': 'var(--default-background-tertiary)',
|
|
'default-background-quaternary': 'var(--default-background-quaternary)',
|
|
'default-background-danger': 'var(--default-background-danger)',
|
|
'default-background-info': 'var(--default-background-info)',
|
|
// Foreground hover
|
|
'default-foreground-primary-hover':
|
|
'var(--default-foreground-primary-hover)',
|
|
'default-foreground-danger-hover':
|
|
'var(--default-foreground-danger-hover)',
|
|
'default-foreground-info-hover': 'var(--default-foreground-info-hover)',
|
|
// Background hover
|
|
'default-background-primary-hover':
|
|
'var(--default-background-primary-hover)',
|
|
'default-background-danger-hover':
|
|
'var(--default-background-danger-hover)',
|
|
'default-background-info-hover': 'var(--default-background-info-hover)',
|
|
// Focus outline
|
|
'focus-outline-color': 'var(--focus-outline-color)',
|
|
gray: {
|
|
0: 'var(--gray00)',
|
|
50: 'var(--gray05)',
|
|
100: 'var(--gray10)',
|
|
150: 'var(--gray15)',
|
|
450: 'var(--gray45)',
|
|
750: 'var(--gray75)',
|
|
800: 'var(--gray80)',
|
|
850: 'var(--gray85)',
|
|
900: 'var(--gray90)'
|
|
},
|
|
green: {
|
|
50: 'var(--green05)',
|
|
100: 'var(--green10)',
|
|
400: 'var(--green40)',
|
|
700: 'var(--green70)',
|
|
900: 'var(--green90)'
|
|
},
|
|
blue: {
|
|
50: 'var(--blue05)',
|
|
100: 'var(--blue10)',
|
|
300: 'var(--blue30)',
|
|
500: 'var(--blue50)',
|
|
700: 'var(--blue70)',
|
|
900: 'var(--blue90)'
|
|
},
|
|
yellow: {
|
|
50: 'var(--yellow05)',
|
|
100: 'var(--yellow10)',
|
|
400: 'var(--yellow40)',
|
|
450: 'var(--yellow45)',
|
|
500: 'var(--yellow50)',
|
|
700: 'var(--yellow70)',
|
|
900: 'var(--yellow90)'
|
|
},
|
|
red: {
|
|
50: 'var(--red05)',
|
|
100: 'var(--red10)',
|
|
150: 'var(--red15)',
|
|
300: 'var(--red30)',
|
|
700: 'var(--red70)',
|
|
800: 'var(--red80)',
|
|
900: 'var(--red90)'
|
|
}
|
|
},
|
|
borderWidth: {
|
|
1: '1px',
|
|
3: '3px'
|
|
},
|
|
fontSize: {
|
|
// https://tailwindcss.com/docs/font-size#providing-a-default-line-height
|
|
// [fontSize, lineHeight]
|
|
sm: ['16px', '1.5'],
|
|
md: ['18px', '1.42857143'],
|
|
lg: ['24px', '1.3333333']
|
|
},
|
|
minHeight: {
|
|
'43-px': '43px'
|
|
},
|
|
extend: {
|
|
zIndex: {
|
|
2: '2'
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
plugin(({ addVariant }) => {
|
|
addVariant('aria-disabled', '[aria-disabled="true"]');
|
|
})
|
|
]
|
|
};
|