@gitlab/ui 137.1.2 → 137.2.1

package/src/tokens/contextual/alert.tokens.json

@@ -30,10 +30,7 @@
       },
       "background": {
         "color": {
-          "$value": {
-            "default": "{feedback.neutral.background.color}",
-            "dark": "{background.color.subtle}"
-          },
+          "$value": "{feedback.neutral.background.color}",
           "$type": "color",
           "$description": "Used for the background color of a neutral alert.",
           "$extensions": {
@@ -45,6 +42,16 @@
         }
       },
       "border": {
+        "color": {
+          "$value": "{feedback.neutral.border.color}",
+          "$type": "color",
+          "$description": "Used for the border color of a neutral alert.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "STROKE_COLOR"
+            ]
+          }
+        },
         "top": {
           "color": {
             "$value": {
@@ -52,13 +59,14 @@
               "dark": "{color.neutral.400}"
             },
             "$type": "color",
-            "$description": "Used for the border center color of a neutral alert.",
+            "$description": "Used for the border color of a neutral alert.",
             "$extensions": {
               "com.figma.scopes": [
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         },
         "bottom": {
           "color": {
@@ -70,7 +78,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         }
       }
     },
@@ -79,7 +88,7 @@
         "color": {
           "$value": {
             "default": "{text.color.heading}",
-            "dark": "{color.blue.300}"
+            "dark": "{color.blue.200}"
           },
           "$type": "color",
           "$description": "Used for the title color of an info alert.",
@@ -92,10 +101,7 @@
       },
       "background": {
         "color": {
-          "$value": {
-            "default": "{feedback.info.background.color}",
-            "dark": "{background.color.subtle}"
-          },
+          "$value": "{feedback.info.background.color}",
           "$type": "color",
           "$description": "Used for the background color of an info alert.",
           "$extensions": {
@@ -107,6 +113,16 @@
         }
       },
       "border": {
+        "color": {
+          "$value": "{feedback.info.border.color}",
+          "$type": "color",
+          "$description": "Used for the border color of an info alert.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "STROKE_COLOR"
+            ]
+          }
+        },
         "top": {
           "color": {
             "$value": {
@@ -120,14 +136,16 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         },
         "bottom": {
           "color": {
             "$value": "{color.alpha.0}",
             "$type": "color",
             "$description": "Used for the border bottom color of an info alert."
-          }
+          },
+          "$deprecated": true
         }
       }
     },
@@ -136,7 +154,7 @@
         "color": {
           "$value": {
             "default": "{text.color.heading}",
-            "dark": "{color.green.300}"
+            "dark": "{color.green.200}"
           },
           "$type": "color",
           "$description": "Used for the title color of a success alert.",
@@ -149,10 +167,7 @@
       },
       "background": {
         "color": {
-          "$value": {
-            "default": "{feedback.success.background.color}",
-            "dark": "{background.color.subtle}"
-          },
+          "$value": "{feedback.success.background.color}",
           "$type": "color",
           "$description": "Used for the background color of a success alert.",
           "$extensions": {
@@ -164,6 +179,16 @@
         }
       },
       "border": {
+        "color": {
+          "$value": "{feedback.success.border.color}",
+          "$type": "color",
+          "$description": "Used for the border color of a success alert.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "STROKE_COLOR"
+            ]
+          }
+        },
         "top": {
           "color": {
             "$value": {
@@ -177,7 +202,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         },
         "bottom": {
           "color": {
@@ -189,7 +215,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         }
       }
     },
@@ -198,7 +225,7 @@
         "color": {
           "$value": {
             "default": "{text.color.heading}",
-            "dark": "{color.orange.300}"
+            "dark": "{color.orange.200}"
           },
           "$type": "color",
           "$description": "Used for the title color of a warning alert.",
@@ -211,10 +238,7 @@
       },
       "background": {
         "color": {
-          "$value": {
-            "default": "{feedback.warning.background.color}",
-            "dark": "{background.color.subtle}"
-          },
+          "$value": "{feedback.warning.background.color}",
           "$type": "color",
           "$description": "Used for the background color of a warning alert.",
           "$extensions": {
@@ -226,6 +250,16 @@
         }
       },
       "border": {
+        "color": {
+          "$value": "{feedback.warning.border.color}",
+          "$type": "color",
+          "$description": "Used for the border color of a warning alert.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "STROKE_COLOR"
+            ]
+          }
+        },
         "top": {
           "color": {
             "$value": {
@@ -239,7 +273,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         },
         "bottom": {
           "color": {
@@ -251,7 +286,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         }
       }
     },
@@ -260,7 +296,7 @@
         "color": {
           "$value": {
             "default": "{text.color.heading}",
-            "dark": "{color.red.300}"
+            "dark": "{color.red.200}"
           },
           "$type": "color",
           "$description": "Used for the title color of a danger alert.",
@@ -273,10 +309,7 @@
       },
       "background": {
         "color": {
-          "$value": {
-            "default": "{feedback.danger.background.color}",
-            "dark": "{background.color.subtle}"
-          },
+          "$value": "{feedback.danger.background.color}",
           "$type": "color",
           "$description": "Used for the background color of a danger alert.",
           "$extensions": {
@@ -288,6 +321,16 @@
         }
       },
       "border": {
+        "color": {
+          "$value": "{feedback.danger.border.color}",
+          "$type": "color",
+          "$description": "Used for the border color of a danger alert.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "STROKE_COLOR"
+            ]
+          }
+        },
         "top": {
           "color": {
             "$value": {
@@ -301,7 +344,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         },
         "bottom": {
           "color": {
@@ -313,7 +357,8 @@
                 "STROKE_COLOR"
               ]
             }
-          }
+          },
+          "$deprecated": true
         }
       }
     }

