mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
478 lines
9.4 KiB
JavaScript
478 lines
9.4 KiB
JavaScript
const gray = {
|
|
100: '#eeeeee',
|
|
200: '#e0e0e0',
|
|
300: '#bbbbbb',
|
|
400: '#666666',
|
|
500: '#444444',
|
|
650: '#333',
|
|
600: '#2a2a2a',
|
|
700: '#1f1f1f',
|
|
800: '#181818',
|
|
900: '#0f0f0f',
|
|
}
|
|
const brand = {
|
|
100: '#c5f1dd',
|
|
200: '#c5f1dd',
|
|
300: '#9fe7c7',
|
|
400: '#65d9a5',
|
|
500: '#24b47e',
|
|
600: '#38bc81',
|
|
700: '#1c8656',
|
|
800: '#10633e',
|
|
900: '#10633e',
|
|
}
|
|
|
|
const blueGray = {
|
|
50: '#F8FAFC',
|
|
100: '#F1F5F9',
|
|
200: '#E2E8F0',
|
|
300: '#CBD5E1',
|
|
400: '#94A3B8',
|
|
500: '#64748B',
|
|
600: '#475569',
|
|
700: '#334155',
|
|
800: '#1E293B',
|
|
900: '#0F172A',
|
|
}
|
|
|
|
const coolGray = {
|
|
50: '#F9FAFB',
|
|
100: '#F3F4F6',
|
|
200: '#E5E7EB',
|
|
300: '#D1D5DB',
|
|
400: '#9CA3AF',
|
|
500: '#6B7280',
|
|
600: '#4B5563',
|
|
700: '#374151',
|
|
800: '#1F2937',
|
|
900: '#111827',
|
|
}
|
|
|
|
const colors = {
|
|
// transparent: 'transparent',
|
|
// white: '#ffffff',
|
|
// black: '#000000',
|
|
// gray: {
|
|
// '50': '#f9fafb',
|
|
// '100': '#f4f5f7',
|
|
// '200': '#e5e7eb',
|
|
// '300': '#d5d6d7',
|
|
// '400': '#9e9e9e',
|
|
// '500': '#707275',
|
|
// '600': '#4c4f52',
|
|
// '700': '#24262d',
|
|
// '800': '#1a1c23',
|
|
// '900': '#121317',
|
|
// // default values from Tailwind UI palette
|
|
// // '300': '#d2d6dc',
|
|
// // '400': '#9fa6b2',
|
|
// // '500': '#6b7280',
|
|
// // '600': '#4b5563',
|
|
// // '700': '#374151',
|
|
// // '800': '#252f3f',
|
|
// // '900': '#161e2e',
|
|
// },
|
|
red: {
|
|
50: '#fdf2f2',
|
|
100: '#fde8e8',
|
|
200: '#fbd5d5',
|
|
300: '#f8b4b4',
|
|
400: '#f98080',
|
|
500: '#f05252',
|
|
600: '#e02424',
|
|
700: '#c81e1e',
|
|
800: '#9b1c1c',
|
|
900: '#771d1d',
|
|
},
|
|
orange: {
|
|
50: '#fff8f1',
|
|
100: '#feecdc',
|
|
200: '#fcd9bd',
|
|
300: '#fdba8c',
|
|
400: '#ff8a4c',
|
|
500: '#ff5a1f',
|
|
600: '#d03801',
|
|
700: '#b43403',
|
|
800: '#8a2c0d',
|
|
900: '#771d1d',
|
|
},
|
|
yellow: {
|
|
50: '#fdfdea',
|
|
100: '#fdf6b2',
|
|
200: '#fce96a',
|
|
300: '#faca15',
|
|
400: '#e3a008',
|
|
500: '#c27803',
|
|
600: '#9f580a',
|
|
700: '#8e4b10',
|
|
800: '#723b13',
|
|
900: '#633112',
|
|
},
|
|
green: {
|
|
50: '#f3faf7',
|
|
100: '#def7ec',
|
|
200: '#bcf0da',
|
|
300: '#84e1bc',
|
|
400: '#31c48d',
|
|
500: '#0e9f6e',
|
|
600: '#057a55',
|
|
700: '#046c4e',
|
|
800: '#03543f',
|
|
900: '#014737',
|
|
},
|
|
teal: {
|
|
50: '#edfafa',
|
|
100: '#d5f5f6',
|
|
200: '#afecef',
|
|
300: '#7edce2',
|
|
400: '#16bdca',
|
|
500: '#0694a2',
|
|
600: '#047481',
|
|
700: '#036672',
|
|
800: '#05505c',
|
|
900: '#014451',
|
|
},
|
|
blue: {
|
|
50: '#ebf5ff',
|
|
100: '#e1effe',
|
|
200: '#c3ddfd',
|
|
300: '#a4cafe',
|
|
400: '#76a9fa',
|
|
500: '#3f83f8',
|
|
600: '#1c64f2',
|
|
700: '#1a56db',
|
|
800: '#1e429f',
|
|
900: '#233876',
|
|
},
|
|
indigo: {
|
|
50: '#f0f5ff',
|
|
100: '#e5edff',
|
|
200: '#cddbfe',
|
|
300: '#b4c6fc',
|
|
400: '#8da2fb',
|
|
500: '#6875f5',
|
|
600: '#5850ec',
|
|
700: '#5145cd',
|
|
800: '#42389d',
|
|
900: '#362f78',
|
|
},
|
|
purple: {
|
|
50: '#f6f5ff',
|
|
100: '#edebfe',
|
|
200: '#dcd7fe',
|
|
300: '#cabffd',
|
|
400: '#ac94fa',
|
|
500: '#9061f9',
|
|
600: '#7e3af2',
|
|
700: '#6c2bd9',
|
|
800: '#5521b5',
|
|
900: '#4a1d96',
|
|
},
|
|
pink: {
|
|
50: '#fdf2f8',
|
|
100: '#fce8f3',
|
|
200: '#fad1e8',
|
|
300: '#f8b4d9',
|
|
400: '#f17eb8',
|
|
500: '#e74694',
|
|
600: '#d61f69',
|
|
700: '#bf125d',
|
|
800: '#99154b',
|
|
900: '#751a3d',
|
|
},
|
|
}
|
|
|
|
const dark = {
|
|
50: '#eeeeee',
|
|
100: '#eeeeee',
|
|
200: '#e0e0e0',
|
|
300: '#bbbbbb',
|
|
400: '#666666',
|
|
500: '#444444',
|
|
600: '#2a2a2a',
|
|
700: '#1f1f1f',
|
|
800: '#181818',
|
|
900: '#0f0f0f',
|
|
}
|
|
|
|
const sbui_border = {
|
|
100: 'var(--border-1)',
|
|
200: 'var(--border-2)',
|
|
300: 'var(--border-3)',
|
|
400: 'var(--border-4)',
|
|
500: 'var(--border-5)',
|
|
600: 'var(--border-6)',
|
|
700: 'var(--border-7)',
|
|
800: 'var(--border-8)',
|
|
900: 'var(--border-9)',
|
|
1000: 'var(--border-10)',
|
|
1100: 'var(--border-11)',
|
|
1200: 'var(--border-12)',
|
|
}
|
|
|
|
const sbui_background = {
|
|
100: 'var(--background-1)',
|
|
200: 'var(--background-2)',
|
|
300: 'var(--background-3)',
|
|
400: 'var(--background-4)',
|
|
500: 'var(--background-5)',
|
|
600: 'var(--background-6)',
|
|
700: 'var(--background-7)',
|
|
800: 'var(--background-8)',
|
|
900: 'var(--background-9)',
|
|
1000: 'var(--background-10)',
|
|
1100: 'var(--background-11)',
|
|
1200: 'var(--background-12)',
|
|
}
|
|
|
|
const sbui_brand = {
|
|
100: 'var(--brand-1)',
|
|
200: 'var(--brand-2)',
|
|
300: 'var(--brand-3)',
|
|
400: 'var(--brand-4)',
|
|
500: 'var(--brand-5)',
|
|
600: 'var(--brand-6)',
|
|
700: 'var(--brand-7)',
|
|
800: 'var(--brand-8)',
|
|
900: 'var(--brand-9)',
|
|
1000: 'var(--brand-10)',
|
|
1100: 'var(--brand-11)',
|
|
1200: 'var(--brand-12)',
|
|
}
|
|
|
|
const sbui_brand_fixed = {
|
|
100: 'var(--brand-fixed-1)',
|
|
200: 'var(--brand-fixed-2)',
|
|
300: 'var(--brand-fixed-3)',
|
|
400: 'var(--brand-fixed-4)',
|
|
500: 'var(--brand-fixed-5)',
|
|
600: 'var(--brand-fixed-6)',
|
|
700: 'var(--brand-fixed-7)',
|
|
800: 'var(--brand-fixed-8)',
|
|
900: 'var(--brand-fixed-9)',
|
|
1000: 'var(--brand-fixed-10)',
|
|
1100: 'var(--brand-fixed-11)',
|
|
1200: 'var(--brand-fixed-12)',
|
|
}
|
|
|
|
function generateRadixVariables() {
|
|
const colors = [
|
|
'brand',
|
|
'brand-fixed',
|
|
'scale',
|
|
'tomato',
|
|
'red',
|
|
'crimson',
|
|
'pink',
|
|
'plum',
|
|
'purple',
|
|
'violet',
|
|
'indigo',
|
|
'blue',
|
|
'cyan',
|
|
'teal',
|
|
'green',
|
|
'grass',
|
|
'brown',
|
|
'orange',
|
|
'sky',
|
|
'mint',
|
|
'lime',
|
|
'yellow',
|
|
'amber',
|
|
'gold',
|
|
'bronze',
|
|
'gray',
|
|
'mauve',
|
|
'slate',
|
|
'sage',
|
|
'olive',
|
|
'sand',
|
|
]
|
|
|
|
let mappedColors = {}
|
|
|
|
colors.map((x) => {
|
|
mappedColors[x] = {}
|
|
})
|
|
|
|
colors.map((x) => {
|
|
for (let index = 0; index < 12; index++) {
|
|
const step = index + 1
|
|
mappedColors[x][step * 100] = `var(--colors-${x}${step})`
|
|
}
|
|
})
|
|
|
|
return mappedColors
|
|
}
|
|
|
|
const custom_colors = generateRadixVariables()
|
|
|
|
// console.log('radix colors', custom_colors)
|
|
|
|
const ui = require('./ui.config.js')
|
|
|
|
module.exports = ui({
|
|
content: {
|
|
// enabled: true,
|
|
content: [
|
|
'./src/**/**/*.{js,ts,jsx,tsx,html,mdx}',
|
|
'./src/**/*.{js,ts,jsx,tsx,html,mdx}',
|
|
'./src/**/*.{js,ts,jsx,tsx,html,mdx}',
|
|
'./src/lib/theme/defaultTheme.ts',
|
|
],
|
|
// safelist: ['space-x-1'],
|
|
},
|
|
darkMode: 'class',
|
|
theme: {
|
|
// colors: {
|
|
// gray: { ...custom_colors.gray },
|
|
// slate: { ...custom_colors.slate },
|
|
// },
|
|
extend: {
|
|
typography: {
|
|
DEFAULT: {
|
|
css: {
|
|
'code::before': {
|
|
content: '""',
|
|
},
|
|
'code::after': {
|
|
content: '""',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
colors: {
|
|
/*
|
|
main
|
|
*/
|
|
['brandColor']: '#EC6F0D',
|
|
|
|
['brandScale']: { ...sbui_brand },
|
|
['brandScaleFixed']: { ...sbui_brand_fixed },
|
|
|
|
// used for backgrounds
|
|
['bgScale']: { ...sbui_background },
|
|
['bgScaleDark']: { ...dark },
|
|
|
|
// used for borders, inputs and text
|
|
['grayScale']: { ...sbui_border },
|
|
['grayScaleDark']: { ...gray },
|
|
|
|
/*
|
|
typography
|
|
*/
|
|
'typography-body': {
|
|
light: coolGray[600],
|
|
dark: gray[100],
|
|
},
|
|
'typography-body-secondary': {
|
|
light: coolGray[500],
|
|
dark: gray[300],
|
|
},
|
|
'typography-body-strong': {
|
|
light: coolGray[100],
|
|
dark: 'white',
|
|
},
|
|
'typography-body-faded': {
|
|
light: coolGray[400],
|
|
dark: gray[400],
|
|
},
|
|
|
|
/*
|
|
app backgrounds
|
|
*/
|
|
'bg-primary': {
|
|
light: 'white',
|
|
dark: gray[800],
|
|
},
|
|
'bg-secondary': {
|
|
light: blueGray[100],
|
|
dark: gray[700],
|
|
},
|
|
'bg-alt': {
|
|
light: blueGray[50], // gray[100],
|
|
dark: gray[600],
|
|
},
|
|
|
|
/*
|
|
Forms
|
|
*/
|
|
'input-value': {
|
|
light: coolGray[600],
|
|
dark: gray[200],
|
|
},
|
|
'input-placeholder': {
|
|
light: coolGray[300],
|
|
dark: gray[400],
|
|
},
|
|
'input-border': {
|
|
light: coolGray[300],
|
|
dark: gray[500],
|
|
},
|
|
'input-label': {
|
|
light: coolGray[600],
|
|
dark: gray[200],
|
|
},
|
|
'input-border-hover': {
|
|
light: coolGray[400],
|
|
dark: gray[400],
|
|
},
|
|
'input-border-focus': {
|
|
light: brand[300],
|
|
dark: brand[300],
|
|
},
|
|
|
|
// ['brandColor']: '#7c3aed',
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
|
|
black: '#000',
|
|
white: '#fff',
|
|
|
|
// gray: { ...gray },
|
|
// brand: { ...brand },
|
|
// blueGray: { ...blueGray },
|
|
// coolGray: { ...coolGray },
|
|
|
|
dark: {
|
|
100: '#eeeeee',
|
|
200: '#e0e0e0',
|
|
300: '#bbbbbb',
|
|
400: '#666666',
|
|
500: '#444444',
|
|
600: '#2a2a2a',
|
|
700: '#1f1f1f',
|
|
800: '#181818',
|
|
900: '#0f0f0f',
|
|
},
|
|
|
|
'secondary-text': {
|
|
light: '#71767F',
|
|
dark: '#878787',
|
|
},
|
|
|
|
// brand: {
|
|
// 50: '#82dab0',
|
|
// 100: '#82dab0',
|
|
// 200: '#69d3a0',
|
|
// 300: '#50cb90',
|
|
// 400: '#C5F1DD',
|
|
// 500: '#9FE7C7',
|
|
// 600: '#65D9A5',
|
|
// 700: '#3ECF8E',
|
|
// 800: '#24b47e', // green-500 in dashboard
|
|
// 900: '#2c9c6a',
|
|
// },
|
|
|
|
// ...custom_colors,
|
|
},
|
|
|
|
// transitionProperty: {
|
|
// 'max-height': 'max-height',
|
|
// },
|
|
},
|
|
},
|
|
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
|
|
})
|