@gitlab/ui 123.11.1 → 123.11.3

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
+const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
+const GL_BORDER_COLOR_SUBTLE = '#3a383f';
+const GL_BORDER_COLOR_STRONG = '#626168';
+const GL_BORDER_COLOR_SECTION = '#18171d';
 const GL_BORDER_RADIUS_NONE = '0';
 const GL_BORDER_RADIUS_XS = '1px';
 const GL_BORDER_RADIUS_SM = '0.125rem';
@@ -12,11 +17,6 @@ const GL_BORDER_RADIUS_2XL = '1rem';
 const GL_BORDER_RADIUS_3XL = '1.5rem';
 const GL_BORDER_RADIUS_FULL = '9999px';
 const GL_BORDER_RADIUS_DEFAULT = '0.25rem';
-const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-const GL_BORDER_COLOR_SUBTLE = '#3a383f';
-const GL_BORDER_COLOR_STRONG = '#626168';
-const GL_BORDER_COLOR_SECTION = '#18171d';
-const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
 const GL_COLOR_ALPHA_0 = 'transparent';
 const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';
 const GL_COLOR_ALPHA_DARK_4 = 'rgba(05, 05, 06, 0.04)';

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
+const GL_BORDER_COLOR_DEFAULT = '#dcdcde';
+const GL_BORDER_COLOR_SUBTLE = '#ececef';
+const GL_BORDER_COLOR_STRONG = '#bfbfc3';
+const GL_BORDER_COLOR_SECTION = '#dcdcde';
 const GL_BORDER_RADIUS_NONE = '0';
 const GL_BORDER_RADIUS_XS = '1px';
 const GL_BORDER_RADIUS_SM = '0.125rem';
@@ -12,11 +17,6 @@ const GL_BORDER_RADIUS_2XL = '1rem';
 const GL_BORDER_RADIUS_3XL = '1.5rem';
 const GL_BORDER_RADIUS_FULL = '9999px';
 const GL_BORDER_RADIUS_DEFAULT = '0.25rem';
-const GL_BORDER_COLOR_DEFAULT = '#dcdcde';
-const GL_BORDER_COLOR_SUBTLE = '#ececef';
-const GL_BORDER_COLOR_STRONG = '#bfbfc3';
-const GL_BORDER_COLOR_SECTION = '#dcdcde';
-const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
 const GL_COLOR_ALPHA_0 = 'transparent';
 const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';
 const GL_COLOR_ALPHA_DARK_4 = 'rgba(05, 05, 06, 0.04)';

package/dist/tokens/css/tokens.css

@@ -572,6 +572,10 @@
   --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-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
+  --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-radius-none: var(--gl-spacing-scale-0);
   --gl-border-radius-xs: var(--gl-spacing-scale-px);
   --gl-border-radius-sm: var(--gl-spacing-scale-1);
@@ -580,10 +584,6 @@
   --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-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
