@gitlab/ui 123.7.0 → 123.9.0

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

@@ -228,6 +228,17 @@ $gl-color-brand-gray-03: #74717a;
 $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;
@@ -582,6 +593,7 @@ $gl-border-color-default: $gl-color-neutral-700; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-font-size-base: $gl-font-size-md;
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -1004,8 +1016,10 @@ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-
 $gl-button-danger-tertiary-border-color-default: $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: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
+$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
@@ -1020,6 +1034,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $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-lg; // Used for modal border radius.
 $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.
@@ -1034,6 +1049,7 @@ $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background
 $gl-toggle-switch-icon-color-checked-active: $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: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
@@ -1058,6 +1074,7 @@ $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-fore
 $gl-action-strong-confirm-border-color-hover: $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: $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: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
+$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
@@ -1079,6 +1096,7 @@ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hov
 $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
 $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
 $gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
+$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-default-tertiary-foreground-color-hover: $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: $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: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
@@ -1098,23 +1116,18 @@ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-a
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
-$gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $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: $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: $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-modal-border-radius: $gl-border-radius-default; // Used for modal border radius.
 $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-action-border-radius: $gl-border-radius-default; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $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: $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: $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-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
-$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $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-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.

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

@@ -228,6 +228,17 @@ $gl-color-brand-gray-03: #74717a;
 $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;
@@ -571,6 +582,7 @@ $gl-border-color-default: $gl-color-neutral-100; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-font-size-base: $gl-font-size-md;
 $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -994,11 +1006,13 @@ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-
 $gl-button-danger-tertiary-border-color-default: $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: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
+$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-foreground-color-default: $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: $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: $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: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
@@ -1013,6 +1027,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $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-lg; // Used for modal border radius.
 $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.
@@ -1027,6 +1042,7 @@ $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background
 $gl-toggle-switch-icon-color-checked-active: $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: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
@@ -1052,6 +1068,7 @@ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-background-color-focus: $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: $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: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
+$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
@@ -1073,6 +1090,7 @@ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hov
 $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
 $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
 $gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
+$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-default-tertiary-foreground-color-hover: $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: $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: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
@@ -1096,24 +1114,19 @@ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foregroun
 $gl-button-selected-foreground-color-focus: $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: $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: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
-$gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $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: $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: $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-modal-border-radius: $gl-border-radius-default; // Used for modal border radius.
 $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-action-border-radius: $gl-border-radius-default; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $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: $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: $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: $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-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
-$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $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-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.

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

@@ -243,6 +243,18 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
+$gl-font-family-regular: var(--gl-font-family-regular);
+$gl-font-family-monospace: var(--gl-font-family-monospace);
+$gl-font-size-xs: var(--gl-font-size-xs);
+$gl-font-size-sm: var(--gl-font-size-sm);
+$gl-font-size-md: var(--gl-font-size-md);
+$gl-font-size-lg: var(--gl-font-size-lg);
+$gl-font-size-base: var(--gl-font-size-base);
+$gl-font-weight-100: var(--gl-font-weight-100);
+$gl-font-weight-300: var(--gl-font-weight-300);
+$gl-font-weight-normal: var(--gl-font-weight-normal);
+$gl-font-weight-semibold: var(--gl-font-weight-semibold);
+$gl-font-weight-bold: var(--gl-font-weight-bold);
 $gl-line-height-12: var(--gl-line-height-12);
 $gl-line-height-16: var(--gl-line-height-16);
 $gl-line-height-20: var(--gl-line-height-20);
@@ -600,6 +612,7 @@ $gl-button-dashed-border-color-default: var(--gl-button-dashed-border-color-defa
 $gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-hover);
 $gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-focus);
 $gl-button-dashed-border-color-active: var(--gl-button-dashed-border-color-active);
+$gl-button-link-border-radius: var(--gl-button-link-border-radius);
 $gl-button-link-text-color-default: var(--gl-button-link-text-color-default);
 $gl-button-link-text-color-hover: var(--gl-button-link-text-color-hover);
 $gl-button-link-text-color-focus: var(--gl-button-link-text-color-focus);

package/src/tokens/build/tailwind/tokens.cjs

@@ -390,6 +390,7 @@ const borderRadius = {
   '3xl': 'var(--gl-border-radius-3xl)',
   full: 'var(--gl-border-radius-full)',
   default: 'var(--gl-border-radius-default)',
+  action: 'var(--gl-action-border-radius)',
   control: 'var(--gl-control-border-radius)',
   feedback: 'var(--gl-feedback-border-radius)',
 };
@@ -420,6 +421,36 @@ const boxShadow = {
   md: 'var(--gl-shadow-md)',
   lg: 'var(--gl-shadow-lg)',
 };
+const lineHeight = {
+  12: 'var(--gl-line-height-12)',
+  16: 'var(--gl-line-height-16)',
+  20: 'var(--gl-line-height-20)',
+  24: 'var(--gl-line-height-24)',
+  28: 'var(--gl-line-height-28)',
+  32: 'var(--gl-line-height-32)',
+  36: 'var(--gl-line-height-36)',
+  42: 'var(--gl-line-height-42)',
+  44: 'var(--gl-line-height-44)',
+  52: 'var(--gl-line-height-52)',
+};
+const fontFamily = {
+  regular: 'var(--gl-font-family-regular)',
+  monospace: 'var(--gl-font-family-monospace)',
+};
+const fontSize = {
+  xs: 'var(--gl-font-size-xs)',
+  sm: 'var(--gl-font-size-sm)',
+  md: 'var(--gl-font-size-md)',
+  lg: 'var(--gl-font-size-lg)',
+  base: 'var(--gl-font-size-base)',
+};
+const fontWeight = {
+  100: 'var(--gl-font-weight-100)',
+  300: 'var(--gl-font-weight-300)',
+  normal: 'var(--gl-font-weight-normal)',
+  semibold: 'var(--gl-font-weight-semibold)',
+  bold: 'var(--gl-font-weight-bold)',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -504,4 +535,8 @@ module.exports = {
   opacity,
   zIndex: zindexes,
   boxShadow,
+  lineHeight,
+  fontFamily,
+  fontSize,
+  fontWeight,
 };

package/src/tokens/constant/font.tokens.json

@@ -0,0 +1,136 @@
+{
+  "font": {
+    "family": {
+      "regular": {
+        "$value": [
+          "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'"
+        ],
+        "$type": "fontFamily",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_FAMILY"
+          ]
+        }
+      },
+      "monospace": {
+        "$value": [
+          "var(--default-mono-font, 'GitLab Mono')",
+          "'JetBrains Mono'",
+          "Menlo",
+          "'DejaVu Sans Mono'",
+          "'Liberation Mono'",
+          "Consolas",
+          "'Ubuntu Mono'",
+          "'Courier New'",
+          "'andale mono'",
+          "'lucida console'",
+          "monospace"
+        ],
+        "$type": "fontFamily",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_FAMILY"
+          ]
+        }
+      }
+    },
+    "size": {
+      "xs": {
+        "$value": "0.625rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      },
+      "sm": {
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      },
+      "md": {
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      },
+      "lg": {
+        "$value": "1rem",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      }
+    },
+    "weight": {
+      "100": {
+        "$value": "100",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "300": {
+        "$value": "300",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "normal": {
+        "$value": "400",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "semibold": {
+        "$value": "500",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      },
+      "bold": {
+        "$value": "600",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      }
+    }
+  }
+}

package/src/tokens/constant/line_height.tokens.json

@@ -7,7 +7,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "16": {
@@ -17,7 +19,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "20": {
@@ -27,7 +31,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "24": {
@@ -37,7 +43,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "28": {
@@ -47,7 +55,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "32": {
@@ -57,7 +67,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "36": {
@@ -67,7 +79,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "42": {
@@ -77,7 +91,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "44": {
@@ -87,7 +103,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     },
     "52": {
@@ -97,7 +115,9 @@
       },
       "$type": "dimension",
       "$extensions": {
-        "com.figma.scope": []
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
       }
     }
   }

package/src/tokens/contextual/button.tokens.json

@@ -1319,6 +1319,18 @@
       }
     },
     "link": {
+      "border": {
+        "radius": {
+          "$value": "{border.radius.md}",
+          "$type": "dimension",
+          "$description": "Used for link button border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "default": {

package/src/tokens/contextual/card.tokens.json

@@ -2,7 +2,7 @@
   "card": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {

package/src/tokens/contextual/modal.tokens.json

@@ -2,7 +2,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {

package/src/tokens/semantic/action.tokens.json

@@ -2,7 +2,7 @@
   "action": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for the border radius of an action.",
         "$extensions": {

package/src/tokens/semantic/control.tokens.json

@@ -214,7 +214,7 @@
         }
       },
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {

package/src/tokens/semantic/font.tokens.json

@@ -0,0 +1,15 @@
+{
+  "font": {
+    "size": {
+      "base": {
+        "$value": "{font.size.md}",
+        "$type": "dimension",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_SIZE"
+          ]
+        }
+      }
+    }
+  }
+}

package/tailwind.defaults.js

@@ -13,6 +13,10 @@ const {
   opacity,
   zIndex,
   boxShadow,
+  lineHeight,
+  fontFamily,
+  fontSize,
+  fontWeight,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
@@ -526,15 +530,9 @@ module.exports = {
       ],
     },
     fill,
-    fontFamily: {
-      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"',
-    },
+    fontFamily,
     fontSize: {
-      xs: '0.625rem',
-      sm: '0.75rem',
-      base: '0.875rem',
-      lg: '1rem',
+      ...fontSize,
       'size-h-display': '1.75rem',
       'size-h1': '1.4375rem',
       'size-h2': '1.1875rem',
@@ -542,24 +540,13 @@ module.exports = {
       'size-h2-xl': '1.4375rem',
       'size-reset': 'inherit',
     },
-    fontWeight: {
-      100: 100,
-      300: 300,
-      normal: 400,
-      semibold: 500,
-      bold: 600,
-    },
+    fontWeight,
     lineHeight: {
       reset: 'inherit',
       0: '0',
       1: '1',
       normal: '1rem',
-      20: '1.25rem',
-      24: '1.5rem',
-      28: '1.75rem',
-      32: '2rem',
-      36: '2.25rem',
-      42: '2.625rem',
+      ...lineHeight,
     },
     opacity,
     outlineColor,