frontend/packages/tokens/tokens.json

{
	"formatVersion": 1,
	"description": "Переносимые токены WealthLedger. Размеры px адаптируются к масштабу runtime; breakpoints em не масштабируются. Светлая схема; роли с shade null используют primaryShade.light для палитры или base color без оттенка.",
	"color": {
		"base": {
			"white": "#fff",
			"black": "#000"
		},
		"palettes": {
			"blue": [
				"#eff6ff",
				"#dbeafe",
				"#bfdbfe",
				"#93c5fd",
				"#60a5fa",
				"#3b82f6",
				"#2563eb",
				"#1d4ed8",
				"#1e40af",
				"#1e3a8a"
			],
			"gray": [
				"#f8f9fa",
				"#f1f3f5",
				"#e9ecef",
				"#dee2e6",
				"#ced4da",
				"#adb5bd",
				"#868e96",
				"#495057",
				"#343a40",
				"#212529"
			],
			"dark": [
				"#C9C9C9",
				"#b8b8b8",
				"#828282",
				"#696969",
				"#424242",
				"#3b3b3b",
				"#2e2e2e",
				"#242424",
				"#1f1f1f",
				"#141414"
			],
			"green": [
				"#ebfbee",
				"#d3f9d8",
				"#b2f2bb",
				"#8ce99a",
				"#69db7c",
				"#51cf66",
				"#40c057",
				"#37b24d",
				"#2f9e44",
				"#237032"
			],
			"red": [
				"#fff5f5",
				"#ffe3e3",
				"#ffc9c9",
				"#ffa8a8",
				"#ff8787",
				"#ff6b6b",
				"#fa5252",
				"#f03e3e",
				"#e03131",
				"#c92a2a"
			],
			"yellow": [
				"#fff9db",
				"#fff3bf",
				"#ffec99",
				"#ffe066",
				"#ffd43b",
				"#fcc419",
				"#fab005",
				"#f59f00",
				"#f08c00",
				"#e67700"
			],
			"grape": [
				"#f8f0fc",
				"#f3d9fa",
				"#eebefa",
				"#e599f7",
				"#da77f2",
				"#cc5de8",
				"#be4bdb",
				"#ae3ec9",
				"#9c36b5",
				"#862e9c"
			],
			"orange": [
				"#fff4e6",
				"#ffe8cc",
				"#ffd8a8",
				"#ffc078",
				"#ffa94d",
				"#ff922b",
				"#fd7e14",
				"#f76707",
				"#e8590c",
				"#d9480f"
			]
		},
		"primaryShade": {
			"light": 6,
			"dark": 8
		},
		"roles": {
			"canvas": {
				"color": "gray",
				"shade": 2,
				"description": "Фон приложения"
			},
			"surface": {
				"color": "white",
				"shade": null,
				"description": "Поверхность Paper / формы"
			},
			"subtle": {
				"color": "gray",
				"shade": 0,
				"description": "Приглушённая поверхность сводки"
			},
			"text": {
				"color": "dark",
				"shade": 7,
				"description": "Основной текст страницы"
			},
			"muted": {
				"color": "gray",
				"shade": 6,
				"description": "Вторичный текст; проверяйте контраст при выборе фона"
			},
			"border": {
				"color": "gray",
				"shade": 3,
				"description": "Граница поверхности"
			},
			"primary": {
				"color": "blue",
				"shade": null,
				"description": "Основное действие и активная навигация"
			},
			"info": {
				"color": "blue",
				"shade": 6,
				"description": "Информационное сообщение"
			},
			"positive": {
				"color": "green",
				"shade": 9,
				"description": "Положительный результат; дополните знаком и текстом"
			},
			"negative": {
				"color": "red",
				"shade": 9,
				"description": "Ошибка / отрицательный результат; дополните текстом"
			},
			"warning": {
				"color": "yellow",
				"shade": 6,
				"description": "Предупреждение; не мелкий текст на белом фоне"
			}
		}
	},
	"typography": {
		"fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
		"fontFamilyMonospace": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
		"unit": "px",
		"fontSizes": {
			"xs": 12.0,
			"sm": 14.0,
			"md": 16.0,
			"lg": 18.0,
			"xl": 20.0
		},
		"fontWeights": {
			"regular": 400,
			"medium": 600,
			"bold": 700
		},
		"lineHeights": {
			"xs": 1.4,
			"sm": 1.45,
			"md": 1.55,
			"lg": 1.6,
			"xl": 1.65
		},
		"headings": {
			"h1": {
				"fontSize": 34.0,
				"lineHeight": 1.3
			},
			"h2": {
				"fontSize": 26.0,
				"lineHeight": 1.35
			},
			"h3": {
				"fontSize": 22.0,
				"lineHeight": 1.4
			},
			"h4": {
				"fontSize": 18.0,
				"lineHeight": 1.45
			},
			"h5": {
				"fontSize": 16.0,
				"lineHeight": 1.5
			},
			"h6": {
				"fontSize": 14.0,
				"lineHeight": 1.5
			}
		}
	},
	"spacing": {
		"unit": "px",
		"values": {
			"xs": 10.0,
			"sm": 12.0,
			"md": 16.0,
			"lg": 20.0,
			"xl": 32.0
		}
	},
	"radius": {
		"unit": "px",
		"default": "md",
		"values": {
			"xs": 2.0,
			"sm": 4.0,
			"md": 8.0,
			"lg": 16.0,
			"xl": 32.0
		}
	},
	"shadows": {
		"unit": "px",
		"values": {
			"xs": [
				{
					"offsetX": 0.0,
					"offsetY": 1.0,
					"blur": 3.0,
					"spread": 0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 1.0,
					"blur": 2.0,
					"spread": 0,
					"color": "black",
					"opacity": 0.1
				}
			],
			"sm": [
				{
					"offsetX": 0.0,
					"offsetY": 1.0,
					"blur": 3.0,
					"spread": 0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 10.0,
					"blur": 15.0,
					"spread": -5.0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 7.0,
					"blur": 7.0,
					"spread": -5.0,
					"color": "black",
					"opacity": 0.04
				}
			],
			"md": [
				{
					"offsetX": 0.0,
					"offsetY": 1.0,
					"blur": 3.0,
					"spread": 0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 20.0,
					"blur": 25.0,
					"spread": -5.0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 10.0,
					"blur": 10.0,
					"spread": -5.0,
					"color": "black",
					"opacity": 0.04
				}
			],
			"lg": [
				{
					"offsetX": 0.0,
					"offsetY": 1.0,
					"blur": 3.0,
					"spread": 0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 28.0,
					"blur": 23.0,
					"spread": -7.0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 12.0,
					"blur": 12.0,
					"spread": -7.0,
					"color": "black",
					"opacity": 0.04
				}
			],
			"xl": [
				{
					"offsetX": 0.0,
					"offsetY": 1.0,
					"blur": 3.0,
					"spread": 0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 36.0,
					"blur": 28.0,
					"spread": -7.0,
					"color": "black",
					"opacity": 0.05
				},
				{
					"offsetX": 0.0,
					"offsetY": 17.0,
					"blur": 17.0,
					"spread": -7.0,
					"color": "black",
					"opacity": 0.04
				}
			]
		}
	},
	"breakpoints": {
		"unit": "em",
		"values": {
			"xs": 36.0,
			"sm": 48.0,
			"md": 62.0,
			"lg": 75.0,
			"xl": 88.0
		}
	}
}