binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5602] feat: new design system (#8220)

Browse source 
* chore: init tailwind v4

* chore: update all configs

* chore: add source to parse monorepo packages

* chore: combine all css files

* feat: added extended colors

* chore: update typography

* chore: update extended color var names

* refactor: remove initial spacing variable and update dark mode selector

* chore: update css files

* chore: update animations

* chore: remove spacing tokens

* fix: external css files

* chore: update tailwind-merge version

* chore: update font family

* chore: added brief agents.md and story for new design system

* chore: enhance design system documentation with rare exceptions for visual separation

* chore: add fontsource package for typography

* chore: material symbols font added

* chore: update shadow default

* chore: add stroke and outline theme vars

* chore: update ring and fill colors

* chore: overwrite tailwind typography tokens

* chore: add high contrast mode tokens

* chore: update scrollbar colors

* chore: backward compatibility for buttons and placeholders

* chore: add priority colors

* chore: update urgent priority color

* chore: update plan colors

* chore: add missing utility class

* chore: update height and padding classes

* chore: update label colors

* chore: add missing utlity

* chore: add typography plugin to space app

* chore: replace existing classNames with new design system tokens #8244 (#8278)

* chore: update border colors

* chore: update all borders

* chore: update text colors

* chore: update css variables

* chore: update font sizes and weights

* chore: update bg colors

* chore: sync changes

* fix: uncomment spacing-1200 variable in variables.css

* chore: update primary colors

* refactor: updated border to border-subtle

* refactor: update various components and improve UI consistency across the application

* updated classnames

* updated classnames

* refactor: update color-related class names to use new design system variables for consistency

* chore: default automations

* chore: update text sizes

* chore: home and power k

* chore: home and power k

* chore: replace ui package button components

* chore: update text sizes

* chore: updated issue identifier (#8275)

* refactor: top navigation and sidebar design token (#8276)

* chore: update all button components (#8277)

* chore: new button component

* chore: update existing buttons

* chore: overwrite tailwind typography tokens

* fix: twMerge config + fixed cn instances

* refactor: toast design token updated (#8279)

* chore: update existing buttons

* chore: tooltip design token updatged (#8280)

* chore: moved cn utility to propel (#8281)

* chore: update space app UI (#8285)

* chore; update space app filters component

* fix: button whitespace wrap

* chore: space app votes

* chore: update dropdown components

* refactor: auth, onboarding, sidebar, and common component design token migration (#8291)

* chore: checkbox component design token updated

* chore: indicator and oauth component design token updated

* chore: sidebar design token updated

* chore: auth and onboarding design token updated

* chore: update divider color

* style: update background colors and hover effects across list components

* fix: tailwind merge

* refactor: toggle switch design token migration and header utility classname added (#8295)

* chore: toggle component design token updated

* chore: h-header utility class added

* chore: updated color tokens for work item detail page (#8296)

* chore: update react-day-picker UI

* refactor: update button sizes and styles in filters components

* refactor: breadcrumbs design token updated (#8297)

* chore: update priority icon colors

* refactor: updated layout variables

* chore: update plan card primary CTA

* Chore update editor design system (#8299)

* refactor: update styles for callout, color selector, logo selector, and image uploader

* refactor:fix image

* chore: update settings UI

* chore: updated notifications color and size tokens (#8302)

* chore: update sm button border radius

* fix: logo renderer

* chore: icon button component

* chore: remove deprecated classes

* chore: remove deprecated classes

* chore: update editor list spacing

* fix: icon button size

* chore: improvements (#8309)

* chore: update cycles and modules pages

* refactor: update background styles across various components to use new design system colors

* fix: button type errors

* chore: update modals design system (#8310)

* refactor: callout bg

* refactor: code  bg

* refactor: modal size and variant

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

* chore: update next-themes

* design: update billing and plans component styles and remove unused utility functions (#8313)

* refactor: empty state design token migration and improvements (#8315)

* fix: profile page

* refactor: tabs design token updated (#8316)

* chore: updated buttons and tokens for work items (#8317)

* fix: adjust trial button spacing in checkout modal

* chore: update add button hover state

* fix: type error (#8318)

* fix: type error

* chore: code refactor

* refactor: update button sizes and background styles in rich filters components

* refactor: update editor bg

* refactor: enhance Gantt chart sidebar functionality and styling

- Removed unused  prop from .
- Updated  to include new props for better block management and scrolling behavior.
- Improved auto-scroll functionality for Gantt chart items.
- Adjusted styles in  component for consistent design.

* regression: gantt design

* chore: new badge component

* fix: favorite star

* chore: update backgroung, typography and button sizes across workspace settings general and members pages

* fix: header button sizes

* fix: emoji icon logo (#8323)

* more fixes

* chore: update settings sidebar

* refactor: avatar component

* chore: updated work item detail sidebar (#8327)

* refactor: update link preview

* fix: work item property dropdowns

* fix: dropdown buttons border radius

* chore: update power k translation

* chore: updated profile activity design (#8328)

* chore: update settings pages

* chore: update work item sidebar alignments (#8330)

* refactor: admin design system

* chore: update page header

---------

Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com>
Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: gakshita <akshitagoyal1516@gmail.com>
Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com>
Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com>
Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>

* fix: formatting

* reexport types

* fix: lint error

---------

Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com>
Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: gakshita <akshitagoyal1516@gmail.com>
Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com>
Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com>
Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal 2025-12-12 20:50:14 +05:30 • committed by GitHub
parent d86418aad8
commit 22339b9786
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1342 changed files with 14227 additions and 15119 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/editor/postcss.config.js
View file

@ -1,9 +1,3 @@
// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
import postcssConfig from "@plane/tailwind-config/postcss.config.js";
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
export default postcssConfig;

12
packages/editor/src/core/components/links/link-edit-view.tsx
View file

@ -17,11 +17,11 @@ type InputViewProps = {
function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
return (
<div className="flex flex-col gap-1">
<label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
<label className="inline-block font-semibold text-11 text-placeholder">{label}</label>
<input
placeholder={placeholder}
onClick={(e) => e.stopPropagation()}
className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm border border-custom-border-300 rounded-md p-2"
className="w-[280px] outline-none bg-layer-1 text-primary text-13 border border-strong rounded-md p-2"
value={value}
onChange={(e) => onChange(e.target.value)}
autoFocus={autoFocus}
@ -132,7 +132,7 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
return (
<div
onKeyDown={handleKeyDown}
className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2 animate-in fade-in translate-y-1"
className="shadow-md rounded-sm p-2 flex flex-col gap-3 bg-layer-1 border-subtle border-2 animate-in fade-in translate-y-1"
style={{
transition: "all 0.1s cubic-bezier(.55, .085, .68, .53)",
}}
@ -140,10 +140,10 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
>
<InputView label="URL" placeholder="Enter or paste URL" value={localUrl} onChange={setLocalUrl} autoFocus />
<InputView label="Text" placeholder="Enter Text to display" value={localText} onChange={handleTextChange} />
<div className="mb-1 bg-custom-border-300 h-[1px] w-full gap-2" />
<div className="flex text-sm text-custom-text-800 gap-2 items-center">
<div className="mb-1 bg-strong h-[1px] w-full gap-2" />
<div className="flex text-13 text-secondary gap-2 items-center">
<Link2Off size={14} className="inline-block" />
<button onClick={removeLink} className="cursor-pointer hover:text-custom-text-400 transition-colors">
<button onClick={removeLink} className="cursor-pointer hover:text-placeholder transition-colors">
Remove Link
</button>
</div>

8
packages/editor/src/core/components/links/link-preview.tsx
View file

@ -28,22 +28,22 @@ export function LinkPreview({
transition: "all 0.2s cubic-bezier(.55, .085, .68, .53)",
}}
>
<div className="shadow-md items-center rounded p-2 flex gap-3 bg-custom-background-90 border-custom-border-100 border-2 text-custom-text-300 text-xs">
<div className="shadow-md items-center rounded-sm p-2 flex gap-3 bg-layer-1 border-subtle border-2 text-tertiary text-11">
<GlobeIcon size={14} className="inline-block" />
<p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
<div className="flex gap-2">
<button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-custom-text-100 transition-colors">
<button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-primary transition-colors">
<Copy size={14} className="inline-block" />
</button>
{editor.isEditable && (
<>
<button
onClick={() => switchView("LinkEditView")}
className="cursor-pointer hover:text-custom-text-100 transition-colors"
className="cursor-pointer hover:text-primary transition-colors"
>
<PencilIcon size={14} className="inline-block" />
</button>
<button onClick={removeLink} className="cursor-pointer hover:text-custom-text-100 transition-colors">
<button onClick={removeLink} className="cursor-pointer hover:text-primary transition-colors">
<Link2Off size={14} className="inline-block" />
</button>
</>

4
packages/editor/src/core/components/menus/block-menu.tsx
View file

@ -216,7 +216,7 @@ export function BlockMenu(props: Props) {
zIndex: 100,
}}
className={cn(
"max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-custom-border-200 bg-custom-background-100 p-1.5 shadow-custom-shadow-rg",
"max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-custom-shadow-rg",
"transition-all duration-300 transform origin-top-right",
isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
)}
@ -229,7 +229,7 @@ export function BlockMenu(props: Props) {
<button
key={item.key}
type="button"
className="flex w-full items-center gap-1.5 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-90"
className="flex w-full items-center gap-1.5 truncate rounded-sm px-1 py-1.5 text-11 text-secondary hover:bg-layer-1"
onClick={(e) => {
item.onClick(e);
e.preventDefault();

4
packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
View file

@ -69,9 +69,9 @@ export function TextAlignmentSelector(props: Props) {
item.command();
}}
className={cn(
"size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
"size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
{
"bg-custom-background-80 text-custom-text-100": item.isActive(),
"bg-layer-1 text-primary": item.isActive(),
}
)}
>

27
packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
View file

@ -30,25 +30,22 @@ export function BubbleMenuColorSelector(props: Props) {
classNames={{
buttonContainer: "h-full",
button:
"flex items-center gap-1 h-full whitespace-nowrap px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded transition-colors",
"flex items-center gap-1 h-full whitespace-nowrap px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm transition-colors",
}}
menuButton={
<>
<span>Color</span>
<span
className={cn(
"flex-shrink-0 size-6 grid place-items-center rounded border-[0.5px] border-custom-border-300",
{
"bg-custom-background-100": !activeBackgroundColor,
}
)}
className={cn("flex-shrink-0 size-6 grid place-items-center rounded-sm border-[0.5px] border-strong", {
"bg-surface-1": !activeBackgroundColor,
})}
style={{
backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
}}
>
<ALargeSmall
className={cn("size-3.5", {
"text-custom-text-100": !activeTextColor,
"text-primary": !activeTextColor,
})}
style={{
color: activeTextColor ? activeTextColor.textColor : "inherit",
@ -61,15 +58,15 @@ export function BubbleMenuColorSelector(props: Props) {
getFloatingProps={getFloatingProps}
getReferenceProps={getReferenceProps}
>
<section className="mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 space-y-2 shadow-custom-shadow-rg">
<section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-custom-shadow-rg">
<div className="space-y-1.5">
<p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
<p className="text-11 text-tertiary font-semibold">Text colors</p>
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
style={{
backgroundColor: color.textColor,
}}
@ -78,7 +75,7 @@ export function BubbleMenuColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
onClick={() => TextColorItem(editor).command({ color: undefined })}
>
<Ban className="size-4" />
@ -86,13 +83,13 @@ export function BubbleMenuColorSelector(props: Props) {
</div>
</div>
<div className="space-y-1.5">
<p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
<p className="text-11 text-tertiary font-semibold">Background colors</p>
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
style={{
backgroundColor: color.backgroundColor,
}}
@ -101,7 +98,7 @@ export function BubbleMenuColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
onClick={() => BackgroundColorItem(editor).command({ color: undefined })}
>
<Ban className="size-4" />

18
packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
View file

@ -46,10 +46,10 @@ export function BubbleMenuLinkSelector(props: Props) {
classNames={{
buttonContainer: "h-full",
button: cn(
"h-full flex items-center gap-1 px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded whitespace-nowrap transition-colors",
"h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
{
"bg-custom-background-80": context.open,
"text-custom-text-100": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
"bg-layer-1": context.open,
"text-primary": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
}
),
}}
@ -63,9 +63,9 @@ export function BubbleMenuLinkSelector(props: Props) {
}
options={options}
>
<div className="w-60 mt-1 rounded-md bg-custom-background-100 shadow-custom-shadow-rg">
<div className="w-60 mt-1 rounded-md bg-surface-1 shadow-custom-shadow-rg">
<div
className={cn("flex rounded border-[0.5px] border-custom-border-300 transition-colors", {
className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
"border-red-500": error,
})}
>
@ -74,7 +74,7 @@ export function BubbleMenuLinkSelector(props: Props) {
type="url"
placeholder="Enter or paste a link"
onClick={(e) => e.stopPropagation()}
className="flex-1 border-r-[0.5px] border-custom-border-300 bg-custom-background-100 py-2 px-1.5 text-xs outline-none placeholder:text-custom-text-400 rounded"
className="flex-1 border-r-[0.5px] border-strong bg-surface-1 py-2 px-1.5 text-11 outline-none placeholder:text-placeholder rounded-sm"
defaultValue={editor.getAttributes("link").href || ""}
onKeyDown={(e) => {
setError(false);
@ -89,7 +89,7 @@ export function BubbleMenuLinkSelector(props: Props) {
{editor.getAttributes("link").href ? (
<button
type="button"
className="grid place-items-center rounded-sm p-1 text-red-500 hover:bg-red-500/20 transition-all"
className="grid place-items-center rounded-xs p-1 text-red-500 hover:bg-red-500/20 transition-all"
onClick={(e) => {
unsetLinkEditor(editor);
e.stopPropagation();
@ -101,7 +101,7 @@ export function BubbleMenuLinkSelector(props: Props) {
) : (
<button
type="button"
className="h-full aspect-square grid place-items-center p-1 rounded-sm text-custom-text-300 hover:bg-custom-background-80 transition-all"
className="h-full aspect-square grid place-items-center p-1 rounded-xs text-tertiary hover:bg-layer-1 transition-all"
onClick={(e) => {
e.stopPropagation();
handleLinkSubmit();
@ -112,7 +112,7 @@ export function BubbleMenuLinkSelector(props: Props) {
)}
</div>
{error && (
<p className="text-xs text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
<p className="text-11 text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
Please enter a valid URL
</p>
)}

12
packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
View file

@ -59,9 +59,9 @@ export function BubbleMenuNodeSelector(props: Props) {
classNames={{
buttonContainer: "h-full",
button: cn(
"h-full flex items-center gap-1 px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded whitespace-nowrap transition-colors",
"h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
{
"bg-custom-background-80": context.open,
"bg-layer-1": context.open,
}
),
}}
@ -75,7 +75,7 @@ export function BubbleMenuNodeSelector(props: Props) {
getFloatingProps={getFloatingProps}
getReferenceProps={getReferenceProps}
>
<section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg">
<section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg">
{items.map((item) => (
<button
key={item.name}
@ -86,9 +86,9 @@ export function BubbleMenuNodeSelector(props: Props) {
e.stopPropagation();
}}
className={cn(
"flex items-center justify-between rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80",
"flex items-center justify-between rounded-sm px-1 py-1.5 text-13 text-secondary hover:bg-layer-1",
{
"bg-custom-background-80": activeItem.name === item.name,
"bg-layer-1": activeItem.name === item.name,
}
)}
>
@ -96,7 +96,7 @@ export function BubbleMenuNodeSelector(props: Props) {
<item.icon className="size-3 flex-shrink-0" />
<span>{item.name}</span>
</div>
{activeItem.name === item.name && <Check className="size-3 text-custom-text-300 flex-shrink-0" />}
{activeItem.name === item.name && <Check className="size-3 text-tertiary flex-shrink-0" />}
</button>
))}
</section>

6
packages/editor/src/core/components/menus/bubble-menu/root.tsx
View file

@ -186,7 +186,7 @@ export function EditorBubbleMenu(props: Props) {
{!isSelecting && (
<div
ref={menuRef}
className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg overflow-x-scroll horizontal-scrollbar scrollbar-xs"
className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-custom-shadow-rg overflow-x-scroll horizontal-scrollbar scrollbar-xs"
>
<div className="px-2">
<BubbleMenuNodeSelector editor={editor} />
@ -211,9 +211,9 @@ export function EditorBubbleMenu(props: Props) {
e.stopPropagation();
}}
className={cn(
"size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
"size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
{
"bg-custom-background-80 text-custom-text-100": editorState[item.key],
"bg-layer-1 text-primary": editorState[item.key],
}
)}
>

4
packages/editor/src/core/extensions/callout/block.tsx
View file

@ -1,6 +1,6 @@
import type { NodeViewProps } from "@tiptap/react";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import React, { useState } from "react";
import { useState } from "react";
// constants
import { COLORS_LIST } from "@/constants/common";
// local components
@ -29,7 +29,7 @@ export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
return (
<NodeViewWrapper
className="editor-callout-component group/callout-node relative bg-custom-background-90 rounded-lg text-custom-text-100 p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
className="editor-callout-component group/callout-node relative bg-layer-2 rounded-lg text-primary p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
style={{
backgroundColor: activeBackgroundColor,
}}

12
packages/editor/src/core/extensions/callout/color-selector.tsx
View file

@ -36,24 +36,24 @@ export function CalloutBlockColorSelector(props: Props) {
e.stopPropagation();
}}
className={cn(
"flex items-center gap-1 h-full whitespace-nowrap py-1 px-2.5 text-sm font-medium text-custom-text-300 hover:bg-white/10 active:bg-custom-background-80 rounded transition-colors",
"flex items-center gap-1 h-full whitespace-nowrap py-1 px-2.5 text-13 font-medium text-tertiary hover:bg-layer-1-hover active:bg-layer-1-active rounded-sm transition-colors",
{
"bg-white/10": isOpen,
"bg-layer-1": isOpen,
}
)}
disabled={disabled}
>
<span>Color</span>
<span className="text-12">Color</span>
<ChevronDownIcon className="flex-shrink-0 size-3" />
</button>
{isOpen && (
<section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
<section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
style={{
backgroundColor: color.backgroundColor,
}}
@ -62,7 +62,7 @@ export function CalloutBlockColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1-hover transition-colors"
onClick={() => handleColorSelect(null)}
>
<Ban className="size-4" />

4
packages/editor/src/core/extensions/callout/logo-selector.tsx
View file

@ -37,8 +37,8 @@ export function CalloutBlockLogoSelector(props: Props) {
isOpen={isOpen}
handleToggle={handleOpen}
className="flex-shrink-0 grid place-items-center"
buttonClassName={cn("flex-shrink-0 size-8 grid place-items-center rounded-lg", {
"hover:bg-white/10": !disabled,
buttonClassName={cn("flex-shrink-0 size-8 grid place-items-center rounded-lg text-primary", {
"hover:bg-layer-1-hover": !disabled,
})}
label={<Logo logo={logoValue} size={18} type="lucide" />}
onChange={(val) => {

2
packages/editor/src/core/extensions/code-inline/index.tsx
View file

@ -35,7 +35,7 @@ export const CustomCodeInlineExtension = Mark.create<InlineCodeOptions>({
return {
HTMLAttributes: {
class:
"rounded bg-custom-background-80 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200",
"rounded-sm bg-layer-1 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-subtle",
spellcheck: "false",
},
};

6
packages/editor/src/core/extensions/code/code-block-node-view.tsx
View file

@ -38,7 +38,7 @@ export function CodeBlockComponent({ node }: Props) {
<button
type="button"
className={cn(
"group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-custom-background-80 border border-custom-border-200 transition duration-150 ease-in-out backdrop-blur-sm",
"group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-2 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
{
"bg-green-500/30 hover:bg-green-500/30 active:bg-green-500/30": copied,
}
@ -48,12 +48,12 @@ export function CodeBlockComponent({ node }: Props) {
{copied ? (
<CheckIcon className="h-3 w-3 text-green-500" strokeWidth={3} />
) : (
<CopyIcon className="h-3 w-3 text-custom-text-300 group-hover/button:text-custom-text-100" />
<CopyIcon className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
)}
</button>
</Tooltip>
<pre className="bg-custom-background-90 text-custom-text-100 rounded-lg p-4 my-2">
<pre className="bg-layer-2 text-primary rounded-lg p-4 my-2">
<NodeViewContent as="code" className="whitespace-pre-wrap" />
</pre>
</NodeViewWrapper>

11
packages/editor/src/core/extensions/custom-image/components/block.tsx
View file

@ -234,10 +234,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
}}
>
{showImageLoader && (
<div
className="animate-pulse bg-custom-background-80 rounded-md"
style={{ width: size.width, height: size.height }}
/>
<div className="animate-pulse bg-layer-2 rounded-md" style={{ width: size.width, height: size.height }} />
)}
<img
ref={imageRef}
@ -307,13 +304,13 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
/>
)}
{selected && displayedImageSrc === resolvedImageSrc && (
<div className="absolute inset-0 size-full bg-custom-primary-500/30 pointer-events-none" />
<div className="absolute inset-0 size-full bg-accent-primary/30 pointer-events-none" />
)}
{showImageResizer && (
<>
<div
className={cn(
"absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
"absolute inset-0 border-2 border-accent-strong pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
{
"opacity-100": isResizing,
"opacity-0 group-hover/image-component:opacity-100": !isResizing,
@ -322,7 +319,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
/>
<div
className={cn(
"absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white transition-opacity duration-100 ease-in-out",
"absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-accent-primary border-2 border-white transition-opacity duration-100 ease-in-out",
{
"opacity-100 pointer-events-auto": isResizing,
"opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":

6
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
View file

@ -34,7 +34,7 @@ export function ImageAlignmentAction(props: Props) {
<Tooltip disabled={isTouchDevice} tooltipContent="Align">
<button
type="button"
className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
className="h-full flex items-center gap-1 text-on-color/60 hover:text-on-color transition-colors"
onClick={() => setIsDropdownOpen((prev) => !prev)}
>
{activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
@ -42,12 +42,12 @@ export function ImageAlignmentAction(props: Props) {
</button>
</Tooltip>
{isDropdownOpen && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded">
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded-sm">
{IMAGE_ALIGNMENT_OPTIONS.map((option) => (
<Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
<button
type="button"
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
onClick={() => {
handleChange(option.value);
setIsDropdownOpen(false);

2
packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
View file

@ -14,7 +14,7 @@ export function ImageDownloadAction(props: Props) {
<button
type="button"
onClick={() => window.open(src, "_blank")}
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
aria-label="Download image"
>
<Download className="size-3" />

12
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
View file

@ -213,7 +213,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
className="absolute top-10 right-10 size-8 grid place-items-center"
aria-label="Close image viewer"
>
<CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
<CloseIcon className="size-8 text-on-color/60 hover:text-on-color transition-colors" />
</button>
<img
ref={setImageRef}
@ -242,13 +242,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("decrease");
}}
className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
className="size-6 grid place-items-center text-on-color/60 hover:text-on-color disabled:text-on-color/30 transition-colors duration-200"
disabled={magnification <= MIN_ZOOM}
aria-label="Zoom out"
>
<Minus className="size-4" />
</button>
<span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
<span className="text-13 w-12 text-center text-on-color">{Math.round(100 * magnification)}%</span>
<button
type="button"
onClick={(e) => {
@ -258,7 +258,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("increase");
}}
className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
className="size-6 grid place-items-center text-on-color/60 hover:text-on-color disabled:text-on-color/30 transition-colors duration-200"
disabled={magnification >= MAX_ZOOM}
aria-label="Zoom in"
>
@ -269,7 +269,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button
type="button"
onClick={() => window.open(downloadSrc, "_blank")}
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
className="flex-shrink-0 size-8 grid place-items-center text-on-color/60 hover:text-on-color transition-colors duration-200"
aria-label="Download image"
>
<Download className="size-4" />
@ -279,7 +279,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button
type="button"
onClick={() => window.open(src, "_blank")}
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
className="flex-shrink-0 size-8 grid place-items-center text-on-color/60 hover:text-on-color transition-colors duration-200"
aria-label="Open image in new tab"
>
<ExternalLink className="size-4" />

2
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
View file

@ -47,7 +47,7 @@ export function ImageFullScreenActionRoot(props: Props) {
e.stopPropagation();
setIsFullScreenEnabled(true);
}}
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
aria-label="View image in full screen"
>
<Maximize className="size-3" />

2
packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
View file

@ -31,7 +31,7 @@ export function ImageToolbarRoot(props: Props) {
<>
<div
className={cn(
"absolute top-1 right-1 h-7 z-20 bg-black/80 rounded flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
"absolute top-1 right-1 h-7 z-20 bg-black/80 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
{
"opacity-100 pointer-events-auto": shouldShowToolbar,
}

2
packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
View file

@ -53,7 +53,7 @@ export function ImageUploadStatus(props: Props) {
if (uploadStatus === undefined) return null;
return (
<div className="absolute top-1 right-1 z-20 bg-black/60 rounded text-xs font-medium w-10 text-center">
<div className="absolute top-1 right-1 z-20 bg-black/60 rounded-sm text-11 font-medium w-10 text-center">
{displayStatus}%
</div>
);

37
packages/editor/src/core/extensions/custom-image/components/uploader.tsx
View file

@ -168,9 +168,16 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
[uploadFile, editor, getPos]
);
const isErrorState = failedToLoadImage || hasDuplicationFailed;
const borderColor =
selected && editor.isEditable && !isErrorState
? "color-mix(in srgb, var(--border-color-accent-strong) 20%, transparent)"
: undefined;
const getDisplayMessage = useCallback(() => {
const isUploading = isImageBeingUploaded;
if (failedToLoadImage || hasDuplicationFailed) {
if (isErrorState) {
return "Error loading image";
}
@ -183,7 +190,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
}
return "Add an image";
}, [draggedInside, editor.isEditable, failedToLoadImage, isImageBeingUploaded, hasDuplicationFailed]);
}, [draggedInside, editor.isEditable, isErrorState, isImageBeingUploaded]);
const handleRetryClick = useCallback(
(e: React.MouseEvent) => {
@ -198,18 +205,20 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
return (
<div
className={cn(
"image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 bg-custom-background-90 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
"image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-tertiary bg-layer-2 border border-dashed transition-all duration-200 ease-in-out cursor-default",
{
"hover:text-custom-text-200 hover:bg-custom-background-80 cursor-pointer": editor.isEditable,
"bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
"text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
selected && editor.isEditable,
"text-red-500 cursor-default": failedToLoadImage || hasDuplicationFailed,
"hover:text-red-500": (failedToLoadImage || hasDuplicationFailed) && editor.isEditable,
"bg-red-500/10": (failedToLoadImage || hasDuplicationFailed) && selected,
"hover:bg-red-500/10": (failedToLoadImage || hasDuplicationFailed) && selected && editor.isEditable,
"border-subtle": !(selected && editor.isEditable && !isErrorState),
"hover:text-secondary hover:bg-layer-2-hover cursor-pointer": editor.isEditable && !isErrorState,
"bg-layer-2-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
"text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
selected && editor.isEditable && !isErrorState,
"text-red-500 cursor-default": isErrorState,
"hover:text-red-500 hover:bg-red-500/10": isErrorState && editor.isEditable,
"bg-red-500/10": isErrorState && selected,
"hover:bg-red-500/20": isErrorState && selected && editor.isEditable,
}
)}
style={borderColor ? { borderColor } : undefined}
onDrop={onDrop}
onDragOver={onDragEnter}
onDragLeave={onDragLeave}
@ -221,13 +230,13 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
}}
>
<ImageIcon className="size-4" />
<div className="text-base font-medium flex-1">{getDisplayMessage()}</div>
<div className="text-14 font-medium flex-1">{getDisplayMessage()}</div>
{hasDuplicationFailed && editor.isEditable && (
<button
type="button"
onClick={handleRetryClick}
className={cn(
"flex items-center gap-1 px-2 py-1 text-xs font-medium text-custom-text-300 hover:bg-custom-background-90 hover:text-custom-text-200 rounded-md transition-all duration-200 ease-in-out",
"flex items-center gap-1 px-2 py-1 font-medium text-red-500 rounded-md transition-all duration-200 ease-in-out hover:bg-red-500/20 hover:text-red-500",
{
"hover:bg-red-500/20": selected,
}
@ -235,7 +244,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
title="Retry duplication"
>
<RotateCcw className="size-3" />
Retry
<span className="text-11">Retry</span>
</button>
)}
<input

2
packages/editor/src/core/extensions/custom-link/extension.tsx
View file

@ -124,7 +124,7 @@ export const CustomLinkExtension = Mark.create<LinkOptions, CustomLinkStorage>({
target: "_blank",
rel: "noopener noreferrer nofollow",
class:
"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
"text-accent-secondary underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
},
validate: (url: string) => isValidHttpUrl(url).isValid,
};

10
packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
View file

@ -124,7 +124,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
<div
ref={dropdownContainerRef}
className={cn(
"relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2 opacity-0 invisible transition-opacity",
"relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2 opacity-0 invisible transition-opacity",
{
"opacity-100 visible": isVisible,
}
@ -150,15 +150,15 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
id={`emoji-item-${index}`}
type="button"
className={cn(
"flex items-center gap-2 w-full rounded px-2 py-1.5 text-sm text-left truncate text-custom-text-200 hover:bg-custom-background-80 transition-colors duration-150",
"flex items-center gap-2 w-full rounded-sm px-2 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover transition-colors duration-150",
{
"bg-custom-background-80": isSelected,
"bg-layer-1-hover": isSelected,
}
)}
onClick={() => selectItem(index)}
onMouseEnter={() => setSelectedIndex(index)}
>
<span className="size-5 grid place-items-center flex-shrink-0 text-base">{item.emoji}</span>
<span className="size-5 grid place-items-center flex-shrink-0 text-14">{item.emoji}</span>
<span className="flex-grow truncate">
<span className="font-medium">:{item.name}:</span>
</span>
@ -166,7 +166,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
);
})
) : (
<div className="text-center text-sm text-custom-text-400 py-2">No emojis found</div>
<div className="text-center text-13 text-placeholder py-2">No emojis found</div>
)}
</div>
</>

2
packages/editor/src/core/extensions/horizontal-rule.ts
View file

@ -25,7 +25,7 @@ export const CustomHorizontalRule = Node.create<HorizontalRuleOptions>({
addOptions() {
return {
HTMLAttributes: {
class: "py-4 border-custom-border-400",
class: "py-4 border-strong-1",
},
};
},

14
packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
View file

@ -124,7 +124,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
/>
<div
ref={dropdownContainer}
className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
style={{
zIndex: 100,
}}
@ -136,11 +136,11 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
}}
>
{isLoading ? (
<div className="text-center text-sm text-custom-text-400">Loading...</div>
<div className="text-center text-13 text-placeholder">Loading...</div>
) : sections.length ? (
sections.map((section, sectionIndex) => (
<div key={section.key} className="space-y-2">
{section.title && <h6 className="text-xs font-semibold text-custom-text-300">{section.title}</h6>}
{section.title && <h6 className="text-11 font-semibold text-tertiary">{section.title}</h6>}
{section.items.map((item, itemIndex) => {
const isSelected = sectionIndex === selectedIndex.section && itemIndex === selectedIndex.item;
@ -150,9 +150,9 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
id={`mention-item-${sectionIndex}-${itemIndex}`}
type="button"
className={cn(
"flex items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200",
"flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1-hover",
{
"bg-custom-background-80": isSelected,
"bg-layer-1-hover": isSelected,
}
)}
onClick={(e) => {
@ -169,7 +169,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
>
<span className="size-5 grid place-items-center flex-shrink-0">{item.icon}</span>
{item.subTitle && (
<h5 className="whitespace-nowrap text-xs text-custom-text-300 flex-shrink-0">{item.subTitle}</h5>
<h5 className="whitespace-nowrap text-11 text-tertiary flex-shrink-0">{item.subTitle}</h5>
)}
<p className="flex-grow truncate">{item.title}</p>
</button>
@ -178,7 +178,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
</div>
))
) : (
<div className="text-center text-sm text-custom-text-400">No results</div>
<div className="text-center text-13 text-placeholder">No results</div>
)}
</div>
</>

11
packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
View file

@ -215,14 +215,7 @@ export const getSlashCommandFilteredSections =
title: "Default",
description: "Change text color",
searchTerms: ["color", "text", "default"],
icon: (
<ALargeSmall
className="size-3.5"
style={{
color: "rgba(var(--color-text-100))",
}}
/>
),
icon: <ALargeSmall className="size-3.5 text-primary" />,
command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
},
...COLORS_LIST.map(
@ -262,7 +255,7 @@ export const getSlashCommandFilteredSections =
iconContainerStyle: {
borderRadius: "4px",
backgroundColor: "rgba(var(--color-background-100))",
border: "1px solid rgba(var(--color-border-300))",
border: "1px solid var(--border-color-strong)",
},
command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
},

8
packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
View file

@ -30,7 +30,7 @@ const highlightMatch = (text: string, query: string): React.ReactNode => {
return (
<>
{before}
<span className="font-medium text-custom-text-100">{match}</span>
<span className="font-medium text-primary">{match}</span>
{after}
</>
);
@ -48,9 +48,9 @@ export function CommandMenuItem(props: Props) {
type="button"
id={`item-${sectionIndex}-${itemIndex}`}
className={cn(
"flex items-center gap-2 w-full rounded px-1 py-1.5 text-sm text-left truncate text-custom-text-200",
"flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover",
{
"bg-custom-background-80": isSelected,
"bg-layer-1-hover": isSelected,
}
)}
onClick={onClick}
@ -59,7 +59,7 @@ export function CommandMenuItem(props: Props) {
<span className="size-5 grid place-items-center flex-shrink-0" style={item.iconContainerStyle}>
{item.icon}
</span>
<p className="flex-grow truncate">{query ? highlightMatch(item.title, query) : item.title}</p>
<p className="flex-grow truncate text-12">{query ? highlightMatch(item.title, query) : item.title}</p>
{item.badge}
</button>
);

4
packages/editor/src/core/extensions/slash-commands/command-menu.tsx
View file

@ -131,7 +131,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
<div
id="slash-command"
ref={commandListContainer}
className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
style={{
zIndex: 100,
}}
@ -144,7 +144,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
>
{sections.map((section, sectionIndex) => (
<div key={section.key} className="space-y-2">
{section.title && <h6 className="text-xs font-semibold text-custom-text-300">{section.title}</h6>}
{section.title && <h6 className="text-11 font-semibold text-tertiary">{section.title}</h6>}
<div>
{section.items?.map((item, itemIndex) => (
<CommandMenuItem

6
packages/editor/src/core/extensions/starter-kit.ts
View file

@ -10,12 +10,12 @@ export const CustomStarterKitExtension = (args: TArgs) => {
return StarterKit.configure({
bulletList: {
HTMLAttributes: {
class: "list-disc pl-7 space-y-[--list-spacing-y]",
class: "list-disc pl-7 space-y-(--list-spacing-y)",
},
},
orderedList: {
HTMLAttributes: {
class: "list-decimal pl-7 space-y-[--list-spacing-y]",
class: "list-decimal pl-7 space-y-(--list-spacing-y)",
},
},
listItem: {
@ -39,7 +39,7 @@ export const CustomStarterKitExtension = (args: TArgs) => {
},
dropcursor: {
class:
"text-custom-text-300 transition-all motion-reduce:transition-none motion-reduce:hover:transform-none duration-200 ease-[cubic-bezier(0.165, 0.84, 0.44, 1)]",
"text-tertiary transition-all motion-reduce:transition-none motion-reduce:hover:transform-none duration-200 ease-[cubic-bezier(0.165, 0.84, 0.44, 1)]",
},
...(enableHistory ? {} : { history: false }),
});

14
packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
View file

@ -43,7 +43,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
<Disclosure.Button
as="button"
type="button"
className="flex items-center justify-between gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
>
{({ open }) => (
<>
@ -61,13 +61,13 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
</Disclosure.Button>
<Disclosure.Panel className="p-1 space-y-2 mb-1.5">
{/* <div className="space-y-1.5">
<p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
<p className="text-11 text-tertiary font-semibold">Text colors</p>
<div className="flex items-center flex-wrap gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
style={{
backgroundColor: color.textColor,
}}
@ -76,7 +76,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
onClick={() => handleTextColorChange(editor, null)}
>
<Ban className="size-4" />
@ -84,13 +84,13 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
</div>
</div> */}
<div className="space-y-1">
<p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
<p className="text-11 text-tertiary font-semibold">Background colors</p>
<div className="flex items-center flex-wrap gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
style={{
backgroundColor: color.backgroundColor,
}}
@ -102,7 +102,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1-hover transition-colors"
onClick={() => {
handleBackgroundColorChange(editor, null);
onSelect(null);

15
packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
View file

@ -187,15 +187,12 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
{...getReferenceProps()}
type="button"
onMouseDown={handleMouseDown}
className={cn(
"px-1 bg-custom-background-90 border border-custom-border-400 rounded outline-none transition-all duration-200",
{
"!opacity-100 bg-custom-primary-100 border-custom-primary-100": isDropdownOpen,
"hover:bg-custom-background-80": !isDropdownOpen,
}
)}
className={cn("px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
"!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
"hover:bg-layer-1-hover": !isDropdownOpen,
})}
>
<Ellipsis className="size-4 text-custom-text-100" />
<Ellipsis className="size-4 text-primary" />
</button>
</div>
{isDropdownOpen && (
@ -208,7 +205,7 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
lockScroll
/>
<div
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg"
ref={refs.setFloating}
{...getFloatingProps()}
style={{

6
packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
View file

@ -69,7 +69,7 @@ export function ColumnOptionsDropdown(props: Props) {
<>
<button
type="button"
className="flex items-center justify-between gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -80,13 +80,13 @@ export function ColumnOptionsDropdown(props: Props) {
<div className="flex-grow truncate">Header column</div>
<ToggleRight className="shrink-0 size-3" />
</button>
<hr className="my-2 border-custom-border-200" />
<hr className="my-2 border-subtle" />
<TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
{DROPDOWN_ITEMS.map((item) => (
<button
key={item.key}
type="button"
className="flex items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
className="flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

15
packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
View file

@ -186,15 +186,12 @@ export function RowDragHandle(props: RowDragHandleProps) {
{...getReferenceProps()}
type="button"
onMouseDown={handleMouseDown}
className={cn(
"py-1 bg-custom-background-90 border border-custom-border-400 rounded outline-none transition-all duration-200",
{
"!opacity-100 bg-custom-primary-100 border-custom-primary-100": isDropdownOpen,
"hover:bg-custom-background-80": !isDropdownOpen,
}
)}
className={cn("py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
"!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
"hover:bg-layer-1-hover": !isDropdownOpen,
})}
>
<Ellipsis className="size-4 text-custom-text-100 rotate-90" />
<Ellipsis className="size-4 text-primary rotate-90" />
</button>
</div>
{isDropdownOpen && (
@ -207,7 +204,7 @@ export function RowDragHandle(props: RowDragHandleProps) {
lockScroll
/>
<div
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg"
ref={refs.setFloating}
{...getFloatingProps()}
style={{

6
packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
View file

@ -69,7 +69,7 @@ export function RowOptionsDropdown(props: Props) {
<>
<button
type="button"
className="flex items-center justify-between gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -80,13 +80,13 @@ export function RowOptionsDropdown(props: Props) {
<div className="flex-grow truncate">Header row</div>
<ToggleRight className="shrink-0 size-3" />
</button>
<hr className="my-2 border-custom-border-200" />
<hr className="my-2 border-subtle" />
<TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
{DROPDOWN_ITEMS.map((item) => (
<button
key={item.key}
type="button"
className="flex items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200 hover:bg-custom-background-80"
className="flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

2
packages/editor/src/core/extensions/table/plugins/drag-handles/utils.ts
View file

@ -13,7 +13,7 @@ export const constructDragPreviewTable = (): {
} => {
const tableElement = document.createElement("table");
tableElement.classList.add("table-drag-preview");
tableElement.classList.add("bg-custom-background-100");
tableElement.classList.add("bg-surface-1");
tableElement.style.opacity = "0.9";
const tableBodyElement = document.createElement("tbody");
tableElement.appendChild(tableBodyElement);

4
packages/editor/src/core/helpers/common.ts
View file

@ -15,8 +15,8 @@ export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassNam
cn(
"w-full max-w-full sm:rounded-lg focus:outline-none focus:border-0",
{
"border border-custom-border-200": !noBorder,
"focus:border border-custom-border-300": borderOnFocus,
"border border-subtle-1": !noBorder,
"focus:border border-strong": borderOnFocus,
},
containerClassName
);

2
packages/editor/src/core/plugins/ai-handle.ts
View file

@ -88,7 +88,7 @@ export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOpti
const view = (view: EditorView, sideMenu: HTMLDivElement | null) => {
// create handle element
const className =
"grid place-items-center font-medium size-5 aspect-square text-xs text-custom-text-300 hover:bg-custom-background-80 rounded-sm opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
"grid place-items-center font-medium size-5 aspect-square text-11 text-tertiary hover:bg-layer-1 rounded-xs opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
aiHandleElement = document.createElement("button");
aiHandleElement.type = "button";
aiHandleElement.id = "ai-handle";

6
packages/editor/src/core/plugins/drag-handle.ts
View file

@ -42,13 +42,13 @@ const createDragHandleElement = (): HTMLElement => {
dragHandleElement.draggable = true;
dragHandleElement.dataset.dragHandle = "";
dragHandleElement.classList.value =
"hidden sm:flex items-center size-5 aspect-square rounded-sm cursor-grab outline-none hover:bg-custom-background-80 active:bg-custom-background-80 active:cursor-grabbing transition-[background-color,_opacity] duration-200 ease-linear";
"hidden sm:flex items-center size-5 aspect-square rounded-xs cursor-grab outline-none hover:bg-layer-1-hover active:bg-layer-1 active:cursor-grabbing transition-[background-color,_opacity] duration-200 ease-linear";
const iconElement1 = document.createElement("span");
iconElement1.classList.value = "pointer-events-none text-custom-text-300";
iconElement1.classList.value = "pointer-events-none text-tertiary";
iconElement1.innerHTML = verticalEllipsisIcon;
const iconElement2 = document.createElement("span");
iconElement2.classList.value = "pointer-events-none text-custom-text-300 -ml-2.5";
iconElement2.classList.value = "pointer-events-none text-tertiary -ml-2.5";
iconElement2.innerHTML = verticalEllipsisIcon;
dragHandleElement.appendChild(iconElement1);

22
packages/editor/src/styles/editor.css
View file

@ -48,7 +48,7 @@
.ProseMirror blockquote {
font-style: normal;
font-weight: 400;
border-left: 3px solid rgb(var(--color-border-300));
@apply border-l-[3px] border-strong;
}
.ProseMirror blockquote p::before,
@ -84,7 +84,7 @@
/* Custom gap cursor styles */
.ProseMirror-gapcursor::after {
border-top: 1px solid rgb(var(--color-text-100)) !important;
@apply border-t! border-strong!;
}
/* to-do list */
@ -105,14 +105,14 @@ ul[data-type="taskList"] li > div {
}
ul[data-type="taskList"] li > label input[type="checkbox"] {
border: 1px solid rgba(var(--color-text-100), 0.2) !important;
@apply border! border-strong/20!;
outline: none;
border-radius: 2px;
transform: scale(1.05);
}
.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
background-color: rgba(var(--color-text-100), 0.1);
background-color: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
}
.ProseMirror[contenteditable="false"] input[type="checkbox"] {
@ -120,14 +120,14 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
}
ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
background-color: rgba(var(--color-primary-100)) !important;
border-color: rgba(var(--color-primary-100)) !important;
background-color: var(--background-color-accent-primary) !important;
border-color: var(--border-color-accent-strong) !important;
color: white !important;
}
ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
background-color: rgba(var(--color-primary-300)) !important;
border-color: rgba(var(--color-primary-300)) !important;
background-color: var(--background-color-accent-primary-hover) !important;
border-color: var(--border-color-accent-strong) !important;
}
@media screen and (max-width: 768px) {
@ -151,12 +151,12 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
width: 0.8rem;
height: 0.8rem;
position: relative;
border: 1.5px solid rgb(var(--color-text-100));
@apply border-md border-subtle-1;
margin-right: 0.2rem;
margin-top: 0.15rem;
&:active {
background-color: rgb(var(--color-background-90));
background-color: var(--background-color-layer-1);
}
/* check sign */
@ -257,7 +257,7 @@ div[data-type="horizontalRule"] {
margin-bottom: 0;
& > div {
border-bottom: 2px solid rgb(var(--color-border-200));
@apply border-b-lg border-subtle-1;
}
}

47
packages/editor/src/styles/table.css
View file

@ -3,17 +3,16 @@
padding-bottom: 26px;
table {
position: relative;
border-collapse: collapse;
table-layout: fixed;
margin: 0.5rem 0 0 0;
border: 1px solid rgba(var(--color-border-200));
@apply relative border border-subtle;
width: 100%;
td,
th {
min-width: 1em;
border: 1px solid rgba(var(--color-border-300));
@apply border border-strong;
padding: 7px 10px;
vertical-align: top;
box-sizing: border-box;
@ -38,19 +37,19 @@
}
&.selectedCell-border-top::after {
border-top: 2px solid rgba(var(--color-primary-100));
border-top: 2px solid var(--border-color-accent-strong);
}
&.selectedCell-border-left::after {
border-left: 2px solid rgba(var(--color-primary-100));
border-left: 2px solid var(--border-color-accent-strong);
}
&.selectedCell-border-bottom::after {
border-bottom: 2px solid rgba(var(--color-primary-100));
border-bottom: 2px solid var(--border-color-accent-strong);
}
&.selectedCell-border-right::after {
border-right: 2px solid rgba(var(--color-primary-100));
border-right: 2px solid var(--border-color-accent-strong);
}
}
/* End selected cell outline */
@ -81,34 +80,31 @@
}
th {
font-weight: 500;
text-align: left;
@apply font-medium text-left;
}
tr[background="none"],
tr:not([background]) {
th {
background-color: rgba(var(--color-background-90));
@apply bg-layer-2;
}
}
.table-drop-marker {
background-color: rgba(var(--color-primary-100));
position: absolute;
z-index: 10;
background-color: var(--border-color-accent-strong);
@apply absolute z-10;
&.hidden {
display: none;
@apply hidden;
}
}
.table-col-drag-marker,
.table-row-drag-marker {
position: absolute;
z-index: 10;
@apply absolute z-10;
&.hidden {
display: none;
@apply hidden;
}
}
@ -124,7 +120,7 @@
/* Selected status */
&.ProseMirror-selectednode {
table {
background-color: rgba(var(--color-primary-100), 0.2);
background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
}
}
/* End selected status */
@ -138,7 +134,7 @@
width: 2px;
height: calc(100% + 2px);
z-index: 5;
background-color: rgba(var(--color-primary-100));
background-color: var(--border-color-accent-strong);
pointer-events: none;
}
/* End column resizer */
@ -156,9 +152,8 @@
.table-column-insert-button,
.table-row-insert-button {
position: absolute;
background-color: rgba(var(--color-background-90));
color: rgba(var(--color-text-300));
border: 1px solid rgba(var(--color-border-200));
background-color: var(--background-color-layer-1);
@apply text-tertiary border border-subtle-1;
border-radius: 4px;
display: grid;
place-items: center;
@ -169,15 +164,15 @@
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--color-background-80));
color: rgba(var(--color-text-100));
background-color: var(--background-color-layer-1-hover);
@apply text-primary;
}
&.dragging {
opacity: 1;
pointer-events: auto;
background-color: rgba(var(--color-primary-100), 0.2);
color: rgba(var(--color-text-100));
background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
@apply text-primary;
}
svg {

3
packages/editor/src/styles/tailwind.css
View file

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2
packages/editor/src/styles/variables.css
View file

@ -43,7 +43,7 @@
/* font size and style */
.editor-container {
--color-placeholder: rgba(var(--color-text-100), 0.5);
--color-placeholder: --alpha(var(--text-color-primary) / 50%);
/* font sizes and line heights */
&.large-font {

6
packages/editor/tailwind.config.js
View file

@ -1,6 +0,0 @@
import sharedConfig from "@plane/tailwind-config/tailwind.config.js";
export default {
// prefix ui lib classes to avoid conflicting with the app
...sharedConfig,
};