שפת העיצוב של הדשבורד

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Heebo:wght@300;400;500;600;700;800;900&display=swap">

:root{
  --font: "Heebo", "Segoe UI", Arial, sans-serif;
  --title: "Heebo", "Segoe UI", Arial, sans-serif;
  --num: "Bebas Neue", "Heebo", Impact, sans-serif;
  --mono: "Bebas Neue", "Heebo", Impact, sans-serif;
  --display: "Heebo", "Segoe UI", Arial, sans-serif;
  --radius: 2px; --radius-sm: 2px;
  --rail-w: 244px;
  /* rail is black in both themes, like the guide's top bar */
  --rail-bg: #111111; --rail-ink: #f3efe6; --rail-muted: #8b867c; --rail-line: #2a2a2a;
  --g: #b48a3c; --g-hi: #d6b46e; --g-deep: #86622a;
  --st-good: #2d7a4f; --st-warning: #d64541; --st-critical: #8f1d17;
}
:root[data-theme="light"]{
  color-scheme: light;
  --page: #f6f2ea; --surface: #ffffff; --surface-2: #faf7f1; --surface-3: #ede5d6;
  --line: #e2dacb; --line-strong: #cfc3ad; --rule: #111111;
  --ink: #111111; --ink-2: #3a3a3a; --muted: #6b665d;
  --gold: #86622a; --gold-hi: #b48a3c; --gold-soft: rgba(180,138,60,.10); --gold-line: rgba(180,138,60,.55);
  --good-ink: #2d7a4f; --warning-ink: #b3261e; --critical-ink: #8f1d17;
  --good-soft: rgba(45,122,79,.10); --warning-soft: rgba(214,69,65,.10); --critical-soft: rgba(143,29,23,.14);
  --grid: #ece5d6; --axis: #cfc3ad;
  --shadow: none;
  --s1:#b48a3c; --s2:#2b64a8; --s3:#d95926; --s4:#1baf7a; --s5:#7b47a3; --s6:#e87ba4; --s7:#008300; --s8:#e34948;
  --other: #c9c0ad;
  --f1:#c9a253; --f2:#b48a3c; --f3:#9a7432; --f4:#7d5c22; --f5:#5c4316;
  --hero-bg: #111111; --hero-ink: #f3efe6; --hero-muted: #a9a398; --hero-num: #d6b46e;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page: #0e0e0e; --surface: #161616; --surface-2: #1d1d1d; --surface-3: #262626;
  --line: #2a2a2a; --line-strong: #3a3a3a; --rule: #3a3a3a;
  --ink: #f3efe6; --ink-2: #c9c3b6; --muted: #8b867c;
  --gold: #d6b46e; --gold-hi: #e3c88f; --gold-soft: rgba(214,180,110,.10); --gold-line: rgba(214,180,110,.45);
  --good-ink: #4fb37a; --warning-ink: #ff7b72; --critical-ink: #ffa198;
  --good-soft: rgba(45,122,79,.22); --warning-soft: rgba(229,83,75,.16); --critical-soft: rgba(201,60,55,.30);
  --grid: #242424; --axis: #3a3a3a;
  --shadow: none;
  --s1:#b8892f; --s2:#3987e5; --s3:#d95926; --s4:#199e70; --s5:#9085e9; --s6:#d55181; --s7:#008300; --s8:#e66767;
  --other: #5c5850;
  --f1:#e9cf94; --f2:#d6b064; --f3:#b8892f; --f4:#93691c; --f5:#6e4e14;
  --hero-bg: #1d1d1d; --hero-ink: #f3efe6; --hero-muted: #8b867c; --hero-num: #e3c88f;
}

// colors are read from the CSS tokens of the active theme
const v = n => getComputedStyle(document.documentElement).getPropertyValue(n).trim();
Chart.defaults.font.family = v('--font');
Chart.defaults.color = v('--muted');

const base = {
  maintainAspectRatio: false,
  animation: { duration: 700, easing: 'easeOutQuart' },
  plugins: {
    legend: { position: 'bottom', rtl: true,
      labels: { color: v('--ink-2'), usePointStyle: true, pointStyle: 'circle', boxWidth: 8, boxHeight: 8, padding: 14, font: { size: 12 } } },
    tooltip: { rtl: true, textDirection: 'rtl', backgroundColor: v('--surface-2'), borderColor: v('--line-strong'), borderWidth: 1,
      padding: 12, cornerRadius: 2, titleColor: v('--ink'), bodyColor: v('--ink-2'),
      titleFont: { weight: '600', size: 12.5 }, bodyFont: { size: 12 }, boxPadding: 6, usePointStyle: true },
  },
  scales: {
    x: { grid: { display: false }, ticks: { color: v('--ink-2'), font: { size: 11.5 } }, border: { display: false } },
    y: { grid: { color: v('--grid'), drawTicks: false }, ticks: { color: v('--muted'), font: { size: 11.5 }, padding: 8 },
         border: { display: false }, beginAtZero: true },
  },
};
// bars:     borderRadius: 2, borderSkipped: 'start', maxBarThickness: 24, borderWidth: 0
// doughnut: cutout: '58%', borderColor: v('--surface'), borderWidth: 2, hoverOffset: 4
// line:     primary = --s1, borderWidth 2, fill 12% alpha, tension .35, point only on the last value
//           compare = --other · target = --muted, borderWidth 1.5, borderDash [4, 4]