@gitlab/ui 89.1.0 → 89.2.0

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

@@ -406,6 +406,7 @@
   --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
   --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
   --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
+  --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
   --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
   --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
   --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
@@ -480,9 +481,6 @@
   --gl-feedback-strong-background-color: var(--gl-color-neutral-950); /* Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /* Used for disabled checkbox and radio button state indicators. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /* Used for checkbox and radio button state indicators. */
-  --gl-control-placeholder-color: var(--gl-color-neutral-400); /* Used for placeholder text within inputs. */
-  --gl-control-text-color-valid: var(--gl-color-green-500); /* Used for the helper text when the input is valid. */
-  --gl-control-text-color-error: var(--gl-color-red-500); /* Used for the helper text when the input is invalid. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
@@ -494,6 +492,8 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
+  --gl-control-background-color-readonly: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
@@ -515,6 +515,7 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
+  --gl-datepicker-background-color: var(--gl-color-neutral-0); /* Used for the background color of datepicker. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-10); /* Used for the background of a disabled button. */
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled button. */
@@ -691,6 +692,9 @@
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
+  --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
+  --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
+  --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
   --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. */

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

@@ -406,6 +406,7 @@
   --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
   --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
   --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
+  --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
   --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
   --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
   --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
@@ -479,23 +480,22 @@
   --gl-feedback-strong-text-color: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-10); /* Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /* Used for disabled checkbox and radio button state indicators. */
-  --gl-control-indicator-color-selected: var(--gl-color-neutral-900); /* Used for checkbox and radio button state indicators. */
-  --gl-control-placeholder-color: var(--gl-color-neutral-500); /* Used for placeholder text within inputs. */
-  --gl-control-text-color-valid: var(--gl-color-green-400); /* Used for the helper text when the input is valid. */
-  --gl-control-text-color-error: var(--gl-color-red-400); /* Used for the helper text when the input is invalid. */
+  --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /* Used for checkbox and radio button state indicators. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-default: var(--gl-color-blue-400); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
-  --gl-control-border-color-error: var(--gl-color-red-400); /* Used for invalid form control (input, textarea) border. */
+  --gl-control-border-color-error: var(--gl-color-red-300); /* Used for invalid form control (input, textarea) border. */
   --gl-control-border-color-disabled: var(--gl-color-neutral-800); /* Used for disabled form control (input, radio button, checkbox, textarea) border. */
   --gl-control-border-color-focus: var(--gl-color-neutral-50); /* Used for form control (input, radio button, checkbox, textarea) border on focus. */
   --gl-control-border-color-hover: var(--gl-color-neutral-300); /* Used for form control (input, radio button, checkbox, textarea) border on hover. */
   --gl-control-border-color-default: var(--gl-color-neutral-500); /* Used for form control (input, radio button, checkbox, textarea) default border. */
   --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
-  --gl-control-background-color-selected-default: var(--gl-color-blue-400); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-disabled: var(--gl-color-neutral-950); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
-  --gl-control-background-color-default: var(--gl-color-neutral-900); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-control-background-color-selected-default: var(--gl-color-blue-300); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
+  --gl-control-background-color-readonly: var(--gl-color-neutral-900); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
+  --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */
   --gl-spinner-track-color-light: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner on a dark background. */
@@ -515,6 +515,7 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
+  --gl-datepicker-background-color: var(--gl-color-neutral-900); /* Used for the background color of datepicker. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-950); /* Used for the background of a disabled button. */
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled button. */
@@ -691,6 +692,9 @@
   --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
+  --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
+  --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
+  --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
   --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. */

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

@@ -58,6 +58,7 @@ export const GL_COLOR_ALPHA_DARK_6 = 'rgba(05, 05, 06, 0.06)';
 export const GL_COLOR_ALPHA_DARK_8 = 'rgba(05, 05, 06, 0.08)';
 export const GL_COLOR_ALPHA_DARK_16 = 'rgba(05, 05, 06, 0.16)';
 export const GL_COLOR_ALPHA_DARK_24 = 'rgba(05, 05, 06, 0.24)';
+export const GL_COLOR_ALPHA_DARK_40 = 'rgba(05, 05, 06, 0.4)';
 export const GL_COLOR_ALPHA_LIGHT_2 = 'rgba(255, 255, 255, 0.02)';
 export const GL_COLOR_ALPHA_LIGHT_4 = 'rgba(255, 255, 255, 0.04)';
 export const GL_COLOR_ALPHA_LIGHT_6 = 'rgba(255, 255, 255, 0.06)';
