@gitlab/ui 134.2.0 → 134.3.1

package/src/tokens/build/figma/mode.json

@@ -4715,6 +4715,196 @@
       ]
     }
   },
+  "🔒/nav-item-border-radius": {
+    "$value": "{action-border-radius}",
+    "$type": "dimension",
+    "$description": "Used for the border radius of a navigation item",
+    "$extensions": {
+      "com.figma.scopes": [
+        "CORNER_RADIUS"
+      ]
+    }
+  },
+  "🔒/nav-item-font-size": {
+    "$value": "{font-size-300}",
+    "$type": "dimension",
+    "$description": "Used for the font size of a navigation item",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FONT_SIZE"
+      ]
+    }
+  },
+  "🔒/nav-item-font-weight": {
+    "$value": 425,
+    "$type": "fontWeight",
+    "$description": "Used for the font weight of a navigation item",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FONT_WEIGHT"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-default": {
+    "$value": "{action-neutral-foreground-color-default}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-hover": {
+    "$value": "{action-neutral-foreground-color-hover}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-focus": {
+    "$value": "{action-neutral-foreground-color-focus}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-active": {
+    "$value": "{action-neutral-foreground-color-active}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-default": {
+    "$value": "{action-neutral-background-color-default}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-hover": {
+    "$value": "{action-neutral-background-color-hover}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-focus": {
+    "$value": "{action-neutral-background-color-focus}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-active": {
+    "$value": "{action-neutral-background-color-active}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-default": {
+    "$value": "{action-selected-foreground-color-default}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-hover": {
+    "$value": "{action-selected-foreground-color-hover}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-focus": {
+    "$value": "{action-selected-foreground-color-focus}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-active": {
+    "$value": "{action-selected-foreground-color-active}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-default": {
+    "$value": "{action-selected-background-color-default}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-hover": {
+    "$value": "{action-selected-background-color-hover}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-focus": {
+    "$value": "{action-selected-background-color-focus}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-active": {
+    "$value": "{action-selected-background-color-active}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "🔒/progress-bar-indicator-color-default": {
     "$value": "{status-info-icon-color}",
     "$type": "color",

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

@@ -763,6 +763,25 @@ export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#284779';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#693c14';
 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_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0)';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.4)';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.4)';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.16)';
+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 = '#63a6e9';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#9dc7f1';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#9dc7f1';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#cbe2f9';
 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';

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

@@ -763,6 +763,25 @@ export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#693c14';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8';
 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_BACKGROUND_COLOR_DEFAULT = 'rgba(164, 163, 168, 0)';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = 'rgba(164, 163, 168, 0.16)';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = 'rgba(164, 163, 168, 0.16)';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = 'rgba(83, 81, 88, 0.24)';
+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 = '#1f75cb';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#2f5ca0';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#2f5ca0';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#284779';
 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';