mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
update studio to use config
This commit is contained in:
Jonathan Summers-Muir committed
1 parent
a4d37836a5
commit
1acebbc74e
8 files changed
+2550
-5
No files matched your search
Generated
+6
@@ -45507,6 +45507,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.0.0",
|
||||
"@mertasan/tailwindcss-variables": "^2.0.1",
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@radix-ui/react-accordion": "^0.1.5",
|
||||
"@radix-ui/react-collapsible": "^0.1.5",
|
||||
@@ -45522,7 +45523,9 @@
|
||||
"deepmerge": "^4.2.2",
|
||||
"formik": "^2.2.9",
|
||||
"lodash": "^4.17.20",
|
||||
"postcss": "^8.4.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"tailwindcss": "^3.0.15",
|
||||
"tailwindcss-radix": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -58262,6 +58265,7 @@
|
||||
"version": "file:packages/common2",
|
||||
"requires": {
|
||||
"@headlessui/react": "^1.0.0",
|
||||
"@mertasan/tailwindcss-variables": "^2.0.1",
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@radix-ui/react-accordion": "^0.1.5",
|
||||
"@radix-ui/react-collapsible": "^0.1.5",
|
||||
@@ -58280,7 +58284,9 @@
|
||||
"deepmerge": "^4.2.2",
|
||||
"formik": "^2.2.9",
|
||||
"lodash": "^4.17.20",
|
||||
"postcss": "^8.4.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"tailwindcss": "^3.0.15",
|
||||
"tailwindcss-radix": "^1.6.0",
|
||||
"tsconfig": "*",
|
||||
"typescript": "^4.5.3"
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
const deepMerge = require('deepmerge')
|
||||
const customFormsPlugin = require('@tailwindcss/forms')
|
||||
|
||||
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',
|
||||
},
|
||||
'cool-gray': {
|
||||
'50': '#fbfdfe',
|
||||
'100': '#f1f5f9',
|
||||
'200': '#e2e8f0',
|
||||
'300': '#cfd8e3',
|
||||
'400': '#97a6ba',
|
||||
'500': '#64748b',
|
||||
'600': '#475569',
|
||||
'700': '#364152',
|
||||
'800': '#27303f',
|
||||
'900': '#1a202e',
|
||||
},
|
||||
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 backgroundOpacity = (theme) => ({
|
||||
'10': '0.1',
|
||||
...theme('opacity'),
|
||||
})
|
||||
|
||||
const maxHeight = (theme) => ({
|
||||
'0': '0',
|
||||
xl: '36rem',
|
||||
...theme('spacing'),
|
||||
})
|
||||
|
||||
const windmillConfig = {
|
||||
darkMode: 'class',
|
||||
purge: {
|
||||
content: [
|
||||
'node_modules/@supabase/ui/theme/defaultTheme.js',
|
||||
// 'node_modules/@supabase/ui/dist/index.js',
|
||||
],
|
||||
},
|
||||
theme: {
|
||||
colors,
|
||||
backgroundOpacity,
|
||||
maxHeight,
|
||||
},
|
||||
variants: {
|
||||
backgroundOpacity: ['responsive', 'hover', 'focus', 'dark'],
|
||||
backgroundColor: ['responsive', 'hover', 'focus', 'active', 'odd', 'dark'],
|
||||
display: ['responsive', 'dark'],
|
||||
textColor: [
|
||||
'responsive',
|
||||
'focus',
|
||||
'focus-within',
|
||||
'hover',
|
||||
'active',
|
||||
'dark',
|
||||
],
|
||||
placeholderColor: ['responsive', 'focus', 'dark'],
|
||||
borderColor: ['responsive', 'hover', 'focus', 'dark'],
|
||||
divideColor: ['responsive', 'dark'],
|
||||
boxShadow: ['responsive', 'hover', 'focus', 'dark'],
|
||||
margin: ['responsive', 'last'],
|
||||
},
|
||||
plugins: [customFormsPlugin],
|
||||
}
|
||||
|
||||
function arrayMergeFn(destinationArray, sourceArray) {
|
||||
return destinationArray.concat(sourceArray).reduce((acc, cur) => {
|
||||
if (acc.includes(cur)) return acc
|
||||
return [...acc, cur]
|
||||
}, [])
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge Windmill and Tailwind CSS configurations
|
||||
* @param {object} tailwindConfig - Tailwind config object
|
||||
* @return {object} new config object
|
||||
*/
|
||||
export function wrapper(tailwindConfig) {
|
||||
let purge
|
||||
if (Array.isArray(tailwindConfig.purge)) {
|
||||
purge = {
|
||||
content: tailwindConfig.purge,
|
||||
}
|
||||
} else {
|
||||
purge = tailwindConfig.purge
|
||||
}
|
||||
return deepMerge({ ...tailwindConfig, purge }, windmillConfig, {
|
||||
arrayMerge: arrayMergeFn,
|
||||
})
|
||||
}
|
||||
|
||||
// module.exports = wrapper
|
||||
@@ -0,0 +1,90 @@
|
||||
module.exports = {
|
||||
brand: {
|
||||
brand1: 'hsla(153, 80%, 99%, 1)',
|
||||
brand2: 'hsla(148, 88%, 97%, 1)',
|
||||
brand3: 'hsla(148, 76%, 95%, 1)',
|
||||
brand4: 'hsla(148, 68%, 92%, 1)',
|
||||
brand5: 'hsla(148, 59%, 88%, 1)',
|
||||
brand6: 'hsla(149, 43%, 82%, 1)',
|
||||
brand7: 'hsla(149, 43%, 69%, 1)',
|
||||
brand8: 'hsla(154, 55%, 45%, 1)',
|
||||
brand9: 'hsla(153, 60%, 53%, 1)',
|
||||
brand10: 'hsla(153, 50%, 50%, 1)',
|
||||
brand11: 'hsla(153, 50%, 34%, 1)',
|
||||
brand12: 'hsla(153, 40%, 12%, 1)',
|
||||
},
|
||||
brandDark: {
|
||||
brand1: 'hsla(153, 75%, 6%, 1)',
|
||||
brand2: 'hsla(153, 73%, 7%, 1)',
|
||||
brand3: 'hsla(154, 69%, 9%, 1)',
|
||||
brand4: 'hsla(154, 67%, 11%, 1)',
|
||||
brand5: 'hsla(154, 66%, 13%, 1)',
|
||||
brand6: 'hsla(154, 64%, 17%, 1)',
|
||||
brand7: 'hsla(154, 62%, 22%, 1)',
|
||||
brand8: 'hsla(153, 60%, 28%, 1)',
|
||||
brand9: 'hsla(153, 60%, 53%, 1)',
|
||||
brand10: 'hsla(153, 60%, 70%, 1)',
|
||||
brand11: 'hsla(153, 60%, 50%, 1)',
|
||||
brand12: 'hsla(153, 60%, 95%, 1)',
|
||||
},
|
||||
contrast: {
|
||||
'brand-hiContrast': 'var(--colors-brand-9)',
|
||||
'brand-loContrast': 'var(--colors-brand-4)',
|
||||
},
|
||||
scale: {
|
||||
scale1: 'var(--colors-slate1)',
|
||||
scale2: 'var(--colors-slate2)',
|
||||
scale3: 'var(--colors-slate3)',
|
||||
scale4: 'var(--colors-slate4)',
|
||||
scale5: 'var(--colors-slate5)',
|
||||
scale6: 'var(--colors-slate6)',
|
||||
scale7: 'var(--colors-slate7)',
|
||||
scale8: 'var(--colors-slate8)',
|
||||
scale9: 'var(--colors-slate9)',
|
||||
scale10: 'var(--colors-slate10)',
|
||||
scale11: 'var(--colors-slate11)',
|
||||
scale12: 'var(--colors-slate12)',
|
||||
},
|
||||
scaleA: {
|
||||
scaleA1: 'var(--colors-slatea1)',
|
||||
scaleA2: 'var(--colors-slatea2)',
|
||||
scaleA3: 'var(--colors-slatea3)',
|
||||
scaleA4: 'var(--colors-slatea4)',
|
||||
scaleA5: 'var(--colors-slatea5)',
|
||||
scaleA6: 'var(--colors-slatea6)',
|
||||
scaleA7: 'var(--colors-slatea7)',
|
||||
scaleA8: 'var(--colors-slatea8)',
|
||||
scaleA9: 'var(--colors-slatea9)',
|
||||
scaleA10: 'var(--colors-slatea10)',
|
||||
scaleA11: 'var(--colors-slatea11)',
|
||||
scaleA12: 'var(--colors-slatea12)',
|
||||
},
|
||||
scaleDark: {
|
||||
scale1: 'var(--colors-gray1)',
|
||||
scale2: 'var(--colors-gray2)',
|
||||
scale3: 'var(--colors-gray3)',
|
||||
scale4: 'var(--colors-gray4)',
|
||||
scale5: 'var(--colors-gray5)',
|
||||
scale6: 'var(--colors-gray6)',
|
||||
scale7: 'var(--colors-gray7)',
|
||||
scale8: 'var(--colors-gray8)',
|
||||
scale9: 'var(--colors-gray9)',
|
||||
scale10: 'var(--colors-gray10)',
|
||||
scale11: 'var(--colors-gray11)',
|
||||
scale12: 'var(--colors-gray12)',
|
||||
},
|
||||
scaleADark: {
|
||||
scaleA1: 'var(--colors-graya1)',
|
||||
scaleA2: 'var(--colors-graya2)',
|
||||
scaleA3: 'var(--colors-graya3)',
|
||||
scaleA4: 'var(--colors-graya4)',
|
||||
scaleA5: 'var(--colors-graya5)',
|
||||
scaleA6: 'var(--colors-graya6)',
|
||||
scaleA7: 'var(--colors-graya7)',
|
||||
scaleA8: 'var(--colors-graya8)',
|
||||
scaleA9: 'var(--colors-graya9)',
|
||||
scaleA10: 'var(--colors-graya10)',
|
||||
scaleA11: 'var(--colors-graya11)',
|
||||
scaleA12: 'var(--colors-graya12)',
|
||||
},
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.0.0",
|
||||
"@mertasan/tailwindcss-variables": "^2.0.1",
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@radix-ui/react-accordion": "^0.1.5",
|
||||
"@radix-ui/react-collapsible": "^0.1.5",
|
||||
@@ -24,7 +25,9 @@
|
||||
"deepmerge": "^4.2.2",
|
||||
"formik": "^2.2.9",
|
||||
"lodash": "^4.17.20",
|
||||
"postcss": "^8.4.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"tailwindcss": "^3.0.15",
|
||||
"tailwindcss-radix": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1 +1,477 @@
|
||||
module.exports = require('config/tailwind.config')
|
||||
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')],
|
||||
})
|
||||
@@ -0,0 +1,399 @@
|
||||
const deepMerge = require('deepmerge')
|
||||
const forms = require('@tailwindcss/forms')
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
const radixUiColors = require('@radix-ui/colors')
|
||||
const brandColors = require('./default-colors')
|
||||
|
||||
const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette')
|
||||
|
||||
// console.log(Object.keys(radixUiColors))
|
||||
|
||||
// generates fixed scales
|
||||
// based on the root/light mode version
|
||||
const fixedOptions = ['scale', 'scaleA', 'brand']
|
||||
|
||||
function radixColorKeys() {
|
||||
let keys = Object.keys(radixUiColors)
|
||||
|
||||
/**
|
||||
* Filter array items based on search criteria (query)
|
||||
*/
|
||||
function filterItems(arr, query) {
|
||||
return arr.filter(function (el) {
|
||||
return el.toLowerCase().indexOf(query.toLowerCase()) == -1
|
||||
})
|
||||
}
|
||||
|
||||
keys = filterItems(keys, 'Dark')
|
||||
|
||||
// console.log('radixColorKeys', keys)
|
||||
return keys
|
||||
}
|
||||
|
||||
function generateColorClasses() {
|
||||
const brandColors = ['brand', 'scale', 'scaleA']
|
||||
const colors = [...radixColorKeys(), ...brandColors]
|
||||
|
||||
let mappedColors = {}
|
||||
|
||||
// generate the shape of the colors object
|
||||
colors.map((x) => {
|
||||
// create empty obj for each color
|
||||
mappedColors[x] = {}
|
||||
// create empty obj for each fixed color
|
||||
if (
|
||||
fixedOptions.some(function (v) {
|
||||
return x.indexOf(v) >= 0
|
||||
})
|
||||
) {
|
||||
mappedColors[`${x}-fixed`] = {}
|
||||
}
|
||||
})
|
||||
|
||||
colors.map((x) => {
|
||||
for (let index = 0; index < 12; index++) {
|
||||
const step = index + 1
|
||||
mappedColors[x][step * 100] = `var(--colors-${x.toLowerCase()}${step})`
|
||||
|
||||
if (
|
||||
fixedOptions.some(function (v) {
|
||||
return x.indexOf(v) >= 0
|
||||
})
|
||||
) {
|
||||
// console.log(x)
|
||||
mappedColors[`${x}-fixed`][step * 100] = `var(--colors-fixed-${x}${step})`
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return mappedColors
|
||||
}
|
||||
|
||||
const colorClasses = generateColorClasses()
|
||||
|
||||
/*
|
||||
* generateCssVariables()
|
||||
*
|
||||
* generate the CSS variables for tailwind to use
|
||||
*
|
||||
*/
|
||||
|
||||
function generateCssVariables() {
|
||||
// potential options
|
||||
// { fixedOptions, brandColors }
|
||||
|
||||
let rootColors = {}
|
||||
let darkColors = {}
|
||||
|
||||
const radixArray = Object.values(radixUiColors)
|
||||
const brandArray = Object.values(brandColors)
|
||||
|
||||
function generateColors(colors, index, colorSet) {
|
||||
const key = Object.keys(colorSet)[index]
|
||||
|
||||
if (key.includes('Dark')) {
|
||||
darkColors = { ...darkColors, ...colors }
|
||||
} else {
|
||||
rootColors = { ...rootColors, ...colors }
|
||||
|
||||
// generate an optional 'fixed' scale of colors
|
||||
if (
|
||||
fixedOptions.some(function (v) {
|
||||
return key.indexOf(v) >= 0
|
||||
})
|
||||
) {
|
||||
rootColors.fixed = { ...rootColors?.fixed, ...colors }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
radixArray.map((x, i) => {
|
||||
generateColors(x, i, radixUiColors)
|
||||
})
|
||||
|
||||
brandArray.map((x, i) => {
|
||||
generateColors(x, i, brandColors)
|
||||
})
|
||||
|
||||
return {
|
||||
root: { ...rootColors },
|
||||
dark: { ...darkColors },
|
||||
}
|
||||
}
|
||||
|
||||
const variables = generateCssVariables()
|
||||
|
||||
const uiConfig = {
|
||||
theme: {
|
||||
variables: {
|
||||
DEFAULT: {
|
||||
width: {
|
||||
listbox: '320px',
|
||||
},
|
||||
colors: { ...variables.root },
|
||||
},
|
||||
'.dark': {
|
||||
colors: { ...variables.dark },
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
// dropdown extensions
|
||||
transformOrigin: {
|
||||
// tailwind class for this is `origin-dropdown`
|
||||
dropdown: 'var(--radix-dropdown-menu-content-transform-origin)',
|
||||
popover: 'var(--radix-popover-menu-content-transform-origin);',
|
||||
},
|
||||
width: {
|
||||
listbox: 'var(--width-listbox);',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
'100%': { transform: 'scale(1)', opacity: 1 },
|
||||
},
|
||||
fadeOut: {
|
||||
'0%': { transform: 'scale(1)', opacity: 1 },
|
||||
'100%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
},
|
||||
overlayContentShow: {
|
||||
'0%': { opacity: 0, transform: 'translate(0%, -2%) scale(.96)' },
|
||||
'100%': { opacity: 1, transform: 'translate(0%, 0%) scale(1)' },
|
||||
},
|
||||
overlayContentHide: {
|
||||
'0%': { opacity: 1, transform: 'translate(0%, 0%) scale(1)' },
|
||||
'100%': { opacity: 0, transform: 'translate(0%, -2%) scale(.96)' },
|
||||
},
|
||||
dropdownFadeIn: {
|
||||
'0%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
'100%': { transform: 'scale(1)', opacity: 1 },
|
||||
},
|
||||
dropdownFadeOut: {
|
||||
'0%': { transform: 'scale(1)', opacity: 1 },
|
||||
'100%': { transform: 'scale(0.95)', opacity: 0 },
|
||||
},
|
||||
fadeInOverlayBg: {
|
||||
'0%': { opacity: 0 },
|
||||
'100%': { opacity: 0.75 },
|
||||
},
|
||||
fadeOutOverlayBg: {
|
||||
'0%': { opacity: 0.75 },
|
||||
'100%': { opacity: 0 },
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { height: 0, opacity: 0 },
|
||||
'100%': {
|
||||
height: 'var(--radix-accordion-content-height)',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { height: 'var(--radix-accordion-content-height)', opacity: 1 },
|
||||
'100%': { height: 0, opacity: 0 },
|
||||
},
|
||||
|
||||
slideDownNormal: {
|
||||
'0%': { height: 0, opacity: 0 },
|
||||
'100%': {
|
||||
height: 'inherit',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
slideUpNormal: {
|
||||
'0%': { height: 'inherit', opacity: 1 },
|
||||
'100%': { height: 0, opacity: 0 },
|
||||
},
|
||||
|
||||
panelSlideLeftOut: {
|
||||
'0%': { transform: 'translateX(-100%)', opacity: 0 },
|
||||
'100%': {
|
||||
transform: 'translate-x-0',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
panelSlideLeftIn: {
|
||||
'0%': { transform: 'translate-x-0', opacity: 1 },
|
||||
'100%': { transform: 'translateX(-100%)', opacity: 0 },
|
||||
},
|
||||
panelSlideRightOut: {
|
||||
'0%': { transform: 'translateX(100%)', opacity: 0 },
|
||||
'100%': {
|
||||
transform: 'translate-x-0',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
panelSlideRightIn: {
|
||||
'0%': { transform: 'translate-x-0', opacity: 1 },
|
||||
'100%': { transform: 'translateX(100%)', opacity: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 300ms',
|
||||
'fade-out': 'fadeOut 300ms',
|
||||
|
||||
'dropdown-content-show': 'overlayContentShow 100ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'dropdown-content-hide': 'overlayContentHide 100ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
|
||||
'overlay-show': 'overlayContentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'overlay-hide': 'overlayContentHide 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
|
||||
'fade-in-overlay-bg': 'fadeInOverlayBg 300ms',
|
||||
'fade-out-overlay-bg': 'fadeOutOverlayBg 300ms',
|
||||
|
||||
'slide-down': 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'slide-up': 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
|
||||
'slide-down-normal': 'slideDownNormal 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'slide-up-normal': 'slideUpNormal 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
|
||||
'panel-slide-left-out': 'panelSlideLeftOut 200ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'panel-slide-left-in': 'panelSlideLeftIn 250ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'panel-slide-right-out': 'panelSlideRightOut 200ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
'panel-slide-right-in': 'panelSlideRightIn 250ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
|
||||
// tailwind class for this is `animate-dropdownFadeIn`
|
||||
dropdownFadeIn: 'dropdownFadeIn 0.1s ease-out',
|
||||
// tailwind class for this is `animate-dropdownFadeOut`
|
||||
dropdownFadeOut: 'dropdownFadeOut 0.1s ease-out',
|
||||
},
|
||||
colors: {
|
||||
...colorClasses,
|
||||
'hi-contrast': `var(--colors-fixed-scale12)`,
|
||||
'lo-contrast': `var(--colors-fixed-scale1)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@mertasan/tailwindcss-variables'),
|
||||
function ({ addUtilities, addVariant }) {
|
||||
// addVariant('data-open', '&:[data-state=open]')
|
||||
addUtilities({
|
||||
".dropdown-content[data-state='open']": {
|
||||
animation: 'fadeIn 50ms ease-out',
|
||||
},
|
||||
".dropdown-content[data-state='closed']": {
|
||||
animation: 'fadeOut 50ms ease-in',
|
||||
},
|
||||
|
||||
"[data-state='open'] .accordion-content-animation": {
|
||||
animation: 'slideDown 200ms ease-out',
|
||||
},
|
||||
"[data-state='closed'] .accordion-content-animation": {
|
||||
animation: 'slideUp 200ms ease-in',
|
||||
},
|
||||
'.text-code': {
|
||||
margin: '0 0.2em',
|
||||
padding: '0.2em 0.4em 0.1em',
|
||||
background: 'hsla(0, 0%, 58.8%, 0.1)',
|
||||
border: '1px solid hsla(0, 0%, 39.2%, 0.2)',
|
||||
borderRadius: '3px',
|
||||
},
|
||||
'.no-scrollbar': {
|
||||
/* Hide scrollbar for IE, Edge*/
|
||||
'-ms-overflow-style': 'none',
|
||||
|
||||
/* Firefox */
|
||||
'scrollbar-width': 'none' /* Firefox */,
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
/* Add fadeout effect */
|
||||
'.mask-fadeout-right': {
|
||||
'-webkit-mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
|
||||
'mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
|
||||
},
|
||||
'.mask-fadeout-left': {
|
||||
'-webkit-mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
|
||||
'mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
|
||||
},
|
||||
'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button':
|
||||
{
|
||||
'-webkit-appearance': 'none',
|
||||
margin: '0',
|
||||
},
|
||||
})
|
||||
addVariant('data-open-parent', '[data-state="open"] &')
|
||||
addVariant('data-closed-parent', '[data-state="closed"] &')
|
||||
addVariant('data-open', '&[data-state="open"]')
|
||||
addVariant('data-closed', '&[data-state="closed"]')
|
||||
addVariant('data-show', '&[data-state="show"]')
|
||||
addVariant('data-hide', '&[data-state="hide"]')
|
||||
addVariant('data-checked', '&[data-state="checked"]')
|
||||
addVariant('data-unchecked', '&[data-state="unchecked"]')
|
||||
addVariant('aria-expanded', '&[aria-expanded="true"]')
|
||||
// addVariant('parent-data-open', '[data-state="open"]&')
|
||||
},
|
||||
function ({ matchUtilities, theme }) {
|
||||
matchUtilities(
|
||||
{
|
||||
highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` }),
|
||||
},
|
||||
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
|
||||
),
|
||||
matchUtilities(
|
||||
{
|
||||
subhighlight: (value) => ({
|
||||
boxShadow: `inset 0 -1px 0 0 ${value}`,
|
||||
}),
|
||||
},
|
||||
{
|
||||
values: flattenColorPalette(theme('backgroundColor')),
|
||||
type: 'color',
|
||||
}
|
||||
),
|
||||
matchUtilities(
|
||||
{
|
||||
bordershadow: (value) => {
|
||||
return {
|
||||
boxShadow: `
|
||||
var(--colors-blacka1) 0px 0px 0px 0px,
|
||||
var(--colors-blacka1) 0px 0px 0px 0px,
|
||||
var(--colors-blacka8) 0px 1px 1px 0px,
|
||||
${value} 0px 0px 0px 1px,
|
||||
var(--colors-blacka1) 0px 0px 0px 0px,
|
||||
var(--colors-blacka1) 0px 0px 0px 0px,
|
||||
rgb(64 68 82 / 8%) 0px 2px 5px 0px;
|
||||
`,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
values: flattenColorPalette(theme('backgroundColor')),
|
||||
type: 'color',
|
||||
}
|
||||
)
|
||||
},
|
||||
require('tailwindcss-radix')(),
|
||||
forms,
|
||||
],
|
||||
}
|
||||
|
||||
function arrayMergeFn(destinationArray, sourceArray) {
|
||||
return destinationArray.concat(sourceArray).reduce((acc, cur) => {
|
||||
if (acc.includes(cur)) return acc
|
||||
return [...acc, cur]
|
||||
}, [])
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge Supabase UI and Tailwind CSS configurations
|
||||
* @param {object} tailwindConfig - Tailwind config object
|
||||
* @return {object} new config object
|
||||
*/
|
||||
function wrapper(tailwindConfig) {
|
||||
let purge
|
||||
if (Array.isArray(tailwindConfig.purge)) {
|
||||
purge = {
|
||||
content: tailwindConfig.purge,
|
||||
}
|
||||
} else {
|
||||
purge = tailwindConfig.purge
|
||||
}
|
||||
return deepMerge({ ...tailwindConfig, purge }, uiConfig, {
|
||||
arrayMerge: arrayMergeFn,
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = wrapper
|
||||
@@ -1,4 +1,4 @@
|
||||
const ui = require('@supabase/ui/dist/config/ui.config.js')
|
||||
const ui = require('config/ui.config.js')
|
||||
|
||||
// const gray = {
|
||||
// 100: '#eeeeee',
|
||||
@@ -59,11 +59,12 @@ module.exports = ui({
|
||||
'./internals/**/*.{js,ts,jsx,tsx}',
|
||||
'./lib/**/*.{js,ts,jsx,tsx}',
|
||||
'./lib/**/**/*.{js,ts,jsx,tsx}',
|
||||
'./../packages/ui/src/lib/theme/defaultTheme.ts',
|
||||
// purge styles from supabase ui theme
|
||||
'./node_modules/@supabase/ui/dist/config/default-theme.js',
|
||||
// './node_modules/@supabase/ui/dist/config/default-theme.js',
|
||||
// purge styles from grid library
|
||||
'./node_modules/@supabase/grid/src/components/**/*.{js,ts,jsx,tsx}',
|
||||
'./node_modules/@supabase/grid/src/components/**/**/*.{js,ts,jsx,tsx}',
|
||||
// './node_modules/@supabase/grid/src/components/**/*.{js,ts,jsx,tsx}',
|
||||
// './node_modules/@supabase/grid/src/components/**/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
theme: {
|
||||
// maxHeight: {
|
||||
|
||||
Reference in new issue
Block a user