@gitlab/ui 122.1.0 → 122.1.2

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

@@ -237,38 +237,6 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
-$gl-spacing-scale-0: 0;
-$gl-spacing-scale-1: 0.125rem;
-$gl-spacing-scale-2: 0.25rem;
-$gl-spacing-scale-3: 0.5rem;
-$gl-spacing-scale-4: 0.75rem;
-$gl-spacing-scale-5: 1rem;
-$gl-spacing-scale-6: 1.5rem;
-$gl-spacing-scale-7: 2rem;
-$gl-spacing-scale-8: 2.5rem;
-$gl-spacing-scale-9: 3rem;
-$gl-spacing-scale-10: 3.5rem;
-$gl-spacing-scale-11: 4rem;
-$gl-spacing-scale-12: 5rem;
-$gl-spacing-scale-13: 6rem;
-$gl-spacing-scale-15: 7.5rem;
-$gl-spacing-scale-18: 9rem;
-$gl-spacing-scale-20: 10rem;
-$gl-spacing-scale-26: 13rem;
-$gl-spacing-scale-28: 14rem;
-$gl-spacing-scale-30: 15rem;
-$gl-spacing-scale-31: 15.5rem;
-$gl-spacing-scale-33: 16.5rem;
-$gl-spacing-scale-34: 17rem;
-$gl-spacing-scale-37: 18.5rem;
-$gl-spacing-scale-48: 24rem;
-$gl-spacing-scale-62: 31rem;
-$gl-spacing-scale-75: 37.5rem;
-$gl-spacing-scale-80: 40rem;
-$gl-spacing-scale-88: 44rem;
-$gl-spacing-scale-px: 1px;
-$gl-spacing-scale-2-5: 0.375rem;
-$gl-spacing-scale-11-5: 4.5rem;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
@@ -537,7 +505,6 @@ $gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); // Used fo
 $gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); // Used for the background of a danger (destructive) action in the default state.
 $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
 $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-border-radius-full: 9999px;
 $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.
@@ -825,20 +792,6 @@ $gl-border-color-default: $gl-color-neutral-700; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
-$gl-border-radius-6: $gl-spacing-scale-6;
-$gl-border-radius-7: $gl-spacing-scale-7;
-$gl-border-radius-none: $gl-spacing-scale-0;
-$gl-border-radius-base: $gl-spacing-scale-2;
-$gl-border-radius-xs: $gl-spacing-scale-px;
-$gl-border-radius-sm: $gl-spacing-scale-1;
-$gl-border-radius-md: $gl-spacing-scale-2;
-$gl-border-radius-lg: $gl-spacing-scale-3;
-$gl-border-radius-xl: $gl-spacing-scale-4;
-$gl-border-radius-2xl: $gl-spacing-scale-5;
-$gl-border-radius-3xl: $gl-spacing-scale-6;
-$gl-border-radius-small: $gl-spacing-scale-1;
-$gl-border-radius-large: $gl-spacing-scale-3;
-$gl-border-radius-pill: $gl-spacing-scale-4;
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.

package/dist/tokens/scss/_tokens.scss

