mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 09:22:43 +03:00
324dd8b1ad
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9022 GitOrigin-RevId: e2c1cad5d419a827a36403d297d08cdeffd26160
315 lines
9.0 KiB
JavaScript
315 lines
9.0 KiB
JavaScript
const colors = require('tailwindcss/colors');
|
|
const plugin = require('tailwindcss/plugin');
|
|
|
|
function hexToHsl(hex) {
|
|
// Remove the '#' character from the beginning of the hex code
|
|
hex = hex.replace('#', '');
|
|
|
|
// Convert hex code to RGB
|
|
const red = parseInt(hex.substring(0, 2), 16) / 255;
|
|
const green = parseInt(hex.substring(2, 4), 16) / 255;
|
|
const blue = parseInt(hex.substring(4, 6), 16) / 255;
|
|
|
|
const max = Math.max(red, green, blue);
|
|
const min = Math.min(red, green, blue);
|
|
let hue,
|
|
saturation,
|
|
lightness = (max + min) / 2;
|
|
|
|
if (max === min) {
|
|
hue = saturation = 0; // achromatic
|
|
} else {
|
|
const delta = max - min;
|
|
saturation =
|
|
lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
|
|
switch (max) {
|
|
case red:
|
|
hue = (green - blue) / delta + (green < blue ? 6 : 0);
|
|
break;
|
|
case green:
|
|
hue = (blue - red) / delta + 2;
|
|
break;
|
|
case blue:
|
|
hue = (red - green) / delta + 4;
|
|
break;
|
|
}
|
|
hue *= 60;
|
|
}
|
|
|
|
return `${parseFloat(hue.toFixed(2))}, ${parseFloat(
|
|
(100 * saturation).toFixed(2)
|
|
)}%, ${parseFloat((100 * lightness).toFixed(2))}%`;
|
|
}
|
|
|
|
function dataStateVariant(state, { addVariant, e }) {
|
|
addVariant(`data-state-${state}`, ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.${e(
|
|
`data-state-${state}${separator}${className}`
|
|
)}[data-state='${state}']`;
|
|
});
|
|
});
|
|
|
|
addVariant(`group-data-state-${state}`, ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.group[data-state='${state}'] .${e(
|
|
`group-data-state-${state}${separator}${className}`
|
|
)}`;
|
|
});
|
|
});
|
|
|
|
addVariant(`peer-data-state-${state}`, ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.peer[data-state='${state}'] ~ .${e(
|
|
`peer-data-state-${state}${separator}${className}`
|
|
)}`;
|
|
});
|
|
});
|
|
}
|
|
|
|
module.exports = {
|
|
safelist: {
|
|
standard: /background$/,
|
|
},
|
|
darkMode: 'class',
|
|
theme: {
|
|
fontFamily: {
|
|
sans: ['Gudea', 'ui-sans-serif', 'system-ui'],
|
|
mono: ['"Overpass Mono"', 'ui-monospace', 'monospace'],
|
|
},
|
|
extend: {
|
|
boxShadow: {
|
|
eq: 'rgb(0 0 0) 0px 0px 2px',
|
|
},
|
|
colors: {
|
|
current: 'currentColor',
|
|
yellow: colors.amber,
|
|
gray: colors.slate,
|
|
primary: {
|
|
light: '#fad170',
|
|
DEFAULT: '#f9c548',
|
|
dark: '#d5ae52',
|
|
darker: '#ae8e3e',
|
|
},
|
|
cloud: {
|
|
DEFAULT: '#1eb4d4',
|
|
dark: '#197b98',
|
|
darker: '#074c4c',
|
|
},
|
|
secondary: {
|
|
light: '#eef4f7',
|
|
DEFAULT: '#297393',
|
|
dark: '#14394a',
|
|
},
|
|
legacybg: {
|
|
DEFAULT: '#f8fafb',
|
|
},
|
|
muted: {
|
|
DEFAULT: '#64748B',
|
|
dark: '#64748B',
|
|
},
|
|
},
|
|
spacing: {
|
|
xs: '0.571rem', // ~9.5 px
|
|
sm: '0.857rem', // ~14 px
|
|
md: '1.429rem', // ~23 px
|
|
lg: '2.286rem', // 36.5px
|
|
xl: '2.857rem', // 45.7px
|
|
input: '2.5rem', // 41.5px
|
|
btn: '2.5rem', // 41.5px
|
|
btnsm: '2rem', // 32px
|
|
formlabel: '0.571rem', // ~9.5 px
|
|
},
|
|
fontSize: {
|
|
sm: ['0.875rem', { lineHeight: '1.25rem' }],
|
|
base: ['1rem', { lineHeight: '1.5rem' }],
|
|
lg: ['1.143rem', { lineHeight: '1.429rem' }],
|
|
xl: ['1.714rem', { lineHeight: '2.143rem' }],
|
|
subtitle: ['1.300rem', { lineHeight: '2.143rem' }], // ~20 px
|
|
title: ['1.5rem', { lineHeight: '2.143rem' }], // ~24 px
|
|
},
|
|
width: {
|
|
inherit: 'inherit',
|
|
},
|
|
keyframes: {
|
|
onboardingWizardFadeIn: {
|
|
'0%': {
|
|
opacity: '0',
|
|
scale: '.9',
|
|
},
|
|
'50%': {
|
|
opacity: '.5',
|
|
scale: '.95',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
scale: '1',
|
|
},
|
|
},
|
|
collapsibleContentOpen: {
|
|
from: {
|
|
height: '0',
|
|
},
|
|
to: {
|
|
height: 'var(--radix-collapsible-content-height)',
|
|
},
|
|
},
|
|
collapsibleContentClose: {
|
|
from: {
|
|
height: 'var(--radix-collapsible-content-height)',
|
|
},
|
|
to: {
|
|
height: '0',
|
|
},
|
|
},
|
|
slideUpAndFade: {
|
|
from: {
|
|
opacity: `0`,
|
|
transform: `translateY(2px)`,
|
|
},
|
|
to: {
|
|
opacity: `1`,
|
|
transform: `translateY(0)`,
|
|
},
|
|
},
|
|
slideRightAndFade: {
|
|
from: {
|
|
opacity: `0`,
|
|
transform: `translateX(-2px)`,
|
|
},
|
|
to: {
|
|
opacity: `1`,
|
|
transform: `translateX(0)`,
|
|
},
|
|
},
|
|
slideDownAndFade: {
|
|
from: {
|
|
opacity: `0`,
|
|
transform: `translateY(-2px)`,
|
|
},
|
|
to: {
|
|
opacity: `1`,
|
|
transform: `translateY(0)`,
|
|
},
|
|
},
|
|
slideLeftAndFade: {
|
|
from: {
|
|
opacity: `0`,
|
|
transform: `translateX(2px)`,
|
|
},
|
|
to: {
|
|
opacity: `1`,
|
|
transform: `translateX(0)`,
|
|
},
|
|
},
|
|
notificationOpen: {
|
|
from: {
|
|
opacity: `0`,
|
|
transform: `translateX(100%)`,
|
|
},
|
|
to: {
|
|
opacity: `1`,
|
|
transform: `translateX(0)`,
|
|
},
|
|
},
|
|
notificationClose: {
|
|
from: {
|
|
opacity: `1`,
|
|
transform: `translateY(0)`,
|
|
},
|
|
to: {
|
|
opacity: `0`,
|
|
transform: `translateY(-100%)`,
|
|
},
|
|
},
|
|
dropdownMenuContentOpen: {
|
|
from: {
|
|
opacity: '0',
|
|
},
|
|
to: {
|
|
opacity: '1',
|
|
},
|
|
},
|
|
dropdownMenuContentClose: {
|
|
from: {
|
|
opacity: '1',
|
|
},
|
|
to: {
|
|
opacity: '0',
|
|
},
|
|
},
|
|
fadeIn: {
|
|
from: { opacity: 0 },
|
|
to: { opacity: 1 },
|
|
},
|
|
alertContentShow: {
|
|
from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
|
|
to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
|
},
|
|
},
|
|
animation: {
|
|
collapsibleContentOpen: 'collapsibleContentOpen 300ms ease-out',
|
|
collapsibleContentClose: 'collapsibleContentClose 300ms ease-out',
|
|
collapsibleContentOpenFast: 'collapsibleContentOpen 200ms ease-out',
|
|
collapsibleContentCloseFast: 'collapsibleContentClose 200ms ease-out',
|
|
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideRightAndFade:
|
|
'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideDownAndFade:
|
|
'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideLeftAndFade:
|
|
'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
notificationOpen: 'notificationOpen 300ms ease-in-out',
|
|
notificationClose: 'notificationClose 300ms ease-in-out',
|
|
dropdownMenuContentOpen: 'dropdownMenuContentOpen 100ms ease-in',
|
|
dropdownMenuContentClose: 'dropdownMenuContentClose 100ms ease-out',
|
|
overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/forms'),
|
|
require('tailwindcss-radix')(),
|
|
plugin(helpers => {
|
|
// variants that help styling Radix-UI components
|
|
dataStateVariant('open', helpers);
|
|
dataStateVariant('closed', helpers);
|
|
dataStateVariant('on', helpers);
|
|
dataStateVariant('checked', helpers);
|
|
dataStateVariant('unchecked', helpers);
|
|
}),
|
|
plugin(function ({ addBase, theme }) {
|
|
const colors = {
|
|
'--tw-font-family-sans': theme('fontFamily.sans'),
|
|
'--tw-font-family-mono': theme('fontFamily.mono'),
|
|
'--tw-color-white-hex': '#ffffff',
|
|
'--tw-color-white-hsl': '0, 0%, 100%',
|
|
'--tw-color-black-hex': '#000000',
|
|
'--tw-color-black-hsl': '0, 0%, 0%',
|
|
};
|
|
Object.entries(theme('colors'))
|
|
.filter(([name]) => !['white', 'black'].includes(name))
|
|
.forEach(([name, color]) => {
|
|
Object.entries(color).forEach(([shade, value]) => {
|
|
if (typeof value === 'object') {
|
|
Object.entries(value).forEach(([shade, hex]) => {
|
|
if (hex?.startsWith('#')) {
|
|
colors[`--tw-color-${name}-${shade}-hex`] = hex;
|
|
colors[`--tw-color-${name}-${shade}-hsl`] = hexToHsl(hex);
|
|
}
|
|
});
|
|
} else if (typeof value === 'string' && value?.startsWith('#')) {
|
|
colors[`--tw-color-${name}-${shade}-hex`] = value;
|
|
colors[`--tw-color-${name}-${shade}-hsl`] = hexToHsl(value);
|
|
}
|
|
});
|
|
});
|
|
addBase({
|
|
'*, ::before, ::after': colors,
|
|
});
|
|
}),
|
|
],
|
|
};
|