@gitlab/ui 123.7.0 → 123.8.0

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

@@ -420,6 +420,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 +534,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/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,