@ponchia/ui 0.10.0 → 0.12.0

package/tokens/vega.js

@@ -10,126 +10,167 @@
 export const vega = {
   light: {
     background: '#f4f4f2',
-    view: { stroke: '#d8d8d4' },
-    mark: { color: '#d71921' },
-    rule: { color: '#a8a8a2' },
-    text: {
-      color: '#0a0a0a',
-      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-    },
-    title: {
-      color: '#0a0a0a',
-      subtitleColor: '#686863',
-      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      subtitleFont:
-        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    range: {
+      category: [
+        '#2a78d6',
+        '#eb6834',
+        '#1baf7a',
+        '#eda100',
+        '#e87ba4',
+        '#008300',
+        '#4a3aa7',
+        '#e34948',
+      ],
+      ordinal: ['#80b0e8', '#5598e7', '#2a78d6', '#1c5cab', '#104281'],
+      ramp: ['#80b0e8', '#5598e7', '#2a78d6', '#1c5cab', '#104281'],
+      heatmap: ['#80b0e8', '#5598e7', '#2a78d6', '#1c5cab', '#104281'],
+      diverging: ['#0c54a0', '#558ac0', '#aac8e3', '#d9dfe5', '#e0b491', '#ce7a3b', '#b95115'],
     },
     axis: {
       domainColor: '#a8a8a2',
       gridColor: '#d8d8d4',
       tickColor: '#a8a8a2',
       labelColor: '#353533',
-      titleColor: '#0a0a0a',
       labelFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      labelFontSize: 12,
+      titleColor: '#0a0a0a',
       titleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFontSize: 13,
+      titleFontWeight: 600,
     },
     legend: {
       labelColor: '#353533',
-      titleColor: '#0a0a0a',
       labelFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      labelFontSize: 12,
+      titleColor: '#0a0a0a',
       titleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFontSize: 13,
+      titleFontWeight: 600,
+      symbolType: 'circle',
+      symbolSize: 100,
     },
     header: {
       labelColor: '#353533',
-      titleColor: '#0a0a0a',
       labelFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleColor: '#0a0a0a',
       titleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
     },
-    range: {
-      category: [
-        '#d71921',
-        '#e69f00',
-        '#56b4e9',
-        '#009e73',
-        '#f0e442',
-        '#0072b2',
-        '#cc79a7',
-        '#4d5358',
-      ],
-      ordinal: ['#ffe4e1', '#f9bdb7', '#ed8c84', '#d55753', '#ac3031', '#79191b'],
-      ramp: ['#ffe4e1', '#f9bdb7', '#ed8c84', '#d55753', '#ac3031', '#79191b'],
-      heatmap: ['#ffe4e1', '#f9bdb7', '#ed8c84', '#d55753', '#ac3031', '#79191b'],
-      diverging: ['#0c54a0', '#558ac0', '#aac8e3', '#d9dfe5', '#e0b491', '#ce7a3b', '#b95115'],
-    },
-  },
-  dark: {
-    background: '#121212',
-    view: { stroke: '#383838' },
-    mark: { color: '#ff3b41' },
-    rule: { color: '#555555' },
-    text: {
-      color: '#e6e6e6',
-      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-    },
     title: {
-      color: '#e6e6e6',
-      subtitleColor: '#a0a0a0',
+      color: '#0a0a0a',
       font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      fontSize: 15,
+      fontWeight: 600,
+      subtitleColor: '#686863',
       subtitleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      subtitleFontSize: 13,
+    },
+    mark: { color: '#2a78d6' },
+    view: { stroke: null },
+    axisXDiscrete: { labelAngle: 0, labelOverlap: 'greedy', labelLimit: 120 },
+    text: {
+      color: '#0a0a0a',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    rule: { color: '#a8a8a2' },
+    line: { strokeWidth: 2 },
+    point: { size: 64, filled: true },
+    bar: { cornerRadiusEnd: 4 },
+    rect: { stroke: '#ffffff', strokeWidth: 2 },
+    arc: { stroke: '#ffffff', strokeWidth: 2 },
+    area: { stroke: '#ffffff', strokeWidth: 1 },
+  },
+  dark: {
+    background: '#121212',
+    font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    range: {
+      category: [
+        '#3987e5',
+        '#d95926',
+        '#199e70',
+        '#c98500',
+        '#d55181',
+        '#008300',
+        '#9085e9',
+        '#e66767',
+      ],
+      ordinal: ['#1b5298', '#256abf', '#3987e5', '#6da7ec', '#9ec5f4'],
+      ramp: ['#1b5298', '#256abf', '#3987e5', '#6da7ec', '#9ec5f4'],
+      heatmap: ['#1b5298', '#256abf', '#3987e5', '#6da7ec', '#9ec5f4'],
+      diverging: ['#5aa3ec', '#4683c5', '#3e5f8a', '#44484d', '#a56b38', '#e18e4b', '#f9a870'],
     },
     axis: {
       domainColor: '#555555',
       gridColor: '#383838',
       tickColor: '#555555',
       labelColor: '#c8c8c8',
-      titleColor: '#e6e6e6',
       labelFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      labelFontSize: 12,
+      titleColor: '#e6e6e6',
       titleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFontSize: 13,
+      titleFontWeight: 600,
     },
     legend: {
       labelColor: '#c8c8c8',
-      titleColor: '#e6e6e6',
       labelFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      labelFontSize: 12,
+      titleColor: '#e6e6e6',
       titleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFontSize: 13,
+      titleFontWeight: 600,
+      symbolType: 'circle',
+      symbolSize: 100,
     },
     header: {
       labelColor: '#c8c8c8',
-      titleColor: '#e6e6e6',
       labelFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleColor: '#e6e6e6',
       titleFont:
         "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
     },
-    range: {
-      category: [
-        '#ff3b41',
-        '#e69f00',
-        '#56b4e9',
-        '#009e73',
-        '#f0e442',
-        '#0072b2',
-        '#cc79a7',
-        '#4d5358',
-      ],
-      ordinal: ['#551112', '#8d1a1e', '#c13c3b', '#e66e68', '#f8a49d', '#fed2cd'],
-      ramp: ['#551112', '#8d1a1e', '#c13c3b', '#e66e68', '#f8a49d', '#fed2cd'],
-      heatmap: ['#551112', '#8d1a1e', '#c13c3b', '#e66e68', '#f8a49d', '#fed2cd'],
-      diverging: ['#5aa3ec', '#4683c5', '#3e5f8a', '#44484d', '#a56b38', '#e18e4b', '#f9a870'],
+    title: {
+      color: '#e6e6e6',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      fontSize: 15,
+      fontWeight: 600,
+      subtitleColor: '#a0a0a0',
+      subtitleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      subtitleFontSize: 13,
     },
+    mark: { color: '#3987e5' },
+    view: { stroke: null },
+    axisXDiscrete: { labelAngle: 0, labelOverlap: 'greedy', labelLimit: 120 },
+    text: {
+      color: '#e6e6e6',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    rule: { color: '#555555' },
+    line: { strokeWidth: 2 },
+    point: { size: 64, filled: true },
+    bar: { cornerRadiusEnd: 4 },
+    rect: { stroke: '#1c1c1c', strokeWidth: 2 },
+    arc: { stroke: '#1c1c1c', strokeWidth: 2 },
+    area: { stroke: '#1c1c1c', strokeWidth: 1 },
   },
 };
 
+const ACCENT = { light: '#d71921', dark: '#ff3b41' };
+const NEUTRAL = { light: '#686863', dark: '#a0a0a0' };
+
 /** The on-brand Vega-Lite `config` for a bronto theme (default `light`).
  *  Spread into a spec — `{ ...spec, config: brontoVegaConfig(theme) }` —
  *  or hand to vega-embed as `{ config: brontoVegaConfig(theme) }`. */
@@ -137,20 +178,18 @@ export function brontoVegaConfig(theme = 'light') {
   return vega[theme === 'dark' ? 'dark' : 'light'];
 }
 
-/** The resolved accent hex for a theme — series 1 of `range.category`, the one
- *  chromatic mark. Use it to spend the accent on a single emphasised mark in
- *  a multi-series chart (a Vega-Lite conditional to this colour) without
- *  reverse-engineering the palette array index. Regenerate after changing
- *  `--accent`; already-rendered charts do not live-reskin. */
+/** The resolved accent hex for a theme. Spend it on one emphasised mark in a
+ *  multi-series chart (a Vega-Lite conditional to this colour) while the
+ *  others stay neutral. Regenerate after changing `--accent`; already-
+ *  rendered charts do not live-reskin (use @ponchia/ui/renderer for that). */
 export function brontoVegaAccent(theme = 'light') {
-  return vega[theme === 'dark' ? 'dark' : 'light'].range.category[0];
+  return ACCENT[theme === 'dark' ? 'dark' : 'light'];
 }
 
-/** The neutral series hex for a theme — the last of `range.category` — for the
- *  "every other mark stays quiet" half of accent-spending. */
+/** The neutral hex for a theme — the quiet ink every other mark takes in
+ *  accent-spending. */
 export function brontoVegaNeutral(theme = 'light') {
-  const cat = vega[theme === 'dark' ? 'dark' : 'light'].range.category;
-  return cat[cat.length - 1];
+  return NEUTRAL[theme === 'dark' ? 'dark' : 'light'];
 }
 
 export default brontoVegaConfig;

package/tokens/vega.json

@@ -1,81 +1,39 @@
 {
-  "$comment": "@ponchia/ui Vega-Lite `config` resolved to static colours per theme. Spread into a spec's `config`, or pass `{ config }` to vega-embed. Monochrome chrome + one rationed accent (the default mark / series 1); `range.category` is the CVD-safe 8-series palette, `range.ramp`/`heatmap`/`ordinal` the sequential ramp, `range.diverging` the −…+ ramp. Resolved hex on purpose: Vega bakes colours into SVG/canvas and cannot read var(). Generated from the token source — do not edit by hand; run `npm run vega:build`. Drift-checked in CI.",
+  "$comment": "@ponchia/ui Vega-Lite `config` resolved to static colours per theme, on the page background. Spread into a spec's `config`, or pass `{ config }` to vega-embed. Quiet chrome in the bronto inks; `range.category` is the 8-hue categorical palette (a single series takes its first hue), `range.ramp`/`heatmap`/`ordinal` the sequential ramp, `range.diverging` the −…+ ramp. A page that switches skin, contrast or surface at runtime should build its config with @ponchia/ui/renderer instead. Resolved hex on purpose: Vega bakes colours into SVG/canvas and cannot read var(). Generated from the token source — do not edit by hand; run `npm run vega:build`. Drift-checked in CI.",
   "light": {
     "background": "#f4f4f2",
-    "view": {
-      "stroke": "#d8d8d4"
-    },
-    "mark": {
-      "color": "#d71921"
-    },
-    "rule": {
-      "color": "#a8a8a2"
-    },
-    "text": {
-      "color": "#0a0a0a",
-      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
-    "title": {
-      "color": "#0a0a0a",
-      "subtitleColor": "#686863",
-      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "subtitleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
-    "axis": {
-      "domainColor": "#a8a8a2",
-      "gridColor": "#d8d8d4",
-      "tickColor": "#a8a8a2",
-      "labelColor": "#353533",
-      "titleColor": "#0a0a0a",
-      "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
-    "legend": {
-      "labelColor": "#353533",
-      "titleColor": "#0a0a0a",
-      "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
-    "header": {
-      "labelColor": "#353533",
-      "titleColor": "#0a0a0a",
-      "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
+    "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
     "range": {
       "category": [
-        "#d71921",
-        "#e69f00",
-        "#56b4e9",
-        "#009e73",
-        "#f0e442",
-        "#0072b2",
-        "#cc79a7",
-        "#4d5358"
+        "#2a78d6",
+        "#eb6834",
+        "#1baf7a",
+        "#eda100",
+        "#e87ba4",
+        "#008300",
+        "#4a3aa7",
+        "#e34948"
       ],
       "ordinal": [
-        "#ffe4e1",
-        "#f9bdb7",
-        "#ed8c84",
-        "#d55753",
-        "#ac3031",
-        "#79191b"
+        "#80b0e8",
+        "#5598e7",
+        "#2a78d6",
+        "#1c5cab",
+        "#104281"
       ],
       "ramp": [
-        "#ffe4e1",
-        "#f9bdb7",
-        "#ed8c84",
-        "#d55753",
-        "#ac3031",
-        "#79191b"
+        "#80b0e8",
+        "#5598e7",
+        "#2a78d6",
+        "#1c5cab",
+        "#104281"
       ],
       "heatmap": [
-        "#ffe4e1",
-        "#f9bdb7",
-        "#ed8c84",
-        "#d55753",
-        "#ac3031",
-        "#79191b"
+        "#80b0e8",
+        "#5598e7",
+        "#2a78d6",
+        "#1c5cab",
+        "#104281"
       ],
       "diverging": [
         "#0c54a0",
@@ -86,84 +44,120 @@
         "#ce7a3b",
         "#b95115"
       ]
-    }
-  },
-  "dark": {
-    "background": "#121212",
-    "view": {
-      "stroke": "#383838"
-    },
-    "mark": {
-      "color": "#ff3b41"
-    },
-    "rule": {
-      "color": "#555555"
-    },
-    "text": {
-      "color": "#e6e6e6",
-      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
-    },
-    "title": {
-      "color": "#e6e6e6",
-      "subtitleColor": "#a0a0a0",
-      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "subtitleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
     },
     "axis": {
-      "domainColor": "#555555",
-      "gridColor": "#383838",
-      "tickColor": "#555555",
-      "labelColor": "#c8c8c8",
-      "titleColor": "#e6e6e6",
+      "domainColor": "#a8a8a2",
+      "gridColor": "#d8d8d4",
+      "tickColor": "#a8a8a2",
+      "labelColor": "#353533",
       "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+      "labelFontSize": 12,
+      "titleColor": "#0a0a0a",
+      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "titleFontSize": 13,
+      "titleFontWeight": 600
     },
     "legend": {
-      "labelColor": "#c8c8c8",
-      "titleColor": "#e6e6e6",
+      "labelColor": "#353533",
       "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+      "labelFontSize": 12,
+      "titleColor": "#0a0a0a",
+      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "titleFontSize": 13,
+      "titleFontWeight": 600,
+      "symbolType": "circle",
+      "symbolSize": 100
     },
     "header": {
-      "labelColor": "#c8c8c8",
-      "titleColor": "#e6e6e6",
+      "labelColor": "#353533",
       "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "titleColor": "#0a0a0a",
       "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
     },
+    "title": {
+      "color": "#0a0a0a",
+      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "fontSize": 15,
+      "fontWeight": 600,
+      "subtitleColor": "#686863",
+      "subtitleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "subtitleFontSize": 13
+    },
+    "mark": {
+      "color": "#2a78d6"
+    },
+    "view": {
+      "stroke": null
+    },
+    "axisXDiscrete": {
+      "labelAngle": 0,
+      "labelOverlap": "greedy",
+      "labelLimit": 120
+    },
+    "text": {
+      "color": "#0a0a0a",
+      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+    },
+    "rule": {
+      "color": "#a8a8a2"
+    },
+    "line": {
+      "strokeWidth": 2
+    },
+    "point": {
+      "size": 64,
+      "filled": true
+    },
+    "bar": {
+      "cornerRadiusEnd": 4
+    },
+    "rect": {
+      "stroke": "#ffffff",
+      "strokeWidth": 2
+    },
+    "arc": {
+      "stroke": "#ffffff",
+      "strokeWidth": 2
+    },
+    "area": {
+      "stroke": "#ffffff",
+      "strokeWidth": 1
+    }
+  },
+  "dark": {
+    "background": "#121212",
+    "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
     "range": {
       "category": [
-        "#ff3b41",
-        "#e69f00",
-        "#56b4e9",
-        "#009e73",
-        "#f0e442",
-        "#0072b2",
-        "#cc79a7",
-        "#4d5358"
+        "#3987e5",
+        "#d95926",
+        "#199e70",
+        "#c98500",
+        "#d55181",
+        "#008300",
+        "#9085e9",
+        "#e66767"
       ],
       "ordinal": [
-        "#551112",
-        "#8d1a1e",
-        "#c13c3b",
-        "#e66e68",
-        "#f8a49d",
-        "#fed2cd"
+        "#1b5298",
+        "#256abf",
+        "#3987e5",
+        "#6da7ec",
+        "#9ec5f4"
       ],
       "ramp": [
-        "#551112",
-        "#8d1a1e",
-        "#c13c3b",
-        "#e66e68",
-        "#f8a49d",
-        "#fed2cd"
+        "#1b5298",
+        "#256abf",
+        "#3987e5",
+        "#6da7ec",
+        "#9ec5f4"
       ],
       "heatmap": [
-        "#551112",
-        "#8d1a1e",
-        "#c13c3b",
-        "#e66e68",
-        "#f8a49d",
-        "#fed2cd"
+        "#1b5298",
+        "#256abf",
+        "#3987e5",
+        "#6da7ec",
+        "#9ec5f4"
       ],
       "diverging": [
         "#5aa3ec",
@@ -174,6 +168,84 @@
         "#e18e4b",
         "#f9a870"
       ]
+    },
+    "axis": {
+      "domainColor": "#555555",
+      "gridColor": "#383838",
+      "tickColor": "#555555",
+      "labelColor": "#c8c8c8",
+      "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "labelFontSize": 12,
+      "titleColor": "#e6e6e6",
+      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "titleFontSize": 13,
+      "titleFontWeight": 600
+    },
+    "legend": {
+      "labelColor": "#c8c8c8",
+      "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "labelFontSize": 12,
+      "titleColor": "#e6e6e6",
+      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "titleFontSize": 13,
+      "titleFontWeight": 600,
+      "symbolType": "circle",
+      "symbolSize": 100
+    },
+    "header": {
+      "labelColor": "#c8c8c8",
+      "labelFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "titleColor": "#e6e6e6",
+      "titleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+    },
+    "title": {
+      "color": "#e6e6e6",
+      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "fontSize": 15,
+      "fontWeight": 600,
+      "subtitleColor": "#a0a0a0",
+      "subtitleFont": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      "subtitleFontSize": 13
+    },
+    "mark": {
+      "color": "#3987e5"
+    },
+    "view": {
+      "stroke": null
+    },
+    "axisXDiscrete": {
+      "labelAngle": 0,
+      "labelOverlap": "greedy",
+      "labelLimit": 120
+    },
+    "text": {
+      "color": "#e6e6e6",
+      "font": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+    },
+    "rule": {
+      "color": "#555555"
+    },
+    "line": {
+      "strokeWidth": 2
+    },
+    "point": {
+      "size": 64,
+      "filled": true
+    },
+    "bar": {
+      "cornerRadiusEnd": 4
+    },
+    "rect": {
+      "stroke": "#1c1c1c",
+      "strokeWidth": 2
+    },
+    "arc": {
+      "stroke": "#1c1c1c",
+      "strokeWidth": 2
+    },
+    "area": {
+      "stroke": "#1c1c1c",
+      "strokeWidth": 1
     }
   }
 }