@gitlab/ui 105.1.1 → 105.2.0

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

@@ -242,6 +242,38 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
+$gl-illustration-status-fill-color-neutral: #6f6796; // Used as a fill to convey a concept which is neither positive or negative.
+$gl-illustration-status-fill-color-success: #3b8581; // Used as a fill to convey a success or active concept, has a positive connotation.
+$gl-illustration-status-fill-color-warning: #ab752f; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
+$gl-illustration-status-fill-color-danger: #aa563a; // Used as a fill to convey a critical or danger concept, has a negative connotation.
+$gl-illustration-accent-stroke-color-orange: #e3865f; // Used for orange accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-teal: #6baea3; // Used for teal accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-fill-color-subtle: #5c5371; // Used to add depth to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-strong: #6f6796; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
+$gl-illustration-accent-fill-color-orange: #aa563a; // Used to add orange to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-teal: #3b8581; // Used to add teal to a secondary element and supporting surface.
+$gl-illustration-base-fill-color: #32303c; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
+$gl-illustration-isometric-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-glyph-top-fill-color: #5a566c; // Used for the top face of isometric text and number elements.
+$gl-illustration-isometric-glyph-front-fill-color: #423f4f; // Used for the front face of isometric text and number elements.
+$gl-illustration-isometric-glyph-side-fill-color: #373441; // Used for the side face of isometric text and number elements.
+$gl-illustration-isometric-glyph-shadow-fill-color: #292730; // Used for the shadow of isometric text and number elements.
+$gl-illustration-isometric-object-top-fill-color: #aa563a; // Used for the top face of an isometric object or symbol.
+$gl-illustration-isometric-object-front-fill-color: #a54623; // Used for the front face of an isometric object or symbol.
+$gl-illustration-isometric-object-side-fill-color: #8f4424; // Used for the side face of an isometric object or symbol.
+$gl-illustration-isometric-object-highlight-fill-color: #423f4f; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
+$gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; // Used for the shadow of an isometric object or symbol.
+$gl-illustration-isometric-accent-top-fill-color: #6d6972; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-front-fill-color: #49474d; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-side-fill-color: #212023; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-base-top-fill-color: #32303c; // Used for the top surface of an isometric base platform.
+$gl-illustration-isometric-base-front-fill-color: #2b2932; // Used for the front face of an isometric base platform.
+$gl-illustration-isometric-base-side-fill-color: #23222b; // Used for the side face of an isometric base platform.
 $theme-indigo-10: #14143d !default;
 $theme-indigo-50: #222261 !default;
 $theme-indigo-100: #303083 !default;

package/dist/tokens/scss/_tokens.scss

