@gitlab/ui 112.2.3 → 112.3.0

package/src/components/base/nav/nav.vue

@@ -1,17 +1,70 @@
 <script>
-import { BNav } from '../../../vendor/bootstrap-vue/src/components/nav/nav';
-
 export default {
   name: 'GlNav',
-  components: {
-    BNav,
+  props: {
+    /**
+     * Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')
+     */
+    align: { type: String, required: false, default: '' },
+    /**
+     * Set this prop when the nav is placed inside a card header
+     */
+    cardHeader: { type: Boolean, required: false, default: false },
+    /**
+     * Proportionately fills all horizontal space with nav items.
+     * All horizontal space is occupied, but not every nav item has the same width
+     */
+    fill: { type: Boolean, required: false, default: false },
+    /**
+     * Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width
+     */
+    justified: { type: Boolean, required: false, default: false },
+    /**
+     * Renders the nav items with the appearance of pill buttons
+     */
+    pills: { type: Boolean, required: false, default: false },
+    /**
+     * Makes the nav smaller
+     */
+    small: { type: Boolean, required: false, default: false },
+    /**
+     * Renders the nav items with the appearance of tabs
+     */
+    tabs: { type: Boolean, required: false, default: false },
+    /**
+     * Specify the HTML tag to render instead of the default tag
+     */
+    tag: { type: String, required: false, default: 'ul' },
+  },
+  computed: {
+    justifyContent() {
+      if (!this.align) return '';
+
+      const alignMapping = {
+        left: 'start',
+        right: 'end',
+      };
+
+      return `justify-content-${alignMapping[this.align] || this.align}`;
+    },
+    classes() {
+      return {
+        'nav-tabs': this.tabs,
+        'nav-pills': this.pills && !this.tabs,
+        'card-header-tabs': this.cardHeader && this.tabs,
+        'card-header-pills': this.cardHeader && this.pills && !this.tabs,
+        'nav-fill': this.fill,
+        'nav-justified': this.justified,
+        [this.justifyContent]: this.align,
+        small: this.small,
+      };
+    },
   },
-  inheritAttrs: false,
 };
 </script>
 
 <template>
-  <b-nav v-bind="$attrs" v-on="$listeners">
+  <component :is="tag" class="nav" :class="classes" v-on="$listeners">
     <slot></slot>
-  </b-nav>
+  </component>
 </template>

package/src/tokens/build/css/tokens.css

@@ -24,11 +24,11 @@
   --gl-color-blue-300: #63a6e9;
   --gl-color-blue-400: #428fdc;
   --gl-color-blue-500: #1f75cb;
-  --gl-color-blue-600: #1068bf;
-  --gl-color-blue-700: #0b5cad;
-  --gl-color-blue-800: #064787;
-  --gl-color-blue-900: #033464;
-  --gl-color-blue-950: #002850;
+  --gl-color-blue-600: #2f68b4;
+  --gl-color-blue-700: #2f5ca0;
+  --gl-color-blue-800: #284779;
+  --gl-color-blue-900: #213454;
+  --gl-color-blue-950: #1d283e;
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbfafd;
   --gl-color-neutral-50: #ececef;
@@ -49,44 +49,44 @@
   --gl-color-green-300: #52b87a;
   --gl-color-green-400: #2da160;
   --gl-color-green-500: #108548;
-  --gl-color-green-600: #217645;
-  --gl-color-green-700: #24663b;
-  --gl-color-green-800: #0d532a;
-  --gl-color-green-900: #0a4020;
-  --gl-color-green-950: #072b15;
+  --gl-color-green-600: #2f7549;
+  --gl-color-green-700: #306440;
+  --gl-color-green-800: #225131;
+  --gl-color-green-900: #1e3e28;
+  --gl-color-green-950: #17291c;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
   --gl-color-orange-300: #d99530;
   --gl-color-orange-400: #c17d10;
   --gl-color-orange-500: #ab6100;
-  --gl-color-orange-600: #9e5400;
-  --gl-color-orange-700: #8f4700;
-  --gl-color-orange-800: #703800;
-  --gl-color-orange-900: #5c2900;
-  --gl-color-orange-950: #421f00;
+  --gl-color-orange-600: #995715;
+  --gl-color-orange-700: #894b16;
+  --gl-color-orange-800: #693c14;
+  --gl-color-orange-900: #532e16;
+  --gl-color-orange-950: #382315;
   --gl-color-purple-50: #f4f0ff;
   --gl-color-purple-100: #e1d8f9;
   --gl-color-purple-200: #cbbbf2;
   --gl-color-purple-300: #ac93e6;
   --gl-color-purple-400: #9475db;
   --gl-color-purple-500: #7b58cf;
-  --gl-color-purple-600: #694cc0;
-  --gl-color-purple-700: #5943b6;
-  --gl-color-purple-800: #453894;
-  --gl-color-purple-900: #2f2a6b;
-  --gl-color-purple-950: #232150;
+  --gl-color-purple-600: #6a4fb4;
+  --gl-color-purple-700: #5c47a6;
+  --gl-color-purple-800: #493c83;
+  --gl-color-purple-900: #342d59;
+  --gl-color-purple-950: #27243e;
   --gl-color-red-50: #fcf1ef;
   --gl-color-red-100: #fdd4cd;
   --gl-color-red-200: #fcb5aa;
   --gl-color-red-300: #f6806d;
   --gl-color-red-400: #ec5941;
   --gl-color-red-500: #dd2b0e;
-  --gl-color-red-600: #c91c00;
-  --gl-color-red-700: #ae1800;
-  --gl-color-red-800: #8d1300;
-  --gl-color-red-900: #660e00;
-  --gl-color-red-950: #4d0a00;
+  --gl-color-red-600: #c02f12;
+  --gl-color-red-700: #a32c12;
+  --gl-color-red-800: #812713;
+  --gl-color-red-900: #582014;
+  --gl-color-red-950: #3e1a14;
   --gl-color-data-green-50: #ddfab7;
   --gl-color-data-green-100: #c6ed94;
   --gl-color-data-green-200: #b0d97b;
@@ -413,11 +413,11 @@
   --blue-300: #63a6e9;
   --blue-400: #428fdc;
   --blue-500: #1f75cb;
-  --blue-600: #1068bf;
-  --blue-700: #0b5cad;
-  --blue-800: #064787;
-  --blue-900: #033464;
-  --blue-950: #002850;
+  --blue-600: #2f68b4;
+  --blue-700: #2f5ca0;
+  --blue-800: #284779;
+  --blue-900: #213454;
+  --blue-950: #1d283e;
   --gray-10: #fbfafd;
   --gray-50: #ececef;
   --gray-100: #dcdcde;
@@ -436,44 +436,44 @@
   --green-300: #52b87a;
   --green-400: #2da160;
   --green-500: #108548;
-  --green-600: #217645;
-  --green-700: #24663b;
-  --green-800: #0d532a;
-  --green-900: #0a4020;
-  --green-950: #072b15;
+  --green-600: #2f7549;
+  --green-700: #306440;
+  --green-800: #225131;
+  --green-900: #1e3e28;
+  --green-950: #17291c;
   --orange-50: #fdf1dd;
   --orange-100: #f5d9a8;
   --orange-200: #e9be74;
   --orange-300: #d99530;
   --orange-400: #c17d10;
   --orange-500: #ab6100;
-  --orange-600: #9e5400;
-  --orange-700: #8f4700;
-  --orange-800: #703800;
-  --orange-900: #5c2900;
-  --orange-950: #421f00;
+  --orange-600: #995715;
+  --orange-700: #894b16;
+  --orange-800: #693c14;
+  --orange-900: #532e16;
+  --orange-950: #382315;
   --purple-50: #f4f0ff;
   --purple-100: #e1d8f9;
   --purple-200: #cbbbf2;
   --purple-300: #ac93e6;
   --purple-400: #9475db;
   --purple-500: #7b58cf;
-  --purple-600: #694cc0;
-  --purple-700: #5943b6;
-  --purple-800: #453894;
-  --purple-900: #2f2a6b;
-  --purple-950: #232150;
+  --purple-600: #6a4fb4;
+  --purple-700: #5c47a6;
+  --purple-800: #493c83;
+  --purple-900: #342d59;
+  --purple-950: #27243e;
   --red-50: #fcf1ef;
   --red-100: #fdd4cd;
   --red-200: #fcb5aa;
   --red-300: #f57f6c;
   --red-400: #ec5941;
   --red-500: #dd2b0e;
-  --red-600: #c91c00;
-  --red-700: #ae1800;
-  --red-800: #8d1300;
-  --red-900: #660e00;
-  --red-950: #4d0a00;
+  --red-600: #c02f12;
+  --red-700: #a32c12;
+  --red-800: #812713;
+  --red-900: #582014;
+  --red-950: #3e1a14;
   --brand-charcoal: #171321; /* Use color.brand-charcoal instead. */
   --brand-orange-01: #fca326; /* Use color.brand-orange.01p instead. */
   --brand-orange-02: #fc6d26; /* Use color.brand-orange.02p instead. */

package/src/tokens/build/css/tokens.dark.css

@@ -24,11 +24,11 @@
   --gl-color-blue-300: #63a6e9;
   --gl-color-blue-400: #428fdc;
   --gl-color-blue-500: #1f75cb;
-  --gl-color-blue-600: #1068bf;
-  --gl-color-blue-700: #0b5cad;
-  --gl-color-blue-800: #064787;
-  --gl-color-blue-900: #033464;
-  --gl-color-blue-950: #002850;
+  --gl-color-blue-600: #2f68b4;
+  --gl-color-blue-700: #2f5ca0;
+  --gl-color-blue-800: #284779;
+  --gl-color-blue-900: #213454;
+  --gl-color-blue-950: #1d283e;
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbfafd;
   --gl-color-neutral-50: #ececef;
@@ -49,44 +49,44 @@
   --gl-color-green-300: #52b87a;
   --gl-color-green-400: #2da160;
   --gl-color-green-500: #108548;
-  --gl-color-green-600: #217645;
-  --gl-color-green-700: #24663b;
-  --gl-color-green-800: #0d532a;
-  --gl-color-green-900: #0a4020;
-  --gl-color-green-950: #072b15;
+  --gl-color-green-600: #2f7549;
+  --gl-color-green-700: #306440;
+  --gl-color-green-800: #225131;
+  --gl-color-green-900: #1e3e28;
+  --gl-color-green-950: #17291c;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
   --gl-color-orange-300: #d99530;
   --gl-color-orange-400: #c17d10;
   --gl-color-orange-500: #ab6100;
-  --gl-color-orange-600: #9e5400;
-  --gl-color-orange-700: #8f4700;
-  --gl-color-orange-800: #703800;
-  --gl-color-orange-900: #5c2900;
-  --gl-color-orange-950: #421f00;
+  --gl-color-orange-600: #995715;
+  --gl-color-orange-700: #894b16;
+  --gl-color-orange-800: #693c14;
+  --gl-color-orange-900: #532e16;
+  --gl-color-orange-950: #382315;
   --gl-color-purple-50: #f4f0ff;
   --gl-color-purple-100: #e1d8f9;
   --gl-color-purple-200: #cbbbf2;
   --gl-color-purple-300: #ac93e6;
   --gl-color-purple-400: #9475db;
   --gl-color-purple-500: #7b58cf;
-  --gl-color-purple-600: #694cc0;
-  --gl-color-purple-700: #5943b6;
-  --gl-color-purple-800: #453894;
-  --gl-color-purple-900: #2f2a6b;
-  --gl-color-purple-950: #232150;
+  --gl-color-purple-600: #6a4fb4;
+  --gl-color-purple-700: #5c47a6;
+  --gl-color-purple-800: #493c83;
+  --gl-color-purple-900: #342d59;
+  --gl-color-purple-950: #27243e;
   --gl-color-red-50: #fcf1ef;
   --gl-color-red-100: #fdd4cd;
   --gl-color-red-200: #fcb5aa;
   --gl-color-red-300: #f6806d;
   --gl-color-red-400: #ec5941;
   --gl-color-red-500: #dd2b0e;
-  --gl-color-red-600: #c91c00;
-  --gl-color-red-700: #ae1800;
-  --gl-color-red-800: #8d1300;
-  --gl-color-red-900: #660e00;
-  --gl-color-red-950: #4d0a00;
+  --gl-color-red-600: #c02f12;
+  --gl-color-red-700: #a32c12;
+  --gl-color-red-800: #812713;
+  --gl-color-red-900: #582014;
+  --gl-color-red-950: #3e1a14;
   --gl-color-data-green-50: #ddfab7;
   --gl-color-data-green-100: #c6ed94;
   --gl-color-data-green-200: #b0d97b;

package/src/tokens/build/figma/constants.tokens.json

@@ -92,23 +92,23 @@
         "$type": "color"
       },
       "600": {
-        "$value": "#1068bf",
+        "$value": "#2f68b4",
         "$type": "color"
       },
       "700": {
-        "$value": "#0b5cad",
+        "$value": "#2f5ca0",
         "$type": "color"
       },
       "800": {
-        "$value": "#064787",
+        "$value": "#284779",
         "$type": "color"
       },
       "900": {
-        "$value": "#033464",
+        "$value": "#213454",
         "$type": "color"
       },
       "950": {
-        "$value": "#002850",
+        "$value": "#1d283e",
         "$type": "color"
       }
     },
