@diagrammo/dgmo 0.8.14 → 0.8.16

package/src/kanban/renderer.ts

@@ -17,7 +17,24 @@ import { parseKanban } from './parser';
 import { isArchiveColumn } from './mutations';
 import { LEGEND_HEIGHT, measureLegendText } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
-import type { LegendConfig, LegendState } from '../utils/legend-types';
+import type {
+  LegendConfig,
+  LegendState,
+  LegendCallbacks,
+  D3Sel,
+} from '../utils/legend-types';
+
+// ============================================================
+// Public options object
+// ============================================================
+
+export interface KanbanInteractiveOptions {
+  onNavigateToLine?: (line: number) => void;
+  exportDims?: { width: number; height: number };
+  activeTagGroup?: string | null;
+  currentSwimlaneGroup?: string | null;
+  onSwimlaneChange?: (group: string | null) => void;
+}
 
 // ============================================================
 // Constants
@@ -214,10 +231,19 @@ export function renderKanban(
   parsed: ParsedKanban,
   palette: PaletteColors,
   isDark: boolean,
-  _onNavigateToLine?: (line: number) => void,
-  exportDims?: { width: number; height: number },
-  activeTagGroup?: string | null
+  options?: KanbanInteractiveOptions
 ): void {
+  const exportDims = options?.exportDims;
+  const activeTagGroup = options?.activeTagGroup ?? null;
+  const onSwimlaneChange = options?.onSwimlaneChange;
+  // Resolve current swimlane group: must match an existing tag group, else ignore.
+  const requestedSwimlane = options?.currentSwimlaneGroup ?? null;
+  const swimlaneGroup = requestedSwimlane
+    ? (parsed.tagGroups.find(
+        (g) => g.name.toLowerCase() === requestedSwimlane.toLowerCase()
+      ) ?? null)
+    : null;
+
   const layout = computeLayout(parsed, palette);
 
   const width = exportDims?.width ?? layout.totalWidth;
@@ -265,17 +291,67 @@ export function renderKanban(
       .append('g')
       .attr('class', 'kanban-legend')
       .attr('transform', `translate(${legendX},${legendY})`);
+
+    // Only show ≡ swimlane icons in interactive contexts (callback present
+    // and not exporting). Static SVG/PNG exports get no icon.
+    const showSwimlaneIcon = !!onSwimlaneChange && !exportDims;
+
+    const legendCallbacks: LegendCallbacks | undefined = showSwimlaneIcon
+      ? {
+          onGroupRendered: (groupName, groupEl, isActive) => {
+            const isCurrent =
+              swimlaneGroup?.name.toLowerCase() === groupName.toLowerCase();
+            // Position icon at the trailing edge of the pill text.
+            // For collapsed pills, the groupEl is at (pill.x, pill.y) and the
+            // pill rect spans pill.width. For active capsule, the groupEl is at
+            // (capsule.x, capsule.y) and the inner pill is offset.
+            // We measure text and place the icon just to the right of it.
+            const textW = measureLegendText(groupName, 11);
+            const iconX = isActive
+              ? 4 + 6 + textW + 6 // capsule pad + pill pad/2 + text + gap
+              : 8 + textW + 4; // pill pad/2 + text + gap
+            const iconY = (LEGEND_HEIGHT - 7) / 2;
+            const iconEl = drawSwimlaneIcon(
+              groupEl,
+              iconX,
+              iconY,
+              isCurrent,
+              palette
+            );
+            iconEl.append('title').text(`Group by ${groupName}`);
+            iconEl.style('cursor', 'pointer').on('click', (event: Event) => {
+              event.stopPropagation();
+              onSwimlaneChange?.(isCurrent ? null : groupName);
+            });
+          },
+        }
+      : undefined;
+
     renderLegendD3(
       legendG,
       legendConfig,
       legendState,
       palette,
       isDark,
-      undefined,
+      legendCallbacks,
       width - legendX - DIAGRAM_PADDING
     );
   }
 
+  // Swimlane mode: bucket cards into (column, lane) cells and render grid
+  if (swimlaneGroup) {
+    renderSwimlaneBoard(
+      svg,
+      parsed,
+      layout,
+      swimlaneGroup,
+      palette,
+      isDark,
+      activeTagGroup
+    );
+    return;
+  }
+
   // Columns
   const defaultColBg = isDark
     ? mix(palette.surface, palette.bg, 50)
@@ -477,11 +553,451 @@ export function renderKanbanForExport(
   const layout = computeLayout(parsed, palette);
 
   const container = document.createElement('div');
-  renderKanban(container, parsed, palette, isDark, undefined, {
-    width: layout.totalWidth,
-    height: layout.totalHeight,
+  renderKanban(container, parsed, palette, isDark, {
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight },
   });
 
   const svgEl = container.querySelector('svg');
   return svgEl?.outerHTML ?? '';
 }
+
+// ============================================================
+// Swimlane: icon, bucketing, layout, render
+// ============================================================
+
+const LANE_HEADER_WIDTH = 140;
+const LANE_GAP = 14;
+
+function drawSwimlaneIcon(
+  parent: D3Sel,
+  x: number,
+  y: number,
+  isActive: boolean,
+  palette: PaletteColors
+): D3Sel {
+  const iconG = parent
+    .append('g')
+    .attr('class', 'kanban-swimlane-icon')
+    .attr('transform', `translate(${x}, ${y})`);
+
+  const color = isActive ? palette.primary : palette.textMuted;
+  const opacity = isActive ? 1 : 0.35;
+  const barWidths = [8, 12, 6];
+  const barH = 2;
+  const gap = 3;
+
+  for (let i = 0; i < barWidths.length; i++) {
+    iconG
+      .append('rect')
+      .attr('x', 0)
+      .attr('y', i * gap)
+      .attr('width', barWidths[i]!)
+      .attr('height', barH)
+      .attr('rx', 1)
+      .attr('fill', color)
+      .attr('opacity', opacity);
+  }
+
+  return iconG;
+}
+
+interface SwimlaneBucket {
+  laneName: string;
+  laneColor?: string;
+  isFallback: boolean;
+  cellsByColumn: Record<string, KanbanCard[]>;
+}
+
+export function bucketCardsBySwimlane(
+  columns: KanbanColumn[],
+  swimlaneGroup: KanbanTagGroup
+): SwimlaneBucket[] {
+  const tagKey = swimlaneGroup.name.toLowerCase();
+  const buckets = new Map<string, SwimlaneBucket>();
+
+  // Seed lanes from declaration order
+  for (const entry of swimlaneGroup.entries) {
+    buckets.set(entry.value.toLowerCase(), {
+      laneName: entry.value,
+      laneColor: entry.color,
+      isFallback: false,
+      cellsByColumn: {},
+    });
+  }
+
+  const fallbackKey = `__no_${tagKey}__`;
+
+  for (const col of columns) {
+    for (const card of col.cards) {
+      const raw = card.tags[tagKey] ?? swimlaneGroup.defaultValue;
+      let bucketKey: string;
+      if (raw && buckets.has(raw.toLowerCase())) {
+        bucketKey = raw.toLowerCase();
+      } else {
+        if (!buckets.has(fallbackKey)) {
+          buckets.set(fallbackKey, {
+            laneName: `No ${swimlaneGroup.name}`,
+            isFallback: true,
+            cellsByColumn: {},
+          });
+        }
+        bucketKey = fallbackKey;
+      }
+      const bucket = buckets.get(bucketKey)!;
+      (bucket.cellsByColumn[col.id] ??= []).push(card);
+    }
+  }
+
+  // Drop empty seeded lanes that have no cards (and aren't fallback).
+  // Phase A choice: keep entries even if empty so users see the structure.
+  return Array.from(buckets.values());
+}
+
+interface SwimlaneCellLayout {
+  column: KanbanColumn;
+  cards: KanbanCard[];
+  cardLayouts: CardLayout[];
+}
+
+interface SwimlaneLaneLayout {
+  bucket: SwimlaneBucket;
+  y: number;
+  height: number;
+  cells: SwimlaneCellLayout[];
+}
+
+interface SwimlaneBoardLayout {
+  columnXs: { column: KanbanColumn; x: number; width: number }[];
+  lanes: SwimlaneLaneLayout[];
+  totalWidth: number;
+  totalHeight: number;
+  startY: number;
+}
+
+function computeCardHeight(card: KanbanCard, tagGroups: KanbanTagGroup[]) {
+  const tagMeta = resolveCardTagMeta(card, tagGroups);
+  const metaCount = tagMeta.length + card.details.length;
+  const metaHeight =
+    metaCount > 0
+      ? CARD_SEPARATOR_GAP +
+        1 +
+        CARD_PADDING_Y +
+        metaCount * CARD_META_LINE_HEIGHT
+      : 0;
+  return CARD_HEADER_HEIGHT + CARD_PADDING_Y + metaHeight;
+}
+
+function computeSwimlaneLayout(
+  parsed: ParsedKanban,
+  buckets: SwimlaneBucket[],
+  baseLayout: { columns: ColumnLayout[] }
+): SwimlaneBoardLayout {
+  const headerHeight = parsed.title ? TITLE_HEIGHT + 8 : 0;
+  const startY = DIAGRAM_PADDING + headerHeight;
+
+  // Column x positions: shift right by LANE_HEADER_WIDTH, reuse widths from base layout.
+  const columnXs: SwimlaneBoardLayout['columnXs'] = [];
+  let currentX = DIAGRAM_PADDING + LANE_HEADER_WIDTH;
+  for (const col of baseLayout.columns) {
+    columnXs.push({ column: col.column, x: currentX, width: col.width });
+    currentX += col.width + COLUMN_GAP;
+  }
+  const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING;
+
+  // For each lane, compute card stacks per column and normalize the lane height.
+  const lanes: SwimlaneLaneLayout[] = [];
+  let laneY = startY + COLUMN_HEADER_HEIGHT + COLUMN_PADDING;
+  const minCellH = CARD_HEADER_HEIGHT + CARD_PADDING_Y + CARD_GAP;
+
+  for (const bucket of buckets) {
+    let maxCellH = minCellH;
+    const cellsTmp: { column: KanbanColumn; cards: KanbanCard[]; h: number }[] =
+      [];
+
+    for (const colInfo of columnXs) {
+      const cards = bucket.cellsByColumn[colInfo.column.id] ?? [];
+      let h = 0;
+      for (const c of cards) {
+        h += computeCardHeight(c, parsed.tagGroups) + CARD_GAP;
+      }
+      h = Math.max(h - (cards.length > 0 ? CARD_GAP : 0), 0);
+      cellsTmp.push({ column: colInfo.column, cards, h });
+      if (h > maxCellH) maxCellH = h;
+    }
+
+    const laneHeight = Math.max(maxCellH, minCellH);
+
+    // Build cell layouts with card x/y offsets relative to (cell.x, laneY)
+    const cells: SwimlaneCellLayout[] = cellsTmp.map((tmp, i) => {
+      const colInfo = columnXs[i]!;
+      const cardLayouts: CardLayout[] = [];
+      let cy = 0;
+      for (const card of tmp.cards) {
+        const ch = computeCardHeight(card, parsed.tagGroups);
+        cardLayouts.push({
+          x: colInfo.x + COLUMN_PADDING,
+          y: laneY + cy,
+          width: colInfo.width - COLUMN_PADDING * 2,
+          height: ch,
+          card,
+        });
+        cy += ch + CARD_GAP;
+      }
+      return { column: tmp.column, cards: tmp.cards, cardLayouts };
+    });
+
+    lanes.push({ bucket, y: laneY, height: laneHeight, cells });
+    laneY += laneHeight + LANE_GAP;
+  }
+
+  const totalHeight = laneY - LANE_GAP + COLUMN_PADDING + DIAGRAM_PADDING;
+
+  return { columnXs, lanes, totalWidth, totalHeight, startY };
+}
+
+function renderSwimlaneBoard(
+  svg: D3Sel,
+  parsed: ParsedKanban,
+  baseLayout: {
+    columns: ColumnLayout[];
+    totalWidth: number;
+    totalHeight: number;
+  },
+  swimlaneGroup: KanbanTagGroup,
+  palette: PaletteColors,
+  isDark: boolean,
+  activeTagGroup: string | null
+): void {
+  const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
+  const buckets = bucketCardsBySwimlane(visibleColumns, swimlaneGroup);
+  const grid = computeSwimlaneLayout(parsed, buckets, baseLayout);
+
+  // Resize the svg to fit the grid (only when not using exportDims).
+  const currentW = parseFloat(svg.attr('width') || '0');
+  const currentH = parseFloat(svg.attr('height') || '0');
+  if (grid.totalWidth > currentW) svg.attr('width', grid.totalWidth);
+  if (grid.totalHeight > currentH) svg.attr('height', grid.totalHeight);
+
+  const defaultColBg = isDark
+    ? mix(palette.surface, palette.bg, 50)
+    : mix(palette.surface, palette.bg, 30);
+  const defaultColHeaderBg = isDark
+    ? mix(palette.surface, palette.bg, 70)
+    : mix(palette.surface, palette.bg, 50);
+  const cardBaseBg = isDark ? palette.surface : palette.bg;
+
+  // Column header row spanning all lanes
+  for (const colInfo of grid.columnXs) {
+    const col = colInfo.column;
+    const headerG = svg
+      .append('g')
+      .attr('class', 'kanban-column kanban-column-header')
+      .attr('data-column-id', col.id)
+      .attr('data-line-number', col.lineNumber);
+
+    const colHeaderBg = col.color
+      ? mix(col.color, palette.bg, 25)
+      : defaultColHeaderBg;
+
+    headerG
+      .append('rect')
+      .attr('x', colInfo.x)
+      .attr('y', grid.startY)
+      .attr('width', colInfo.width)
+      .attr('height', COLUMN_HEADER_HEIGHT)
+      .attr('rx', COLUMN_HEADER_RADIUS)
+      .attr('fill', colHeaderBg);
+
+    headerG
+      .append('text')
+      .attr('x', colInfo.x + COLUMN_PADDING)
+      .attr(
+        'y',
+        grid.startY + COLUMN_HEADER_HEIGHT / 2 + COLUMN_HEADER_FONT_SIZE / 2 - 2
+      )
+      .attr('font-size', COLUMN_HEADER_FONT_SIZE)
+      .attr('font-weight', 'bold')
+      .attr('fill', palette.text)
+      .text(col.name);
+  }
+
+  // Lanes
+  for (const lane of grid.lanes) {
+    const laneG = svg
+      .append('g')
+      .attr('class', 'kanban-lane')
+      .attr('data-lane-name', lane.bucket.laneName);
+
+    // Lane header on the left edge
+    const headerG = laneG
+      .append('g')
+      .attr('class', 'kanban-lane-header')
+      .attr(
+        'transform',
+        `translate(${DIAGRAM_PADDING}, ${lane.y - COLUMN_PADDING})`
+      );
+
+    // Background band spanning the row
+    headerG
+      .append('rect')
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('width', LANE_HEADER_WIDTH - 8)
+      .attr('height', lane.height + COLUMN_PADDING * 2)
+      .attr('rx', COLUMN_RADIUS)
+      .attr('fill', defaultColBg);
+
+    // Lane label
+    let labelX = 10;
+    if (lane.bucket.laneColor) {
+      headerG
+        .append('circle')
+        .attr('cx', labelX + 4)
+        .attr('cy', 16)
+        .attr('r', 4)
+        .attr('fill', lane.bucket.laneColor);
+      labelX += 14;
+    }
+    headerG
+      .append('text')
+      .attr('x', labelX)
+      .attr('y', 20)
+      .attr('font-size', 12)
+      .attr('font-weight', 'bold')
+      .attr('fill', lane.bucket.isFallback ? palette.textMuted : palette.text)
+      .text(lane.bucket.laneName);
+
+    // Card count
+    const totalCards = lane.cells.reduce((s, c) => s + c.cards.length, 0);
+    headerG
+      .append('text')
+      .attr('x', labelX)
+      .attr('y', 36)
+      .attr('font-size', 10)
+      .attr('fill', palette.textMuted)
+      .text(`(${totalCards})`);
+
+    // Lane divider line below the row
+    laneG
+      .append('line')
+      .attr('x1', DIAGRAM_PADDING + LANE_HEADER_WIDTH)
+      .attr('x2', grid.totalWidth - DIAGRAM_PADDING)
+      .attr('y1', lane.y + lane.height + COLUMN_PADDING)
+      .attr('y2', lane.y + lane.height + COLUMN_PADDING)
+      .attr('stroke', palette.border ?? palette.textMuted)
+      .attr('stroke-opacity', 0.4)
+      .attr('stroke-width', 1);
+
+    // Cards inside cells
+    for (const cell of lane.cells) {
+      for (const cardLayout of cell.cardLayouts) {
+        renderSwimlaneCard(
+          laneG,
+          cardLayout,
+          parsed.tagGroups,
+          activeTagGroup,
+          palette,
+          cardBaseBg
+        );
+      }
+    }
+  }
+}
+
+function renderSwimlaneCard(
+  parent: D3Sel,
+  cardLayout: CardLayout,
+  tagGroups: KanbanTagGroup[],
+  activeTagGroup: string | null,
+  palette: PaletteColors,
+  cardBaseBg: string
+): void {
+  const card = cardLayout.card;
+  const resolvedColor = resolveCardTagColor(card, tagGroups, activeTagGroup);
+  const tagMeta = resolveCardTagMeta(card, tagGroups);
+  const hasMeta = tagMeta.length > 0 || card.details.length > 0;
+
+  const cardFill = resolvedColor
+    ? mix(resolvedColor, cardBaseBg, 15)
+    : mix(palette.primary, cardBaseBg, 15);
+  const cardStroke = resolvedColor ?? palette.textMuted;
+
+  const cg = parent
+    .append('g')
+    .attr('class', 'kanban-card')
+    .attr('data-card-id', card.id)
+    .attr('data-line-number', card.lineNumber);
+
+  if (activeTagGroup) {
+    const tagKey = activeTagGroup.toLowerCase();
+    const group = tagGroups.find((tg) => tg.name.toLowerCase() === tagKey);
+    const value = card.tags[tagKey] ?? group?.defaultValue;
+    if (value) {
+      cg.attr(`data-tag-${tagKey}`, value.toLowerCase());
+    }
+  }
+
+  const cx = cardLayout.x;
+  const cy = cardLayout.y;
+
+  cg.append('rect')
+    .attr('x', cx)
+    .attr('y', cy)
+    .attr('width', cardLayout.width)
+    .attr('height', cardLayout.height)
+    .attr('rx', CARD_RADIUS)
+    .attr('fill', cardFill)
+    .attr('stroke', cardStroke)
+    .attr('stroke-width', CARD_STROKE_WIDTH);
+
+  const titleEl = cg
+    .append('text')
+    .attr('x', cx + CARD_PADDING_X)
+    .attr('y', cy + CARD_PADDING_Y + CARD_TITLE_FONT_SIZE)
+    .attr('font-size', CARD_TITLE_FONT_SIZE)
+    .attr('font-weight', '500')
+    .attr('fill', palette.text);
+  renderInlineText(titleEl, card.title, palette, CARD_TITLE_FONT_SIZE);
+
+  if (hasMeta) {
+    const separatorY = cy + CARD_HEADER_HEIGHT;
+    cg.append('line')
+      .attr('x1', cx)
+      .attr('y1', separatorY)
+      .attr('x2', cx + cardLayout.width)
+      .attr('y2', separatorY)
+      .attr('stroke', cardStroke)
+      .attr('stroke-opacity', 0.3)
+      .attr('stroke-width', 1);
+
+    let metaY = separatorY + CARD_SEPARATOR_GAP + CARD_META_FONT_SIZE;
+
+    for (const meta of tagMeta) {
+      cg.append('text')
+        .attr('x', cx + CARD_PADDING_X)
+        .attr('y', metaY)
+        .attr('font-size', CARD_META_FONT_SIZE)
+        .attr('fill', palette.textMuted)
+        .text(`${meta.label}: `);
+      const labelWidth = (meta.label.length + 2) * CARD_META_FONT_SIZE * 0.6;
+      cg.append('text')
+        .attr('x', cx + CARD_PADDING_X + labelWidth)
+        .attr('y', metaY)
+        .attr('font-size', CARD_META_FONT_SIZE)
+        .attr('fill', palette.text)
+        .text(meta.value);
+      metaY += CARD_META_LINE_HEIGHT;
+    }
+
+    for (const detail of card.details) {
+      const detailEl = cg
+        .append('text')
+        .attr('x', cx + CARD_PADDING_X)
+        .attr('y', metaY)
+        .attr('font-size', CARD_META_FONT_SIZE)
+        .attr('fill', palette.textMuted);
+      renderInlineText(detailEl, detail, palette, CARD_META_FONT_SIZE);
+      metaY += CARD_META_LINE_HEIGHT;
+    }
+  }
+}

package/src/palettes/bold.ts

@@ -29,6 +29,8 @@ export const boldPalette: PaletteConfig = {
       teal: '#008080',
       cyan: '#00cccc',
       gray: '#808080',
+      black: '#000000',
+      white: '#f0f0f0',
     },
   },
   dark: {
@@ -52,6 +54,8 @@ export const boldPalette: PaletteConfig = {
       teal: '#00cccc',
       cyan: '#00ffff',
       gray: '#808080',
+      black: '#111111',
+      white: '#ffffff',
     },
   },
 };

