From f03fabc7d0c8fa13127a96e8bd75005a3bbb248c Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sat, 5 Mar 2022 22:41:44 +0000
Subject: [PATCH] moved UI config into root as it wasn't reloading properly

---
 www/components/Nav/index.tsx |  10 +-
 www/default-colors.js        |  90 ++++++++
 www/styles/index.css         |   2 +-
 www/tailwind.config.js       |  17 +-
 www/ui.config.js             | 388 +++++++++++++++++++++++++++++++++++
 5 files changed, 496 insertions(+), 11 deletions(-)
 create mode 100644 www/default-colors.js
 create mode 100644 www/ui.config.js

diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 8fb0b5fd547..1b06a48db0d 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -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
                   `}
                   >
diff --git a/www/default-colors.js b/www/default-colors.js
new file mode 100644
index 00000000000..1c9656e8d7e
--- /dev/null
+++ b/www/default-colors.js
@@ -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)',
+  },
+}
diff --git a/www/styles/index.css b/www/styles/index.css
index 4f398873896..10a0074fe0f 100644
--- a/www/styles/index.css
+++ b/www/styles/index.css
@@ -23,7 +23,7 @@ html {
 }
 
 body {
-  @apply bg-scale-200;
+  @apply bg-scale-100;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index 29c6f9fd6c8..41f6e940dc9 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -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,
-  },
 })
diff --git a/www/ui.config.js b/www/ui.config.js
new file mode 100644
index 00000000000..d26e243e573
--- /dev/null
+++ b/www/ui.config.js
@@ -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