@gitlab/ui 86.0.1 → 86.1.0

package/dist/tokens/json/tokens.json

@@ -2580,7 +2580,7 @@
       "subtle": {
         "value": "#ececef",
         "$type": "color",
-        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "comment": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
@@ -2589,7 +2589,7 @@
             "dark": "{color.neutral.900}"
           },
           "$type": "color",
-          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+          "comment": "Used for a subtle border in combination with the default background."
         },
         "name": "BORDER_COLOR_SUBTLE",
         "attributes": {},
@@ -5320,6 +5320,267 @@
           "950"
         ]
       }
+    },
+    "brand-white": {
+      "value": "#fff",
+      "$type": "color",
+      "filePath": "src/tokens/color.constant.tokens.json",
+      "isSource": true,
+      "original": {
+        "value": "#fff",
+        "$type": "color"
+      },
+      "name": "COLOR_BRAND_WHITE",
+      "attributes": {},
+      "path": [
+        "color",
+        "brand-white"
+      ]
+    },
+    "brand-charcoal": {
+      "value": "#171321",
+      "$type": "color",
+      "filePath": "src/tokens/color.constant.tokens.json",
+      "isSource": true,
+      "original": {
+        "value": "#171321",
+        "$type": "color"
+      },
+      "name": "COLOR_BRAND_CHARCOAL",
+      "attributes": {},
+      "path": [
+        "color",
+        "brand-charcoal"
+      ]
+    },
+    "brand-orange": {
+      "01g": {
+        "value": "#ffd1bf",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#ffd1bf",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_ORANGE_01G",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-orange",
+          "01g"
+        ]
+      },
+      "01p": {
+        "value": "#fca326",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#fca326",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_ORANGE_01P",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-orange",
+          "01p"
+        ]
+      },
+      "02p": {
+        "value": "#fc6d26",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#fc6d26",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_ORANGE_02P",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-orange",
+          "02p"
+        ]
+      },
+      "03p": {
+        "value": "#e24329",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#e24329",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_ORANGE_03P",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-orange",
+          "03p"
+        ]
+      }
+    },
+    "brand-purple": {
+      "01g": {
+        "value": "#ceb3ef",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#ceb3ef",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_PURPLE_01G",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-purple",
+          "01g"
+        ]
+      },
+      "01p": {
+        "value": "#a989f5",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#a989f5",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_PURPLE_01P",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-purple",
+          "01p"
+        ]
+      },
+      "02p": {
+        "value": "#7759c2",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#7759c2",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_PURPLE_02P",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-purple",
+          "02p"
+        ]
+      }
+    },
+    "brand-gray": {
+      "01": {
+        "value": "#d1d0d3",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#d1d0d3",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_GRAY_01",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-gray",
+          "01"
+        ]
+      },
+      "02": {
+        "value": "#a2a1a6",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#a2a1a6",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_GRAY_02",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-gray",
+          "02"
+        ]
+      },
+      "03": {
+        "value": "#74717a",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#74717a",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_GRAY_03",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-gray",
+          "03"
+        ]
+      },
+      "04": {
+        "value": "#45424d",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#45424d",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_GRAY_04",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-gray",
+          "04"
+        ]
+      },
+      "05": {
+        "value": "#2b2838",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#2b2838",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_GRAY_05",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-gray",
+          "05"
+        ]
+      }
+    },
+    "brand-pink": {
+      "01g": {
+        "value": "#ffb9c9",
+        "$type": "color",
+        "filePath": "src/tokens/color.constant.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#ffb9c9",
+          "$type": "color"
+        },
+        "name": "COLOR_BRAND_PINK_01G",
+        "attributes": {},
+        "path": [
+          "color",
+          "brand-pink",
+          "01g"
+        ]
+      }
     }
   },
   "data-viz": {
@@ -9999,13 +10260,15 @@
       "$type": "color",
       "themeable": true,
       "prefix": false,
+      "deprecated": true,
       "filePath": "src/tokens/color.tokens.json",
       "isSource": true,
       "original": {
         "value": "#171321",
         "$type": "color",
         "themeable": true,
-        "prefix": false
+        "prefix": false,
+        "deprecated": true
       },
       "name": "ND_CHARCOAL",
       "attributes": {},
@@ -10020,13 +10283,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#fca326",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_ORANGE_01",
         "attributes": {},
@@ -10041,13 +10306,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#fc6d26",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_ORANGE_02",
         "attributes": {},
@@ -10062,13 +10329,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#e24329",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_ORANGE_03",
         "attributes": {},
@@ -10085,13 +10354,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#a989f5",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_PURPLE_01",
         "attributes": {},
@@ -10106,13 +10377,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#7759c2",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_PURPLE_02",
         "attributes": {},
@@ -10129,13 +10402,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#d1d0d3",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_GRAY_01",
         "attributes": {},
@@ -10150,13 +10425,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#a2a1a6",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_GRAY_02",
         "attributes": {},
@@ -10171,13 +10448,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#74717a",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_GRAY_03",
         "attributes": {},
@@ -10192,13 +10471,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#45424d",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_GRAY_04",
         "attributes": {},
@@ -10213,13 +10494,15 @@
         "$type": "color",
         "themeable": true,
         "prefix": false,
+        "deprecated": true,
         "filePath": "src/tokens/color.tokens.json",
         "isSource": true,
         "original": {
           "value": "#2b2838",
           "$type": "color",
           "themeable": true,
-          "prefix": false
+          "prefix": false,
+          "deprecated": true
         },
         "name": "ND_GRAY_05",
         "attributes": {},

package/dist/tokens/scss/_tokens.dark.scss

@@ -235,6 +235,21 @@ $data-viz-green-300: #366800 !default;
 $data-viz-green-200: #275600 !default;
 $data-viz-green-100: #1a4500 !default;
 $data-viz-green-50: #133a03 !default;
+$gl-color-brand-pink-01g: #ffb9c9;
+$gl-color-brand-gray-05: #2b2838;
+$gl-color-brand-gray-04: #45424d;
+$gl-color-brand-gray-03: #74717a;
+$gl-color-brand-gray-02: #a2a1a6;
+$gl-color-brand-gray-01: #d1d0d3;
+$gl-color-brand-purple-02p: #7759c2;
+$gl-color-brand-purple-01p: #a989f5;
+$gl-color-brand-purple-01g: #ceb3ef;
+$gl-color-brand-orange-03p: #e24329;
+$gl-color-brand-orange-02p: #fc6d26;
+$gl-color-brand-orange-01p: #fca326;
+$gl-color-brand-orange-01g: #ffd1bf;
+$gl-color-brand-charcoal: #171321;
+$gl-color-brand-white: #fff;
 $gl-color-theme-light-red-950: #5c1105;
 $gl-color-theme-light-red-900: #751709;
 $gl-color-theme-light-red-800: #8b2212;
@@ -533,7 +548,7 @@ $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.

package/dist/tokens/scss/_tokens.scss

@@ -235,6 +235,21 @@ $data-viz-green-300: #94c25e !default;
 $data-viz-green-200: #b0d97b !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-50: #ddfab7 !default;
+$gl-color-brand-pink-01g: #ffb9c9;
+$gl-color-brand-gray-05: #2b2838;
+$gl-color-brand-gray-04: #45424d;
+$gl-color-brand-gray-03: #74717a;
+$gl-color-brand-gray-02: #a2a1a6;
+$gl-color-brand-gray-01: #d1d0d3;
+$gl-color-brand-purple-02p: #7759c2;
+$gl-color-brand-purple-01p: #a989f5;
+$gl-color-brand-purple-01g: #ceb3ef;
+$gl-color-brand-orange-03p: #e24329;
+$gl-color-brand-orange-02p: #fc6d26;
+$gl-color-brand-orange-01p: #fca326;
+$gl-color-brand-orange-01g: #ffd1bf;
+$gl-color-brand-charcoal: #171321;
+$gl-color-brand-white: #fff;
 $gl-color-theme-light-red-950: #5c1105;
 $gl-color-theme-light-red-900: #751709;
 $gl-color-theme-light-red-800: #8b2212;
@@ -533,7 +548,7 @@ $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -264,6 +264,21 @@ $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);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);

