@gitlab/ui 123.7.0 → 123.9.0

package/dist/tokens/css/tokens.css

@@ -230,6 +230,17 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-xs: 0.625rem;
+  --gl-font-size-sm: 0.75rem;
+  --gl-font-size-md: 0.875rem;
+  --gl-font-size-lg: 1rem;
+  --gl-font-weight-100: 100;
+  --gl-font-weight-300: 300;
+  --gl-font-weight-normal: 400;
+  --gl-font-weight-semibold: 500;
+  --gl-font-weight-bold: 600;
   --gl-line-height-12: 0.75rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-20: 1.25rem;
@@ -573,6 +584,7 @@
   --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. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
@@ -996,11 +1008,13 @@
   --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */
   --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */
+  --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */
   --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a selected button in the default state. */
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /** Used for the background of a selected button in the hover state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /** Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
+  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
@@ -1015,6 +1029,7 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--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: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
+  --gl-modal-border-radius: var(--gl-border-radius-lg); /** Used for modal border radius. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1029,6 +1044,7 @@
   --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */
   --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
   --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
+  --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */
@@ -1054,6 +1070,7 @@
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /** Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
+  --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
@@ -1075,6 +1092,7 @@
   --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */
   --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */
   --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */
+  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
   --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */
@@ -1098,24 +1116,19 @@
   --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /** Used for the foreground of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /** Used for the foreground of a selected button in the active state. */
   --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /** Used for the background of a selected button in the focus state. */
-  --gl-card-border-radius: var(--gl-border-radius-default); /** Used for card border radius. */
   --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */
   --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
-  --gl-modal-border-radius: var(--gl-border-radius-default); /** Used for modal border radius. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--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: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
-  --gl-action-border-radius: var(--gl-border-radius-default); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
   --gl-action-strong-neutral-foreground-color-focus: var(--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: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
-  --gl-control-border-radius: var(--gl-border-radius-default); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
-  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
   --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
   --gl-action-selected-foreground-color-active: var(--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: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */

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

@@ -230,6 +230,17 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-xs: 0.625rem;
+  --gl-font-size-sm: 0.75rem;
+  --gl-font-size-md: 0.875rem;
+  --gl-font-size-lg: 1rem;
+  --gl-font-weight-100: 100;
+  --gl-font-weight-300: 300;
+  --gl-font-weight-normal: 400;
+  --gl-font-weight-semibold: 500;
+  --gl-font-weight-bold: 600;
   --gl-line-height-12: 0.75rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-20: 1.25rem;
@@ -584,6 +595,7 @@
   --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. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
@@ -1006,8 +1018,10 @@
   --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */
   --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */
+  --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
+  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
@@ -1022,6 +1036,7 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--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: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
+  --gl-modal-border-radius: var(--gl-border-radius-lg); /** Used for modal border radius. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1036,6 +1051,7 @@
   --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */
   --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
   --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
+  --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */
@@ -1060,6 +1076,7 @@
   --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
+  --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
@@ -1081,6 +1098,7 @@
   --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */
   --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */
   --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */
+  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
   --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */
@@ -1100,23 +1118,18 @@
   --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the hover state. */
   --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the focus state. */
   --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the active state. */
-  --gl-card-border-radius: var(--gl-border-radius-default); /** Used for card border radius. */
   --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */
   --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
-  --gl-modal-border-radius: var(--gl-border-radius-default); /** Used for modal border radius. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--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: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
-  --gl-action-border-radius: var(--gl-border-radius-default); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
   --gl-action-strong-confirm-border-color-focus: var(--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: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
-  --gl-control-border-radius: var(--gl-border-radius-default); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
-  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
   --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
   --gl-action-selected-foreground-color-active: var(--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: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */