@gitlab/ui 132.0.3 → 132.2.0

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -43,64 +43,21 @@ $gl-color-blue-700: var(--gl-color-blue-700);
 $gl-color-blue-800: var(--gl-color-blue-800);
 $gl-color-blue-900: var(--gl-color-blue-900);
 $gl-color-blue-950: var(--gl-color-blue-950);
-$gl-color-neutral-0: var(--gl-color-neutral-0);
-$gl-color-neutral-10: var(--gl-color-neutral-10);
-$gl-color-neutral-50: var(--gl-color-neutral-50);
-$gl-color-neutral-100: var(--gl-color-neutral-100);
-$gl-color-neutral-200: var(--gl-color-neutral-200);
-$gl-color-neutral-300: var(--gl-color-neutral-300);
-$gl-color-neutral-400: var(--gl-color-neutral-400);
-$gl-color-neutral-500: var(--gl-color-neutral-500);
-$gl-color-neutral-600: var(--gl-color-neutral-600);
-$gl-color-neutral-700: var(--gl-color-neutral-700);
-$gl-color-neutral-800: var(--gl-color-neutral-800);
-$gl-color-neutral-900: var(--gl-color-neutral-900);
-$gl-color-neutral-950: var(--gl-color-neutral-950);
-$gl-color-neutral-1000: var(--gl-color-neutral-1000);
-$gl-color-green-50: var(--gl-color-green-50);
-$gl-color-green-100: var(--gl-color-green-100);
-$gl-color-green-200: var(--gl-color-green-200);
-$gl-color-green-300: var(--gl-color-green-300);
-$gl-color-green-400: var(--gl-color-green-400);
-$gl-color-green-500: var(--gl-color-green-500);
-$gl-color-green-600: var(--gl-color-green-600);
-$gl-color-green-700: var(--gl-color-green-700);
-$gl-color-green-800: var(--gl-color-green-800);
-$gl-color-green-900: var(--gl-color-green-900);
-$gl-color-green-950: var(--gl-color-green-950);
-$gl-color-orange-50: var(--gl-color-orange-50);
-$gl-color-orange-100: var(--gl-color-orange-100);
-$gl-color-orange-200: var(--gl-color-orange-200);
-$gl-color-orange-300: var(--gl-color-orange-300);
-$gl-color-orange-400: var(--gl-color-orange-400);
-$gl-color-orange-500: var(--gl-color-orange-500);
-$gl-color-orange-600: var(--gl-color-orange-600);
-$gl-color-orange-700: var(--gl-color-orange-700);
-$gl-color-orange-800: var(--gl-color-orange-800);
-$gl-color-orange-900: var(--gl-color-orange-900);
-$gl-color-orange-950: var(--gl-color-orange-950);
-$gl-color-purple-50: var(--gl-color-purple-50);
-$gl-color-purple-100: var(--gl-color-purple-100);
-$gl-color-purple-200: var(--gl-color-purple-200);
-$gl-color-purple-300: var(--gl-color-purple-300);
-$gl-color-purple-400: var(--gl-color-purple-400);
-$gl-color-purple-500: var(--gl-color-purple-500);
-$gl-color-purple-600: var(--gl-color-purple-600);
-$gl-color-purple-700: var(--gl-color-purple-700);
-$gl-color-purple-800: var(--gl-color-purple-800);
-$gl-color-purple-900: var(--gl-color-purple-900);
-$gl-color-purple-950: var(--gl-color-purple-950);
-$gl-color-red-50: var(--gl-color-red-50);
-$gl-color-red-100: var(--gl-color-red-100);
-$gl-color-red-200: var(--gl-color-red-200);
-$gl-color-red-300: var(--gl-color-red-300);
-$gl-color-red-400: var(--gl-color-red-400);
-$gl-color-red-500: var(--gl-color-red-500);
-$gl-color-red-600: var(--gl-color-red-600);
-$gl-color-red-700: var(--gl-color-red-700);
-$gl-color-red-800: var(--gl-color-red-800);
-$gl-color-red-900: var(--gl-color-red-900);
-$gl-color-red-950: var(--gl-color-red-950);
+$gl-color-brand-white: var(--gl-color-brand-white);
+$gl-color-brand-charcoal: var(--gl-color-brand-charcoal);
+$gl-color-brand-orange-01g: var(--gl-color-brand-orange-01g);
+$gl-color-brand-orange-01p: var(--gl-color-brand-orange-01p);
+$gl-color-brand-orange-02p: var(--gl-color-brand-orange-02p);
+$gl-color-brand-orange-03p: var(--gl-color-brand-orange-03p);
+$gl-color-brand-purple-01g: var(--gl-color-brand-purple-01g);
+$gl-color-brand-purple-01p: var(--gl-color-brand-purple-01p);
+$gl-color-brand-purple-02p: var(--gl-color-brand-purple-02p);
+$gl-color-brand-gray-01: var(--gl-color-brand-gray-01);
+$gl-color-brand-gray-02: var(--gl-color-brand-gray-02);
+$gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
+$gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
+$gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
+$gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
 $gl-color-data-green-50: var(--gl-color-data-green-50);
 $gl-color-data-green-100: var(--gl-color-data-green-100);
 $gl-color-data-green-200: var(--gl-color-data-green-200);
@@ -156,6 +113,64 @@ $gl-color-data-orange-700: var(--gl-color-data-orange-700);
 $gl-color-data-orange-800: var(--gl-color-data-orange-800);
 $gl-color-data-orange-900: var(--gl-color-data-orange-900);
 $gl-color-data-orange-950: var(--gl-color-data-orange-950);
+$gl-color-green-50: var(--gl-color-green-50);
+$gl-color-green-100: var(--gl-color-green-100);
+$gl-color-green-200: var(--gl-color-green-200);
+$gl-color-green-300: var(--gl-color-green-300);
+$gl-color-green-400: var(--gl-color-green-400);
+$gl-color-green-500: var(--gl-color-green-500);
+$gl-color-green-600: var(--gl-color-green-600);
+$gl-color-green-700: var(--gl-color-green-700);
+$gl-color-green-800: var(--gl-color-green-800);
+$gl-color-green-900: var(--gl-color-green-900);
+$gl-color-green-950: var(--gl-color-green-950);
+$gl-color-neutral-0: var(--gl-color-neutral-0);
+$gl-color-neutral-10: var(--gl-color-neutral-10);
+$gl-color-neutral-50: var(--gl-color-neutral-50);
+$gl-color-neutral-100: var(--gl-color-neutral-100);
+$gl-color-neutral-200: var(--gl-color-neutral-200);
+$gl-color-neutral-300: var(--gl-color-neutral-300);
+$gl-color-neutral-400: var(--gl-color-neutral-400);
+$gl-color-neutral-500: var(--gl-color-neutral-500);
+$gl-color-neutral-600: var(--gl-color-neutral-600);
+$gl-color-neutral-700: var(--gl-color-neutral-700);
+$gl-color-neutral-800: var(--gl-color-neutral-800);
+$gl-color-neutral-900: var(--gl-color-neutral-900);
+$gl-color-neutral-950: var(--gl-color-neutral-950);
+$gl-color-neutral-1000: var(--gl-color-neutral-1000);
+$gl-color-orange-50: var(--gl-color-orange-50);
+$gl-color-orange-100: var(--gl-color-orange-100);
+$gl-color-orange-200: var(--gl-color-orange-200);
+$gl-color-orange-300: var(--gl-color-orange-300);
+$gl-color-orange-400: var(--gl-color-orange-400);
+$gl-color-orange-500: var(--gl-color-orange-500);
+$gl-color-orange-600: var(--gl-color-orange-600);
+$gl-color-orange-700: var(--gl-color-orange-700);
+$gl-color-orange-800: var(--gl-color-orange-800);
+$gl-color-orange-900: var(--gl-color-orange-900);
+$gl-color-orange-950: var(--gl-color-orange-950);
+$gl-color-purple-50: var(--gl-color-purple-50);
+$gl-color-purple-100: var(--gl-color-purple-100);
+$gl-color-purple-200: var(--gl-color-purple-200);
+$gl-color-purple-300: var(--gl-color-purple-300);
+$gl-color-purple-400: var(--gl-color-purple-400);
+$gl-color-purple-500: var(--gl-color-purple-500);
+$gl-color-purple-600: var(--gl-color-purple-600);
+$gl-color-purple-700: var(--gl-color-purple-700);
+$gl-color-purple-800: var(--gl-color-purple-800);
+$gl-color-purple-900: var(--gl-color-purple-900);
+$gl-color-purple-950: var(--gl-color-purple-950);
+$gl-color-red-50: var(--gl-color-red-50);
+$gl-color-red-100: var(--gl-color-red-100);
+$gl-color-red-200: var(--gl-color-red-200);
+$gl-color-red-300: var(--gl-color-red-300);
+$gl-color-red-400: var(--gl-color-red-400);
+$gl-color-red-500: var(--gl-color-red-500);
+$gl-color-red-600: var(--gl-color-red-600);
+$gl-color-red-700: var(--gl-color-red-700);
+$gl-color-red-800: var(--gl-color-red-800);
+$gl-color-red-900: var(--gl-color-red-900);
+$gl-color-red-950: var(--gl-color-red-950);
 $gl-color-theme-indigo-10: var(--gl-color-theme-indigo-10);
 $gl-color-theme-indigo-50: var(--gl-color-theme-indigo-50);
 $gl-color-theme-indigo-100: var(--gl-color-theme-indigo-100);
