vega · domoritz · May 29, 2024 · May 28, 2024
diff --git a/examples/index.html b/examples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Vega Theme Test</title>
@@ -19,6 +19,7 @@
       }
       #views {
         display: flex;
+        gap: 60px;
         flex-wrap: wrap;
         justify-content: left;
       }
@@ -45,6 +46,46 @@
       .vega-bind label {
         margin: 0 0.5em 0 2px;
       }
+
+      #carbon-alert {
+        display: none;
+        background: #f4f4f4;
+        border-inline-start: 3px solid #f1c21b;
+        color: #161616;
+        font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+        padding: 16px;
+        margin-top: 24px;
+        margin-bottom: 48px;
+      }
+
+      #carbon-alert.visible {
+        display: block;
+      }
+
+      #carbon-alert.dark {
+        background: #393939;
+        border-inline-start: 3px solid #f1c21b;
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      #carbon-alert a {
+        color: #0f62fe;
+      }
+
+      #carbon-alert.dark a {
+        color: #78a9ff;
+      }
+
+      .carbon-alert__title {
+        margin: 0;
+        font-weight: 600;
+        font-size: 16px;
+        margin-bottom: 4px;
+      }
+
+      .carbon-alert__subtitle {
+        margin: 0;
+      }
     </style>
   </head>
   <body>
@@ -62,10 +103,12 @@
         <option value="urbaninstitute">urbaninstitute</option>
         <option value="googlecharts">googlecharts</option>
         <option value="powerbi">powerbi</option>
-        <option value="carbonwhite">carbonwhite</option>
-        <option value="carbong10">carbong10</option>
-        <option value="carbong90">carbong90</option>
-        <option value="carbong100">carbong100</option>
+        <optgroup label="Carbon">
+          <option value="carbonwhite">carbonwhite</option>
+          <option value="carbong10">carbong10</option>
+          <option value="carbong90">carbong90</option>
+          <option value="carbong100">carbong100</option>
+        </optgroup>
       </select>
       &nbsp; Renderer:
       <select id="render">
@@ -74,6 +117,22 @@
       </select>
       <br />
     </div>
+
+    <div id="carbon-alert">
+      <p class="carbon-alert__title">Additional imports</p>
+
+      <p class="carbon-alert__subtitle">
+        Carbon themes require the Plex font to be imported, as well as an additional CSS file (to style overflow menu &
+        tooltips). More instructions
+        <a
+          href="https://github.com/carbon-design-system/carbon-vega-theme/blob/main/README.md"
+          target="_blank"
+          rel="noreferrer"
+          >here</a
+        >
+      </p>
+    </div>
+
     <div id="views"></div>
     <script>
       var files = [
@@ -100,7 +159,7 @@
           return loader.load(file).then(function (json) {
             specs[index] = JSON.parse(json);
           });
-        })
+        }),
       )
         .then(function () {
           var earlierChoosenTheme = url.searchParams.get("theme");
@@ -139,6 +198,8 @@
       });
 
       function refresh() {
+        const themeName = themes.options[themes.selectedIndex].value;
+
         container.innerHTML = "";
         setBackground(theme);
         specs.forEach(function (spec) {
@@ -151,6 +212,78 @@
             defaultStyle: true,
           });
         });
