@gitlab/ui 80.13.1 → 80.14.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [80.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.2...v80.14.0) (2024-05-24)
+
+
+### Features
+
+* **DesignTokens:** add background design tokens ([c98ff85](https://gitlab.com/gitlab-org/gitlab-ui/commit/c98ff85d8f022677677757412bc3c0f322bc85e6))
+* **Tailwind:** add background design tokens to tailwind classes ([c78d656](https://gitlab.com/gitlab-org/gitlab-ui/commit/c78d656fbc565fa238f24b2dd57c74d82eb830cd))
+
+## [80.13.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.1...v80.13.2) (2024-05-24)
+
+
+### Bug Fixes
+
+* **GlExperimentBadge:** Update language of experiment badges ([82a3335](https://gitlab.com/gitlab-org/gitlab-ui/commit/82a33353c122ac6f269856f4c7f1efe0b8b58f50))
+
 ## [80.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.0...v80.13.1) (2024-05-24)
 
 

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -9,15 +9,15 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an Experiment?",
-    POPOVER_CONTENT: "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
-    POPOVER_BULLETS: ['May be unstable', 'Has no support and might not be documented', 'Can be removed at any time']
+    POPOVER_TITLE: "What's an experiment?",
+    POPOVER_CONTENT: 'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.\nExperiments: %{bullets}',
+    POPOVER_BULLETS: ['Might be unstable or cause data loss.', 'Are not supported and might not be documented.', 'Could be changed or removed at any time.', 'Are subject to the GitLab Testing Agreement.']
   },
   beta: {
     BADGE: 'Beta',
-    POPOVER_TITLE: "What's a Beta?",
-    POPOVER_CONTENT: "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
-    POPOVER_BULLETS: ['May be unstable', 'Should not cause data loss', 'Is supported by a commercially reasonable effort', 'Is complete or near completion']
+    POPOVER_TITLE: "What's a beta?",
+    POPOVER_CONTENT: "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.\nBeta features: %{bullets}",
+    POPOVER_BULLETS: ['Have a low risk of data loss, but might still be unstable.', 'Are supported on a commercially-reasonable effort basis.', 'Have a near complete user experience.', 'Are subject to the GitLab Testing Agreement.']
   }
 };
 var script = {

package/dist/tokens/build/js/tokens.dark.js

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
+const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
+const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
+const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
 const GL_COLOR_BLUE_50 = '#e9f3fc';
 const GL_COLOR_BLUE_100 = '#cbe2f9';
 const GL_COLOR_BLUE_200 = '#9dc7f1';
@@ -314,4 +318,4 @@ const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, c
 const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
 const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
 
-export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };
+export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };

package/dist/tokens/build/js/tokens.js

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
+const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
+const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
+const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
 const GL_COLOR_BLUE_50 = '#e9f3fc';
 const GL_COLOR_BLUE_100 = '#cbe2f9';
 const GL_COLOR_BLUE_200 = '#9dc7f1';
@@ -314,4 +318,4 @@ const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, c
 const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
 const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
 
-export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };
+export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };

package/dist/tokens/css/tokens.css

@@ -314,4 +314,8 @@
   --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-600); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-800); /* Used for the default text color. */
+  --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
+  --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
+  --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
+  --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
 }

package/dist/tokens/css/tokens.dark.css

@@ -314,4 +314,8 @@
   --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */
+  --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
+  --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
+  --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
+  --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
 }

package/dist/tokens/js/tokens.dark.js

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
+export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
+export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
+export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
 export const GL_COLOR_BLUE_50 = '#e9f3fc';
 export const GL_COLOR_BLUE_100 = '#cbe2f9';
 export const GL_COLOR_BLUE_200 = '#9dc7f1';

package/dist/tokens/js/tokens.js

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
+export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
+export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
+export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
 export const GL_COLOR_BLUE_50 = '#e9f3fc';
 export const GL_COLOR_BLUE_100 = '#cbe2f9';
 export const GL_COLOR_BLUE_200 = '#9dc7f1';