@@ -228,21 +243,6 @@ $gl-color-theme-light-red-700: var(--gl-color-theme-light-red-700);
 $gl-color-theme-light-red-800: var(--gl-color-theme-light-red-800);
 $gl-color-theme-light-red-900: var(--gl-color-theme-light-red-900);
 $gl-color-theme-light-red-950: var(--gl-color-theme-light-red-950);
-$gl-color-brand-white: var(--gl-color-brand-white);
-$gl-color-brand-charcoal: var(--gl-color-brand-charcoal);
-$gl-color-brand-orange-01g: var(--gl-color-brand-orange-01g);
-$gl-color-brand-orange-01p: var(--gl-color-brand-orange-01p);
-$gl-color-brand-orange-02p: var(--gl-color-brand-orange-02p);
-$gl-color-brand-orange-03p: var(--gl-color-brand-orange-03p);
-$gl-color-brand-purple-01g: var(--gl-color-brand-purple-01g);
-$gl-color-brand-purple-01p: var(--gl-color-brand-purple-01p);
-$gl-color-brand-purple-02p: var(--gl-color-brand-purple-02p);
-$gl-color-brand-gray-01: var(--gl-color-brand-gray-01);
-$gl-color-brand-gray-02: var(--gl-color-brand-gray-02);
-$gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
-$gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
-$gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
-$gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
 $gl-font-family-regular: var(--gl-font-family-regular);
 $gl-font-family-monospace: var(--gl-font-family-monospace);
 $gl-font-size-100: var(--gl-font-size-100);

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

