@gitlab/ui 89.1.0 → 89.3.0

package/src/components/base/toggle/toggle.scss

@@ -18,6 +18,10 @@
 *  </button>
 */
 
+$toggle-width: 4.5 * $grid-size;
+$toggle-translate-width: 2 * $grid-size;
+$toggle-height: 2.5 * $grid-size;
+
 .gl-toggle-wrapper {
   @include gl-line-height-normal;
   @include gl-font-weight-normal;
@@ -83,10 +87,9 @@
   @apply gl-border-0;
   @include gl-cursor-pointer;
   @include gl-bg-gray-600;
-  @include gl-p-1;
   position: relative;
-  @include gl-w-9;
-  @include gl-h-6;
+  width: $toggle-width;
+  height: $toggle-height;
   @include gl-outline-none;
   user-select: none;
   @include gl-rounded-pill;
@@ -126,7 +129,7 @@
     top: $gl-spacing-scale-1;
     @include gl-transition-medium;
     @include gl-justify-content-center;
-    @include gl-p-2;
+    @include gl-p-1;
 
     > svg {
       @include gl-w-4;
@@ -147,7 +150,7 @@
     }
 
     .toggle-icon {
-      transform: translateX($gl-spacing-scale-6);
+      transform: translateX($toggle-translate-width);
 
       > svg {
         @include gl-fill-blue-500;

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. */
@@ -573,9 +574,9 @@
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-300); /* Used to compliment the info banner. */
-  --gl-badge-tier-icon-color-active: var(--gl-color-purple-700); /* Used for the icon of a tier related badge in the active state. */
-  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-600); /* Used for the icon of a tier related badge in the hover state. */
-  --gl-badge-tier-icon-color-default: var(--gl-color-purple-500); /* Used for the icon of a tier related badge when static or the default state when linked. */
+  --gl-badge-tier-icon-color-active: var(--gl-color-purple-900); /* Used for the icon of a tier related badge in the active state. */
+  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-800); /* Used for the icon of a tier related badge in the hover state. */
+  --gl-badge-tier-icon-color-default: var(--gl-color-purple-700); /* Used for the icon of a tier related badge when static or the default state when linked. */
   --gl-badge-tier-text-color-active: var(--gl-color-purple-900); /* Used for the text of a tier related badge in the active state. */
   --gl-badge-tier-text-color-hover: var(--gl-color-purple-800); /* Used for the text of a tier related badge in the hover state. */
   --gl-badge-tier-text-color-default: var(--gl-color-purple-700); /* Used for the text of a tier related badge when static or the default state when linked. */
@@ -585,9 +586,9 @@
   --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a tier related badge when static or the default state when linked. */
   --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /* Used for the background of a tier related badge in the active state. */
   --gl-badge-tier-background-color-default: var(--gl-color-purple-100); /* Used for the background of a tier related badge when static or the default state when linked. */
-  --gl-badge-danger-icon-color-active: var(--gl-color-red-700); /* Used for the icon of a danger badge in the active state. */
-  --gl-badge-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger badge in the hover state. */
-  --gl-badge-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger badge when static or the default state when linked. */
+  --gl-badge-danger-icon-color-active: var(--gl-color-red-900); /* Used for the icon of a danger badge in the active state. */
+  --gl-badge-danger-icon-color-hover: var(--gl-color-red-800); /* Used for the icon of a danger badge in the hover state. */
+  --gl-badge-danger-icon-color-default: var(--gl-color-red-700); /* Used for the icon of a danger badge when static or the default state when linked. */
   --gl-badge-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger badge in the active state. */
   --gl-badge-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger badge in the hover state. */
   --gl-badge-danger-text-color-default: var(--gl-color-red-700); /* Used for the text of a danger badge when static or the default state when linked. */
