feat: add new color token and font customization

src/constants/customizations.ts

@@ -5,6 +5,7 @@ export const FONTS = {
   display: { value: 'Raleway, ui-sans-serif, system-ui, sans-serif' },
   heading: { value: 'Inter, ui-sans-serif, system-ui, sans-serif' },
   mono: { value: 'Space Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' },
+  metric: { value: 'Space Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' },
 };
 
 export const FONT_SIZES = {
@@ -40,6 +41,7 @@ export const LINE_HEIGHTS = {
 
 export const COLORS = {
   black: { value: '#121212' },
+  forestgreen: { value: '#032b1a' },
   primary: {
     50: { value: '#f3f6f5' },
     100: { value: '#f2fcf7' },

src/stories/tokens/Colors.stories.tsx

@@ -45,6 +45,7 @@ export const Colors = () => (
       <ColorRow colorToken="transparent" />
       <ColorRow colorToken="black" />
       <ColorRow colorToken="white" />
+      <ColorRow colorToken="forestgreen" />
       {COLOR_PALETTES.map((color) =>
         colorWeights.map((weight) => <ColorRow colorToken={`${color}.${weight}`} />)
       )}

src/types/ColorsCustomization.ts

@@ -18,6 +18,7 @@ interface ColorScale {
 
 interface ColorsCustomization {
   black?: ColorToken;
+  forestgreen?: ColorToken;
   primary?: ColorScale;
   gray?: ColorScale;
   red?: ColorScale;

src/types/FontsCustomization.ts

@@ -3,6 +3,7 @@ interface FontsCustomization {
   display?: { value: string };
   heading?: { value: string };
   mono?: { value: string };
+  metric?: { value: string };
 }
 
 export default FontsCustomization;