58701d511b
* feat(alert): initialize component * feat(alert): add children prop * feat(alert): add className prop * feat(alert): add variant prop * feat(alert): add close button and handle onDismiss click * feat(alert): place all alert related css in alert.css * feat: define state color variables and use them instead of bootstrap ones * chore: remove unused classes * feat: replace base alert styles with tailwind classes * feat: extract close button to separate component * chore: remove unused css * test: add close button tests * refactor: use more tailwind-like approach for adding colors to theme * refactor: use more expressive prop name for close button label * refactor: use semantic color names * feat: add stories with/without close button * chore: add missing variants
59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
module.exports = {
|
|
purge: ['./src/**/*.html', './src/**/*.js'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
colors: {
|
|
transparent: 'transparent',
|
|
'dark-theme-background': 'var(--gray90)',
|
|
'light-theme-background': 'var(--gray00)',
|
|
'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-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)',
|
|
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)'
|
|
}
|
|
}
|
|
},
|
|
variants: {
|
|
extend: {
|
|
opacity: ['hover', 'focus']
|
|
}
|
|
},
|
|
plugins: []
|
|
};
|