@gitlab/ui 86.3.1 → 86.4.1

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

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

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

@@ -510,6 +510,18 @@ $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-backgroun
 $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);

package/src/tokens/contextual/label.tokens.json

@@ -0,0 +1,118 @@
+{
+  "label": {
+    "light": {
+      "text": {
+        "color": {
+          "$value": "{color.neutral.950}",
+          "$type": "color",
+          "$description": "Used for the label text color on a light background color."
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the label remove button background on a light background color in the default state."
+            },
+            "hover": {
+              "$value": "{color.neutral.950}",
+              "$type": "color",
+              "$description": "Used for the label remove button background on a light background color in the hover state."
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "$value": "{color.neutral.950}",
+              "$type": "color",
+              "$description": "Used for the label remove button icon on a light background color in the default state."
+            }
+          }
+        }
+      }
+    },
+    "dark": {
+      "text": {
+        "color": {
+          "$value": "{color.neutral.0}",
+          "$type": "color",
+          "$description": "Used for the label text color on a dark background color."
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the label remove button background on a dark background color in the default state."
+            },
+            "hover": {
+              "$value": "{color.neutral.0}",
+              "$type": "color",
+              "$description": "Used for the label remove button background on a dark background color in the hover state."
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "$value": "{color.neutral.0}",
+              "$type": "color",
+              "$description": "Used for the label remove button icon on a dark background color in the default state."
+            }
+          }
+        }
+      }
+    },
+    "scoped": {
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.950}",
+            "dark": "{color.neutral.0}"
+          },
+          "$type": "color",
+          "$description": "Used for the scoped label text color."
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "hover": {
+              "$value": {
+                "default": "{color.neutral.950}",
+                "dark": "{color.neutral.0}"
+              },
+              "$type": "color",
+              "$description": "Used for the scoped label remove button background in the hover state."
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "$value": {
+                "default": "{color.neutral.950}",
+                "dark": "{color.neutral.0}"
+              },
+              "$type": "color",
+              "$description": "Used for the scoped label remove button icon in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.neutral.0}",
+                "dark": "{color.neutral.950}"
+              },
+              "$type": "color",
+              "$description": "Used for the scoped label remove button icon in the hover state."
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/translations.js

@@ -6,7 +6,13 @@ export default {
   'GlKeysetPagination.navigationLabel': 'Pagination',
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',
+  'GlPagination.labelFirstPage': 'Go to first page',
+  'GlPagination.labelLastPage': 'Go to last page',
+  'GlPagination.labelNextPage': 'Go to next page',
   'GlPagination.labelPage': 'Go to page %{page}',
+  'GlPagination.labelPrevPage': 'Go to previous page',
+  'GlPagination.nextText': 'Next',
+  'GlPagination.prevText': 'Previous',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
   'GlSorting.sortAscending': 'Sort direction: ascending',