@gitlab/ui 137.3.1 → 138.0.0

package/src/tokens/constant/color.red.tokens.json

@@ -5,12 +5,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.9882352941176471,
-            0.9450980392156862,
-            0.9372549019607843
+            0.996078431372549,
+            0.9333333333333333,
+            0.9411764705882353
           ],
           "alpha": 1,
-          "hex": "#fcf1ef"
+          "hex": "#feeef0"
         },
         "$type": "color",
         "$extensions": {
@@ -21,12 +21,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.9921568627450981,
-            0.8313725490196079,
-            0.803921568627451
+            1,
+            0.8274509803921568,
+            0.8431372549019608
           ],
           "alpha": 1,
-          "hex": "#fdd4cd"
+          "hex": "#ffd3d7"
         },
         "$type": "color",
         "$extensions": {
@@ -37,12 +37,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.9882352941176471,
-            0.7098039215686275,
-            0.6666666666666666
+            1,
+            0.6862745098039216,
+            0.7215686274509804
           ],
           "alpha": 1,
-          "hex": "#fcb5aa"
+          "hex": "#ffafb8"
         },
         "$type": "color",
         "$extensions": {
@@ -53,12 +53,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.9647058823529412,
-            0.5019607843137255,
-            0.42745098039215684
+            0.9882352941176471,
+            0.4745098039215686,
+            0.5333333333333333
           ],
           "alpha": 1,
-          "hex": "#f6806d"
+          "hex": "#fc7988"
         },
         "$type": "color",
         "$extensions": {
@@ -69,12 +69,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.9254901960784314,
-            0.34901960784313724,
-            0.2549019607843137
+            0.9450980392156862,
+            0.3176470588235294,
+            0.40784313725490196
           ],
           "alpha": 1,
-          "hex": "#ec5941"
+          "hex": "#f15168"
         },
         "$type": "color",
         "$extensions": {
@@ -85,12 +85,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.8666666666666667,
-            0.16862745098039217,
-            0.054901960784313725
+            0.8705882352941177,
+            0.11372549019607843,
+            0.29411764705882354
           ],
           "alpha": 1,
-          "hex": "#dd2b0e"
+          "hex": "#de1d4b"
         },
         "$type": "color",
         "$extensions": {
@@ -101,12 +101,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.7529411764705882,
-            0.1843137254901961,
-            0.07058823529411765
+            0.7725490196078432,
+            0.12549019607843137,
+            0.25882352941176473
           ],
           "alpha": 1,
-          "hex": "#c02f12"
+          "hex": "#c52042"
         },
         "$type": "color",
         "$extensions": {
@@ -117,12 +117,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.6392156862745098,
-            0.17254901960784313,
-            0.07058823529411765
+            0.6745098039215687,
+            0.12549019607843137,
+            0.22745098039215686
           ],
           "alpha": 1,
-          "hex": "#a32c12"
+          "hex": "#ac203a"
         },
         "$type": "color",
         "$extensions": {
@@ -133,12 +133,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.5058823529411764,
-            0.15294117647058825,
-            0.07450980392156863
+            0.5372549019607843,
+            0.10980392156862745,
+            0.1843137254901961
           ],
           "alpha": 1,
-          "hex": "#812713"
+          "hex": "#891c2f"
         },
         "$type": "color",
         "$extensions": {
@@ -149,12 +149,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.34509803921568627,
-            0.12549019607843137,
-            0.0784313725490196
+            0.39215686274509803,
+            0.09803921568627451,
+            0.1450980392156863
           ],
           "alpha": 1,
-          "hex": "#582014"
+          "hex": "#641925"
         },
         "$type": "color",
         "$extensions": {
@@ -165,12 +165,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.24313725490196078,
-            0.10196078431372549,
-            0.0784313725490196
+            0.2823529411764706,
+            0.08235294117647059,
+            0.11372549019607843
           ],
           "alpha": 1,
