91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
const colors = require('@radix-ui/colors');
|
|
const { fontFamily } = require('tailwindcss/defaultTheme');
|
|
const plugin = require('tailwindcss/plugin');
|
|
|
|
const iOsHeight = plugin(function ({ addUtilities }) {
|
|
const supportsTouchRule = '@supports (-webkit-touch-callout: none)';
|
|
const webkitFillAvailable = '-webkit-fill-available';
|
|
|
|
const utilities = {
|
|
'.min-h-screen-ios': {
|
|
[supportsTouchRule]: {
|
|
minHeight: webkitFillAvailable,
|
|
},
|
|
},
|
|
'.h-screen-ios': {
|
|
[supportsTouchRule]: {
|
|
height: webkitFillAvailable,
|
|
},
|
|
},
|
|
};
|
|
|
|
addUtilities(utilities, ['responsive']);
|
|
});
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
// app content
|
|
`src/**/*.{js,ts,jsx,tsx}`,
|
|
// include packages if not transpiling
|
|
'../../packages/**/*.{js,ts,jsx,tsx}',
|
|
'../../apps/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
backgroundImage: {
|
|
gradient:
|
|
'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
|
|
gradientHover:
|
|
'linear-gradient(145.37deg, rgba(255, 255, 255, 0.1) -8.75%, rgba(255, 255, 255, 0.057) 83.95%)',
|
|
shine:
|
|
'linear-gradient(45deg, rgba(255,255,255,0) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%)',
|
|
},
|
|
colors: {
|
|
cyan: {
|
|
1: colors.cyanDarkA.cyanA1,
|
|
2: colors.cyanDarkA.cyanA2,
|
|
3: colors.cyanDarkA.cyanA3,
|
|
4: colors.cyanDarkA.cyanA4,
|
|
5: colors.cyanDarkA.cyanA5,
|
|
6: colors.cyanDarkA.cyanA6,
|
|
7: colors.cyanDarkA.cyanA7,
|
|
8: colors.cyanDarkA.cyanA8,
|
|
9: colors.cyanDarkA.cyanA9,
|
|
10: colors.cyanDarkA.cyanA10,
|
|
11: colors.cyanDarkA.cyanA11,
|
|
12: colors.cyanDarkA.cyanA12,
|
|
},
|
|
slate: {
|
|
1: colors.slateDarkA.slateA1,
|
|
2: colors.slateDarkA.slateA2,
|
|
3: colors.slateDarkA.slateA3,
|
|
4: colors.slateDarkA.slateA4,
|
|
5: colors.slateDarkA.slateA5,
|
|
6: colors.slateDarkA.slateA6,
|
|
7: colors.slateDarkA.slateA7,
|
|
8: colors.slateDarkA.slateA8,
|
|
9: colors.slateDarkA.slateA9,
|
|
10: colors.slateDarkA.slateA10,
|
|
11: colors.slateDarkA.slateA11,
|
|
12: colors.slateDarkA.slateA12,
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['var(--font-inter)', ...fontFamily.sans],
|
|
},
|
|
keyframes: {
|
|
shine: {
|
|
'0%': { backgroundPosition: '-100%' },
|
|
'100%': { backgroundPosition: '100%' },
|
|
},
|
|
dash: {
|
|
'0%': { strokeDashoffset: 1000 },
|
|
'100%': { strokeDashoffset: 0 },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [iOsHeight],
|
|
};
|