@gitlab/ui 136.1.0 → 136.3.0

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

@@ -377,6 +377,7 @@ export const GL_ALERT_DANGER_TITLE_COLOR = '#18171d';
 export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#fcf1ef';
 export const GL_ALERT_DANGER_BORDER_TOP_COLOR = 'rgba(0, 0, 0, 0)';
 export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'rgba(0, 0, 0, 0)';
+export const GL_APPLICATION_CHROME_BACKGROUND_COLOR = '#ececef';
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(5, 5, 6, 0.08)';
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(5, 5, 6, 0.24)';
 export const GL_AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT = '9999px';
@@ -767,22 +768,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';

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

@@ -8845,6 +8845,43 @@
       }
     }
   },
+  "application-chrome": {
+    "background": {
+      "color": {
+        "key": "{application-chrome.background.color}",
+        "$value": "#050506",
+        "$type": "color",
+        "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+        "$extensions": {
+          "com.figma.scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/contextual/application-chrome.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.neutral.1000}",
+          "$type": "color",
+          "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "key": "{application-chrome.background.color}"
+        },
+        "name": "APPLICATION_CHROME_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "application-chrome",
+          "background",
+          "color"
+        ]
+      }
+    }
+  },
   "avatar": {
     "border": {
       "color": {
@@ -22747,7 +22784,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 +22795,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 +22817,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 +22828,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 +22850,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 +22861,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 +22883,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 +22894,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 +22931,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 +22953,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 +22964,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 +22986,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 +22997,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 +23019,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 +23030,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 +23053,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 +23103,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 +23126,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 +23137,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 +23160,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 +23171,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 +23194,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 +23205,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 +23232,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 +23243,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 +23266,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 +23277,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 +23300,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 +23311,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 +23334,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 +23345,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": {