+
+        // Add Carbon theme CSS & font if selected
+        if (["carbonwhite", "carbong10", "carbong90", "carbong100"].includes(themeName)) {
+          AddCarbonThemeImports();
+        } else {
+          RemoveCarbonThemeImports();
+        }
+      }
+
+      /*
+       * Carbon themes are accompanied by a CSS bundle
+       * and require Plex font to be imported
+       */
+      function AddCarbonThemeImports() {
+        const themeName = themes.options[themes.selectedIndex].value;
+
+        var _previousLink = document.getElementById("carbon-theme-css");
+        if (_previousLink) {
+          _previousLink.remove();
+        }
+
+        var carbonAlert = document.getElementById("carbon-alert");
+        if (carbonAlert) {
+          carbonAlert.classList.add("visible");
+
+          if (["carbong90", "carbong100"].includes(themeName)) {
+            carbonAlert.classList.add("dark");
+          } else {
+            carbonAlert.classList.remove("dark");
+          }
+        }
+
+        var _link = document.createElement("link");
+        _link.id = "carbon-theme-css";
+        _link.rel = "stylesheet";
+        _fileNameToImport = {
+          carbonwhite: "white",
+          carbong10: "g10",
+          carbong90: "g90",
+          carbong100: "g100",
+        }[themeName];
+        _link.href = `https://1.www.s81c.com/common/carbon/dataviz/carbon-vega-theme/0.0.1/css/${_fileNameToImport}.css`;
+        document.head.appendChild(_link);
+
+        if (!document.getElementById("plex-sans-font")) {
+          var _plexSansFont = document.createElement("link");
+          _plexSansFont.rel = "stylesheet";
+          _plexSansFont.href = "https://1.www.s81c.com/common/carbon/plex/sans.css";
+          _plexSansFont.id = "plex-sans-font";
+          document.head.appendChild(_plexSansFont);
+        }
+
+        if (!document.getElementById("plex-sans-condensed-font")) {
+          var _plexSansCondensedFont = document.createElement("link");
+          _plexSansCondensedFont.rel = "stylesheet";
+          _plexSansCondensedFont.href = "https://1.www.s81c.com/common/carbon/plex/sans-condensed.css";
+          _plexSansCondensedFont.id = "plex-sans-condensed-font";
+          document.head.appendChild(_plexSansCondensedFont);
+        }
+      }
+
+      // Remove Carbon theme CSS & font
+      function RemoveCarbonThemeImports() {
+        var _link = document.getElementById("carbon-theme-css");
+        if (_link) {
+          _link.remove();
+        }
+
+        var carbonAlert = document.getElementById("carbon-alert");
+        if (carbonAlert) {
+          carbonAlert.classList.remove("visible");
+        }
       }
 
       function setBackground(theme) {

diff --git a/src/carbongen.ts b/src/carbongen.ts
@@ -1,8 +1,29 @@
 import {Config} from './config';
 
 const defaultFont = 'IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,".sfnstext-regular",sans-serif';
+const condensedFont =
+  'IBM Plex Sans Condensed, system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif';
 const fontWeight = 400;
 
+const TOKENS = {
+  textPrimary: {g90: '#f4f4f4', g100: '#f4f4f4', white: '#161616', g10: '#161616'},
+  textSecondary: {g90: '#c6c6c6', g100: '#c6c6c6', white: '#525252', g10: '#525252'},
+  // layer
+  layerAccent01: {
+    white: '#e0e0e0',
+    g10: '#e0e0e0',
+    g90: '#525252',
+    g100: '#393939',
+  },
+  // grid
+  gridBg: {
+    white: '#ffffff',
+    g10: '#ffffff',
+    g90: '#161616',
+    g100: '#161616',
+  },
+};
+
 const darkCategories = [
   '#8a3ffc',
   '#33b1ff',
@@ -37,9 +58,14 @@ const lightCategories = [
   '#a56eff',
 ];
 
-function genCarbonConfig({type, background}: {type: 'light' | 'dark'; background: string}): Config {
-  const viewbg = type === 'dark' ? '#161616' : '#ffffff';
-  const textColor = type === 'dark' ? '#f4f4f4' : '#161616';
+function genCarbonConfig({theme, background}: {theme: 'white' | 'g10' | 'g90' | 'g100'; background: string}): Config {
+  const type = ['white', 'g10'].includes(theme) ? 'light' : 'dark';
+
+  const viewbg = TOKENS.gridBg[theme];
+
+  const titleColor = TOKENS.textPrimary[theme];
+  const textColor = TOKENS.textSecondary[theme];
+
   const category = type === 'dark' ? darkCategories : lightCategories;
   const markColor = type === 'dark' ? '#d4bbff' : '#6929c4';
 
@@ -64,7 +90,7 @@ function genCarbonConfig({type, background}: {type: 'light' | 'dark'; background
     },
 
     title: {
-      color: textColor,
+      color: titleColor,
       anchor: 'start',
       dy: -15,
       fontSize: 16,
@@ -73,14 +99,27 @@ function genCarbonConfig({type, background}: {type: 'light' | 'dark'; background
     },
 
     axis: {
+      // Axis labels
       labelColor: textColor,
       labelFontSize: 12,
+      labelFont: condensedFont,
+      labelFontWeight: fontWeight,
+      // Axis titles
+      titleColor: titleColor,
+      titleFontWeight: 600,
+      titleFontSize: 12,
+
+      // MISC
       grid: true,
-      gridColor: '#525252',
-      titleColor: textColor,
+      gridColor: TOKENS.layerAccent01[theme],
       labelAngle: 0,
     },
-
+    axisX: {
+      titlePadding: 10,
+    },
+    axisY: {
+      titlePadding: 2.5,
+    },
     style: {
       'guide-label': {
         font: defaultFont,

diff --git a/src/theme-carbong10.ts b/src/theme-carbong10.ts
@@ -1,7 +1,7 @@
 import genCarbonConfig from './carbongen';
 
 const carbong10 = genCarbonConfig({
-  type: 'light',
+  theme: 'g10',
   background: '#f4f4f4',
 });
 

diff --git a/src/theme-carbong100.ts b/src/theme-carbong100.ts
@@ -1,7 +1,7 @@
 import genCarbonConfig from './carbongen';
 
 const carbong100 = genCarbonConfig({
-  type: 'dark',
+  theme: 'g100',
   background: '#161616',
 });
 

diff --git a/src/theme-carbong90.ts b/src/theme-carbong90.ts
@@ -1,7 +1,7 @@
 import genCarbonConfig from './carbongen';
 
 const carbong90 = genCarbonConfig({
-  type: 'dark',
+  theme: 'g90',
   background: '#262626',
 });
 

diff --git a/src/theme-carbonwhite.ts b/src/theme-carbonwhite.ts
@@ -1,7 +1,7 @@
 import genCarbonConfig from './carbongen';
 
 const carbonwhite = genCarbonConfig({
-  type: 'light',
+  theme: 'white',
   background: '#ffffff',
 });