package/dist/tokens/tailwind/tokens.cjs

@@ -211,35 +211,27 @@ const textColors = {
   link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
   danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
-  disabled:
-    'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
+  disabled: 'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 const backgroundColors = {
-  default:
-    'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
-  subtle:
-    'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
-  strong:
-    'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
-  disabled:
-    'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  default: 'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
+  subtle: 'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
+  strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
+  disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24)))',
 };
 const borderColors = {
-  default:
-    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
   subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
   strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
-  transparent:
-    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+  transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
   strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #333238))',
-  disabled:
-    'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
+  disabled: 'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
   link: 'var(--gl-icon-color-link, var(--gl-color-blue-600, #1068bf))',
   info: 'var(--gl-icon-color-info, var(--gl-color-blue-600, #1068bf))',
   warning: 'var(--gl-icon-color-warning, var(--gl-color-orange-600, #9e5400))',
@@ -263,6 +255,29 @@ const alphaLightColors = {
   24: 'var(--gl-color-alpha-light-24, rgba(255, 255, 255, 0.24))',
   36: 'var(--gl-color-alpha-light-36, rgba(255, 255, 255, 0.36))',
 };
+const brandColors = {
+  'brand-white': 'var(--gl-color-brand-white, #fff)',
+  'brand-charcoal': 'var(--gl-color-brand-charcoal, #171321)',
+  'brand-orange': {
+    '01g': 'var(--gl-color-brand-orange-01g, #ffd1bf)',
+    '01p': 'var(--gl-color-brand-orange-01p, #fca326)',
+    '02p': 'var(--gl-color-brand-orange-02p, #fc6d26)',
+    '03p': 'var(--gl-color-brand-orange-03p, #e24329)',
+  },
+  'brand-purple': {
+    '01g': 'var(--gl-color-brand-purple-01g, #ceb3ef)',
+    '01p': 'var(--gl-color-brand-purple-01p, #a989f5)',
+    '02p': 'var(--gl-color-brand-purple-02p, #7759c2)',
+  },
+  'brand-gray': {
+    '01': 'var(--gl-color-brand-gray-01, #d1d0d3)',
+    '02': 'var(--gl-color-brand-gray-02, #a2a1a6)',
+    '03': 'var(--gl-color-brand-gray-03, #74717a)',
+    '04': 'var(--gl-color-brand-gray-04, #45424d)',
+    '05': 'var(--gl-color-brand-gray-05, #2b2838)',
+  },
+  'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
+};
 
 const colors = {
   inherit: 'inherit',
@@ -277,6 +292,7 @@ const colors = {
   ...baseColors,
   ...themeColors,
   ...dataVizColors,
+  ...brandColors,
 };
 
 const backgroundColor = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.0.1",
+  "version": "86.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,7 +113,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.103.0",
+    "@gitlab/svgs": "3.104.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

package/src/tokens/border.tokens.json

@@ -15,7 +15,7 @@
           "dark": "{color.neutral.900}"
         },
         "$type": "color",
-        "$description": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+        "$description": "Used for a subtle border in combination with the default background."
       },
       "strong": {
         "$value": {