@gitlab/ui 88.4.1 → 88.6.0

package/src/tokens/build/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/src/tokens/build/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/src/tokens/contextual/avatar.tokens.json

@@ -21,54 +21,88 @@
       }
     },
     "fallback": {
-      "background": {
+      "text": {
         "color": {
           "red": {
             "$value": {
-              "default": "{color.red.50}",
-              "dark": "{color.red.950}"
+              "default": "{color.red.800}",
+              "dark": "{color.red.200}"
             },
             "$type": "color",
-            "$description": "Red background for avatar fallback with no particular meaning."
+            "$description": "Red text color for avatar fallback with no particular meaning."
           },
           "purple": {
             "$value": {
-              "default": "{color.purple.50}",
-              "dark": "{color.purple.950}"
+              "default": "{color.purple.800}",
+              "dark": "{color.purple.200}"
             },
             "$type": "color",
-            "$description": "Purple background for avatar fallback with no particular meaning."
+            "$description": "Purple text color for avatar fallback with no particular meaning."
           },
           "blue": {
             "$value": {
-              "default": "{color.blue.50}",
-              "dark": "{color.blue.950}"
+              "default": "{color.blue.800}",
+              "dark": "{color.blue.200}"
             },
             "$type": "color",
-            "$description": "Blue background for avatar fallback with no particular meaning."
+            "$description": "Blue text color for avatar fallback with no particular meaning."
           },
           "green": {
             "$value": {
-              "default": "{color.green.50}",
-              "dark": "{color.green.950}"
+              "default": "{color.green.800}",
+              "dark": "{color.green.200}"
             },
             "$type": "color",
-            "$description": "Green background for avatar fallback with no particular meaning."
+            "$description": "Green text color for avatar fallback with no particular meaning."
           },
           "orange": {
             "$value": {
-              "default": "{color.orange.50}",
-              "dark": "{color.orange.950}"
+              "default": "{color.orange.800}",
+              "dark": "{color.orange.200}"
             },
             "$type": "color",
-            "$description": "Orange background for avatar fallback with no particular meaning."
+            "$description": "Orange text color for avatar fallback with no particular meaning."
           },
           "neutral": {
             "$value": {
-              "default": "{color.neutral.50}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.neutral.800}",
+              "dark": "{color.neutral.200}"
             },
             "$type": "color",
+            "$description": "Neutral text color for avatar fallback with no particular meaning."
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "red": {
+            "$value": "#fcb5aa3d",
+            "$type": "color",
+            "$description": "Red background for avatar fallback with no particular meaning."
+          },
+          "purple": {
+            "$value": "#cbbbf23d",
+            "$type": "color",
+            "$description": "Purple background for avatar fallback with no particular meaning."
+          },
+          "blue": {
+            "$value": "#9dc7f13d",
+            "$type": "color",
+            "$description": "Blue background for avatar fallback with no particular meaning."
+          },
+          "green": {
+            "$value": "#91d4a83d",
+            "$type": "color",
+            "$description": "Green background for avatar fallback with no particular meaning."
+          },
+          "orange": {
+            "$value": "#e9be743d",
+            "$type": "color",
+            "$description": "Orange background for avatar fallback with no particular meaning."
+          },
+          "neutral": {
+            "$value": "#bfbfc33d",
+            "$type": "color",
             "$description": "Neutral background for avatar fallback with no particular meaning."
           }
         }

package/src/tokens/contextual/datepicker.tokens.json

@@ -0,0 +1,15 @@
+{
+  "datepicker": {
+    "date": {
+      "text": {
+        "color": {
+          "selected": {
+            "$value": "{control.indicator.color.selected}",
+            "$type": "color",
+            "$description": "Used for the datepicker date text color state indicators."
+          }
+        }
+      }
+    }
+  }
+}