@@ -237,38 +237,6 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
-$gl-spacing-scale-0: 0;
-$gl-spacing-scale-1: 0.125rem;
-$gl-spacing-scale-2: 0.25rem;
-$gl-spacing-scale-3: 0.5rem;
-$gl-spacing-scale-4: 0.75rem;
-$gl-spacing-scale-5: 1rem;
-$gl-spacing-scale-6: 1.5rem;
-$gl-spacing-scale-7: 2rem;
-$gl-spacing-scale-8: 2.5rem;
-$gl-spacing-scale-9: 3rem;
-$gl-spacing-scale-10: 3.5rem;
-$gl-spacing-scale-11: 4rem;
-$gl-spacing-scale-12: 5rem;
-$gl-spacing-scale-13: 6rem;
-$gl-spacing-scale-15: 7.5rem;
-$gl-spacing-scale-18: 9rem;
-$gl-spacing-scale-20: 10rem;
-$gl-spacing-scale-26: 13rem;
-$gl-spacing-scale-28: 14rem;
-$gl-spacing-scale-30: 15rem;
-$gl-spacing-scale-31: 15.5rem;
-$gl-spacing-scale-33: 16.5rem;
-$gl-spacing-scale-34: 17rem;
-$gl-spacing-scale-37: 18.5rem;
-$gl-spacing-scale-48: 24rem;
-$gl-spacing-scale-62: 31rem;
-$gl-spacing-scale-75: 37.5rem;
-$gl-spacing-scale-80: 40rem;
-$gl-spacing-scale-88: 44rem;
-$gl-spacing-scale-px: 1px;
-$gl-spacing-scale-2-5: 0.375rem;
-$gl-spacing-scale-11-5: 4.5rem;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
@@ -537,7 +505,6 @@ $gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); // Used for
 $gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); // Used for the background of a danger (destructive) action in the default state.
 $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-border-radius-full: 9999px;
 $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.
@@ -825,20 +792,6 @@ $gl-border-color-default: $gl-color-neutral-100; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
-$gl-border-radius-6: $gl-spacing-scale-6;
-$gl-border-radius-7: $gl-spacing-scale-7;
-$gl-border-radius-none: $gl-spacing-scale-0;
-$gl-border-radius-base: $gl-spacing-scale-2;
-$gl-border-radius-xs: $gl-spacing-scale-px;
-$gl-border-radius-sm: $gl-spacing-scale-1;
-$gl-border-radius-md: $gl-spacing-scale-2;
-$gl-border-radius-lg: $gl-spacing-scale-3;
-$gl-border-radius-xl: $gl-spacing-scale-4;
-$gl-border-radius-2xl: $gl-spacing-scale-5;
-$gl-border-radius-3xl: $gl-spacing-scale-6;
-$gl-border-radius-small: $gl-spacing-scale-1;
-$gl-border-radius-large: $gl-spacing-scale-3;
-$gl-border-radius-pill: $gl-spacing-scale-4;
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -238,38 +238,6 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
-$gl-spacing-scale-0: var(--gl-spacing-scale-0);
-$gl-spacing-scale-1: var(--gl-spacing-scale-1);
-$gl-spacing-scale-2: var(--gl-spacing-scale-2);
-$gl-spacing-scale-3: var(--gl-spacing-scale-3);
-$gl-spacing-scale-4: var(--gl-spacing-scale-4);
-$gl-spacing-scale-5: var(--gl-spacing-scale-5);
-$gl-spacing-scale-6: var(--gl-spacing-scale-6);
-$gl-spacing-scale-7: var(--gl-spacing-scale-7);
-$gl-spacing-scale-8: var(--gl-spacing-scale-8);
-$gl-spacing-scale-9: var(--gl-spacing-scale-9);
-$gl-spacing-scale-10: var(--gl-spacing-scale-10);
-$gl-spacing-scale-11: var(--gl-spacing-scale-11);
-$gl-spacing-scale-12: var(--gl-spacing-scale-12);
-$gl-spacing-scale-13: var(--gl-spacing-scale-13);
-$gl-spacing-scale-15: var(--gl-spacing-scale-15);
-$gl-spacing-scale-18: var(--gl-spacing-scale-18);
-$gl-spacing-scale-20: var(--gl-spacing-scale-20);
-$gl-spacing-scale-26: var(--gl-spacing-scale-26);
-$gl-spacing-scale-28: var(--gl-spacing-scale-28);
-$gl-spacing-scale-30: var(--gl-spacing-scale-30);
-$gl-spacing-scale-31: var(--gl-spacing-scale-31);
-$gl-spacing-scale-33: var(--gl-spacing-scale-33);
-$gl-spacing-scale-34: var(--gl-spacing-scale-34);
-$gl-spacing-scale-37: var(--gl-spacing-scale-37);
-$gl-spacing-scale-48: var(--gl-spacing-scale-48);
-$gl-spacing-scale-62: var(--gl-spacing-scale-62);
-$gl-spacing-scale-75: var(--gl-spacing-scale-75);
-$gl-spacing-scale-80: var(--gl-spacing-scale-80);
-$gl-spacing-scale-88: var(--gl-spacing-scale-88);
-$gl-spacing-scale-px: var(--gl-spacing-scale-px);
-$gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
-$gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
@@ -996,21 +964,6 @@ $gl-border-color-subtle: var(--gl-border-color-subtle);
 $gl-border-color-strong: var(--gl-border-color-strong);
 $gl-border-color-section: var(--gl-border-color-section);
 $gl-border-color-transparent: var(--gl-border-color-transparent);
