diff options
| -rw-r--r-- | pnpm-lock.yaml | 14 | ||||
| -rw-r--r-- | web/package.json | 7 | ||||
| -rw-r--r-- | web/src/components/grid/drawGrid.ts | 6 | ||||
| -rw-r--r-- | web/src/components/toolbar/index.css | 36 | ||||
| -rw-r--r-- | web/src/index.css | 6 |
5 files changed, 29 insertions, 40 deletions
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ba7893e..3f72d83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,16 +26,13 @@ importers: web: dependencies: - open-color: - specifier: ^1.9.1 - version: 1.9.1 + tailwindcss: + specifier: ^4.1.16 + version: 4.1.16 devDependencies: '@tailwindcss/vite': specifier: ^4.1.16 version: 4.1.16(vite@7.1.12(jiti@2.6.1)(lightningcss@1.30.2)) - tailwindcss: - specifier: ^4.1.16 - version: 4.1.16 vite: specifier: ^7.1.12 version: 7.1.12(jiti@2.6.1)(lightningcss@1.30.2) @@ -554,9 +551,6 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - open-color@1.9.1: - resolution: {integrity: sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -1066,8 +1060,6 @@ snapshots: nanoid@3.3.11: {} - open-color@1.9.1: {} - picocolors@1.1.1: {} picomatch@4.0.3: {} diff --git a/web/package.json b/web/package.json index a565e36..d845c29 100644 --- a/web/package.json +++ b/web/package.json @@ -4,12 +4,11 @@ "scripts": { "dev": "vite --clearScreen false" }, - "dependencies": { - "open-color": "^1.9.1" - }, "devDependencies": { "@tailwindcss/vite": "^4.1.16", - "tailwindcss": "^4.1.16", "vite": "^7.1.12" + }, + "dependencies": { + "tailwindcss": "^4.1.16" } } diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts index 01240b5..8e64479 100644 --- a/web/src/components/grid/drawGrid.ts +++ b/web/src/components/grid/drawGrid.ts @@ -5,7 +5,7 @@ import { RenderedCell, RenderedGrid } from "./renderGrid"; function fillBackground(ctx: CanvasRenderingContext2D, grid: RenderedGrid) { ctx.clearRect(0, 0, grid.rect.width, grid.rect.height); - ctx.fillStyle = colors.neutral[800]; + ctx.fillStyle = colors.neutral[900]; ctx.fillRect(0, 0, grid.rect.width, grid.rect.height); } @@ -15,7 +15,7 @@ function strokeGrid(ctx: CanvasRenderingContext2D, grid: RenderedGrid) { } function strokeGridLines(ctx: CanvasRenderingContext2D, grid: RenderedGrid) { - ctx.strokeStyle = colors.neutral[700]; + ctx.strokeStyle = colors.neutral[800]; grid.renderedRows.forEach((row, renderedRowIndex) => { const isLastRow = renderedRowIndex === grid.renderedRows.length - 1; @@ -72,7 +72,7 @@ function drawSelection( // cell.rect.height - 1, // ); - ctx.strokeStyle = colors.green[600]; + ctx.strokeStyle = colors.green[400]; ctx.lineWidth = 2; ctx.strokeRect( diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css index 3f78671..b580fbf 100644 --- a/web/src/components/toolbar/index.css +++ b/web/src/components/toolbar/index.css @@ -1,41 +1,35 @@ ntv-toolbar { display: flex; - border-radius: 4px; - background: var(--color-neutral-800); + border-radius: 99999px; + background: var(--color-neutral-900); width: min-content; } ntv-toolbar > section { display: flex; - gap: 0.5rem; - padding: 0.5rem; + gap: 0.25rem; + padding: 0.325rem; } -ntv-toolbar button[data-variant="menu"] { - border-radius: 4px; - background: var(--color-neutral-700); - padding: 0 0.625rem; - height: 1.5rem; +ntv-toolbar button { + border-radius: 99999px; + background: var(--color-neutral-800); + padding: 0 0.5rem; + height: 1.25rem; color: white; font-size: 0.75rem; } +ntv-toolbar button:hover { + background: var(--color-neutral-700); +} + ntv-toolbar button[data-variant="icon"] { display: flex; justify-content: center; align-items: center; - border-radius: 4px; - background: var(--color-neutral-700); - padding: 0.125rem 0.625rem; aspect-ratio: 1; - height: 1.5rem; - color: white; - font-weight: 600; - font-size: 0.75rem; -} - -ntv-toolbar button:hover { - background: var(--color-neutral-600); + height: 1.25rem; } ntv-toolbar input { @@ -43,7 +37,7 @@ ntv-toolbar input { border-radius: 4px; background: var(--color-neutral-900); width: 2.5rem; - height: 1.5rem; + height: 1.25rem; color: white; font-size: 0.75rem; text-align: center; diff --git a/web/src/index.css b/web/src/index.css index 4fe2764..bd5ebf3 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1,5 +1,9 @@ @import "tailwindcss"; body { - background: var(--color-neutral-900); + background: var(--color-neutral-800); +} + +*:focus-visible { + outline: 2px solid var(--color-green-400); } |