@gitlab/ui 126.0.2 → 126.1.0

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

@@ -21412,6 +21412,41 @@
       }
     }
   },
+  "drawer": {
+    "border": {
+      "radius": {
+        "key": "{drawer.border.radius}",
+        "$value": "1rem",
+        "$type": "dimension",
+        "$description": "Used for drawer border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/contextual/drawer.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.2xl}",
+          "$type": "dimension",
+          "$description": "Used for drawer border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{drawer.border.radius}"
+        },
+        "name": "DRAWER_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "drawer",
+          "border",
+          "radius"
+        ]
+      }
+    }
+  },
   "dropdown": {
     "background": {
       "color": {
@@ -24240,7 +24275,7 @@
     "border": {
       "radius": {
         "key": "{modal.border.radius}",
-        "$value": "0.5rem",
+        "$value": "1rem",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {
@@ -24251,7 +24286,7 @@
         "filePath": "src/tokens/contextual/modal.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.lg}",
+          "$value": "{border.radius.2xl}",
           "$type": "dimension",
           "$description": "Used for modal border radius.",
           "$extensions": {

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

@@ -1157,6 +1157,7 @@ $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover;
 $gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
+$gl-drawer-border-radius: $gl-border-radius-2xl; // Used for drawer border radius.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
 $gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
@@ -1169,7 +1170,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
-$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
+$gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.

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

@@ -1150,6 +1150,7 @@ $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover;
 $gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
+$gl-drawer-border-radius: $gl-border-radius-2xl; // Used for drawer border radius.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
 $gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
@@ -1162,7 +1163,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
-$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
+$gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.

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

@@ -663,6 +663,7 @@ $gl-chart-zoom-filler-color: var(--gl-chart-zoom-filler-color);
 $gl-chart-zoom-handle-color: var(--gl-chart-zoom-handle-color);
 $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
+$gl-drawer-border-radius: var(--gl-drawer-border-radius);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);
 $gl-dropdown-border-color: var(--gl-dropdown-border-color);
 $gl-dropdown-border-radius: var(--gl-dropdown-border-radius);

package/src/tokens/contextual/drawer.tokens.json

@@ -0,0 +1,16 @@
+{
+  "drawer": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.2xl}",
+        "$type": "dimension",
+        "$description": "Used for drawer border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    }
+  }
+}

package/src/tokens/contextual/modal.tokens.json

@@ -2,7 +2,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.lg}",
+        "$value": "{border.radius.2xl}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {