From 25421140bfa9d59b08efa7cba1abdb9498cdf68b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=94=E9=A6=99=E4=B8=B8=E5=AD=90?= <15518898337@163.com> Date: Mon, 22 Jun 2026 21:04:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=BB=E5=B8=83=E6=B3=A5?= =?UTF-8?q?=E7=82=B9=E5=85=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 让画布顶部泥点余额按钮复用创作页充值和兑换码入口 抽取账户充值支付结果与确认弹窗组件供创作页和画布页共用 补充画布泥点入口回归测试和编辑器技术文档 --- ...架构】图片画布编辑器MVP接入方案-2026-06-11.md | 3 +- ...CanvasEditorGenerationIntegration.test.tsx | 1 - .../ImageCanvasEditorShellView.test.tsx | 1 + .../ImageCanvasEditorView.test.tsx | 36 +- .../image-editor/ImageCanvasEditorView.tsx | 97 ++++++ .../ImageCanvasTopbarView.test.tsx | 14 +- .../image-editor/ImageCanvasTopbarView.tsx | 8 +- .../PlatformRechargePaymentStatusDialogs.tsx | 53 +++ src/components/rpg-entry/RpgEntryHomeView.tsx | 57 +--- src/index.css | 313 ++++++++++-------- 10 files changed, 391 insertions(+), 192 deletions(-) create mode 100644 src/components/platform-entry/PlatformRechargePaymentStatusDialogs.tsx diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md index 12bee8406..af0afaeda 100644 --- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md +++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md @@ -9,10 +9,11 @@ - 主站新增 `/editor/canvas` 路由，进入独立图片画布编辑器阶段。 - 主站新增 `/project` 项目页，从“我的”页项目入口进入，展示当前用户所有图片画布工程；点击项目进入 `/editor/canvas?projectid=`。 - 创作 Tab 顶部提供编辑器入口，入口只负责跳转，不参与玩法创作链路。 -- 编辑器顶部栏采用紧凑高度，项目标题和重命名入口贴近返回项目按钮；右侧常驻展示当前账号泥点余额，样式对齐创作主页顶部钱包 chip。 +- 编辑器顶部栏采用紧凑高度，项目标题和重命名入口贴近返回项目按钮；右侧常驻展示当前账号泥点余额，样式对齐创作主页顶部钱包 chip，点击后复用创作主页右上角泥点入口的账户充值 / 兑换码弹窗与支付确认反馈。 - 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。 - 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。 - 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。 +- 画布 chrome 的边框、hover / 选中态、吸附 / 框选参考线、生成类按钮和通用 active 控件使用陶泥儿暖色主题（以 `--platform-accent`、陶土橙主按钮和深棕文字为基准），不得回退为黑色或蓝色主题；元素类型自身的识别色可继续保留。 - 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；浮动工具栏只保留当前可执行的编辑动作，不放调整 / 复制 / 删除 / 查看信息占位按钮。图片右上角素材类型标签、图片信息角标和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；无 `assetKind` 的素材右上角显示 `未知` 标签，点击标签弹出独立标签选择菜单并可写回图层 `assetKind`，不能触发图层选择 / 拖拽事件；图片信息角标使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。 - 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成图片、生成视频、生成音乐、生成规范、生成角色形象、生成图标素材、生成 UI 设计图。底部栏不再展示文字工具、形状标注工具和导出工具；上传与生成图片之间、生成音乐与生成规范之间各有一个半图标高度分割线。 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。 diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx index e84b43f79..35f0e8265 100644 --- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx @@ -3371,7 +3371,6 @@ describe('ImageCanvasEditorView generation integration', () => { if (!metadataCornerButton) { throw new Error('metadata corner button should exist'); } - expect(metadataCornerButton.className).toContain('bg-black/55'); expect(metadataCornerButton.className).toContain( 'image-canvas-editor__metadata-corner', ); diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx index 2a7c09fac..9d3b2d3f5 100644 --- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx @@ -109,6 +109,7 @@ function createTopbarProps(): ImageCanvasTopbarViewProps { resetProjectRenameError: vi.fn(), exportCanvasAssets: vi.fn(), onOpenShortcuts: vi.fn(), + onOpenWallet: vi.fn(), }; } diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx index f6fe85590..54bc91db3 100644 --- a/src/components/image-editor/ImageCanvasEditorView.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx @@ -205,6 +205,37 @@ describe('ImageCanvasEditorView', () => { }); }); + it('opens the same account wallet entry from the canvas topbar mud point button', async () => { + render( + + + , + ); + + const walletButton = await screen.findByRole('button', { + name: '泥点余额 1,234泥点', + }); + + fireEvent.click(walletButton); + + expect(await screen.findByRole('dialog', { name: '兑换码' })).toBeTruthy(); + expect(screen.getByPlaceholderText('输入兑换码')).toBeTruthy(); + }); + it('opens the login modal immediately when entering the editor while logged out', async () => { const openLoginModal = vi.fn(); @@ -329,6 +360,7 @@ describe('ImageCanvasEditorView', () => { originalHeight: 1024, zIndex: 3, sourceType: 'generated', + sourceResourceId: 'resource-generated', prompt: '明亮主视觉', model: 'gpt-image-2', provider: 'VectorEngine', @@ -347,6 +379,7 @@ describe('ImageCanvasEditorView', () => { originalHeight: 120, zIndex: 4, sourceType: 'generated', + sourceResourceId: 'resource-failed', }, ], resources: [], @@ -376,7 +409,8 @@ describe('ImageCanvasEditorView', () => { }); const originalFetch = globalThis.fetch; const fetchMock = vi.fn(async (url: string) => { - if (url === '/generated-ok.png') { + const pathname = new URL(url, 'http://localhost').pathname; + if (pathname === '/generated-ok.png') { return new Response(new Blob(['generated'], { type: 'image/png' })); } return new Response(null, { status: 404 }); diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index e4e86dee0..70ea0f28b 100644 --- a/src/components/image-editor/ImageCanvasEditorView.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.tsx @@ -14,9 +14,17 @@ import { type EditorAssetSnapshot, loadEditorGenerationPricing, } from '../../services/image-editor/editorProjectClient'; +import { shouldShowRechargeEntry } from '../../services/payment/paymentPlatform'; import { getPlatformProfileDashboard } from '../../services/platform-entry/platformProfileClient'; import { useAuthUi } from '../auth/AuthUiContext'; import { PlatformDangerConfirmDialog } from '../common/PlatformDangerConfirmDialog'; +import { PlatformProfileRechargeModal } from '../platform-entry/PlatformProfileRechargeModal'; +import { PlatformProfileRewardCodeRedeemModal } from '../platform-entry/PlatformProfileRewardCodeRedeemModal'; +import { + PlatformRechargePaymentConfirmationMask, + PlatformRechargePaymentResultDialog, +} from '../platform-entry/PlatformRechargePaymentStatusDialogs'; +import { usePlatformProfileCenterController } from '../platform-entry/usePlatformProfileCenterController'; import { formatDashboardCount } from '../rpg-entry/rpgEntryProfileDashboardPresentation'; import { canvasAssetKindOrNull, @@ -93,6 +101,7 @@ export function ImageCanvasEditorView() { const publicationReferenceButtonRef = useRef(null); const iconSpecButtonRef = useRef(null); const selectedLayerIdRef = useRef(null); + const showRechargeEntry = shouldShowRechargeEntry(); useEffect(() => { let isMounted = true; @@ -167,6 +176,56 @@ export function ImageCanvasEditorView() { }, [], ); + const refreshEditorWalletBalance = useCallback(() => { + if (!authUiRef.current?.canAccessProtectedData || !authUiRef.current.user) { + return; + } + void getPlatformProfileDashboard({ + authImpact: 'local', + skipRefresh: true, + notifyAuthStateChange: false, + clearAuthOnUnauthorized: false, + }) + .then((dashboard) => { + setWalletBalanceLabel( + `${formatDashboardCount(dashboard.walletBalance)}泥点`, + ); + }) + .catch(() => undefined); + }, []); + const { + activeRechargeTab, + buyRechargeProduct, + confirmNativeWechatPayment, + isLoadingRechargeCenter, + isRechargeOpen, + isRewardCodeOpen, + isSubmittingRewardCode, + loadRechargeCenter, + nativeWechatPayment, + openRechargeOrRewardCodeModal, + rechargeCenter, + rechargeError, + rechargePaymentResult, + rewardCodeError, + rewardCodeInput, + rewardCodeSuccess, + setActiveRechargeTab, + setIsRechargeOpen, + setIsRewardCodeOpen, + setRechargePaymentResult, + setRewardCodeInput, + submittingRechargeProductId, + submitRewardCode, + wechatRechargeOrderConfirmationState, + } = usePlatformProfileCenterController({ + activeTab: 'editor-canvas', + isAuthenticated: Boolean(authUi?.user), + showRechargeEntry, + onRechargeSuccess: refreshEditorWalletBalance, + requestLogin: () => authUiRef.current?.openLoginModal(), + currentUser: authUi?.user ?? null, + }); useEffect(() => { if (!authUi || authUi.user || authUi.canAccessProtectedData) { @@ -1256,6 +1315,7 @@ export function ImageCanvasEditorView() { resetProjectRenameError, exportCanvasAssets, onOpenShortcuts: () => setIsShortcutDialogOpen(true), + onOpenWallet: openRechargeOrRewardCodeModal, }; const stageProps = { canvasViewportRef, @@ -1400,6 +1460,43 @@ export function ImageCanvasEditorView() { open={isShortcutDialogOpen} onClose={() => setIsShortcutDialogOpen(false)} /> + {isRewardCodeOpen ? ( + setIsRewardCodeOpen(false)} + /> + ) : null} + {isRechargeOpen ? ( + setIsRechargeOpen(false)} + onRetry={loadRechargeCenter} + onBuy={buyRechargeProduct} + onConfirmNativePayment={confirmNativeWechatPayment} + /> + ) : null} + {rechargePaymentResult ? ( + setRechargePaymentResult(null)} + /> + ) : null} + {wechatRechargeOrderConfirmationState ? ( + + ) : null} ); } diff --git a/src/components/image-editor/ImageCanvasTopbarView.test.tsx b/src/components/image-editor/ImageCanvasTopbarView.test.tsx index 96a75e133..93f8ca7ca 100644 --- a/src/components/image-editor/ImageCanvasTopbarView.test.tsx +++ b/src/components/image-editor/ImageCanvasTopbarView.test.tsx @@ -49,6 +49,7 @@ function renderTopbar( resetProjectRenameError: vi.fn(), exportCanvasAssets: vi.fn(), onOpenShortcuts: vi.fn(), + onOpenWallet: vi.fn(), ...overrides, }; @@ -77,16 +78,21 @@ describe('ImageCanvasTopbarView', () => { }); it('shows the current mud point balance in the topbar', () => { - renderTopbar({ + const props = renderTopbar({ walletBalanceLabel: '1.2万泥点', }); - - const walletChip = screen.getByLabelText('泥点余额 1.2万泥点'); + const walletChip = screen.getByRole('button', { + name: '泥点余额 1.2万泥点', + }); expect(walletChip.textContent).toBe('1.2万泥点'); expect(walletChip.querySelector('img')?.getAttribute('src')).toBe( '/creation-home/topbar-wallet.png', ); + + fireEvent.click(walletChip); + + expect(props.onOpenWallet).toHaveBeenCalledTimes(1); }); it('submits, resets, and cancels project rename edits', () => { @@ -132,6 +138,7 @@ describe('ImageCanvasTopbarView', () => { resetProjectRenameError={vi.fn()} exportCanvasAssets={exportCanvasAssets} onOpenShortcuts={vi.fn()} + onOpenWallet={vi.fn()} />, ); @@ -163,6 +170,7 @@ describe('ImageCanvasTopbarView', () => { resetProjectRenameError={vi.fn()} exportCanvasAssets={exportCanvasAssets} onOpenShortcuts={vi.fn()} + onOpenWallet={vi.fn()} />, ); diff --git a/src/components/image-editor/ImageCanvasTopbarView.tsx b/src/components/image-editor/ImageCanvasTopbarView.tsx index a75d9ec8e..e4a6ff24d 100644 --- a/src/components/image-editor/ImageCanvasTopbarView.tsx +++ b/src/components/image-editor/ImageCanvasTopbarView.tsx @@ -32,6 +32,7 @@ export type ImageCanvasTopbarViewProps = { resetProjectRenameError: () => void; exportCanvasAssets: () => void | Promise; onOpenShortcuts: () => void; + onOpenWallet: () => void; }; export function ImageCanvasTopbarView({ @@ -53,6 +54,7 @@ export function ImageCanvasTopbarView({ resetProjectRenameError, exportCanvasAssets, onOpenShortcuts, + onOpenWallet, }: ImageCanvasTopbarViewProps) { const hasExportableLayer = layers.some( (layer) => layer.src.trim().length > 0, @@ -167,8 +169,10 @@ export function ImageCanvasTopbarView({ {assetExportStatus.message} ) : null} -
{walletDisplayLabel} -
+ ); diff --git a/src/components/platform-entry/PlatformRechargePaymentStatusDialogs.tsx b/src/components/platform-entry/PlatformRechargePaymentStatusDialogs.tsx new file mode 100644 index 000000000..681413d21 --- /dev/null +++ b/src/components/platform-entry/PlatformRechargePaymentStatusDialogs.tsx @@ -0,0 +1,53 @@ +import { PlatformAcknowledgeStatusDialog } from '../common/PlatformAcknowledgeStatusDialog'; +import { PlatformStatusDialog } from '../common/PlatformStatusDialog'; +import type { RechargePaymentResult } from './usePlatformProfileCenterController'; + +const PROFILE_MODAL_OVERLAY_CLASS = + 'platform-modal-backdrop !items-center !justify-center !px-4 !py-6'; + +export function PlatformRechargePaymentResultDialog({ + result, + onClose, +}: { + result: RechargePaymentResult; + onClose: () => void; +}) { + const status = + result.kind === 'success' + ? 'success' + : result.kind === 'pending' + ? 'loading' + : result.kind === 'cancel' + ? 'cancel' + : 'error'; + + return ( + + ); +} + +export function PlatformRechargePaymentConfirmationMask({ + orderId, +}: { + orderId: string; +}) { + return ( + undefined} + closeDisabled + zIndexClassName="z-[95]" + overlayClassName={PROFILE_MODAL_OVERLAY_CLASS} + /> + ); +} diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx index 005197429..8d587a736 100644 --- a/src/components/rpg-entry/RpgEntryHomeView.tsx +++ b/src/components/rpg-entry/RpgEntryHomeView.tsx @@ -74,7 +74,6 @@ import { import { shouldShowRechargeEntry } from '../../services/payment/paymentPlatform'; import type { CustomWorldProfile } from '../../types'; import { useAuthUi } from '../auth/AuthUiContext'; -import { PlatformAcknowledgeStatusDialog } from '../common/PlatformAcknowledgeStatusDialog'; import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel'; import { CopyFeedbackButton } from '../common/CopyFeedbackButton'; import { LegalDocumentModal } from '../common/LegalDocumentModal'; @@ -95,7 +94,6 @@ import { PlatformOptionSegment, PlatformUnderlineTabRail, } from '../common/PlatformSegmentedTabPresets'; -import { PlatformStatusDialog } from '../common/PlatformStatusDialog'; import { PlatformStatusMessage } from '../common/PlatformStatusMessage'; import { PlatformSubpanel } from '../common/PlatformSubpanel'; import { PlatformTextField } from '../common/PlatformTextField'; @@ -134,13 +132,16 @@ import { PlatformProfileQrScannerModal } from '../platform-entry/PlatformProfile import { PlatformProfileRechargeModal } from '../platform-entry/PlatformProfileRechargeModal'; import { PlatformProfileReferralModal } from '../platform-entry/PlatformProfileReferralModal'; import { PlatformProfileRewardCodeRedeemModal } from '../platform-entry/PlatformProfileRewardCodeRedeemModal'; +import { + PlatformRechargePaymentConfirmationMask, + PlatformRechargePaymentResultDialog, +} from '../platform-entry/PlatformRechargePaymentStatusDialogs'; import { PlatformProfileTaskCenterModal } from '../platform-entry/PlatformProfileTaskCenterModal'; import { PlatformProfileWalletLedgerModal } from '../platform-entry/PlatformProfileWalletLedgerModal'; import type { ExternalGenerationQueueStatus } from '../platform-entry/platformExternalGenerationQueueStatusModel'; import { getInitialPlatformDesktopLayout } from '../platform-entry/platformEntryResponsive'; import { type ProfilePopupPanel, - type RechargePaymentResult, usePlatformProfileCenterController, } from '../platform-entry/usePlatformProfileCenterController'; import { ResolvedAssetImage } from '../ResolvedAssetImage'; @@ -2465,9 +2466,6 @@ function cropAvatarImage(params: { }); } -const PROFILE_MODAL_OVERLAY_CLASS = - 'platform-modal-backdrop !items-center !justify-center !px-4 !py-6'; - function ProfileNicknameModal({ value, error, @@ -2536,49 +2534,6 @@ function ProfileNicknameModal({ ); } -function RechargePaymentResultModal({ - result, - onClose, -}: { - result: RechargePaymentResult; - onClose: () => void; -}) { - const status = - result.kind === 'success' - ? 'success' - : result.kind === 'pending' - ? 'loading' - : result.kind === 'cancel' - ? 'cancel' - : 'error'; - - return ( - - ); -} - -function RechargePaymentConfirmationMask({ orderId }: { orderId: string }) { - return ( - undefined} - closeDisabled - zIndexClassName="z-[95]" - overlayClassName={PROFILE_MODAL_OVERLAY_CLASS} - /> - ); -} - export function RpgEntryHomeView({ activeTab, activeDesktopNavTab, @@ -4920,14 +4875,14 @@ export function RpgEntryHomeView({ /> ) : null; const rechargePaymentResultModal: ReactNode = rechargePaymentResult ? ( - setRechargePaymentResult(null)} /> ) : null; const rechargePaymentConfirmationMask: ReactNode = wechatRechargeOrderConfirmationState ? ( - ) : null; diff --git a/src/index.css b/src/index.css index b027c8b5c..3192164aa 100644 --- a/src/index.css +++ b/src/index.css @@ -4096,6 +4096,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { overflow: hidden; background: #ffffff; color: #1f2937; + --image-canvas-brand-accent: var(--platform-accent, #c7653d); + --image-canvas-brand-accent-strong: #6f2f21; + --image-canvas-brand-fill: var( + --platform-button-primary-fill, + linear-gradient(135deg, #df7f40, #b95d3a) + ); + --image-canvas-brand-text-on-fill: var(--platform-button-primary-text, #fffaf5); + --image-canvas-brand-border: rgba(204, 117, 76, 0.34); + --image-canvas-brand-border-strong: rgba(199, 101, 61, 0.64); + --image-canvas-brand-border-soft: rgba(226, 203, 184, 0.82); + --image-canvas-brand-soft: rgba(234, 204, 179, 0.28); + --image-canvas-brand-soft-strong: rgba(238, 208, 183, 0.46); + --image-canvas-brand-shadow: rgba(182, 98, 63, 0.16); + --image-canvas-brand-focus-ring: rgba(204, 117, 76, 0.18); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; @@ -4171,7 +4185,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { min-width: 15.5rem; flex-direction: column; overflow: hidden; - border-right: 1px solid #d9dee8; + border-right: 1px solid var(--image-canvas-brand-border-soft); background: #ffffff; } @@ -4181,7 +4195,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { align-items: center; justify-content: space-between; gap: 0.75rem; - border-bottom: 1px solid #d9dee8; + border-bottom: 1px solid var(--image-canvas-brand-border-soft); padding: 0.65rem; } @@ -4209,7 +4223,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: inline-flex; align-items: center; justify-content: center; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); background: #ffffff; color: #334155; transition: @@ -4224,9 +4238,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__bottom-toolbar button:hover, .image-canvas-editor__reset-button:hover { transform: translateY(-1px); - border-color: #8fb8ff; - background: #eef5ff; - color: #1d4ed8; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__icon-button { @@ -4274,7 +4288,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__folder-rename-input { height: 1.8rem; - border: 1px solid #8fb8ff; + border: 1px solid var(--image-canvas-brand-border-strong); border-radius: 0.35rem; background: #ffffff; padding: 0 0.45rem; @@ -4297,9 +4311,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__asset-folder-header button:hover { - border-color: #d9dee8; - background: #f8fafc; - color: #1d4ed8; + border-color: var(--image-canvas-brand-border); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__asset-folder-header span { @@ -4316,9 +4330,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__asset-folder--move-target > .image-canvas-editor__asset-folder-header { - border-color: #93c5fd; - background: #eff6ff; - color: #1d4ed8; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__asset-folder-sticky-target { @@ -4329,14 +4343,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; - border: 1px solid #93c5fd; + border: 1px solid var(--image-canvas-brand-border-strong); border-radius: 0.45rem; - background: #eff6ff; + background: var(--image-canvas-brand-soft); padding: 0.38rem 0.5rem; - color: #1d4ed8; + color: var(--image-canvas-brand-accent-strong); font-size: 0.78rem; font-weight: 880; - box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12); + box-shadow: 0 10px 24px var(--image-canvas-brand-shadow); } .image-canvas-editor__asset-folder-sticky-target span { @@ -4370,24 +4384,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__asset-row:hover { transform: translateY(-1px); - border-color: #8fb8ff; - background: #eef5ff; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); } .image-canvas-editor__asset-row--selected { - border-color: #2563eb; - background: #dbeafe; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft-strong); } .image-canvas-editor__asset-row--uploading { - border-color: #bfdbfe; - background: #f8fbff; + border-color: var(--image-canvas-brand-border); + background: rgba(255, 250, 245, 0.96); } .image-canvas-editor__asset-row--uploading:hover { transform: none; - border-color: #93c5fd; - background: #f8fbff; + border-color: var(--image-canvas-brand-border-strong); + background: rgba(255, 250, 245, 0.96); } .image-canvas-editor__asset-row--upload-failed { @@ -4400,11 +4414,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { z-index: 80; max-width: 11rem; transform: translate(-50%, -50%); - border: 1px solid #bfdbfe; + border: 1px solid var(--image-canvas-brand-border); border-radius: 999px; background: rgba(255, 255, 255, 0.96); padding: 0.4rem 0.65rem; - color: #1d4ed8; + color: var(--image-canvas-brand-accent-strong); font-size: 0.78rem; font-weight: 880; pointer-events: none; @@ -4417,7 +4431,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: grid; place-items: center; background: rgba(248, 250, 252, 0.74); - color: #1d4ed8; + color: var(--image-canvas-brand-accent-strong); font-size: 0.72rem; font-weight: 880; } @@ -4450,7 +4464,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__asset-upload-progress progress::-webkit-progress-value { - background: #2563eb; + background: var(--image-canvas-brand-accent); } .image-canvas-editor__asset-batch-toolbar { @@ -4463,16 +4477,16 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__asset-marquee { position: absolute; z-index: 4; - border: 1px solid #2563eb; - background: rgb(37 99 235 / 0.12); + border: 1px solid var(--image-canvas-brand-accent); + background: rgba(204, 117, 76, 0.12); pointer-events: none; } .image-canvas-editor__canvas-marquee { position: absolute; z-index: 7; - border: 1px solid #2563eb; - background: rgb(37 99 235 / 0.12); + border: 1px solid var(--image-canvas-brand-accent); + background: rgba(204, 117, 76, 0.12); pointer-events: none; } @@ -4483,9 +4497,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { place-items: center; align-content: center; gap: 0.25rem; - border: 1px dashed #60a5fa; - background: rgba(239, 246, 255, 0.72); - color: #1d4ed8; + border: 1px dashed var(--image-canvas-brand-border-strong); + background: rgba(255, 244, 236, 0.76); + color: var(--image-canvas-brand-accent-strong); text-align: center; pointer-events: none; backdrop-filter: blur(2px); @@ -4636,7 +4650,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__asset-rename-input { min-width: 0; height: 1.8rem; - border: 1px solid #8fb8ff; + border: 1px solid var(--image-canvas-brand-border-strong); border-radius: 0.35rem; background: #ffffff; padding: 0 0.45rem; @@ -4658,7 +4672,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { height: 1.9rem; align-items: center; justify-content: center; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.42rem; background: #ffffff; color: #475569; @@ -4666,9 +4680,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__asset-actions button:hover, .image-canvas-editor__folder-create button:hover { - border-color: #8fb8ff; + border-color: var(--image-canvas-brand-border-strong); background: #ffffff; - color: #1d4ed8; + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__folder-create { @@ -4676,7 +4690,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.35rem; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.45rem; background: #f8fafc; padding: 0.4rem; @@ -4685,7 +4699,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__folder-create-input { min-width: 0; height: 2rem; - border: 1px solid #8fb8ff; + border: 1px solid var(--image-canvas-brand-border-strong); border-radius: 0.35rem; background: #ffffff; padding: 0 0.5rem; @@ -4730,8 +4744,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__layer-row:hover, .image-canvas-editor__layer-row--selected { - border-color: #8fb8ff; - background: #eef5ff; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); } .image-canvas-editor__layer-row-thumb { @@ -4779,7 +4793,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { align-items: center; justify-content: space-between; gap: 0.55rem; - border-bottom: 1px solid #d9dee8; + border-bottom: 1px solid var(--image-canvas-brand-border-soft); background: #ffffff; padding: 0.36rem 0.58rem; } @@ -4859,9 +4873,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__shortcut-row dt > span { flex: 0 0 auto; border-radius: 999px; - background: #e0f2fe; + background: var(--image-canvas-brand-soft); padding: 0.08rem 0.34rem; - color: #0369a1; + color: var(--image-canvas-brand-accent-strong); font-size: 0.62rem; font-weight: 900; } @@ -4983,6 +4997,19 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { font-weight: 860; line-height: 1; white-space: nowrap; + transition: + transform 160ms ease, + background-color 160ms ease, + border-color 160ms ease, + box-shadow 160ms ease; +} + +.image-canvas-editor__wallet-chip:hover, +.image-canvas-editor__wallet-chip:focus-visible { + transform: translateY(-1px); + border-color: rgba(214, 184, 159, 0.92); + background: rgba(255, 250, 244, 0.96); + box-shadow: 0 0.28rem 0.78rem rgba(112, 62, 32, 0.12); } .image-canvas-editor__wallet-chip img { @@ -5006,7 +5033,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__zoom-trigger { min-width: 4.15rem; height: 2.25rem; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.45rem; background: #ffffff; padding: 0 0.65rem; @@ -5017,9 +5044,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__zoom-trigger:hover { transform: translateY(-1px); - border-color: #8fb8ff; - background: #eef5ff; - color: #1d4ed8; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__zoom-menu-item { @@ -5055,7 +5082,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { flex: 0 0 auto; align-self: center; border-radius: 999px; - background: #d9dee8; + background: var(--image-canvas-brand-border-soft); } .image-canvas-editor__floating-toolbar-divider { @@ -5195,7 +5222,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { justify-content: flex-end; gap: 0.3rem; border-radius: 0.85rem; - background: linear-gradient(135deg, #0f172a, #263449); + background: linear-gradient(135deg, #6f2f21, #b95d3a); padding: 0.7rem; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18); } @@ -5306,7 +5333,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__layer--hovered, .image-canvas-editor__layer--selected { - border-color: #4bb5aa; + border-color: var(--image-canvas-brand-accent); } .image-canvas-editor__layer--selected { @@ -5366,7 +5393,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__generation-frame--focused { - border-color: #2f7df6; + border-color: var(--image-canvas-brand-accent); } .image-canvas-editor__generation-frame-label, @@ -5376,7 +5403,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: inline-flex; align-items: center; gap: 0.25rem; - color: #2f7df6; + color: var(--image-canvas-brand-accent); font-size: 0.76rem; font-weight: 850; line-height: 1; @@ -5482,10 +5509,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { ), linear-gradient( 135deg, - rgba(240, 247, 255, 0.92), + rgba(255, 247, 241, 0.94), rgba(232, 236, 244, 0.95) ); - color: #2563eb; + color: var(--image-canvas-brand-accent); cursor: progress; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12), @@ -5504,7 +5531,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { ), repeating-linear-gradient( 135deg, - rgba(47, 125, 246, 0.08) 0 0.4rem, + rgba(204, 117, 76, 0.1) 0 0.4rem, transparent 0.4rem 0.85rem ); animation: image-canvas-generation-scan 1.7s linear infinite; @@ -5514,7 +5541,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { .image-canvas-editor__generation-frame-label, .image-canvas-editor__generation-frame--generating .image-canvas-editor__generation-frame-size { - color: #2563eb; + color: var(--image-canvas-brand-accent); } .image-canvas-editor__generation-frame--generating @@ -5523,11 +5550,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { z-index: 1; width: 5.5rem; aspect-ratio: 1; - border: 1px solid rgba(37, 99, 235, 0.18); + border: 1px solid var(--image-canvas-brand-border); border-radius: 1.6rem; background: rgba(255, 255, 255, 0.78); - color: rgba(37, 99, 235, 0.58); - box-shadow: 0 18px 32px rgba(37, 99, 235, 0.12); + color: rgba(199, 101, 61, 0.68); + box-shadow: 0 18px 32px var(--image-canvas-brand-shadow); } .image-canvas-editor__generation-frame-progress { @@ -5538,15 +5565,15 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: inline-flex; align-items: center; gap: 0.45rem; - border: 1px solid rgba(37, 99, 235, 0.18); + border: 1px solid var(--image-canvas-brand-border); border-radius: 999px; background: rgba(255, 255, 255, 0.86); padding: 0.34rem 0.7rem; - color: #1d4ed8; + color: var(--image-canvas-brand-accent-strong); font-size: 0.76rem; font-weight: 850; transform: translateX(-50%); - box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12); + box-shadow: 0 12px 24px var(--image-canvas-brand-shadow); } .image-canvas-editor__generation-frame-progress::before { @@ -5646,21 +5673,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__generation-frame--quick-edit { - border-color: rgba(99, 102, 241, 0.28); + border-color: var(--image-canvas-brand-border); background: - linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.08)), + linear-gradient(135deg, rgba(204, 117, 76, 0.12), rgba(240, 203, 169, 0.12)), rgba(255, 255, 255, 0.72); } .image-canvas-editor__generation-frame--quick-edit.image-canvas-editor__generation-frame--focused { box-shadow: - 0 0 0 1px rgba(99, 102, 241, 0.26), - 0 22px 54px rgba(99, 102, 241, 0.18); + 0 0 0 1px var(--image-canvas-brand-border), + 0 22px 54px var(--image-canvas-brand-shadow); } .image-canvas-editor__generation-frame--quick-edit .image-canvas-editor__generation-frame-icon { - color: rgba(79, 70, 229, 0.62); + color: rgba(199, 101, 61, 0.72); } .image-canvas-editor__generation-frame--publication { @@ -5692,14 +5719,15 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { height: 1.35rem; place-items: center; border-radius: 999px; - background: rgba(16, 15, 14, 0.78); - color: #ffffff; + border-color: rgba(255, 255, 255, 0.42); + background: rgba(199, 101, 61, 0.92); + color: var(--image-canvas-brand-text-on-fill); transform: scale(var(--image-canvas-editor-inverse-scale, 1)); transform-origin: top right; } .image-canvas-editor__metadata-corner:hover { - background: rgba(3, 105, 161, 0.88); + background: #b95d3a; } .image-canvas-editor__metadata-corner--beside-spec { @@ -5719,14 +5747,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { align-items: center; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 999px; - background: rgba(37, 99, 235, 0.9); + background: rgba(199, 101, 61, 0.92); padding: 0.22rem 0.5rem; color: #ffffff; font-size: 0.72rem; font-weight: 900; line-height: 1; letter-spacing: 0.04em; - box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); + box-shadow: 0 8px 18px var(--image-canvas-brand-shadow); pointer-events: none; } @@ -5761,8 +5789,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__kind-badge--spec { - background: rgba(37, 99, 235, 0.9); - box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); + background: rgba(199, 101, 61, 0.92); + box-shadow: 0 8px 18px var(--image-canvas-brand-shadow); } .image-canvas-editor__kind-badge--character { @@ -5835,8 +5863,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__kind-menu-item--active { - background: #eff6ff; - color: #1d4ed8; + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__size-badge { @@ -5845,8 +5873,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { top: var(--image-canvas-editor-corner-offset, 0.35rem); z-index: 2; border-color: rgba(255, 255, 255, 0.16); - background: rgba(16, 15, 14, 0.82); - color: #ffffff; + background: rgba(111, 47, 33, 0.88); + color: var(--image-canvas-brand-text-on-fill); white-space: nowrap; transform: scale(var(--image-canvas-editor-inverse-scale, 1)); transform-origin: top left; @@ -5858,7 +5886,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: inline-flex; align-items: center; gap: 0.3rem; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.5rem; background: #ffffff; padding: 0.28rem; @@ -5892,7 +5920,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { width: 8.25rem; height: 5.25rem; overflow: hidden; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.92); padding: 0; @@ -5922,7 +5950,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__minimap-viewport { - border: 1.5px solid #aeb7c5; + border: 1.5px solid var(--image-canvas-brand-border-strong); background: rgba(255, 255, 255, 0.2); } @@ -5933,7 +5961,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { z-index: 18; display: inline-flex; gap: 0.35rem; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.5rem; background: #ffffff; padding: 0.35rem; @@ -5946,7 +5974,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { height: 2.25rem; align-items: center; justify-content: center; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.45rem; background: #ffffff; color: #334155; @@ -6136,8 +6164,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__background-preset[aria-pressed='true'] { - border-color: #38bdf8; - background: #e0f2fe; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); } .image-canvas-editor__background-preset @@ -6198,17 +6226,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__background-reset:hover { - border-color: #38bdf8; - background: #eff6ff; - color: #0369a1; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__panel-dock button:hover, .image-canvas-editor__panel-dock button[aria-pressed='true'] { transform: translateY(-1px); - border-color: #38bdf8; - background: #e0f2fe; - color: #0369a1; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__bottom-toolbar { @@ -6220,7 +6248,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { gap: 0.35rem; max-width: min(calc(100% - 6.6rem), 34rem); overflow-x: auto; - border: 1px solid #d9dee8; + border: 1px solid var(--image-canvas-brand-border-soft); border-radius: 0.5rem; background: #ffffff; padding: 0.35rem; @@ -6229,9 +6257,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__bottom-toolbar button[aria-pressed='true'] { - border-color: #38bdf8; - background: #e0f2fe; - color: #0369a1; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__bottom-toolbar-option-wrap, @@ -6322,6 +6350,13 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { outline: none; } +.image-canvas-editor__generation-prompt:focus, +.image-canvas-editor__video-prompt:focus { + border-color: var(--image-canvas-brand-border-strong); + background: #ffffff; + box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring); +} + .image-canvas-editor__generation-prompt::placeholder { color: #94a3b8; } @@ -6790,8 +6825,10 @@ button.image-canvas-editor__reference-chip:disabled { } .image-canvas-editor__option-popover-choice[aria-pressed='true'] { - border-color: #202124; - box-shadow: inset 0 0 0 1px #202124; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); + box-shadow: inset 0 0 0 1px var(--image-canvas-brand-border-strong); } .image-canvas-editor__option-popover--audio-options { @@ -6810,7 +6847,7 @@ button.image-canvas-editor__reference-chip:disabled { .image-canvas-editor__audio-bpm-control input[type='range'] { width: 100%; - accent-color: #4f46e5; + accent-color: var(--image-canvas-brand-accent); } .image-canvas-editor__video-duration-slider { @@ -6822,11 +6859,11 @@ button.image-canvas-editor__reference-chip:disabled { .image-canvas-editor__video-duration-slider input[type='range'] { width: 100%; - accent-color: #111827; + accent-color: var(--image-canvas-brand-accent); } .image-canvas-editor__video-duration-slider span { - color: #111827; + color: var(--image-canvas-brand-accent-strong); font-size: 0.82rem; font-weight: 760; text-align: right; @@ -6873,12 +6910,12 @@ button.image-canvas-editor__reference-chip:disabled { } .image-canvas-editor__video-toggle[aria-pressed='true'] { - border-color: #202124; - box-shadow: inset 0 0 0 1px #202124; + border-color: var(--image-canvas-brand-border-strong); + box-shadow: inset 0 0 0 1px var(--image-canvas-brand-border-strong); } .image-canvas-editor__video-toggle[aria-pressed='true'] span { - background: #111827; + background: var(--image-canvas-brand-accent); } .image-canvas-editor__video-toggle[aria-pressed='true'] span::after { @@ -6898,8 +6935,8 @@ button.image-canvas-editor__reference-chip:disabled { } .image-canvas-editor__audio-bpm-control input[type='number']:focus { - border-color: rgba(79, 70, 229, 0.42); - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); + border-color: var(--image-canvas-brand-border-strong); + box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring); } .image-canvas-editor__option-popover-choice--model { @@ -6940,7 +6977,7 @@ button.image-canvas-editor__reference-chip:disabled { width: 0.92rem; height: 0.92rem; justify-self: end; - color: #111827; + color: var(--image-canvas-brand-accent-strong); stroke-width: 3; } @@ -7026,9 +7063,9 @@ button.image-canvas-editor__reference-chip:disabled { .image-canvas-editor__generation-composer .platform-inline-option-button[aria-pressed='true'] { - border-color: rgba(15, 23, 42, 0.14); - background: #0f172a; - color: #ffffff; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-fill); + color: var(--image-canvas-brand-text-on-fill); } .image-canvas-editor__generation-submit { @@ -7037,14 +7074,14 @@ button.image-canvas-editor__reference-chip:disabled { height: 2.25rem; gap: 0.4rem; border: 0; - background: #0f172a; - color: #ffffff; + background: var(--image-canvas-brand-fill); + color: var(--image-canvas-brand-text-on-fill); font-size: 0.82rem; font-weight: 820; } .image-canvas-editor__generation-submit:not(:disabled) { - color: #ffffff; + color: var(--image-canvas-brand-text-on-fill); } .image-canvas-editor__generation-submit:disabled { @@ -7494,8 +7531,8 @@ button.image-canvas-editor__reference-chip:disabled { } .image-canvas-editor__context-menu button:hover:not(:disabled) { - background: #eef6ff; - color: #0f4a87; + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__context-menu button:disabled { @@ -7699,15 +7736,15 @@ button.image-canvas-editor__reference-chip:disabled { } .image-canvas-editor__crop-expand-ratio:hover { - border-color: rgba(59, 130, 246, 0.46); - background: #eff6ff; - color: #1d4ed8; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__crop-expand-ratio--selected { - border-color: rgba(37, 99, 235, 0.76); - background: #dbeafe; - color: #1d4ed8; + border-color: var(--image-canvas-brand-border-strong); + background: var(--image-canvas-brand-soft-strong); + color: var(--image-canvas-brand-accent-strong); } .image-canvas-editor__crop-expand-ratio-shape { @@ -7802,10 +7839,10 @@ button.image-canvas-editor__reference-chip:disabled { position: absolute; z-index: 999; box-sizing: border-box; - border: 2px solid #38bdf8; + border: 2px solid var(--image-canvas-brand-accent); background: - linear-gradient(90deg, rgba(14, 165, 233, 0.2) 1px, transparent 1px), - linear-gradient(rgba(14, 165, 233, 0.2) 1px, transparent 1px); + linear-gradient(90deg, rgba(204, 117, 76, 0.2) 1px, transparent 1px), + linear-gradient(rgba(204, 117, 76, 0.2) 1px, transparent 1px); background-size: 33.333% 33.333%; box-shadow: 0 0 0 99999px rgba(15, 23, 42, 0.18), @@ -7826,8 +7863,8 @@ button.image-canvas-editor__reference-chip:disabled { height: 1rem; border: 2px solid #ffffff; border-radius: 999px; - background: #0ea5e9; - box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28); + background: var(--image-canvas-brand-accent); + box-shadow: 0 6px 16px var(--image-canvas-brand-shadow); pointer-events: auto; touch-action: none; } @@ -7954,8 +7991,8 @@ button.image-canvas-editor__reference-chip:disabled { height: 2.25rem; gap: 0.4rem; border: 0; - background: #0f172a; - color: #ffffff; + background: var(--image-canvas-brand-fill); + color: var(--image-canvas-brand-text-on-fill); } .image-canvas-editor__snap-guide { @@ -8024,9 +8061,9 @@ button.image-canvas-editor__reference-chip:disabled { } .image-canvas-editor__generate-prompt:focus { - border-color: #38bdf8; + border-color: var(--image-canvas-brand-border-strong); background: #ffffff; - box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); + box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring); } .image-canvas-editor__generate-status { @@ -15826,6 +15863,16 @@ button { box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important; } +.image-canvas-editor .image-canvas-editor__metadata-corner { + border-color: rgba(255, 255, 255, 0.42) !important; + background: rgba(199, 101, 61, 0.92) !important; + color: var(--image-canvas-brand-text-on-fill) !important; +} + +.image-canvas-editor .image-canvas-editor__metadata-corner:hover { + background: #b95d3a !important; +} + .image-canvas-editor__generation-composer .image-canvas-editor__option-cluster { min-height: 2.25rem; background: transparent;