-$gl-border-radius-6: var(--gl-border-radius-6);
-$gl-border-radius-7: var(--gl-border-radius-7);
-$gl-border-radius-none: var(--gl-border-radius-none);
-$gl-border-radius-base: var(--gl-border-radius-base);
-$gl-border-radius-xs: var(--gl-border-radius-xs);
-$gl-border-radius-sm: var(--gl-border-radius-sm);
-$gl-border-radius-md: var(--gl-border-radius-md);
-$gl-border-radius-lg: var(--gl-border-radius-lg);
-$gl-border-radius-xl: var(--gl-border-radius-xl);
-$gl-border-radius-2xl: var(--gl-border-radius-2xl);
-$gl-border-radius-3xl: var(--gl-border-radius-3xl);
-$gl-border-radius-small: var(--gl-border-radius-small);
-$gl-border-radius-large: var(--gl-border-radius-large);
-$gl-border-radius-pill: var(--gl-border-radius-pill);
-$gl-border-radius-full: var(--gl-border-radius-full);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);

package/dist/tokens/tailwind/tokens.cjs

@@ -20,8 +20,6 @@
   const feedbackBackgroundColors = {"feedback-strong":"var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))","feedback-neutral":"var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))","feedback-info":"var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))","feedback-success":"var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))","feedback-warning":"var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))","feedback-danger":"var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))"};
   const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))","feedback-info":"var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #2f5ca0))","feedback-success":"var(--gl-feedback-success-text-color, var(--gl-color-green-700, #306440))","feedback-warning":"var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #894b16))","feedback-danger":"var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #a32c12))"};
   const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))","feedback-info":"var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #2f68b4))","feedback-success":"var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #2f7549))","feedback-warning":"var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #995715))","feedback-danger":"var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c02f12))"};
