@krometra/ui-kit 0.6.1 → 0.7.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.7.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` |
 | `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,17 @@ yarn tokens       # перегенерировать src/tokens.css из theme.j
 Витрина живёт в `demo/Showcase.vue` и служит и документацией, и площадкой для
 визуальной проверки при изменении токенов.
 
+## Что изменилось в 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,38 @@ var Uy = /*#__PURE__*/ M({
 		accentHover: "#000000",
 		accentSoft: "#f4f4f5",
 		neutral: "plain"
+	},
+	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 +15167,11 @@ var Uy = /*#__PURE__*/ M({
 		sm: "12px",
 		md: "16px",
 		lg: "28px"
+	},
+	square: {
+		sm: "0px",
+		md: "0px",
+		lg: "0px"
 	}
 }, Yy = {
 	compact: {
@@ -15188,12 +15225,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 +15257,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 ?? i.accent, f = r ? ob(d, .12) : d, p = {
+		"--k-primary": f,
+		"--k-primary-hover": t.accentHover ?? (r ? ob(f, .14) : t.accent ? ab(f, -.12) : i.accentHover),
+		"--k-primary-soft": t.accentSoft ?? (r ? sb(f, a.surface, .22) : t.accent ? ob(f, .92) : i.accentSoft),
+		"--k-on-primary": cb(f),
 		"--k-bg": a.bg,
 		"--k-surface": a.surface,
 		"--k-surface-muted": a.surfaceMuted,
@@ -15223,7 +15273,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(f, a.surface, r ? .4 : .2),
 		"--k-radius-sm": o.sm,
 		"--k-radius": o.md,
 		"--k-radius-lg": o.lg,
@@ -15233,10 +15283,10 @@ function $y(e = {}) {
 		"--k-shadow-sm": c.sm,
 		"--k-shadow-md": c.md,
 		"--k-shadow-lg": c.lg,
-		"--k-font": l
+		"--k-font": u
 	};
-	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(qy[n])) p[`--k-${e}`] = t.base, p[`--k-${e}-hover`] = t.hover, p[`--k-${e}-soft`] = t.soft ?? sb(t.base, a.surface, .18), p[`--k-${e}-strong`] = t.strong, p[`--k-on-${e}`] = cb(t.base);
+	return p;
 }
 function eb(e = {}, t = null) {
 	let n = t ?? (typeof document < "u" ? document.documentElement : null);