@@ -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. */
@@ -573,90 +574,90 @@
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-600); /* Used to compliment the info banner. */
-  --gl-badge-tier-icon-color-active: var(--gl-color-purple-300); /* Used for the icon of a tier related badge in the active state. */
-  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-400); /* Used for the icon of a tier related badge in the hover state. */
-  --gl-badge-tier-icon-color-default: var(--gl-color-purple-500); /* Used for the icon of a tier related badge when static or the default state when linked. */
-  --gl-badge-tier-text-color-active: var(--gl-color-purple-100); /* Used for the text of a tier related badge in the active state. */
-  --gl-badge-tier-text-color-hover: var(--gl-color-purple-200); /* Used for the text of a tier related badge in the hover state. */
-  --gl-badge-tier-text-color-default: var(--gl-color-purple-300); /* Used for the text of a tier related badge when static or the default state when linked. */
+  --gl-badge-tier-icon-color-active: var(--gl-color-purple-950); /* Used for the icon of a tier related badge in the active state. */
+  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-950); /* Used for the icon of a tier related badge in the hover state. */
+  --gl-badge-tier-icon-color-default: var(--gl-color-purple-950); /* Used for the icon of a tier related badge when static or the default state when linked. */
+  --gl-badge-tier-text-color-active: var(--gl-color-purple-950); /* Used for the text of a tier related badge in the active state. */
+  --gl-badge-tier-text-color-hover: var(--gl-color-purple-950); /* Used for the text of a tier related badge in the hover state. */
+  --gl-badge-tier-text-color-default: var(--gl-color-purple-950); /* Used for the text of a tier related badge when static or the default state when linked. */
   --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the active state. */
   --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a tier related badge in the focus state. */
-  --gl-badge-tier-border-color-hover: var(--gl-color-purple-800); /* Used for the border of a tier related badge in the hover state. */
+  --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /* Used for the border of a tier related badge in the hover state. */
   --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a tier related badge when static or the default state when linked. */
-  --gl-badge-tier-background-color-active: var(--gl-color-purple-800); /* Used for the background of a tier related badge in the active state. */
-  --gl-badge-tier-background-color-default: var(--gl-color-purple-900); /* Used for the background of a tier related badge when static or the default state when linked. */
-  --gl-badge-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger badge in the active state. */
-  --gl-badge-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger badge in the hover state. */
-  --gl-badge-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger badge when static or the default state when linked. */
-  --gl-badge-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger badge in the active state. */
-  --gl-badge-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger badge in the hover state. */
-  --gl-badge-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger badge when static or the default state when linked. */
+  --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /* Used for the background of a tier related badge in the active state. */
+  --gl-badge-tier-background-color-default: var(--gl-color-purple-300); /* Used for the background of a tier related badge when static or the default state when linked. */
+  --gl-badge-danger-icon-color-active: var(--gl-color-red-950); /* Used for the icon of a danger badge in the active state. */
+  --gl-badge-danger-icon-color-hover: var(--gl-color-red-950); /* Used for the icon of a danger badge in the hover state. */
+  --gl-badge-danger-icon-color-default: var(--gl-color-red-950); /* Used for the icon of a danger badge when static or the default state when linked. */
+  --gl-badge-danger-text-color-active: var(--gl-color-red-950); /* Used for the text of a danger badge in the active state. */
+  --gl-badge-danger-text-color-hover: var(--gl-color-red-950); /* Used for the text of a danger badge in the hover state. */
+  --gl-badge-danger-text-color-default: var(--gl-color-red-950); /* Used for the text of a danger badge when static or the default state when linked. */
   --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the active state. */
   --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a danger badge in the focus state. */
-  --gl-badge-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger badge in the hover state. */
+  --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of a danger badge in the hover state. */
   --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger badge when static or the default state when linked. */
-  --gl-badge-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger badge in the active state. */
-  --gl-badge-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger badge when static or the default state when linked. */
-  --gl-badge-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning badge in the active state. */
-  --gl-badge-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning badge in the hover state. */
-  --gl-badge-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning badge when static or the default state when linked. */
-  --gl-badge-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning badge in the active state. */
-  --gl-badge-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning badge in the hover state. */
-  --gl-badge-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning badge when static or the default state when linked. */
+  --gl-badge-danger-background-color-active: var(--gl-color-red-200); /* Used for the background of a danger badge in the active state. */
+  --gl-badge-danger-background-color-default: var(--gl-color-red-300); /* Used for the background of a danger badge when static or the default state when linked. */
+  --gl-badge-warning-icon-color-active: var(--gl-color-orange-950); /* Used for the icon of a warning badge in the active state. */
+  --gl-badge-warning-icon-color-hover: var(--gl-color-orange-950); /* Used for the icon of a warning badge in the hover state. */
+  --gl-badge-warning-icon-color-default: var(--gl-color-orange-950); /* Used for the icon of a warning badge when static or the default state when linked. */
+  --gl-badge-warning-text-color-active: var(--gl-color-orange-950); /* Used for the text of a warning badge in the active state. */
+  --gl-badge-warning-text-color-hover: var(--gl-color-orange-950); /* Used for the text of a warning badge in the hover state. */
+  --gl-badge-warning-text-color-default: var(--gl-color-orange-950); /* Used for the text of a warning badge when static or the default state when linked. */
   --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the active state. */
   --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a warning badge in the focus state. */
