@diagrammo/dgmo 0.25.5 → 0.27.0

package/src/utils/text-measure.ts

@@ -0,0 +1,122 @@
+// ============================================================
+// Shared text measurement
+// ============================================================
+// One source of truth for "how wide is this string?" Before this
+// module, ~30 renderers/layouts each carried their own char-width
+// estimate (7.5px, 7px, 0.6·fontSize, 0.58, 0.55 …). The drift meant
+// the same label measured differently per chart type — a label could
+// fit inside an org node but overflow an infra node. All sizing,
+// wrapping, and truncation now route through the per-glyph table here.
+
+// Helvetica character width ratios (fraction of fontSize). Replaces the
+// naive `chars * 0.6 * fontSize` estimate with per-character widths.
+// prettier-ignore
+const CHAR_W: Record<string, number> = {
+  ' ':.28,'!': .28,'"': .36,'#': .56,'$': .56,'%': .89,'&': .67,"'":.19,
+  '(':.33,')':.33,'*': .39,'+':.58,',':.28,'-':.33,'.':.28,'/':.28,
+  '0':.56,'1':.56,'2':.56,'3':.56,'4':.56,'5':.56,'6':.56,'7':.56,'8':.56,'9':.56,
+  ':':.28,';':.28,'<':.58,'=':.58,'>':.58,'?':.56,'@':1.02,
+  A:.67,B:.67,C:.72,D:.72,E:.67,F:.61,G:.78,H:.72,I:.28,J:.50,K:.67,L:.56,M:.83,
+  N:.72,O:.78,P:.67,Q:.78,R:.72,S:.67,T:.61,U:.72,V:.67,W:.94,X:.67,Y:.67,Z:.61,
+  a:.56,b:.56,c:.50,d:.56,e:.56,f:.28,g:.56,h:.56,i:.22,j:.22,k:.50,l:.22,m:.83,
+  n:.56,o:.56,p:.56,q:.56,r:.33,s:.50,t:.28,u:.56,v:.50,w:.72,x:.50,y:.50,z:.50,
+};
+const DEFAULT_W = 0.56;
+
+/**
+ * Average glyph-width ratio (fraction of fontSize). Only for the rare
+ * call site that needs a single scalar (e.g. estimating a max char count
+ * up front). Prefer {@link measureText} / {@link wrapTextToWidth} —
+ * they account for actual glyph widths.
+ */
+export const CHAR_WIDTH_RATIO = DEFAULT_W;
+
+/** Estimate rendered text width using Helvetica proportional character widths. */
+export function measureText(text: string, fontSize: number): number {
+  let w = 0;
+  for (let i = 0; i < text.length; i++) {
+    // charAt returns '' for out-of-bounds, never undefined.
+    w += (CHAR_W[text.charAt(i)] ?? DEFAULT_W) * fontSize;
+  }
+  return w;
+}
+
+/**
+ * Truncate text with a trailing ellipsis to fit within maxWidth.
+ * Returns the original text if it already fits, or '' if even the
+ * ellipsis alone won't fit.
+ */
+export function truncateText(
+  text: string,
+  fontSize: number,
+  maxWidth: number
+): string {
+  if (measureText(text, fontSize) <= maxWidth) return text;
+  const ellipsis = '…';
+  const ellipsisW = measureText(ellipsis, fontSize);
+  if (ellipsisW > maxWidth) return '';
+  let lo = 0;
+  let hi = text.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(text.slice(0, mid), fontSize) + ellipsisW <= maxWidth) {
+      lo = mid;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return lo === 0 ? ellipsis : text.slice(0, lo) + ellipsis;
+}
+
+/**
+ * Greedy word-wrap to a pixel width using accurate glyph measurement.
+ *
+ * - Splits on whitespace; a word that alone exceeds `maxWidth` is kept
+ *   whole unless `hardBreak` is set, in which case it is broken at the
+ *   character boundary that fits.
+ * - Returns at least one line (`['']` for empty input).
+ */
+export function wrapTextToWidth(
+  text: string,
+  fontSize: number,
+  maxWidth: number,
+  opts?: { hardBreak?: boolean }
+): string[] {
+  const words = text.split(/\s+/).filter((w) => w.length > 0);
+  if (words.length === 0) return [''];
+  const hardBreak = opts?.hardBreak ?? false;
+  const lines: string[] = [];
+  let current = '';
+  const pushWord = (word: string) => {
+    const test = current ? `${current} ${word}` : word;
+    if (measureText(test, fontSize) <= maxWidth || !current) {
+      current = test;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  };
+  for (const word of words) {
+    if (hardBreak && measureText(word, fontSize) > maxWidth) {
+      // Break the over-long word into width-fitting chunks.
+      if (current) {
+        lines.push(current);
+        current = '';
+      }
+      let chunk = '';
+      for (const ch of word) {
+        if (chunk && measureText(chunk + ch, fontSize) > maxWidth) {
+          lines.push(chunk);
+          chunk = ch;
+        } else {
+          chunk += ch;
+        }
+      }
+      current = chunk;
+      continue;
+    }
+    pushWord(word);
+  }
+  if (current) lines.push(current);
+  return lines.length > 0 ? lines : [''];
+}

package/src/wireframe/layout.ts

@@ -3,6 +3,7 @@
 // ============================================================
 
 import type { Writable } from '../utils/brand';
+import { measureText } from '../utils/text-measure';
 import type {
   WireframeElement,
   ParsedWireframe,
@@ -16,8 +17,9 @@ import type {
 const DESKTOP_WIDTH = 1200;
 const MOBILE_WIDTH = 375;
 
-const CHAR_WIDTH = 7.5;
 const LABEL_PADDING = 16;
+/** Font size for label-field label text — matches renderer's renderText (13px). */
+const LABEL_FIELD_FONT_SIZE = 13;
 
 /** Element type-specific heights */
 const ELEMENT_HEIGHTS: Record<string, number> = {
@@ -466,7 +468,7 @@ function computeFieldAlignX(children: readonly WireframeElement[]): number {
     ) {
       // In-bounds by length-check above.
       const labelEl = child.children[0]!;
-      const labelWidth = labelEl.label.length * CHAR_WIDTH;
+      const labelWidth = measureText(labelEl.label, LABEL_FIELD_FONT_SIZE);
       maxLabelWidth = Math.max(maxLabelWidth, labelWidth);
       labelFieldCount++;
     }

package/src/wireframe/renderer.ts

@@ -7,6 +7,7 @@ import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { contrastText, mix, shapeFill } from '../palettes/color-utils';
 import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
+import { measureText } from '../utils/text-measure';
 import type { WireframeElement, ParsedWireframe } from './types';
 import type { WireframeLayout, WireframeLayoutNode } from './layout';
 import { ScaleContext } from '../utils/scaling';
@@ -386,7 +387,7 @@ function renderTextInput(
   // Cursor line
   if (el.fieldVariant !== 'password') {
     const textWidth = Math.min(
-      (el.label || 'Text input').length * 7 + 14,
+      measureText(el.label || 'Text input', 13) + 14,
       node.width - 20
     );
     g.append('line')
@@ -711,19 +712,20 @@ function renderNav(
       .attr('font-weight', isActive ? '600' : 'normal')
       .text(child.label);
 
+    const labelW = measureText(child.label, 13);
+
     // Active underline
     if (isActive) {
-      const textW = child.label.length * 7.5;
       g.append('line')
         .attr('x1', x)
         .attr('y1', node.height - 4)
-        .attr('x2', x + textW)
+        .attr('x2', x + labelW)
         .attr('y2', node.height - 4)
         .attr('stroke', palette.primary)
         .attr('stroke-width', 2);
     }
 
-    x += child.label.length * 7.5 + 24;
+    x += labelW + 24;
   }
 }
 
@@ -748,7 +750,7 @@ function renderTabs(
   let x = 0;
   for (const child of el.children) {
     const isActive = child.states.includes('active');
-    const tabW = child.label.length * 7.5 + 24;
+    const tabW = measureText(child.label, 13) + 24;
 
     if (isActive) {
       // Active tab bottom border
@@ -884,7 +886,7 @@ function renderTableCell(
     const isGhost = stateStr === 'ghost';
     const isDestructive = stateStr === 'destructive';
     const fill = isDestructive ? palette.destructive : palette.primary;
-    const btnW = Math.min(label.length * 7 + 16, maxW);
+    const btnW = Math.min(measureText(label, 10) + 16, maxW);
     const btnH = 20;
     const by = y + (rowH - btnH) / 2;
 

package/src/palettes/dracula.ts

@@ -1,68 +0,0 @@
-import type { PaletteConfig } from './types';
-import { registerPalette } from './registry';
-
-// ============================================================
-// Dracula Palette Definition
-// https://draculatheme.com/contribute
-// ============================================================
-
-export const draculaPalette: PaletteConfig = {
-  id: 'dracula',
-  name: 'Dracula',
-  light: {
-    bg: '#f8f8f2', // foreground as light bg
-    surface: '#f0f0ec',
-    overlay: '#e8e8e2',
-    border: '#d8d8d2',
-    text: '#282a36', // background as light text
-    textMuted: '#44475a', // current line
-    textOnFillLight: '#f8f8f2',
-    textOnFillDark: '#282a36',
-    primary: '#6272a4', // comment
-    secondary: '#bd93f9', // purple
-    accent: '#bd93f9', // purple
-    destructive: '#ff5555', // red
-    colors: {
-      red: '#ff5555',
-      orange: '#ffb86c',
-      yellow: '#f1fa8c',
-      green: '#50fa7b',
-      blue: '#6272a4', // comment blue
-      purple: '#bd93f9',
-      teal: '#5ac8b8', // muted cyan toward green
-      cyan: '#8be9fd',
-      gray: '#6272a4',
-      black: '#282a36',
-      white: '#f0f0ec',
-    },
-  },
-  dark: {
-    bg: '#282a36', // background
-    surface: '#343746', // between bg and current line
-    overlay: '#44475a', // current line
-    border: '#6272a4', // comment
-    text: '#f8f8f2', // foreground
-    textMuted: '#bcc2d4', // muted foreground
-    textOnFillLight: '#f8f8f2',
-    textOnFillDark: '#282a36',
-    primary: '#bd93f9', // purple (Dracula's signature)
-    secondary: '#8be9fd', // cyan
-    accent: '#ff79c6', // pink
-    destructive: '#ff5555', // red
-    colors: {
-      red: '#ff5555',
-      orange: '#ffb86c',
-      yellow: '#f1fa8c',
-      green: '#50fa7b',
-      blue: '#6272a4', // comment blue
-      purple: '#bd93f9',
-      teal: '#5ac8b8', // muted cyan toward green
-      cyan: '#8be9fd',
-      gray: '#6272a4',
-      black: '#343746',
-      white: '#f8f8f2',
-    },
-  },
-};
-
-registerPalette(draculaPalette);

package/src/palettes/gruvbox.ts

@@ -1,85 +0,0 @@
-import type { PaletteConfig } from './types';
-import { registerPalette } from './registry';
-
-// ============================================================
-// Gruvbox Palette Definition
-// ============================================================
-
-// Official Gruvbox colors: https://github.com/morhetz/gruvbox
-//
-// Neutrals:
-//   dark0 #282828 | dark1 #3c3836 | dark2 #504945 | dark3 #665c54
-//   light0 #fbf1c7 | light1 #ebdbb2 | light2 #d5c4a1 | light3 #bdae93
-//   gray #928374
-//
-// Accents (bright / neutral / faded):
-//   Red     #fb4934 / #cc241d / #9d0006
-//   Green   #b8bb26 / #98971a / #79740e
-//   Yellow  #fabd2f / #d79921 / #b57614
-//   Blue    #83a598 / #458588 / #076678
-//   Purple  #d3869b / #b16286 / #8f3f71
-//   Aqua    #8ec07c / #689d6a / #427b58
-//   Orange  #fe8019 / #d65d0e / #af3a03
-//
-// Light mode uses faded accents, dark mode uses bright accents.
-
-export const gruvboxPalette: PaletteConfig = {
-  id: 'gruvbox',
-  name: 'Gruvbox',
-  light: {
-    bg: '#fbf1c7', // light0
-    surface: '#ebdbb2', // light1
-    overlay: '#d5c4a1', // light2
-    border: '#bdae93', // light3
-    text: '#3c3836', // dark1
-    textMuted: '#7c6f64', // dark4
-    textOnFillLight: '#fbf1c7', // light0
-    textOnFillDark: '#282828', // dark0
-    primary: '#076678', // faded blue
-    secondary: '#427b58', // faded aqua
-    accent: '#8f3f71', // faded purple
-    destructive: '#9d0006', // faded red
-    colors: {
-      red: '#9d0006', // faded
-      orange: '#af3a03', // faded
-      yellow: '#b57614', // faded
-      green: '#79740e', // faded
-      blue: '#076678', // faded
-      purple: '#8f3f71', // faded
-      teal: '#427b58', // faded aqua
-      cyan: '#427b58', // faded aqua
-      gray: '#928374',
-      black: '#3c3836',
-      white: '#ebdbb2',
-    },
-  },
-  dark: {
-    bg: '#282828', // dark0
-    surface: '#3c3836', // dark1
-    overlay: '#504945', // dark2
-    border: '#665c54', // dark3
-    text: '#ebdbb2', // light1
-    textMuted: '#a89984', // light4
-    textOnFillLight: '#fbf1c7', // light0
-    textOnFillDark: '#282828', // dark0
-    primary: '#83a598', // bright blue
-    secondary: '#8ec07c', // bright aqua
-    accent: '#d3869b', // bright purple
-    destructive: '#fb4934', // bright red
-    colors: {
-      red: '#fb4934', // bright
-      orange: '#fe8019', // bright
-      yellow: '#fabd2f', // bright
-      green: '#b8bb26', // bright
-      blue: '#83a598', // bright
-      purple: '#d3869b', // bright
-      teal: '#8ec07c', // bright aqua
-      cyan: '#8ec07c', // bright aqua
-      gray: '#928374',
-      black: '#3c3836',
-      white: '#ebdbb2',
-    },
-  },
-};
-
-registerPalette(gruvboxPalette);

package/src/palettes/monokai.ts

@@ -1,68 +0,0 @@
-import type { PaletteConfig } from './types';
-import { registerPalette } from './registry';
-
-// ============================================================
-// Monokai Palette Definition
-// Based on Monokai / Monokai Pro color scheme
-// ============================================================
-
-export const monokaiPalette: PaletteConfig = {
-  id: 'monokai',
-  name: 'Monokai',
-  light: {
-    bg: '#fafaf8',
-    surface: '#f0efe8',
-    overlay: '#e6e5de',
-    border: '#d4d3cc',
-    text: '#272822', // classic Monokai bg as text
-    textMuted: '#75715e', // comment
-    textOnFillLight: '#fafaf8',
-    textOnFillDark: '#272822',
-    primary: '#49483e', // line highlight
-    secondary: '#f92672', // pink
-    accent: '#a6e22e', // green
-    destructive: '#f92672', // pink/red
-    colors: {
-      red: '#f92672', // Monokai pink-red
-      orange: '#fd971f',
-      yellow: '#e6db74',
-      green: '#a6e22e',
-      blue: '#5c7eab', // derived true blue
-      purple: '#ae81ff',
-      teal: '#4ea8a6', // muted from cyan
-      cyan: '#66d9ef',
-      gray: '#75715e', // comment
-      black: '#272822',
-      white: '#f0efe8',
-    },
-  },
-  dark: {
-    bg: '#272822', // classic background
-    surface: '#2d2e27',
-    overlay: '#3e3d32', // line highlight
-    border: '#49483e',
-    text: '#f8f8f2', // foreground
-    textMuted: '#a6a28c', // brightened comment
-    textOnFillLight: '#f8f8f2',
-    textOnFillDark: '#272822',
-    primary: '#a6e22e', // green
-    secondary: '#66d9ef', // cyan
-    accent: '#f92672', // pink
-    destructive: '#f92672', // pink/red
-    colors: {
-      red: '#f92672',
-      orange: '#fd971f',
-      yellow: '#e6db74',
-      green: '#a6e22e',
-      blue: '#5c7eab', // derived true blue
-      purple: '#ae81ff',
-      teal: '#4ea8a6', // muted from cyan
-      cyan: '#66d9ef',
-      gray: '#75715e', // comment
-      black: '#2d2e27',
-      white: '#f8f8f2',
-    },
-  },
-};
-
-registerPalette(monokaiPalette);

package/src/palettes/one-dark.ts

@@ -1,70 +0,0 @@
-import type { PaletteConfig } from './types';
-import { registerPalette } from './registry';
-
-// ============================================================
-// One Dark Palette Definition
-// Based on Atom's One Dark theme
-// ============================================================
-
-export const oneDarkPalette: PaletteConfig = {
-  id: 'one-dark',
-  name: 'One Dark',
-  light: {
-    // One Light variant (Atom's light counterpart)
-    bg: '#fafafa',
-    surface: '#f0f0f0',
-    overlay: '#e5e5e5',
-    border: '#d0d0d0',
-    text: '#383a42',
-    textMuted: '#696c77',
-    textOnFillLight: '#fafafa',
-    textOnFillDark: '#181a1f', // Tightened from #383a42 — the light Text token fails 3:1 on saturated blue/teal
-    primary: '#4078f2',
-    secondary: '#a626a4',
-    accent: '#0184bc',
-    destructive: '#e45649',
-    colors: {
-      red: '#e45649',
-      orange: '#c18401',
-      yellow: '#c18401',
-      green: '#50a14f',
-      blue: '#4078f2',
-      purple: '#a626a4',
-      teal: '#0184bc',
-      cyan: '#0997b3',
-      gray: '#696c77',
-      black: '#383a42',
-      white: '#f0f0f0',
-    },
-  },
-  dark: {
-    // One Dark (Atom's dark theme)
-    bg: '#282c34',
-    surface: '#21252b',
-    overlay: '#2c313a',
-    border: '#3e4451',
-    text: '#abb2bf',
-    textMuted: '#5c6370',
-    textOnFillLight: '#fafafa',
-    textOnFillDark: '#21252b',
-    primary: '#61afef',
-    secondary: '#c678dd',
-    accent: '#56b6c2',
-    destructive: '#e06c75',
-    colors: {
-      red: '#e06c75',
-      orange: '#d19a66',
-      yellow: '#e5c07b',
-      green: '#98c379',
-      blue: '#61afef',
-      purple: '#c678dd',
-      teal: '#56b6c2',
-      cyan: '#56b6c2',
-      gray: '#5c6370',
-      black: '#21252b',
-      white: '#abb2bf',
-    },
-  },
-};
-
-registerPalette(oneDarkPalette);

package/src/palettes/rose-pine.ts

@@ -1,84 +0,0 @@
-import type { PaletteConfig } from './types';
-import { registerPalette } from './registry';
-
-// ============================================================
-// Rosé Pine Palette Definition
-// ============================================================
-
-// Official Rosé Pine colors: https://rosepinetheme.com/palette
-//
-// Dawn (light):
-//   Base #faf4ed | Surface #fffaf3 | Overlay #f2e9e1
-//   Muted #9893a5 | Subtle #797593 | Text #575279
-//   Highlight Med #dfdad9
-//
-// Moon (dark):
-//   Base #232136 | Surface #2a273f | Overlay #393552
-//   Muted #6e6a86 | Subtle #908caa | Text #e0def4
-//   Highlight Med #44415a
-//
-// Accents (Dawn / Moon):
-//   Love   #b4637a / #eb6f92 | Gold   #ea9d34 / #f6c177
-//   Rose   #d7827e / #ea9a97 | Pine   #286983 / #3e8fb0
-//   Foam   #56949f / #9ccfd8 | Iris   #907aa9 / #c4a7e7
-
-export const rosePinePalette: PaletteConfig = {
-  id: 'rose-pine',
-  name: 'Rosé Pine',
-  light: {
-    bg: '#faf4ed', // Dawn Base
-    surface: '#fffaf3', // Dawn Surface
-    overlay: '#f2e9e1', // Dawn Overlay
-    border: '#dfdad9', // Dawn Highlight Med
-    text: '#575279', // Dawn Text
-    textMuted: '#9893a5', // Dawn Muted
-    textOnFillLight: '#faf4ed', // Dawn Base
-    textOnFillDark: '#191724', // Rosé Pine Main Base (deep dark)
-    primary: '#286983', // Dawn Pine
-    secondary: '#56949f', // Dawn Foam
-    accent: '#907aa9', // Dawn Iris
-    destructive: '#b4637a', // Dawn Love
-    colors: {
-      red: '#b4637a', // Love
-      orange: '#d7827e', // Rose
-      yellow: '#ea9d34', // Gold
-      green: '#286983', // Pine
-      blue: '#56949f', // Foam
-      purple: '#907aa9', // Iris
-      teal: '#286983', // Pine
-      cyan: '#56949f', // Foam
-      gray: '#9893a5', // Muted
-      black: '#575279',
-      white: '#fffaf3',
-    },
-  },
-  dark: {
-    bg: '#232136', // Moon Base
-    surface: '#2a273f', // Moon Surface
-    overlay: '#393552', // Moon Overlay
-    border: '#44415a', // Moon Highlight Med
-    text: '#e0def4', // Moon Text
-    textMuted: '#908caa', // Moon Subtle
-    textOnFillLight: '#e0def4', // Moon Text
-    textOnFillDark: '#191724', // Rosé Pine Main Base
-    primary: '#3e8fb0', // Moon Pine
-    secondary: '#9ccfd8', // Moon Foam
-    accent: '#c4a7e7', // Moon Iris
-    destructive: '#eb6f92', // Moon Love
-    colors: {
-      red: '#eb6f92', // Love
-      orange: '#ea9a97', // Rose
-      yellow: '#f6c177', // Gold
-      green: '#3e8fb0', // Pine
-      blue: '#9ccfd8', // Foam
-      purple: '#c4a7e7', // Iris
-      teal: '#3e8fb0', // Pine
-      cyan: '#9ccfd8', // Foam
-      gray: '#6e6a86', // Muted
-      black: '#2a273f',
-      white: '#e0def4',
-    },
-  },
-};
-
-registerPalette(rosePinePalette);

package/src/palettes/solarized.ts

@@ -1,77 +0,0 @@
-import type { PaletteConfig } from './types';
-import { registerPalette } from './registry';
-
-// ============================================================
-// Solarized Palette Definition
-// ============================================================
-
-// Official Solarized colors: https://ethanschoonover.com/solarized/
-//
-// Base tones:
-//   base03 #002b36 | base02 #073642 | base01 #586e75 | base00 #657b83
-//   base0  #839496 | base1  #93a1a1 | base2  #eee8d5 | base3  #fdf6e3
-//
-// Accent colors:
-//   yellow #b58900 | orange #cb4b16 | red    #dc322f | magenta #d33682
-//   violet #6c71c4 | blue   #268bd2 | cyan   #2aa198 | green   #859900
-
-export const solarizedPalette: PaletteConfig = {
-  id: 'solarized',
-  name: 'Solarized',
-  light: {
-    bg: '#fdf6e3', // base3
-    surface: '#eee8d5', // base2
-    overlay: '#eee8d5', // base2 (muted/secondary backgrounds)
-    border: '#93a1a1', // base1
-    text: '#657b83', // base00
-    textMuted: '#93a1a1', // base1
-    textOnFillLight: '#fdf6e3', // base3
-    textOnFillDark: '#002b36', // base03
-    primary: '#268bd2', // blue
-    secondary: '#2aa198', // cyan
-    accent: '#6c71c4', // violet
-    destructive: '#dc322f', // red
-    colors: {
-      red: '#dc322f',
-      orange: '#cb4b16',
-      yellow: '#b58900',
-      green: '#859900',
-      blue: '#268bd2',
-      purple: '#6c71c4',
-      teal: '#2aa198',
-      cyan: '#2aa198', // Solarized has no separate cyan — reuse teal
-      gray: '#586e75', // base01
-      black: '#657b83',
-      white: '#eee8d5',
-    },
-  },
-  dark: {
-    bg: '#002b36', // base03
-    surface: '#073642', // base02
-    overlay: '#073642', // base02 (muted/secondary backgrounds)
-    border: '#586e75', // base01
-    text: '#839496', // base0
-    textMuted: '#586e75', // base01
-    textOnFillLight: '#fdf6e3', // base3
-    textOnFillDark: '#002b36', // base03
-    primary: '#268bd2', // blue
-    secondary: '#2aa198', // cyan
-    accent: '#6c71c4', // violet
-    destructive: '#dc322f', // red
-    colors: {
-      red: '#dc322f',
-      orange: '#cb4b16',
-      yellow: '#b58900',
-      green: '#859900',
-      blue: '#268bd2',
-      purple: '#6c71c4',
-      teal: '#2aa198',
-      cyan: '#2aa198',
-      gray: '#586e75', // base01
-      black: '#073642',
-      white: '#839496',
-    },
-  },
-};
-
-registerPalette(solarizedPalette);