@@ -196,23 +196,23 @@
         "$type": "color"
       },
       "600": {
-        "$value": "#217645",
+        "$value": "#2f7549",
         "$type": "color"
       },
       "700": {
-        "$value": "#24663b",
+        "$value": "#306440",
         "$type": "color"
       },
       "800": {
-        "$value": "#0d532a",
+        "$value": "#225131",
         "$type": "color"
       },
       "900": {
-        "$value": "#0a4020",
+        "$value": "#1e3e28",
         "$type": "color"
       },
       "950": {
-        "$value": "#072b15",
+        "$value": "#17291c",
         "$type": "color"
       }
     },
@@ -242,23 +242,23 @@
         "$type": "color"
       },
       "600": {
-        "$value": "#9e5400",
+        "$value": "#995715",
         "$type": "color"
       },
       "700": {
-        "$value": "#8f4700",
+        "$value": "#894b16",
         "$type": "color"
       },
       "800": {
-        "$value": "#703800",
+        "$value": "#693c14",
         "$type": "color"
       },
       "900": {
-        "$value": "#5c2900",
+        "$value": "#532e16",
         "$type": "color"
       },
       "950": {
-        "$value": "#421f00",
+        "$value": "#382315",
         "$type": "color"
       }
     },
@@ -288,23 +288,23 @@
         "$type": "color"
       },
       "600": {
-        "$value": "#694cc0",
+        "$value": "#6a4fb4",
         "$type": "color"
       },
       "700": {
-        "$value": "#5943b6",
+        "$value": "#5c47a6",
         "$type": "color"
       },
       "800": {
-        "$value": "#453894",
+        "$value": "#493c83",
         "$type": "color"
       },
       "900": {
-        "$value": "#2f2a6b",
+        "$value": "#342d59",
         "$type": "color"
       },
       "950": {
-        "$value": "#232150",
+        "$value": "#27243e",
         "$type": "color"
       }
     },
