From 6d760a1a995a042ae7b8b8e809da20228b65b70a Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Tue, 30 Jul 2024 21:34:28 +0800 Subject: [PATCH] Feat/deep dark (#27026) * chore: move to deeper dark * tidy up boxes on www * update deep-dark colors * fix homepage product cards * toned down pricing page a little * update * lots of color changes * Update grid.scss * Update EntityListItem.tsx * Update EntityListItem.tsx * fix partners page icon * fix partners page colors * update theme * Update global.css * combined dark theme so classic-dark does not break on other sites * Update package-lock.json * updated color tokens pipeline to support combined dark theme * smol updates * Update FeaturedThumb.tsx * Update BlogFilters.tsx * Update BlogListItem.tsx * Update BlogListItem.tsx * Update UserSettingsDropdown.tsx * Update NavigationBar.tsx --------- Co-authored-by: Francesco Sansalvadore --- apps/design-system/styles/globals.css | 2 +- apps/docs/styles/main.scss | 3 +- .../grid/components/header/Header.tsx | 2 +- .../header/filter/FilterPopover.tsx | 5 +- .../components/header/sort/SortPopover.tsx | 5 +- .../Account/Preferences/ThemeSettings.tsx | 2 +- .../Realtime/Inspector/MessageSelection.tsx | 4 +- .../Realtime/Inspector/MessagesTable.tsx | 2 +- .../RoleImpersonationPopover.tsx | 6 +- .../RoleImpersonationRadio.tsx | 9 +- .../layouts/AccountLayout/WithSidebar.tsx | 2 +- .../layouts/AppLayout/BranchDropdown.tsx | 11 +- .../AppLayout/OrganizationDropdown.tsx | 10 +- .../layouts/AppLayout/ProjectDropdown.tsx | 9 +- .../AppLayout/UserSettingsDropdown.tsx | 14 +- .../LayoutHeader/LayoutHeader.tsx | 2 +- .../NavigationBar/NavigationBar.tsx | 20 +-- .../NavigationBar/NavigationIconButton.tsx | 2 +- .../NavigationBar/NavigationIconLink.tsx | 9 +- .../layouts/ProjectLayout/ProductMenuBar.tsx | 2 +- .../TableEditorLayout/EntityListItem.tsx | 20 ++- apps/studio/components/ui/Panel.tsx | 4 +- .../studio/public/img/themes/classic-dark.svg | 39 +++++ apps/studio/public/img/themes/dark.svg | 64 +++---- apps/studio/public/img/themes/deep-dark.svg | 39 ----- apps/studio/styles/grid.scss | 34 ++-- apps/studio/styles/main.scss | 2 +- apps/www/components/Blog/BlogFilters.tsx | 5 +- apps/www/components/Blog/BlogGridItem.tsx | 2 +- apps/www/components/Blog/BlogListItem.tsx | 6 +- apps/www/components/Blog/FeaturedThumb.tsx | 2 +- apps/www/components/CTABanner/index.tsx | 6 +- apps/www/components/ExampleCard.tsx | 4 +- .../www/components/Nav/DevelopersDropdown.tsx | 2 +- apps/www/components/Nav/ProductDropdown.tsx | 2 +- apps/www/components/Panel/Panel.tsx | 4 +- apps/www/components/Pricing/PricingPlans.tsx | 10 +- .../Products/Functions/NpmEcosystem.tsx | 2 +- .../Products/Functions/QueryLogs.tsx | 2 +- .../Products/Functions/RealtimeLogs.tsx | 2 +- apps/www/components/Products/ProductCard.tsx | 6 +- .../components/Products/RealtimeVisual.tsx | 3 - apps/www/data/partners/index.tsx | 4 +- apps/www/pages/index.tsx | 2 +- apps/www/pages/partners/index.tsx | 22 ++- .../www/public/images/index/products/auth.svg | 77 ++++----- .../images/index/products/realtime-bg.svg | 88 +++++----- apps/www/styles/index.css | 5 +- .../with-react-query-nextjs-14/app/page.tsx | 2 +- .../nextjs-todo-list/components/TodoList.tsx | 2 +- .../nextjs-todo-list/pages/index.tsx | 2 +- .../todo-list/nextjs-todo-list/styles/app.css | 150 ++++++++++++++--- .../sveltejs-todo-list/src/App.svelte | 2 +- .../sveltejs-todo-list/src/assets/app.css | 156 +++++++++++++++--- .../sveltejs-todo-list/src/lib/Todo.svelte | 2 +- packages/ui-patterns/GlassPanel/index.tsx | 10 +- packages/ui-patterns/TweetCard/index.tsx | 2 +- packages/ui/build/css/themes/classic-dark.css | 65 ++++++++ packages/ui/build/css/themes/concept-two.css | 65 ++++++++ .../{deep-dark.css => dark-combined.css} | 14 +- packages/ui/build/css/themes/dark.css | 82 ++++----- packages/ui/build/css/themes/light.css | 2 + packages/ui/build/css/tw-extend/color.js | 14 +- .../internals/tokens/extract-design-tokens.js | 7 + .../components/ThemeProvider/singleThemes.ts | 2 +- .../src/components/Toggle/Toggle.module.css | 2 +- .../ui/src/components/shadcn/ui/alert.tsx | 2 +- .../ui/src/components/shadcn/ui/dialog.tsx | 2 +- packages/ui/src/lib/tailwind-demo-classes.ts | 4 +- packages/ui/src/lib/theme/defaultTheme.ts | 18 +- packages/ui/transformTokens.js | 20 ++- 71 files changed, 788 insertions(+), 418 deletions(-) create mode 100644 apps/studio/public/img/themes/classic-dark.svg delete mode 100644 apps/studio/public/img/themes/deep-dark.svg create mode 100644 packages/ui/build/css/themes/classic-dark.css create mode 100644 packages/ui/build/css/themes/concept-two.css rename packages/ui/build/css/themes/{deep-dark.css => dark-combined.css} (89%) diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css index 9ef3d8f922..6e015819cf 100644 --- a/apps/design-system/styles/globals.css +++ b/apps/design-system/styles/globals.css @@ -4,7 +4,7 @@ @import './../../../packages/ui/build/css/source/global.css'; @import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/deep-dark.css'; +@import './../../../packages/ui/build/css/themes/classic-dark.css'; @import './../../../packages/ui/build/css/themes/light.css'; /* @layer base { diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss index 2ea5486c6e..e1dde0f01e 100644 --- a/apps/docs/styles/main.scss +++ b/apps/docs/styles/main.scss @@ -3,8 +3,7 @@ @tailwind utilities; @import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/deep-dark.css'; +@import './../../../packages/ui/build/css/themes/dark-combined.css'; @import './../../../packages/ui/build/css/themes/light.css'; @font-face { diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx index 77a1205169..8e6a88a3c9 100644 --- a/apps/studio/components/grid/components/header/Header.tsx +++ b/apps/studio/components/grid/components/header/Header.tsx @@ -61,7 +61,7 @@ const Header = ({ return (
-
+
{customHeader ? ( <>{customHeader} ) : ( diff --git a/apps/studio/components/grid/components/header/filter/FilterPopover.tsx b/apps/studio/components/grid/components/header/filter/FilterPopover.tsx index 7b87e65d27..b83a6ef54a 100644 --- a/apps/studio/components/grid/components/header/filter/FilterPopover.tsx +++ b/apps/studio/components/grid/components/header/filter/FilterPopover.tsx @@ -51,10 +51,7 @@ const FilterPopover = ({ table, filters, setParams }: FilterPopoverProps) => { return ( - diff --git a/apps/studio/components/grid/components/header/sort/SortPopover.tsx b/apps/studio/components/grid/components/header/sort/SortPopover.tsx index b73860bfa6..39e1811aa5 100644 --- a/apps/studio/components/grid/components/header/sort/SortPopover.tsx +++ b/apps/studio/components/grid/components/header/sort/SortPopover.tsx @@ -42,10 +42,7 @@ const SortPopover = ({ table, sorts, setParams }: SortPopoverProps) => { return ( - diff --git a/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx index 9e4e967672..e90964a05f 100644 --- a/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx @@ -41,7 +41,7 @@ const ThemeSettings = () => { > {singleThemes.map((theme: Theme) => ( - + ))} diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx index db121fd1bb..23dc53820e 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx @@ -24,12 +24,12 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => { return (
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx index 11e493aebf..976980787d 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx @@ -187,7 +187,7 @@ const MessagesTable = ({ 'font-mono tracking-tight', isEqual(row, focusedLog) ? 'bg-scale-800 rdg-row--focused' - : ' bg-scale-200 hover:bg-scale-300 cursor-pointer', + : ' bg-200 hover:bg-scale-300 cursor-pointer', isErrorLog(row) && '!bg-warning-300', ]) }} diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx index 216963c7a3..2cdf1ec43a 100644 --- a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx +++ b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx @@ -47,11 +47,7 @@ const RoleImpersonationPopover = ({
- + diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx index 25895706f7..49a9afaac3 100644 --- a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx +++ b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx @@ -1,4 +1,5 @@ -import { IconCheck, IconMinus, cn } from 'ui' +import { Check, Minus } from 'lucide-react' +import { cn } from 'ui' export interface RoleImpersonationRadioProps { label?: string @@ -19,7 +20,7 @@ function RoleImpersonationRadio({