@gitlab/ui 136.0.0 → 136.2.0

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

@@ -767,22 +767,23 @@ export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_NAV_ITEM_BORDER_RADIUS = '0.5rem';
 export const GL_NAV_ITEM_FONT_SIZE = '0.875rem';
 export const GL_NAV_ITEM_FONT_WEIGHT = 425;
-export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#ececef';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#ececef';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#ececef';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#bfbfc3';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#fff';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#fff';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#fff';
 export const GL_NAV_ITEM_BACKGROUND_COLOR_DEFAULT = 'rgba(0, 0, 0, 0)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = 'rgba(255, 255, 255, 0.16)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = 'rgba(255, 255, 255, 0.16)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = 'rgba(255, 255, 255, 0.08)';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#fbfafd';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#fbfafd';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#fff';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = '#28272d';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = '#28272d';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FONT_WEIGHT = 600;
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#fff';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#fff';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#fff';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#fff';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#28272d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#28272d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#28272d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#18171d';
 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';
@@ -827,6 +828,7 @@ export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#
 export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef';
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f';
+export const GL_TOOLTIP_TEXT_COLOR_SUBTLE = '#bfbfc3';
 export const DATA_VIZ_GREEN_50 = '#133a03';
 export const DATA_VIZ_GREEN_100 = '#1a4500';
 export const DATA_VIZ_GREEN_200 = '#275600';

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

@@ -767,22 +767,23 @@ export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_NAV_ITEM_BORDER_RADIUS = '0.5rem';
 export const GL_NAV_ITEM_FONT_SIZE = '0.875rem';
 export const GL_NAV_ITEM_FONT_WEIGHT = 425;
-export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#28272d';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#28272d';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#28272d';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#28272d';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#626168';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#18171d';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#18171d';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#18171d';
 export const GL_NAV_ITEM_BACKGROUND_COLOR_DEFAULT = 'rgba(0, 0, 0, 0)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = 'rgba(5, 5, 6, 0.06)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = 'rgba(5, 5, 6, 0.06)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = 'rgba(5, 5, 6, 0.16)';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#fff';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#fff';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#fff';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#fff';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#3a383f';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#18171d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#18171d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#050506';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = '#dcdcde';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = '#dcdcde';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = '#bfbfc3';
+export const GL_NAV_ITEM_SELECTED_FONT_WEIGHT = 600;
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#dcdcde';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#dcdcde';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#dcdcde';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#bfbfc3';
 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';
@@ -827,6 +828,7 @@ export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#
 export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f';
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde';
+export const GL_TOOLTIP_TEXT_COLOR_SUBTLE = '#bfbfc3';
 export const DATA_VIZ_GREEN_50 = '#ddfab7';
 export const DATA_VIZ_GREEN_100 = '#c6ed94';
 export const DATA_VIZ_GREEN_200 = '#b0d97b';

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

