forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Toolbar spacing and colors

Browse Source
This commit is contained in:
Sidharth Vinod
2025-03-13 10:26:14 -07:00
parent 3d279652b4
commit 21644297d1
10 changed files with 55 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.postcss
+5 -5
View File
@@ -12,14 +12,14 @@
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 240 10% 91%;
--primary-foreground: 255 20% 15%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 340 100% 44%;
--accent-foreground: 210 40% 98%;
--destructive: 0 72.22% 50.59%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
@@ -40,7 +40,7 @@
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent: 340 100% 44%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
src/lib/components/FloatingToolbar.svelte
+1 -1
View File
@@ -8,6 +8,6 @@
let { children }: Props = $props();
</script>
<div class="flex items-center justify-between gap-2 rounded-2xl bg-muted p-2">
<div class="flex h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3">
{@render children()}
</div>
src/lib/components/Navbar.svelte
+1 -1
View File
@@ -89,7 +89,7 @@
</div>
{/if}
<nav class="z-50 flex p-4 px-6">
<nav class="z-50 flex p-6">
<div class="flex flex-1 items-center gap-4">
<Button variant="link" size="icon" href="/">
<img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
src/lib/components/PanZoomToolbar.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import type { PanZoomState } from '$/util/panZoom';
import ExpandIcon from '~icons/material-symbols/arrow-range';
import ExpandIcon from '~icons/material-symbols/open-in-full-rounded';
import ArrowsToCircleIcon from '~icons/material-symbols/screenshot-frame-2';
import MagnifyingGlassPlusIcon from '~icons/material-symbols/zoom-in';
import MagnifyingGlassMinusIcon from '~icons/material-symbols/zoom-out';
@@ -24,6 +24,6 @@
</Button>
<Separator orientation="vertical" />
<Button variant="ghost" size="icon" title="Full Screen">
<ExpandIcon class="-rotate-45" />
<ExpandIcon />
</Button>
</FloatingToolbar>
src/lib/components/SyncRoughToolbar.svelte
+17 -11
View File
@@ -4,11 +4,15 @@
import { slide } from 'svelte/transition';
import SyncIcon from '~icons/fa6-solid/arrows-rotate';
import FloatingToolbar from './FloatingToolbar.svelte';
import { Button } from './ui/button';
import { Separator } from './ui/separator';
import { Switch } from './ui/switch';
</script>
<FloatingToolbar>
<label class="label flex cursor-pointer items-center gap-2" for="rough">
<span>Hand-Drawn</span>
<Switch
bind:checked={$inputStateStore.rough}
onclick={() => {
@@ -16,22 +20,24 @@
syncDiagram();
}
}}
name="rough" />
<span>Hand drawn</span>
id="rough" />
</label>
<Separator orientation="vertical" />
<label class="label flex cursor-pointer items-center gap-2" for="autoSync">
<Switch bind:checked={$inputStateStore.autoSync} name="autoSync" />
<span> Auto sync</span>
<span>Auto-Sync</span>
<Switch bind:checked={$inputStateStore.autoSync} id="autoSync" />
</label>
{#if !$stateStore.autoSync}
<button
transition:slide={{ axis: 'x' }}
class="btn btn-secondary btn-xs ml-2"
title="Sync Diagram ({cmdKey} + Enter)"
aria-label="Sync Diagram"
data-cy="sync"
onclick={syncDiagram}><SyncIcon /></button>
<div transition:slide={{ axis: 'x' }}>
<Button
size="icon"
title="Sync Diagram ({cmdKey} + Enter)"
aria-label="Sync Diagram"
data-cy="sync"
onclick={syncDiagram}><SyncIcon /></Button>
</div>
{/if}
</FloatingToolbar>
src/lib/components/VersionSecurityToolbar.svelte
+4 -4
View File
@@ -1,16 +1,16 @@
<script lang="ts">
import { version } from 'mermaid/package.json';
import QuestionCircleIcon from '~icons/fa6-solid/circle-question';
import ShieldHalvedIcon from '~icons/fa6-solid/shield-halved';
import QuestionCircleIcon from '~icons/material-symbols/help-outline-rounded';
import ShieldIcon from '~icons/material-symbols/shield-lock-outline-rounded';
import FloatingToolbar from './FloatingToolbar.svelte';
import { Button } from './ui/button';
import { Separator } from './ui/separator';
</script>
<FloatingToolbar>
<span class="text-sm opacity-50">v{version}</span>
<span class="text-sm font-semibold opacity-60">v{version}</span>
<Button variant="ghost" size="icon" title="Privacy & Security">
<ShieldHalvedIcon />
<ShieldIcon />
</Button>
<Separator orientation="vertical" />
src/lib/components/View.svelte
+17 -1
View File
@@ -7,6 +7,7 @@
import { logEvent, saveStatistics } from '$lib/util/stats';
import { cmdKey } from '$lib/util/util';
import type { MermaidConfig } from 'mermaid';
import { mode } from 'mode-watcher';
import { onMount } from 'svelte';
import { Svg2Roughjs } from 'svg2roughjs';
import SyncIcon from '~icons/fa6-solid/arrows-rotate';
@@ -153,7 +154,12 @@
</div>
{/if}
<div id="view" bind:this={view} class="h-full p-2" class:error class:outOfSync>
<div
id="view"
bind:this={view}
class="grid-bg-{$mode === 'dark' ? 'dark' : 'light'} h-full"
class:error
class:outOfSync>
<div id="container" bind:this={container} class="h-full overflow-auto" class:hide></div>
</div>
@@ -174,4 +180,14 @@
.hide {
visibility: hidden;
}
.grid-bg-light {
background-size: 30px 30px;
background-image: radial-gradient(circle, #e4e4e789 2px, rgba(0, 0, 0, 0) 2px);
}
.grid-bg-dark {
background-size: 30px 30px;
background-image: radial-gradient(circle, #46464646 2px, rgba(0, 0, 0, 0) 2px);
}
</style>
src/lib/components/ui/button/button.svelte
+4 -4
View File
@@ -4,22 +4,22 @@
import { type VariantProps, tv } from 'tailwind-variants';
export const buttonVariants = tv({
base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0',
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
outline:
'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
ghost: 'hover:bg-accent hover:text-accent-foreground',
ghost: 'hover:bg-primary hover:text-primary-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
icon: 'size-8'
}
},
defaultVariants: {
src/lib/components/ui/switch/switch.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
bind:ref
bind:checked
class={cn(
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-input',
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-primary/50',
className
)}
{...restProps}>
src/lib/components/ui/toggle/toggle.svelte
+3 -3
View File
@@ -2,12 +2,12 @@
import { type VariantProps, tv } from 'tailwind-variants';
export const toggleVariants = tv({
base: 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
base: 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-primary data-[state=on]:text-primary-foreground inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0',
variants: {
variant: {
default: 'bg-transparent',
outline:
'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm'
'border-input hover:bg-primary/80 hover:text-primary-foreground border bg-transparent'
},
size: {
default: 'h-9 min-w-9 px-3',
@@ -27,8 +27,8 @@
</script>
<script lang="ts">
import { Toggle as TogglePrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { Toggle as TogglePrimitive } from 'bits-ui';
let {
ref = $bindable(null),