@gitlab/ui 80.13.2 → 80.14.1

package/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/tailwind.defaults.js

@@ -1,4 +1,4 @@
-const { colors, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
+const { colors, backgroundColor, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const gridSize = 0.5; // rem
 const spacing = {
@@ -48,6 +48,7 @@ module.exports = {
       xl: '1200px',
     },
     colors,
+    backgroundColor,
     spacing,
     fontSize: {
       xs: '0.625rem',