@gitlab/ui 87.5.1 → 87.6.1

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

@@ -2,9 +2,9 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-tertiary: #737278; // Use text.color.disabled instead
-$gl-text-secondary: #89888d; // Use text.color.subtle instead
-$gl-text-primary: #ececef; // Use text.color.default instead
+$gl-text-tertiary: #737278; // Use text.color.disabled instead.
+$gl-text-secondary: #89888d; // Use text.color.subtle instead.
+$gl-text-primary: #ececef; // Use text.color.default instead.
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -15,30 +15,30 @@ $gl-line-height-24: 1.5rem;
 $gl-line-height-20: 1.25rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-12: 0.75rem;
-$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
-$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
-$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
-$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
-$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
-$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
-$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
-$t-gray-a-08: rgba(05, 05, 06, 0.08) !default;
-$t-gray-a-06: rgba(05, 05, 06, 0.06) !default;
-$t-gray-a-04: rgba(05, 05, 06, 0.04) !default;
-$t-gray-a-02: rgba(05, 05, 06, 0.02) !default;
-$t-gray-a-24: rgba(05, 05, 06, 0.24) !default;
-$t-gray-a-16: rgba(05, 05, 06, 0.16) !default;
-$brand-gray-05: #2b2838 !default;
-$brand-gray-04: #45424d !default;
-$brand-gray-03: #74717a !default;
-$brand-gray-02: #a2a1a6 !default;
-$brand-gray-01: #d1d0d3 !default;
-$brand-purple-02: #7759c2 !default;
-$brand-purple-01: #a989f5 !default;
-$brand-orange-03: #e24329 !default;
-$brand-orange-02: #fc6d26 !default;
-$brand-orange-01: #fca326 !default;
-$brand-charcoal: #171321 !default;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 instead.
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
+$t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
+$t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
+$t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
+$t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
+$t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
+$t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
+$brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
+$brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
+$brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
+$brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
+$brand-gray-01: #d1d0d3 !default; // Use color.brand-gray.01 instead.
+$brand-purple-02: #7759c2 !default; // Use color.purple.02p instead.
+$brand-purple-01: #a989f5 !default; // Use color.purple.01p instead.
+$brand-orange-03: #e24329 !default; // Use color.brand-orange.03p instead.
+$brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.
+$brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
+$brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
 $red-950: #fff4f3 !default;
 $red-900: #fcf1ef !default;
 $red-800: #fdd4cd !default;
@@ -510,16 +510,21 @@ $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highes
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
 $gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
-$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for an icon associated with danger or critical feedback.
-$gl-feedback-danger-background-color: $gl-color-red-900; // Used for a background associated with danger or critical feedback.
-$gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for an icon associated with warning feedback or confidential content.
-$gl-feedback-warning-background-color: $gl-color-orange-900; // Used for a background associated with warning feedback or to let a user know about confidential content.
-$gl-feedback-success-icon-color: $gl-color-green-300; // Used for an icon associated with successful feedback or a new section.
-$gl-feedback-success-background-color: $gl-color-green-900; // Used for a background associated with successful feedback or a new section resulting from a user action.
-$gl-feedback-info-icon-color: $gl-color-blue-300; // Used for an icon associated with informational feedback.
-$gl-feedback-info-background-color: $gl-color-blue-900; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-$gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for an icon associated with a neutral feedback section.
-$gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for a background associated with neutral feedback.
+$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-text-color: $gl-color-red-200; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-background-color: $gl-color-red-900; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-text-color: $gl-color-orange-200; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-background-color: $gl-color-orange-900; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-success-icon-color: $gl-color-green-300; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-900; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-link-color-strong: $gl-color-blue-700; // Used for a link on a strong feedback background.
 $gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.

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

@@ -2,9 +2,9 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-tertiary: #89888d; // Use text.color.disabled instead
-$gl-text-secondary: #737278; // Use text.color.subtle instead
-$gl-text-primary: #28272d; // Use text.color.default instead
+$gl-text-tertiary: #89888d; // Use text.color.disabled instead.
+$gl-text-secondary: #737278; // Use text.color.subtle instead.
+$gl-text-primary: #28272d; // Use text.color.default instead.
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -15,30 +15,30 @@ $gl-line-height-24: 1.5rem;
 $gl-line-height-20: 1.25rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-12: 0.75rem;