package/src/palettes/catppuccin.ts

@@ -46,6 +46,8 @@ export const catppuccinPalette: PaletteConfig = {
       teal: '#179299',
       cyan: '#209fb5',
       gray: '#9ca0b0', // Latte Overlay0
+      black: '#4c4f69',
+      white: '#e6e9ef',
     },
   },
   dark: {
@@ -69,6 +71,8 @@ export const catppuccinPalette: PaletteConfig = {
       teal: '#94e2d5',
       cyan: '#74c7ec',
       gray: '#6c7086', // Mocha Overlay0
+      black: '#313244',
+      white: '#cdd6f4',
     },
   },
 };

package/src/palettes/dracula.ts

@@ -30,6 +30,8 @@ export const draculaPalette: PaletteConfig = {
       teal: '#5ac8b8', // muted cyan toward green
       cyan: '#8be9fd',
       gray: '#6272a4',
+      black: '#282a36',
+      white: '#f0f0ec',
     },
   },
   dark: {
@@ -53,6 +55,8 @@ export const draculaPalette: PaletteConfig = {
       teal: '#5ac8b8', // muted cyan toward green
       cyan: '#8be9fd',
       gray: '#6272a4',
+      black: '#343746',
+      white: '#f8f8f2',
     },
   },
 };

package/src/palettes/gruvbox.ts

