SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix(app): theme remaining ui color tokens

Browse source
This commit is contained in:
Danila Poyarkov 2026-04-30 16:26:17 +03:00
parent a54c94c6a8
commit 81a35cc9be
6 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/app.css
View file

@ -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,

18
src/components/CodePanel.vue
View file

@ -76,7 +76,7 @@ function copyReference() {
title="Copy JSX prop reference to clipboard"
@click="copyReference"
>
<icon-lucide-check v-if="copiedRef" class="size-3 text-green-400" />
<icon-lucide-check v-if="copiedRef" class="size-3 text-[var(--color-success)]" />
<icon-lucide-book-open v-else class="size-3" />
</button>
<button
@ -84,7 +84,7 @@ function copyReference() {
class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-muted hover:bg-hover hover:text-surface"
@click="copyCode"
>
<icon-lucide-check v-if="copied" class="size-3 text-green-400" />
<icon-lucide-check v-if="copied" class="size-3 text-[var(--color-success)]" />
<icon-lucide-copy v-else class="size-3" />
{{ copied ? dialogs.copied : dialogs.copy }}
</button>
@ -115,25 +115,25 @@ function copyReference() {
<style scoped>
.token.tag {
color: #7dd3fc;
color: var(--color-code-tag);
}
.token.attr-name {
color: #c4b5fd;
color: var(--color-code-attribute);
}
.token.attr-value,
.token.string {
color: #86efac;
color: var(--color-code-string);
}
.token.number {
color: #fca5a5;
color: var(--color-code-number);
}
.token.punctuation {
color: #888;
color: var(--color-code-punctuation);
}
.token.boolean {
color: #fca5a5;
color: var(--color-code-number);
}
.token.keyword {
color: #c4b5fd;
color: var(--color-code-attribute);
}
</style>

4
src/components/CollabPanel/CollabSharePopover.vue
View file

@ -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'
"
>

3
src/components/properties/ExportSection.vue
View file

@ -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;
"
/>
</div>

2
src/components/ui/picker-slider.ts
View file

@ -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: {}
}

9
src/components/ui/toast.ts
View file

@ -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' }