mirror of
https://github.com/LukeHagar/vercel.git
synced 2025-12-08 21:07:46 +00:00
f8e5df749c
Adds "hydrogen" framework preset for Shopify Hydrogen framework to allow for zero-config usage of the `@vercel/hydrogen` Builder.
73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
/* We */
|
|
/* Tailwind Configuration Docs: https://tailwindcss.com/docs/configuration */
|
|
|
|
function withOpacityValue(variable) {
|
|
return ({opacityValue}) => {
|
|
if (opacityValue === undefined) {
|
|
return `rgb(var(${variable}))`;
|
|
}
|
|
return `rgb(var(${variable}) / ${opacityValue})`;
|
|
};
|
|
}
|
|
|
|
module.exports = {
|
|
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: withOpacityValue('--color-primary'),
|
|
contrast: withOpacityValue('--color-contrast'),
|
|
notice: withOpacityValue('--color-accent'),
|
|
shopPay: 'var(--color-shop-pay)',
|
|
},
|
|
screens: {
|
|
sm: '32em',
|
|
md: '48em',
|
|
lg: '64em',
|
|
xl: '80em',
|
|
'2xl': '96em',
|
|
'sm-max': {max: '48em'},
|
|
'sm-only': {min: '32em', max: '48em'},
|
|
'md-only': {min: '48em', max: '64em'},
|
|
'lg-only': {min: '64em', max: '80em'},
|
|
'xl-only': {min: '80em', max: '96em'},
|
|
'2xl-only': {min: '96em'},
|
|
},
|
|
spacing: {
|
|
nav: 'var(--height-nav)',
|
|
screen: 'var(--screen-height, 100vh)',
|
|
},
|
|
height: {
|
|
screen: 'var(--screen-height, 100vh)',
|
|
'screen-no-nav':
|
|
'calc(var(--screen-height, 100vh) - var(--height-nav))',
|
|
},
|
|
width: {
|
|
mobileGallery: 'calc(100vw - 3rem)',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Helvetica Neue', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
|
serif: ['"IBMPlexSerif"', 'Palatino', 'ui-serif'],
|
|
},
|
|
fontSize: {
|
|
display: ['var(--font-size-display)', '1.1'],
|
|
heading: ['var(--font-size-heading)', '1.25'],
|
|
lead: ['var(--font-size-lead)', '1.333'],
|
|
copy: ['var(--font-size-copy)', '1.5'],
|
|
fine: ['var(--font-size-fine)', '1.333'],
|
|
},
|
|
maxWidth: {
|
|
'prose-narrow': '45ch',
|
|
'prose-wide': '80ch',
|
|
},
|
|
boxShadow: {
|
|
border: 'inset 0px 0px 0px 1px rgb(var(--color-primary) / 0.08)',
|
|
darkHeader: 'inset 0px -1px 0px 0px rgba(21, 21, 21, 0.4)',
|
|
lightHeader: 'inset 0px -1px 0px 0px rgba(21, 21, 21, 0.05)',
|
|
},
|
|
},
|
|
},
|
|
// eslint-disable-next-line node/no-unpublished-require
|
|
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
|
|
};
|