dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-18 15:49:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

moved UI config into root as it wasn't reloading properly

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2022-03-05 22:41:44 +00:00
1 parent bf8488eaae
commit f03fabc7d0
5 files changed
+496 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/components/Nav/index.tsx
+6 -4
View File
@@ -157,7 +157,8 @@ const Nav = () => {
px-1 border-b-2 border-transparent
text-sm
font-medium
text-scale-1100 hover:text-scale-1200
transition-colors
text-scale-1200 hover:text-brand-900
cursor-pointer
` + props.active
}
@@ -181,7 +182,8 @@ const Nav = () => {
<>
<Announcement />
<div className="sticky top-0 z-50">
<nav className="bg-scale-200 border-b dark:border-dark">
<div className="absolute w-full h-full bg-scale-100 top-0 opacity-80"></div>
<nav className="backdrop-blur-sm border-b">
{/* <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0"> */}
<div className="lg:container mx-auto relative flex justify-between h-16 lg:px-16 xl:px-20">
<HamburgerButton toggleFlyOut={() => setOpen(true)} />
@@ -217,7 +219,7 @@ const Nav = () => {
href="/pricing"
className={`
inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium
text-scale-1100 hover:text-scale-1200 hover:border-scale-1200 p-5
text-scale-1200 hover:text-brand-900 hover:border-brand-900 p-5
dark:text-dark-100 dark:hover:border-dark-100
`}
>
@@ -227,7 +229,7 @@ const Nav = () => {
href="/blog"
className={`
inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium
text-scale-1100 hover:text-scale-1200 hover:border-scale-1200 p-5
text-scale-1200 hover:text-brand-900 hover:border-brand-900 p-5
dark:text-dark-100 dark:hover:border-dark-100
`}
>
www/default-colors.js
+90
View File
@@ -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-mauve1)',
scale2: 'var(--colors-mauve2)',
scale3: 'var(--colors-mauve3)',
scale4: 'var(--colors-mauve4)',
scale5: 'var(--colors-mauve5)',
scale6: 'var(--colors-mauve6)',
scale7: 'var(--colors-mauve7)',
scale8: 'var(--colors-mauve8)',
scale9: 'var(--colors-mauve9)',
scale10: 'var(--colors-mauve10)',
scale11: 'var(--colors-mauve11)',
scale12: 'var(--colors-mauve12)',
},
scaleADark: {
scaleA1: 'var(--colors-mauvea1)',
scaleA2: 'var(--colors-mauvea2)',
scaleA3: 'var(--colors-mauvea3)',
scaleA4: 'var(--colors-mauvea4)',
scaleA5: 'var(--colors-mauvea5)',
scaleA6: 'var(--colors-mauvea6)',
scaleA7: 'var(--colors-mauvea7)',
scaleA8: 'var(--colors-mauvea8)',
scaleA9: 'var(--colors-mauvea9)',
scaleA10: 'var(--colors-mauvea10)',
scaleA11: 'var(--colors-mauvea11)',
scaleA12: 'var(--colors-mauvea12)',
},
}
www/styles/index.css
+1 -1
View File
@@ -23,7 +23,7 @@ html {
}
body {
@apply bg-scale-200;
@apply bg-scale-100;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
www/tailwind.config.js
+11 -6
View File
@@ -1,4 +1,5 @@
const ui = require('@supabase/ui/dist/config/ui.config.js')
const ui = require('./ui.config.js')
const svgToDataUri = require('mini-svg-data-uri')
module.exports = ui({
mode: 'JIT',
@@ -14,8 +15,8 @@ module.exports = ui({
theme: {
borderColor: (theme) => ({
...theme('colors'),
DEFAULT: theme('colors.scale.500', 'currentColor'),
dark: theme('colors.scale.400', 'currentColor'),
DEFAULT: theme('colors.scale.300', 'currentColor'),
dark: theme('colors.scale.1200', 'currentColor'),
}),
divideColor: (theme) => ({
...theme('colors'),
@@ -107,6 +108,13 @@ module.exports = ui({
// white: theme('colors.white'),
// black: theme('colors.black'),
// }),
backgroundImage: (theme) => ({
squiggle: `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" width="6" height="3" fill="${theme(
'colors.yellow.400'
)}"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></svg>`
)}")`,
}),
},
},
// variants: {
@@ -117,7 +125,4 @@ module.exports = ui({
// },
// },
plugins: [],
corePlugins: {
preflight: true,
},
})
www/ui.config.js
+388
View File
@@ -0,0 +1,388 @@
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()
console.log(variables)
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',
},
})
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