From b91532f6c7598f3b6127deae323e2991658faaa3 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Tue, 7 Nov 2023 04:40:53 +0100 Subject: [PATCH] Migrate to styling tokens (#18314) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * migrate some www components to tokens * consolidate InteractiveShimmerCard to Panel component * update tokens in blog * update tokens in careers page * update tokens in customers section * update tokens in open-source section * update tokens in Realtime page * update tokens in Storage and Vector * update tokens in SplitCodeBlockCarousel * update tokens in PGCharts * remove unused css files * update tokens in Card * update tokens in Pricing page * clean up priving page imports * remove hardcoded theme vars * migrate first half of defaultTheme.ts to tokens * migrate second half of defaultTheme.ts to tokens * improve inputs * add foreground to text-light and text-lighter * add foreground to text-light and text-lighter * migrate docs components with styling tokens * migrate docs components with styling tokens * fix broken Repos component * fix broken classes in blog * update tokens on Button and other components * update tokens on IconPanel * update studio main layout base styling tokens * update tokens across studio, docs and www * update tokens across studio, docs and www * update ui/Panel to styling tokens * update ExampleProject and TableEditorMenu tokens * www vector page tokens * update studio UI tokens * update other studio UI tokens * update more studio UI tokens * change tokens here, change tokens there * finish updating colors with tokens variables * add gui sandbox for theme experimentation * use common package for www, docs and studio and fix Command K tokens * provide light mode default tokens options * fix conflict leftover * update loading line * fix className typo * fix prettier * update themeSandbox preset default values * fix text-background0 * prettier * update warningBanner with warning color * switch all border-border with border-default * improve border-secondary and foreground-muted in light mode * force ring color on toggle * fix button bg color and border-muted light token * fix input bg color * fix dark button hover * fix homepage product card * fix code-hike table header colors * button dark border * remove tabIndex leftover from homepage main ctas --------- Co-authored-by: Kevin Grüneberg Co-authored-by: Jonathan Summers-Muir --- apps/docs/components/ButtonCard.tsx | 8 +- apps/docs/components/DocsCoverLogo.tsx | 82 ++-- apps/docs/components/Extensions.tsx | 8 +- apps/docs/components/FooterHelpCallout.tsx | 6 +- .../docs/components/GuidesTableOfContents.tsx | 4 +- apps/docs/components/HomePageCover.tsx | 10 +- apps/docs/components/LinkCard.tsx | 6 +- apps/docs/components/Navigation/Footer.tsx | 28 +- .../Navigation/NavigationMenu/HomeMenu.tsx | 9 +- .../NavigationMenu/NavigationMenuCliList.tsx | 10 +- .../NavigationMenuGuideListItems.tsx | 12 +- .../NavigationMenuRefListItems.tsx | 10 +- .../Navigation/NavigationMenu/TopNavBar.tsx | 9 +- apps/docs/components/Navigation/SideBar.tsx | 30 +- apps/docs/components/Options.tsx | 20 +- apps/docs/components/Pagination.tsx | 6 +- apps/docs/components/Params.tsx | 10 +- apps/docs/components/RefVersionDropdown.tsx | 12 +- apps/docs/components/StepHike/index.tsx | 98 +---- .../docs/components/StepHikeCompact/index.tsx | 10 +- apps/docs/components/TableOfContents.tsx | 4 +- .../reference/ApiOperationSection.tsx | 14 +- .../reference/CLICommandSection.tsx | 14 +- .../reference/RefDetailCollapse.tsx | 9 +- .../reference/RefFunctionSection.tsx | 14 +- .../enrichments/cli/CliGlobalFlagsHandler.tsx | 2 +- apps/docs/docs/ref/api/introduction.mdx | 2 +- apps/docs/docs/ref/cli/introduction.mdx | 2 +- apps/docs/docs/ref/csharp/introduction.mdx | 6 +- apps/docs/docs/ref/dart/introduction.mdx | 4 +- apps/docs/docs/ref/dart/v0/introduction.mdx | 4 +- .../docs/docs/ref/javascript/introduction.mdx | 4 +- .../docs/ref/javascript/v1/introduction.mdx | 4 +- apps/docs/docs/ref/kotlin/introduction.mdx | 4 +- apps/docs/docs/ref/python/introduction.mdx | 4 +- .../self-hosting-analytics/introduction.mdx | 2 +- .../ref/self-hosting-auth/introduction.mdx | 2 +- .../self-hosting-functions/introduction.mdx | 2 +- .../self-hosting-realtime/introduction.mdx | 2 +- .../ref/self-hosting-storage/introduction.mdx | 2 +- apps/docs/docs/ref/swift/introduction.mdx | 6 +- .../docs/reference/csharp/introduction.mdx | 4 +- apps/docs/layouts/DefaultLayout.tsx | 2 +- apps/docs/layouts/HomeLayout.tsx | 2 +- apps/docs/layouts/SiteLayout.tsx | 20 +- apps/docs/layouts/guides/index.tsx | 10 +- apps/docs/layouts/ref/RefSubLayout.tsx | 2 +- apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx | 2 +- .../docs/layouts/tutorials/TutorialLayout.tsx | 2 +- apps/docs/lib/mdx/getComponents.tsx | 2 +- apps/docs/package.json | 1 + apps/docs/pages/_app.tsx | 4 +- .../guides/auth/server-side-rendering.mdx | 6 +- apps/docs/pages/guides/cli/config.tsx | 2 +- .../guides/self-hosting/analytics/config.mdx | 6 +- .../pages/guides/self-hosting/auth/config.mdx | 6 +- .../guides/self-hosting/realtime/config.mdx | 6 +- .../guides/self-hosting/storage/config.mdx | 6 +- apps/docs/pages/index.mdx | 4 +- .../pages/reference/analytics/[...slug].tsx | 2 +- .../docs/pages/reference/analytics/config.tsx | 4 +- apps/docs/pages/reference/auth/[...slug].tsx | 2 +- apps/docs/pages/reference/auth/config.tsx | 4 +- apps/docs/pages/reference/realtime/config.tsx | 4 +- .../pages/reference/storage/[...slug].tsx | 2 +- apps/docs/pages/reference/storage/config.tsx | 4 +- apps/docs/styles/main.scss | 18 +- apps/www/components/AdminAccess/index.tsx | 4 +- .../AuthWidget/AuthWidgetSection.tsx | 12 +- apps/www/components/Avatar.tsx | 2 +- apps/www/components/Blog/BlogFilters.tsx | 2 +- apps/www/components/Blog/BlogListItem.tsx | 15 +- .../components/Blog/ShareArticleActions.tsx | 6 +- apps/www/components/Card.tsx | 16 +- .../Carousels/SplitCodeBlockCarousel.tsx | 2 +- apps/www/components/Charts/PGCharts.tsx | 24 +- apps/www/components/ExampleCard.tsx | 8 +- apps/www/components/Footer/index.tsx | 18 +- apps/www/components/Hero/Hero.tsx | 4 +- apps/www/components/Hero/HeroFrameworks.tsx | 2 +- apps/www/components/ImageFadeStack.tsx | 6 +- apps/www/components/ImageGrid.tsx | 6 +- .../components/LaunchWeek/5/ScheduleInfo.tsx | 6 +- .../LaunchWeek/6/HackathonSection.tsx | 10 +- .../components/LaunchWeek/6/LaunchHero.tsx | 2 +- .../LaunchWeek/6/PreLaunchTeaser.tsx | 6 +- .../www/components/LaunchWeek/7/BlogLinks.tsx | 2 +- .../7/LaunchSection/ArticleButton.tsx | 4 +- .../7/LaunchSection/ArticleButtonListItem.tsx | 3 +- .../7/LaunchSection/LaunchWeekLogoHeader.tsx | 2 +- .../7/LaunchSection/ProductButton.tsx | 2 +- .../7/LaunchSection/ProductButtonListItem.tsx | 2 +- .../7/LaunchSection/TicketBrick.tsx | 6 +- .../7/LaunchSection/TicketBrickWall.tsx | 2 +- .../LaunchWeek/7/LaunchSection/index.tsx | 15 +- .../LaunchWeek/7/Ticket/TicketActions.tsx | 18 +- .../LaunchWeek/7/Ticket/TicketProfile.tsx | 2 +- .../components/LaunchWeek/7/Ticket/form.tsx | 10 +- .../LaunchWeek/7/Ticket/ticket-copy.tsx | 2 +- .../LaunchWeek/8/LW8CalloutsSection.tsx | 4 +- .../components/LaunchWeek/8/LW8Meetups.tsx | 2 +- .../www/components/LaunchWeek/8/LWArchive.tsx | 4 +- .../components/LaunchWeek/8/LabelBadge.tsx | 2 +- .../LaunchWeek/8/LaunchWeekLogoHeader.tsx | 2 +- .../LaunchWeek/8/LaunchWeekPrizeSection.tsx | 2 +- .../LaunchWeek/8/Releases/LWAnnouncement.tsx | 2 +- .../8/Releases/components/index.tsx | 8 +- .../LaunchWeek/8/Ticket/TicketActions.tsx | 12 +- .../LaunchWeek/8/Ticket/TicketContainer.tsx | 2 +- .../8/Ticket/TicketCustomizationForm.tsx | 16 +- .../LaunchWeek/8/Ticket/TicketFooter.tsx | 2 +- .../LaunchWeek/8/Ticket/TicketNumber.tsx | 2 +- .../LaunchWeek/8/Ticket/TicketProfile.tsx | 2 +- .../LaunchWeek/8/Ticket/ticket-copy.tsx | 2 +- .../LaunchWeek/8/TicketBrickWall.tsx | 2 +- .../MadeForDevelopers/CodeExamples.tsx | 2 +- .../www/components/Nav/DevelopersDropdown.tsx | 10 +- apps/www/components/Nav/HamburgerMenu.tsx | 2 +- apps/www/components/Nav/MenuItem.tsx | 4 +- apps/www/components/Nav/MobileMenu.tsx | 2 +- apps/www/components/Nav/ProductDropdown.tsx | 4 +- apps/www/components/Nav/index.tsx | 2 +- apps/www/components/OpenSource/RepoCard.tsx | 12 +- apps/www/components/OpenSource/Repos.tsx | 10 +- .../components/OpenSource/Sponsorships.tsx | 13 +- .../index.tsx => Panel/Panel.tsx} | 43 +- apps/www/components/Panel/index.tsx | 97 +---- .../components/Partners/PartnerLinkBox.tsx | 15 +- apps/www/components/Partners/TileGrid.tsx | 10 +- .../Pricing/ComputePricingModal.tsx | 6 +- .../components/Pricing/PricingAddOnTable.tsx | 14 +- .../components/Pricing/PricingTableRow.tsx | 19 +- apps/www/components/ProductIcon.tsx | 6 +- apps/www/components/Products/ProductCard.tsx | 24 +- .../Products/VectorAI/CustomersVisual.tsx | 267 ++++-------- apps/www/components/Quote.tsx | 2 +- apps/www/components/ScrollableCodeBlock.tsx | 10 +- .../components/Sections/CommunitySlider.tsx | 12 +- .../Sections/CustomerQuotesSection.tsx | 4 +- .../www/components/Sections/EnterpriseCta.tsx | 2 +- .../components/Sections/FeaturesSection.tsx | 6 +- .../components/Sections/FunctionsUsecases.tsx | 10 +- .../components/Sections/HighlightCards.tsx | 11 +- .../Sections/ProductHeaderCentered.tsx | 2 +- apps/www/components/Sections/ProductsCta.tsx | 2 +- .../components/Sections/TimedTabsSection.tsx | 12 +- .../Sections/TwitterSocialProof.tsx | 2 +- .../components/Sections/UseCasesSection.tsx | 16 +- apps/www/components/TextLink.tsx | 2 +- apps/www/components/UI/FlyOut.tsx | 6 +- apps/www/components/UI/SectionHeader.tsx | 4 +- .../components/ZoomableImg/ZoomContent.tsx | 3 +- apps/www/data/home/content.tsx | 2 +- apps/www/data/partners/index.tsx | 2 +- apps/www/data/support.tsx | 6 +- apps/www/layouts/comparison.tsx | 6 +- apps/www/lib/mdx/mdxComponents.tsx | 2 +- apps/www/pages/_app.tsx | 4 +- apps/www/pages/alternatives/[slug].module.css | 46 --- apps/www/pages/auth/Auth.module.css | 7 - apps/www/pages/beta.tsx | 10 +- apps/www/pages/blog.tsx | 2 +- apps/www/pages/blog/[slug].module.css | 46 --- apps/www/pages/blog/[slug].tsx | 14 +- apps/www/pages/blog/categories/[category].tsx | 2 +- apps/www/pages/blog/tags/[tag].tsx | 2 +- apps/www/pages/brand-assets.tsx | 4 +- apps/www/pages/careers/career.module.css | 2 +- apps/www/pages/careers/index.tsx | 36 +- apps/www/pages/changelog.tsx | 6 +- apps/www/pages/company.tsx | 19 +- apps/www/pages/customers/[slug].module.css | 46 --- apps/www/pages/customers/[slug].tsx | 6 +- apps/www/pages/customers/index.tsx | 6 +- apps/www/pages/database/Database.css | 0 apps/www/pages/database/Database.tsx | 4 +- .../pages/edge-functions/edge-functions.css | 0 .../pages/edge-functions/edge-functions.tsx | 12 +- apps/www/pages/launch-week/6/index.tsx | 4 +- .../www/pages/launch-week/7/tickets/index.tsx | 2 +- apps/www/pages/nextjs/Nextjs.css | 0 apps/www/pages/open-source/index.tsx | 2 +- apps/www/pages/partners/experts/[slug].tsx | 14 +- apps/www/pages/partners/experts/index.tsx | 6 +- apps/www/pages/partners/index.tsx | 21 +- .../pages/partners/integrations/[slug].tsx | 10 +- .../www/pages/partners/integrations/index.tsx | 10 +- apps/www/pages/pricing/index.tsx | 92 +++-- apps/www/pages/realtime/Realtime.tsx | 24 +- apps/www/pages/security.mdx | 4 +- apps/www/pages/storage/Storage.module.css | 7 - apps/www/pages/support.tsx | 17 +- apps/www/pages/vector/Vector.tsx | 10 +- apps/www/public/rss.xml | 9 +- apps/www/styles/index.css | 12 +- package-lock.json | 3 + packages/common/constants/environment.ts | 2 + packages/common/constants/index.ts | 1 + packages/common/hooks/index.ts | 1 + packages/common/hooks/useThemeSandbox.tsx | 145 +++++++ packages/config/code-hike.scss | 13 +- packages/config/tailwind.config.js | 14 +- packages/config/ui.config.js | 4 +- packages/ui/.storybook/preview.css | 2 +- packages/ui/.storybook/shadcn.css | 2 +- packages/ui/build/css/themes/light.css | 6 +- .../Accordion/Accordion.stories.tsx | 62 ++- .../ui/src/components/Admonition/index.tsx | 22 +- packages/ui/src/components/Button/Button.tsx | 46 +-- .../ui/src/components/CodeBlock/CodeBlock.tsx | 6 +- .../Collapsible/Collapsible.stories.tsx | 4 +- .../ui/src/components/Command/APIKeys.tsx | 4 +- .../ui/src/components/Command/AiCommand.tsx | 20 +- .../src/components/Command/Command.alerts.tsx | 2 +- .../src/components/Command/Command.utils.tsx | 48 +-- .../ui/src/components/Command/CommandMenu.tsx | 20 +- .../ui/src/components/Command/DocsSearch.tsx | 20 +- .../Command/GenerateSQL/GenerateSQL.tsx | 32 +- .../ExpandableVideo/ExpandableVideo.tsx | 2 +- .../ui/src/components/Form/Form.stories.tsx | 26 +- .../src/components/Form/examples/AuthForm.tsx | 179 ++++---- .../src/components/GlassPanel/GlassPanel.tsx | 8 +- .../ui/src/components/IconPanel/IconPanel.tsx | 18 +- .../components/LoadingLine/LoadingLine.tsx | 2 +- .../ui/src/components/Modal/Modal.stories.tsx | 26 +- .../src/components/Popover/Popover.module.css | 12 +- .../components/Popover/Popover.stories.tsx | 2 +- .../components/SidePanel/SidePanel.module.css | 2 +- .../SidePanel/SidePanel.stories.tsx | 108 ++--- .../ui/src/components/SidePanel/SidePanel.tsx | 6 +- .../ui/src/components/TextLink/TextLink.tsx | 2 +- .../ui/src/components/TweetCard/TweetCard.tsx | 10 +- .../shadcn/stories/Calendar.stories.tsx | 2 +- .../shadcn/stories/Card.stories.tsx | 4 +- .../shadcn/stories/Checkbox.stories.tsx | 2 +- .../shadcn/stories/ComboBox.stories.tsx | 10 +- .../shadcn/stories/Command.stories.tsx | 4 +- .../stories/DataTable.storiesFIX LATER.tsx | 2 +- .../shadcn/stories/DatePicker.stories.tsx | 8 +- .../shadcn/stories/Form.stories.tsx | 2 +- .../shadcn/stories/HoverCard.stories.tsx | 2 +- .../shadcn/stories/NavigationMenu.stories.tsx | 4 +- .../shadcn/stories/Popover.stories.tsx | 2 +- .../shadcn/stories/Seperator.stories.tsx | 2 +- .../shadcn/stories/TextArea.stories.tsx | 2 +- .../src/components/shadcn/ui/alert-dialog.tsx | 2 +- .../ui/src/components/shadcn/ui/alert.tsx | 2 +- .../ui/src/components/shadcn/ui/badge.tsx | 6 +- .../ui/src/components/shadcn/ui/button.tsx | 6 +- .../ui/src/components/shadcn/ui/calendar.tsx | 6 +- packages/ui/src/components/shadcn/ui/card.tsx | 2 +- .../ui/src/components/shadcn/ui/command.tsx | 8 +- .../src/components/shadcn/ui/context-menu.tsx | 2 +- .../ui/src/components/shadcn/ui/dialog.tsx | 4 +- .../components/shadcn/ui/dropdown-menu.tsx | 6 +- packages/ui/src/components/shadcn/ui/form.tsx | 2 +- .../ui/src/components/shadcn/ui/input.tsx | 4 +- .../ui/src/components/shadcn/ui/menubar.tsx | 2 +- .../ui/src/components/shadcn/ui/select.tsx | 2 +- .../ui/src/components/shadcn/ui/sheet.tsx | 2 +- .../ui/src/components/shadcn/ui/table.tsx | 4 +- packages/ui/src/components/shadcn/ui/tabs.tsx | 2 +- .../ui/src/components/shadcn/ui/textarea.tsx | 2 +- .../ui/src/components/shadcn/ui/toggle.tsx | 5 +- .../ui/src/layout/banners/LWAnnouncement.tsx | 6 +- packages/ui/src/lib/commonCva.ts | 14 +- packages/ui/src/lib/tailwind-demo-classes.ts | 306 +++++++------- packages/ui/src/lib/theme/defaultTheme.ts | 382 +++++++++--------- studio/.storybook/preview.css | 26 +- .../grid/components/editor/JsonEditor.tsx | 14 +- .../grid/components/editor/TextEditor.tsx | 6 +- .../formatter/ForeignKeyFormatter.tsx | 4 +- .../grid/components/grid/ColumnHeader.tsx | 12 +- .../grid/components/header/Header.tsx | 16 +- .../grid/components/menu/ColumnMenu.tsx | 4 +- .../interfaces/Account/AuditLogs.tsx | 14 +- .../Account/TOTPFactors/DeleteFactorModal.tsx | 2 +- .../interfaces/Account/TOTPFactors/index.tsx | 6 +- .../interfaces/AuditLogs/FilterPopover.tsx | 2 +- .../AuthProvidersForm.constants.ts | 11 +- .../Auth/AuthProvidersForm/ProviderForm.tsx | 10 +- .../BasicAuthSettingsForm.tsx | 2 +- .../PolicyEditor/PolicyDefinition.tsx | 8 +- .../Auth/Policies/PolicySelection.tsx | 4 +- .../Policies/PolicyTableRow/PolicyRow.tsx | 15 +- .../PolicyTableRow/PolicyTableRowHeader.tsx | 8 +- .../PolicyTemplates/TemplatesList.tsx | 3 +- .../Auth/RedirectUrls/RedirectUrlList.tsx | 2 +- .../Auth/RedirectUrls/RedirectUrls.tsx | 4 +- .../Auth/RedirectUrls/ValueContainer.tsx | 2 +- .../interfaces/Auth/Users/AddUserDropdown.tsx | 8 +- .../interfaces/Auth/Users/UserDropdown.tsx | 8 +- .../interfaces/Billing/InvoiceStatusBadge.tsx | 4 +- .../interfaces/Billing/SpendCapModal.tsx | 10 +- .../BranchManagement/BranchManagement.tsx | 2 +- .../Database/Backups/PITR/PITRNotice.tsx | 6 +- .../Database/Backups/PITR/PITRSelection.tsx | 6 +- .../Database/Backups/PITR/PITRStatus.tsx | 4 +- .../Database/Backups/PITR/TimeInput.tsx | 20 +- .../Backups/PITR/TimezoneSelection.tsx | 4 +- .../DeleteEnumeratedTypeModal.tsx | 2 +- .../EnumeratedTypes/EnumeratedTypes.tsx | 4 +- .../Database/Extensions/ExtensionCard.tsx | 8 +- .../Database/Functions/CreateFunction.tsx | 2 +- .../Functions/FunctionsList/FunctionList.tsx | 8 +- .../Functions/FunctionsList/FunctionsList.tsx | 4 +- .../Database/Hooks/EditHookPanel.tsx | 2 +- .../Database/Hooks/HTTPRequestFields.tsx | 4 +- .../Database/Hooks/HooksList/HookList.tsx | 4 +- .../Database/Hooks/HooksList/HooksList.tsx | 4 +- .../interfaces/Database/Indexes/Indexes.tsx | 8 +- .../Database/Migrations/Migrations.tsx | 2 +- .../Migrations/MigrationsEmptyState.tsx | 12 +- .../Database/Roles/CreateRolePanel.tsx | 6 +- .../interfaces/Database/Roles/RoleRow.tsx | 18 +- .../interfaces/Database/Roles/RolesList.tsx | 24 +- .../Database/Schemas/SchemaGraph.tsx | 8 +- .../interfaces/Database/Tables/ColumnList.tsx | 16 +- .../interfaces/Database/Tables/TableList.tsx | 18 +- .../Database/Triggers/ChooseFunctionForm.tsx | 4 +- .../Database/Triggers/CreateTrigger.tsx | 17 +- .../Triggers/TriggersList/TriggerList.tsx | 10 +- .../Triggers/TriggersList/TriggersList.tsx | 4 +- .../Database/Wrappers/CreateWrapper.tsx | 2 +- .../Database/Wrappers/EditWrapper.tsx | 2 +- .../Database/Wrappers/WrapperRow.tsx | 28 +- .../Database/Wrappers/WrapperTableEditor.tsx | 2 +- .../interfaces/Database/Wrappers/Wrappers.tsx | 4 +- .../Wrappers/WrappersDisabledState.tsx | 8 +- .../Database/Wrappers/WrappersDropdown.tsx | 4 +- .../interfaces/Docs/GeneratingTypes.tsx | 2 +- .../interfaces/Docs/LangSelector.tsx | 12 +- .../EdgeFunctionDetails.tsx | 10 +- .../EdgeFunctionSecrets.tsx | 4 +- .../Functions/EdgeFunctionsListItem.tsx | 4 +- .../Functions/TerminalInstructions.tsx | 4 +- .../interfaces/GraphQL/graphiql.module.css | 8 +- .../interfaces/Home/ExampleProject.tsx | 5 +- .../Home/NewProjectPanel/APIKeys.tsx | 6 +- .../Home/NewProjectPanel/GetStartedHero.tsx | 84 ++-- .../Home/NewProjectPanel/NewProjectPanel.tsx | 8 +- .../Home/ProjectList/PausedProjectCard.tsx | 8 +- .../Home/ProjectList/ProjectCard.tsx | 6 +- .../Home/ProjectList/ProjectCardStatus.tsx | 4 +- .../interfaces/Home/ProjectUsage.tsx | 8 +- .../interfaces/Home/ServiceStatus.tsx | 2 +- .../Integrations/IntegrationConnection.tsx | 2 +- .../Integrations/IntegrationPanels.tsx | 20 +- .../Integrations/OrganizationPicker.tsx | 2 +- .../interfaces/Integrations/ProjectLinker.tsx | 4 +- .../Organization/AuditLogs/AuditLogs.tsx | 18 +- .../BillingBreakdown/BillingMetric.tsx | 16 +- .../CostControl/CostControl.tsx | 2 +- .../CostControl/SpendCapSidePanel.tsx | 6 +- .../BillingSettings/PaymentMethods.tsx | 4 +- .../ProjectUpdateDisabledTooltip.tsx | 4 +- .../Subscription/EnterpriseCard.tsx | 6 +- .../Subscription/ExitSurveyModal.tsx | 4 +- .../Subscription/PaymentMethodSelection.tsx | 10 +- .../Subscription/PlanUpdateSidePanel.tsx | 10 +- .../Subscription/Subscription.tsx | 4 +- .../IntegrationSettings.tsx | 2 +- .../SidePanelGitHubRepoLinker.tsx | 2 +- .../SidePanelVercelProjectLinker.tsx | 2 +- .../OAuthApps/AuthorizeRequesterDetails.tsx | 2 +- .../OAuthApps/AuthorizedAppRow.tsx | 2 +- .../Organization/OAuthApps/OAuthAppRow.tsx | 2 +- .../Organization/OAuthApps/OAuthApps.tsx | 4 +- .../OAuthApps/PublishAppSidePanel/Scopes.tsx | 2 +- .../OAuthApps/PublishAppSidePanel/index.tsx | 4 +- .../TeamSettings/InviteMemberButton.tsx | 4 +- .../TeamSettings/MemberActions.tsx | 4 +- .../Organization/TeamSettings/MembersView.tsx | 16 +- .../RolesHelperModal/RolesHelperModal.tsx | 14 +- .../TeamSettings/TeamSettings.tsx | 4 +- .../Organization/Usage/Usage.constants.tsx | 2 +- .../interfaces/Organization/Usage/Usage.tsx | 2 +- .../Organization/Usage/UsageBarChart.tsx | 8 +- .../Usage/UsageSection/AttributeUsage.tsx | 10 +- .../ProjectAPIDocs/ContentSnippet.tsx | 2 +- .../ProjectAPIDocs/FirstLevelNav.tsx | 10 +- .../ProjectAPIDocs/ResourceContent.tsx | 2 +- .../ProjectAPIDocs/SecondLevelNav.tsx | 2 +- .../interfaces/Reports/GridResize.tsx | 2 +- .../interfaces/Reports/ReportFilterBar.tsx | 2 +- .../interfaces/Reports/ReportWidget.tsx | 8 +- .../components/interfaces/Reports/Reports.tsx | 4 +- .../Reports/renderers/ApiRenderers.tsx | 9 +- .../Reports/renderers/StorageRenderers.tsx | 2 +- .../SQLEditor/AISchemaSuggestionPopover.tsx | 4 +- .../UtilityPanel/SavingIndicator.tsx | 12 +- .../UtilityPanel/SizeToggleButton.tsx | 8 +- .../SQLEditor/UtilityPanel/UtilityActions.tsx | 4 +- .../interfaces/Settings/API/JWTSettings.tsx | 6 +- .../interfaces/Settings/Addons/Addons.tsx | 6 +- .../Addons/ComputeInstanceSidePanel.tsx | 10 +- .../Settings/Addons/CustomDomainSidePanel.tsx | 4 +- .../Settings/Addons/PITRSidePanel.tsx | 6 +- .../Settings/Database/BannedIPs.tsx | 4 +- .../DatabaseSettings/ResetDbPassword.tsx | 4 +- .../Database/DiskSizeConfiguration.tsx | 4 +- .../AddRestrictionModal.tsx | 4 +- .../NetworkRestrictions.tsx | 12 +- .../Settings/Database/SSLConfiguration.tsx | 8 +- .../CustomDomainActivate.tsx | 2 +- .../CustomDomainConfig/CustomDomainDelete.tsx | 2 +- .../CustomDomainConfig/CustomDomainVerify.tsx | 2 +- .../CustomDomainsShimmerLoader.tsx | 4 +- .../DeleteProjectButton.tsx | 8 +- .../General/Infrastructure/Infrastructure.tsx | 6 +- .../Infrastructure/PauseProjectButton.tsx | 6 +- .../Infrastructure/RestartServerButton.tsx | 4 +- .../TransferProjectButton.tsx | 8 +- .../Infrastructure/InfrastructureActivity.tsx | 2 +- .../Infrastructure/InfrastructureInfo.tsx | 4 +- .../GitHubIntegrationConnectionForm.tsx | 8 +- .../VercelIntegrationConnectionForm.tsx | 8 +- .../VercelIntegration/VercelSection.tsx | 4 +- .../interfaces/Settings/Logs/LogSelection.tsx | 16 +- .../interfaces/Settings/Logs/LogTable.tsx | 10 +- .../Settings/Logs/Logs.SavedQueriesItem.tsx | 2 +- .../Settings/Logs/LogsFilterPopover.tsx | 2 +- .../Settings/Logs/LogsFormatters.tsx | 14 +- .../Settings/Logs/LogsQueryPanel.tsx | 6 +- .../Settings/Logs/RecentQueriesItem.tsx | 2 +- .../Settings/Logs/UpgradePrompt.tsx | 2 +- .../Vault/Keys/EncryptionKeysManagement.tsx | 10 +- .../Settings/Vault/Secrets/SecretRow.tsx | 10 +- .../Vault/Secrets/SecretsManagement.tsx | 6 +- .../interfaces/Settings/Vault/VaultToggle.tsx | 8 +- .../interfaces/Storage/CreateBucketModal.tsx | 4 +- .../interfaces/Storage/EditBucketModal.tsx | 4 +- .../interfaces/Support/SupportForm.tsx | 6 +- .../TableGridEditor/GridHeaderActions.tsx | 8 +- .../SidePanelEditor/ActionBar.tsx | 2 +- .../ColumnEditor/InputWithSuggestions.tsx | 4 +- .../ForeignKeySelector.utils.tsx | 4 +- .../ForeignRowSelector/ForeignRowSelector.tsx | 2 +- .../ForeignRowSelector/SelectorGrid.tsx | 2 +- .../SpreadsheetImportPreview.tsx | 6 +- .../SidePanelEditor/TableEditor/Column.tsx | 6 +- .../TableEditor/ColumnManagement.tsx | 10 +- .../TableGridEditor/TableDefinition.tsx | 2 +- .../TableGridEditor/TableGridEditor.tsx | 2 +- .../layouts/AccountLayout/SidebarItem.tsx | 2 +- .../layouts/AccountLayout/WithSidebar.tsx | 12 +- .../layouts/AppLayout/AppHeader.tsx | 2 +- .../BranchingWaitlistPopover.tsx | 2 +- .../EnableBranchingModal.tsx | 6 +- .../GithubRepositorySelection.tsx | 2 +- .../VercelProjectSelection.tsx | 2 +- .../layouts/AppLayout/IncidentBanner.tsx | 2 +- .../layouts/AppLayout/SettingsButton.tsx | 4 +- studio/components/layouts/BillingLayout.tsx | 4 +- .../IntegrationWindowLayout.tsx | 6 +- .../layouts/ProjectLayout/ConnectingState.tsx | 4 +- .../LayoutHeader/BreadcrumbsView.tsx | 2 +- .../FeedbackDropdown/FeedbackWidget.tsx | 2 +- .../LayoutHeader/HelpPopover.tsx | 4 +- .../LayoutHeader/LayoutHeader.tsx | 6 +- .../NotificationsPopover/index.tsx | 10 +- .../NavigationBar/NavigationBar.tsx | 12 +- .../NavigationBar/NavigationIconButton.tsx | 8 +- .../layouts/ProjectLayout/PausingState.tsx | 2 +- .../layouts/ProjectLayout/ProductMenuBar.tsx | 4 +- .../ProjectLayout/ProjectPausedState.tsx | 6 +- .../layouts/ProjectLayout/RestoringState.tsx | 6 +- .../UpgradingState/UpgradingState.tsx | 8 +- .../layouts/SQLEditorLayout/QueryItem.tsx | 6 +- .../layouts/SQLEditorLayout/SQLEditorMenu.tsx | 6 +- studio/components/layouts/Scaffold.tsx | 2 +- .../SignInLayout/ForgotPasswordLayout.tsx | 2 +- .../layouts/SignInLayout/SignInLayout.tsx | 6 +- .../layouts/StorageLayout/BucketRow.tsx | 2 +- .../layouts/StorageLayout/StorageMenu.tsx | 6 +- .../TableEditorLayout/EntityListItem.tsx | 12 +- .../TableEditorLayout/TableEditorMenu.tsx | 12 +- .../to-be-cleaned/Charts/ChartHandler.tsx | 4 +- .../to-be-cleaned/ProductEmptyState.tsx | 6 +- .../StorageExplorer/CustomExpiryModal.tsx | 4 +- .../StorageExplorer/FileExplorerColumn.tsx | 14 +- .../StorageExplorer/FileExplorerHeader.tsx | 16 +- .../StorageExplorer/FileExplorerRow.tsx | 6 +- .../Storage/StorageExplorer/PreviewPane.tsx | 10 +- .../StorageExplorer/StorageExplorer.tsx | 4 +- .../StoragePoliciesBucketRow.js | 2 +- .../StorageSettings/StorageSettings.tsx | 8 +- .../to-be-cleaned/forms/SchemaFormPanel.js | 5 +- studio/components/ui/CardButton.tsx | 2 +- .../components/ui/Charts/Charts.constants.ts | 4 +- studio/components/ui/Charts/EmptyState.tsx | 4 +- .../ui/Charts/NoDataPlaceholder.tsx | 4 +- .../ui/Charts/Sparkline.stories.tsx | 7 +- .../ui/Charts/StackedBarChart.stories.tsx | 7 +- studio/components/ui/ClientLoadingError.tsx | 2 +- .../ui/DatePicker/TimeSplitInput.tsx | 4 +- studio/components/ui/Divider.tsx | 2 +- studio/components/ui/FormBoxEmpty.tsx | 2 +- studio/components/ui/Forms/FormPanel.tsx | 11 +- studio/components/ui/InformationBox.tsx | 2 +- .../components/ui/Logs/LogsExplorerHeader.tsx | 8 +- studio/components/ui/MultiSelect/Badges.tsx | 2 +- studio/components/ui/MultiSelect/index.tsx | 6 +- studio/components/ui/NoPermission.tsx | 3 +- studio/components/ui/NoSearchResults.tsx | 2 +- studio/components/ui/Panel.tsx | 24 +- studio/components/ui/PasswordStrengthBar.tsx | 2 +- .../components/ui/ProductMenu/ProductMenu.tsx | 2 +- studio/components/ui/SchemaSelector.tsx | 4 +- studio/components/ui/SparkBar.tsx | 2 +- .../components/ui/States/EmptyListState.tsx | 4 +- studio/components/ui/TwoOptionToggle.tsx | 10 +- studio/components/ui/UpgradeToPro.tsx | 7 +- studio/components/ui/WarningBanner.tsx | 10 +- studio/package.json | 2 + studio/pages/_app.tsx | 4 +- studio/pages/account/security.tsx | 13 +- .../github/[integrationId]/choose-project.tsx | 2 +- studio/pages/integrations/github/install.tsx | 2 +- studio/pages/join/index.tsx | 6 +- studio/pages/project/[ref]/auth/policies.tsx | 2 +- .../pages/project/[ref]/database/schemas.tsx | 4 +- .../project/[ref]/logs/explorer/index.tsx | 2 +- .../project/[ref]/logs/explorer/templates.tsx | 8 +- .../[ref]/reports/query-performance.tsx | 2 +- studio/pages/project/[ref]/settings/api.tsx | 2 +- .../project/[ref]/settings/vault/secrets.tsx | 2 +- studio/pages/sign-in-mfa.tsx | 2 +- studio/pages/sign-in.tsx | 4 +- studio/pages/sign-up.tsx | 4 +- studio/pages/support/new.tsx | 4 +- studio/pages/vercel/integrate.tsx | 2 +- studio/styles/contextMenu.scss | 8 +- studio/styles/date-picker.scss | 24 +- studio/styles/grid.scss | 40 +- studio/styles/main.scss | 10 +- studio/styles/react-data-grid-logs.scss | 10 +- studio/styles/storage.scss | 12 +- studio/styles/ui.scss | 56 +-- studio/tailwind.config.js | 56 +-- 540 files changed, 2704 insertions(+), 3001 deletions(-) rename apps/www/components/{InteractiveShimmerCard/index.tsx => Panel/Panel.tsx} (60%) delete mode 100644 apps/www/pages/alternatives/[slug].module.css delete mode 100644 apps/www/pages/auth/Auth.module.css delete mode 100644 apps/www/pages/blog/[slug].module.css delete mode 100644 apps/www/pages/customers/[slug].module.css delete mode 100644 apps/www/pages/database/Database.css delete mode 100644 apps/www/pages/edge-functions/edge-functions.css delete mode 100644 apps/www/pages/nextjs/Nextjs.css delete mode 100644 apps/www/pages/storage/Storage.module.css create mode 100644 packages/common/constants/environment.ts create mode 100644 packages/common/hooks/useThemeSandbox.tsx diff --git a/apps/docs/components/ButtonCard.tsx b/apps/docs/components/ButtonCard.tsx index 8c5a9970710..5180cc90786 100644 --- a/apps/docs/components/ButtonCard.tsx +++ b/apps/docs/components/ButtonCard.tsx @@ -1,6 +1,6 @@ +import React, { FC } from 'react' import Image from 'next/legacy/image' import Link from 'next/link' -import { FC } from 'react' interface Props { title: string @@ -23,8 +23,8 @@ const ButtonCard: FC = ({ {children ? ( @@ -43,7 +43,7 @@ const ButtonCard: FC = ({ ) : ( icon )} -

{title}

+

{title}

{description}

)} diff --git a/apps/docs/components/DocsCoverLogo.tsx b/apps/docs/components/DocsCoverLogo.tsx index b7065feb555..5332c59c958 100644 --- a/apps/docs/components/DocsCoverLogo.tsx +++ b/apps/docs/components/DocsCoverLogo.tsx @@ -45,7 +45,7 @@ const DocsCoverLogo = () => { animate={pathMotionConfig.animate} transition={pathMotionConfig.transition as any} d="M125.25 191.383C167.828 191.383 202.344 156.867 202.344 114.289C202.344 71.7115 167.828 37.1953 125.25 37.1953C82.6724 37.1953 48.1562 71.7115 48.1562 114.289C48.1562 156.867 82.6724 191.383 125.25 191.383Z" - stroke="var(--colors-scale11)" + stroke="hsl(var(--foreground-light))" strokeOpacity="0.1" strokeWidth="0.7" strokeMiterlimit="10" @@ -213,7 +213,7 @@ const DocsCoverLogo = () => { animate={pathMotionConfig.animate} transition={pathMotionConfig.transition as any} d="M218.024 169.846H32.498" - stroke="var(--colors-scale11)" + stroke="hsl(var(--foreground-light))" strokeOpacity="0.1" strokeWidth="0.7" strokeMiterlimit="10" @@ -289,8 +289,8 @@ const DocsCoverLogo = () => { gradientUnits="userSpaceOnUse" gradientTransform="translate(125.451 114.82) rotate(90) scale(109.781 0.5)" > - - + + { y2="11.9994" gradientUnits="userSpaceOnUse" > - - + + { y2="204.984" gradientUnits="userSpaceOnUse" > - - + + { y2="13.9993" gradientUnits="userSpaceOnUse" > - - + + { y2="204.984" gradientUnits="userSpaceOnUse" > - - + + { y2="-7.94661" gradientUnits="userSpaceOnUse" > - - - + + + { y2="-3.99932" gradientUnits="userSpaceOnUse" > - - - + + + { y2="199.061" gradientUnits="userSpaceOnUse" > - - - + + + { gradientUnits="userSpaceOnUse" gradientTransform="translate(125.752 114.291) rotate(90) scale(109.271 0.5)" > - - + + { y2="6.31757" gradientUnits="userSpaceOnUse" > - - + + { y2="200" gradientUnits="userSpaceOnUse" > - - + + { y2="199.061" gradientUnits="userSpaceOnUse" > - - - + + + { gradientUnits="userSpaceOnUse" gradientTransform="translate(125.261 59.2344) rotate(90) scale(0.5 263.749)" > - - + + { y2="94.9749" gradientUnits="userSpaceOnUse" > - - - + + + { y2="131.43" gradientUnits="userSpaceOnUse" > - - - + + + { y2="1.99785" gradientUnits="userSpaceOnUse" > - - - + + +
- +
-

Filter

+

Filter

    {tags.sort().map((tag) => (
diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx index 553f3165452..c337d27c153 100644 --- a/apps/docs/components/GuidesTableOfContents.tsx +++ b/apps/docs/components/GuidesTableOfContents.tsx @@ -16,7 +16,7 @@ const formatTOCHeader = (content: string) => { if (x === '`') { if (!begin) { begin = true - res.push(``) + res.push(``) } else { begin = false res.push(``) @@ -46,7 +46,7 @@ const GuidesTableOfContents: FC = ({ list }) => {
    • diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index 9487e0fc52a..098e7dd4dd6 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -63,7 +63,7 @@ const HomePageCover = (props) => { const GettingStarted = () => (
    - +

    Getting Started

    -

    +

    Discover how to set up a database to an app making queries in just a few minutes.

    @@ -99,13 +99,13 @@ const HomePageCover = (props) => { ) return ( -
    +

    {props.meta?.title}

    -

    +

    Learn how to get up and running with Supabase through tutorials, APIs and platform resources.

    diff --git a/apps/docs/components/LinkCard.tsx b/apps/docs/components/LinkCard.tsx index 3af179eb9ec..bb7ba40f7ef 100644 --- a/apps/docs/components/LinkCard.tsx +++ b/apps/docs/components/LinkCard.tsx @@ -14,17 +14,17 @@ export default function LinkCard({ return ( {description ? ( <>

    {title}

    -

    {description}

    +

    {description}

    ) : (
    {icon} -

    {title}

    +

    {title}

    )} diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx index c5d89404ca6..389d7d85788 100644 --- a/apps/docs/components/Navigation/Footer.tsx +++ b/apps/docs/components/Navigation/Footer.tsx @@ -8,7 +8,7 @@ const Footer = () => (
      {primaryLinks.map(({ url, featherIcon: Icon, icon, text, ctaLabel }) => ( -
    • +
    • {icon && ( ( > ( ))}
    -
    +
    - + © Supabase Inc - — + — {secondaryLinks.map(({ component: Component, ...item }) => item.url ? ( - + {item.title} ) : ( Component && ( - {item.title} + + {item.title} + ) ) )} @@ -73,7 +79,7 @@ const Footer = () => ( fillRule="evenodd" clipRule="evenodd" d="M8.66832 1.55469C4.98649 1.55469 2.00195 4.54402 2.00195 8.23269C2.00195 11.1827 3.91187 13.686 6.56108 14.5687C6.8944 14.63 7.01573 14.424 7.01573 14.2467C7.01573 14.0887 7.0104 13.668 7.00706 13.1114C5.15248 13.5147 4.76116 12.216 4.76116 12.216C4.45851 11.444 4.0212 11.2387 4.0212 11.2387C3.41589 10.8254 4.06719 10.8334 4.06719 10.8334C4.73583 10.88 5.08782 11.5214 5.08782 11.5214C5.68246 12.5414 6.64841 12.2467 7.02773 12.076C7.08906 11.6447 7.26105 11.3507 7.45171 11.184C5.97178 11.0154 4.41518 10.442 4.41518 7.88335C4.41518 7.15469 4.67517 6.55802 5.10115 6.09135C5.03248 5.92269 4.80383 5.24335 5.16648 4.32469C5.16648 4.32469 5.72645 4.14469 6.99973 5.00869C7.54355 4.86036 8.10464 4.78482 8.66832 4.78402C9.23496 4.78669 9.80494 4.86069 10.3376 5.00869C11.6102 4.14469 12.1688 4.32402 12.1688 4.32402C12.5328 5.24335 12.3035 5.92269 12.2355 6.09135C12.6621 6.55802 12.9208 7.15469 12.9208 7.88335C12.9208 10.4487 11.3615 11.0134 9.87694 11.1787C10.1163 11.3847 10.3289 11.792 10.3289 12.4154C10.3289 13.3074 10.3209 14.028 10.3209 14.2467C10.3209 14.4254 10.4409 14.6334 10.7796 14.568C12.107 14.1228 13.261 13.2716 14.0784 12.1347C14.8958 10.9979 15.3353 9.6329 15.3347 8.23269C15.3347 4.54402 12.3495 1.55469 8.66832 1.55469Z" - fill="var(--colors-scale9)" + fill="hsl(var(--foreground-muted))" /> @@ -89,7 +95,7 @@ const Footer = () => ( > @@ -105,7 +111,7 @@ const Footer = () => ( > @@ -124,7 +130,7 @@ const Footer = () => ( fillRule="evenodd" clipRule="evenodd" d="M13.8781 3.13594C12.8583 2.66802 11.7648 2.32328 10.6215 2.12583C10.6006 2.12202 10.5798 2.13154 10.5691 2.15059C10.4285 2.40073 10.2727 2.72706 10.1636 2.98356C8.93387 2.79945 7.71044 2.79945 6.50592 2.98356C6.39681 2.72136 6.23538 2.40073 6.09411 2.15059C6.08339 2.13218 6.06259 2.12265 6.04176 2.12583C4.89905 2.32265 3.80554 2.66739 2.78517 3.13594C2.77633 3.13975 2.76876 3.14611 2.76374 3.15435C0.689563 6.25326 0.12136 9.276 0.400102 12.2613C0.401363 12.2759 0.409561 12.2898 0.420913 12.2987C1.78939 13.3037 3.115 13.9139 4.41599 14.3183C4.43681 14.3247 4.45887 14.317 4.47212 14.2999C4.77987 13.8796 5.0542 13.4364 5.28941 12.9704C5.3033 12.9431 5.29005 12.9107 5.26167 12.9C4.82654 12.7349 4.4122 12.5336 4.01364 12.3051C3.98212 12.2867 3.97959 12.2416 4.00859 12.22C4.09247 12.1571 4.17636 12.0917 4.25645 12.0257C4.27094 12.0136 4.29113 12.0111 4.30816 12.0187C6.92655 13.2142 9.76126 13.2142 12.3488 12.0187C12.3658 12.0105 12.386 12.013 12.4011 12.0251C12.4812 12.0911 12.5651 12.1571 12.6496 12.22C12.6786 12.2416 12.6767 12.2867 12.6452 12.3051C12.2466 12.5381 11.8323 12.7349 11.3965 12.8993C11.3681 12.9101 11.3555 12.9431 11.3694 12.9704C11.6097 13.4358 11.884 13.879 12.1861 14.2993C12.1987 14.317 12.2214 14.3247 12.2422 14.3183C13.5495 13.9139 14.8751 13.3037 16.2436 12.2987C16.2556 12.2898 16.2631 12.2765 16.2644 12.2619C16.598 8.8106 15.7056 5.81265 13.8989 3.15498C13.8944 3.14611 13.8869 3.13975 13.8781 3.13594ZM5.68043 10.4435C4.89211 10.4435 4.24257 9.71978 4.24257 8.83093C4.24257 7.94207 4.87952 7.21831 5.68043 7.21831C6.48763 7.21831 7.13089 7.94843 7.11827 8.83093C7.11827 9.71978 6.48132 10.4435 5.68043 10.4435ZM10.9967 10.4435C10.2084 10.4435 9.55884 9.71978 9.55884 8.83093C9.55884 7.94207 10.1958 7.21831 10.9967 7.21831C11.8039 7.21831 12.4471 7.94843 12.4345 8.83093C12.4345 9.71978 11.8039 10.4435 10.9967 10.4435Z" - fill="var(--colors-scale9)" + fill="hsl(var(--foreground-muted))" /> diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx index 28fa29b18f0..d9de11a73ac 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx @@ -12,10 +12,7 @@ const NavigationMenuHome = () => { return ( {sectionIndex !== 0 && ( -
    +
    )}
    @@ -25,7 +22,7 @@ const NavigationMenuHome = () => {
    @@ -38,7 +35,7 @@ const NavigationMenuHome = () => {
  • {link?.icon && } diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx index 7b30483e631..22dae5161c7 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx @@ -21,10 +21,10 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { icon?: string }) => { return ( -
  • +
  • {icon && } {title} @@ -38,7 +38,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { { } const Divider = () => { - return
    + return
    } const MenuSections = [ @@ -117,7 +117,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { className="w-5 rounded" /> -

    +

    {menu.title ?? currentLevel}

    • diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index 71c9b8ec4ec..0d908c7610b 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -19,7 +19,7 @@ const HeaderLink = React.memo(function HeaderLink(props: { className={[ ' ', !props.title && 'capitalize', - props.url === router.asPath ? 'text-brand' : 'hover:text-brand text-scale-1200', + props.url === router.asPath ? 'text-brand' : 'hover:text-brand text-foreground', ].join(' ')} > {props.title ?? props.id} @@ -54,8 +54,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any <> {props.subItemIndex === 0 && ( <> -
    - +
    + {props.parent.name} @@ -69,7 +69,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'cursor-pointer transition text-sm', activeItem ? 'text-brand font-medium' - : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000', + : 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter', ].join(' ')} parent={props.subItem.parent} > @@ -99,7 +99,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any 'cursor-pointer transition text-sm', subSubItem.url === router.asPath ? 'text-brand' - : 'hover:text-brand text-scale-1000', + : 'hover:text-brand text-foreground-lighter', ].join(' ')} > {subSubItem.name} @@ -125,7 +125,7 @@ const ContentLink = React.memo(function ContentLink(props: any) { 'cursor-pointer transition text-sm', props.url === router.asPath ? 'text-brand' - : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000', + : 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter', ].join(' ')} > {props.icon && ( diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx index b325efb3a91..a02309e0242 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx @@ -62,9 +62,9 @@ const FunctionLink = React.memo(function FunctionLink({ document.getElementById(slug)?.scrollIntoView() }} className={cn( - 'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative', + 'cursor-pointer transition text-sm hover:text-foreground gap-3 relative', isParent ? 'flex justify-between' : 'leading-3', - active ? 'text-brand' : 'text-scale-1000' + active ? 'text-brand' : 'text-foreground-lighter' )} > {icon && {icon}} @@ -122,7 +122,7 @@ const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderL isParent isSubItem /> - + {section.items.map((item) => { return ( { return ( - + {title} ) @@ -180,7 +180,7 @@ const NavigationMenuRefListItems = ({ href="/" className={[ 'flex items-center gap-1 text-xs group mb-3', - 'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ', + 'text-base transition-all duration-200 text-foreground-light hover:text-brand-600 hover:cursor-pointer', ].join(' ')} >
    diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx index 1fd6ddb21c0..191832a2977 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx @@ -83,8 +83,8 @@ const TopNavBar: FC = () => { hover:bg-opacity-100 border transition - border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded - text-lighter + pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded + text-foreground-lighter " >
    @@ -117,7 +117,10 @@ const TopNavBar: FC = () => { rel="noreferrer noopener" className="px-2.5 py-1" > - +
    diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx index 2bbea08e3f0..da98d7bf6b6 100644 --- a/apps/docs/components/Navigation/SideBar.tsx +++ b/apps/docs/components/Navigation/SideBar.tsx @@ -43,20 +43,20 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { return (