-          "hex": "#3e1a14"
+          "hex": "#48151d"
         },
         "$type": "color",
         "$extensions": {

package/src/tokens/contextual/avatar.tokens.json

@@ -161,9 +161,9 @@
             "$value": {
               "colorSpace": "srgb",
               "components": [
-                0.9882352941176471,
-                0.7098039215686275,
-                0.6666666666666666
+                1,
+                0.6862745098039216,
+                0.7215686274509804
               ],
               "alpha": 0.23921568627450981
             },
@@ -180,9 +180,9 @@
             "$value": {
               "colorSpace": "srgb",
               "components": [
-                0.796078431372549,
-                0.7333333333333333,
-                0.9490196078431372
+                0.788235294117647,
+                0.7450980392156863,
+                0.9372549019607843
               ],
               "alpha": 0.23921568627450981
             },
@@ -200,8 +200,8 @@
               "colorSpace": "srgb",
               "components": [
                 0.615686274509804,
-                0.7803921568627451,
-                0.9450980392156862
+                0.7843137254901961,
+                0.9490196078431372
               ],
               "alpha": 0.23921568627450981
             },
@@ -218,9 +218,9 @@
             "$value": {
               "colorSpace": "srgb",
               "components": [
-                0.5686274509803921,
+                0.5176470588235295,
                 0.8313725490196079,
-                0.6588235294117647
+                0.7137254901960784
               ],
               "alpha": 0.23921568627450981
             },
@@ -237,9 +237,9 @@
             "$value": {
               "colorSpace": "srgb",
               "components": [
-                0.9137254901960784,
-                0.7450980392156863,
-                0.4549019607843137
+                0.9686274509803922,
+                0.7254901960784313,
+                0.3176470588235294
               ],
               "alpha": 0.23921568627450981
             },

package/src/tokens/contextual/button.tokens.json

@@ -867,8 +867,8 @@
           "color": {
             "default": {
               "$value": {
-                "default": "{color.red.500}",
-                "dark": "{color.red.300}"
+                "default": "{color.red.600}",
+                "dark": "{color.red.400}"
               },
               "$type": "color",
               "$description": "Used for the background of a danger (destructive) primary button in the default state.",
@@ -881,8 +881,8 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.red.600}",
-                "dark": "{color.red.200}"
+                "default": "{color.red.700}",
+                "dark": "{color.red.300}"
               },
               "$type": "color",
               "$description": "Used for the background of a danger (destructive) primary button in the hover state.",
@@ -906,8 +906,8 @@
             },
             "active": {
               "$value": {
-                "default": "{color.red.800}",
-                "dark": "{color.red.400}"
+                "default": "{color.red.900}",
+                "dark": "{color.red.200}"
               },
               "$type": "color",
               "$description": "Used for the background of a danger (destructive) primary button in the active state.",
@@ -924,7 +924,7 @@
           "color": {
             "default": {
               "$value": {
-                "default": "{color.red.600}",
+                "default": "{color.red.700}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",
@@ -937,7 +937,7 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.red.800}",
+                "default": "{color.red.900}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",
@@ -960,7 +960,7 @@
             },
             "active": {
               "$value": {
-                "default": "{color.red.900}",
+                "default": "{color.red.950}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",
@@ -979,7 +979,7 @@
           "color": {
             "default": {
               "$value": {
-                "default": "{color.red.500}",
+                "default": "{color.red.600}",
                 "dark": "{color.red.100}"
               },
               "$type": "color",
@@ -993,7 +993,7 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.red.700}",
+                "default": "{color.red.800}",
                 "dark": "{color.red.50}"
               },
               "$type": "color",
@@ -1040,9 +1040,9 @@
                 "dark": {
                   "colorSpace": "srgb",
                   "components": [
-                    0.9254901960784314,
-                    0.34901960784313724,
-                    0.2549019607843137
+                    0.9450980392156862,
+                    0.3176470588235294,
+                    0.40784313725490196
                   ],
                   "alpha": 0.4
                 }
@@ -1062,9 +1062,9 @@
                 "dark": {
                   "colorSpace": "srgb",
                   "components": [
-                    0.9254901960784314,
-                    0.34901960784313724,
-                    0.2549019607843137
+                    0.9450980392156862,
+                    0.3176470588235294,
+                    0.40784313725490196
                   ],
                   "alpha": 0.64
                 }
@@ -1095,9 +1095,9 @@
                 "dark": {
                   "colorSpace": "srgb",
                   "components": [
-                    0.9254901960784314,
-                    0.34901960784313724,
-                    0.2549019607843137
+                    0.9450980392156862,
+                    0.3176470588235294,
+                    0.40784313725490196
                   ],
                   "alpha": 0.32
                 }
@@ -1117,7 +1117,7 @@
           "color": {
             "default": {
               "$value": {
-                "default": "{color.red.500}",
+                "default": "{color.red.600}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",
@@ -1130,7 +1130,7 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.red.700}",
+                "default": "{color.red.800}",
                 "dark": "{color.alpha.0}"
               },
               "$type": "color",

package/src/tokens/contextual/chart.tokens.json

@@ -47,9 +47,9 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.8666666666666667,
-              0.16862745098039217,
-              0.054901960784313725
+              0.8705882352941177,
+              0.11372549019607843,
+              0.29411764705882354
             ],
             "alpha": 0.1
           },

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

@@ -602,18 +602,18 @@
               "default": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.9607843137254902,
-                  0.4980392156862745,
-                  0.4235294117647059
+                  0.8705882352941177,
+                  0.11372549019607843,
+                  0.29411764705882354
                 ],
                 "alpha": 0
               },
               "dark": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.9254901960784314,
-                  0.34901960784313724,
-                  0.2549019607843137
+                  0.9450980392156862,
+                  0.3176470588235294,
+                  0.40784313725490196
                 ],
                 "alpha": 0
               }
