@gitlab/ui 134.2.0 → 134.3.1

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

@@ -306,6 +306,7 @@ $gl-illustration-isometric-accent-side-fill-color: #212023; // Used for the side
 $gl-illustration-isometric-base-top-fill-color: #32303c; // Used for the top surface of an isometric base platform.
 $gl-illustration-isometric-base-front-fill-color: #2b2932; // Used for the front face of an isometric base platform.
 $gl-illustration-isometric-base-side-fill-color: #23222b; // Used for the side face of an isometric base platform.
+$gl-nav-item-font-weight: 425; // Used for the font weight of a navigation item
 $data-viz-green-50: #133a03 !default;
 $data-viz-green-100: #1a4500 !default;
 $data-viz-green-200: #275600 !default;
@@ -663,6 +664,10 @@ $gl-link-mention-text-color-default: $gl-color-blue-100; // Used for the mention
 $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
+$gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a navigation item
+$gl-nav-item-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default navigation item in the default state.
+$gl-nav-item-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default navigation item in the hover state.
+$gl-nav-item-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
 $gl-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
@@ -1010,6 +1015,12 @@ $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-colo
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
+$gl-nav-item-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default navigation item in the default state.
+$gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default navigation item in the focus state.
+$gl-nav-item-selected-foreground-color-default: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected navigation item in the default state.
+$gl-nav-item-selected-background-color-default: $gl-action-selected-background-color-default; // Used for the background of a selected navigation item in the default state.
+$gl-nav-item-selected-background-color-hover: $gl-action-selected-background-color-hover; // Used for the background of a selected navigation item in the hover state.
+$gl-nav-item-selected-background-color-active: $gl-action-selected-background-color-active; // Used for the background of a selected navigation item in the active state.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1199,6 +1210,12 @@ $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the ha
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-nav-item-border-radius: $gl-action-border-radius; // Used for the border radius of a navigation item
+$gl-nav-item-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default navigation item in the hover state.
+$gl-nav-item-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default navigation item in the focus state.
+$gl-nav-item-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default navigation item in the active state.
+$gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
+$gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
 $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
@@ -1208,8 +1225,10 @@ $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-fore
 $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
 $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
 $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
+$gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.
+$gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.

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

@@ -296,6 +296,7 @@ $gl-illustration-isometric-accent-side-fill-color: #2b2838; // Used for the side
 $gl-illustration-isometric-base-top-fill-color: #e7e4f2; // Used for the top surface of an isometric base platform.
 $gl-illustration-isometric-base-front-fill-color: #d5d0e8; // Used for the front face of an isometric base platform.
 $gl-illustration-isometric-base-side-fill-color: #aea5d6; // Used for the side face of an isometric base platform.
+$gl-nav-item-font-weight: 425; // Used for the font weight of a navigation item
 $data-viz-green-50: #ddfab7 !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-200: #b0d97b !default;
@@ -644,6 +645,10 @@ $gl-link-mention-text-color-default: $gl-color-blue-800; // Used for the mention
 $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
+$gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a navigation item
+$gl-nav-item-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default navigation item in the default state.
+$gl-nav-item-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default navigation item in the hover state.
+$gl-nav-item-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
 $gl-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
@@ -1003,6 +1008,12 @@ $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-colo
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
+$gl-nav-item-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default navigation item in the default state.
+$gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default navigation item in the focus state.
+$gl-nav-item-selected-foreground-color-default: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected navigation item in the default state.
+$gl-nav-item-selected-background-color-default: $gl-action-selected-background-color-default; // Used for the background of a selected navigation item in the default state.
+$gl-nav-item-selected-background-color-hover: $gl-action-selected-background-color-hover; // Used for the background of a selected navigation item in the hover state.
+$gl-nav-item-selected-background-color-active: $gl-action-selected-background-color-active; // Used for the background of a selected navigation item in the active state.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1197,6 +1208,12 @@ $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the ha
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-nav-item-border-radius: $gl-action-border-radius; // Used for the border radius of a navigation item
+$gl-nav-item-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default navigation item in the hover state.
+$gl-nav-item-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default navigation item in the focus state.
+$gl-nav-item-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default navigation item in the active state.
+$gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
+$gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
 $gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