-  --gl-badge-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning badge in the hover state. */
+  --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /* Used for the border of a warning badge in the hover state. */
   --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a warning badge when static or the default state when linked. */
-  --gl-badge-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning badge in the active state. */
-  --gl-badge-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning badge when static or the default state when linked. */
-  --gl-badge-success-icon-color-active: var(--gl-color-green-200); /* Used for the icon of a success badge in the active state. */
-  --gl-badge-success-icon-color-hover: var(--gl-color-green-300); /* Used for the icon of a success badge in the hover state. */
-  --gl-badge-success-icon-color-default: var(--gl-color-green-400); /* Used for the icon of a success badge when static or the default state when linked. */
-  --gl-badge-success-text-color-active: var(--gl-color-green-50); /* Used for the text of a success badge in the active state. */
-  --gl-badge-success-text-color-hover: var(--gl-color-green-100); /* Used for the text of a success badge in the hover state. */
-  --gl-badge-success-text-color-default: var(--gl-color-green-200); /* Used for the text of a success badge when static or the default state when linked. */
+  --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /* Used for the background of a warning badge in the active state. */
+  --gl-badge-warning-background-color-default: var(--gl-color-orange-300); /* Used for the background of a warning badge when static or the default state when linked. */
+  --gl-badge-success-icon-color-active: var(--gl-color-green-950); /* Used for the icon of a success badge in the active state. */
+  --gl-badge-success-icon-color-hover: var(--gl-color-green-950); /* Used for the icon of a success badge in the hover state. */
+  --gl-badge-success-icon-color-default: var(--gl-color-green-950); /* Used for the icon of a success badge when static or the default state when linked. */
+  --gl-badge-success-text-color-active: var(--gl-color-green-950); /* Used for the text of a success badge in the active state. */
+  --gl-badge-success-text-color-hover: var(--gl-color-green-950); /* Used for the text of a success badge in the hover state. */
+  --gl-badge-success-text-color-default: var(--gl-color-green-950); /* Used for the text of a success badge when static or the default state when linked. */
   --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a success badge in the active state. */
   --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a success badge in the focus state. */
-  --gl-badge-success-border-color-hover: var(--gl-color-green-700); /* Used for the border of a success badge in the hover state. */
+  --gl-badge-success-border-color-hover: var(--gl-color-green-200); /* Used for the border of a success badge in the hover state. */
   --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a success badge when static or the default state when linked. */
-  --gl-badge-success-background-color-active: var(--gl-color-green-700); /* Used for the background of a success badge in the active state. */
-  --gl-badge-success-background-color-default: var(--gl-color-green-800); /* Used for the background of a success badge when static or the default state when linked. */
-  --gl-badge-info-icon-color-active: var(--gl-color-blue-200); /* Used for the icon of an informational badge in the active state. */
-  --gl-badge-info-icon-color-hover: var(--gl-color-blue-300); /* Used for the icon of an informational badge in the hover state. */
-  --gl-badge-info-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of an informational badge when static or the default state when linked. */
-  --gl-badge-info-text-color-active: var(--gl-color-blue-50); /* Used for the text of an informational badge in the active state. */
-  --gl-badge-info-text-color-hover: var(--gl-color-blue-100); /* Used for the text of an informational badge in the hover state. */
-  --gl-badge-info-text-color-default: var(--gl-color-blue-200); /* Used for the text of an informational badge when static or the default state when linked. */
+  --gl-badge-success-background-color-active: var(--gl-color-green-200); /* Used for the background of a success badge in the active state. */
+  --gl-badge-success-background-color-default: var(--gl-color-green-300); /* Used for the background of a success badge when static or the default state when linked. */
+  --gl-badge-info-icon-color-active: var(--gl-color-blue-950); /* Used for the icon of an informational badge in the active state. */
+  --gl-badge-info-icon-color-hover: var(--gl-color-blue-950); /* Used for the icon of an informational badge in the hover state. */
+  --gl-badge-info-icon-color-default: var(--gl-color-blue-950); /* Used for the icon of an informational badge when static or the default state when linked. */
+  --gl-badge-info-text-color-active: var(--gl-color-blue-950); /* Used for the text of an informational badge in the active state. */
+  --gl-badge-info-text-color-hover: var(--gl-color-blue-950); /* Used for the text of an informational badge in the hover state. */
+  --gl-badge-info-text-color-default: var(--gl-color-blue-950); /* Used for the text of an informational badge when static or the default state when linked. */
   --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the active state. */
   --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of an informational badge in the focus state. */