@@ -242,6 +242,38 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
+$gl-illustration-status-fill-color-neutral: #aea5d6; // Used as a fill to convey a concept which is neither positive or negative.
+$gl-illustration-status-fill-color-success: #6fdac9; // Used as a fill to convey a success or active concept, has a positive connotation.
+$gl-illustration-status-fill-color-warning: #fca326; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
+$gl-illustration-status-fill-color-danger: #ff9d73; // Used as a fill to convey a critical or danger concept, has a negative connotation.
+$gl-illustration-accent-stroke-color-orange: #ff9d73; // Used for orange accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-teal: #6fdac9; // Used for teal accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-fill-color-subtle: #d0c5e2; // Used to add depth to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-strong: #aea5d6; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
+$gl-illustration-accent-fill-color-orange: #ff9d73; // Used to add orange to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-teal: #6fdac9; // Used to add teal to a secondary element and supporting surface.
+$gl-illustration-base-fill-color: #e7e4f2; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
+$gl-illustration-isometric-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; // Used for the top face of isometric text and number elements.
+$gl-illustration-isometric-glyph-front-fill-color: #fff; // Used for the front face of isometric text and number elements.
+$gl-illustration-isometric-glyph-side-fill-color: #6fdac9; // Used for the side face of isometric text and number elements.
+$gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; // Used for the shadow of isometric text and number elements.
+$gl-illustration-isometric-object-top-fill-color: #ff9d73; // Used for the top face of an isometric object or symbol.
+$gl-illustration-isometric-object-front-fill-color: #ffc2a8; // Used for the front face of an isometric object or symbol.
+$gl-illustration-isometric-object-side-fill-color: #ff7b42; // Used for the side face of an isometric object or symbol.
+$gl-illustration-isometric-object-highlight-fill-color: #fff; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
+$gl-illustration-isometric-object-shadow-fill-color: #e24329; // Used for the shadow of an isometric object or symbol.
+$gl-illustration-isometric-accent-top-fill-color: #45424d; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-front-fill-color: #74717a; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-side-fill-color: #2b2838; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-base-top-fill-color: #e7e4f2; // Used for the top surface of an isometric base platform.
+$gl-illustration-isometric-base-front-fill-color: #d5d0e8; // Used for the front face of an isometric base platform.
+$gl-illustration-isometric-base-side-fill-color: #aea5d6; // Used for the side face of an isometric base platform.
 $theme-indigo-10: #f8f8ff !default;
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -651,6 +651,38 @@ $gl-filtered-search-token-data-background-color-default: var(--gl-filtered-searc
 $gl-filtered-search-token-data-background-color-hover: var(--gl-filtered-search-token-data-background-color-hover);
 $gl-filtered-search-token-operator-background-color-default: var(--gl-filtered-search-token-operator-background-color-default);
 $gl-filtered-search-token-operator-background-color-hover: var(--gl-filtered-search-token-operator-background-color-hover);
+$gl-illustration-stroke-color-default: var(--gl-illustration-stroke-color-default);
+$gl-illustration-stroke-width-default: var(--gl-illustration-stroke-width-default);
+$gl-illustration-fill-color-default: var(--gl-illustration-fill-color-default);
+$gl-illustration-status-fill-color-neutral: var(--gl-illustration-status-fill-color-neutral);
+$gl-illustration-status-fill-color-success: var(--gl-illustration-status-fill-color-success);
+$gl-illustration-status-fill-color-warning: var(--gl-illustration-status-fill-color-warning);
+$gl-illustration-status-fill-color-danger: var(--gl-illustration-status-fill-color-danger);
+$gl-illustration-accent-stroke-color-orange: var(--gl-illustration-accent-stroke-color-orange);
+$gl-illustration-accent-stroke-color-teal: var(--gl-illustration-accent-stroke-color-teal);
+$gl-illustration-accent-stroke-color-strong: var(--gl-illustration-accent-stroke-color-strong);
+$gl-illustration-accent-fill-color-subtle: var(--gl-illustration-accent-fill-color-subtle);
+$gl-illustration-accent-fill-color-strong: var(--gl-illustration-accent-fill-color-strong);
+$gl-illustration-accent-fill-color-orange: var(--gl-illustration-accent-fill-color-orange);
+$gl-illustration-accent-fill-color-teal: var(--gl-illustration-accent-fill-color-teal);
+$gl-illustration-base-fill-color: var(--gl-illustration-base-fill-color);
+$gl-illustration-isometric-stroke-color-default: var(--gl-illustration-isometric-stroke-color-default);
+$gl-illustration-isometric-stroke-width-default: var(--gl-illustration-isometric-stroke-width-default);
+$gl-illustration-isometric-glyph-top-fill-color: var(--gl-illustration-isometric-glyph-top-fill-color);
+$gl-illustration-isometric-glyph-front-fill-color: var(--gl-illustration-isometric-glyph-front-fill-color);
+$gl-illustration-isometric-glyph-side-fill-color: var(--gl-illustration-isometric-glyph-side-fill-color);
+$gl-illustration-isometric-glyph-shadow-fill-color: var(--gl-illustration-isometric-glyph-shadow-fill-color);
+$gl-illustration-isometric-object-top-fill-color: var(--gl-illustration-isometric-object-top-fill-color);
+$gl-illustration-isometric-object-front-fill-color: var(--gl-illustration-isometric-object-front-fill-color);
+$gl-illustration-isometric-object-side-fill-color: var(--gl-illustration-isometric-object-side-fill-color);
+$gl-illustration-isometric-object-highlight-fill-color: var(--gl-illustration-isometric-object-highlight-fill-color);
+$gl-illustration-isometric-object-shadow-fill-color: var(--gl-illustration-isometric-object-shadow-fill-color);
+$gl-illustration-isometric-accent-top-fill-color: var(--gl-illustration-isometric-accent-top-fill-color);
+$gl-illustration-isometric-accent-front-fill-color: var(--gl-illustration-isometric-accent-front-fill-color);
+$gl-illustration-isometric-accent-side-fill-color: var(--gl-illustration-isometric-accent-side-fill-color);
+$gl-illustration-isometric-base-top-fill-color: var(--gl-illustration-isometric-base-top-fill-color);
+$gl-illustration-isometric-base-front-fill-color: var(--gl-illustration-isometric-base-front-fill-color);
+$gl-illustration-isometric-base-side-fill-color: var(--gl-illustration-isometric-base-side-fill-color);
 $gl-label-light-text-color: var(--gl-label-light-text-color);
 $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
 $gl-label-light-button-background-color-hover: var(--gl-label-light-button-background-color-hover);

package/dist/tokens/tokens_table.js

@@ -101,7 +101,7 @@ var script = {
         value: token.$value,
         valueLabel: this.getValueLabel(token),
         deprecated: token.deprecated,
-        description: token.comment
+        description: token.$description
       };
     },
     transformTokensToTableRows(tokens) {

package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown.js

@@ -61,7 +61,7 @@ const BDropdown = /*#__PURE__*/extend({
         // It needs also to be applied when `block` is disabled to allow multiple
         // dropdowns to be aligned one line
         'btn-group': split || !block,
-        // When `block` is enabled and we are in `split` mode the 'd-flex' class
+        // When `block` is enabled and we are in `split` mode the 'gl-flex' class
         // needs to be applied to allow the buttons to stretch to full width
         'gl-flex': block && split
       }];

package/dist/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.js

@@ -36,7 +36,7 @@ const BFormInvalidFeedback = /*#__PURE__*/extend({
     const show = props.forceShow === true || props.state === false;
     return h(props.tag, mergeData(data, {
       class: {
-        'd-block': show,
+        '!gl-block': show,
         'invalid-feedback': !tooltip,
         'invalid-tooltip': tooltip
       },

package/dist/vendor/bootstrap-vue/src/components/form/form-valid-feedback.js

@@ -36,7 +36,7 @@ const BFormValidFeedback = /*#__PURE__*/extend({
     const show = props.forceShow === true || props.state === true;
     return h(props.tag, mergeData(data, {
       class: {
-        'd-block': show,
+        '!gl-block': show,
         'valid-feedback': !tooltip,
         'valid-tooltip': tooltip
       },

package/dist/vendor/bootstrap-vue/src/components/form-group/form-group.js

@@ -219,7 +219,7 @@ const BFormGroup = {
       if (this.labelSrOnly) {
         if (labelContent) {
           $label = h(labelTag, {
-            class: 'sr-only',
+            class: 'gl-sr-only',
             attrs: {
               id: labelId,
               for: labelFor || null
@@ -254,10 +254,10 @@ const BFormGroup = {
           // See: https://github.com/twbs/bootstrap/issues/27805
           isHorizontal || isFieldset ? 'col-form-label' : '',
           // Emulate label padding top of `0` on legend when not horizontal
-          !isHorizontal && isFieldset ? 'pt-0' : '',
-          // If not horizontal and not a legend, we add 'd-block' class to label
+          !isHorizontal && isFieldset ? '!gl-pt-0' : '',
+          // If not horizontal and not a legend, we add '!gl-block' class to label
           // so that label-align works
-          !isHorizontal && !isFieldset ? 'd-block' : '', labelSize ? `col-form-label-${labelSize}` : '', this.labelAlignClasses, this.labelClass]
+          !isHorizontal && !isFieldset ? '!gl-block' : '', labelSize ? `col-form-label-${labelSize}` : '', this.labelAlignClasses, this.labelClass]
         }, [labelContent]);
       }
     }

package/dist/vendor/bootstrap-vue/src/components/modal/helpers/modal-manager.js

@@ -87,7 +87,7 @@ const ModalManager = /*#__PURE__*/extend({
         // Create a temporary `div.modal-backdrop` to get computed z-index
         const div = document.createElement('div');
         addClass(div, 'modal-backdrop');
-        addClass(div, 'd-none');
+        addClass(div, 'gl-hidden');
         setStyle(div, 'display', 'none');
         document.body.appendChild(div);
         this.baseZIndex = toInteger(getCS(div).zIndex, DEFAULT_ZINDEX);

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-sorting.js

@@ -243,7 +243,7 @@ const sortingMixin = extend({
         'aria-sort': ariaSort
       };
     },
-    // A label to be placed in an `.sr-only` element in the header cell
+    // A label to be placed in an `.gl-sr-only` element in the header cell
     sortTheadThLabel(key, field, isFoot) {
       // No label if not a sortable table
       if (!this.isSortable || isFoot && this.noFooterSorting) {
@@ -281,7 +281,7 @@ const sortingMixin = extend({
         // Non sortable column
         labelSorting = localSortBy ? this.labelSortClear : '';
       }
-      // Return the `.sr-only` sort label or `null` if no label
+      // Return the `.gl-sr-only` sort label or `null` if no label
       return trim(labelSorting) || null;
     }
   }

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js

@@ -98,7 +98,7 @@ const tableRendererMixin = extend({
         'table-borderless': this.borderless,
         'table-sm': this.small,
         // The following are b-table custom styles
-        border: this.outlined,
+        'gl-border': this.outlined,
         'b-table-fixed': this.fixed,
         'b-table-caption-top': this.captionTop,
         'b-table-no-border-collapse': this.noBorderCollapse

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-thead.js

@@ -117,7 +117,7 @@ const theadMixin = extend({
         const data = {
           class: [{
             // We need to make the header cell relative when we have
-            // a `.sr-only` sort label to work around overflow issues
+            // a `.gl-sr-only` sort label to work around overflow issues
             'gl-relative': sortLabel
           }, this.fieldClasses(field), sortClass],
           props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "105.1.1",
+  "version": "105.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -127,6 +127,7 @@
     "@storybook/vue-webpack5": "^7.6.17",
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
+    "@studiometa/stylelint-formatter-gitlab": "^0.0.1",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",

package/src/components/base/datepicker/datepicker.vue

@@ -283,8 +283,8 @@ export default {
 
     const pikadayConfig = {
       field: this.$el.querySelector('input[type="text"]'),
-      // `position-absolute` is needed because of this bug: https://github.com/Pikaday/Pikaday/issues/840
-      theme: `gl-datepicker-theme position-absolute ${this.theme}`,
+      // `!gl-absolute` is needed because of this bug: https://github.com/Pikaday/Pikaday/issues/840
+      theme: `gl-datepicker-theme !gl-absolute ${this.theme}`,
       defaultDate: this.defaultDate || this.value,
       setDefaultDate: Boolean(this.value) || Boolean(this.defaultDate),
       minDate: this.minDate,

package/src/components/base/paginated_list/paginated_list.vue

@@ -171,7 +171,7 @@ export default {
     <!-- display: inline -->
     <div
       v-if="emptyList"
-      class="bs-callout bs-callout-warning mt-3 empty-message"
+      class="bs-callout bs-callout-warning empty-message gl-mt-5"
       :class="{ 'empty-message': zeroTotal, 'empty-search': zeroSearchResults }"
       >{{ zeroTotal ? emptyMessage : emptySearchMessage }}</div
     >

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue

@@ -15,25 +15,27 @@ export default {
 </script>
 <template>
   <div class="row dashboard-cards">
-    <div v-for="index in cards" :key="index" class="col-12 col-md-6 col-xl-4 px-2">
-      <div class="rounded-top py-4 bg-light"></div>
+    <div v-for="index in cards" :key="index" class="col-12 col-md-6 col-xl-4 gl-px-3">
+      <div class="gl-rounded-t-base gl-bg-status-neutral gl-py-6"></div>
       <div class="dashboard-card-body card-body bg-secondary">
         <div class="row">
-          <div class="col-1 align-self-center">
-            <div class="bg-light p-3 rounded-circle"></div>
+          <div class="col-1 gl-self-center">
+            <div class="gl-rounded-full gl-bg-status-neutral gl-p-5"></div>
           </div>
 
-          <div class="col-10 col-sm-6 align-self-center pl-4">
-            <div class="dashboard-card-skeleton-info bg-light py-2 w-100 mb-2"></div>
-            <div class="dashboard-card-skeleton-info bg-light py-2 w-100"></div>
+          <div class="col-10 col-sm-6 pl-4 gl-self-center">
+            <div
+              class="dashboard-card-skeleton-info gl-mb-3 gl-w-full gl-bg-status-neutral gl-py-3"
+            ></div>
+            <div class="dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"></div>
           </div>
 
-          <div class="col-sm-5 align-self-center d-none d-sm-block">
-            <div class="dashboard-card-skeleton-info bg-light py-2 w-100"></div>
+          <div class="col-sm-5 gl-hidden gl-self-center sm:gl-block">
+            <div class="dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"></div>
           </div>
         </div>
 
-        <div class="dashboard-card-footer bg-light py-3 mt-3"></div>
+        <div class="dashboard-card-footer gl-mt-5 gl-bg-status-neutral gl-py-5"></div>
       </div>
     </div>
   </div>

package/src/components/utilities/friendly_wrap/friendly_wrap.vue

@@ -27,7 +27,7 @@ export default {
     const textParts = splitAfterSymbols(symbols, text ?? '');
     const content = intersperse(() => createElement('wbr'), textParts);
 
-    return createElement('span', { class: 'text-break' }, content);
+    return createElement('span', { class: 'gl-break-words' }, content);
   },
 };
 </script>

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

@@ -244,6 +244,38 @@
   --gl-avatar-fallback-background-color-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-orange: #e9be743d; /* Orange background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-illustration-stroke-color-default: #171321; /* Default stroke color to define shape and provide essential detail. */
+  --gl-illustration-stroke-width-default: 0.125rem; /* Default stroke width to define shape and provide essential detail. */
+  --gl-illustration-fill-color-default: #fff; /* Default fill color for an element where specific meaning or emphasis is not required. */
+  --gl-illustration-status-fill-color-neutral: #aea5d6; /* Used as a fill to convey a concept which is neither positive or negative. */
+  --gl-illustration-status-fill-color-success: #6fdac9; /* Used as a fill to convey a success or active concept, has a positive connotation. */
+  --gl-illustration-status-fill-color-warning: #fca326; /* Used as a fill to convey a caution or warning concept, has a slightly negative connotation. */
+  --gl-illustration-status-fill-color-danger: #ff9d73; /* Used as a fill to convey a critical or danger concept, has a negative connotation. */
+  --gl-illustration-accent-stroke-color-orange: #ff9d73; /* Used for orange accent stroke detail on an object or attention-drawing element. */
+  --gl-illustration-accent-stroke-color-teal: #6fdac9; /* Used for teal accent stroke detail on an object or attention-drawing element. */
+  --gl-illustration-accent-stroke-color-strong: #aea5d6; /* Used for dark accent stroke detail on an object or attention-drawing element. */
+  --gl-illustration-accent-fill-color-subtle: #d0c5e2; /* Used to add depth to a secondary element and supporting surface. */
+  --gl-illustration-accent-fill-color-strong: #aea5d6; /* Used for an element requiring visual emphasis without competing with primary content or status indicators. */
+  --gl-illustration-accent-fill-color-orange: #ff9d73; /* Used to add orange to a secondary element and supporting surface. */
+  --gl-illustration-accent-fill-color-teal: #6fdac9; /* Used to add teal to a secondary element and supporting surface. */
+  --gl-illustration-base-fill-color: #e7e4f2; /* Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion. */
+  --gl-illustration-isometric-stroke-color-default: #171321; /* Default stroke color to define shape and provide essential detail in isometric illustration. */
+  --gl-illustration-isometric-stroke-width-default: 0.125rem; /* Default stroke width to define shape and provide essential detail in isometric illustration. */
+  --gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; /* Used for the top face of isometric text and number elements. */
+  --gl-illustration-isometric-glyph-front-fill-color: #fff; /* Used for the front face of isometric text and number elements. */
+  --gl-illustration-isometric-glyph-side-fill-color: #6fdac9; /* Used for the side face of isometric text and number elements. */
+  --gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; /* Used for the shadow of isometric text and number elements. */
+  --gl-illustration-isometric-object-top-fill-color: #ff9d73; /* Used for the top face of an isometric object or symbol. */
+  --gl-illustration-isometric-object-front-fill-color: #ffc2a8; /* Used for the front face of an isometric object or symbol. */
+  --gl-illustration-isometric-object-side-fill-color: #ff7b42; /* Used for the side face of an isometric object or symbol. */
+  --gl-illustration-isometric-object-highlight-fill-color: #fff; /* Used for the face of an isometric object or symbol that requires maximum distinction from other elements. */
+  --gl-illustration-isometric-object-shadow-fill-color: #e24329; /* Used for the shadow of an isometric object or symbol. */
+  --gl-illustration-isometric-accent-top-fill-color: #45424d; /* Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
+  --gl-illustration-isometric-accent-front-fill-color: #74717a; /* Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
+  --gl-illustration-isometric-accent-side-fill-color: #2b2838; /* Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
+  --gl-illustration-isometric-base-top-fill-color: #e7e4f2; /* Used for the top surface of an isometric base platform. */
+  --gl-illustration-isometric-base-front-fill-color: #d5d0e8; /* Used for the front face of an isometric base platform. */
+  --gl-illustration-isometric-base-side-fill-color: #aea5d6; /* Used for the side face of an isometric base platform. */
   --theme-indigo-10: #f8f8ff;
   --theme-indigo-50: #f1f1ff;
   --theme-indigo-100: #dbdbf8;

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

@@ -244,6 +244,38 @@
   --gl-avatar-fallback-background-color-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-orange: #e9be743d; /* Orange background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-illustration-stroke-color-default: #e3e3e8; /* Default stroke color to define shape and provide essential detail. */
+  --gl-illustration-stroke-width-default: 0.09375rem; /* Default stroke width to define shape and provide essential detail. */
+  --gl-illustration-fill-color-default: #423f4f; /* Default fill color for an element where specific meaning or emphasis is not required. */
+  --gl-illustration-status-fill-color-neutral: #6f6796; /* Used as a fill to convey a concept which is neither positive or negative. */
+  --gl-illustration-status-fill-color-success: #3b8581; /* Used as a fill to convey a success or active concept, has a positive connotation. */
+  --gl-illustration-status-fill-color-warning: #ab752f; /* Used as a fill to convey a caution or warning concept, has a slightly negative connotation. */
+  --gl-illustration-status-fill-color-danger: #aa563a; /* Used as a fill to convey a critical or danger concept, has a negative connotation. */
+  --gl-illustration-accent-stroke-color-orange: #e3865f; /* Used for orange accent stroke detail on an object or attention-drawing element. */
+  --gl-illustration-accent-stroke-color-teal: #6baea3; /* Used for teal accent stroke detail on an object or attention-drawing element. */
+  --gl-illustration-accent-stroke-color-strong: #aea5d6; /* Used for dark accent stroke detail on an object or attention-drawing element. */
+  --gl-illustration-accent-fill-color-subtle: #5c5371; /* Used to add depth to a secondary element and supporting surface. */
+  --gl-illustration-accent-fill-color-strong: #6f6796; /* Used for an element requiring visual emphasis without competing with primary content or status indicators. */
+  --gl-illustration-accent-fill-color-orange: #aa563a; /* Used to add orange to a secondary element and supporting surface. */
+  --gl-illustration-accent-fill-color-teal: #3b8581; /* Used to add teal to a secondary element and supporting surface. */
+  --gl-illustration-base-fill-color: #32303c; /* Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion. */
+  --gl-illustration-isometric-stroke-color-default: #e3e3e8; /* Default stroke color to define shape and provide essential detail in isometric illustration. */
+  --gl-illustration-isometric-stroke-width-default: 0.09375rem; /* Default stroke width to define shape and provide essential detail in isometric illustration. */
+  --gl-illustration-isometric-glyph-top-fill-color: #5a566c; /* Used for the top face of isometric text and number elements. */
+  --gl-illustration-isometric-glyph-front-fill-color: #423f4f; /* Used for the front face of isometric text and number elements. */
+  --gl-illustration-isometric-glyph-side-fill-color: #373441; /* Used for the side face of isometric text and number elements. */
+  --gl-illustration-isometric-glyph-shadow-fill-color: #292730; /* Used for the shadow of isometric text and number elements. */
+  --gl-illustration-isometric-object-top-fill-color: #aa563a; /* Used for the top face of an isometric object or symbol. */
+  --gl-illustration-isometric-object-front-fill-color: #a54623; /* Used for the front face of an isometric object or symbol. */
+  --gl-illustration-isometric-object-side-fill-color: #8f4424; /* Used for the side face of an isometric object or symbol. */
+  --gl-illustration-isometric-object-highlight-fill-color: #423f4f; /* Used for the face of an isometric object or symbol that requires maximum distinction from other elements. */
+  --gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; /* Used for the shadow of an isometric object or symbol. */
+  --gl-illustration-isometric-accent-top-fill-color: #6d6972; /* Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
+  --gl-illustration-isometric-accent-front-fill-color: #49474d; /* Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
+  --gl-illustration-isometric-accent-side-fill-color: #212023; /* Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
+  --gl-illustration-isometric-base-top-fill-color: #32303c; /* Used for the top surface of an isometric base platform. */
+  --gl-illustration-isometric-base-front-fill-color: #2b2932; /* Used for the front face of an isometric base platform. */
+  --gl-illustration-isometric-base-side-fill-color: #23222b; /* Used for the side face of an isometric base platform. */
   --theme-indigo-10: #14143d;
   --theme-indigo-50: #222261;
   --theme-indigo-100: #303083;

package/src/tokens/build/js/tokens.dark.js

@@ -651,6 +651,38 @@ export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#4c4b51';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#28272d';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#3a383f';
+export const GL_ILLUSTRATION_STROKE_COLOR_DEFAULT = '#e3e3e8';
+export const GL_ILLUSTRATION_STROKE_WIDTH_DEFAULT = '0.09375rem';
+export const GL_ILLUSTRATION_FILL_COLOR_DEFAULT = '#423f4f';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_NEUTRAL = '#6f6796';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_SUCCESS = '#3b8581';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_WARNING = '#ab752f';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_DANGER = '#aa563a';
+export const GL_ILLUSTRATION_ACCENT_STROKE_COLOR_ORANGE = '#e3865f';
+export const GL_ILLUSTRATION_ACCENT_STROKE_COLOR_TEAL = '#6baea3';
+export const GL_ILLUSTRATION_ACCENT_STROKE_COLOR_STRONG = '#aea5d6';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_SUBTLE = '#5c5371';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_STRONG = '#6f6796';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_ORANGE = '#aa563a';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_TEAL = '#3b8581';
+export const GL_ILLUSTRATION_BASE_FILL_COLOR = '#32303c';
+export const GL_ILLUSTRATION_ISOMETRIC_STROKE_COLOR_DEFAULT = '#e3e3e8';
+export const GL_ILLUSTRATION_ISOMETRIC_STROKE_WIDTH_DEFAULT = '0.09375rem';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_TOP_FILL_COLOR = '#5a566c';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_FRONT_FILL_COLOR = '#423f4f';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_SIDE_FILL_COLOR = '#373441';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_SHADOW_FILL_COLOR = '#292730';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_TOP_FILL_COLOR = '#aa563a';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_FRONT_FILL_COLOR = '#a54623';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_SIDE_FILL_COLOR = '#8f4424';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_HIGHLIGHT_FILL_COLOR = '#423f4f';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_SHADOW_FILL_COLOR = '#3d2b2a';
+export const GL_ILLUSTRATION_ISOMETRIC_ACCENT_TOP_FILL_COLOR = '#6d6972';
+export const GL_ILLUSTRATION_ISOMETRIC_ACCENT_FRONT_FILL_COLOR = '#49474d';
+export const GL_ILLUSTRATION_ISOMETRIC_ACCENT_SIDE_FILL_COLOR = '#212023';
+export const GL_ILLUSTRATION_ISOMETRIC_BASE_TOP_FILL_COLOR = '#32303c';
+export const GL_ILLUSTRATION_ISOMETRIC_BASE_FRONT_FILL_COLOR = '#2b2932';
+export const GL_ILLUSTRATION_ISOMETRIC_BASE_SIDE_FILL_COLOR = '#23222b';
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/src/tokens/build/js/tokens.js

@@ -651,6 +651,38 @@ export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#bfbfc3';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#ececef';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#dcdcde';
+export const GL_ILLUSTRATION_STROKE_COLOR_DEFAULT = '#171321';
+export const GL_ILLUSTRATION_STROKE_WIDTH_DEFAULT = '0.125rem';
+export const GL_ILLUSTRATION_FILL_COLOR_DEFAULT = '#fff';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_NEUTRAL = '#aea5d6';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_SUCCESS = '#6fdac9';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_WARNING = '#fca326';
+export const GL_ILLUSTRATION_STATUS_FILL_COLOR_DANGER = '#ff9d73';
+export const GL_ILLUSTRATION_ACCENT_STROKE_COLOR_ORANGE = '#ff9d73';
+export const GL_ILLUSTRATION_ACCENT_STROKE_COLOR_TEAL = '#6fdac9';
+export const GL_ILLUSTRATION_ACCENT_STROKE_COLOR_STRONG = '#aea5d6';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_SUBTLE = '#d0c5e2';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_STRONG = '#aea5d6';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_ORANGE = '#ff9d73';
+export const GL_ILLUSTRATION_ACCENT_FILL_COLOR_TEAL = '#6fdac9';
+export const GL_ILLUSTRATION_BASE_FILL_COLOR = '#e7e4f2';
+export const GL_ILLUSTRATION_ISOMETRIC_STROKE_COLOR_DEFAULT = '#171321';
+export const GL_ILLUSTRATION_ISOMETRIC_STROKE_WIDTH_DEFAULT = '0.125rem';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_TOP_FILL_COLOR = '#c5f4ec';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_FRONT_FILL_COLOR = '#fff';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_SIDE_FILL_COLOR = '#6fdac9';
+export const GL_ILLUSTRATION_ISOMETRIC_GLYPH_SHADOW_FILL_COLOR = '#10b1b1';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_TOP_FILL_COLOR = '#ff9d73';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_FRONT_FILL_COLOR = '#ffc2a8';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_SIDE_FILL_COLOR = '#ff7b42';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_HIGHLIGHT_FILL_COLOR = '#fff';
+export const GL_ILLUSTRATION_ISOMETRIC_OBJECT_SHADOW_FILL_COLOR = '#e24329';
+export const GL_ILLUSTRATION_ISOMETRIC_ACCENT_TOP_FILL_COLOR = '#45424d';
+export const GL_ILLUSTRATION_ISOMETRIC_ACCENT_FRONT_FILL_COLOR = '#74717a';
+export const GL_ILLUSTRATION_ISOMETRIC_ACCENT_SIDE_FILL_COLOR = '#2b2838';
+export const GL_ILLUSTRATION_ISOMETRIC_BASE_TOP_FILL_COLOR = '#e7e4f2';
+export const GL_ILLUSTRATION_ISOMETRIC_BASE_FRONT_FILL_COLOR = '#d5d0e8';
+export const GL_ILLUSTRATION_ISOMETRIC_BASE_SIDE_FILL_COLOR = '#aea5d6';
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';