Admclamb/update colors#28
Open
admclamb wants to merge 3 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR appears to be a Shadcn/Tailwind visual refresh (colors/spacing/radius) across multiple shared UI primitives, alongside a configuration change in components.json and a font update in the Next.js root layout. It also removes a large set of Lexical editor utilities/plugins/nodes/themes.
Changes:
- Refactors many
src/components/ui/*primitives (class names, Radix wrappers, exports) to match the updated design system. - Updates Shadcn configuration (
components.json) and addsshadcntopackage.jsondependencies. - Updates
src/app/layout.tsxto add the Inter font and apply it at the<html>level. - Deletes substantial Lexical editor implementation under
src/components/editor/**.
Reviewed changes
Copilot reviewed 164 out of 167 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/utils.ts | Formatting-only update; drops semicolons. |
| src/hooks/use-mobile.ts | Formatting-only update; drops semicolons and compacts code. |
| src/components/ui/tooltip.tsx | Tooltip primitive refactor + updated styling classes/exports. |
| src/components/ui/toggle.tsx | Toggle variant styling refactor + Radix wrapper change. |
| src/components/ui/toggle-group.tsx | Adds spacing/orientation API + refactors styling and context. |
| src/components/ui/textarea.tsx | Updates textarea styling classes. |
| src/components/ui/tabs.tsx | Adds list variants + orientation-related styling changes. |
| src/components/ui/table.tsx | Minor styling/class updates + formatting changes. |
| src/components/ui/spinner.tsx | Minor refactor/formatting; keeps accessibility attributes. |
| src/components/ui/sonner.tsx | Adds toast icons + style variables and toastOptions. |
| src/components/ui/skeleton.tsx | Changes skeleton background token and formatting. |
| src/components/ui/separator.tsx | Updates separator styling classes and Radix wrapper import. |
| src/components/ui/scroll-area.tsx | Updates scrollbar styling and orientation handling. |
| src/components/ui/resizable.tsx | Updates react-resizable-panels wrappers/types and handle visuals. |
| src/components/ui/radio-group.tsx | Updates radio-group layout and indicator styling. |
| src/components/ui/popover.tsx | Updates popover styling and adds header/title/description helpers. |
| src/components/ui/label.tsx | Updates label styling and Radix wrapper import. |
| src/components/ui/input.tsx | Updates input styling classes. |
| src/components/ui/empty.tsx | Updates empty-state component styling and variants. |
| src/components/ui/collapsible.tsx | Updates Radix wrapper import + formatting. |
| src/components/ui/checkbox.tsx | Updates checkbox styling and indicator layout. |
| src/components/ui/card.tsx | Adds size prop + refactors card spacing/layout/styling. |
| src/components/ui/button.tsx | Large button variant/size refactor + Radix Slot wrapper change. |
| src/components/ui/breadcrumb.tsx | Updates breadcrumb layout/styling and icon usage. |
| src/components/ui/badge.tsx | Refactors badge variants (removes success, adds ghost/link) + Slot wrapper. |
| src/components/ui/avatar.tsx | Adds sizing + badge/group helpers; refactors styling. |
| src/components/ui/alert.tsx | Refactors alert styling and adds AlertAction. |
| src/components/ui/accordion.tsx | Accordion styling refactor + trigger icon behavior update. |
| src/components/editor/utils/url.ts | Deleted Lexical editor URL sanitization/validation utilities. |
| src/components/editor/utils/swipe.ts | Deleted swipe gesture utilities. |
| src/components/editor/utils/set-floating-elem-position.ts | Deleted floating element positioning utility. |
| src/components/editor/utils/set-floating-elem-position-for-link-editor.ts | Deleted link editor positioning utility. |
| src/components/editor/utils/guard.ts | Deleted DOM guard helper. |
| src/components/editor/utils/get-selected-node.ts | Deleted selection helper for Lexical. |
| src/components/editor/utils/get-dom-range-rect.ts | Deleted DOM selection rect helper. |
| src/components/editor/utils/doc-serialization.ts | Deleted doc hash serialization helpers. |
| src/components/editor/transformers/markdown-tweet-transformer.ts | Deleted tweet markdown transformer. |
| src/components/editor/transformers/markdown-table-transformer.ts | Deleted markdown table transformer. |
| src/components/editor/transformers/markdown-image-transformer.ts | Deleted markdown image transformer. |
| src/components/editor/transformers/markdown-hr-transformer.ts | Deleted markdown HR transformer. |
| src/components/editor/transformers/markdown-emoji-transformer.ts | Deleted markdown emoji transformer. |
| src/components/editor/themes/editor-theme.css | Deleted editor theme CSS. |
| src/components/editor/shared/warn-only-once.ts | Deleted dev-only warning helper. |
| src/components/editor/shared/use-layout-effect.ts | Deleted React layout-effect compatibility helper. |
| src/components/editor/shared/simple-diff-with-cursor.ts | Deleted diff helper. |
| src/components/editor/shared/react-test-utils.ts | Deleted React 19 act compatibility helper. |
| src/components/editor/shared/react-patches.ts | Deleted React startTransition compatibility helper. |
| src/components/editor/shared/normalize-class-names.ts | Deleted classname normalization helper. |
| src/components/editor/shared/invariant.ts | Deleted Lexical invariant helper. |
| src/components/editor/shared/environment.ts | Deleted environment detection utilities. |
| src/components/editor/shared/caret-from-point.ts | Deleted caret positioning helper. |
| src/components/editor/shared/can-use-dom.ts | Deleted DOM availability helper. |
| src/components/editor/plugins/typing-pref-plugin.tsx | Deleted typing performance plugin. |
| src/components/editor/plugins/toolbar/toolbar-plugin.tsx | Deleted toolbar provider/plugin. |
| src/components/editor/plugins/toolbar/subsuper-toolbar-plugin.tsx | Deleted sub/superscript toolbar plugin. |
| src/components/editor/plugins/toolbar/link-toolbar-plugin.tsx | Deleted link toolbar plugin. |
| src/components/editor/plugins/toolbar/history-toolbar-plugin.tsx | Deleted undo/redo toolbar plugin. |
| src/components/editor/plugins/toolbar/font-size-toolbar-plugin.tsx | Deleted font size toolbar plugin. |
| src/components/editor/plugins/toolbar/font-format-toolbar-plugin.tsx | Deleted format toggles toolbar plugin. |
| src/components/editor/plugins/toolbar/font-family-toolbar-plugin.tsx | Deleted font family toolbar plugin. |
| src/components/editor/plugins/toolbar/font-color-toolbar-plugin.tsx | Deleted font color toolbar plugin. |
| src/components/editor/plugins/toolbar/font-background-toolbar-plugin.tsx | Deleted background color toolbar plugin. |
| src/components/editor/plugins/toolbar/element-format-toolbar-plugin.tsx | Deleted alignment/indent toolbar plugin. |
| src/components/editor/plugins/toolbar/code-language-toolbar-plugin.tsx | Deleted code language selector toolbar plugin. |
| src/components/editor/plugins/toolbar/clear-formatting-toolbar-plugin.tsx | Deleted clear-formatting toolbar action. |
| src/components/editor/plugins/toolbar/block-insert/insert-table.tsx | Deleted insert-table toolbar item. |
| src/components/editor/plugins/toolbar/block-insert/insert-image.tsx | Deleted insert-image toolbar item. |
| src/components/editor/plugins/toolbar/block-insert/insert-horizontal-rule.tsx | Deleted HR insert toolbar item. |
| src/components/editor/plugins/toolbar/block-insert/insert-embeds.tsx | Deleted embed insert toolbar items. |
| src/components/editor/plugins/toolbar/block-insert/insert-columns-layout.tsx | Deleted columns layout insert toolbar item. |
| src/components/editor/plugins/toolbar/block-insert-plugin.tsx | Deleted “Insert” block dropdown plugin. |
| src/components/editor/plugins/toolbar/block-format/format-quote.tsx | Deleted quote format option. |
| src/components/editor/plugins/toolbar/block-format/format-paragraph.tsx | Deleted paragraph format option. |
| src/components/editor/plugins/toolbar/block-format/format-numbered-list.tsx | Deleted numbered list format option. |
| src/components/editor/plugins/toolbar/block-format/format-heading.tsx | Deleted heading format options. |
| src/components/editor/plugins/toolbar/block-format/format-code-block.tsx | Deleted code-block format option. |
| src/components/editor/plugins/toolbar/block-format/format-check-list.tsx | Deleted check list format option. |
| src/components/editor/plugins/toolbar/block-format/format-bulleted-list.tsx | Deleted bulleted list format option. |
| src/components/editor/plugins/toolbar/block-format/block-format-data.tsx | Deleted block-format metadata mapping. |
| src/components/editor/plugins/toolbar/block-format-toolbar-plugin.tsx | Deleted block format dropdown plugin. |
| src/components/editor/plugins/table-plugin.tsx | Deleted Lexical table plugin implementation. |
| src/components/editor/plugins/tab-focus-plugin.tsx | Deleted tab-focus plugin. |
| src/components/editor/plugins/picker/table-picker-plugin.tsx | Deleted table picker options. |
| src/components/editor/plugins/picker/quote-picker-plugin.tsx | Deleted quote picker option. |
| src/components/editor/plugins/picker/paragraph-picker-plugin.tsx | Deleted paragraph picker option. |
| src/components/editor/plugins/picker/numbered-list-picker-plugin.tsx | Deleted numbered list picker option. |
| src/components/editor/plugins/picker/image-picker-plugin.tsx | Deleted image picker option. |
| src/components/editor/plugins/picker/heading-picker-plugin.tsx | Deleted heading picker options. |
| src/components/editor/plugins/picker/embeds-picker-plugin.tsx | Deleted embeds picker options. |
| src/components/editor/plugins/picker/divider-picker-plugin.tsx | Deleted divider picker option. |
| src/components/editor/plugins/picker/component-picker-option.tsx | Deleted component picker option class. |
| src/components/editor/plugins/picker/columns-layout-picker-plugin.tsx | Deleted columns-layout picker option. |
| src/components/editor/plugins/picker/code-picker-plugin.tsx | Deleted code picker option. |
| src/components/editor/plugins/picker/check-list-picker-plugin.tsx | Deleted check list picker option. |
| src/components/editor/plugins/picker/bulleted-list-picker-plugin.tsx | Deleted bulleted list picker option. |
| src/components/editor/plugins/picker/alignment-picker-plugin.tsx | Deleted alignment picker options. |
| src/components/editor/plugins/list-max-indent-level-plugin.tsx | Deleted list max-indent enforcement plugin. |
| src/components/editor/plugins/link-plugin.tsx | Deleted link plugin wrapper. |
| src/components/editor/plugins/emojis-plugin.tsx | Deleted emoji substitution plugin. |
| src/components/editor/plugins/emoji-picker-plugin.tsx | Deleted emoji picker typeahead plugin. |
| src/components/editor/plugins/embeds/youtube-plugin.tsx | Deleted YouTube embed plugin. |
| src/components/editor/plugins/embeds/twitter-plugin.tsx | Deleted Twitter embed plugin. |
| src/components/editor/plugins/draggable-block-plugin.tsx | Deleted draggable block plugin. |
| src/components/editor/plugins/drag-drop-paste-plugin.tsx | Deleted drag/drop paste plugin. |
| src/components/editor/plugins/context-menu-plugin.tsx | Deleted editor context menu plugin. |
| src/components/editor/plugins/component-picker-menu-plugin.tsx | Deleted slash command picker plugin. |
| src/components/editor/plugins/code-highlight-plugin.tsx | Deleted code highlighting plugin. |
| src/components/editor/plugins/code-action-menu-plugin.tsx | Deleted code action menu plugin. |
| src/components/editor/plugins/auto-link-plugin.tsx | Deleted auto-linking plugin. |
| src/components/editor/plugins/actions/tree-view-plugin.tsx | Deleted debug tree view plugin. |
| src/components/editor/plugins/actions/speech-to-text-plugin.tsx | Deleted speech-to-text plugin. |
| src/components/editor/plugins/actions/share-content-plugin.tsx | Deleted share-by-URL-hash plugin. |
| src/components/editor/plugins/actions/max-length-plugin.tsx | Deleted max-length plugin. |
| src/components/editor/plugins/actions/markdown-toggle-plugin.tsx | Deleted markdown toggle plugin. |
| src/components/editor/plugins/actions/import-export-plugin.tsx | Deleted import/export plugin. |
| src/components/editor/plugins/actions/edit-mode-toggle-plugin.tsx | Deleted read-only toggle plugin. |
| src/components/editor/plugins/actions/counter-character-plugin.tsx | Deleted character/word counter plugin. |
| src/components/editor/plugins/actions/clear-editor-plugin.tsx | Deleted clear editor action plugin. |
| src/components/editor/plugins/actions/character-limit-plugin.tsx | Deleted character limit plugin wrapper. |
| src/components/editor/plugins/actions/actions-plugin.tsx | Deleted actions wrapper component. |
| src/components/editor/nodes/mention-node.ts | Deleted Lexical mention node. |
| src/components/editor/nodes/layout-item-node.tsx | Deleted Lexical layout item node. |
| src/components/editor/nodes/layout-container-node.tsx | Deleted Lexical layout container node. |
| src/components/editor/nodes/keyword-node.tsx | Deleted Lexical keyword node. |
| src/components/editor/nodes/emoji-node.tsx | Deleted Lexical emoji node. |
| src/components/editor/nodes/embeds/youtube-node.tsx | Deleted Lexical YouTube embed node. |
| src/components/editor/nodes/embeds/tweet-node.tsx | Deleted Lexical tweet embed node. |
| src/components/editor/nodes/autocomplete-node.tsx | Deleted Lexical autocomplete node. |
| src/components/editor/editor.tsx | Deleted editor entrypoint component. |
| src/components/editor/editor-ui/content-editable.tsx | Deleted editor ContentEditable wrapper. |
| src/components/editor/editor-ui/colorpicker.tsx | Deleted editor color picker UI. |
| src/components/editor/editor-ui/code-button.tsx | Deleted code copy button UI. |
| src/components/editor/editor-tab.tsx | Deleted editor tab layout. |
| src/components/editor/editor-panel-header.tsx | Deleted editor panel header. |
| src/components/editor/editor-hooks/use-update-toolbar.ts | Deleted toolbar update hook. |
| src/components/editor/editor-hooks/use-report.ts | Deleted reporting hook. |
| src/components/editor/editor-hooks/use-modal.tsx | Deleted editor modal hook. |
| src/components/editor/editor-hooks/use-debounce.ts | Deleted debounce hook. |
| src/components/editor/context/toolbar-context.tsx | Deleted toolbar context. |
| src/app/layout.tsx | Adds Inter font and applies it on <html> via cn. |
| package.json | Adds shadcn dependency. |
| components.json | Changes Shadcn style/baseColor and extends registries/settings. |
Comment on lines
+1
to
+5
| import { clsx, type ClassValue } from "clsx" | ||
| import { twMerge } from "tailwind-merge" | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)); | ||
| return twMerge(clsx(inputs)) |
Comment on lines
+1
to
+6
| import * as React from "react" | ||
|
|
||
| const MOBILE_BREAKPOINT = 768; | ||
| const MOBILE_BREAKPOINT = 768 | ||
|
|
||
| export function useIsMobile() { | ||
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>( | ||
| undefined | ||
| ); | ||
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) |
| import { AppProvider } from "./provider"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const inter = Inter({subsets:['latin'],variable:'--font-sans'}); |
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "new-york", | ||
| "style": "radix-nova", |
Comment on lines
+1
to
9
| import * as React from "react" | ||
| import { cva, type VariantProps } from "class-variance-authority" | ||
| import { Slot } from "radix-ui" | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const buttonVariants = cva( | ||
| "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", | ||
| "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", | ||
| { |
Comment on lines
22
to
47
| function ToggleGroup({ | ||
| className, | ||
| variant, | ||
| size, | ||
| spacing = 0, | ||
| orientation = "horizontal", | ||
| children, | ||
| ...props | ||
| }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & | ||
| VariantProps<typeof toggleVariants>) { | ||
| VariantProps<typeof toggleVariants> & { | ||
| spacing?: number | ||
| orientation?: "horizontal" | "vertical" | ||
| }) { | ||
| return ( | ||
| <ToggleGroupPrimitive.Root | ||
| data-slot="toggle-group" | ||
| data-variant={variant} | ||
| data-size={size} | ||
| data-spacing={spacing} | ||
| data-orientation={orientation} | ||
| style={{ "--gap": spacing } as React.CSSProperties} | ||
| className={cn( | ||
| "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", | ||
| "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", | ||
| className | ||
| )} | ||
| {...props} |
Comment on lines
9
to
23
| function Tabs({ | ||
| className, | ||
| orientation = "horizontal", | ||
| ...props | ||
| }: React.ComponentProps<typeof TabsPrimitive.Root>) { | ||
| return ( | ||
| <TabsPrimitive.Root | ||
| data-slot="tabs" | ||
| className={cn("flex flex-col gap-2", className)} | ||
| data-orientation={orientation} | ||
| className={cn( | ||
| "group/tabs flex gap-2 data-horizontal:flex-col", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.