@@ -22747,7 +22747,7 @@
         "color": {
           "default": {
             "key": "{nav.item.foreground.color.default}",
-            "$value": "#ececef",
+            "$value": "#bfbfc3",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the default state.",
             "$extensions": {
@@ -22758,7 +22758,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.default}",
+              "$value": "{color.neutral.200}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the default state.",
               "$extensions": {
@@ -22780,7 +22780,7 @@
           },
           "hover": {
             "key": "{nav.item.foreground.color.hover}",
-            "$value": "#ececef",
+            "$value": "#fff",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the hover state.",
             "$extensions": {
@@ -22791,7 +22791,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.hover}",
+              "$value": "{color.neutral.0}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the hover state.",
               "$extensions": {
@@ -22813,7 +22813,7 @@
           },
           "focus": {
             "key": "{nav.item.foreground.color.focus}",
-            "$value": "#ececef",
+            "$value": "#fff",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the focus state.",
             "$extensions": {
@@ -22824,7 +22824,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.focus}",
+              "$value": "{nav.item.foreground.color.hover}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the focus state.",
               "$extensions": {
@@ -22846,7 +22846,7 @@
           },
           "active": {
             "key": "{nav.item.foreground.color.active}",
-            "$value": "#ececef",
+            "$value": "#fff",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the active state.",
             "$extensions": {
@@ -22857,7 +22857,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.active}",
+              "$value": "{nav.item.foreground.color.focus}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the active state.",
               "$extensions": {
@@ -22894,7 +22894,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.default}",
+              "$value": "{color.alpha.0}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the default state.",
               "$extensions": {
@@ -22916,7 +22916,7 @@
           },
           "hover": {
             "key": "{nav.item.background.color.hover}",
-            "$value": "rgba(255, 255, 255, 0.16)",
+            "$value": "#28272d",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the hover state.",
             "$extensions": {
@@ -22927,7 +22927,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.hover}",
+              "$value": "{color.neutral.900}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the hover state.",
               "$extensions": {
@@ -22949,7 +22949,7 @@
           },
           "focus": {
             "key": "{nav.item.background.color.focus}",
-            "$value": "rgba(255, 255, 255, 0.16)",
+            "$value": "#28272d",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the focus state.",
             "$extensions": {
@@ -22960,7 +22960,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.focus}",
+              "$value": "{nav.item.background.color.hover}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the focus state.",
               "$extensions": {
@@ -22982,7 +22982,7 @@
           },
           "active": {
             "key": "{nav.item.background.color.active}",
-            "$value": "rgba(255, 255, 255, 0.08)",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the active state.",
             "$extensions": {
@@ -22993,7 +22993,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.active}",
+              "$value": "{color.neutral.950}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the active state.",
               "$extensions": {
@@ -23016,11 +23016,46 @@
         }
       },
       "selected": {
+        "font": {
+          "weight": {
+            "key": "{nav.item.selected.font.weight}",
+            "$value": 600,
+            "$type": "fontWeight",
+            "$description": "Used for the font weight of a selected navigation item.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "FONT_WEIGHT"
+              ]
+            },
+            "filePath": "src/tokens/contextual/nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$value": "{font.weight.bold}",
+              "$type": "fontWeight",
+              "$description": "Used for the font weight of a selected navigation item.",
+              "$extensions": {
+                "com.figma.scopes": [
+                  "FONT_WEIGHT"
+                ]
+              },
+              "key": "{nav.item.selected.font.weight}"
+            },
+            "name": "NAV_ITEM_SELECTED_FONT_WEIGHT",
+            "attributes": {},
+            "path": [
+              "nav",
+              "item",
+              "selected",
+              "font",
+              "weight"
+            ]
+          }
+        },
         "foreground": {
           "color": {
             "default": {
               "key": "{nav.item.selected.foreground.color.default}",
-              "$value": "#18171d",
+              "$value": "#fff",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the default state.",
               "$extensions": {
@@ -23031,7 +23066,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.default}",
+                "$value": "{color.neutral.0}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the default state.",
                 "$extensions": {
@@ -23054,7 +23089,7 @@
             },
             "hover": {
               "key": "{nav.item.selected.foreground.color.hover}",
-              "$value": "#18171d",
+              "$value": "#fff",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the hover state.",
               "$extensions": {
@@ -23065,7 +23100,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.hover}",
+                "$value": "{nav.item.foreground.color.hover}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the hover state.",
                 "$extensions": {
@@ -23088,7 +23123,7 @@
             },
             "focus": {
               "key": "{nav.item.selected.foreground.color.focus}",
-              "$value": "#18171d",
+              "$value": "#fff",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the focus state.",
               "$extensions": {
@@ -23099,7 +23134,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.focus}",
+                "$value": "{nav.item.foreground.color.focus}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the focus state.",
                 "$extensions": {
@@ -23122,7 +23157,7 @@
             },
             "active": {
               "key": "{nav.item.selected.foreground.color.active}",
-              "$value": "#18171d",
+              "$value": "#fff",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the active state.",
               "$extensions": {
@@ -23133,7 +23168,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.active}",
+                "$value": "{nav.item.foreground.color.active}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the active state.",
                 "$extensions": {
@@ -23160,7 +23195,7 @@
           "color": {
             "default": {
               "key": "{nav.item.selected.background.color.default}",
-              "$value": "#ececef",
+              "$value": "#28272d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the default state.",
               "$extensions": {
@@ -23171,7 +23206,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.default}",
+                "$value": "{color.neutral.900}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the default state.",
                 "$extensions": {
@@ -23194,7 +23229,7 @@
             },
             "hover": {
               "key": "{nav.item.selected.background.color.hover}",
-              "$value": "#fbfafd",
+              "$value": "#28272d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the hover state.",
               "$extensions": {
@@ -23205,7 +23240,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.hover}",
+                "$value": "{nav.item.background.color.hover}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the hover state.",
                 "$extensions": {
@@ -23228,7 +23263,7 @@
             },
             "focus": {
               "key": "{nav.item.selected.background.color.focus}",
-              "$value": "#fbfafd",
+              "$value": "#28272d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the focus state.",
               "$extensions": {
@@ -23239,7 +23274,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.focus}",
+                "$value": "{nav.item.background.color.focus}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the focus state.",
                 "$extensions": {
@@ -23262,7 +23297,7 @@
             },
             "active": {
               "key": "{nav.item.selected.background.color.active}",
-              "$value": "#fff",
+              "$value": "#18171d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the active state.",
               "$extensions": {
@@ -23273,7 +23308,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.active}",
+                "$value": "{nav.item.background.color.active}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the active state.",
                 "$extensions": {
@@ -24901,6 +24936,44 @@
       }
     }
   },
+  "tooltip": {
+    "text": {
+      "color": {
+        "subtle": {
+          "key": "{tooltip.text.color.subtle}",
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "TEXT_FILL"
+            ]
+          },
+          "filePath": "src/tokens/contextual/tooltip.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.200}",
+            "$type": "color",
+            "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "TEXT_FILL"
+              ]
+            },
+            "key": "{tooltip.text.color.subtle}"
+          },
+          "name": "TOOLTIP_TEXT_COLOR_SUBTLE",
+          "attributes": {},
+          "path": [
+            "tooltip",
+            "text",
+            "color",
+            "subtle"
+          ]
+        }
+      }
+    }
+  },
   "data-viz": {
     "green": {
       "50": {