@gitlab/ui 88.4.1 → 88.6.0

package/dist/tokens/scss/_tokens.scss

@@ -180,6 +180,12 @@ $theme-indigo-200: #c7c7f2 !default;
 $theme-indigo-100: #dbdbf8 !default;
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-10: #f8f8ff !default;
+$gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral 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-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $data-viz-orange-950: #4b2707 !default;
 $data-viz-orange-900: #5e2f05 !default;
 $data-viz-orange-800: #6f3500 !default;
@@ -649,12 +655,12 @@ $gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the borde
 $gl-badge-muted-border-color-default: $gl-color-alpha-0; // Used for the border of a muted badge when static or the default state when linked.
 $gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a muted badge in the active state.
 $gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a muted badge when static or the default state when linked.
-$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-orange: $gl-color-orange-50; // Orange background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-green: $gl-color-green-50; // Green background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-blue: $gl-color-blue-50; // Blue background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-purple: $gl-color-purple-50; // Purple background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-red: $gl-color-red-50; // Red background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-neutral: $gl-color-neutral-800; // Neutral text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-orange: $gl-color-orange-800; // Orange text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-green: $gl-color-green-800; // Green text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-blue: $gl-color-blue-800; // Blue text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-purple: $gl-color-purple-800; // Purple text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
 $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.
@@ -685,6 +691,7 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the for
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
 $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
 $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -278,6 +278,12 @@ $data-viz-orange-900: var(--data-viz-orange-900);
 $data-viz-orange-950: var(--data-viz-orange-950);
 $gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
 $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
+$gl-avatar-fallback-text-color-red: var(--gl-avatar-fallback-text-color-red);
+$gl-avatar-fallback-text-color-purple: var(--gl-avatar-fallback-text-color-purple);
+$gl-avatar-fallback-text-color-blue: var(--gl-avatar-fallback-text-color-blue);
+$gl-avatar-fallback-text-color-green: var(--gl-avatar-fallback-text-color-green);
+$gl-avatar-fallback-text-color-orange: var(--gl-avatar-fallback-text-color-orange);
+$gl-avatar-fallback-text-color-neutral: var(--gl-avatar-fallback-text-color-neutral);
 $gl-avatar-fallback-background-color-red: var(--gl-avatar-fallback-background-color-red);
 $gl-avatar-fallback-background-color-purple: var(--gl-avatar-fallback-background-color-purple);
 $gl-avatar-fallback-background-color-blue: var(--gl-avatar-fallback-background-color-blue);
@@ -518,6 +524,7 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
 $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
 $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
+$gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "88.4.1",
+  "version": "88.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/avatar/avatar.scss

@@ -12,6 +12,13 @@ $gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
   var(--gl-avatar-fallback-background-color-orange),
   var(--gl-avatar-fallback-background-color-neutral);
 
+$gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
+  var(--gl-avatar-fallback-text-color-purple),
+  var(--gl-avatar-fallback-text-color-purple), var(--gl-avatar-fallback-text-color-blue),
+  var(--gl-avatar-fallback-text-color-green),
+  var(--gl-avatar-fallback-text-color-orange),
+  var(--gl-avatar-fallback-text-color-neutral);
+
 @mixin gl-avatar {
   @include gl-display-inline-flex;
   @include gl-overflow-hidden;
@@ -215,6 +222,7 @@ $gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
 // Background colors
 @for $i from 1 through length($gl-avatar-identicon-bgs) {
   .gl-avatar-identicon-bg#{$i} {
+    color: nth($gl-avatar-identicon-texts, $i);
     background-color: nth($gl-avatar-identicon-bgs, $i);
   }
 }

package/src/components/base/datepicker/datepicker.scss

@@ -1,22 +1,21 @@
 // pikaday colors override
-$pd-text-color: $gray-900;
-$pd-title-color: $gray-900;
-$pd-title-bg: $white;
-$pd-picker-bg: $white;
-$pd-picker-border: $border-color;
-$pd-picker-border-bottom: $border-color;
-$pd-picker-shadow: rgba(0, 0, 0, 0.5);
-$pd-th-color: $gray-500;
-$pd-day-color: $gray-900;
+$pd-text-color: var(--gl-text-color-default);
+$pd-title-color: var(--gl-action-neutral-foreground-color-default);
+$pd-title-bg: var(--gl-action-neutral-background-color-default);
+$pd-picker-bg: var(--gl-control-background-color-default);
+$pd-picker-border: var(--gl-border-color-default);
+$pd-picker-border-bottom: var(--gl-border-color-default);
+$pd-th-color: var(--gl-text-color-subtle);
+$pd-day-color: var(--gl-text-color-default);
 $pd-day-bg: transparent;
