calendar/src/assets/colors.css

/* Color tokens */
:root {
  --panel: #ffffff;
  --panel-alt: #f6f8fa;
  --panel-accent: #eef4ff;
  --today: #f83;
  --ink: #222;
  --strong: #000;
  --muted: #6a6f76;
  --muted-alt: #9aa2ad;
  --accent: #2563eb; /* blue */
  --accent-soft: #dbeafe;
  --accent-hover: #1d4ed8;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --weekend: #888;
  --firstday: #000;
  --select: #aaf;
  --shadow: #fff;
  --label-bg: #fafbfe;
  --label-bg-rgb: 250, 251, 254;

  /* Holiday colors */
  --holiday-bg: rgba(255, 215, 0, 0.1);
  --holiday-border: rgba(255, 215, 0, 0.3);
  --holiday-text: #8b4513;
  --holiday-label-bg: rgba(255, 215, 0, 0.8);
  --holiday-label-text: #5d4037;

  /* Input / recurrence tokens */
  --input-border: var(--muted-alt);
  --input-focus: var(--accent);
  --pill-bg: var(--panel-alt);
  --pill-active-bg: var(--accent);
  --pill-active-ink: #fff;
  --pill-hover-bg: var(--accent-soft);

  /* Vue component color mappings */
  --bg: var(--panel);
  --border-color: #ddd;
}

/* Month tints (light) */
.dec {
  background: hsl(220 50% 95%);
}
.jan {
  background: hsl(220 50% 92%);
}
.feb {
  background: hsl(220 50% 95%);
}
.mar {
  background: hsl(125 60% 92%);
}
.apr {
  background: hsl(125 60% 95%);
}
.may {
  background: hsl(125 60% 92%);
}
.jun {
  background: hsl(45 85% 95%);
}
.jul {
  background: hsl(45 85% 92%);
}
.aug {
  background: hsl(45 85% 95%);
}
.sep {
  background: hsl(18 78% 92%);
}
.oct {
  background: hsl(18 78% 95%);
}
.nov {
  background: hsl(18 78% 92%);
}

/* Light mode — gray shades and colors */
.event-color-0 {
  background: hsl(0, 0%, 85%);
} /* lightest grey */
.event-color-1 {
  background: hsl(0, 0%, 75%);
} /* light grey */
.event-color-2 {
  background: hsl(0, 0%, 65%);
} /* medium grey */
.event-color-3 {
  background: hsl(0, 0%, 55%);
} /* dark grey */
.event-color-4 {
  background: hsl(0, 70%, 70%);
} /* red */
.event-color-5 {
  background: hsl(90, 70%, 70%);
} /* green */
.event-color-6 {
  background: hsl(230, 70%, 70%);
} /* blue */
.event-color-7 {
  background: hsl(280, 70%, 70%);
} /* purple */

/* Color tokens (dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --panel: #121417;
    --panel-alt: #1d2228;
    --panel-accent: #1a2634;
    --today: #f83;
    --ink: #e5e7eb;
    --strong: #fff;
    --muted: #7d8691;
    --muted-alt: #5d646d;
    --accent: #3b82f6;
    --accent-soft: rgba(59, 130, 246, 0.15);
    --accent-hover: #2563eb;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --workday: var(--ink);
    --weekend: #999;
    --firstday: #fff;
    --select: #3355ff;
    --shadow: #000;
    --label-bg: #1a1d25;
    --label-bg-rgb: 26, 29, 37;
    --input-border: var(--muted-alt);
    --input-focus: var(--accent);
    --pill-bg: #222a32;
    --pill-active-bg: var(--accent);
    --pill-active-ink: #fff;
    --pill-hover-bg: rgba(255, 255, 255, 0.08);

    /* Vue component color mappings (dark) */
    --bg: var(--panel);
    --border-color: #333;

    /* Holiday colors (dark mode) */
    --holiday-bg: rgba(255, 193, 7, 0.15);
    --holiday-border: rgba(255, 193, 7, 0.4);
    --holiday-text: #ffc107;
    --holiday-label-bg: rgba(255, 193, 7, 0.2);
    --holiday-label-text: #fff8e1;
  }

  .dec {
    background: hsl(220 50% 8%);
  }
  .jan {
    background: hsl(220 50% 6%);
  }
  .feb {
    background: hsl(220 50% 8%);
  }
  .mar {
    background: hsl(125 60% 6%);
  }
  .apr {
    background: hsl(125 60% 8%);
  }
  .may {
    background: hsl(125 60% 6%);
  }
  .jun {
    background: hsl(45 85% 8%);
  }
  .jul {
    background: hsl(45 85% 6%);
  }
  .aug {
    background: hsl(45 85% 8%);
  }
  .sep {
    background: hsl(18 78% 6%);
  }
  .oct {
    background: hsl(18 78% 8%);
  }
  .nov {
    background: hsl(18 78% 6%);
  }

  .event-color-0 {
    background: hsl(0, 0%, 50%);
  } /* lightest grey */
  .event-color-1 {
    background: hsl(0, 0%, 40%);
  } /* light grey */
  .event-color-2 {
    background: hsl(0, 0%, 30%);
  } /* medium grey */
  .event-color-3 {
    background: hsl(0, 0%, 20%);
  } /* dark grey */
  .event-color-4 {
    background: hsl(0, 70%, 40%);
  } /* red */
  .event-color-5 {
    background: hsl(90, 70%, 30%);
  } /* green - darker for perceptional purposes */
  .event-color-6 {
    background: hsl(230, 70%, 40%);
  } /* blue */
  .event-color-7 {
    background: hsl(280, 70%, 40%);
  } /* purple */
}