mirror of
https://github.com/graphql-hive/console
synced 2026-04-21 14:37:17 +00:00
351 lines
12 KiB
TypeScript
351 lines
12 KiB
TypeScript
import svgToDataUri from 'mini-svg-data-uri';
|
|
import type { Config } from 'tailwindcss';
|
|
import tailwindcssAnimate from 'tailwindcss-animate';
|
|
import tailwindcssRadix from 'tailwindcss-radix';
|
|
import colors from 'tailwindcss/colors';
|
|
import { fontFamily } from 'tailwindcss/defaultTheme';
|
|
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
|
|
import plugin from 'tailwindcss/plugin';
|
|
|
|
const config: Config = {
|
|
darkMode: 'class',
|
|
content: ['./index.html', './src/**/*.ts{,x}'],
|
|
important: true,
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
sm: '100%',
|
|
md: '100%',
|
|
lg: '100%',
|
|
xl: '100%',
|
|
'2xl': '1800px',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter var,' + fontFamily.sans.join(','),
|
|
{
|
|
fontFeatureSettings: 'normal',
|
|
fontVariationSettings: '"opsz" 32',
|
|
},
|
|
],
|
|
mono: fontFamily.mono,
|
|
},
|
|
colors: {
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
inherit: 'inherit',
|
|
white: '#fcfcfc',
|
|
black: '#0b0d11',
|
|
emerald: colors.emerald,
|
|
red: {
|
|
50: '#fef5f5',
|
|
100: '#fdeaeb',
|
|
200: '#fbcbce',
|
|
300: '#f8abb0',
|
|
400: '#f26d74',
|
|
500: '#ed2e39',
|
|
600: '#d52933',
|
|
700: '#b2232b',
|
|
800: '#8e1c22',
|
|
900: '#74171c',
|
|
},
|
|
yellow: {
|
|
50: '#fffcf2',
|
|
100: '#fffae6',
|
|
200: '#fff2bf',
|
|
300: '#ffeb99',
|
|
400: '#ffdb4d',
|
|
500: '#fc0',
|
|
600: '#e6b800',
|
|
700: '#bf9900',
|
|
800: '#997a00',
|
|
900: '#7d6400',
|
|
},
|
|
green: {
|
|
50: '#f2fcf9',
|
|
100: '#e6f8f3',
|
|
200: '#bfeee1',
|
|
300: '#99e3cf',
|
|
400: '#4dcfac',
|
|
500: '#00ba88',
|
|
600: '#00a77a',
|
|
700: '#008c66',
|
|
800: '#007052',
|
|
900: '#005b43',
|
|
},
|
|
cyan: '#0acccc',
|
|
blue: colors.sky,
|
|
gray: colors.stone,
|
|
rose: colors.rose,
|
|
pink: colors.pink,
|
|
teal: colors.teal,
|
|
indigo: colors.indigo,
|
|
amber: colors.amber,
|
|
lime: colors.lime,
|
|
magenta: '#f11197',
|
|
orange: {
|
|
50: '#fefbf5',
|
|
100: '#fef8ec',
|
|
200: '#fcedcf',
|
|
300: '#fbe2b3',
|
|
400: '#f7cd79',
|
|
500: '#f4b740',
|
|
600: '#dca53a',
|
|
700: '#b78930',
|
|
800: '#926e26',
|
|
900: '#785a1f',
|
|
},
|
|
zinc: colors.zinc,
|
|
purple: colors.purple,
|
|
},
|
|
extend: {
|
|
colors: {
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'rgb(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
sidebar: {
|
|
DEFAULT: 'hsl(var(--sidebar-background))',
|
|
foreground: 'hsl(var(--sidebar-foreground))',
|
|
primary: 'hsl(var(--sidebar-primary))',
|
|
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
accent: 'hsl(var(--sidebar-accent))',
|
|
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
border: 'hsl(var(--sidebar-border))',
|
|
ring: 'hsl(var(--sidebar-ring))',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
xs: 'calc(var(--radius) - 6px)',
|
|
},
|
|
ringColor: ({ theme }) => ({
|
|
DEFAULT: theme('colors.orange.500/75'),
|
|
...theme('colors'),
|
|
}),
|
|
keyframes: {
|
|
// Dropdown menu
|
|
'scale-in': {
|
|
'0%': { opacity: '0', transform: 'scale(0)' },
|
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
'slide-down': {
|
|
'0%': { opacity: '0', transform: 'translateY(-10px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'slide-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
// Tooltip
|
|
'slide-up-fade': {
|
|
'0%': { opacity: '0', transform: 'translateY(2px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'slide-right-fade': {
|
|
'0%': { opacity: '0', transform: 'translateX(-2px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
'slide-down-fade': {
|
|
'0%': { opacity: '0', transform: 'translateY(-2px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'slide-left-fade': {
|
|
'0%': { opacity: '0', transform: 'translateX(2px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
// Navigation menu
|
|
'enter-from-right': {
|
|
'0%': { transform: 'translateX(200px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
'enter-from-left': {
|
|
'0%': { transform: 'translateX(-200px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
'exit-to-right': {
|
|
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
'100%': { transform: 'translateX(200px)', opacity: '0' },
|
|
},
|
|
'exit-to-left': {
|
|
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
'100%': { transform: 'translateX(-200px)', opacity: '0' },
|
|
},
|
|
'scale-in-content': {
|
|
'0%': { transform: 'rotateX(-30deg) scale(0.9)', opacity: '0' },
|
|
'100%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
|
|
},
|
|
'scale-out-content': {
|
|
'0%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
|
|
'100%': { transform: 'rotateX(-10deg) scale(0.95)', opacity: '0' },
|
|
},
|
|
'fade-in': {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
'fade-out': {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
// Toast
|
|
'toast-hide': {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
'toast-slide-in-right': {
|
|
'0%': { transform: 'translateX(calc(100% + 1rem))' },
|
|
'100%': { transform: 'translateX(0)' },
|
|
},
|
|
'toast-slide-in-bottom': {
|
|
'0%': { transform: 'translateY(calc(100% + 1rem))' },
|
|
'100%': { transform: 'translateY(0)' },
|
|
},
|
|
'toast-swipe-out-x': {
|
|
'0%': { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
|
|
'100%': { transform: 'translateX(calc(100% + 1rem))' },
|
|
},
|
|
'toast-swipe-out-y': {
|
|
'0%': { transform: 'translateY(var(--radix-toast-swipe-end-y))' },
|
|
'100%': { transform: 'translateY(calc(100% + 1rem))' },
|
|
},
|
|
'accordion-down': {
|
|
from: { height: '0' },
|
|
to: { height: 'var(--radix-accordion-content-height)' },
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
to: { height: '0' },
|
|
},
|
|
shimmer: {
|
|
from: {
|
|
backgroundPosition: '0 0',
|
|
},
|
|
to: {
|
|
backgroundPosition: '-200% 0',
|
|
},
|
|
},
|
|
/** @source https://gist.github.com/krishaantechnology/245b29cfbb25eb456c09fce63673decc */
|
|
shake: {
|
|
'10%, 90%': {
|
|
transform: 'translate3d(-1px, 0, 0)',
|
|
},
|
|
'20%, 80%': {
|
|
transform: 'translate3d(2px, 0, 0)',
|
|
},
|
|
'30%, 50%, 70%': {
|
|
transform: 'translate3d(-4px, 0, 0)',
|
|
},
|
|
'40%, 60%': {
|
|
transform: 'translate3d(4px, 0, 0)',
|
|
},
|
|
},
|
|
},
|
|
animation: {
|
|
// Dropdown menu
|
|
'scale-in': 'scale-in 0.2s ease-in-out',
|
|
'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
// Tooltip
|
|
'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-right-fade': 'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
// Navigation menu
|
|
'enter-from-right': 'enter-from-right 0.25s ease',
|
|
'enter-from-left': 'enter-from-left 0.25s ease',
|
|
'exit-to-right': 'exit-to-right 0.25s ease',
|
|
'exit-to-left': 'exit-to-left 0.25s ease',
|
|
'scale-in-content': 'scale-in-content 0.2s ease',
|
|
'scale-out-content': 'scale-out-content 0.2s ease',
|
|
'fade-in': 'fade-in 0.2s ease',
|
|
'fade-out': 'fade-out 0.2s ease',
|
|
// Toast
|
|
'toast-hide': 'toast-hide 100ms ease-in forwards',
|
|
'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'toast-swipe-out-x': 'toast-swipe-out-x 100ms ease-out forwards',
|
|
'toast-swipe-out-y': 'toast-swipe-out-y 100ms ease-out forwards',
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
shimmer: 'shimmer 1.5s linear infinite',
|
|
/** @source https://gist.github.com/krishaantechnology/245b29cfbb25eb456c09fce63673decc */
|
|
shake: 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
|
|
},
|
|
minHeight: {
|
|
content: 'var(--content-height)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// Utilities and variants for styling Radix state
|
|
tailwindcssRadix({}),
|
|
tailwindcssAnimate,
|
|
plugin(({ addBase, theme }) => {
|
|
const allColors = flattenColorPalette(theme('colors'));
|
|
const newVars = Object.fromEntries(
|
|
Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
|
|
);
|
|
addBase({
|
|
':root': newVars,
|
|
});
|
|
}),
|
|
plugin(({ matchUtilities, theme }) => {
|
|
matchUtilities(
|
|
{
|
|
'bg-grid': value => ({
|
|
backgroundImage: `url("${svgToDataUri(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
|
|
)}")`,
|
|
}),
|
|
'bg-grid-small': value => ({
|
|
backgroundImage: `url("${svgToDataUri(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
|
|
)}")`,
|
|
}),
|
|
'bg-dot': value => ({
|
|
backgroundImage: `url("${svgToDataUri(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`,
|
|
)}")`,
|
|
}),
|
|
},
|
|
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' },
|
|
);
|
|
}),
|
|
],
|
|
};
|
|
|
|
export default config;
|