@gitlab/ui 86.0.0 → 86.0.2

package/dist/tokens/build/js/tokens.dark.js

@@ -106,7 +106,7 @@ const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background eas
 const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
 const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; // Used for an overlay that covers other content.
 const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
-const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a subtle border in combination with the default background.
 const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 const GL_COLOR_ALPHA_0 = 'transparent';

package/dist/tokens/build/js/tokens.js

@@ -106,7 +106,7 @@ const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background eas
 const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
 const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(31, 30, 36, 0.24)'; // Used for an overlay that covers other content.
 const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
-const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a subtle border in combination with the default background.
 const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 const GL_COLOR_ALPHA_0 = 'transparent';

package/dist/tokens/css/tokens.css

@@ -535,7 +535,7 @@
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */

package/dist/tokens/css/tokens.dark.css

@@ -535,7 +535,7 @@
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */

package/dist/tokens/js/tokens.dark.js

@@ -106,7 +106,7 @@ export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the backgro
 export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
-export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';

package/dist/tokens/js/tokens.js

@@ -106,7 +106,7 @@ export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the backgro
 export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(31, 30, 36, 0.24)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
-export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';

package/dist/tokens/json/tokens.dark.json

@@ -2580,7 +2580,7 @@
       "subtle": {
         "value": "#333238",
         "$type": "color",
-        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "comment": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
@@ -2589,7 +2589,7 @@
             "dark": "{color.neutral.900}"
           },
           "$type": "color",
-          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+          "comment": "Used for a subtle border in combination with the default background."
         },
         "name": "BORDER_COLOR_SUBTLE",
         "attributes": {},

package/dist/tokens/json/tokens.json

@@ -2580,7 +2580,7 @@
       "subtle": {
         "value": "#ececef",
         "$type": "color",
-        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "comment": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
@@ -2589,7 +2589,7 @@
             "dark": "{color.neutral.900}"
           },
           "$type": "color",
-          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+          "comment": "Used for a subtle border in combination with the default background."
         },
         "name": "BORDER_COLOR_SUBTLE",
         "attributes": {},

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

@@ -533,7 +533,7 @@ $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.

package/dist/tokens/scss/_tokens.scss

@@ -533,7 +533,7 @@ $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.

package/dist/tokens/tailwind/tokens.cjs

@@ -211,35 +211,27 @@ const textColors = {
   link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
   danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
-  disabled:
-    'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
+  disabled: 'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 const backgroundColors = {
-  default:
-    'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
-  subtle:
-    'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
-  strong:
-    'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
-  disabled:
-    'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  default: 'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
+  subtle: 'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
+  strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
+  disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24)))',
 };
 const borderColors = {
-  default:
-    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
   subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
   strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
-  transparent:
-    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+  transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
   strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #333238))',
-  disabled:
-    'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
+  disabled: 'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
   link: 'var(--gl-icon-color-link, var(--gl-color-blue-600, #1068bf))',
   info: 'var(--gl-icon-color-info, var(--gl-color-blue-600, #1068bf))',
   warning: 'var(--gl-icon-color-warning, var(--gl-color-orange-600, #9e5400))',

package/package.json

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

package/src/tokens/border.tokens.json

@@ -15,7 +15,7 @@
           "dark": "{color.neutral.900}"
         },
         "$type": "color",
-        "$description": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+        "$description": "Used for a subtle border in combination with the default background."
       },
       "strong": {
         "$value": {

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

@@ -535,7 +535,7 @@
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */

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

@@ -535,7 +535,7 @@
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */

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

@@ -106,7 +106,7 @@ export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the backgro
 export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
-export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';

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

@@ -106,7 +106,7 @@ export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the backgro
 export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(31, 30, 36, 0.24)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
-export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';

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

@@ -2580,7 +2580,7 @@
       "subtle": {
         "value": "#333238",
         "$type": "color",
-        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "comment": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
@@ -2589,7 +2589,7 @@
             "dark": "{color.neutral.900}"
           },
           "$type": "color",
-          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+          "comment": "Used for a subtle border in combination with the default background."
         },
         "name": "BORDER_COLOR_SUBTLE",
         "attributes": {},

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

@@ -2580,7 +2580,7 @@
       "subtle": {
         "value": "#ececef",
         "$type": "color",
-        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "comment": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
         "isSource": true,
         "original": {
@@ -2589,7 +2589,7 @@
             "dark": "{color.neutral.900}"
           },
           "$type": "color",
-          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+          "comment": "Used for a subtle border in combination with the default background."
         },
         "name": "BORDER_COLOR_SUBTLE",
         "attributes": {},

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

@@ -533,7 +533,7 @@ $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.

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

@@ -533,7 +533,7 @@ $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.

package/src/tokens/build/tailwind/tokens.cjs

@@ -211,35 +211,27 @@ const textColors = {
   link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
   danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
-  disabled:
-    'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
+  disabled: 'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 const backgroundColors = {
-  default:
-    'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
-  subtle:
-    'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
-  strong:
-    'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
-  disabled:
-    'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  default: 'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
+  subtle: 'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
+  strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
+  disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24)))',
 };
 const borderColors = {
-  default:
-    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
   subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
   strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
-  transparent:
-    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+  transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
   strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #333238))',
-  disabled:
-    'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
+  disabled: 'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
   link: 'var(--gl-icon-color-link, var(--gl-color-blue-600, #1068bf))',
   info: 'var(--gl-icon-color-info, var(--gl-color-blue-600, #1068bf))',
   warning: 'var(--gl-icon-color-warning, var(--gl-color-orange-600, #9e5400))',