@@ -632,18 +632,18 @@
               "default": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.9607843137254902,
-                  0.4980392156862745,
-                  0.4235294117647059
+                  0.8705882352941177,
+                  0.11372549019607843,
+                  0.29411764705882354
                 ],
                 "alpha": 0.16
               },
               "dark": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.9254901960784314,
-                  0.34901960784313724,
-                  0.2549019607843137
+                  0.9450980392156862,
+                  0.3176470588235294,
+                  0.40784313725490196
                 ],
                 "alpha": 0.4
               }
@@ -673,18 +673,18 @@
               "default": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.6823529411764706,
-                  0.09411764705882353,
-                  0
+                  0.6745098039215687,
+                  0.12549019607843137,
+                  0.22745098039215686
                 ],
                 "alpha": 0.24
               },
               "dark": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.9254901960784314,
-                  0.34901960784313724,
-                  0.2549019607843137
+                  0.9450980392156862,
+                  0.3176470588235294,
+                  0.40784313725490196
                 ],
                 "alpha": 0.16
               }

package/src/utils/confetti/confetti.js

@@ -0,0 +1,191 @@
+import { COVERAGE_RAMP } from './palette';
+import { createPieces, advancePiece } from './particles';
+import { createField } from './field';
+import { CANVAS_Z_INDEX, DEFAULT_DURATION, FADE_OUT_DURATION, MAX_FRAME_DELTA } from './constants';
+
+const noop = () => {};
+
+const RUNNING_ATTRIBUTE = 'data-confetti';
+
+const measureStage = (boundary) => {
+  const rect =
+    boundary instanceof Element
+      ? boundary.getBoundingClientRect()
+      : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
+
+  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+};
+
+const stagePoint = (element, stage) => {
+  if (!(element instanceof Element)) {
+    return null;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  return {
+    x: rect.left + rect.width / 2 - stage.x,
+    y: rect.top + rect.height / 2 - stage.y,
+  };
+};
+
+const createCanvas = () => {
+  const canvas = document.createElement('canvas');
+
+  canvas.setAttribute('aria-hidden', 'true');
+  canvas.setAttribute(RUNNING_ATTRIBUTE, '');
+  Object.assign(canvas.style, {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: String(CANVAS_Z_INDEX),
+  });
+
+  return canvas;
+};
+
+/**
+ * Bursts a dithered field of pixel blocks, lets it fall, then cleans up after itself.
+ *
+ * Every option has a default, so `confetti()` on its own fires from the bottom corners of the
+ * viewport. The blocks shrink as they fall and as they fade, and the ones furthest back start
+ * smaller, which is what gives the field its depth.
+ *
+ * Only one burst runs at a time: a call made while another is still on screen does nothing and
+ * returns a no-op, so a double click cannot stack two canvases.
+ *
+ * Does nothing when the user prefers reduced motion, or outside a browser.
+ *
+ * The canvas is `aria-hidden`, so nobody using a screen reader will know it fired. When the
+ * confetti is the only sign that something worked, the caller has to convey that success in the
+ * accessibility tree as well.
+ *
+ * @param {Object} [options]
+ * @param {Number} [options.count] Number of pieces. Defaults to a count scaled to the area it
+ * plays in, so a small `boundary` gets proportionally fewer.
+ * @param {Number} [options.duration=3000] How long the animation runs, in milliseconds.
+ * @param {String[]} [options.colors] CSS colors for the coverage ramp, sparse to dense: the first
+ * paints the thinnest edge of a cluster and the last its densest center. Any length works, and the
+ * first four double as the chromatic fringe colors. Defaults to the brand purple, red and orange
+ * color tokens.
+ * @param {Element} [options.origin] Element to burst from. Defaults to the bottom corners.
+ * @param {Element} [options.boundary] Element to confine the confetti to. Defaults to the viewport.
+ * @example
+ * const stop = confetti({ origin: button, colors: ['#7759c2', '#a989f5', '#fca326'] });
+ * @returns {Function} Stops the animation and removes the canvas early.
+ */
+export const confetti = ({ count, duration = DEFAULT_DURATION, colors, origin, boundary } = {}) => {
+  if (
+    typeof window === 'undefined' ||
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ||
+    document.querySelector(`[${RUNNING_ATTRIBUTE}]`)
+  ) {
+    return noop;
+  }
+
+  const canvas = createCanvas();
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return noop;
+  }
+
+  const stage = measureStage(boundary);
+
+  const resize = () => {
+    const ratio = window.devicePixelRatio || 1;
+
+    canvas.width = window.innerWidth * ratio;
+    canvas.height = window.innerHeight * ratio;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  };
+
+  const fadeOutDuration = Math.min(FADE_OUT_DURATION, duration);
+  const field = createField({ ramp: colors?.length ? colors : COVERAGE_RAMP, duration });
+  const cleared = { x: 0, y: 0, width: 0, height: 0 };
+
+  let lastColor = null;
+
+  const drawBlock = ({ x, y, size, color }) => {
+    if (color !== lastColor) {
+      lastColor = color;
+      context.fillStyle = color;
+    }
+
+    context.fillRect(x, y, size, size);
+  };
+
+  const clearStage = () => {
+    const moved =
+      stage.x !== cleared.x ||
+      stage.y !== cleared.y ||
+      stage.width !== cleared.width ||
+      stage.height !== cleared.height;
+
+    if (moved) {
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      Object.assign(cleared, stage);
+    } else {
+      context.clearRect(stage.x, stage.y, stage.width, stage.height);
+    }
+  };
+
+  let pieces = createPieces({ stage, origin: stagePoint(origin, stage), count });
+
+  let frame = null;
+  let startedAt = null;
+  let previousAt = null;
+
+  const stop = () => {
+    if (frame !== null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    window.removeEventListener('resize', resize);
+    canvas.remove();
+  };
+
+  const render = (now) => {
+    startedAt ??= now;
+    const elapsed = now - startedAt;
+    const delta = Math.min(now - (previousAt ?? now), MAX_FRAME_DELTA);
+    previousAt = now;
+
+    if (elapsed >= duration) {
+      stop();
+      return;
+    }
+
+    Object.assign(stage, measureStage(boundary));
+    clearStage();
+    lastColor = null;
+    context.globalAlpha = Math.min(1, (duration - elapsed) / fadeOutDuration);
+    context.save();
+    context.beginPath();
+    context.rect(stage.x, stage.y, stage.width, stage.height);
+    context.clip();
+    context.translate(stage.x, stage.y);
+
+    pieces = pieces.map((piece) => advancePiece(piece, { elapsed, delta }));
+    field.resize(stage);
+    pieces.forEach((piece) => {
+      if (elapsed >= piece.delay) {
+        field.stamp(piece, elapsed);
+      }
+    });
+    field.paint(drawBlock);
+
+    context.restore();
+
+    frame = window.requestAnimationFrame(render);
+  };
+
+  resize();
+  window.addEventListener('resize', resize);
+  document.body.append(canvas);
+  frame = window.requestAnimationFrame(render);
+
+  return stop;
+};