@@ -0,0 +1,182 @@
+{
+  "color": {
+    "blue": {
+      "50": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9137254901960784,
+            0.9529411764705882,
+            0.9882352941176471
+          ],
+          "alpha": 1,
+          "hex": "#e9f3fc"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "100": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.796078431372549,
+            0.8862745098039215,
+            0.9764705882352941
+          ],
+          "alpha": 1,
+          "hex": "#cbe2f9"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "200": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.615686274509804,
+            0.7803921568627451,
+            0.9450980392156862
+          ],
+          "alpha": 1,
+          "hex": "#9dc7f1"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "300": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.38823529411764707,
+            0.6509803921568628,
+            0.9137254901960784
+          ],
+          "alpha": 1,
+          "hex": "#63a6e9"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "400": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.25882352941176473,
+            0.5607843137254902,
+            0.8627450980392157
+          ],
+          "alpha": 1,
+          "hex": "#428fdc"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "500": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.12156862745098039,
+            0.4588235294117647,
+            0.796078431372549
+          ],
+          "alpha": 1,
+          "hex": "#1f75cb"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "600": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.1843137254901961,
+            0.40784313725490196,
+            0.7058823529411765
+          ],
+          "alpha": 1,
+          "hex": "#2f68b4"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "700": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.1843137254901961,
+            0.3607843137254902,
+            0.6274509803921569
+          ],
+          "alpha": 1,
+          "hex": "#2f5ca0"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "800": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.1568627450980392,
+            0.2784313725490196,
+            0.4745098039215686
+          ],
+          "alpha": 1,
+          "hex": "#284779"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "900": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.12941176470588237,
+            0.20392156862745098,
+            0.32941176470588235
+          ],
+          "alpha": 1,
+          "hex": "#213454"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "950": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.11372549019607843,
+            0.1568627450980392,
+            0.24313725490196078
+          ],
+          "alpha": 1,
+          "hex": "#1d283e"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,252 @@
+{
+  "color": {
+    "brand-white": {
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "alpha": 1,
+        "hex": "#fff"
+      },
+      "$type": "color",
+      "$extensions": {
+        "com.figma.scopes": []
+      }
+    },
+    "brand-charcoal": {
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.09019607843137255,
+          0.07450980392156863,
+          0.12941176470588237
+        ],
+        "alpha": 1,
+        "hex": "#171321"
+      },
+      "$type": "color",
+      "$extensions": {
+        "com.figma.scopes": []
+      }
+    },
+    "brand-orange": {
+      "01g": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.8196078431372549,
+            0.7490196078431373
+          ],
+          "alpha": 1,
+          "hex": "#ffd1bf"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "01p": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9882352941176471,
+            0.6392156862745098,
+            0.14901960784313725
+          ],
+          "alpha": 1,
+          "hex": "#fca326"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "02p": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.9882352941176471,
+            0.42745098039215684,
+            0.14901960784313725
+          ],
+          "alpha": 1,
+          "hex": "#fc6d26"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "03p": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.8862745098039215,
+            0.2627450980392157,
+            0.1607843137254902
+          ],
+          "alpha": 1,
+          "hex": "#e24329"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      }
+    },
+    "brand-purple": {
+      "01g": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.807843137254902,
+            0.7019607843137254,
+            0.9372549019607843
+          ],
+          "alpha": 1,
+          "hex": "#ceb3ef"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "01p": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.6627450980392157,
+            0.5372549019607843,
+            0.9607843137254902
+          ],
+          "alpha": 1,
+          "hex": "#a989f5"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "02p": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.4666666666666667,
+            0.34901960784313724,
+            0.7607843137254902
+          ],
+          "alpha": 1,
+          "hex": "#7759c2"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      }
+    },
+    "brand-gray": {
+      "01": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.8196078431372549,
+            0.8156862745098039,
+            0.8274509803921568
+          ],
+          "alpha": 1,
+          "hex": "#d1d0d3"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "02": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.6352941176470588,
+            0.6313725490196078,
+            0.6509803921568628
+          ],
+          "alpha": 1,
+          "hex": "#a2a1a6"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "03": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.4549019607843137,
+            0.44313725490196076,
+            0.47843137254901963
+          ],
+          "alpha": 1,
+          "hex": "#74717a"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "04": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.27058823529411763,
+            0.25882352941176473,
+            0.30196078431372547
+          ],
+          "alpha": 1,
+          "hex": "#45424d"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      },
+      "05": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.16862745098039217,
+            0.1568627450980392,
+            0.2196078431372549
+          ],
+          "alpha": 1,
+          "hex": "#2b2838"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      }
+    },
+    "brand-pink": {
+      "01g": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.7254901960784313,
+            0.788235294117647
+          ],
+          "alpha": 1,
+          "hex": "#ffb9c9"
+        },
+        "$type": "color",
+        "$extensions": {
+          "com.figma.scopes": []
+        }
+      }
+    }
+  }
+}