-$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
-$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
-$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
-$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
-$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
-$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
-$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
-$t-gray-a-08: rgba(05, 05, 06, 0.08) !default;
-$t-gray-a-06: rgba(05, 05, 06, 0.06) !default;
-$t-gray-a-04: rgba(05, 05, 06, 0.04) !default;
-$t-gray-a-02: rgba(05, 05, 06, 0.02) !default;
-$t-gray-a-24: rgba(05, 05, 06, 0.24) !default;
-$t-gray-a-16: rgba(05, 05, 06, 0.16) !default;
-$brand-gray-05: #2b2838 !default;
-$brand-gray-04: #45424d !default;
-$brand-gray-03: #74717a !default;
-$brand-gray-02: #a2a1a6 !default;
-$brand-gray-01: #d1d0d3 !default;
-$brand-purple-02: #7759c2 !default;
-$brand-purple-01: #a989f5 !default;
-$brand-orange-03: #e24329 !default;
-$brand-orange-02: #fc6d26 !default;
-$brand-orange-01: #fca326 !default;
-$brand-charcoal: #171321 !default;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 instead.
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
+$t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
+$t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
+$t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
+$t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
+$t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
+$t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
+$brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
+$brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
+$brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
+$brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
+$brand-gray-01: #d1d0d3 !default; // Use color.brand-gray.01 instead.
+$brand-purple-02: #7759c2 !default; // Use color.purple.02p instead.
+$brand-purple-01: #a989f5 !default; // Use color.purple.01p instead.
+$brand-orange-03: #e24329 !default; // Use color.brand-orange.03p instead.
+$brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.
+$brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
+$brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
 $red-950: #4d0a00 !default;
 $red-900: #660e00 !default;
 $red-800: #8d1300 !default;
@@ -510,16 +510,21 @@ $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highe
 $gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
 $gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
-$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for an icon associated with danger or critical feedback.
-$gl-feedback-danger-background-color: $gl-color-red-50; // Used for a background associated with danger or critical feedback.
-$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for an icon associated with warning feedback or confidential content.
-$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for a background associated with warning feedback or to let a user know about confidential content.
-$gl-feedback-success-icon-color: $gl-color-green-600; // Used for an icon associated with successful feedback or a new section.
-$gl-feedback-success-background-color: $gl-color-green-50; // Used for a background associated with successful feedback or a new section resulting from a user action.
-$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for an icon associated with informational feedback.
-$gl-feedback-info-background-color: $gl-color-blue-50; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for an icon associated with a neutral feedback section.
-$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for a background associated with neutral feedback.
+$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-background-color: $gl-color-red-50; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-text-color: $gl-color-orange-700; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-success-icon-color: $gl-color-green-600; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-text-color: $gl-color-green-700; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-background-color: $gl-color-green-50; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-text-color: $gl-color-blue-700; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-50; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a strong feedback background.
 $gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -276,6 +276,56 @@ $data-viz-orange-700: var(--data-viz-orange-700);
 $data-viz-orange-800: var(--data-viz-orange-800);
 $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-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);
