@gitlab/ui 126.0.1 → 126.1.0

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

@@ -585,9 +585,6 @@
   --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
   --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
   --gl-letter-spacing-heading: -0.01em;
-  --gl-text-primary: #28272d; /** Use text.color.default instead. */
-  --gl-text-secondary: #737278; /** Use text.color.subtle instead. */
-  --gl-text-tertiary: #89888d; /** Use text.color.disabled instead. */
   --gl-heading-3-letter-spacing: inherit;
   --gl-heading-4-letter-spacing: inherit;
   --gl-heading-5-letter-spacing: inherit;
@@ -1155,6 +1152,7 @@
   --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
+  --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-strong); /** Used for the border of a dropdown. */
   --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */
@@ -1167,7 +1165,7 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--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: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
-  --gl-modal-border-radius: var(--gl-border-radius-lg); /** Used for modal border radius. */
+  --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1222,6 +1220,9 @@
   --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */
   --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */
   --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */
+  --gl-text-primary: var(--gl-text-color-default); /** Use text.color.default instead. */
+  --gl-text-secondary: var(--gl-text-color-subtle); /** Use text.color.subtle instead. */
+  --gl-text-tertiary: var(--gl-text-color-disabled); /** Use text.color.disabled instead. */
   --gl-heading-1-font-weight: var(--gl-font-weight-heading);
   --gl-heading-1-margin-bottom: var(--gl-heading-default-margin-bottom);
   --gl-heading-1-color: var(--gl-text-color-heading);

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

@@ -596,9 +596,6 @@
   --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /** Used for an overlay that covers other content. */
   --gl-letter-spacing-heading: -0.01em;
-  --gl-text-primary: #ececef; /** Use text.color.default instead. */
-  --gl-text-secondary: #89888d; /** Use text.color.subtle instead. */
-  --gl-text-tertiary: #737278; /** Use text.color.disabled instead. */
   --gl-heading-3-letter-spacing: inherit;
   --gl-heading-4-letter-spacing: inherit;
   --gl-heading-5-letter-spacing: inherit;
@@ -1162,6 +1159,7 @@
   --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
+  --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-default); /** Used for the border of a dropdown. */
   --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */
@@ -1174,7 +1172,7 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--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: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
-  --gl-modal-border-radius: var(--gl-border-radius-lg); /** Used for modal border radius. */
+  --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1228,6 +1226,9 @@
   --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */
   --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */
   --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */
