@gitlab/ui 123.10.0 → 123.11.0

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

@@ -1123,6 +1123,7 @@ $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus;
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -1121,6 +1121,7 @@ $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus;
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -744,6 +744,7 @@ $gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-ch
 $gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
 $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
 $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
+$gl-token-border-radius: var(--gl-token-border-radius);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $data-viz-green-50: var(--data-viz-green-50);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.10.0",
+  "version": "123.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -101,10 +101,10 @@
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
-    "@gitlab/svgs": "3.147.0",
+    "@gitlab/svgs": "3.148.0",
     "@jest/test-sequencer": "30.2.0",
     "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
@@ -136,7 +136,7 @@
     "cypress": "14.5.4",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
-    "emoji-regex": "^10.5.0",
+    "emoji-regex": "^10.6.0",
     "esbuild": "^0.25.10",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",

package/src/components/base/filtered_search/filtered_search_token.scss

@@ -47,9 +47,9 @@
 
   &.gl-filtered-search-token-data {
     @apply gl-h-6;
-    @apply gl-rounded-tr-small;
-    @apply gl-rounded-br-small;
     background-color: var(--gl-filtered-search-token-data-background-color-default);
+    border-top-right-radius: var(--gl-token-border-radius);
+    border-bottom-right-radius: var(--gl-token-border-radius);
 
     .gl-filtered-search-token-data-content {
       @apply gl-inline-flex;

package/src/components/base/token/token.scss

@@ -1,11 +1,11 @@
 .gl-token {
   color: var(--gl-token-foreground-color);
   background-color: var(--gl-token-background-color);
-  @apply gl-rounded-sm;
   @apply gl-pl-3;
   @apply gl-inline-flex;
   @apply gl-flex-col;
   @apply gl-justify-center;
+  border-radius: var(--gl-token-border-radius);
 
   &.gl-token-view-only {
     @apply gl-py-2;

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -193,7 +193,7 @@ export default {
 <template>
   <div
     :id="panelId"
-    class="gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-white gl-p-5"
+    class="gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-default gl-p-5"
     :class="containerClasses"
   >
     <div class="gl-flex gl-h-full gl-flex-col">

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

@@ -1123,6 +1123,7 @@
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */

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

@@ -1125,6 +1125,7 @@
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */

package/src/tokens/build/figma/contextual.tokens.json

@@ -5881,6 +5881,18 @@
     }
   },
   "token": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.default}",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
     "foreground": {
       "color": {
         "$value": "{text.color.default}",

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

@@ -830,6 +830,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#9dc7f1';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#428fdc';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d';
 export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168';
+export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef';
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f';
 export const DATA_VIZ_GREEN_50 = '#133a03';

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

@@ -830,6 +830,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#2f68b4';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#2f5ca0';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef';
 export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#a4a3a8';
+export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f';
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde';
 export const DATA_VIZ_GREEN_50 = '#ddfab7';

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

@@ -23559,6 +23559,39 @@
     }
   },
   "token": {
+    "border": {
+      "radius": {
+        "key": "{token.border.radius}",
+        "$value": "0.25rem",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.default}",
+          "$type": "dimension",
+          "$description": "Used for token border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{token.border.radius}"
+        },
+        "name": "TOKEN_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "token",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "foreground": {
       "color": {
         "key": "{token.foreground.color}",

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

@@ -23559,6 +23559,39 @@
     }
   },
   "token": {
+    "border": {
+      "radius": {
+        "key": "{token.border.radius}",
+        "$value": "0.25rem",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.default}",
+          "$type": "dimension",
+          "$description": "Used for token border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{token.border.radius}"
+        },
+        "name": "TOKEN_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "token",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "foreground": {
       "color": {
         "key": "{token.foreground.color}",

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

@@ -1123,6 +1123,7 @@ $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus;
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

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

@@ -1121,6 +1121,7 @@ $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus;
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

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

@@ -744,6 +744,7 @@ $gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-ch
 $gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
 $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
 $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
+$gl-token-border-radius: var(--gl-token-border-radius);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $data-viz-green-50: var(--data-viz-green-50);

package/src/tokens/contextual/token.tokens.json

@@ -1,5 +1,17 @@
 {
   "token": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.default}",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
     "foreground": {
       "color": {
         "$value": "{text.color.default}",