ksv741
5b2c6bb7cb
TD-010: use readable semantic text colors on financial surfaces while preserving signs and state meanings.
378 lines
6.7 KiB
JSON
378 lines
6.7 KiB
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
|
|
}
|
|
}
|
|
}
|