@krometra/ui-kit 0.6.1 → 0.8.0

package/README.md

@@ -7,7 +7,7 @@ UI-kit на Vue 3 со сменными темами оформления, св
 
 **Витрина и конструктор темы: <https://krometra.github.io/ui-kit/>**
 
-37 компонентов, 88 иконок, девять готовых тем, две цветовые схемы и конструктор
+37 компонентов, 88 иконок, одиннадцать готовых тем, две цветовые схемы и конструктор
 своей темы. Разметка и поведение компонентов одни и те же, а стилистика
 подбирается под проект: цвет, нейтрали, скругления, плотность, тени и шрифт
 задаются CSS-переменными.
@@ -17,7 +17,7 @@ UI-kit на Vue 3 со сменными темами оформления, св
 ```bash
 npm install @krometra/ui-kit
 # или из репозитория (скрипт `prepare` собирает `dist/`)
-npm install github:krometra/ui-kit#v0.6.1
+npm install github:krometra/ui-kit#v0.8.0
 ```
 
 Публикация в npm происходит по тегу `v*`, если задан секрет `NPM_TOKEN`.
@@ -71,15 +71,19 @@ const stop = applyTheme({ scheme: 'system' })           // следовать з
 
 | Ось | Значения |
 |---|---|
-| `preset` | `default`, `scanflow`, `slate`, `ocean`, `forest`, `violet`, `amber`, `rose`, `mono` |
+| `preset` | `default`, `scanflow`, `slate`, `ocean`, `forest`, `violet`, `amber`, `rose`, `mono`, `blocky`, `bordeaux` |
 | `scheme` | `light`, `dark`, `system` |
 | `neutral` | `cool`, `warm`, `plain` |
-| `radius` | `sharp`, `subtle`, `default`, `soft`, `pill` |
+| `radius` | `square`, `sharp`, `subtle`, `default`, `soft`, `pill` |
 | `density` | `compact`, `default`, `comfortable` |
-| `elevation` | `flat`, `default`, `lifted` |
-| `font` | `system`, `grotesk`, `serif`, `mono` или своя строка |
+| `elevation` | `flat`, `default`, `lifted`, `hard` |
+| `font` | `system`, `grotesk`, `serif`, `mono`, `rounded` или своя строка |
 | `bg`, `surface`, `text`, `textMuted`, `textFaint` | свой цвет фона, поверхности и текста поверх нейтральной палитры (hex) |
 
+Пресет может принести свои скругления, плотность, тени и шрифт: `blocky` сразу
+включает `radius: 'square'`, `elevation: 'hard'` и `font: 'rounded'`. Ось,
+заданная в теме явно, важнее пресета.
+
 Не заданные оси наследуются из `tokens.css`, поэтому частичная тема — обычный
 способ настройки. `applyTheme` выставляет `data-k-scheme` и `color-scheme` на
 `<html>` и возвращает функцию отката; при `scheme: 'system'` она же снимает
@@ -187,6 +191,25 @@ yarn tokens       # перегенерировать src/tokens.css из theme.j
 Витрина живёт в `demo/Showcase.vue` и служит и документацией, и площадкой для
 визуальной проверки при изменении токенов.
 
+## Что изменилось в 0.8.0
+
+- Тема `bordeaux` - бордовый акцент на тёплом розовато-сером фоне, свои
+  зелёный, синий и красный статусов и шрифт Golos Text (подключается в
+  приложении, иначе - системный), в светлой и тёмной схеме.
+- Пресет может задать `accentOverrides` и `semanticOverrides` по схемам: точный
+  акцент и цвета статусов вместо вычисленных. Остальные пресеты не изменились.
+
+## Что изменилось в 0.7.0
+
+- Тема `blocky` - мультяшная «блочная»: травяной акцент, земляные нейтрали,
+  прямые углы и жёсткие тени без размытия, в светлой и тёмной схеме.
+- Новые значения осей: `radius: 'square'` (без скруглений), `elevation: 'hard'`
+  (тень-ступенька), `font: 'rounded'` (скруглённый шрифт; в Chromium нужен
+  подключённый Nunito, `ui-rounded` понимает только Safari).
+- Пресет может задавать `radius`, `density`, `elevation` и `font`; ось, заданная
+  в теме явно, важнее. Существующие пресеты эти оси не задают и не изменились.
+- Витрина: выбор пресета подтягивает его оси в конструктор.
+
 ## Что изменилось в 0.6.1
 
 - `KInput`: `size="sm"` - компактное поле внутри строки текста или таблицы,