-  --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-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
@@ -936,8 +936,8 @@
   --gl-text-color-danger: var(--gl-color-red-600); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-success: var(--gl-color-green-600); /** Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
-  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

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

@@ -583,6 +583,10 @@
   --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-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
+  --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-radius-none: var(--gl-spacing-scale-0);
   --gl-border-radius-xs: var(--gl-spacing-scale-px);
   --gl-border-radius-sm: var(--gl-spacing-scale-1);
@@ -591,10 +595,6 @@
   --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-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
-  --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-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
@@ -953,8 +953,8 @@
   --gl-text-color-danger: var(--gl-color-red-300); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-success: var(--gl-color-green-300); /** Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
-  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

package/dist/tokens/docs/tokens-tailwind-docs.dark.json

@@ -15613,6 +15613,38 @@
       "cssWithValue": "var(--black)"
     },
     "color": {
+      "transparent": {
+        "key": "{border.color.transparent}",
+        "$value": "transparent",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived.",
+        "$extensions": {
+          "com.figma.scope": [
+            "ALL_SCOPES"
+          ]
+        },
+        "filePath": "src/tokens/constant/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.alpha.0}",
+          "$type": "color",
+          "$description": "Used when a border needs to be present, but not visibly perceived.",
+          "$extensions": {
+            "com.figma.scope": [
+              "ALL_SCOPES"
+            ]
+          },
+          "key": "{border.color.transparent}"
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ],
+        "cssWithValue": "var(--gl-border-color-transparent)"
+      },
       "default": {
         "key": "{border.color.default}",
         "$value": "#4c4b51",
@@ -15740,38 +15772,6 @@
           "section"
         ],
         "cssWithValue": "var(--gl-border-color-section)"
-      },
-      "transparent": {
-        "key": "{border.color.transparent}",
-        "$value": "transparent",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived.",
-        "$extensions": {
-          "com.figma.scope": [
-            "ALL_SCOPES"
-          ]
-        },
-        "filePath": "src/tokens/semantic/border.tokens.json",
-        "isSource": true,
-        "original": {
-          "$value": "{color.alpha.0}",
-          "$type": "color",
-          "$description": "Used when a border needs to be present, but not visibly perceived.",
-          "$extensions": {
-            "com.figma.scope": [
-              "ALL_SCOPES"
-            ]
-          },
-          "key": "{border.color.transparent}"
-        },
-        "name": "BORDER_COLOR_TRANSPARENT",
-        "attributes": {},
-        "path": [
-          "border",
-          "color",
-          "transparent"
-        ],
-        "cssWithValue": "var(--gl-border-color-transparent)"
       }
     },
     "dropdown": {

package/dist/tokens/docs/tokens-tailwind-docs.json

@@ -15613,6 +15613,38 @@
       "cssWithValue": "var(--black)"
     },
     "color": {
+      "transparent": {
+        "key": "{border.color.transparent}",
+        "$value": "transparent",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived.",
+        "$extensions": {
+          "com.figma.scope": [
+            "ALL_SCOPES"
+          ]
+        },
+        "filePath": "src/tokens/constant/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.alpha.0}",
+          "$type": "color",
+          "$description": "Used when a border needs to be present, but not visibly perceived.",
+          "$extensions": {
+            "com.figma.scope": [
+              "ALL_SCOPES"
+            ]
+          },
+          "key": "{border.color.transparent}"
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ],
+        "cssWithValue": "var(--gl-border-color-transparent)"
+      },
       "default": {
         "key": "{border.color.default}",
         "$value": "#dcdcde",
@@ -15740,38 +15772,6 @@
           "section"
         ],
         "cssWithValue": "var(--gl-border-color-section)"
-      },
-      "transparent": {
-        "key": "{border.color.transparent}",
-        "$value": "transparent",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived.",
-        "$extensions": {
-          "com.figma.scope": [
-            "ALL_SCOPES"
-          ]
-        },
-        "filePath": "src/tokens/semantic/border.tokens.json",
-        "isSource": true,
-        "original": {
-          "$value": "{color.alpha.0}",
-          "$type": "color",
-          "$description": "Used when a border needs to be present, but not visibly perceived.",
-          "$extensions": {
-            "com.figma.scope": [
-              "ALL_SCOPES"
-            ]
-          },
-          "key": "{border.color.transparent}"
-        },
-        "name": "BORDER_COLOR_TRANSPARENT",
-        "attributes": {},
-        "path": [
-          "border",
-          "color",
-          "transparent"
-        ],
-        "cssWithValue": "var(--gl-border-color-transparent)"
       }
     },
     "dropdown": {

package/dist/tokens/figma/constants.tokens.json

@@ -1,5 +1,17 @@
 {
   "border": {
+    "color": {
+      "transparent": {
+        "$value": "{color.alpha.0}",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived.",
+        "$extensions": {
+          "com.figma.scope": [
+            "ALL_SCOPES"
+          ]
+        }
+      }
+    },
     "radius": {
       "none": {
         "$value": "{spacing-scale.0}",

package/dist/tokens/figma/semantic.tokens.json

@@ -1164,16 +1164,6 @@
             "STROKE_COLOR"
           ]
         }
-      },
-      "transparent": {
-        "$value": "{color.alpha.0}",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived.",
-        "$extensions": {
-          "com.figma.scope": [
-            "ALL_SCOPES"
-          ]
-        }
       }
     },
     "radius": {

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const GL_BORDER_COLOR_TRANSPARENT = "transparent";
+export const GL_BORDER_COLOR_DEFAULT = "#4c4b51";
+export const GL_BORDER_COLOR_SUBTLE = "#3a383f";
+export const GL_BORDER_COLOR_STRONG = "#626168";
+export const GL_BORDER_COLOR_SECTION = "#18171d";
 export const GL_BORDER_RADIUS_NONE = "0";
 export const GL_BORDER_RADIUS_XS = "1px";
 export const GL_BORDER_RADIUS_SM = "0.125rem";
@@ -12,11 +17,6 @@ export const GL_BORDER_RADIUS_2XL = "1rem";
 export const GL_BORDER_RADIUS_3XL = "1.5rem";
 export const GL_BORDER_RADIUS_FULL = "9999px";
 export const GL_BORDER_RADIUS_DEFAULT = "0.25rem";
-export const GL_BORDER_COLOR_DEFAULT = "#4c4b51";
-export const GL_BORDER_COLOR_SUBTLE = "#3a383f";
-export const GL_BORDER_COLOR_STRONG = "#626168";
-export const GL_BORDER_COLOR_SECTION = "#18171d";
-export const GL_BORDER_COLOR_TRANSPARENT = "transparent";
 export const GL_COLOR_ALPHA_0 = "transparent";
 export const GL_COLOR_ALPHA_DARK_2 = "rgba(05, 05, 06, 0.02)";
 export const GL_COLOR_ALPHA_DARK_4 = "rgba(05, 05, 06, 0.04)";

package/dist/tokens/js/tokens.js

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const GL_BORDER_COLOR_TRANSPARENT = "transparent";
+export const GL_BORDER_COLOR_DEFAULT = "#dcdcde";
+export const GL_BORDER_COLOR_SUBTLE = "#ececef";
+export const GL_BORDER_COLOR_STRONG = "#bfbfc3";
+export const GL_BORDER_COLOR_SECTION = "#dcdcde";
 export const GL_BORDER_RADIUS_NONE = "0";
 export const GL_BORDER_RADIUS_XS = "1px";
 export const GL_BORDER_RADIUS_SM = "0.125rem";
@@ -12,11 +17,6 @@ export const GL_BORDER_RADIUS_2XL = "1rem";
 export const GL_BORDER_RADIUS_3XL = "1.5rem";
 export const GL_BORDER_RADIUS_FULL = "9999px";
 export const GL_BORDER_RADIUS_DEFAULT = "0.25rem";
-export const GL_BORDER_COLOR_DEFAULT = "#dcdcde";
-export const GL_BORDER_COLOR_SUBTLE = "#ececef";
-export const GL_BORDER_COLOR_STRONG = "#bfbfc3";
-export const GL_BORDER_COLOR_SECTION = "#dcdcde";
-export const GL_BORDER_COLOR_TRANSPARENT = "transparent";
 export const GL_COLOR_ALPHA_0 = "transparent";
 export const GL_COLOR_ALPHA_DARK_2 = "rgba(05, 05, 06, 0.02)";
 export const GL_COLOR_ALPHA_DARK_4 = "rgba(05, 05, 06, 0.04)";