-$pd-day-hover-color: $gray-500;
-$pd-day-hover-bg: $gray-50;
-$pd-day-today-color: $gray-900;
-$pd-day-selected-color: $gray-50;
-$pd-day-selected-bg: $blue-500;
-$pd-day-selected-shadow: $blue-500;
-$pd-day-disabled-color: $gray-500;
-$pd-week-color: $gray-500;
+$pd-day-hover-color: var(--gl-text-color-default);
+$pd-day-hover-bg: transparent;
+$pd-day-today-color: var(--gl-text-color-default);
+$pd-day-selected-color: var(--gl-datepicker-date-text-color-selected);
+$pd-day-selected-bg: var(--gl-control-background-color-selected-default);
+$pd-day-selected-shadow: var(--gl-control-background-color-selected-default);
+$pd-day-disabled-color: var(--gl-text-color-disabled);
+$pd-week-color: var(--gl-text-color-subtle);
 
 @import 'pikaday/scss/pikaday';
 
@@ -42,9 +41,14 @@ $pd-week-color: $gray-500;
   @apply gl-border-none;
   @apply gl-rounded-base;
   @include gl-mt-3;
+  background-color: var(--gl-control-background-color-default);
 
   &.is-bound {
     @include gl-shadow-md;
+
+    @media (forced-colors: active) {
+      border: 1px solid;
+    }
   }
 
   .pika-lendar {
@@ -52,7 +56,6 @@ $pd-week-color: $gray-500;
     @include gl-pt-5;
     @include gl-px-3;
     @include gl-pb-3;
-    @include gl-inset-border-1-gray-100;
     @apply gl-rounded-base;
   }
 
