From b04af336874586f2098f122c20a91d9039ee9ab1 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Wed, 18 Jan 2023 19:11:24 +0100 Subject: [PATCH 001/144] init: using figma tokens in tailwind --- apps/www/components/DarkModeToggle.tsx | 2 +- apps/www/components/Layouts/Default.tsx | 2 +- apps/www/pages/_app.tsx | 3 + apps/www/pages/_document.tsx | 2 +- apps/www/pages/index.tsx | 15 + package-lock.json | 298 +++ packages/config/ui.config.js | 4 + packages/ui/package.json | 9 +- packages/ui/style-token.js | 153 ++ packages/ui/styles/dark-variables.css | 343 +++ packages/ui/styles/global-variables.css | 208 ++ packages/ui/styles/light-variables.css | 309 +++ packages/ui/styles/tokens/dark.json | 1464 ++++++++++++ packages/ui/styles/tokens/global.json | 1036 +++++++++ packages/ui/styles/tokens/light.json | 1386 ++++++++++++ packages/ui/styles/tw-extend/color.js | 172 ++ packages/ui/tokens.json | 2698 +++++++++++++++++++++++ 17 files changed, 8100 insertions(+), 4 deletions(-) create mode 100644 packages/ui/style-token.js create mode 100644 packages/ui/styles/dark-variables.css create mode 100644 packages/ui/styles/global-variables.css create mode 100644 packages/ui/styles/light-variables.css create mode 100644 packages/ui/styles/tokens/dark.json create mode 100644 packages/ui/styles/tokens/global.json create mode 100644 packages/ui/styles/tokens/light.json create mode 100644 packages/ui/styles/tw-extend/color.js create mode 100644 packages/ui/tokens.json diff --git a/apps/www/components/DarkModeToggle.tsx b/apps/www/components/DarkModeToggle.tsx index c3a1b0f946f..0b00012e0e9 100644 --- a/apps/www/components/DarkModeToggle.tsx +++ b/apps/www/components/DarkModeToggle.tsx @@ -9,7 +9,7 @@ function DarkModeToggle() { toggleTheme() const key = localStorage.getItem('supabaseDarkMode') - document.documentElement.className = key === 'true' ? 'dark' : '' + document.documentElement.className = key === 'true' ? 'dark dark-ui' : '' } return ( diff --git a/apps/www/components/Layouts/Default.tsx b/apps/www/components/Layouts/Default.tsx index f960816a169..f36902c7121 100644 --- a/apps/www/components/Layouts/Default.tsx +++ b/apps/www/components/Layouts/Default.tsx @@ -17,7 +17,7 @@ const DefaultLayout = (props: Props) => { // Default to dark mode if no preference config document.documentElement.className = 'dark' } else { - document.documentElement.className = key === 'true' ? 'dark' : '' + document.documentElement.className = key === 'true' ? 'dark dark-ui' : '' } }, []) diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx index afe6bd7a1a1..b0be4a5b694 100644 --- a/apps/www/pages/_app.tsx +++ b/apps/www/pages/_app.tsx @@ -5,6 +5,9 @@ import { useRouter } from 'next/router' import { useEffect } from 'react' import Meta from '~/components/Favicons' import '../styles/index.css' +import '../../../packages/ui/styles/light-variables.css' +import '../../../packages/ui/styles/dark-variables.css' +import '../../../packages/ui/styles/global-variables.css' import { post } from './../lib/fetchWrapper' import { ThemeProvider } from '~/components/Providers' import Head from 'next/head' diff --git a/apps/www/pages/_document.tsx b/apps/www/pages/_document.tsx index 8429f60254f..142fc5cbdaf 100644 --- a/apps/www/pages/_document.tsx +++ b/apps/www/pages/_document.tsx @@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from 'next/document' export default class MyDocument extends Document { render() { return ( - +