package/src/tokens/semantic/action.tokens.json

@@ -542,7 +542,7 @@
         "color": {
           "default": {
             "$value": {
-              "default": "{color.red.500}",
+              "default": "{color.red.600}",
               "dark": "{color.red.200}"
             },
             "$type": "color",
@@ -556,7 +556,7 @@
           },
           "hover": {
             "$value": {
-              "default": "{color.red.700}",
+              "default": "{color.red.800}",
               "dark": "{color.red.100}"
             },
             "$type": "color",
@@ -581,7 +581,7 @@
           },
           "active": {
             "$value": {
-              "default": "{color.red.900}",
+              "default": "{color.red.950}",
               "dark": "{color.red.100}"
             },
             "$type": "color",

package/src/tokens/semantic/feedback.tokens.json

@@ -130,7 +130,7 @@
         "color": {
           "$value": {
             "default": "{color.neutral.600}",
-            "dark": "{color.neutral.300}"
+            "dark": "{color.neutral.200}"
           },
           "$type": "color",
           "$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
@@ -194,7 +194,7 @@
         "color": {
           "$value": {
             "default": "{color.blue.600}",
-            "dark": "{color.blue.300}"
+            "dark": "{color.blue.200}"
           },
           "$type": "color",
           "$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
@@ -258,7 +258,7 @@
         "color": {
           "$value": {
             "default": "{color.green.600}",
-            "dark": "{color.green.300}"
+            "dark": "{color.green.200}"
           },
           "$type": "color",
           "$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
@@ -322,7 +322,7 @@
         "color": {
           "$value": {
             "default": "{color.orange.600}",
-            "dark": "{color.orange.300}"
+            "dark": "{color.orange.200}"
           },
           "$type": "color",
           "$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
@@ -386,7 +386,7 @@
         "color": {
           "$value": {
             "default": "{color.red.600}",
-            "dark": "{color.red.300}"
+            "dark": "{color.red.200}"
           },
           "$type": "color",
           "$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
@@ -450,7 +450,7 @@
         "color": {
           "$value": {
             "default": "{color.purple.600}",
-            "dark": "{color.purple.300}"
+            "dark": "{color.purple.200}"
           },
           "$type": "color",
           "$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",

package/src/utils/charts/color_mode.js

@@ -0,0 +1,83 @@
+import { DARK_ROOT_CLASS, DARK_SCOPE_CLASS, LIGHT_SCOPE_CLASS } from '../../tokens/color_mode';
+
+const SCOPE_CLASSES = [DARK_SCOPE_CLASS, LIGHT_SCOPE_CLASS, DARK_ROOT_CLASS];
+
+const SCOPE_SELECTOR = SCOPE_CLASSES.map((scopeClass) => `.${scopeClass}`).join(', ');
+
+/**
+ * Whether the given element sits in dark mode.
+ *
+ * Colour mode is not a document-wide fact. Tokens are declared for the root dark class and for a
+ * dark scope class, so any subtree can be flipped independently, and a light scope can flip one
+ * back inside a dark document. The nearest scope wins, which is what `closest` gives us.
+ *
+ * This lives under `charts` rather than in the general utilities because charts are the only thing
+ * in the package that needs it. Everywhere else, colour follows tokens and CSS re-resolves them on
+ * its own. Charts cannot always do that: ECharts parses colours numerically for its visual maps,
+ * and canvas cannot read custom properties at all, so those values have to be chosen in JavaScript
+ * and re-chosen when the mode changes.
+ */
+export const isDarkMode = (element) => {
+  const scope = element?.closest?.(SCOPE_SELECTOR);
+
+  return Boolean(scope) && !scope.classList.contains(LIGHT_SCOPE_CLASS);
+};
+
+// Keyed by subscription so that each subscribed element's last known mode is tracked separately.
+const subscriptions = new Map();
+let observer = null;
+
+// Most class mutations (hover states, dropdowns opening and closing) have nothing to do with the
+// colour mode. Only mutations that added or removed a scope class can change it, so anything else
+// can be dismissed with this cheap check instead of re-checking every subscriber.
+const touchesColorMode = ({ target, oldValue }) =>
+  SCOPE_CLASSES.some(
+    (scopeClass) => target.classList?.contains(scopeClass) || oldValue?.includes(scopeClass),
+  );
+
+const notify = () => {
+  subscriptions.forEach(({ element, subscriber, mode }, key) => {
+    const current = isDarkMode(element);
+
+    if (current !== mode) {
+      subscriptions.set(key, { element, subscriber, mode: current });
+      subscriber(current);
+    }
+  });
+};
+
+/**
+ * Calls back when the colour mode of `element` changes, and returns a function that unsubscribes.
+ *
+ * Most colour can be left to CSS, which re-resolves custom properties on its own. This exists for
+ * the places that cannot: colours ECharts parses numerically, such as the interpolated stops of a
+ * continuous `visualMap`, and colours handed to a canvas context. Both need a concrete value picked
+ * in JavaScript, so both need telling when the mode flips.
+ *
+ * Because a scope class can live on any ancestor, this watches the whole document for class
+ * changes, then re-checks each subscribed element and only calls back when its own mode changed.
+ */
+export const onColorModeChange = (element, subscriber) => {
+  if (!subscriptions.size && typeof MutationObserver !== 'undefined') {
+    observer = new MutationObserver((mutations) => {
+      if (mutations.some((mutation) => touchesColorMode(mutation))) notify();
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+      subtree: true,
+    });
+  }
+
+  const key = Symbol('colorModeSubscription');
+  subscriptions.set(key, { element, subscriber, mode: isDarkMode(element) });
+
+  return () => {
+    subscriptions.delete(key);
+
+    if (!subscriptions.size) {
+      observer?.disconnect();
+      observer = null;
+    }
+  };
+};

package/src/utils/charts/css_values.js

@@ -0,0 +1,59 @@
+import { mapValues } from 'lodash-es';
+
+const CSS_VAR = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]*?)\s*)?\)$/;
+
+const resolveString = (value, styles) => {
+  if (value.toLowerCase() === 'currentcolor') {
+    return styles.color;
+  }
+
+  const match = CSS_VAR.exec(value);
+  if (!match) {
+    return value;
+  }
+
+  const [, name, fallback] = match;
+  const resolved = styles.getPropertyValue(name).trim();
+
+  if (resolved) {
+    return resolved;
+  }
+
+  return fallback ? resolveString(fallback, styles) : value;
+};
+
+/**
+ * Deeply replaces `var(--token)` and `currentcolor` strings with the values they resolve to for the
+ * given element.
+ *
+ * The SVG renderer needs none of this: it emits both forms into the DOM, where the browser resolves
+ * them and keeps them live across a colour-mode change. Canvas has no such context. `fillStyle` is
+ * a plain string setter, so an unparseable `var(--token)` is dropped on the floor and leaves the
+ * previous fill in place, while `currentcolor` has no element to inherit from and is defined to
+ * resolve to opaque black. Either way a canvas-rendered chart silently loses its themed colours.
+ *
+ * Resolution is relative to `element` rather than the document root so that `.gl-dark-scope`
+ * ancestors are honoured.
+ *
+ * Values are resolved once, so callers are responsible for resolving again when the colour mode
+ * changes.
+ */
+export const resolveCssValues = (input, element) => {
+  const styles = window.getComputedStyle(element);
+
+  const walk = (value) => {
+    if (typeof value === 'string') {
+      return resolveString(value, styles);
+    }
+    if (Array.isArray(value)) {
+      return value.map((item) => walk(item));
+    }
+    // Themes carry functions (formatters) which must pass through untouched.
+    if (value !== null && typeof value === 'object') {
+      return mapValues(value, walk);
+    }
+    return value;
+  };
+
+  return walk(input);
+};

package/src/utils/charts/theme.js

@@ -1,8 +1,9 @@
 import {
+  GL_COLOR_NEUTRAL_0,
   GL_COLOR_NEUTRAL_50,
   GL_COLOR_NEUTRAL_100,
-  GL_COLOR_NEUTRAL_500,
-  GL_COLOR_NEUTRAL_900,
+  GL_COLOR_NEUTRAL_800,
+  GL_COLOR_NEUTRAL_950,
   GL_COLOR_DATA_AQUA_50,
   GL_COLOR_DATA_AQUA_100,
   GL_COLOR_DATA_AQUA_200,
@@ -58,6 +59,7 @@ import {
   GL_COLOR_DATA_ORANGE_800,
   GL_COLOR_DATA_ORANGE_950,
   GL_COLOR_DATA_ORANGE_900,
+  GL_FONT_FAMILY_REGULAR,
 } from '../../tokens/build/js/tokens';
 import {
   scrollHandleSvgPath,
@@ -66,20 +68,45 @@ import {
   clearAllSvgPath,
   downloadSvgPath,
 } from '../svgs/svg_paths';
+import { defaultFontSize } from './config';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
 
 export const themeName = 'gitlab';
 
+/**
+ * Sequential scales step away from the surface so that higher values gain contrast against it:
+ * darker on a light surface, lighter on a dark one. The lowest step is neutral rather than blue, so
+ * that "no data" reads as absence instead of as the bottom of the data range.
+ *
+ * https://design.gitlab.com/data-visualization/color#sequential-data
+ */
 export const heatmapHues = [
   GL_COLOR_NEUTRAL_100,
-  GL_COLOR_DATA_BLUE_200,
-  GL_COLOR_DATA_BLUE_400,
+  GL_COLOR_DATA_BLUE_500,
   GL_COLOR_DATA_BLUE_600,
   GL_COLOR_DATA_BLUE_800,
+  GL_COLOR_DATA_BLUE_950,
 ];
 
-export const gaugeNeutralHues = [GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500];
+export const heatmapHuesDark = [
+  GL_COLOR_NEUTRAL_800,
+  GL_COLOR_DATA_BLUE_600,
+  GL_COLOR_DATA_BLUE_500,
+  GL_COLOR_DATA_BLUE_400,
+  GL_COLOR_DATA_BLUE_200,
+];
+
+/**
+ * The plate behind the cells, and the separators between them. Separators match the surface so that
+ * neighbouring cells, which are only guaranteed to contrast with the surface and not with each
+ * other, stay distinguishable.
+ *
+ * https://design.gitlab.com/data-visualization/color#visual-separators
+ */
+export const heatmapSurface = { plate: GL_COLOR_NEUTRAL_100, separator: GL_COLOR_NEUTRAL_0 };
+export const heatmapSurfaceDark = { plate: GL_COLOR_NEUTRAL_800, separator: GL_COLOR_NEUTRAL_950 };
+
 export const gaugeSafeHues = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900];
 export const gaugeWarningHue = GL_COLOR_DATA_ORANGE_500;
 
@@ -159,12 +186,33 @@ export const colorPaletteDark = [
 
 export const colorFromDarkPalette = (index) => colorPaletteDark[index % colorPaletteDark.length];
 
+// ECharts lays out text by assigning a CSS font shorthand to a canvas context and calling
+// `measureText`, even under the SVG renderer. Canvas does not substitute CSS custom properties,
+// and an unparseable shorthand is rejected wholesale, leaving text measured at the canvas default
+// of 10px sans-serif. So the chart font stack must be concrete: drop the leading
+// `var(--default-regular-font, 'GitLab Sans')` consumer override, whose own fallback is the
+// 'GitLab Sans' that follows it.
+export const defaultFontFamily = GL_FONT_FAMILY_REGULAR.filter(
+  (family) => !family.startsWith('var('),
+).join(', ');
+
+/**
+ * Chart font sizes are concrete pixel numbers rather than the rem-based font.size tokens they
+ * mirror. zrender measures text on a detached canvas, which always resolves 1rem as 16px however
+ * the document root is set, so rem sizes render scaled while being laid out at the wrong width.
+ *
+ * `defaultFontSize` (12, font.size.100) is set per component in the theme below, because ECharts
+ * pins fontSize in its own component defaults (axis labels at 12, title at 18, gauge detail at 30)
+ * and those shadow `textStyle`.
+ */
+
 const axes = {
   axisLabel: {
     margin: 8,
     show: true,
     color: 'var(--gl-chart-axis-text-color)',
     hideOverlap: true,
+    fontSize: defaultFontSize,
   },
   axisLine: {
     show: false,
@@ -188,6 +236,7 @@ const axes = {
   nameGap: 30,
   nameTextStyle: {
     fontWeight: 'bold',
+    fontSize: defaultFontSize,
   },
   splitLine: {
     lineStyle: {
@@ -208,6 +257,24 @@ export const createTheme = (options = {}) => ({
   backgroundColor: 'transparent',
   textStyle: {
     color: 'var(--gl-text-color-default)',
+    fontFamily: defaultFontFamily,
+    fontSize: defaultFontSize,
+  },
+  title: {
+    textStyle: {
+      fontSize: 18, // font.size.500-fixed, 1.125rem
+    },
+  },
+  gauge: {
+    axisLabel: {
+      fontSize: 14, // font.size.300, 0.875rem, the default body size
+      color: 'var(--gl-chart-axis-text-color)',
+    },
+    detail: {
+      fontSize: 30,
+      fontWeight: 'bold',
+      color: 'var(--gl-text-color-default)',
+    },
   },
   markLine: {
     silent: true,

package/src/utils/constants.js

@@ -393,9 +393,9 @@ export const loadingIconVariants = {
 
 export const themes = [
   { class: null, value: 'default', title: 'Default' },
-  { class: 'tint-neutral-indigo', value: 'indigo', title: 'Indigo' },
-  { class: 'tint-neutral-blue', value: 'blue', title: 'Blue' },
-  { class: 'tint-neutral-green', value: 'green', title: 'Green' },
-  { class: 'tint-neutral-red', value: 'red', title: 'Red' },
-  { class: 'tint-neutral-gray', value: 'gray', title: 'Gray' },
+  { class: 'ui-indigo', value: 'indigo', title: 'Indigo' },
+  { class: 'ui-blue', value: 'blue', title: 'Blue' },
+  { class: 'ui-green', value: 'green', title: 'Green' },
+  { class: 'ui-red', value: 'red', title: 'Red' },
+  { class: 'ui-gray', value: 'gray', title: 'Gray' },
 ];