@gitlab/ui 125.0.0 → 126.0.0

package/src/tokens/constant/heading.tokens.json

@@ -0,0 +1,182 @@
+{
+  "heading": {
+    "scale": {
+      "100": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.100}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "100-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.100-fixed}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "200": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.200}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "200-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.200-fixed}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "300": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.300}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "300-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.300-fixed}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "400": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.400}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "400-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.400-fixed}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "500": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.500}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "500-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.500-fixed}",
+          "letterSpacing": "inherit",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "600": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.600}",
+          "letterSpacing": "{letter-spacing.heading}",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "600-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.600-fixed}",
+          "letterSpacing": "{letter-spacing.heading}",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "700": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.700}",
+          "letterSpacing": "{letter-spacing.heading}",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "700-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.700-fixed}",
+          "letterSpacing": "{letter-spacing.heading}",
+          "lineHeight": "{line-height.heading}",
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "800": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.800}",
+          "letterSpacing": "{letter-spacing.heading}",
+          "lineHeight": 1.125,
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      },
+      "800-fixed": {
+        "$value": {
+          "fontWeight": "{font.weight.heading}",
+          "marginTop": "{heading.default.margin.top}",
+          "fontSize": "{font.size.800-fixed}",
+          "letterSpacing": "{letter-spacing.heading}",
+          "lineHeight": 1.125,
+          "color": "{text.color.heading}"
+        },
+        "$type": "typography"
+      }
+    }
+  }
+}

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

@@ -10,6 +10,17 @@
           ]
         }
       }
+    },
+    "weight": {
+      "heading": {
+        "$value": "{font.weight.bold}",
+        "$type": "fontWeight",
+        "$extensions": {
+          "com.figma.scope": [
+            "FONT_WEIGHT"
+          ]
+        }
+      }
     }
   }
 }

package/src/tokens/semantic/heading.tokens.json

@@ -0,0 +1,178 @@
+{
+  "heading": {
+    "default": {
+      "margin": {
+        "top": {
+          "$value": 0,
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": []
+          }
+        },
+        "bottom": {
+          "$value": "{spacing-scale.5}",
+          "$type": "dimension",
+          "$extensions": {
+            "com.figma.scope": []
+          }
+        }
+      }
+    },
+    "display": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.800}",
+        "letterSpacing": "{letter-spacing.heading}",
+        "lineHeight": 1.125,
+        "marginBottom": "{spacing-scale.6}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "1-fixed": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.700-fixed}",
+        "letterSpacing": "{letter-spacing.heading}",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "1": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.700}",
+        "letterSpacing": "{letter-spacing.heading}",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "2-fixed": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.600-fixed}",
+        "letterSpacing": "{letter-spacing.heading}",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "2": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.600}",
+        "letterSpacing": "{letter-spacing.heading}",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "3-fixed": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.500-fixed}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "3": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.500}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "4-fixed": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.400-fixed}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "4": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.400}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "5-fixed": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.300-fixed}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "5": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.300}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "6-fixed": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.200-fixed}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    },
+    "6": {
+      "$value": {
+        "fontWeight": "{font.weight.heading}",
+        "marginTop": "{heading.default.margin.top}",
+        "fontSize": "{font.size.200}",
+        "letterSpacing": "inherit",
+        "lineHeight": "{line-height.heading}",
+        "marginBottom": "{heading.default.margin.bottom}",
+        "color": "{text.color.heading}"
+      },
+      "$type": "typography"
+    }
+  }
+}

package/src/tokens/semantic/letter_spacing.tokens.json

@@ -0,0 +1,13 @@
+{
+  "letter-spacing": {
+    "heading": {
+      "$value": "-0.01em",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": [
+          "LETTER_SPACING"
+        ]
+      }
+    }
+  }
+}

package/src/tokens/semantic/line_height.tokens.json

@@ -0,0 +1,13 @@
+{
+  "line-height": {
+    "heading": {
+      "$value": 1.25,
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": [
+          "LINE_HEIGHT"
+        ]
+      }
+    }
+  }
+}

package/tailwind.defaults.js

@@ -18,6 +18,7 @@ const {
   fontSize,
   fontWeight,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
+const { typographyComponents } = require('./src/tokens/build/tailwind/components.cjs');
 
 const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
 
@@ -127,259 +128,7 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
       },
       '-moz-appearance': 'textfield',
     },
-    '.heading-6': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.8125rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-6-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.8125rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-5': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.875rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-5-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.875rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-4': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-4-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-3': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-3-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.125rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-2': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-2-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.3125rem',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-1': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-1-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.5rem',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      'margin-bottom': '1rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-display': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.125',
-      'margin-bottom': '1.5rem',
-      color: 'var(--gl-text-color-heading)',
-    },
-    /**
-     * gl-heading-scale classes define default properties for heading typography
-     * based on font-size scale value and default or fixed sizing.
-     *
-     * Note: overrides Bootstrap margin-top, other margin is determined by
-     * individual context. Larger headings have reduced letter spacing.
-     * Display heading (800) has different line height.
-     */
-    '.heading-scale-100': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.75rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-100-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.75rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-200': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.8125rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-200-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.8125rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-300': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.875rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-300-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '0.875rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-400': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-400-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-500': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-500-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.125rem',
-      'letter-spacing': 'inherit',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-600': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-600-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.3125rem',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-700': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-700-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.5rem',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.25',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-800': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': 'clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.125',
-      color: 'var(--gl-text-color-heading)',
-    },
-    '.heading-scale-800-fixed': {
-      'font-weight': '600',
-      'margin-top': '0',
-      'font-size': '1.75rem',
-      'letter-spacing': '-0.01em',
-      'line-height': '1.125',
-      color: 'var(--gl-text-color-heading)',
-    },
+    ...typographyComponents,
   });
 
   addUtilities({