@gitlab/ui 88.4.0 → 88.5.0

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

@@ -518,6 +518,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

@@ -518,6 +518,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.

package/src/tokens/build/json/tokens.dark.json

@@ -11228,6 +11228,35 @@
       }
     }
   },
+  "datepicker": {
+    "date": {
+      "text": {
+        "color": {
+          "selected": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the datepicker date text color state indicators.",
+            "filePath": "src/tokens/contextual/datepicker.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{control.indicator.color.selected}",
+              "$type": "color",
+              "comment": "Used for the datepicker date text color state indicators."
+            },
+            "name": "DATEPICKER_DATE_TEXT_COLOR_SELECTED",
+            "attributes": {},
+            "path": [
+              "datepicker",
+              "date",
+              "text",
+              "color",
+              "selected"
+            ]
+          }
+        }
+      }
+    }
+  },
   "label": {
     "light": {
       "text": {

package/src/tokens/build/json/tokens.json

@@ -11228,6 +11228,35 @@
       }
     }
   },
+  "datepicker": {
+    "date": {
+      "text": {
+        "color": {
+          "selected": {
+            "value": "#fff",
+            "$type": "color",
+            "comment": "Used for the datepicker date text color state indicators.",
+            "filePath": "src/tokens/contextual/datepicker.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{control.indicator.color.selected}",
+              "$type": "color",
+              "comment": "Used for the datepicker date text color state indicators."
+            },
+            "name": "DATEPICKER_DATE_TEXT_COLOR_SELECTED",
+            "attributes": {},
+            "path": [
+              "datepicker",
+              "date",
+              "text",
+              "color",
+              "selected"
+            ]
+          }
+        }
+      }
+    }
+  },
   "label": {
     "light": {
       "text": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -685,6 +685,7 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-500; // 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.scss

@@ -685,6 +685,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

@@ -518,6 +518,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/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."
+          }
+        }
+      }
+    }
+  }
+}