@@ -64,37 +67,101 @@ $pd-week-color: $gray-500;
 
   .pika-next,
   .pika-prev {
-    @include gl-bg-center;
-    @include gl-bg-no-repeat;
-    @include gl-bg-size-100p;
+    @apply gl-rounded-small;
     @include gl-w-5;
     @include gl-h-5;
 
-    &:hover {
-      @include gl-rounded-small;
-      @include gl-bg-gray-50;
-    }
-
     &.is-disabled {
       @include gl-cursor-not-allowed;
     }
+
+    @media (forced-colors: none) {
+      background-color: var(--gl-action-neutral-background-color-default);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+      background-image: none;
+      opacity: 100%;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--gl-action-neutral-foreground-color-default);
+      }
+
+      &:not(.is-disabled):hover {
+        background-color: var(--gl-action-neutral-background-color-hover);
+
+        &::before {
+          background-color: var(--gl-action-neutral-foreground-color-hover);
+        }
+      }
+
+      &:not(.is-disabled):focus {
+        background-color: var(--gl-action-neutral-background-color-focus);
+
+        &::before {
+          background-color: var(--gl-action-neutral-foreground-color-focus);
+        }
+      }
+
+      &:not(.is-disabled):active {
+        background-color: var(--gl-action-neutral-background-color-active);
+
+        &::before {
+          background-color: var(--gl-action-neutral-foreground-color-active);
+        }
+      }
+
+      &.is-disabled::before {
+        background-color: var(--gl-action-disabled-foreground-color);
+      }
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid;
+    }
   }
 
   .pika-next {
-    @include gl-bg-chevron-right;
+    &::before {
+      mask-image: url('#{$gl-icon-chevron-right}');
+    }
+
+    @media (forced-colors: active) {
+      background-image: url('#{$gl-icon-chevron-right}');
+    }
   }
 
   .pika-prev {
-    @include gl-bg-chevron-left;
+    &::before {
+      mask-image: url('#{$gl-icon-chevron-left}');
+    }
+
+    @media (forced-colors: active) {
+      background-image: url('#{$gl-icon-chevron-left}');
+    }
   }
 
   .pika-label {
+    @apply gl-rounded-small;
     @include gl-font-base;
     @include gl-py-0;
 
+    background-color: var(--gl-action-neutral-background-color-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+    color: var(--gl-action-neutral-foreground-color-default);
+
     &:hover {
-      @include gl-rounded-small;
-      @include gl-bg-gray-50;
+      background-color: var(--gl-action-neutral-background-color-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
+      color: var(--gl-action-neutral-foreground-color-hover);
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid;
     }
   }
 
@@ -123,19 +190,34 @@ $pd-week-color: $gray-500;
     @include gl-w-7;
     @include gl-font-base;
 
-    &.is-past-date {
-      @include gl-text-gray-400;
+    &:hover {
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid;
     }
   }
 
   .is-today > .pika-button {
     @include gl-font-weight-bold;
-    @include gl-text-gray-900;
   }
 
   .is-selected > .pika-button {
-    @include gl-bg-blue-500;
     @include gl-font-weight-normal;
-    @include gl-text-white;
+
+    &:hover {
+      background-color: var(--gl-control-background-color-selected-hover);
+      color: var(--gl-datepicker-date-text-color-selected);
+      box-shadow: none;
+    }
+  }
+
+  .is-selected.is-today > .pika-button {
+    @include gl-font-weight-bold;
+  }
+
+  .is-disabled {
+    @include gl-cursor-not-allowed;
   }
 }

package/src/components/base/form/form_checkbox_tree/models/tree.js

@@ -45,6 +45,7 @@ export class Tree {
    * @param {object} parent The options' parent
    * @param {number} depth  The current depth-level in the tree
    */
+  // eslint-disable-next-line max-params
   initNodes(options = [], selected = [], parent = null, depth = 0) {
     if (!options.length) {
       return;

package/src/components/charts/series_label/series_label.vue

@@ -1,4 +1,5 @@
 <script>
+// eslint-disable-next-line max-params
 const makePathRect = (startX, startY, width, height) =>
   `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;
 

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

@@ -182,6 +182,12 @@
   --theme-indigo-100: #dbdbf8;
   --theme-indigo-50: #f1f1ff;
   --theme-indigo-10: #f8f8ff;
+  --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral 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-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /* Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /* Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /* Red background for avatar fallback with no particular meaning. */
   --data-viz-orange-950: #4b2707;
   --data-viz-orange-900: #5e2f05;
   --data-viz-orange-800: #6f3500;
@@ -651,12 +657,12 @@
   --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
   --gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a muted badge in the active state. */
   --gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a muted badge when static or the default state when linked. */
-  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-50); /* Neutral background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-50); /* Orange background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-green: var(--gl-color-green-50); /* Green background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-50); /* Blue background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-purple: var(--gl-color-purple-50); /* Purple background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-red: var(--gl-color-red-50); /* Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-800); /* Neutral text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-800); /* Orange text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-green: var(--gl-color-green-800); /* Green text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-800); /* Blue text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-800); /* Purple text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
@@ -687,6 +693,7 @@
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */

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

@@ -182,6 +182,12 @@
   --theme-indigo-100: #303083;
   --theme-indigo-50: #222261;
   --theme-indigo-10: #14143d;
+  --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral 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-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /* Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /* Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /* Red background for avatar fallback with no particular meaning. */
   --data-viz-orange-950: #fae8d1;
   --data-viz-orange-900: #f5d6b3;
   --data-viz-orange-800: #eebd8c;
@@ -651,12 +657,12 @@
   --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
   --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a muted badge in the active state. */
   --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a muted badge when static or the default state when linked. */
-  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-950); /* Orange background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-green: var(--gl-color-green-950); /* Green background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-950); /* Blue background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-purple: var(--gl-color-purple-950); /* Purple background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-red: var(--gl-color-red-950); /* Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-200); /* Neutral text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-200); /* Orange text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-green: var(--gl-color-green-200); /* Green text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-200); /* Blue text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-200); /* Purple text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
@@ -687,6 +693,7 @@
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */

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

@@ -278,12 +278,18 @@ export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
 export const DATA_VIZ_ORANGE_950 = '#fae8d1';
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#4d0a00'; // Red background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#232150'; // Purple background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#002850'; // Blue background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; // Red text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_PURPLE = '#cbbbf2'; // Purple text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_BLUE = '#9dc7f1'; // Blue text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_GREEN = '#91d4a8'; // Green text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_ORANGE = '#e9be74'; // Orange text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL = '#bfbfc3'; // Neutral text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#fcb5aa3d'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#cbbbf23d'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#9dc7f13d'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#91d4a83d'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#e9be743d'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#bfbfc33d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a muted badge when static or the default state when linked.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a muted badge in the hover state.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of a muted badge in the focus state.
@@ -518,6 +524,7 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#a4a3a8'; // Used for the
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled button.
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#18171d'; // Used for the background of a disabled button.
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled button.
+export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#28272d'; // Used for the datepicker date text color state indicators.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

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

@@ -278,12 +278,18 @@ export const DATA_VIZ_ORANGE_900 = '#5e2f05';
 export const DATA_VIZ_ORANGE_950 = '#4b2707';
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#fcf1ef'; // Red background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#f4f0ff'; // Purple background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#8d1300'; // Red text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_PURPLE = '#453894'; // Purple text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_BLUE = '#064787'; // Blue text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_GREEN = '#0d532a'; // Green text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_ORANGE = '#703800'; // Orange text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL = '#3a383f'; // Neutral text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#fcb5aa3d'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#cbbbf23d'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#9dc7f13d'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#91d4a83d'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#e9be743d'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#bfbfc33d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a muted badge when static or the default state when linked.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of a muted badge in the hover state.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of a muted badge in the focus state.
@@ -518,6 +524,7 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#626168'; // Used for the
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled button.
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd'; // Used for the background of a disabled button.
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled button.
+export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff'; // Used for the datepicker date text color state indicators.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.