-  --gl-badge-info-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an informational badge in the hover state. */
+  --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an informational badge in the hover state. */
   --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /* Used for the border of an informational badge when static or the default state when linked. */
-  --gl-badge-info-background-color-active: var(--gl-color-blue-700); /* Used for the background of an informational badge in the active state. */
-  --gl-badge-info-background-color-default: var(--gl-color-blue-800); /* Used for the background of an informational badge when static or the default state when linked. */
-  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a neutral badge in the active state. */
-  --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a neutral badge in the hover state. */
-  --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a neutral badge when static or the default state when linked. */
-  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral badge in the active state. */
-  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-100); /* Used for the text of a neutral badge in the hover state. */
-  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-200); /* Used for the text of a neutral badge when static or the default state when linked. */
+  --gl-badge-info-background-color-active: var(--gl-color-blue-200); /* Used for the background of an informational badge in the active state. */
+  --gl-badge-info-background-color-default: var(--gl-color-blue-300); /* Used for the background of an informational badge when static or the default state when linked. */
+  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-950); /* Used for the icon of a neutral badge in the active state. */
+  --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-950); /* Used for the icon of a neutral badge in the hover state. */
+  --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-950); /* Used for the icon of a neutral badge when static or the default state when linked. */
+  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-950); /* Used for the text of a neutral badge in the active state. */
+  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-950); /* Used for the text of a neutral badge in the hover state. */
+  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-950); /* Used for the text of a neutral badge when static or the default state when linked. */
   --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the active state. */
   --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a neutral badge in the focus state. */
-  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a neutral badge in the hover state. */
+  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a neutral badge in the hover state. */
   --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral badge when static or the default state when linked. */
-  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-700); /* Used for the background of a neutral badge in the active state. */
-  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-800); /* Used for the background of a neutral badge when static or the default state when linked. */
-  --gl-badge-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a muted badge in the active state. */
-  --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a muted badge in the hover state. */
-  --gl-badge-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a muted badge when static or the default state when linked. */
-  --gl-badge-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a muted badge in the active state. */
-  --gl-badge-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a muted badge in the hover state. */
-  --gl-badge-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a muted badge when static or the default state when linked. */
+  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /* Used for the background of a neutral badge in the active state. */
+  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-300); /* Used for the background of a neutral badge when static or the default state when linked. */
+  --gl-badge-muted-icon-color-active: var(--gl-color-neutral-950); /* Used for the icon of a muted badge in the active state. */
+  --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-950); /* Used for the icon of a muted badge in the hover state. */
+  --gl-badge-muted-icon-color-default: var(--gl-color-neutral-950); /* Used for the icon of a muted badge when static or the default state when linked. */
+  --gl-badge-muted-text-color-active: var(--gl-color-neutral-950); /* Used for the text of a muted badge in the active state. */
+  --gl-badge-muted-text-color-hover: var(--gl-color-neutral-950); /* Used for the text of a muted badge in the hover state. */
+  --gl-badge-muted-text-color-default: var(--gl-color-neutral-950); /* Used for the text of a muted badge when static or the default state when linked. */
   --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the active state. */
   --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /* Used for the border of a muted badge in the focus state. */
-  --gl-badge-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a muted badge in the hover state. */
+  --gl-badge-muted-border-color-hover: var(--gl-color-neutral-300); /* Used for the border of a muted badge in the hover state. */
   --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-badge-muted-background-color-active: var(--gl-color-neutral-300); /* Used for the background of a muted badge in the active state. */
+  --gl-badge-muted-background-color-default: var(--gl-color-neutral-400); /* Used for the background of a muted badge when static or the default state when linked. */
   --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. */
@@ -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. */