fix: update some styles

2026-09-01 21:16:54 +05:00
parent d38d51c7d9
commit 191ca71553
7 changed files with 24 additions and 16 deletions
@@ -0,0 +1,144 @@
+@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";
+
+/* Порядок cascade-слоёв (дубль из корневого +layout.svelte — идемпотентен и
+   страхует случай, когда design2.css грузится раньше корневого layout): */
+@layer app, design;
+
+/* Новый дизайн — слой design. В слое design правила выигрывают у того же
+   правила из слоя app (старый app.css) по слою, а не по порядку <link>,
+   поэтому утечка app.css на /preview при SPA-переходе не перебивает design2. */
+@layer design {
+	/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
+	*,
+	*::before,
+	*::after,
+	::backdrop {
+		box-sizing: border-box;
+		border: 0 solid;
+		margin: 0;
+		padding: 0;
+	}
+
+	* {
+		border-color: var(--line);
+	}
+
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+	}
+
+	/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
+	   (Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
+	html {
+		color-scheme: light dark;
+		font-family: var(--font-sans);
+		-webkit-text-size-adjust: 100%;
+		line-height: 1.5;
+	}
+
+	body {
+		font-family: var(--font-sans);
+		color: var(--foreground);
+		background: var(--background);
+		-webkit-font-smoothing: antialiased;
+		text-rendering: optimizeLegibility;
+	}
+
+	button,
+	input,
+	select,
+	optgroup,
+	textarea {
+		font: inherit;
+		font-feature-settings: inherit;
+		font-variation-settings: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+		opacity: 1;
+		background-color: #0000;
+		border-radius: 0;
+	}
+
+	button,
+	input:where([type="button"], [type="reset"], [type="submit"]) {
+		appearance: button;
+	}
+
+	/* Перебивки глобальных правил старого app.css (слой app ниже), чтобы при
+	   утечке app.css на /preview новый дизайн не получал старую типографику.
+	   Пустые — заполни при необходимости. */
+	a,
+	a:hover {
+		color: inherit;
+		text-decoration: none;
+	}
+	h1,
+	h2 {
+		font-size: revert;
+		line-height: revert;
+		letter-spacing: revert;
+	}
+	p,
+	label {
+		font-size: revert;
+	}
+	:focus-visible {
+		outline: revert;
+	}
+	svg {
+		vertical-align: middle;
+	}
+
+	/* Новый дизайн: токены (§2 плана redesign).
+	   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
+	   глобально не конфликтует со старым app.css. */
+
+	:root {
+		--font-sans: "IBM Plex Sans", sans-serif;
+		--font-mono: "IBM Plex Mono", monospace;
+
+		--background: #eef1f4;
+		--background-muted: #dce2e7;
+		--checker-background: #e4e8eb;
+		--checker-background-cross: #d2d8dc;
+
+		--panel: #f8fafb;
+		--foreground: #17212b;
+		--muted: #6d7883;
+		--line: #cbd3da;
+
+		--blue: #1769d2;
+		--cyan: #00a8c7;
+		--amber: #bd7411;
+		--success: rgb(35, 131, 84);
+		--success2: rgb(37, 169, 106);
+		--danger: #e5484d;
+
+		--radius: 4px;
+	}
+
+	[data-theme="dark"] {
+		--background: #11171d;
+		--background-muted: #1e2a3447;
+		--checker-background: #202a31;
+		--checker-background-cross: #29343c;
+
+		--panel: #182129;
+		--foreground: #e8eef2;
+		--muted: #91a0ac;
+		--line: #33414c;
+
+		--blue: #54a2ff;
+		--cyan: #00a8c7;
+		--amber: #bd7411;
+		--success: #25a96a;
+		--danger: #ff7479;
+	}
+}