+$gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
+$gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
+$gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
+$gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
+$gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
+$gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
+$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);
+$gl-label-light-button-icon-color-default: var(--gl-label-light-button-icon-color-default);
+$gl-label-dark-text-color: var(--gl-label-dark-text-color);
+$gl-label-dark-button-background-color-default: var(--gl-label-dark-button-background-color-default);
+$gl-label-dark-button-background-color-hover: var(--gl-label-dark-button-background-color-hover);
+$gl-label-dark-button-icon-color-default: var(--gl-label-dark-button-icon-color-default);
+$gl-label-scoped-text-color: var(--gl-label-scoped-text-color);
+$gl-label-scoped-button-background-color-hover: var(--gl-label-scoped-button-background-color-hover);
+$gl-label-scoped-button-icon-color-default: var(--gl-label-scoped-button-icon-color-default);
+$gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-color-hover);
+$gl-popover-background-color: var(--gl-popover-background-color);
+$gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
+$gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
+$gl-spinner-track-color-default: var(--gl-spinner-track-color-default);
+$gl-spinner-track-color-light: var(--gl-spinner-track-color-light);
+$gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
+$gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
+$gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
+$gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
+$gl-control-background-color-default: var(--gl-control-background-color-default);
+$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
+$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
+$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-border-color-default: var(--gl-control-border-color-default);
+$gl-control-border-color-hover: var(--gl-control-border-color-hover);
+$gl-control-border-color-focus: var(--gl-control-border-color-focus);
+$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
+$gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
+$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
+$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
+$gl-control-text-color-error: var(--gl-control-text-color-error);
+$gl-control-text-color-valid: var(--gl-control-text-color-valid);
+$gl-control-placeholder-color: var(--gl-control-placeholder-color);
+$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
+$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $theme-indigo-10: var(--theme-indigo-10);
 $theme-indigo-50: var(--theme-indigo-50);
 $theme-indigo-100: var(--theme-indigo-100);
@@ -441,69 +491,24 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
-$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-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);
-$gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
-$gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
-$gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
-$gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
-$gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
-$gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
-$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);
-$gl-label-light-button-icon-color-default: var(--gl-label-light-button-icon-color-default);
-$gl-label-dark-text-color: var(--gl-label-dark-text-color);
-$gl-label-dark-button-background-color-default: var(--gl-label-dark-button-background-color-default);
-$gl-label-dark-button-background-color-hover: var(--gl-label-dark-button-background-color-hover);
-$gl-label-dark-button-icon-color-default: var(--gl-label-dark-button-icon-color-default);
-$gl-label-scoped-text-color: var(--gl-label-scoped-text-color);
-$gl-label-scoped-button-background-color-hover: var(--gl-label-scoped-button-background-color-hover);
-$gl-label-scoped-button-icon-color-default: var(--gl-label-scoped-button-icon-color-default);
-$gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-color-hover);
-$gl-popover-background-color: var(--gl-popover-background-color);
-$gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
-$gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
-$gl-spinner-track-color-default: var(--gl-spinner-track-color-default);
-$gl-spinner-track-color-light: var(--gl-spinner-track-color-light);
-$gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
-$gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
-$gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
-$gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
-$gl-control-background-color-default: var(--gl-control-background-color-default);
-$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
-$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
-$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
-$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
-$gl-control-border-color-default: var(--gl-control-border-color-default);
-$gl-control-border-color-hover: var(--gl-control-border-color-hover);
-$gl-control-border-color-focus: var(--gl-control-border-color-focus);
-$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
-$gl-control-border-color-error: var(--gl-control-border-color-error);
-$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
-$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
-$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
-$gl-control-text-color-error: var(--gl-control-text-color-error);
-$gl-control-text-color-valid: var(--gl-control-text-color-valid);
-$gl-control-placeholder-color: var(--gl-control-placeholder-color);
-$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
-$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
 $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
 $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
 $gl-feedback-link-color-strong: var(--gl-feedback-link-color-strong);
 $gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
+$gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color);
 $gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color);
 $gl-feedback-info-background-color: var(--gl-feedback-info-background-color);
+$gl-feedback-info-text-color: var(--gl-feedback-info-text-color);
 $gl-feedback-info-icon-color: var(--gl-feedback-info-icon-color);
 $gl-feedback-success-background-color: var(--gl-feedback-success-background-color);
+$gl-feedback-success-text-color: var(--gl-feedback-success-text-color);
 $gl-feedback-success-icon-color: var(--gl-feedback-success-icon-color);
 $gl-feedback-warning-background-color: var(--gl-feedback-warning-background-color);
+$gl-feedback-warning-text-color: var(--gl-feedback-warning-text-color);
 $gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
 $gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
+$gl-feedback-danger-text-color: var(--gl-feedback-danger-text-color);
 $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
 $gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
 $gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);