From 81a35cc9beacf416e69d9175eb2eb184e101154b Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Thu, 30 Apr 2026 16:26:17 +0300 Subject: [PATCH] fix(app): theme remaining ui color tokens --- src/app.css | 20 +++++++++++++++++++ src/components/CodePanel.vue | 18 ++++++++--------- .../CollabPanel/CollabSharePopover.vue | 4 ++-- src/components/properties/ExportSection.vue | 3 ++- src/components/ui/picker-slider.ts | 2 +- src/components/ui/toast.ts | 9 +++++---- 6 files changed, 39 insertions(+), 17 deletions(-) diff --git a/src/app.css b/src/app.css index 31e5d2f5e..b6b5485cc 100644 --- a/src/app.css +++ b/src/app.css @@ -42,6 +42,16 @@ --color-warning-border: rgb(245 158 11 / 0.3); --color-warning-text: #fde68a; --color-warning-action: #fcd34d; + --color-success: #4ade80; + --color-success-bg: #16a34a; + --color-success-bg-hover: #15803d; + --color-code-tag: #7dd3fc; + --color-code-attribute: #c4b5fd; + --color-code-string: #86efac; + --color-code-number: #fca5a5; + --color-code-punctuation: #888888; + --color-checkerboard: #3a3a3a; + --color-checkerboard-muted: #4a4a4a; } html[data-theme='light'] { @@ -58,6 +68,16 @@ html[data-theme='light'] { --color-warning-border: rgb(245 158 11 / 0.32); --color-warning-text: #92400e; --color-warning-action: #78350f; + --color-success: #15803d; + --color-success-bg: #16a34a; + --color-success-bg-hover: #15803d; + --color-code-tag: #0369a1; + --color-code-attribute: #6d28d9; + --color-code-string: #15803d; + --color-code-number: #b91c1c; + --color-code-punctuation: #64748b; + --color-checkerboard: #d1d5db; + --color-checkerboard-muted: #e5e7eb; } html, diff --git a/src/components/CodePanel.vue b/src/components/CodePanel.vue index d35717e76..8d8c9cc72 100644 --- a/src/components/CodePanel.vue +++ b/src/components/CodePanel.vue @@ -76,7 +76,7 @@ function copyReference() { title="Copy JSX prop reference to clipboard" @click="copyReference" > - + @@ -115,25 +115,25 @@ function copyReference() { diff --git a/src/components/CollabPanel/CollabSharePopover.vue b/src/components/CollabPanel/CollabSharePopover.vue index 5768eeb09..e923f672a 100644 --- a/src/components/CollabPanel/CollabSharePopover.vue +++ b/src/components/CollabPanel/CollabSharePopover.vue @@ -19,9 +19,9 @@ const cls = usePopoverUI({ content: 'z-50 w-72 p-3' }) class="flex h-7 cursor-pointer items-center gap-1.5 rounded-md border-none px-3 text-xs font-medium transition-colors" :class=" collab.state.connected - ? 'bg-green-600 text-white hover:bg-green-700' + ? 'bg-[var(--color-success-bg)] text-white hover:bg-[var(--color-success-bg-hover)]' : collab.isJoining - ? 'animate-pulse bg-amber-600 text-white' + ? 'animate-pulse border border-[var(--color-warning-border)] bg-[var(--color-warning-bg)] text-[var(--color-warning-text)]' : 'bg-accent text-white hover:bg-accent/90' " > diff --git a/src/components/properties/ExportSection.vue b/src/components/properties/ExportSection.vue index 27b93acf3..4e6442f87 100644 --- a/src/components/properties/ExportSection.vue +++ b/src/components/properties/ExportSection.vue @@ -186,7 +186,8 @@ onScopeDispose(() => { class="block w-full" style=" image-rendering: auto; - background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 16px 16px; + background: repeating-conic-gradient(var(--color-checkerboard) 0% 25%, transparent 0% 50%) + 50% / 16px 16px; " /> diff --git a/src/components/ui/picker-slider.ts b/src/components/ui/picker-slider.ts index 133dab8b7..ab8439ddb 100644 --- a/src/components/ui/picker-slider.ts +++ b/src/components/ui/picker-slider.ts @@ -16,7 +16,7 @@ const pickerSlider = tv({ checkerboard: { true: { track: - 'bg-[#333] bg-[image:linear-gradient(45deg,#444_25%,transparent_25%),linear-gradient(-45deg,#444_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#444_75%),linear-gradient(-45deg,transparent_75%,#444_75%)] bg-[size:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0]' + 'bg-[var(--color-checkerboard)] bg-[image:linear-gradient(45deg,var(--color-checkerboard-muted)_25%,transparent_25%),linear-gradient(-45deg,var(--color-checkerboard-muted)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,var(--color-checkerboard-muted)_75%),linear-gradient(-45deg,transparent_75%,var(--color-checkerboard-muted)_75%)] bg-[size:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0]' }, false: {} } diff --git a/src/components/ui/toast.ts b/src/components/ui/toast.ts index f36dc773f..faeb6f9aa 100644 --- a/src/components/ui/toast.ts +++ b/src/components/ui/toast.ts @@ -4,12 +4,13 @@ import { tv } from 'tailwind-variants' import type { ToastVariant } from '@/app/shell/ui' const toast = tv({ - base: 'flex max-w-sm items-start gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-white shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1 data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)]', + base: 'flex max-w-sm items-start gap-1.5 rounded-md px-2.5 py-1.5 text-xs shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1 data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)]', variants: { tone: { - default: 'bg-blue-600', - warning: 'bg-amber-600', - error: 'bg-red-600' + default: 'bg-accent text-white', + warning: + 'border border-[var(--color-warning-border)] bg-[var(--color-warning-bg)] text-[var(--color-warning-text)]', + error: 'bg-red-600 text-white' } }, defaultVariants: { tone: 'default' }