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

[WEB-5809] refactor: tailwind config inline variables (#8437)

Browse source
This commit is contained in:
Aaryan Khandelwal 2025-12-26 16:36:29 +05:30 • committed by GitHub
parent e3ba7c2889
commit 92ac28fcb8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
169 changed files with 1273 additions and 1130 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -66,7 +66,7 @@ export function BubbleMenuLinkSelector(props: Props) {
<div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
<div
className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
"border-red-500": error,
"border-danger-strong": error,
})}
>
<input
@ -89,7 +89,7 @@ export function BubbleMenuLinkSelector(props: Props) {
{editor.getAttributes("link").href ? (
<button
type="button"
className="grid place-items-center rounded-xs p-1 text-red-500 hover:bg-red-500/20 transition-all"
className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-primary transition-all"
onClick={(e) => {
unsetLinkEditor(editor);
e.stopPropagation();
@ -112,7 +112,7 @@ export function BubbleMenuLinkSelector(props: Props) {
)}
</div>
{error && (
<p className="text-11 text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
<p className="text-11 text-danger-primary my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
Please enter a valid URL
</p>
)}

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

@ -40,13 +40,13 @@ export function CodeBlockComponent({ node }: Props) {
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-layer-1 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,
"bg-success-primary hover:bg-success-primary active:bg-success-primary": copied,
}
)}
onClick={copyToClipboard}
>
{copied ? (
<CheckIcon className="h-3 w-3 text-green-500" strokeWidth={3} />
<CheckIcon className="h-3 w-3 text-success-primary" strokeWidth={3} />
) : (
<CopyIcon className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
)}

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-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
className="h-full flex items-center gap-1 text-white/60 hover:text-white 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-alpha-black-1000 flex items-center gap-2 px-2 rounded-sm">
<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-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white 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-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
aria-label="Download image"
>
<Download className="size-3" />

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

@ -193,14 +193,11 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
return (
<div
className={cn(
"fixed inset-0 size-full z-50 bg-alpha-black-1100 opacity-0 pointer-events-none transition-opacity",
{
"opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
"cursor-default": !isDragging,
"cursor-grabbing": isDragging,
}
)}
className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
"opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
"cursor-default": !isDragging,
"cursor-grabbing": isDragging,
})}
role="dialog"
aria-modal="true"
aria-label="Fullscreen image viewer"
@ -216,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-alpha-white-800 hover:text-alpha-white-1200 transition-colors" />
<CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
</button>
<img
ref={setImageRef}
@ -234,7 +231,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}}
onMouseDown={handleMouseDown}
/>
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-alpha-black-1200">
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
<div className="flex items-center">
<button
type="button"
@ -245,13 +242,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("decrease");
}}
className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
disabled={magnification <= MIN_ZOOM}
aria-label="Zoom out"
>
<Minus className="size-4" />
</button>
<span className="text-13 w-12 text-center text-alpha-white-1200">{Math.round(100 * magnification)}%</span>
<span className="text-13 w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
<button
type="button"
onClick={(e) => {
@ -261,7 +258,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("increase");
}}
className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
disabled={magnification >= MAX_ZOOM}
aria-label="Zoom in"
>
@ -272,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-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
aria-label="Download image"
>
<Download className="size-4" />
@ -282,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-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white 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/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-alpha-black-1000 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",
"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-alpha-black-800 rounded-sm text-11 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>
);

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

@ -212,10 +212,10 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
"bg-layer-3-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,
"text-danger-primary cursor-default": isErrorState,
"hover:text-danger-primary hover:bg-danger-primary": isErrorState && editor.isEditable,
"bg-danger-primary": isErrorState && selected,
"hover:bg-danger-primary": isErrorState && selected && editor.isEditable,
}
)}
style={borderColor ? { borderColor } : undefined}
@ -236,9 +236,9 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
type="button"
onClick={handleRetryClick}
className={cn(
"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",
"flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-primary hover:text-danger-primary",
{
"hover:bg-red-500/20": selected,
"hover:bg-danger-primary": selected,
}
)}
title="Retry duplication"