@gitlab/ui 122.1.1 → 122.1.2

package/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/src/tokens/build/tailwind/tokens.cjs

@@ -352,57 +352,6 @@ const feedbackIconColors = {
   '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',
@@ -484,6 +433,4 @@ module.exports = {
   outlineColor,
   textColor,
   fill,
-  spacing: spacingScale,
-  borderRadius,
 };

package/src/tokens/semantic/border.tokens.json

@@ -63,163 +63,6 @@
           ]
         }
       }
-    },
-    "radius": {
-      "none": {
-        "$value": "{spacing-scale.0}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "base": {
-        "$value": "{spacing-scale.2}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "xs": {
-        "$value": "{spacing-scale.px}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "sm": {
-        "$value": "{spacing-scale.1}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "md": {
-        "$value": "{spacing-scale.2}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "lg": {
-        "$value": "{spacing-scale.3}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "xl": {
-        "$value": "{spacing-scale.4}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "2xl": {
-        "$value": "{spacing-scale.5}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "3xl": {
-        "$value": "{spacing-scale.6}",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "small": {
-        "$value": "{spacing-scale.1}",
-        "$type": "dimension",
-        "$description": "",
-        "$deprecated": true,
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "large": {
-        "$value": "{spacing-scale.3}",
-        "$type": "dimension",
-        "$description": "",
-        "$deprecated": true,
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "pill": {
-        "$value": "{spacing-scale.4}",
-        "$type": "dimension",
-        "$description": "",
-        "$deprecated": true,
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "6": {
-        "$value": "{spacing-scale.6}",
-        "$type": "dimension",
-        "$description": "",
-        "$deprecated": true,
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "7": {
-        "$value": "{spacing-scale.7}",
-        "$type": "dimension",
-        "$description": "",
-        "$deprecated": true,
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      },
-      "full": {
-        "$value": "9999px",
-        "$type": "dimension",
-        "$description": "",
-        "$extensions": {
-          "com.figma.scope": [
-            "CORNER_RADIUS"
-          ]
-        }
-      }
     }
   }
 }

package/tailwind.defaults.js

@@ -8,12 +8,48 @@ const {
   outlineColor,
   fill,
   textColor,
-  spacing,
-  borderRadius,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
 
+const gridSize = 0.5; // rem
+const spacing = {
+  0: '0',
+  px: '1px',
+  ...Object.fromEntries(
+    Object.entries({
+      1: 0.25,
+      2: 0.5,
+      3: 1,
+      4: 1.5,
+      5: 2,
+      6: 3,
+      7: 4,
+      8: 5,
+      9: 6,
+      10: 7,
+      11: 8,
+      '11-5': 9,
+      12: 10,
+      13: 12,
+      15: 15,
+      20: 20,
+      26: 26,
+      28: 28,
+      30: 30,
+      31: 31,
+      34: 34,
+      48: 48,
+      62: 62,
+      75: 75,
+      80: 80,
+      88: 88,
+    }).map(([scale, factor]) => {
+      return [scale, `${factor * gridSize}rem`];
+    }),
+  ),
+};
+
 function addCustomDefinitions({ addComponents, addUtilities }) {
   addComponents({
     '.action-neutral-colors': {
@@ -463,7 +499,15 @@ module.exports = {
     },
     backgroundColor,
     borderColor,
-    borderRadius,
+    borderRadius: {
+      none: '0',
+      6: '1.5rem',
+      base: '.25rem',
+      full: '50%', // Tailwind gl-rounded-full is 9999px
+      small: '.125rem',
+      lg: '.5rem',
+      pill: '.75rem',
+    },
     boxShadow: {
       DEFAULT: '0 1px 4px 0 #0000004d',
       none: 'none',