+  --gl-text-primary: var(--gl-text-color-default); /** Use text.color.default instead. */
+  --gl-text-secondary: var(--gl-text-color-subtle); /** Use text.color.subtle instead. */
+  --gl-text-tertiary: var(--gl-text-color-disabled); /** Use text.color.disabled instead. */
   --gl-heading-1-font-weight: var(--gl-font-weight-heading);
   --gl-heading-1-margin-bottom: var(--gl-heading-default-margin-bottom);
   --gl-heading-1-color: var(--gl-text-color-heading);

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -32155,7 +32155,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#ececef",
+        "$value": "{text.color.default}",
         "$type": "color",
         "$description": "Use text.color.default instead.",
         "$extensions": {
@@ -32176,7 +32176,7 @@
     },
     "secondary": {
       "key": "{text.secondary}",
-      "$value": "#89888d",
+      "$value": "#bfbfc3",
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
       "$extensions": {
@@ -32188,7 +32188,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#89888d",
+        "$value": "{text.color.subtle}",
         "$type": "color",
         "$description": "Use text.color.subtle instead.",
         "$extensions": {
@@ -32209,7 +32209,7 @@
     },
     "tertiary": {
       "key": "{text.tertiary}",
-      "$value": "#737278",
+      "$value": "#89888d",
       "$type": "color",
       "$description": "Use text.color.disabled instead.",
       "$extensions": {
@@ -32221,7 +32221,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#737278",
+        "$value": "{text.color.disabled}",
         "$type": "color",
         "$description": "Use text.color.disabled instead.",
         "$extensions": {

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -32143,7 +32143,7 @@
     },
     "primary": {
       "key": "{text.primary}",
-      "$value": "#28272d",
+      "$value": "#3a383f",
       "$type": "color",
       "$description": "Use text.color.default instead.",
       "$extensions": {
@@ -32155,7 +32155,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#28272d",
+        "$value": "{text.color.default}",
         "$type": "color",
         "$description": "Use text.color.default instead.",
         "$extensions": {
@@ -32176,7 +32176,7 @@
     },
     "secondary": {
       "key": "{text.secondary}",
-      "$value": "#737278",
+      "$value": "#626168",
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
       "$extensions": {
@@ -32188,7 +32188,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#737278",
+        "$value": "{text.color.subtle}",
         "$type": "color",
         "$description": "Use text.color.subtle instead.",
         "$extensions": {
@@ -32221,7 +32221,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#89888d",
+        "$value": "{text.color.disabled}",
         "$type": "color",
         "$description": "Use text.color.disabled instead.",
         "$extensions": {

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

@@ -4321,6 +4321,23 @@
       "com.gitlab.locked": true
     }
   },
+  "drawer": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.2xl}",
+        "$type": "dimension",
+        "$description": "Used for drawer border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
+    "$extensions": {
+      "com.gitlab.locked": true
+    }
+  },
   "dropdown": {
     "background": {
       "color": {
@@ -5509,7 +5526,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.lg}",
+        "$value": "{border.radius.2xl}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {

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

@@ -2524,10 +2524,7 @@
   },
   "text": {
     "primary": {
-      "$value": {
-        "default": "#28272d",
-        "dark": "#ececef"
-      },
+      "$value": "{text.color.default}",
       "$type": "color",
       "$description": "Use text.color.default instead.",
       "$extensions": {
@@ -2538,10 +2535,7 @@
       "$deprecated": true
     },
     "secondary": {
-      "$value": {
-        "default": "#737278",
-        "dark": "#89888d"
-      },
+      "$value": "{text.color.subtle}",
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
       "$extensions": {
@@ -2552,10 +2546,7 @@
       "$deprecated": true
     },
     "tertiary": {
-      "$value": {
-        "default": "#89888d",
-        "dark": "#737278"
-      },
+      "$value": "{text.color.disabled}",
       "$type": "color",
       "$description": "Use text.color.disabled instead.",
       "$extensions": {

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

@@ -749,6 +749,7 @@ export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(255, 255, 255, 0.16)';
 export const GL_CHART_ZOOM_HANDLE_COLOR = '#bfbfc3';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d';
+export const GL_DRAWER_BORDER_RADIUS = '1rem';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#28272d';
 export const GL_DROPDOWN_BORDER_COLOR = '#4c4b51';
 export const GL_DROPDOWN_BORDER_RADIUS = '0.5rem';
@@ -825,7 +826,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#cbe2f9';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#284779';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#693c14';
-export const GL_MODAL_BORDER_RADIUS = '0.5rem';
+export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';
@@ -1232,8 +1233,8 @@ export const GL_STATUS_BRAND_BACKGROUND_COLOR = '#342d59';
 export const GL_STATUS_BRAND_TEXT_COLOR = '#ac93e6';
 export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf';
 export const GL_TEXT_PRIMARY = '#ececef';
-export const GL_TEXT_SECONDARY = '#89888d';
-export const GL_TEXT_TERTIARY = '#737278';
+export const GL_TEXT_SECONDARY = '#bfbfc3';
+export const GL_TEXT_TERTIARY = '#89888d';
 export const GL_TEXT_COLOR_DEFAULT = '#ececef';
 export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3';
 export const GL_TEXT_COLOR_STRONG = '#fff';

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

@@ -749,6 +749,7 @@ export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(05, 05, 06, 0.08)';
 export const GL_CHART_ZOOM_HANDLE_COLOR = '#626168';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff';
+export const GL_DRAWER_BORDER_RADIUS = '1rem';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff';
 export const GL_DROPDOWN_BORDER_COLOR = '#bfbfc3';
 export const GL_DROPDOWN_BORDER_RADIUS = '0.5rem';
@@ -825,7 +826,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#284779';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#693c14';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8';
-export const GL_MODAL_BORDER_RADIUS = '0.5rem';
+export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#1f75cb';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#108548';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#ab6100';
@@ -1231,8 +1232,8 @@ export const GL_STATUS_DANGER_ICON_COLOR = '#dd2b0e';
 export const GL_STATUS_BRAND_BACKGROUND_COLOR = '#e1d8f9';
 export const GL_STATUS_BRAND_TEXT_COLOR = '#5c47a6';
 export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf';
-export const GL_TEXT_PRIMARY = '#28272d';
-export const GL_TEXT_SECONDARY = '#737278';
+export const GL_TEXT_PRIMARY = '#3a383f';
+export const GL_TEXT_SECONDARY = '#626168';
 export const GL_TEXT_TERTIARY = '#89888d';
 export const GL_TEXT_COLOR_DEFAULT = '#3a383f';
 export const GL_TEXT_COLOR_SUBTLE = '#626168';

package/src/tokens/build/json/tokens.dark.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": {
@@ -37684,7 +37719,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#ececef",
+        "$value": "{text.color.default}",
         "$type": "color",
         "$description": "Use text.color.default instead.",
         "$extensions": {
@@ -37704,7 +37739,7 @@
     },
     "secondary": {
       "key": "{text.secondary}",
-      "$value": "#89888d",
+      "$value": "#bfbfc3",
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
       "$extensions": {
@@ -37716,7 +37751,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#89888d",
+        "$value": "{text.color.subtle}",
         "$type": "color",
         "$description": "Use text.color.subtle instead.",
         "$extensions": {
@@ -37736,7 +37771,7 @@
     },
     "tertiary": {
       "key": "{text.tertiary}",
-      "$value": "#737278",
+      "$value": "#89888d",
       "$type": "color",
       "$description": "Use text.color.disabled instead.",
       "$extensions": {
@@ -37748,7 +37783,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#737278",
+        "$value": "{text.color.disabled}",
         "$type": "color",
         "$description": "Use text.color.disabled instead.",
         "$extensions": {

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": {
@@ -37672,7 +37707,7 @@
   "text": {
     "primary": {
       "key": "{text.primary}",
-      "$value": "#28272d",
+      "$value": "#3a383f",
       "$type": "color",
       "$description": "Use text.color.default instead.",
       "$extensions": {
@@ -37684,7 +37719,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#28272d",
+        "$value": "{text.color.default}",
         "$type": "color",
         "$description": "Use text.color.default instead.",
         "$extensions": {
@@ -37704,7 +37739,7 @@
     },
     "secondary": {
       "key": "{text.secondary}",
-      "$value": "#737278",
+      "$value": "#626168",
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
       "$extensions": {
@@ -37716,7 +37751,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#737278",
+        "$value": "{text.color.subtle}",
         "$type": "color",
         "$description": "Use text.color.subtle instead.",
         "$extensions": {
@@ -37748,7 +37783,7 @@
       "filePath": "src/tokens/semantic/text.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "#89888d",
+        "$value": "{text.color.disabled}",
         "$type": "color",
         "$description": "Use text.color.disabled instead.",
         "$extensions": {

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

@@ -594,9 +594,6 @@ $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for th
 $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-letter-spacing-heading: -0.01em;
-$gl-text-primary: #ececef; // Use text.color.default instead.
-$gl-text-secondary: #89888d; // Use text.color.subtle instead.
-$gl-text-tertiary: #737278; // Use text.color.disabled instead.
 $gl-heading-3-letter-spacing: inherit;
 $gl-heading-4-letter-spacing: inherit;
 $gl-heading-5-letter-spacing: inherit;
@@ -1160,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.
@@ -1172,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.
@@ -1226,6 +1224,9 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
 $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
 $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
 $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
+$gl-text-primary: $gl-text-color-default; // Use text.color.default instead.
+$gl-text-secondary: $gl-text-color-subtle; // Use text.color.subtle instead.
+$gl-text-tertiary: $gl-text-color-disabled; // Use text.color.disabled instead.
 $gl-heading-1-font-weight: $gl-font-weight-heading;
 $gl-heading-1-margin-bottom: $gl-heading-default-margin-bottom;
 $gl-heading-1-color: $gl-text-color-heading;

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

@@ -583,9 +583,6 @@ $gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); // Used fo
 $gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); // Used for the background of a danger (destructive) action in the hover state.
 $gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for the background of a danger (destructive) action in the active state.
 $gl-letter-spacing-heading: -0.01em;
-$gl-text-primary: #28272d; // Use text.color.default instead.
-$gl-text-secondary: #737278; // Use text.color.subtle instead.
-$gl-text-tertiary: #89888d; // Use text.color.disabled instead.
 $gl-heading-3-letter-spacing: inherit;
 $gl-heading-4-letter-spacing: inherit;
 $gl-heading-5-letter-spacing: inherit;
@@ -1153,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.
@@ -1165,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.
@@ -1220,6 +1218,9 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
 $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
 $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
 $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
+$gl-text-primary: $gl-text-color-default; // Use text.color.default instead.
+$gl-text-secondary: $gl-text-color-subtle; // Use text.color.subtle instead.
+$gl-text-tertiary: $gl-text-color-disabled; // Use text.color.disabled instead.
 $gl-heading-1-font-weight: $gl-font-weight-heading;
 $gl-heading-1-margin-bottom: $gl-heading-default-margin-bottom;
 $gl-heading-1-color: $gl-text-color-heading;

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": {

package/src/tokens/semantic/text.tokens.json

@@ -1,10 +1,7 @@
 {
   "text": {
     "primary": {
-      "$value": {
-        "default": "#28272d",
-        "dark": "#ececef"
-      },
+      "$value": "{text.color.default}",
       "$type": "color",
       "$description": "Use text.color.default instead.",
       "$extensions": {
@@ -15,10 +12,7 @@
       "$deprecated": true
     },
     "secondary": {
-      "$value": {
-        "default": "#737278",
-        "dark": "#89888d"
-      },
+      "$value": "{text.color.subtle}",
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
       "$extensions": {
@@ -29,10 +23,7 @@
       "$deprecated": true
     },
     "tertiary": {
-      "$value": {
-        "default": "#89888d",
-        "dark": "#737278"
-      },
+      "$value": "{text.color.disabled}",
       "$type": "color",
       "$description": "Use text.color.disabled instead.",
       "$extensions": {