mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Jordi Enric
48fff22f94
- adds hit area tailwind plugin <img width="990" height="530" alt="CleanShot 2026-03-11 at 12 03 06@2x" src="https://github.com/user-attachments/assets/976e6571-9738-473d-a40f-cef4f8699e68" /> <img width="786" height="514" alt="CleanShot 2026-03-11 at 12 00 53@2x" src="https://github.com/user-attachments/assets/a663b72a-0702-4a79-bc91-e2aed0a16803" />
106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
const config = require('config/tailwind.config')
|
|
|
|
module.exports = config({
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx}',
|
|
'./components/**/*.{js,ts,jsx,tsx}',
|
|
// purge styles from grid library
|
|
'./../../packages/ui/src/**/*.{tsx,ts,js}',
|
|
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
|
|
],
|
|
plugins: [require('@tailwindcss/container-queries'), require('./tailwind-plugins/hit-area')],
|
|
theme: {
|
|
extend: {
|
|
fontSize: {
|
|
grid: '13px',
|
|
},
|
|
colors: {
|
|
/* typography */
|
|
'typography-body': {
|
|
light: 'hsl(var(--foreground-light))',
|
|
dark: 'hsl(var(--foreground-light))',
|
|
},
|
|
'typography-body-secondary': {
|
|
light: 'hsl(var(--foreground-lighter))',
|
|
dark: 'hsl(var(--foreground-lighter))',
|
|
},
|
|
'typography-body-strong': {
|
|
light: 'hsl(var(--foreground-default))',
|
|
dark: 'hsl(var(--foreground-default))',
|
|
},
|
|
'typography-body-faded': {
|
|
light: 'hsl(var(--foreground-muted))',
|
|
dark: 'hsl(var(--foreground-muted))',
|
|
},
|
|
|
|
/* Tables */
|
|
'table-body': {
|
|
light: 'hsl(var(--background-default))',
|
|
dark: 'hsl(var(--background-default))',
|
|
},
|
|
'table-header': {
|
|
light: 'hsl(var(--background-surface-100))',
|
|
dark: 'hsl(var(--background-surface-100))',
|
|
},
|
|
'table-footer': {
|
|
light: 'hsl(var(--background-surface-100))',
|
|
dark: 'hsl(var(--background-surface-100))',
|
|
},
|
|
'table-border': {
|
|
light: 'hsl(var(--border-default))',
|
|
dark: 'hsl(var(--border-default))',
|
|
},
|
|
|
|
/* Panels */
|
|
'panel-body': {
|
|
light: 'hsl(var(--background-surface-100))',
|
|
dark: 'hsl(var(--background-surface-100))',
|
|
},
|
|
'panel-header': {
|
|
light: 'hsl(var(--background-surface-100))',
|
|
dark: 'hsl(var(--background-surface-100))',
|
|
},
|
|
'panel-footer': {
|
|
light: 'hsl(var(--background-surface-100))',
|
|
dark: 'hsl(var(--background-surface-100))',
|
|
},
|
|
'panel-border': {
|
|
light: 'hsl(var(--border-default))',
|
|
dark: 'hsl(var(--border-default))',
|
|
},
|
|
'panel-border-interior': {
|
|
light: 'hsl(var(--border-muted))',
|
|
dark: 'hsl(var(--border-muted))',
|
|
},
|
|
'panel-border-hover': {
|
|
light: 'hsl(var(--border-muted))',
|
|
dark: 'hsl(var(--border-muted))',
|
|
},
|
|
},
|
|
|
|
animation: {
|
|
shimmer: 'shimmer 2s infinite linear',
|
|
sway: 'sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
shimmer: {
|
|
'0%': {
|
|
'background-position': '-1000px 0',
|
|
},
|
|
'100%': {
|
|
'background-position': '1000px 0',
|
|
},
|
|
},
|
|
sway: {
|
|
'0%, 100%': {
|
|
transform: 'rotate(-10deg) scale(1.5) translateY(4rem)',
|
|
},
|
|
'50%': {
|
|
transform: 'rotate(10deg) scale(1.5) translateY(2rem)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|