status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
dappconnect-sdks/packages/components/tailwind.config.ts

252 lines
11 KiB
TypeScript
Raw Normal View History

2.0 (#523) * set up tailwind * add typography tokens * add shadows tokens * add border radius tokens * add react-aria * update tailwind config * update tokens * fix deps * add blur variant * update tw config * upgrade storybook * update storybook config * add inter * wip button * wip input * wip tabs * update typography tokens * u storybook * add types to src root * update storybook config * add sb type * u storybook * add icon button * add input * add checkbox * add counter * update checkbox * add dropdown * update button * f storybook types * u deps * update base config * update icon imports * add text * update colors build output * fix import * update colors format * add .vsode setting * update components buidl * mv * u button * add popover * u * add types * u shortcut * fix icons attributes * f * mv * u * add toast * update tw formatting * rm apps * rm examples * rm tamagui * dist tailwind config * rm more * stricter tsconfig * add source field * remove tokens * rm tamagui files * add prettier config to components * u text props * add tooltip * u toast * do not pass props * u icon buton * u dropdown button * add icon only to button * u type * checkbox * wip * fix build * fix components build * u tooltip * add theme * add input * u checkbox * update dropdown-button * add dropdown menu * move input to be reviewew * u dropdown button * u * u popover * u tabs * mv IconComponent -> IconElement * u tag * u context tag * u * fix context tag story * add provider * u button * u avatar * f avatar * a opacity to avatar * f prettier * f avatar * f * f * rm old setting * fix button props * skeleton wip * rm config * a dropdown submenu * add blur variant * add step * add step to tabs * add blur to context tag * u * add 80 to community * u tw config * add type * u checkbox * fix dropdown menu checkbox item * u button * unify content * customize color globally * add icons stories * add colors story * rm * u * rm dep * cleanup * u tsconfig * f opacity for emoji * remove "web#build" task from turbo.json * f dropdown menu * u tw export * add license * add changeset * update readme * f steps * f tag * f button * udpate colors format * update customisation color tailwind config * fix opacity * add shadow dark mode * u readme * u --------- Co-authored-by: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Co-authored-by: Felicio Mununga <felicio@users.noreply.github.com>
2024-09-25 15:17:58 +00:00
import * as colors from '@status-im/colors'
import { scrollbarWidth } from 'tailwind-scrollbar-utilities'
import { fontFamily } from 'tailwindcss/defaultTheme'
import plugin from 'tailwindcss/plugin'
import reactAriaComponentsPlugin from 'tailwindcss-react-aria-components'
import type { Config } from 'tailwindcss'
export default {
darkMode: ['selector', '[data-theme="dark"]'],
future: {
hoverOnlyWhenSupported: true,
},
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
borderColor: {
DEFAULT: 'transparent',
},
},
fontFamily: {
sans: ['var(--font-sans)', ...fontFamily.sans],
mono: fontFamily.mono,
},
fontWeight: {
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
},
fontSize: {
88: ['5.5rem', { lineHeight: '5.25rem', letterSpacing: '-0.1155rem' }],
64: ['4rem', { lineHeight: '4.25rem', letterSpacing: '-0.08rem' }],
40: ['2.5rem', { lineHeight: '2.75rem', letterSpacing: '-0.05rem' }],
27: ['1.6875rem', { lineHeight: '2rem', letterSpacing: '0rem' }],
19: ['1.1875rem', { lineHeight: '1.75rem', letterSpacing: '0rem' }],
15: ['0.9375rem', { lineHeight: '1.36rem', letterSpacing: '0rem' }],
13: ['0.8125rem', { lineHeight: '1.1375rem', letterSpacing: '0rem' }],
11: ['0.6875rem', { lineHeight: '1', letterSpacing: '0rem' }],
},
opacity: {},
colors: {
transparent: 'transparent',
current: 'currentColor',
...colors,
customisation: {
...colors.customisation,
'50': 'var(--customisation-50)',
'50/5': 'var(--customisation-50-5)',
'50/10': 'var(--customisation-50-10)',
'50/20': 'var(--customisation-50-20)',
'50/30': 'var(--customisation-50-30)',
'50/40': 'var(--customisation-50-40)',
'60': 'var(--customisation-60)',
},
},
boxShadow: {
1: 'var(--shadow-1, 0px 2px 20px 0px rgba(9, 16, 28, 0.04))',
2: 'var(--shadow-2, 0px 4px 20px 0px rgba(9, 16, 28, 0.08))',
3: 'var(--shadow-3, 0px 8px 30px 0px rgba(9, 16, 28, 0.12))',
4: 'var(--shadow-4, 0px 12px 56px 0px rgba(9, 16, 28, 0.16))',
},
borderRadius: {
// none: '0',
0: '0',
// 2: '4px',
// 3: '6px',
// 4: '8px',
// 5: '10px',
// 6: '12px',
// 7: '16px',
// 8: '20px',
// full: '9999px',
4: '4px',
6: '6px',
8: '8px',
10: '10px',
12: '12px',
16: '16px',
20: '20px',
full: '9999px',
},
keyframes: {
skeleton: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
},
animation: {
skeleton: 'skeleton 1.5s ease infinite',
},
},
plugins: [
plugin(({ addBase }) => {
addBase({
// '[data-theme="light"]': {},
'[data-theme="dark"]': {
'--shadow-1': '0px 4px 40px 0px rgba(9, 16, 28, 0.50)',
'--shadow-2': '0px 8px 40px 0px rgba(9, 16, 28, 0.64)',
'--shadow-3': '0px 12px 50px 0px rgba(9, 16, 28, 0.64)',
'--shadow-4': '0px 16px 64px 0px rgba(9, 16, 28, 0.72)',
},
'[data-customisation="army"]': {
'--customisation-50': colors.customisation.army['50'],
'--customisation-50-5': colors.customisation.army['50/5'],
'--customisation-50-10': colors.customisation.army['50/10'],
'--customisation-50-20': colors.customisation.army['50/20'],
'--customisation-50-30': colors.customisation.army['50/30'],
'--customisation-50-40': colors.customisation.army['50/40'],
'--customisation-60': colors.customisation.army['60'],
},
'[data-customisation="blue"]': {
'--customisation-50': colors.customisation.blue['50'],
'--customisation-50-5': colors.customisation.blue['50/5'],
'--customisation-50-10': colors.customisation.blue['50/10'],
'--customisation-50-20': colors.customisation.blue['50/20'],
'--customisation-50-30': colors.customisation.blue['50/30'],
'--customisation-50-40': colors.customisation.blue['50/40'],
'--customisation-60': colors.customisation.blue['60'],
},
'[data-customisation="camel"]': {
'--customisation-50': colors.customisation.camel['50'],
'--customisation-50-5': colors.customisation.camel['50/5'],
'--customisation-50-10': colors.customisation.camel['50/10'],
'--customisation-50-20': colors.customisation.camel['50/20'],
'--customisation-50-30': colors.customisation.camel['50/30'],
'--customisation-50-40': colors.customisation.camel['50/40'],
'--customisation-60': colors.customisation.camel['60'],
},
'[data-customisation="copper"]': {
'--customisation-50': colors.customisation.copper['50'],
'--customisation-50-5': colors.customisation.copper['50/5'],
'--customisation-50-10': colors.customisation.copper['50/10'],
'--customisation-50-20': colors.customisation.copper['50/20'],
'--customisation-50-30': colors.customisation.copper['50/30'],
'--customisation-50-40': colors.customisation.copper['50/40'],
'--customisation-60': colors.customisation.copper['60'],
},
'[data-customisation="magenta"]': {
'--customisation-50': colors.customisation.magenta['50'],
'--customisation-50-5': colors.customisation.magenta['50/5'],
'--customisation-50-10': colors.customisation.magenta['50/10'],
'--customisation-50-20': colors.customisation.magenta['50/20'],
'--customisation-50-30': colors.customisation.magenta['50/30'],
'--customisation-50-40': colors.customisation.magenta['50/40'],
'--customisation-60': colors.customisation.magenta['60'],
},
'[data-customisation="orange"]': {
'--customisation-50': colors.customisation.orange['50'],
'--customisation-50-5': colors.customisation.orange['50/5'],
'--customisation-50-10': colors.customisation.orange['50/10'],
'--customisation-50-20': colors.customisation.orange['50/20'],
'--customisation-50-30': colors.customisation.orange['50/30'],
'--customisation-50-40': colors.customisation.orange['50/40'],
'--customisation-60': colors.customisation.orange['60'],
},
'[data-customisation="pink"]': {
'--customisation-50': colors.customisation.pink['50'],
'--customisation-50-5': colors.customisation.pink['50/5'],
'--customisation-50-10': colors.customisation.pink['50/10'],
'--customisation-50-20': colors.customisation.pink['50/20'],
'--customisation-50-30': colors.customisation.pink['50/30'],
'--customisation-50-40': colors.customisation.pink['50/40'],
'--customisation-60': colors.customisation.pink['60'],
},
'[data-customisation="purple"]': {
'--customisation-50': colors.customisation.purple['50'],
'--customisation-50-5': colors.customisation.purple['50/5'],
'--customisation-50-10': colors.customisation.purple['50/10'],
'--customisation-50-20': colors.customisation.purple['50/20'],
'--customisation-50-30': colors.customisation.purple['50/30'],
'--customisation-50-40': colors.customisation.purple['50/40'],
'--customisation-60': colors.customisation.purple['60'],
},
'[data-customisation="sky"]': {
'--customisation-50': colors.customisation.sky['50'],
'--customisation-50-5': colors.customisation.sky['50/5'],
'--customisation-50-10': colors.customisation.sky['50/10'],
'--customisation-50-20': colors.customisation.sky['50/20'],
'--customisation-50-30': colors.customisation.sky['50/30'],
'--customisation-50-40': colors.customisation.sky['50/40'],
'--customisation-60': colors.customisation.sky['60'],
},
'[data-customisation="turquoise"]': {
'--customisation-50': colors.customisation.turquoise['50'],
'--customisation-50-5': colors.customisation.turquoise['50/5'],
'--customisation-50-10': colors.customisation.turquoise['50/10'],
'--customisation-50-20': colors.customisation.turquoise['50/20'],
'--customisation-50-30': colors.customisation.turquoise['50/30'],
'--customisation-50-40': colors.customisation.turquoise['50/40'],
'--customisation-60': colors.customisation.turquoise['60'],
},
'[data-customisation="yang"]': {
'--customisation-50': colors.customisation.yang['50'],
'--customisation-50-5': colors.customisation.yang['50/5'],
'--customisation-50-10': colors.customisation.yang['50/10'],
'--customisation-50-20': colors.customisation.yang['50/20'],
'--customisation-50-30': colors.customisation.yang['50/30'],
'--customisation-50-40': colors.customisation.yang['50/40'],
'--customisation-60': colors.customisation.yang['60'],
},
'[data-customisation="yellow"]': {
'--customisation-50': colors.customisation.yellow['50'],
'--customisation-50-5': colors.customisation.yellow['50/5'],
'--customisation-50-10': colors.customisation.yellow['50/10'],
'--customisation-50-20': colors.customisation.yellow['50/20'],
'--customisation-50-30': colors.customisation.yellow['50/30'],
'--customisation-50-40': colors.customisation.yellow['50/40'],
'--customisation-60': colors.customisation.yellow['60'],
},
'[data-customisation="yin"]': {
'--customisation-50': colors.customisation.yin['50'],
'--customisation-50-5': colors.customisation.yin['50/5'],
'--customisation-50-10': colors.customisation.yin['50/10'],
'--customisation-50-20': colors.customisation.yin['50/20'],
'--customisation-50-30': colors.customisation.yin['50/30'],
'--customisation-50-40': colors.customisation.yin['50/40'],
'--customisation-60': colors.customisation.yin['60'],
},
})
}),
// @see: https://github.com/tailwindlabs/tailwindcss/blob/0848e4ca26c0869a90818adb7337b5a463be38d0/src/corePlugins.js#L218
plugin(({ addVariant }) => {
const selector = '[data-background="blur"]'
// addVariant('blur', `:is(${selector} &)`)
addVariant('blur', `&:where(${selector}, ${selector} *)`)
}),
reactAriaComponentsPlugin,
// require('tailwindcss-animate'),
// // add scrollbar utilities before lands in tailwindcss
// // @see https://github.com/tailwindlabs/tailwindcss/pull/5732
scrollbarWidth(),
// // scrollbarColor(),
// // scrollbarGutter(),
],
} satisfies Config