@gitlab/ui 123.10.1 → 123.11.0

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}",