@@ -524,7 +525,8 @@ 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_DATEPICKER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of datepicker.
+export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d'; // 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.
@@ -546,23 +548,25 @@ export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#bfbfc3'; // Used for the anima
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff'; // Used for the color of the sorting icons in the column headers.
-export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for form control (input, radio button, checkbox, textarea) default background.
-export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#18171d'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
-export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
+export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#737278'; // Used for form control (input, radio button, checkbox, textarea) default border.
 export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
 export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 export const GL_CONTROL_BORDER_COLOR_DISABLED = '#3a383f'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
-export const GL_CONTROL_BORDER_COLOR_ERROR = '#ec5941'; // Used for invalid form control (input, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_ERROR = '#f57f6c'; // Used for invalid form control (input, textarea) border.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
-export const GL_CONTROL_TEXT_COLOR_ERROR = '#ec5941'; // Used for the helper text when the input is invalid.
-export const GL_CONTROL_TEXT_COLOR_VALID = '#2da160'; // Used for the helper text when the input is valid.
-export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278'; // Used for placeholder text within inputs.
-export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#28272d'; // Used for checkbox and radio button state indicators.
+export const GL_CONTROL_TEXT_COLOR_ERROR = '#f57f6c'; // Used for the helper text when the input is invalid.
+export const GL_CONTROL_TEXT_COLOR_VALID = '#52b87a'; // Used for the helper text when the input is valid.
+export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.
+export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d'; // Used for checkbox and radio button state indicators.
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d'; // Used for disabled checkbox and radio button state indicators.
 export const THEME_INDIGO_10 = '#14143d';
 export const THEME_INDIGO_50 = '#222261';

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

@@ -58,6 +58,7 @@ export const GL_COLOR_ALPHA_DARK_6 = 'rgba(05, 05, 06, 0.06)';
 export const GL_COLOR_ALPHA_DARK_8 = 'rgba(05, 05, 06, 0.08)';
 export const GL_COLOR_ALPHA_DARK_16 = 'rgba(05, 05, 06, 0.16)';
 export const GL_COLOR_ALPHA_DARK_24 = 'rgba(05, 05, 06, 0.24)';
+export const GL_COLOR_ALPHA_DARK_40 = 'rgba(05, 05, 06, 0.4)';
 export const GL_COLOR_ALPHA_LIGHT_2 = 'rgba(255, 255, 255, 0.02)';
 export const GL_COLOR_ALPHA_LIGHT_4 = 'rgba(255, 255, 255, 0.04)';
 export const GL_COLOR_ALPHA_LIGHT_6 = 'rgba(255, 255, 255, 0.06)';
@@ -524,6 +525,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_BACKGROUND_COLOR = '#fff'; // Used for the background color of datepicker.
 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.
@@ -548,6 +550,8 @@ export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd'; // Used for the ba
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
@@ -559,8 +563,8 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
-export const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
-export const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
+export const GL_CONTROL_TEXT_COLOR_ERROR = '#c91c00'; // Used for the helper text when the input is invalid.
+export const GL_CONTROL_TEXT_COLOR_VALID = '#217645'; // Used for the helper text when the input is valid.
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff'; // Used for checkbox and radio button state indicators.
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278'; // Used for disabled checkbox and radio button state indicators.

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

@@ -1254,6 +1254,24 @@
             "dark",
             "24"
           ]