-  const spacingScale = {"0":"var(--gl-spacing-scale-0, 0)","1":"var(--gl-spacing-scale-1, 0.125rem)","2":"var(--gl-spacing-scale-2, 0.25rem)","3":"var(--gl-spacing-scale-3, 0.5rem)","4":"var(--gl-spacing-scale-4, 0.75rem)","5":"var(--gl-spacing-scale-5, 1rem)","6":"var(--gl-spacing-scale-6, 1.5rem)","7":"var(--gl-spacing-scale-7, 2rem)","8":"var(--gl-spacing-scale-8, 2.5rem)","9":"var(--gl-spacing-scale-9, 3rem)","10":"var(--gl-spacing-scale-10, 3.5rem)","11":"var(--gl-spacing-scale-11, 4rem)","12":"var(--gl-spacing-scale-12, 5rem)","13":"var(--gl-spacing-scale-13, 6rem)","15":"var(--gl-spacing-scale-15, 7.5rem)","18":"var(--gl-spacing-scale-18, 9rem)","20":"var(--gl-spacing-scale-20, 10rem)","26":"var(--gl-spacing-scale-26, 13rem)","28":"var(--gl-spacing-scale-28, 14rem)","30":"var(--gl-spacing-scale-30, 15rem)","31":"var(--gl-spacing-scale-31, 15.5rem)","33":"var(--gl-spacing-scale-33, 16.5rem)","34":"var(--gl-spacing-scale-34, 17rem)","37":"var(--gl-spacing-scale-37, 18.5rem)","48":"var(--gl-spacing-scale-48, 24rem)","62":"var(--gl-spacing-scale-62, 31rem)","75":"var(--gl-spacing-scale-75, 37.5rem)","80":"var(--gl-spacing-scale-80, 40rem)","88":"var(--gl-spacing-scale-88, 44rem)","px":"var(--gl-spacing-scale-px, 1px)","2-5":"var(--gl-spacing-scale-2-5, 0.375rem)","11-5":"var(--gl-spacing-scale-11-5, 4.5rem)"};
-  const borderRadius = {"6":"var(--gl-border-radius-6, var(--gl-spacing-scale-6, 1.5rem))","7":"var(--gl-border-radius-7, var(--gl-spacing-scale-7, 2rem))","none":"var(--gl-border-radius-none, var(--gl-spacing-scale-0, 0))","base":"var(--gl-border-radius-base, var(--gl-spacing-scale-2, 0.25rem))","xs":"var(--gl-border-radius-xs, var(--gl-spacing-scale-px, 1px))","sm":"var(--gl-border-radius-sm, var(--gl-spacing-scale-1, 0.125rem))","md":"var(--gl-border-radius-md, var(--gl-spacing-scale-2, 0.25rem))","lg":"var(--gl-border-radius-lg, var(--gl-spacing-scale-3, 0.5rem))","xl":"var(--gl-border-radius-xl, var(--gl-spacing-scale-4, 0.75rem))","2xl":"var(--gl-border-radius-2xl, var(--gl-spacing-scale-5, 1rem))","3xl":"var(--gl-border-radius-3xl, var(--gl-spacing-scale-6, 1.5rem))","small":"var(--gl-border-radius-small, var(--gl-spacing-scale-1, 0.125rem))","large":"var(--gl-border-radius-large, var(--gl-spacing-scale-3, 0.5rem))","pill":"var(--gl-border-radius-pill, var(--gl-spacing-scale-4, 0.75rem))","full":"var(--gl-border-radius-full, 9999px)"};
 
   const colors = {
     inherit: 'inherit',
@@ -101,7 +99,5 @@
     outlineColor,
     textColor,
     fill,
-    spacing: spacingScale,
-    borderRadius,
   }
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.1.0",
+  "version": "122.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -26,7 +26,7 @@ export default {
     id: {
       type: String,
       required: false,
-      default: () => uniqueId(),
+      default: undefined,
     },
     /**
      * The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model.
@@ -112,6 +112,7 @@ export default {
   data() {
     const group = this.getGroup();
     return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_'),
       localChecked: group ? group.checked : this.checked,
     };
   },
@@ -172,7 +173,7 @@ export default {
 
       return {
         ...this.$attrs,
-        id: this.id,
+        id: this.internalId,
         name: this.computedName,
         disabled,
         required,
@@ -286,7 +287,7 @@ export default {
       :class="stateClass"
       @change="handleChange"
     />
-    <label :for="id" class="custom-control-label">
+    <label :for="internalId" class="custom-control-label">
       <slot></slot>
       <p v-if="Boolean($scopedSlots.help)" class="help-text">
         <slot name="help"></slot>

package/src/scss/variables.scss

@@ -4,6 +4,35 @@
 
 // Layout
 $grid-size: px-to-rem(8px);
+$gl-spacing-scale-1: 0.25 * $grid-size;
+$gl-spacing-scale-2: 0.5 * $grid-size;
+$gl-spacing-scale-3: $grid-size;
+$gl-spacing-scale-4: 1.5 * $grid-size;
+$gl-spacing-scale-5: 2 * $grid-size;
+$gl-spacing-scale-6: 3 * $grid-size;
+$gl-spacing-scale-7: 4 * $grid-size;
+$gl-spacing-scale-8: 5 * $grid-size;
+$gl-spacing-scale-9: 6 * $grid-size;
+$gl-spacing-scale-10: 7 * $grid-size;
+$gl-spacing-scale-11: 8 * $grid-size;
+$gl-spacing-scale-11-5: 9 * $grid-size;
+$gl-spacing-scale-12: 10 * $grid-size;
+$gl-spacing-scale-13: 12 * $grid-size;
+$gl-spacing-scale-15: 15 * $grid-size;
+$gl-spacing-scale-18: 18 * $grid-size;
+$gl-spacing-scale-20: 20 * $grid-size;
+$gl-spacing-scale-26: 26 * $grid-size;
+$gl-spacing-scale-28: 28 * $grid-size;
+$gl-spacing-scale-30: 30 * $grid-size;
+$gl-spacing-scale-31: 31 * $grid-size;
+$gl-spacing-scale-33: 33 * $grid-size;
+$gl-spacing-scale-34: 34 * $grid-size;
+$gl-spacing-scale-37: 37 * $grid-size;
+$gl-spacing-scale-48: 48 * $grid-size;
+$gl-spacing-scale-62: 62 * $grid-size;
+$gl-spacing-scale-75: 75 * $grid-size;
+$gl-spacing-scale-80: 80 * $grid-size;
+$gl-spacing-scale-88: 88 * $grid-size;
 
 // Responsive breakpoints
 
@@ -173,6 +202,14 @@ $gl-border-size-4: 4px;
 $gl-border-size-5: 5px;
 $gl-border-size-8: 8px;
 
+// border roundness
+$gl-border-radius-small: $gl-spacing-scale-1;
+$gl-border-radius-base: $gl-spacing-scale-2;
+$gl-border-radius-large: $gl-spacing-scale-3;
+$gl-border-radius-6: $gl-spacing-scale-6;
+$gl-border-radius-7: $gl-spacing-scale-7;
+$gl-border-radius-full: 50%;
+
 // component height
 $gl-button-small-size: px-to-rem(24px);
 $gl-button-medium-size: px-to-rem(32px);

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

@@ -239,38 +239,6 @@
   --gl-line-height-42: 2.625rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-52: 3.25rem;
-  --gl-spacing-scale-0: 0;
-  --gl-spacing-scale-1: 0.125rem;
-  --gl-spacing-scale-2: 0.25rem;
-  --gl-spacing-scale-3: 0.5rem;
-  --gl-spacing-scale-4: 0.75rem;
-  --gl-spacing-scale-5: 1rem;
-  --gl-spacing-scale-6: 1.5rem;
-  --gl-spacing-scale-7: 2rem;
-  --gl-spacing-scale-8: 2.5rem;
-  --gl-spacing-scale-9: 3rem;
-  --gl-spacing-scale-10: 3.5rem;
-  --gl-spacing-scale-11: 4rem;
-  --gl-spacing-scale-12: 5rem;
-  --gl-spacing-scale-13: 6rem;
-  --gl-spacing-scale-15: 7.5rem;
-  --gl-spacing-scale-18: 9rem;
-  --gl-spacing-scale-20: 10rem;
-  --gl-spacing-scale-26: 13rem;
-  --gl-spacing-scale-28: 14rem;
-  --gl-spacing-scale-30: 15rem;
-  --gl-spacing-scale-31: 15.5rem;
-  --gl-spacing-scale-33: 16.5rem;
-  --gl-spacing-scale-34: 17rem;
-  --gl-spacing-scale-37: 18.5rem;
-  --gl-spacing-scale-48: 24rem;
-  --gl-spacing-scale-62: 31rem;
-  --gl-spacing-scale-75: 37.5rem;
-  --gl-spacing-scale-80: 40rem;
-  --gl-spacing-scale-88: 44rem;
-  --gl-spacing-scale-px: 1px;
-  --gl-spacing-scale-2-5: 0.375rem;
-  --gl-spacing-scale-11-5: 4.5rem;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */
@@ -539,7 +507,6 @@
   --gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
   --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-border-radius-full: 9999px;
   --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. */