package/dist/tokens/json/tokens.dark.json

@@ -1,4 +1,96 @@
 {
+  "background": {
+    "color": {
+      "default": {
+        "value": "#1f1e24",
+        "$type": "color",
+        "comment": "Used for the default background color.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "comment": "Used for the default background color."
+        },
+        "name": "BACKGROUND_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used to slightly differentiate the background from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to slightly differentiate the background from the default."
+        },
+        "name": "BACKGROUND_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#434248",
+        "$type": "color",
+        "comment": "Used to make the background easily stand out from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used to make the background easily stand out from the default."
+        },
+        "name": "BACKGROUND_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "strong"
+        ]
+      },
+      "disabled": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used to identify a disabled section.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to identify a disabled section."
+        },
+        "name": "BACKGROUND_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "disabled"
+        ]
+      }
+    }
+  },
   "color": {
     "blue": {
       "50": {

package/dist/tokens/json/tokens.json

@@ -1,4 +1,96 @@
 {
+  "background": {
+    "color": {
+      "default": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the default background color.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "comment": "Used for the default background color."
+        },
+        "name": "BACKGROUND_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#fbfafd",
+        "$type": "color",
+        "comment": "Used to slightly differentiate the background from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to slightly differentiate the background from the default."
+        },
+        "name": "BACKGROUND_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used to make the background easily stand out from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used to make the background easily stand out from the default."
+        },
+        "name": "BACKGROUND_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "strong"
+        ]
+      },
+      "disabled": {
+        "value": "#fbfafd",
+        "$type": "color",
+        "comment": "Used to identify a disabled section.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to identify a disabled section."
+        },
+        "name": "BACKGROUND_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "disabled"
+        ]
+      }
+    }
+  },
   "color": {
     "blue": {
       "50": {

package/dist/tokens/scss/_tokens.dark.scss

@@ -312,3 +312,7 @@ $gl-text-color-heading: $gl-color-neutral-0 !default; // Used for headings level
 $gl-text-color-strong: $gl-color-neutral-0 !default; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-200 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-50 !default; // Used for the default text color.
+$gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
+$gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
+$gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
+$gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.

package/dist/tokens/scss/_tokens.scss

@@ -312,3 +312,7 @@ $gl-text-color-heading: $gl-color-neutral-950 !default; // Used for headings lev
 $gl-text-color-strong: $gl-color-neutral-950 !default; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-600 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-800 !default; // Used for the default text color.
+$gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
+$gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
+$gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
+$gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+$gl-background-color-default: var(--gl-background-color-default);
+$gl-background-color-subtle: var(--gl-background-color-subtle);
+$gl-background-color-strong: var(--gl-background-color-strong);
+$gl-background-color-disabled: var(--gl-background-color-disabled);
 $gl-color-blue-50: var(--gl-color-blue-50);
 $gl-color-blue-100: var(--gl-color-blue-100);
 $gl-color-blue-200: var(--gl-color-blue-200);

package/dist/tokens/tailwind/tokens.cjs

@@ -214,6 +214,16 @@ const textColors = {
   disabled:
     'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
+const backgroundColors = {
+  default:
+    'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
+  subtle:
+    'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
+  strong:
+    'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
+  disabled:
+    'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+};
 
 const colors = {
   transparent: 'transparent',
@@ -224,6 +234,11 @@ const colors = {
   ...dataVizColors,
 };
 
+const backgroundColor = {
+  ...colors,
+  ...backgroundColors,
+};
+
 const textColor = {
   ...colors,
   ...textColors,
@@ -234,5 +249,6 @@ const textColor = {
 
 module.exports = {
   colors,
+  backgroundColor,
   textColor,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.13.1",
+  "version": "80.14.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,7 +18,10 @@
     "src",
     "dist",
     "translations.json",
-    "tailwind.defaults.js"
+    "tailwind.defaults.js",
+    "!*.stories.js",
+    "!*.snap",
+    "!*.spec.{js,scss}"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -31,16 +34,18 @@
     "clean": "rm -r dist storybook src/scss/utilities.scss",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
     "cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
-    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities",
-    "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
+    "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook:prepare": "run-s copy-fonts build-tokens generate-utilities",
+    "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
+    "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
+    "storybook:run": "npx http-server -bgs -p 9001 ./storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
     "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
-    "test:integration:server": "NODE_ENV=test server-test http://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
+    "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -48,11 +53,10 @@
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
-    "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
-    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
-    "prettier": "prettier --check '**/*.{js,vue}'",
-    "prettier:fix": "prettier --write '**/*.{js,vue}'",
+    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
+    "prettier": "prettier --check '**/*.{js,ts,vue}'",
+    "prettier:fix": "prettier --write '**/*.{js,ts,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "preeslint": "yarn generate-utilities",
     "eslint:fix": "yarn eslint --fix",

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -9,25 +9,26 @@ import { badgeTypes, badgeTypeValidator } from './constants';
 export const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an Experiment?",
+    POPOVER_TITLE: "What's an experiment?",
     POPOVER_CONTENT:
-      "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+      'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.\nExperiments: %{bullets}',
     POPOVER_BULLETS: [
-      'May be unstable',
-      'Has no support and might not be documented',
-      'Can be removed at any time',
+      'Might be unstable or cause data loss.',
+      'Are not supported and might not be documented.',
+      'Could be changed or removed at any time.',
+      'Are subject to the GitLab Testing Agreement.',
     ],
   },
   beta: {
     BADGE: 'Beta',
-    POPOVER_TITLE: "What's a Beta?",
+    POPOVER_TITLE: "What's a beta?",
     POPOVER_CONTENT:
-      "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
+      "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.\nBeta features: %{bullets}",
     POPOVER_BULLETS: [
-      'May be unstable',
-      'Should not cause data loss',
-      'Is supported by a commercially reasonable effort',
-      'Is complete or near completion',
+      'Have a low risk of data loss, but might still be unstable.',
+      'Are supported on a commercially-reasonable effort basis.',
+      'Have a near complete user experience.',
+      'Are subject to the GitLab Testing Agreement.',
     ],
   },
 };

package/src/tokens/background.tokens.json

@@ -0,0 +1,38 @@
+{
+  "background": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "{color.neutral.0}",
+          "dark": "{color.neutral.950}"
+        },
+        "$type": "color",
+        "$description": "Used for the default background color."
+      },
+      "subtle": {
+        "$value": {
+          "default": "{color.neutral.10}",
+          "dark": "{color.neutral.900}"
+        },
+        "$type": "color",
+        "$description": "Used to slightly differentiate the background from the default."
+      },
+      "strong": {
+        "$value": {
+          "default": "{color.neutral.50}",
+          "dark": "{color.neutral.800}"
+        },
+        "$type": "color",
+        "$description": "Used to make the background easily stand out from the default."
+      },
+      "disabled": {
+        "$value": {
+          "default": "{color.neutral.10}",
+          "dark": "{color.neutral.900}"
+        },
+        "$type": "color",
+        "$description": "Used to identify a disabled section."
+      }
+    }
+  }
+}

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

@@ -314,4 +314,8 @@
   --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-600); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-800); /* Used for the default text color. */
+  --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
+  --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
+  --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
+  --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
 }

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

@@ -314,4 +314,8 @@
   --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */
+  --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
+  --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
+  --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
+  --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
 }

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

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
+export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
+export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
+export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
 export const GL_COLOR_BLUE_50 = '#e9f3fc';
 export const GL_COLOR_BLUE_100 = '#cbe2f9';
 export const GL_COLOR_BLUE_200 = '#9dc7f1';

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

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
+export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
+export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
+export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
 export const GL_COLOR_BLUE_50 = '#e9f3fc';
 export const GL_COLOR_BLUE_100 = '#cbe2f9';
 export const GL_COLOR_BLUE_200 = '#9dc7f1';