package/dist/ui-kit.js

@@ -14993,6 +14993,115 @@ var Uy = /*#__PURE__*/ M({
 		accentHover: "#000000",
 		accentSoft: "#f4f4f5",
 		neutral: "plain"
+	},
+	bordeaux: {
+		label: "Bordeaux",
+		accent: "#8a3a48",
+		accentHover: "#73303c",
+		accentSoft: "#f3e6e8",
+		neutral: "warm",
+		font: "'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif",
+		accentOverrides: { dark: {
+			accent: "#e3929e",
+			accentHover: "#eaa9b3",
+			accentSoft: "#33242a"
+		} },
+		semanticOverrides: {
+			light: {
+				success: {
+					base: "#2c7656",
+					hover: "#235f45",
+					soft: "#e3f1ea",
+					strong: "#2c7656"
+				},
+				info: {
+					base: "#3b6286",
+					hover: "#2f4f6c",
+					soft: "#e5edf5",
+					strong: "#3b6286"
+				},
+				danger: {
+					base: "#b03a37",
+					hover: "#922f2d",
+					soft: "#fbe8e6",
+					strong: "#b03a37"
+				}
+			},
+			dark: {
+				success: {
+					base: "#72c9a2",
+					hover: "#8fd6b6",
+					soft: "#1b3228",
+					strong: "#72c9a2"
+				},
+				info: {
+					base: "#94b8db",
+					hover: "#adc9e4",
+					soft: "#1c2936",
+					strong: "#94b8db"
+				},
+				danger: {
+					base: "#f08d83",
+					hover: "#f4a69e",
+					soft: "#3a2220",
+					strong: "#f08d83"
+				}
+			}
+		},
+		neutralOverrides: {
+			light: {
+				bg: "#f6f4f4",
+				surface: "#ffffff",
+				surfaceMuted: "#faf8f8",
+				border: "#e3dcdd",
+				borderStrong: "#cdc3c4",
+				text: "#1e2327",
+				textMuted: "#5f666c",
+				textFaint: "#959ca1"
+			},
+			dark: {
+				bg: "#15181b",
+				surface: "#1d2125",
+				surfaceMuted: "#24292e",
+				border: "#30353a",
+				borderStrong: "#454b52",
+				text: "#ebe7e7",
+				textMuted: "#a3a9ae",
+				textFaint: "#737a80"
+			}
+		}
+	},
+	blocky: {
+		label: "Blocky",
+		accent: "#4f8a25",
+		accentHover: "#3f711c",
+		accentSoft: "#e8f3dc",
+		neutral: "warm",
+		radius: "square",
+		elevation: "hard",
+		font: "rounded",
+		neutralOverrides: {
+			light: {
+				bg: "#e7e1d3",
+				surface: "#fbf8f1",
+				surfaceMuted: "#f1ebdf",
+				border: "#cdc3ae",
+				borderStrong: "#8a7a5c",
+				text: "#2b2418",
+				textMuted: "#675a43",
+				textFaint: "#9a8c72"
+			},
+			dark: {
+				bg: "#1b1814",
+				surface: "#27231d",
+				surfaceMuted: "#302b24",
+				border: "#443d32",
+				borderStrong: "#6b5f4c",
+				text: "#efe8da",
+				textMuted: "#b2a58c",
+				textFaint: "#7c715f"
+			}
+		}
 	}
 }, Ky = {
 	cool: {
@@ -15135,6 +15244,11 @@ var Uy = /*#__PURE__*/ M({
 		sm: "12px",
 		md: "16px",
 		lg: "28px"
+	},
+	square: {
+		sm: "0px",
+		md: "0px",
+		lg: "0px"
 	}
 }, Yy = {
 	compact: {
@@ -15188,12 +15302,25 @@ var Uy = /*#__PURE__*/ M({
 			md: "0 8px 24px rgba(0, 0, 0, 0.55)",
 			lg: "0 24px 60px rgba(0, 0, 0, 0.7)"
 		}
+	},
+	hard: {
+		light: {
+			sm: "0 3px 0 rgba(43, 36, 24, 0.28)",
+			md: "0 4px 0 rgba(43, 36, 24, 0.16)",
+			lg: "0 8px 0 rgba(43, 36, 24, 0.22)"
+		},
+		dark: {
+			sm: "0 3px 0 rgba(0, 0, 0, 0.55)",
+			md: "0 4px 0 rgba(0, 0, 0, 0.45)",
+			lg: "0 8px 0 rgba(0, 0, 0, 0.6)"
+		}
 	}
 }, Zy = {
 	system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
 	grotesk: "'Inter', 'Segoe UI', system-ui, sans-serif",
 	serif: "'Georgia', 'Times New Roman', serif",
-	mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace"
+	mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",
+	rounded: "ui-rounded, 'SF Pro Rounded', 'Nunito', 'Varela Round', 'Segoe UI', system-ui, sans-serif"
 };
 function Qy(e = "light") {
 	return e === "system" ? typeof window > "u" || !window.matchMedia ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e === "dark" ? "dark" : "light";
@@ -15207,11 +15334,11 @@ function $y(e = {}) {
 		...t.text ? { text: t.text } : {},
 		...t.textMuted ? { textMuted: t.textMuted } : {},
 		...t.textFaint ? { textFaint: t.textFaint } : {}
-	}, o = Jy[t.radius] ?? Jy.default, s = Yy[t.density] ?? Yy.default, c = (Xy[t.elevation] ?? Xy.default)[n], l = Zy[t.font] ?? t.font ?? Zy.system, u = t.accent ?? i.accent, d = r ? ob(u, .12) : u, f = {
-		"--k-primary": d,
-		"--k-primary-hover": t.accentHover ?? (r ? ob(d, .14) : t.accent ? ab(d, -.12) : i.accentHover),
-		"--k-primary-soft": t.accentSoft ?? (r ? sb(d, a.surface, .22) : t.accent ? ob(d, .92) : i.accentSoft),
-		"--k-on-primary": cb(d),
+	}, o = Jy[t.radius ?? i.radius] ?? Jy.default, s = Yy[t.density ?? i.density] ?? Yy.default, c = (Xy[t.elevation ?? i.elevation] ?? Xy.default)[n], l = t.font ?? i.font, u = Zy[l] ?? l ?? Zy.system, d = t.accent ? null : i.accentOverrides?.[n], f = t.accent ?? i.accent, p = d?.accent ?? (r ? ob(f, .12) : f), m = {
+		"--k-primary": p,
+		"--k-primary-hover": t.accentHover ?? d?.accentHover ?? (r ? ob(p, .14) : t.accent ? ab(p, -.12) : i.accentHover),
+		"--k-primary-soft": t.accentSoft ?? d?.accentSoft ?? (r ? sb(p, a.surface, .22) : t.accent ? ob(p, .92) : i.accentSoft),
+		"--k-on-primary": cb(p),
 		"--k-bg": a.bg,
 		"--k-surface": a.surface,
 		"--k-surface-muted": a.surfaceMuted,
@@ -15223,7 +15350,7 @@ function $y(e = {}) {
 		"--k-overlay": r ? "rgba(0, 0, 0, 0.6)" : "rgba(15, 23, 42, 0.35)",
 		"--k-tooltip-bg": r ? a.text : "#172033",
 		"--k-tooltip-text": r ? a.bg : "#ffffff",
-		"--k-selection": sb(d, a.surface, r ? .4 : .2),
+		"--k-selection": sb(p, a.surface, r ? .4 : .2),
 		"--k-radius-sm": o.sm,
 		"--k-radius": o.md,
 		"--k-radius-lg": o.lg,
@@ -15233,10 +15360,13 @@ function $y(e = {}) {
 		"--k-shadow-sm": c.sm,
 		"--k-shadow-md": c.md,
 		"--k-shadow-lg": c.lg,
-		"--k-font": l
+		"--k-font": u
+	}, h = {
+		...qy[n],
+		...i.semanticOverrides?.[n]
 	};
-	for (let [e, t] of Object.entries(qy[n])) f[`--k-${e}`] = t.base, f[`--k-${e}-hover`] = t.hover, f[`--k-${e}-soft`] = t.soft ?? sb(t.base, a.surface, .18), f[`--k-${e}-strong`] = t.strong, f[`--k-on-${e}`] = cb(t.base);
-	return f;
+	for (let [e, t] of Object.entries(h)) m[`--k-${e}`] = t.base, m[`--k-${e}-hover`] = t.hover, m[`--k-${e}-soft`] = t.soft ?? sb(t.base, a.surface, .18), m[`--k-${e}-strong`] = t.strong, m[`--k-on-${e}`] = cb(t.base);
+	return m;
 }
 function eb(e = {}, t = null) {
 	let n = t ?? (typeof document < "u" ? document.documentElement : null);