+        },
+        "40": {
+          "value": "rgba(05, 05, 06, 0.4)",
+          "$type": "color",
+          "filePath": "src/tokens/color.alpha.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "rgba(05, 05, 06, 0.4)",
+            "$type": "color"
+          },
+          "name": "COLOR_ALPHA_DARK_40",
+          "attributes": {},
+          "path": [
+            "color",
+            "alpha",
+            "dark",
+            "40"
+          ]
         }
       },
       "light": {
@@ -11359,11 +11377,35 @@
     }
   },
   "datepicker": {
+    "background": {
+      "color": {
+        "value": "#28272d",
+        "$type": "color",
+        "comment": "Used for the background color of datepicker.",
+        "filePath": "src/tokens/contextual/datepicker.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for the background color of datepicker."
+        },
+        "name": "DATEPICKER_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "datepicker",
+          "background",
+          "color"
+        ]
+      }
+    },
     "date": {
       "text": {
         "color": {
           "selected": {
-            "value": "#28272d",
+            "value": "#18171d",
             "$type": "color",
             "comment": "Used for the datepicker date text color state indicators.",
             "filePath": "src/tokens/contextual/datepicker.tokens.json",
@@ -11930,7 +11972,7 @@
     "background": {
       "color": {
         "default": {
-          "value": "#28272d",
+          "value": "rgba(05, 05, 06, 0.4)",
           "$type": "color",
           "comment": "Used for form control (input, radio button, checkbox, textarea) default background.",
           "filePath": "src/tokens/control.tokens.json",
@@ -11938,7 +11980,7 @@
           "original": {
             "value": {
               "default": "{color.neutral.0}",
-              "dark": "{color.neutral.900}"
+              "dark": "{color.alpha.dark.40}"
             },
             "$type": "color",
             "comment": "Used for form control (input, radio button, checkbox, textarea) default background."
@@ -11953,7 +11995,7 @@
           ]
         },
         "disabled": {
-          "value": "#18171d",
+          "value": "rgba(255, 255, 255, 0.04)",
           "$type": "color",
           "comment": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
           "filePath": "src/tokens/control.tokens.json",
@@ -11961,7 +12003,7 @@
           "original": {
             "value": {
               "default": "{color.neutral.10}",
-              "dark": "{color.neutral.950}"
+              "dark": "{color.alpha.light.4}"
             },
             "$type": "color",
             "comment": "Used for disabled form control (checkbox, input, radio button, textarea) background."
@@ -11975,9 +12017,55 @@
             "disabled"
           ]
         },
+        "concatenation": {
+          "value": "rgba(255, 255, 255, 0.04)",
+          "$type": "color",
+          "comment": "Used for the background of static content that prepends or appends a text input.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.10}",
+              "dark": "{color.alpha.light.4}"
+            },
+            "$type": "color",
+            "comment": "Used for the background of static content that prepends or appends a text input."
+          },
+          "name": "CONTROL_BACKGROUND_COLOR_CONCATENATION",
+          "attributes": {},
+          "path": [
+            "control",
+            "background",
+            "color",
+            "concatenation"
+          ]
+        },
+        "readonly": {
+          "value": "#28272d",
+          "$type": "color",
+          "comment": "Used for the background of static content that prepends or appends a text input.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.10}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used for the background of static content that prepends or appends a text input."
+          },
+          "name": "CONTROL_BACKGROUND_COLOR_READONLY",
+          "attributes": {},
+          "path": [
+            "control",
+            "background",
+            "color",
+            "readonly"
+          ]
+        },
         "selected": {
           "default": {
-            "value": "#428fdc",
+            "value": "#63a6e9",
             "$type": "color",
             "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
             "filePath": "src/tokens/control.tokens.json",
@@ -11985,7 +12073,7 @@
             "original": {
               "value": {
                 "default": "{color.blue.500}",
-                "dark": "{color.blue.400}"
+                "dark": "{color.blue.300}"
               },
               "$type": "color",
               "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background."
@@ -12146,7 +12234,7 @@
           ]
         },
         "error": {
-          "value": "#ec5941",
+          "value": "#f57f6c",
           "$type": "color",
           "comment": "Used for invalid form control (input, textarea) border.",
           "filePath": "src/tokens/control.tokens.json",
@@ -12154,7 +12242,7 @@
           "original": {
             "value": {
               "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.300}"
             },
             "$type": "color",
             "comment": "Used for invalid form control (input, textarea) border."
@@ -12247,16 +12335,13 @@
     "text": {
       "color": {
         "error": {
-          "value": "#ec5941",
+          "value": "#f57f6c",
           "$type": "color",
           "comment": "Used for the helper text when the input is invalid.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
-            "value": {
-              "default": "{color.red.500}",
-              "dark": "{color.red.400}"
-            },
+            "value": "{text.color.danger}",
             "$type": "color",
             "comment": "Used for the helper text when the input is invalid."
           },
@@ -12270,16 +12355,13 @@
           ]
         },
         "valid": {
-          "value": "#2da160",
+          "value": "#52b87a",
           "$type": "color",
           "comment": "Used for the helper text when the input is valid.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
-            "value": {
-              "default": "{color.green.500}",
-              "dark": "{color.green.400}"
-            },
+            "value": "{text.color.success}",
             "$type": "color",
             "comment": "Used for the helper text when the input is valid."
           },
@@ -12296,16 +12378,13 @@
     },
     "placeholder": {
       "color": {
-        "value": "#737278",
+        "value": "#89888d",
         "$type": "color",
         "comment": "Used for placeholder text within inputs.",
         "filePath": "src/tokens/control.tokens.json",
         "isSource": true,
         "original": {
-          "value": {
-            "default": "{color.neutral.400}",
-            "dark": "{color.neutral.500}"
-          },
+          "value": "{text.color.disabled}",
           "$type": "color",
           "comment": "Used for placeholder text within inputs."
         },
@@ -12321,7 +12400,7 @@
     "indicator": {
       "color": {
         "selected": {
-          "value": "#28272d",
+          "value": "#18171d",
           "$type": "color",
           "comment": "Used for checkbox and radio button state indicators.",
           "filePath": "src/tokens/control.tokens.json",
@@ -12329,7 +12408,7 @@
           "original": {
             "value": {
               "default": "{color.neutral.0}",
-              "dark": "{color.neutral.900}"
+              "dark": "{color.neutral.950}"
             },
             "$type": "color",
             "comment": "Used for checkbox and radio button state indicators."