@krometra/ui-kit 0.7.0 → 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.7.0
+npm install github:krometra/ui-kit#v0.8.0
 ```
 
 Публикация в npm происходит по тегу `v*`, если задан секрет `NPM_TOKEN`.
@@ -71,7 +71,7 @@ const stop = applyTheme({ scheme: 'system' })           // следовать з
 
 | Ось | Значения |
 |---|---|
-| `preset` | `default`, `scanflow`, `slate`, `ocean`, `forest`, `violet`, `amber`, `rose`, `mono`, `blocky` |
+| `preset` | `default`, `scanflow`, `slate`, `ocean`, `forest`, `violet`, `amber`, `rose`, `mono`, `blocky`, `bordeaux` |
 | `scheme` | `light`, `dark`, `system` |
 | `neutral` | `cool`, `warm`, `plain` |
 | `radius` | `square`, `sharp`, `subtle`, `default`, `soft`, `pill` |
@@ -191,6 +191,14 @@ yarn tokens       # перегенерировать src/tokens.css из theme.j
 Витрина живёт в `demo/Showcase.vue` и служит и документацией, и площадкой для
 визуальной проверки при изменении токенов.
 
+## Что изменилось в 0.8.0
+
+- Тема `bordeaux` - бордовый акцент на тёплом розовато-сером фоне, свои
+  зелёный, синий и красный статусов и шрифт Golos Text (подключается в
+  приложении, иначе - системный), в светлой и тёмной схеме.
+- Пресет может задать `accentOverrides` и `semanticOverrides` по схемам: точный
+  акцент и цвета статусов вместо вычисленных. Остальные пресеты не изменились.
+
 ## Что изменилось в 0.7.0
 
 - Тема `blocky` - мультяшная «блочная»: травяной акцент, земляные нейтрали,

package/dist/ui-kit.js

@@ -14994,6 +14994,83 @@ var Uy = /*#__PURE__*/ M({
 		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",
@@ -15257,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 ?? 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),
+	}, 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,
@@ -15273,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(f, 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,
@@ -15284,9 +15361,12 @@ function $y(e = {}) {
 		"--k-shadow-md": c.md,
 		"--k-shadow-lg": c.lg,
 		"--k-font": u
+	}, h = {
+		...qy[n],
+		...i.semanticOverrides?.[n]
 	};
-	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;
+	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);