1168 lines
18 KiB
JSON
1168 lines
18 KiB
JSON
{
|
|
"scales": [
|
|
{
|
|
"name": "ink",
|
|
"alias": "primary",
|
|
"note": "Pure brand grays. Buttons, focus rings, active tabs.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#fafafa",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#f2f2f2",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#e5e5e5",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#cccccc",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#999999",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#666666",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#444444",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#333333",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#222222",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#111111",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#0a0a0a",
|
|
"dark": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "chalk",
|
|
"alias": "neutral",
|
|
"note": "Brand grays with a faint sand tint at the light end for hairlines and fills. 450 and 850 are extra steps.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#fafafa",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#f3f2f0",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#e6e4e0",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#cfccc7",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#999999",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "450",
|
|
"hex": "#8a8783",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#666666",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#444444",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#333333",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#222222",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "850",
|
|
"hex": "#1a1a1a",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#111111",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#0a0a0a",
|
|
"dark": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "sand",
|
|
"alias": "secondary",
|
|
"note": "Built around the two brand accents (200, 300). Fills only at 200/300; text uses 700.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#f7f4ef",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#f0eae1",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#e8dfd1",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#d4c5b0",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#bba88e",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#9c8a70",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#7d6d56",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#635643",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#4a4033",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#322b23",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#211c17",
|
|
"dark": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "moss",
|
|
"alias": "success",
|
|
"note": "Muted green, oklch hue 145.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#f0faf0",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#e1f3e1",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#c7e2c7",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#a3caa3",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#7fac7f",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#5f8e60",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#457347",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#315b33",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#1f4422",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#143015",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#081e0a",
|
|
"dark": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "slate",
|
|
"alias": "info",
|
|
"note": "Muted blue-gray, oklch hue 245.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#f0f8ff",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#e2effa",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#c8dcee",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#a5c2db",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#81a3c0",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#6284a2",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#486a86",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#34536d",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#223d53",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#162b3c",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#0a1a26",
|
|
"dark": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "ochre",
|
|
"alias": "warning",
|
|
"note": "Earthy amber, oklch hue 75.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#fff5e8",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#fdead1",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#f1d4ad",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#dfb67d",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#c4954f",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#a67628",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#8a5b00",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#6c4700",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#503400",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#3a2400",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#241500",
|
|
"dark": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "brick",
|
|
"alias": "error",
|
|
"note": "Brick red, oklch hue 30.",
|
|
"steps": [
|
|
{
|
|
"k": "50",
|
|
"hex": "#fef4f2",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "100",
|
|
"hex": "#ffe7e2",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "200",
|
|
"hex": "#ffcbc2",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "300",
|
|
"hex": "#fba394",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "400",
|
|
"hex": "#e37e6e",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "500",
|
|
"hex": "#c45d4e",
|
|
"dark": false
|
|
},
|
|
{
|
|
"k": "600",
|
|
"hex": "#a54134",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "700",
|
|
"hex": "#882c21",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "800",
|
|
"hex": "#6a1a11",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "900",
|
|
"hex": "#4d0f08",
|
|
"dark": true
|
|
},
|
|
{
|
|
"k": "950",
|
|
"hex": "#330503",
|
|
"dark": true
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"vars": [
|
|
{
|
|
"name": "--ui-bg",
|
|
"use": "Cards, sidebar, table, inputs",
|
|
"lr": "white",
|
|
"lh": "#ffffff",
|
|
"dr": "chalk-900",
|
|
"dh": "#111111"
|
|
},
|
|
{
|
|
"name": "--ui-bg-muted",
|
|
"use": "Page canvas behind panels",
|
|
"lr": "chalk-50",
|
|
"lh": "#fafafa",
|
|
"dr": "chalk-950",
|
|
"dh": "#0a0a0a"
|
|
},
|
|
{
|
|
"name": "--ui-bg-elevated",
|
|
"use": "Table header, hover rows, menus",
|
|
"lr": "chalk-100",
|
|
"lh": "#f3f2f0",
|
|
"dr": "chalk-850",
|
|
"dh": "#1a1a1a"
|
|
},
|
|
{
|
|
"name": "--ui-bg-accented",
|
|
"use": "Pressed, skeleton",
|
|
"lr": "chalk-200",
|
|
"lh": "#e6e4e0",
|
|
"dr": "chalk-800",
|
|
"dh": "#222222"
|
|
},
|
|
{
|
|
"name": "--ui-bg-inverted",
|
|
"use": "Tooltips, inverted badges",
|
|
"lr": "chalk-900",
|
|
"lh": "#111111",
|
|
"dr": "chalk-50",
|
|
"dh": "#fafafa"
|
|
},
|
|
{
|
|
"name": "--ui-text-dimmed",
|
|
"use": "Disabled text only",
|
|
"lr": "chalk-400",
|
|
"lh": "#999999",
|
|
"dr": "chalk-500",
|
|
"dh": "#666666"
|
|
},
|
|
{
|
|
"name": "--ui-text-muted",
|
|
"use": "Descriptions, dates, placeholders",
|
|
"lr": "chalk-500",
|
|
"lh": "#666666",
|
|
"dr": "chalk-400",
|
|
"dh": "#999999"
|
|
},
|
|
{
|
|
"name": "--ui-text-toned",
|
|
"use": "Secondary labels, nav items",
|
|
"lr": "chalk-600",
|
|
"lh": "#444444",
|
|
"dr": "chalk-300",
|
|
"dh": "#cfccc7"
|
|
},
|
|
{
|
|
"name": "--ui-text",
|
|
"use": "Body text",
|
|
"lr": "chalk-800",
|
|
"lh": "#222222",
|
|
"dr": "chalk-200",
|
|
"dh": "#e6e4e0"
|
|
},
|
|
{
|
|
"name": "--ui-text-highlighted",
|
|
"use": "Titles, table titles",
|
|
"lr": "chalk-900",
|
|
"lh": "#111111",
|
|
"dr": "chalk-50",
|
|
"dh": "#fafafa"
|
|
},
|
|
{
|
|
"name": "--ui-text-inverted",
|
|
"use": "Text on inverted fills",
|
|
"lr": "white",
|
|
"lh": "#ffffff",
|
|
"dr": "chalk-900",
|
|
"dh": "#111111"
|
|
},
|
|
{
|
|
"name": "--ui-border",
|
|
"use": "Dividers, card edges",
|
|
"lr": "chalk-200",
|
|
"lh": "#e6e4e0",
|
|
"dr": "chalk-700",
|
|
"dh": "#333333"
|
|
},
|
|
{
|
|
"name": "--ui-border-muted",
|
|
"use": "Row separators",
|
|
"lr": "chalk-100",
|
|
"lh": "#f3f2f0",
|
|
"dr": "chalk-800",
|
|
"dh": "#222222"
|
|
},
|
|
{
|
|
"name": "--ui-border-accented",
|
|
"use": "Form control borders (3:1)",
|
|
"lr": "chalk-450",
|
|
"lh": "#8a8783",
|
|
"dr": "chalk-500",
|
|
"dh": "#666666"
|
|
},
|
|
{
|
|
"name": "--ui-border-inverted",
|
|
"use": "Focus ring on inverted",
|
|
"lr": "chalk-900",
|
|
"lh": "#111111",
|
|
"dr": "chalk-50",
|
|
"dh": "#fafafa"
|
|
},
|
|
{
|
|
"name": "--ui-primary",
|
|
"use": "Primary solid, focus ring, links",
|
|
"lr": "ink-900",
|
|
"lh": "#111111",
|
|
"dr": "ink-50",
|
|
"dh": "#fafafa"
|
|
},
|
|
{
|
|
"name": "--ui-secondary",
|
|
"use": "Sand text and outlines",
|
|
"lr": "sand-700",
|
|
"lh": "#635643",
|
|
"dr": "sand-300",
|
|
"dh": "#d4c5b0"
|
|
},
|
|
{
|
|
"name": "--ui-success",
|
|
"use": "Success text and solids",
|
|
"lr": "moss-700",
|
|
"lh": "#315b33",
|
|
"dr": "moss-300",
|
|
"dh": "#a3caa3"
|
|
},
|
|
{
|
|
"name": "--ui-info",
|
|
"use": "Info text and solids",
|
|
"lr": "slate-700",
|
|
"lh": "#34536d",
|
|
"dr": "slate-300",
|
|
"dh": "#a5c2db"
|
|
},
|
|
{
|
|
"name": "--ui-warning",
|
|
"use": "Warning text and solids",
|
|
"lr": "ochre-700",
|
|
"lh": "#6c4700",
|
|
"dr": "ochre-300",
|
|
"dh": "#dfb67d"
|
|
},
|
|
{
|
|
"name": "--ui-error",
|
|
"use": "Error text and solids",
|
|
"lr": "brick-700",
|
|
"lh": "#882c21",
|
|
"dr": "brick-300",
|
|
"dh": "#fba394"
|
|
}
|
|
],
|
|
"contrast": [
|
|
{
|
|
"label": "Title on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#111111",
|
|
"bg": "#ffffff",
|
|
"ratio": 18.88
|
|
},
|
|
"dark": {
|
|
"fg": "#fafafa",
|
|
"bg": "#111111",
|
|
"ratio": 18.09
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Body on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#222222",
|
|
"bg": "#ffffff",
|
|
"ratio": 15.91
|
|
},
|
|
"dark": {
|
|
"fg": "#e6e4e0",
|
|
"bg": "#111111",
|
|
"ratio": 14.87
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Body on canvas",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#222222",
|
|
"bg": "#fafafa",
|
|
"ratio": 15.24
|
|
},
|
|
"dark": {
|
|
"fg": "#e6e4e0",
|
|
"bg": "#0a0a0a",
|
|
"ratio": 15.59
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Toned on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#444444",
|
|
"bg": "#ffffff",
|
|
"ratio": 9.74
|
|
},
|
|
"dark": {
|
|
"fg": "#cfccc7",
|
|
"bg": "#111111",
|
|
"ratio": 11.79
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Muted on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#666666",
|
|
"bg": "#ffffff",
|
|
"ratio": 5.74
|
|
},
|
|
"dark": {
|
|
"fg": "#999999",
|
|
"bg": "#111111",
|
|
"ratio": 6.63
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Muted on canvas",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#666666",
|
|
"bg": "#fafafa",
|
|
"ratio": 5.5
|
|
},
|
|
"dark": {
|
|
"fg": "#999999",
|
|
"bg": "#0a0a0a",
|
|
"ratio": 6.95
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Muted on elevated",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#666666",
|
|
"bg": "#f3f2f0",
|
|
"ratio": 5.13
|
|
},
|
|
"dark": {
|
|
"fg": "#999999",
|
|
"bg": "#1a1a1a",
|
|
"ratio": 6.11
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Dimmed (disabled, exempt)",
|
|
"need": "exempt",
|
|
"light": {
|
|
"fg": "#999999",
|
|
"bg": "#ffffff",
|
|
"ratio": 2.85
|
|
},
|
|
"dark": {
|
|
"fg": "#666666",
|
|
"bg": "#111111",
|
|
"ratio": 3.29
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Control border on surface",
|
|
"need": "3:1",
|
|
"light": {
|
|
"fg": "#8a8783",
|
|
"bg": "#ffffff",
|
|
"ratio": 3.58
|
|
},
|
|
"dark": {
|
|
"fg": "#666666",
|
|
"bg": "#111111",
|
|
"ratio": 3.29
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Primary on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#111111",
|
|
"bg": "#ffffff",
|
|
"ratio": 18.88
|
|
},
|
|
"dark": {
|
|
"fg": "#fafafa",
|
|
"bg": "#111111",
|
|
"ratio": 18.09
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Primary button label",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#ffffff",
|
|
"bg": "#111111",
|
|
"ratio": 18.88
|
|
},
|
|
"dark": {
|
|
"fg": "#111111",
|
|
"bg": "#fafafa",
|
|
"ratio": 18.09
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Focus ring on canvas",
|
|
"need": "3:1",
|
|
"light": {
|
|
"fg": "#111111",
|
|
"bg": "#fafafa",
|
|
"ratio": 18.09
|
|
},
|
|
"dark": {
|
|
"fg": "#fafafa",
|
|
"bg": "#0a0a0a",
|
|
"ratio": 18.97
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Secondary on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#635643",
|
|
"bg": "#ffffff",
|
|
"ratio": 7.14
|
|
},
|
|
"dark": {
|
|
"fg": "#d4c5b0",
|
|
"bg": "#111111",
|
|
"ratio": 11.16
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Success text on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#315b33",
|
|
"bg": "#ffffff",
|
|
"ratio": 7.85
|
|
},
|
|
"dark": {
|
|
"fg": "#a3caa3",
|
|
"bg": "#111111",
|
|
"ratio": 10.37
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Success solid label",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#ffffff",
|
|
"bg": "#315b33",
|
|
"ratio": 7.85
|
|
},
|
|
"dark": {
|
|
"fg": "#111111",
|
|
"bg": "#a3caa3",
|
|
"ratio": 10.37
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Success soft alert",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#315b33",
|
|
"bg": "#eaefeb",
|
|
"ratio": 6.75
|
|
},
|
|
"dark": {
|
|
"fg": "#a3caa3",
|
|
"bg": "#202420",
|
|
"ratio": 8.64
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Info text on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#34536d",
|
|
"bg": "#ffffff",
|
|
"ratio": 8.06
|
|
},
|
|
"dark": {
|
|
"fg": "#a5c2db",
|
|
"bg": "#111111",
|
|
"ratio": 10.2
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Info solid label",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#ffffff",
|
|
"bg": "#34536d",
|
|
"ratio": 8.06
|
|
},
|
|
"dark": {
|
|
"fg": "#111111",
|
|
"bg": "#a5c2db",
|
|
"ratio": 10.2
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Info soft alert",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#34536d",
|
|
"bg": "#ebeef0",
|
|
"ratio": 6.92
|
|
},
|
|
"dark": {
|
|
"fg": "#a5c2db",
|
|
"bg": "#202325",
|
|
"ratio": 8.54
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Warning text on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#6c4700",
|
|
"bg": "#ffffff",
|
|
"ratio": 8.27
|
|
},
|
|
"dark": {
|
|
"fg": "#dfb67d",
|
|
"bg": "#111111",
|
|
"ratio": 10
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Warning solid label",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#ffffff",
|
|
"bg": "#6c4700",
|
|
"ratio": 8.27
|
|
},
|
|
"dark": {
|
|
"fg": "#111111",
|
|
"bg": "#dfb67d",
|
|
"ratio": 10
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Warning soft alert",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#6c4700",
|
|
"bg": "#f0ede6",
|
|
"ratio": 7.07
|
|
},
|
|
"dark": {
|
|
"fg": "#dfb67d",
|
|
"bg": "#26221c",
|
|
"ratio": 8.38
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Error text on surface",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#882c21",
|
|
"bg": "#ffffff",
|
|
"ratio": 8.65
|
|
},
|
|
"dark": {
|
|
"fg": "#fba394",
|
|
"bg": "#111111",
|
|
"ratio": 9.68
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Error solid label",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#ffffff",
|
|
"bg": "#882c21",
|
|
"ratio": 8.65
|
|
},
|
|
"dark": {
|
|
"fg": "#111111",
|
|
"bg": "#fba394",
|
|
"ratio": 9.68
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Error soft alert",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#882c21",
|
|
"bg": "#f3eae9",
|
|
"ratio": 7.31
|
|
},
|
|
"dark": {
|
|
"fg": "#fba394",
|
|
"bg": "#28201e",
|
|
"ratio": 8.19
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
},
|
|
{
|
|
"label": "Active nav (ink on sand)",
|
|
"need": "4.5:1",
|
|
"light": {
|
|
"fg": "#111111",
|
|
"bg": "#e8dfd1",
|
|
"ratio": 14.3
|
|
},
|
|
"dark": {
|
|
"fg": "#111111",
|
|
"bg": "#d4c5b0",
|
|
"ratio": 11.16
|
|
},
|
|
"lp": true,
|
|
"dp": true
|
|
}
|
|
],
|
|
"typeUi": [
|
|
{
|
|
"name": "text-xs",
|
|
"size": "12px",
|
|
"lh": "16px",
|
|
"w": "400 / 500",
|
|
"use": "Badges, counters, table meta",
|
|
"px": "12px"
|
|
},
|
|
{
|
|
"name": "text-sm",
|
|
"size": "13px",
|
|
"lh": "20px",
|
|
"w": "400 / 500",
|
|
"use": "Default UI text, tables, menus",
|
|
"px": "13px"
|
|
},
|
|
{
|
|
"name": "text-base",
|
|
"size": "14px",
|
|
"lh": "22px",
|
|
"w": "400 / 500",
|
|
"use": "Form fields (16px below md), buttons lg",
|
|
"px": "14px"
|
|
},
|
|
{
|
|
"name": "text-lg",
|
|
"size": "16px",
|
|
"lh": "24px",
|
|
"w": "600",
|
|
"use": "Card titles, dialog titles",
|
|
"px": "16px"
|
|
},
|
|
{
|
|
"name": "text-xl",
|
|
"size": "20px",
|
|
"lh": "28px",
|
|
"w": "600",
|
|
"use": "Page titles",
|
|
"px": "20px"
|
|
},
|
|
{
|
|
"name": "text-2xl",
|
|
"size": "28px",
|
|
"lh": "36px",
|
|
"w": "600",
|
|
"use": "Home greeting, result panels",
|
|
"px": "28px"
|
|
}
|
|
],
|
|
"typeContent": [
|
|
{
|
|
"el": "h1",
|
|
"size": "32px",
|
|
"lh": "40px",
|
|
"w": "600",
|
|
"mob": "28px / 36px",
|
|
"sp": "0 0 16px"
|
|
},
|
|
{
|
|
"el": "h2",
|
|
"size": "26px",
|
|
"lh": "34px",
|
|
"w": "600",
|
|
"mob": "23px / 31px",
|
|
"sp": "40px 0 12px"
|
|
},
|
|
{
|
|
"el": "h3",
|
|
"size": "21px",
|
|
"lh": "30px",
|
|
"w": "600",
|
|
"mob": "19px / 28px",
|
|
"sp": "32px 0 8px"
|
|
},
|
|
{
|
|
"el": "h4",
|
|
"size": "18px",
|
|
"lh": "28px",
|
|
"w": "600",
|
|
"mob": "17px / 26px",
|
|
"sp": "24px 0 8px"
|
|
},
|
|
{
|
|
"el": "p",
|
|
"size": "18px",
|
|
"lh": "30px",
|
|
"w": "400",
|
|
"mob": "17px / 28px",
|
|
"sp": "0 0 20px"
|
|
},
|
|
{
|
|
"el": "li",
|
|
"size": "18px",
|
|
"lh": "30px",
|
|
"w": "400",
|
|
"mob": "17px / 28px",
|
|
"sp": "0 0 6px, list indent 28px"
|
|
},
|
|
{
|
|
"el": "blockquote",
|
|
"size": "18px",
|
|
"lh": "30px",
|
|
"w": "400 italic",
|
|
"mob": "17px / 28px",
|
|
"sp": "28px 0, 2px ink rule, 20px inset"
|
|
},
|
|
{
|
|
"el": "a",
|
|
"size": "inherit",
|
|
"lh": "inherit",
|
|
"w": "inherit",
|
|
"mob": "inherit",
|
|
"sp": "underline 1px, offset 3px"
|
|
},
|
|
{
|
|
"el": "img",
|
|
"size": "",
|
|
"lh": "",
|
|
"w": "",
|
|
"mob": "",
|
|
"sp": "28px 0, full width, max 100%"
|
|
},
|
|
{
|
|
"el": "figcaption",
|
|
"size": "14px",
|
|
"lh": "20px",
|
|
"w": "400 Plex Sans",
|
|
"mob": "13px / 20px",
|
|
"sp": "8px 0 0, muted"
|
|
}
|
|
]
|
|
} |