@@ -47,6 +47,8 @@ export const gruvboxPalette: PaletteConfig = {
       teal: '#427b58', // faded aqua
       cyan: '#427b58', // faded aqua
       gray: '#928374',
+      black: '#3c3836',
+      white: '#ebdbb2',
     },
   },
   dark: {
@@ -70,6 +72,8 @@ export const gruvboxPalette: PaletteConfig = {
       teal: '#8ec07c', // bright aqua
       cyan: '#8ec07c', // bright aqua
       gray: '#928374',
+      black: '#3c3836',
+      white: '#ebdbb2',
     },
   },
 };

package/src/palettes/monokai.ts

@@ -30,6 +30,8 @@ export const monokaiPalette: PaletteConfig = {
       teal: '#4ea8a6', // muted from cyan
       cyan: '#66d9ef',
       gray: '#75715e', // comment
+      black: '#272822',
+      white: '#f0efe8',
     },
   },
   dark: {
@@ -53,6 +55,8 @@ export const monokaiPalette: PaletteConfig = {
       teal: '#4ea8a6', // muted from cyan
       cyan: '#66d9ef',
       gray: '#75715e', // comment
+      black: '#2d2e27',
+      white: '#f8f8f2',
     },
   },
 };

package/src/palettes/nord.ts

@@ -29,6 +29,8 @@ export const nordPalette: PaletteConfig = {
       teal: '#8fbcbb', // nord7
       cyan: '#88c0d0', // nord8
       gray: '#4c566a', // nord3
+      black: '#2e3440',
+      white: '#e5e9f0',
     },
   },
   dark: {
@@ -52,6 +54,8 @@ export const nordPalette: PaletteConfig = {
       teal: '#8fbcbb', // nord7
       cyan: '#88c0d0', // nord8
       gray: '#4c566a', // nord3
+      black: '#3b4252',
+      white: '#eceff4',
     },
   },
 };

package/src/palettes/one-dark.ts

@@ -31,6 +31,8 @@ export const oneDarkPalette: PaletteConfig = {
       teal: '#0184bc',
       cyan: '#0997b3',
       gray: '#696c77',
+      black: '#383a42',
+      white: '#f0f0f0',
     },
   },
   dark: {
@@ -55,6 +57,8 @@ export const oneDarkPalette: PaletteConfig = {
       teal: '#56b6c2',
       cyan: '#56b6c2',
       gray: '#5c6370',
+      black: '#21252b',
+      white: '#abb2bf',
     },
   },
 };