From 418a091505d80e4b2798a80740906d2d215c2488 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Thu, 27 Aug 2026 19:23:30 +0500 Subject: [PATCH] feat: add new design2.css, add fonts --- docs/plan-redesign.md | 2 +- web/package.json | 2 ++ web/pnpm-lock.yaml | 16 +++++++++++++ web/src/lib/styles/design2.css | 43 ++++++++++++++++++++++++++++++++++ 4 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 web/src/lib/styles/design2.css diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md index 9c77905..429e26a 100644 --- a/docs/plan-redesign.md +++ b/docs/plan-redesign.md @@ -300,7 +300,7 @@ src/routes/preview/tools/[id]/+page.svelte ### Шаг 1. Фундамент нового дизайна -- [ ] **[C3]** Создать `src/lib/styles/design2.css` (токены `:root` + `[data-theme='dark']` по §2) и подключить `@fontsource/ibm-plex-sans` + `@fontsource/ibm-plex-mono` (self-host, offline-first). +- [x] **[C3]** Создать `src/lib/styles/design2.css` (токены `:root` + `[data-theme='dark']` по §2) и подключить `@fontsource/ibm-plex-sans` + `@fontsource/ibm-plex-mono` (self-host, offline-first). подключить шрифты в `design2.css` (self-host, offline-first). - [x] **[C4]** _(слит в C3: шрифты нельзя подключить до создания `design2.css`)_ `[data-theme='dark']` (таблица §2). Без утилитарных классов. diff --git a/web/package.json b/web/package.json index a9b6ae5..27d7100 100644 --- a/web/package.json +++ b/web/package.json @@ -23,6 +23,8 @@ "vitest": "^4.1.11" }, "dependencies": { + "@fontsource/ibm-plex-mono": "^5.3.0", + "@fontsource/ibm-plex-sans": "^5.3.0", "@lucide/svelte": "^1.33.0" } } diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 96e0974..5134a16 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@fontsource/ibm-plex-mono': + specifier: ^5.3.0 + version: 5.3.0 + '@fontsource/ibm-plex-sans': + specifier: ^5.3.0 + version: 5.3.0 '@lucide/svelte': specifier: ^1.33.0 version: 1.33.0(svelte@5.56.9) @@ -39,6 +45,12 @@ importers: packages: + '@fontsource/ibm-plex-mono@5.3.0': + resolution: {integrity: sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==} + + '@fontsource/ibm-plex-sans@5.3.0': + resolution: {integrity: sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==} + '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} @@ -617,6 +629,10 @@ packages: snapshots: + '@fontsource/ibm-plex-mono@5.3.0': {} + + '@fontsource/ibm-plex-sans@5.3.0': {} + '@jridgewell/gen-mapping@0.3.13': dependencies: '@jridgewell/sourcemap-codec': 1.5.5 diff --git a/web/src/lib/styles/design2.css b/web/src/lib/styles/design2.css new file mode 100644 index 0000000..143389b --- /dev/null +++ b/web/src/lib/styles/design2.css @@ -0,0 +1,43 @@ +@import '@fontsource/ibm-plex-sans/400.css'; +@import '@fontsource/ibm-plex-sans/500.css'; +@import '@fontsource/ibm-plex-sans/600.css'; +@import '@fontsource/ibm-plex-sans/700.css'; +@import '@fontsource/ibm-plex-mono/400.css'; +@import '@fontsource/ibm-plex-mono/500.css'; + +/* Новый дизайн: токены (§2 плана redesign). + Файл грузится только layout'ом новой ветки (preview/+layout), поэтому + глобально не конфликтует со старым app.css. */ + +:root { + --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; + --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; + + --background: #eef1f4; + --panel: #f8fafb; + --foreground: #17212b; + --muted: #6d7883; + --line: #cbd3da; + + --blue: #1769d2; + --cyan: #00a8c7; + --amber: #bd7411; + --success: #25a96a; + --danger: #e5484d; + + --radius: 4px; +} + +[data-theme='dark'] { + --background: #11171d; + --panel: #182129; + --foreground: #e8eef2; + --muted: #91a0ac; + --line: #33414c; + + --blue: #54a2ff; + --cyan: #00a8c7; + --amber: #bd7411; + --success: #25a96a; + --danger: #ff7479; +}