@@ -334,23 +334,23 @@
         "$type": "color"
       },
       "600": {
-        "$value": "#c91c00",
+        "$value": "#c02f12",
         "$type": "color"
       },
       "700": {
-        "$value": "#ae1800",
+        "$value": "#a32c12",
         "$type": "color"
       },
       "800": {
-        "$value": "#8d1300",
+        "$value": "#812713",
         "$type": "color"
       },
       "900": {
-        "$value": "#660e00",
+        "$value": "#582014",
         "$type": "color"
       },
       "950": {
-        "$value": "#4d0a00",
+        "$value": "#3e1a14",
         "$type": "color"
       }
     },

package/src/tokens/build/figma/deprecated.tokens.json

@@ -1390,7 +1390,7 @@
     },
     "600": {
       "$value": {
-        "default": "#1068bf",
+        "default": "#2f68b4",
         "dark": "#63a6e9"
       },
       "$type": "color",
@@ -1400,7 +1400,7 @@
     },
     "700": {
       "$value": {
-        "default": "#0b5cad",
+        "default": "#2f5ca0",
         "dark": "#9dc7f1"
       },
       "$type": "color",
@@ -1410,7 +1410,7 @@
     },
     "800": {
       "$value": {
-        "default": "#064787",
+        "default": "#284779",
         "dark": "#cbe2f9"
       },
       "$type": "color",
@@ -1420,7 +1420,7 @@
     },
     "900": {
       "$value": {
-        "default": "#033464",
+        "default": "#213454",
         "dark": "#e9f3fc"
       },
       "$type": "color",
@@ -1430,7 +1430,7 @@
     },
     "950": {
       "$value": {
-        "default": "#002850",
+        "default": "#1d283e",
         "dark": "#f2f9ff"
       },
       "$type": "color",
@@ -1630,7 +1630,7 @@
     },
     "600": {
       "$value": {
-        "default": "#217645",
+        "default": "#2f7549",
         "dark": "#52b87a"
       },
       "$type": "color",
@@ -1640,7 +1640,7 @@
     },
     "700": {
       "$value": {
-        "default": "#24663b",
+        "default": "#306440",
         "dark": "#91d4a8"
       },
       "$type": "color",
@@ -1650,7 +1650,7 @@
     },
     "800": {
       "$value": {
-        "default": "#0d532a",
+        "default": "#225131",
         "dark": "#c3e6cd"
       },
       "$type": "color",
@@ -1660,7 +1660,7 @@
     },
     "900": {
       "$value": {
-        "default": "#0a4020",
+        "default": "#1e3e28",
         "dark": "#ecf4ee"
       },
       "$type": "color",
@@ -1670,7 +1670,7 @@
     },
     "950": {
       "$value": {
-        "default": "#072b15",
+        "default": "#17291c",
         "dark": "#f1fdf6"
       },
       "$type": "color",
@@ -1745,7 +1745,7 @@
     },
     "600": {
       "$value": {
-        "default": "#9e5400",
+        "default": "#995715",
         "dark": "#d99530"
       },
       "$type": "color",
@@ -1755,7 +1755,7 @@
     },
     "700": {
       "$value": {
-        "default": "#8f4700",
+        "default": "#894b16",
         "dark": "#e9be74"
       },
       "$type": "color",
@@ -1765,7 +1765,7 @@
     },
     "800": {
       "$value": {
-        "default": "#703800",
+        "default": "#693c14",
         "dark": "#f5d9a8"
       },
       "$type": "color",
@@ -1775,7 +1775,7 @@
     },
     "900": {
       "$value": {
-        "default": "#5c2900",
+        "default": "#532e16",
         "dark": "#fdf1dd"
       },
       "$type": "color",
@@ -1785,7 +1785,7 @@
     },
     "950": {
       "$value": {
-        "default": "#421f00",
+        "default": "#382315",
         "dark": "#fff4e1"
       },
       "$type": "color",
@@ -1860,7 +1860,7 @@
     },
     "600": {
       "$value": {
-        "default": "#694cc0",
+        "default": "#6a4fb4",
         "dark": "#9475db"
       },
       "$type": "color",
@@ -1870,7 +1870,7 @@
     },
     "700": {
       "$value": {
-        "default": "#5943b6",
+        "default": "#5c47a6",
         "dark": "#ac93e6"
       },
       "$type": "color",
@@ -1880,7 +1880,7 @@
     },
     "800": {
       "$value": {
-        "default": "#453894",
+        "default": "#493c83",
         "dark": "#cbbbf2"
       },
       "$type": "color",
@@ -1890,7 +1890,7 @@
     },
     "900": {
       "$value": {
-        "default": "#2f2a6b",
+        "default": "#342d59",
         "dark": "#e1d8f9"
       },
       "$type": "color",
@@ -1900,7 +1900,7 @@
     },
     "950": {
       "$value": {
-        "default": "#232150",
+        "default": "#27243e",
         "dark": "#f4f0ff"
       },
       "$type": "color",
@@ -1975,7 +1975,7 @@
     },
     "600": {
       "$value": {
-        "default": "#c91c00",
+        "default": "#c02f12",
         "dark": "#f57f6c"
       },
       "$type": "color",
@@ -1985,7 +1985,7 @@
     },
     "700": {
       "$value": {
-        "default": "#ae1800",
+        "default": "#a32c12",
         "dark": "#fcb5aa"
       },
       "$type": "color",
@@ -1995,7 +1995,7 @@
     },
     "800": {
       "$value": {
-        "default": "#8d1300",
+        "default": "#812713",
         "dark": "#fdd4cd"
       },
       "$type": "color",
@@ -2005,7 +2005,7 @@
     },
     "900": {
       "$value": {
-        "default": "#660e00",
+        "default": "#582014",
         "dark": "#fcf1ef"
       },
       "$type": "color",
@@ -2015,7 +2015,7 @@
     },
     "950": {
       "$value": {
-        "default": "#4d0a00",
+        "default": "#3e1a14",
         "dark": "#fff4f3"
       },
       "$type": "color",