@@ -827,20 +794,6 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
-  --gl-border-radius-6: var(--gl-spacing-scale-6);
-  --gl-border-radius-7: var(--gl-spacing-scale-7);
-  --gl-border-radius-none: var(--gl-spacing-scale-0);
-  --gl-border-radius-base: var(--gl-spacing-scale-2);
-  --gl-border-radius-xs: var(--gl-spacing-scale-px);
-  --gl-border-radius-sm: var(--gl-spacing-scale-1);
-  --gl-border-radius-md: var(--gl-spacing-scale-2);
-  --gl-border-radius-lg: var(--gl-spacing-scale-3);
-  --gl-border-radius-xl: var(--gl-spacing-scale-4);
-  --gl-border-radius-2xl: var(--gl-spacing-scale-5);
-  --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-border-radius-small: var(--gl-spacing-scale-1);
-  --gl-border-radius-large: var(--gl-spacing-scale-3);
-  --gl-border-radius-pill: var(--gl-spacing-scale-4);
   --gl-control-background-color-default: var(--gl-color-neutral-0); /** Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /** Used for the background of static content that prepends or appends a text input. */

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

@@ -239,38 +239,6 @@
   --gl-line-height-42: 2.625rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-52: 3.25rem;
-  --gl-spacing-scale-0: 0;
-  --gl-spacing-scale-1: 0.125rem;
-  --gl-spacing-scale-2: 0.25rem;
-  --gl-spacing-scale-3: 0.5rem;
-  --gl-spacing-scale-4: 0.75rem;
-  --gl-spacing-scale-5: 1rem;
-  --gl-spacing-scale-6: 1.5rem;
-  --gl-spacing-scale-7: 2rem;
-  --gl-spacing-scale-8: 2.5rem;
-  --gl-spacing-scale-9: 3rem;
-  --gl-spacing-scale-10: 3.5rem;
-  --gl-spacing-scale-11: 4rem;
-  --gl-spacing-scale-12: 5rem;
-  --gl-spacing-scale-13: 6rem;
-  --gl-spacing-scale-15: 7.5rem;
-  --gl-spacing-scale-18: 9rem;
-  --gl-spacing-scale-20: 10rem;
-  --gl-spacing-scale-26: 13rem;
-  --gl-spacing-scale-28: 14rem;
-  --gl-spacing-scale-30: 15rem;
-  --gl-spacing-scale-31: 15.5rem;
-  --gl-spacing-scale-33: 16.5rem;
-  --gl-spacing-scale-34: 17rem;
-  --gl-spacing-scale-37: 18.5rem;
-  --gl-spacing-scale-48: 24rem;
-  --gl-spacing-scale-62: 31rem;
-  --gl-spacing-scale-75: 37.5rem;
-  --gl-spacing-scale-80: 40rem;
-  --gl-spacing-scale-88: 44rem;
-  --gl-spacing-scale-px: 1px;
-  --gl-spacing-scale-2-5: 0.375rem;
-  --gl-spacing-scale-11-5: 4.5rem;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */
@@ -539,7 +507,6 @@
   --gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
   --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
   --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-border-radius-full: 9999px;
   --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. */
@@ -827,20 +794,6 @@
   --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
-  --gl-border-radius-6: var(--gl-spacing-scale-6);
-  --gl-border-radius-7: var(--gl-spacing-scale-7);
-  --gl-border-radius-none: var(--gl-spacing-scale-0);
-  --gl-border-radius-base: var(--gl-spacing-scale-2);
-  --gl-border-radius-xs: var(--gl-spacing-scale-px);
-  --gl-border-radius-sm: var(--gl-spacing-scale-1);
-  --gl-border-radius-md: var(--gl-spacing-scale-2);
-  --gl-border-radius-lg: var(--gl-spacing-scale-3);
-  --gl-border-radius-xl: var(--gl-spacing-scale-4);
-  --gl-border-radius-2xl: var(--gl-spacing-scale-5);
-  --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-border-radius-small: var(--gl-spacing-scale-1);
-  --gl-border-radius-large: var(--gl-spacing-scale-3);
-  --gl-border-radius-pill: var(--gl-spacing-scale-4);
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /** Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */