@gitlab/ui 125.0.0 → 126.0.1

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

@@ -271,6 +271,9 @@ $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-font-weight-heading: var(--gl-font-weight-heading);
+$gl-heading-default-margin-top: var(--gl-heading-default-margin-top);
+$gl-heading-default-margin-bottom: var(--gl-heading-default-margin-bottom);
 $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);
@@ -281,6 +284,7 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-line-height-heading: var(--gl-line-height-heading);
 $gl-opacity-0: var(--gl-opacity-0);
 $gl-opacity-1: var(--gl-opacity-1);
 $gl-opacity-2: var(--gl-opacity-2);
@@ -1122,6 +1126,7 @@ $gl-icon-color-info: var(--gl-icon-color-info);
 $gl-icon-color-warning: var(--gl-icon-color-warning);
 $gl-icon-color-danger: var(--gl-icon-color-danger);
 $gl-icon-color-success: var(--gl-icon-color-success);
+$gl-letter-spacing-heading: var(--gl-letter-spacing-heading);
 $gl-status-neutral-background-color: var(--gl-status-neutral-background-color);
 $gl-status-neutral-text-color: var(--gl-status-neutral-text-color);
 $gl-status-neutral-icon-color: var(--gl-status-neutral-icon-color);
@@ -1152,3 +1157,190 @@ $gl-text-color-warning: var(--gl-text-color-warning);
 $gl-text-color-danger: var(--gl-text-color-danger);
 $gl-text-color-success: var(--gl-text-color-success);
 $gl-text-color-disabled: var(--gl-text-color-disabled);
+$gl-heading-1-font-weight: var(--gl-heading-1-font-weight);
+$gl-heading-1-margin-top: var(--gl-heading-1-margin-top);
+$gl-heading-1-font-size: var(--gl-heading-1-font-size);
+$gl-heading-1-letter-spacing: var(--gl-heading-1-letter-spacing);
+$gl-heading-1-line-height: var(--gl-heading-1-line-height);
+$gl-heading-1-margin-bottom: var(--gl-heading-1-margin-bottom);
+$gl-heading-1-color: var(--gl-heading-1-color);
+$gl-heading-2-font-weight: var(--gl-heading-2-font-weight);
+$gl-heading-2-margin-top: var(--gl-heading-2-margin-top);
+$gl-heading-2-font-size: var(--gl-heading-2-font-size);
+$gl-heading-2-letter-spacing: var(--gl-heading-2-letter-spacing);
+$gl-heading-2-line-height: var(--gl-heading-2-line-height);
+$gl-heading-2-margin-bottom: var(--gl-heading-2-margin-bottom);
+$gl-heading-2-color: var(--gl-heading-2-color);
+$gl-heading-3-font-weight: var(--gl-heading-3-font-weight);
+$gl-heading-3-margin-top: var(--gl-heading-3-margin-top);
+$gl-heading-3-font-size: var(--gl-heading-3-font-size);
+$gl-heading-3-letter-spacing: var(--gl-heading-3-letter-spacing);
+$gl-heading-3-line-height: var(--gl-heading-3-line-height);
+$gl-heading-3-margin-bottom: var(--gl-heading-3-margin-bottom);
+$gl-heading-3-color: var(--gl-heading-3-color);
+$gl-heading-4-font-weight: var(--gl-heading-4-font-weight);
+$gl-heading-4-margin-top: var(--gl-heading-4-margin-top);
+$gl-heading-4-font-size: var(--gl-heading-4-font-size);
+$gl-heading-4-letter-spacing: var(--gl-heading-4-letter-spacing);
+$gl-heading-4-line-height: var(--gl-heading-4-line-height);
+$gl-heading-4-margin-bottom: var(--gl-heading-4-margin-bottom);
+$gl-heading-4-color: var(--gl-heading-4-color);
+$gl-heading-5-font-weight: var(--gl-heading-5-font-weight);
+$gl-heading-5-margin-top: var(--gl-heading-5-margin-top);
+$gl-heading-5-font-size: var(--gl-heading-5-font-size);
+$gl-heading-5-letter-spacing: var(--gl-heading-5-letter-spacing);
+$gl-heading-5-line-height: var(--gl-heading-5-line-height);
+$gl-heading-5-margin-bottom: var(--gl-heading-5-margin-bottom);
+$gl-heading-5-color: var(--gl-heading-5-color);
+$gl-heading-6-font-weight: var(--gl-heading-6-font-weight);
+$gl-heading-6-margin-top: var(--gl-heading-6-margin-top);
+$gl-heading-6-font-size: var(--gl-heading-6-font-size);
+$gl-heading-6-letter-spacing: var(--gl-heading-6-letter-spacing);
+$gl-heading-6-line-height: var(--gl-heading-6-line-height);
+$gl-heading-6-margin-bottom: var(--gl-heading-6-margin-bottom);
+$gl-heading-6-color: var(--gl-heading-6-color);
+$gl-heading-scale-100-font-weight: var(--gl-heading-scale-100-font-weight);
+$gl-heading-scale-100-margin-top: var(--gl-heading-scale-100-margin-top);
+$gl-heading-scale-100-font-size: var(--gl-heading-scale-100-font-size);
+$gl-heading-scale-100-letter-spacing: var(--gl-heading-scale-100-letter-spacing);
+$gl-heading-scale-100-line-height: var(--gl-heading-scale-100-line-height);
+$gl-heading-scale-100-color: var(--gl-heading-scale-100-color);
+$gl-heading-scale-200-font-weight: var(--gl-heading-scale-200-font-weight);
+$gl-heading-scale-200-margin-top: var(--gl-heading-scale-200-margin-top);
+$gl-heading-scale-200-font-size: var(--gl-heading-scale-200-font-size);
+$gl-heading-scale-200-letter-spacing: var(--gl-heading-scale-200-letter-spacing);
+$gl-heading-scale-200-line-height: var(--gl-heading-scale-200-line-height);
+$gl-heading-scale-200-color: var(--gl-heading-scale-200-color);
+$gl-heading-scale-300-font-weight: var(--gl-heading-scale-300-font-weight);
+$gl-heading-scale-300-margin-top: var(--gl-heading-scale-300-margin-top);
+$gl-heading-scale-300-font-size: var(--gl-heading-scale-300-font-size);
+$gl-heading-scale-300-letter-spacing: var(--gl-heading-scale-300-letter-spacing);
+$gl-heading-scale-300-line-height: var(--gl-heading-scale-300-line-height);
+$gl-heading-scale-300-color: var(--gl-heading-scale-300-color);
+$gl-heading-scale-400-font-weight: var(--gl-heading-scale-400-font-weight);
+$gl-heading-scale-400-margin-top: var(--gl-heading-scale-400-margin-top);
+$gl-heading-scale-400-font-size: var(--gl-heading-scale-400-font-size);
+$gl-heading-scale-400-letter-spacing: var(--gl-heading-scale-400-letter-spacing);
+$gl-heading-scale-400-line-height: var(--gl-heading-scale-400-line-height);
+$gl-heading-scale-400-color: var(--gl-heading-scale-400-color);
+$gl-heading-scale-500-font-weight: var(--gl-heading-scale-500-font-weight);
+$gl-heading-scale-500-margin-top: var(--gl-heading-scale-500-margin-top);
+$gl-heading-scale-500-font-size: var(--gl-heading-scale-500-font-size);
+$gl-heading-scale-500-letter-spacing: var(--gl-heading-scale-500-letter-spacing);
+$gl-heading-scale-500-line-height: var(--gl-heading-scale-500-line-height);
+$gl-heading-scale-500-color: var(--gl-heading-scale-500-color);
+$gl-heading-scale-600-font-weight: var(--gl-heading-scale-600-font-weight);
+$gl-heading-scale-600-margin-top: var(--gl-heading-scale-600-margin-top);
+$gl-heading-scale-600-font-size: var(--gl-heading-scale-600-font-size);
+$gl-heading-scale-600-letter-spacing: var(--gl-heading-scale-600-letter-spacing);
+$gl-heading-scale-600-line-height: var(--gl-heading-scale-600-line-height);
+$gl-heading-scale-600-color: var(--gl-heading-scale-600-color);
+$gl-heading-scale-700-font-weight: var(--gl-heading-scale-700-font-weight);
+$gl-heading-scale-700-margin-top: var(--gl-heading-scale-700-margin-top);
+$gl-heading-scale-700-font-size: var(--gl-heading-scale-700-font-size);
+$gl-heading-scale-700-letter-spacing: var(--gl-heading-scale-700-letter-spacing);
+$gl-heading-scale-700-line-height: var(--gl-heading-scale-700-line-height);
+$gl-heading-scale-700-color: var(--gl-heading-scale-700-color);
+$gl-heading-scale-800-font-weight: var(--gl-heading-scale-800-font-weight);
+$gl-heading-scale-800-margin-top: var(--gl-heading-scale-800-margin-top);
+$gl-heading-scale-800-font-size: var(--gl-heading-scale-800-font-size);
+$gl-heading-scale-800-letter-spacing: var(--gl-heading-scale-800-letter-spacing);
+$gl-heading-scale-800-line-height: var(--gl-heading-scale-800-line-height);
+$gl-heading-scale-800-color: var(--gl-heading-scale-800-color);
+$gl-heading-scale-100-fixed-font-weight: var(--gl-heading-scale-100-fixed-font-weight);
+$gl-heading-scale-100-fixed-margin-top: var(--gl-heading-scale-100-fixed-margin-top);
+$gl-heading-scale-100-fixed-font-size: var(--gl-heading-scale-100-fixed-font-size);
+$gl-heading-scale-100-fixed-letter-spacing: var(--gl-heading-scale-100-fixed-letter-spacing);
+$gl-heading-scale-100-fixed-line-height: var(--gl-heading-scale-100-fixed-line-height);
+$gl-heading-scale-100-fixed-color: var(--gl-heading-scale-100-fixed-color);
+$gl-heading-scale-200-fixed-font-weight: var(--gl-heading-scale-200-fixed-font-weight);
+$gl-heading-scale-200-fixed-margin-top: var(--gl-heading-scale-200-fixed-margin-top);
+$gl-heading-scale-200-fixed-font-size: var(--gl-heading-scale-200-fixed-font-size);
+$gl-heading-scale-200-fixed-letter-spacing: var(--gl-heading-scale-200-fixed-letter-spacing);
+$gl-heading-scale-200-fixed-line-height: var(--gl-heading-scale-200-fixed-line-height);
+$gl-heading-scale-200-fixed-color: var(--gl-heading-scale-200-fixed-color);
+$gl-heading-scale-300-fixed-font-weight: var(--gl-heading-scale-300-fixed-font-weight);
+$gl-heading-scale-300-fixed-margin-top: var(--gl-heading-scale-300-fixed-margin-top);
+$gl-heading-scale-300-fixed-font-size: var(--gl-heading-scale-300-fixed-font-size);
+$gl-heading-scale-300-fixed-letter-spacing: var(--gl-heading-scale-300-fixed-letter-spacing);
+$gl-heading-scale-300-fixed-line-height: var(--gl-heading-scale-300-fixed-line-height);
+$gl-heading-scale-300-fixed-color: var(--gl-heading-scale-300-fixed-color);
+$gl-heading-scale-400-fixed-font-weight: var(--gl-heading-scale-400-fixed-font-weight);
+$gl-heading-scale-400-fixed-margin-top: var(--gl-heading-scale-400-fixed-margin-top);
+$gl-heading-scale-400-fixed-font-size: var(--gl-heading-scale-400-fixed-font-size);
+$gl-heading-scale-400-fixed-letter-spacing: var(--gl-heading-scale-400-fixed-letter-spacing);
+$gl-heading-scale-400-fixed-line-height: var(--gl-heading-scale-400-fixed-line-height);
+$gl-heading-scale-400-fixed-color: var(--gl-heading-scale-400-fixed-color);
+$gl-heading-scale-500-fixed-font-weight: var(--gl-heading-scale-500-fixed-font-weight);
+$gl-heading-scale-500-fixed-margin-top: var(--gl-heading-scale-500-fixed-margin-top);
+$gl-heading-scale-500-fixed-font-size: var(--gl-heading-scale-500-fixed-font-size);
+$gl-heading-scale-500-fixed-letter-spacing: var(--gl-heading-scale-500-fixed-letter-spacing);
+$gl-heading-scale-500-fixed-line-height: var(--gl-heading-scale-500-fixed-line-height);
+$gl-heading-scale-500-fixed-color: var(--gl-heading-scale-500-fixed-color);
+$gl-heading-scale-600-fixed-font-weight: var(--gl-heading-scale-600-fixed-font-weight);
+$gl-heading-scale-600-fixed-margin-top: var(--gl-heading-scale-600-fixed-margin-top);
+$gl-heading-scale-600-fixed-font-size: var(--gl-heading-scale-600-fixed-font-size);
+$gl-heading-scale-600-fixed-letter-spacing: var(--gl-heading-scale-600-fixed-letter-spacing);
+$gl-heading-scale-600-fixed-line-height: var(--gl-heading-scale-600-fixed-line-height);
+$gl-heading-scale-600-fixed-color: var(--gl-heading-scale-600-fixed-color);
+$gl-heading-scale-700-fixed-font-weight: var(--gl-heading-scale-700-fixed-font-weight);
+$gl-heading-scale-700-fixed-margin-top: var(--gl-heading-scale-700-fixed-margin-top);
+$gl-heading-scale-700-fixed-font-size: var(--gl-heading-scale-700-fixed-font-size);
+$gl-heading-scale-700-fixed-letter-spacing: var(--gl-heading-scale-700-fixed-letter-spacing);
+$gl-heading-scale-700-fixed-line-height: var(--gl-heading-scale-700-fixed-line-height);
+$gl-heading-scale-700-fixed-color: var(--gl-heading-scale-700-fixed-color);
+$gl-heading-scale-800-fixed-font-weight: var(--gl-heading-scale-800-fixed-font-weight);
+$gl-heading-scale-800-fixed-margin-top: var(--gl-heading-scale-800-fixed-margin-top);
+$gl-heading-scale-800-fixed-font-size: var(--gl-heading-scale-800-fixed-font-size);
+$gl-heading-scale-800-fixed-letter-spacing: var(--gl-heading-scale-800-fixed-letter-spacing);
+$gl-heading-scale-800-fixed-line-height: var(--gl-heading-scale-800-fixed-line-height);
+$gl-heading-scale-800-fixed-color: var(--gl-heading-scale-800-fixed-color);
+$gl-heading-display-font-weight: var(--gl-heading-display-font-weight);
+$gl-heading-display-margin-top: var(--gl-heading-display-margin-top);
+$gl-heading-display-font-size: var(--gl-heading-display-font-size);
+$gl-heading-display-letter-spacing: var(--gl-heading-display-letter-spacing);
+$gl-heading-display-line-height: var(--gl-heading-display-line-height);
+$gl-heading-display-margin-bottom: var(--gl-heading-display-margin-bottom);
+$gl-heading-display-color: var(--gl-heading-display-color);
+$gl-heading-1-fixed-font-weight: var(--gl-heading-1-fixed-font-weight);
+$gl-heading-1-fixed-margin-top: var(--gl-heading-1-fixed-margin-top);
+$gl-heading-1-fixed-font-size: var(--gl-heading-1-fixed-font-size);
+$gl-heading-1-fixed-letter-spacing: var(--gl-heading-1-fixed-letter-spacing);
+$gl-heading-1-fixed-line-height: var(--gl-heading-1-fixed-line-height);
+$gl-heading-1-fixed-margin-bottom: var(--gl-heading-1-fixed-margin-bottom);
+$gl-heading-1-fixed-color: var(--gl-heading-1-fixed-color);
+$gl-heading-2-fixed-font-weight: var(--gl-heading-2-fixed-font-weight);
+$gl-heading-2-fixed-margin-top: var(--gl-heading-2-fixed-margin-top);
+$gl-heading-2-fixed-font-size: var(--gl-heading-2-fixed-font-size);
+$gl-heading-2-fixed-letter-spacing: var(--gl-heading-2-fixed-letter-spacing);
+$gl-heading-2-fixed-line-height: var(--gl-heading-2-fixed-line-height);
+$gl-heading-2-fixed-margin-bottom: var(--gl-heading-2-fixed-margin-bottom);
+$gl-heading-2-fixed-color: var(--gl-heading-2-fixed-color);
+$gl-heading-3-fixed-font-weight: var(--gl-heading-3-fixed-font-weight);
+$gl-heading-3-fixed-margin-top: var(--gl-heading-3-fixed-margin-top);
+$gl-heading-3-fixed-font-size: var(--gl-heading-3-fixed-font-size);
+$gl-heading-3-fixed-letter-spacing: var(--gl-heading-3-fixed-letter-spacing);
+$gl-heading-3-fixed-line-height: var(--gl-heading-3-fixed-line-height);
+$gl-heading-3-fixed-margin-bottom: var(--gl-heading-3-fixed-margin-bottom);
+$gl-heading-3-fixed-color: var(--gl-heading-3-fixed-color);
+$gl-heading-4-fixed-font-weight: var(--gl-heading-4-fixed-font-weight);
+$gl-heading-4-fixed-margin-top: var(--gl-heading-4-fixed-margin-top);
+$gl-heading-4-fixed-font-size: var(--gl-heading-4-fixed-font-size);
+$gl-heading-4-fixed-letter-spacing: var(--gl-heading-4-fixed-letter-spacing);
+$gl-heading-4-fixed-line-height: var(--gl-heading-4-fixed-line-height);
+$gl-heading-4-fixed-margin-bottom: var(--gl-heading-4-fixed-margin-bottom);
+$gl-heading-4-fixed-color: var(--gl-heading-4-fixed-color);
+$gl-heading-5-fixed-font-weight: var(--gl-heading-5-fixed-font-weight);
+$gl-heading-5-fixed-margin-top: var(--gl-heading-5-fixed-margin-top);
+$gl-heading-5-fixed-font-size: var(--gl-heading-5-fixed-font-size);
+$gl-heading-5-fixed-letter-spacing: var(--gl-heading-5-fixed-letter-spacing);
+$gl-heading-5-fixed-line-height: var(--gl-heading-5-fixed-line-height);
+$gl-heading-5-fixed-margin-bottom: var(--gl-heading-5-fixed-margin-bottom);
+$gl-heading-5-fixed-color: var(--gl-heading-5-fixed-color);
+$gl-heading-6-fixed-font-weight: var(--gl-heading-6-fixed-font-weight);
+$gl-heading-6-fixed-margin-top: var(--gl-heading-6-fixed-margin-top);
+$gl-heading-6-fixed-font-size: var(--gl-heading-6-fixed-font-size);
+$gl-heading-6-fixed-letter-spacing: var(--gl-heading-6-fixed-letter-spacing);
+$gl-heading-6-fixed-line-height: var(--gl-heading-6-fixed-line-height);
+$gl-heading-6-fixed-margin-bottom: var(--gl-heading-6-fixed-margin-bottom);
+$gl-heading-6-fixed-color: var(--gl-heading-6-fixed-color);

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

@@ -0,0 +1,253 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+module.exports = {
+  typographyComponents: {
+    '.heading-1': {
+      'font-weight': 'var(--gl-heading-1-font-weight)',
+      'margin-top': 'var(--gl-heading-1-margin-top)',
+      'font-size': 'var(--gl-heading-1-font-size)',
+      'letter-spacing': 'var(--gl-heading-1-letter-spacing)',
+      'line-height': 'var(--gl-heading-1-line-height)',
+      'margin-bottom': 'var(--gl-heading-1-margin-bottom)',
+      color: 'var(--gl-heading-1-color)',
+    },
+    '.heading-2': {
+      'font-weight': 'var(--gl-heading-2-font-weight)',
+      'margin-top': 'var(--gl-heading-2-margin-top)',
+      'font-size': 'var(--gl-heading-2-font-size)',
+      'letter-spacing': 'var(--gl-heading-2-letter-spacing)',
+      'line-height': 'var(--gl-heading-2-line-height)',
+      'margin-bottom': 'var(--gl-heading-2-margin-bottom)',
+      color: 'var(--gl-heading-2-color)',
+    },
+    '.heading-3': {
+      'font-weight': 'var(--gl-heading-3-font-weight)',
+      'margin-top': 'var(--gl-heading-3-margin-top)',
+      'font-size': 'var(--gl-heading-3-font-size)',
+      'letter-spacing': 'var(--gl-heading-3-letter-spacing)',
+      'line-height': 'var(--gl-heading-3-line-height)',
+      'margin-bottom': 'var(--gl-heading-3-margin-bottom)',
+      color: 'var(--gl-heading-3-color)',
+    },
+    '.heading-4': {
+      'font-weight': 'var(--gl-heading-4-font-weight)',
+      'margin-top': 'var(--gl-heading-4-margin-top)',
+      'font-size': 'var(--gl-heading-4-font-size)',
+      'letter-spacing': 'var(--gl-heading-4-letter-spacing)',
+      'line-height': 'var(--gl-heading-4-line-height)',
+      'margin-bottom': 'var(--gl-heading-4-margin-bottom)',
+      color: 'var(--gl-heading-4-color)',
+    },
+    '.heading-5': {
+      'font-weight': 'var(--gl-heading-5-font-weight)',
+      'margin-top': 'var(--gl-heading-5-margin-top)',
+      'font-size': 'var(--gl-heading-5-font-size)',
+      'letter-spacing': 'var(--gl-heading-5-letter-spacing)',
+      'line-height': 'var(--gl-heading-5-line-height)',
+      'margin-bottom': 'var(--gl-heading-5-margin-bottom)',
+      color: 'var(--gl-heading-5-color)',
+    },
+    '.heading-6': {
+      'font-weight': 'var(--gl-heading-6-font-weight)',
+      'margin-top': 'var(--gl-heading-6-margin-top)',
+      'font-size': 'var(--gl-heading-6-font-size)',
+      'letter-spacing': 'var(--gl-heading-6-letter-spacing)',
+      'line-height': 'var(--gl-heading-6-line-height)',
+      'margin-bottom': 'var(--gl-heading-6-margin-bottom)',
+      color: 'var(--gl-heading-6-color)',
+    },
+    '.heading-scale-100': {
+      'font-weight': 'var(--gl-heading-scale-100-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-100-margin-top)',
+      'font-size': 'var(--gl-heading-scale-100-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-100-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-100-line-height)',
+      color: 'var(--gl-heading-scale-100-color)',
+    },
+    '.heading-scale-200': {
+      'font-weight': 'var(--gl-heading-scale-200-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-200-margin-top)',
+      'font-size': 'var(--gl-heading-scale-200-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-200-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-200-line-height)',
+      color: 'var(--gl-heading-scale-200-color)',
+    },
+    '.heading-scale-300': {
+      'font-weight': 'var(--gl-heading-scale-300-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-300-margin-top)',
+      'font-size': 'var(--gl-heading-scale-300-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-300-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-300-line-height)',
+      color: 'var(--gl-heading-scale-300-color)',
+    },
+    '.heading-scale-400': {
+      'font-weight': 'var(--gl-heading-scale-400-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-400-margin-top)',
+      'font-size': 'var(--gl-heading-scale-400-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-400-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-400-line-height)',
+      color: 'var(--gl-heading-scale-400-color)',
+    },
+    '.heading-scale-500': {
+      'font-weight': 'var(--gl-heading-scale-500-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-500-margin-top)',
+      'font-size': 'var(--gl-heading-scale-500-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-500-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-500-line-height)',
+      color: 'var(--gl-heading-scale-500-color)',
+    },
+    '.heading-scale-600': {
+      'font-weight': 'var(--gl-heading-scale-600-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-600-margin-top)',
+      'font-size': 'var(--gl-heading-scale-600-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-600-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-600-line-height)',
+      color: 'var(--gl-heading-scale-600-color)',
+    },
+    '.heading-scale-700': {
+      'font-weight': 'var(--gl-heading-scale-700-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-700-margin-top)',
+      'font-size': 'var(--gl-heading-scale-700-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-700-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-700-line-height)',
+      color: 'var(--gl-heading-scale-700-color)',
+    },
+    '.heading-scale-800': {
+      'font-weight': 'var(--gl-heading-scale-800-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-800-margin-top)',
+      'font-size': 'var(--gl-heading-scale-800-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-800-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-800-line-height)',
+      color: 'var(--gl-heading-scale-800-color)',
+    },
+    '.heading-scale-100-fixed': {
+      'font-weight': 'var(--gl-heading-scale-100-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-100-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-100-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-100-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-100-fixed-line-height)',
+      color: 'var(--gl-heading-scale-100-fixed-color)',
+    },
+    '.heading-scale-200-fixed': {
+      'font-weight': 'var(--gl-heading-scale-200-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-200-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-200-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-200-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-200-fixed-line-height)',
+      color: 'var(--gl-heading-scale-200-fixed-color)',
+    },
+    '.heading-scale-300-fixed': {
+      'font-weight': 'var(--gl-heading-scale-300-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-300-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-300-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-300-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-300-fixed-line-height)',
+      color: 'var(--gl-heading-scale-300-fixed-color)',
+    },
+    '.heading-scale-400-fixed': {
+      'font-weight': 'var(--gl-heading-scale-400-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-400-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-400-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-400-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-400-fixed-line-height)',
+      color: 'var(--gl-heading-scale-400-fixed-color)',
+    },
+    '.heading-scale-500-fixed': {
+      'font-weight': 'var(--gl-heading-scale-500-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-500-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-500-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-500-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-500-fixed-line-height)',
+      color: 'var(--gl-heading-scale-500-fixed-color)',
+    },
+    '.heading-scale-600-fixed': {
+      'font-weight': 'var(--gl-heading-scale-600-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-600-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-600-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-600-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-600-fixed-line-height)',
+      color: 'var(--gl-heading-scale-600-fixed-color)',
+    },
+    '.heading-scale-700-fixed': {
+      'font-weight': 'var(--gl-heading-scale-700-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-700-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-700-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-700-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-700-fixed-line-height)',
+      color: 'var(--gl-heading-scale-700-fixed-color)',
+    },
+    '.heading-scale-800-fixed': {
+      'font-weight': 'var(--gl-heading-scale-800-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-scale-800-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-scale-800-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-scale-800-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-scale-800-fixed-line-height)',
+      color: 'var(--gl-heading-scale-800-fixed-color)',
+    },
+    '.heading-display': {
+      'font-weight': 'var(--gl-heading-display-font-weight)',
+      'margin-top': 'var(--gl-heading-display-margin-top)',
+      'font-size': 'var(--gl-heading-display-font-size)',
+      'letter-spacing': 'var(--gl-heading-display-letter-spacing)',
+      'line-height': 'var(--gl-heading-display-line-height)',
+      'margin-bottom': 'var(--gl-heading-display-margin-bottom)',
+      color: 'var(--gl-heading-display-color)',
+    },
+    '.heading-1-fixed': {
+      'font-weight': 'var(--gl-heading-1-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-1-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-1-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-1-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-1-fixed-line-height)',
+      'margin-bottom': 'var(--gl-heading-1-fixed-margin-bottom)',
+      color: 'var(--gl-heading-1-fixed-color)',
+    },
+    '.heading-2-fixed': {
+      'font-weight': 'var(--gl-heading-2-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-2-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-2-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-2-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-2-fixed-line-height)',
+      'margin-bottom': 'var(--gl-heading-2-fixed-margin-bottom)',
+      color: 'var(--gl-heading-2-fixed-color)',
+    },
+    '.heading-3-fixed': {
+      'font-weight': 'var(--gl-heading-3-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-3-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-3-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-3-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-3-fixed-line-height)',
+      'margin-bottom': 'var(--gl-heading-3-fixed-margin-bottom)',
+      color: 'var(--gl-heading-3-fixed-color)',
+    },
+    '.heading-4-fixed': {
+      'font-weight': 'var(--gl-heading-4-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-4-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-4-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-4-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-4-fixed-line-height)',
+      'margin-bottom': 'var(--gl-heading-4-fixed-margin-bottom)',
+      color: 'var(--gl-heading-4-fixed-color)',
+    },
+    '.heading-5-fixed': {
+      'font-weight': 'var(--gl-heading-5-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-5-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-5-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-5-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-5-fixed-line-height)',
+      'margin-bottom': 'var(--gl-heading-5-fixed-margin-bottom)',
+      color: 'var(--gl-heading-5-fixed-color)',
+    },
+    '.heading-6-fixed': {
+      'font-weight': 'var(--gl-heading-6-fixed-font-weight)',
+      'margin-top': 'var(--gl-heading-6-fixed-margin-top)',
+      'font-size': 'var(--gl-heading-6-fixed-font-size)',
+      'letter-spacing': 'var(--gl-heading-6-fixed-letter-spacing)',
+      'line-height': 'var(--gl-heading-6-fixed-line-height)',
+      'margin-bottom': 'var(--gl-heading-6-fixed-margin-bottom)',
+      color: 'var(--gl-heading-6-fixed-color)',
+    },
+  },
+};

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

@@ -432,6 +432,7 @@ const lineHeight = {
   42: 'var(--gl-line-height-42)',
   44: 'var(--gl-line-height-44)',
   52: 'var(--gl-line-height-52)',
+  heading: 'var(--gl-line-height-heading)',
 };
 const fontFamily = {
   regular: 'var(--gl-font-family-regular)',
@@ -466,6 +467,7 @@ const fontWeight = {
   normal: 'var(--gl-font-weight-normal)',
   semibold: 'var(--gl-font-weight-semibold)',
   bold: 'var(--gl-font-weight-bold)',
+  heading: 'var(--gl-font-weight-heading)',
 };
 
 const colors = {