@gitlab/ui 86.3.1 → 86.4.1

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

@@ -510,6 +510,18 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral
 export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
+export const GL_LABEL_LIGHT_TEXT_COLOR = '#1f1e24'; // Used for the label text color on a light background color.
+export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
+export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#1f1e24'; // Used for the label remove button background on a light background color in the hover state.
+export const GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the label remove button icon on a light background color in the default state.
+export const GL_LABEL_DARK_TEXT_COLOR = '#fff'; // Used for the label text color on a dark background color.
+export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a dark background color in the default state.
+export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the label remove button background on a dark background color in the hover state.
+export const GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the label remove button icon on a dark background color in the default state.
+export const GL_LABEL_SCOPED_TEXT_COLOR = '#1f1e24'; // Used for the scoped label text color.
+export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#1f1e24'; // Used for the scoped label remove button background in the hover state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the scoped label remove button icon in the default state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the scoped label remove button icon in the hover state.
 export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.

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

@@ -11085,6 +11085,320 @@
       }
     }
   },
+  "label": {
+    "light": {
+      "text": {
+        "color": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for the label text color on a light background color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.950}",
+            "$type": "color",
+            "comment": "Used for the label text color on a light background color."
+          },
+          "name": "LABEL_LIGHT_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "light",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a light background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.alpha.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a light background color in the default state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a light background color in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.950}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a light background color in the hover state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the label remove button icon on a light background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.950}",
+                "$type": "color",
+                "comment": "Used for the label remove button icon on a light background color in the default state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "dark": {
+      "text": {
+        "color": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for the label text color on a dark background color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.0}",
+            "$type": "color",
+            "comment": "Used for the label text color on a dark background color."
+          },
+          "name": "LABEL_DARK_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "dark",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a dark background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.alpha.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a dark background color in the default state."
+              },
+              "name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a dark background color in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a dark background color in the hover state."
+              },
+              "name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the label remove button icon on a dark background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button icon on a dark background color in the default state."
+              },
+              "name": "LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "scoped": {
+      "text": {
+        "color": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for the scoped label text color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.950}",
+              "dark": "{color.neutral.0}"
+            },
+            "$type": "color",
+            "comment": "Used for the scoped label text color."
+          },
+          "name": "LABEL_SCOPED_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "scoped",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "hover": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button background in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.950}",
+                  "dark": "{color.neutral.0}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button background in the hover state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button icon in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.950}",
+                  "dark": "{color.neutral.0}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button icon in the default state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button icon in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.950}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button icon in the hover state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "icon",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "popover": {
     "background": {
       "color": {

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

@@ -11085,6 +11085,320 @@
       }
     }
   },
+  "label": {
+    "light": {
+      "text": {
+        "color": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for the label text color on a light background color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.950}",
+            "$type": "color",
+            "comment": "Used for the label text color on a light background color."
+          },
+          "name": "LABEL_LIGHT_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "light",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a light background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.alpha.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a light background color in the default state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a light background color in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.950}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a light background color in the hover state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the label remove button icon on a light background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.950}",
+                "$type": "color",
+                "comment": "Used for the label remove button icon on a light background color in the default state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "dark": {
+      "text": {
+        "color": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for the label text color on a dark background color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.0}",
+            "$type": "color",
+            "comment": "Used for the label text color on a dark background color."
+          },
+          "name": "LABEL_DARK_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "dark",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a dark background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.alpha.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a dark background color in the default state."
+              },
+              "name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a dark background color in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a dark background color in the hover state."
+              },
+              "name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the label remove button icon on a dark background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button icon on a dark background color in the default state."
+              },
+              "name": "LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "scoped": {
+      "text": {
+        "color": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for the scoped label text color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.950}",
+              "dark": "{color.neutral.0}"
+            },
+            "$type": "color",
+            "comment": "Used for the scoped label text color."
+          },
+          "name": "LABEL_SCOPED_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "scoped",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "hover": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button background in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.950}",
+                  "dark": "{color.neutral.0}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button background in the hover state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button icon in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.950}",
+                  "dark": "{color.neutral.0}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button icon in the default state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button icon in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.950}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button icon in the hover state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "icon",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "popover": {
     "background": {
       "color": {

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

@@ -536,6 +536,18 @@ $gl-control-background-color-default: $gl-color-neutral-900; // Used for form co
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
+$gl-label-scoped-button-icon-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button icon in the hover state.
+$gl-label-scoped-button-icon-color-default: $gl-color-neutral-0; // Used for the scoped label remove button icon in the default state.
+$gl-label-scoped-button-background-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button background in the hover state.
+$gl-label-scoped-text-color: $gl-color-neutral-0; // Used for the scoped label text color.
+$gl-label-dark-button-icon-color-default: $gl-color-neutral-0; // Used for the label remove button icon on a dark background color in the default state.
+$gl-label-dark-button-background-color-hover: $gl-color-neutral-0; // Used for the label remove button background on a dark background color in the hover state.
+$gl-label-dark-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a dark background color in the default state.
+$gl-label-dark-text-color: $gl-color-neutral-0; // Used for the label text color on a dark background color.
+$gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for the label remove button icon on a light background color in the default state.
+$gl-label-light-button-background-color-hover: $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: $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: $gl-color-neutral-950; // Used for the label text color on a light background color.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.