@@ -1207,9 +1224,11 @@ $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
 $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
 $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
+$gl-nav-item-selected-foreground-color-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.
+$gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -672,6 +672,25 @@ $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
 $gl-modal-border-radius: var(--gl-modal-border-radius);
+$gl-nav-item-border-radius: var(--gl-nav-item-border-radius);
+$gl-nav-item-font-size: var(--gl-nav-item-font-size);
+$gl-nav-item-font-weight: var(--gl-nav-item-font-weight);
+$gl-nav-item-foreground-color-default: var(--gl-nav-item-foreground-color-default);
+$gl-nav-item-foreground-color-hover: var(--gl-nav-item-foreground-color-hover);
+$gl-nav-item-foreground-color-focus: var(--gl-nav-item-foreground-color-focus);
+$gl-nav-item-foreground-color-active: var(--gl-nav-item-foreground-color-active);
+$gl-nav-item-background-color-default: var(--gl-nav-item-background-color-default);
+$gl-nav-item-background-color-hover: var(--gl-nav-item-background-color-hover);
+$gl-nav-item-background-color-focus: var(--gl-nav-item-background-color-focus);
+$gl-nav-item-background-color-active: var(--gl-nav-item-background-color-active);
+$gl-nav-item-selected-foreground-color-default: var(--gl-nav-item-selected-foreground-color-default);
+$gl-nav-item-selected-foreground-color-hover: var(--gl-nav-item-selected-foreground-color-hover);
+$gl-nav-item-selected-foreground-color-focus: var(--gl-nav-item-selected-foreground-color-focus);
+$gl-nav-item-selected-foreground-color-active: var(--gl-nav-item-selected-foreground-color-active);
+$gl-nav-item-selected-background-color-default: var(--gl-nav-item-selected-background-color-default);
+$gl-nav-item-selected-background-color-hover: var(--gl-nav-item-selected-background-color-hover);
+$gl-nav-item-selected-background-color-focus: var(--gl-nav-item-selected-background-color-focus);
+$gl-nav-item-selected-background-color-active: var(--gl-nav-item-selected-background-color-active);
 $gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
 $gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
 $gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);

package/src/tokens/contextual/nav.tokens.json

@@ -0,0 +1,218 @@
+{
+  "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"
+            ]
+          }
+        }
+      },
+      "font": {
+        "size": {
+          "$value": "{font.size.300}",
+          "$type": "dimension",
+          "$description": "Used for the font size of a navigation item",
+          "$extensions": {
+            "com.figma.scopes": [
+              "FONT_SIZE"
+            ]
+          }
+        },
+        "weight": {
+          "$value": 425,
+          "$type": "fontWeight",
+          "$description": "Used for the font weight of a navigation item",
+          "$extensions": {
+            "com.figma.scopes": [
+              "FONT_WEIGHT"
+            ]
+          }
+        }
+      },
+      "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"
+              ]
+            }
+          },
+          "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"
+              ]
+            }
+          },
+          "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"
+              ]
+            }
+          },
+          "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"
+              ]
+            }
+          }
+        }
+      },
+      "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"
+              ]
+            }
+          },
+          "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"
+              ]
+            }
+          },
+          "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"
+              ]
+            }
+          },
+          "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"
+              ]
+            }
+          }
+        }
+      },
+      "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"
+                ]
+              }
+            },
+            "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"
+                ]
+              }
+            },
+            "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"
+                ]
+              }
+            },
+            "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"
+                ]
+              }
+            }
+          }
+        },
+        "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"
+                ]
+              }
+            },
+            "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"
+                ]
+              }
+            },
+            "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"
+                ]
+              }
+            },
+            "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"
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}