@gitlab/ui 64.10.2 → 64.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [64.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.2...v64.11.0) (2023-06-16)
+
+
+### Features
+
+* **Typography:** add text size scale variables ([355c159](https://gitlab.com/gitlab-org/gitlab-ui/commit/355c159d5d1753273a65d6ff98c598c7d6b130c3))
+
 ## [64.10.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.1...v64.10.2) (2023-06-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.10.2",
+  "version": "64.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/scss_to_js/scss_variables.js

@@ -266,6 +266,22 @@ export const glLineHeight36 = '2.25rem'
 export const glLineHeight42 = '2.625rem'
 export const glLineHeight44 = '2.75rem'
 export const glLineHeight52 = '3.25rem'
+export const glFontSize100Fixed = '0.75rem'
+export const glFontSize200Fixed = '0.8125rem'
+export const glFontSize300Fixed = '0.875rem'
+export const glFontSize400Fixed = '1rem'
+export const glFontSize500Fixed = '1.125rem'
+export const glFontSize600Fixed = '1.3125rem'
+export const glFontSize700Fixed = '1.5rem'
+export const glFontSize800Fixed = '1.75rem'
+export const glFontSize100 = '0.75rem'
+export const glFontSize200 = '0.8125rem'
+export const glFontSize300 = '0.875rem'
+export const glFontSize400 = '1rem'
+export const glFontSize500 = 'clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem)'
+export const glFontSize600 = 'clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem)'
+export const glFontSize700 = 'clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem)'
+export const glFontSize800 = 'clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem)'
 export const glFontSize = '0.875rem'
 export const glFontSizeXs = '0.625rem'
 export const glFontSizeSm = '0.75rem'

package/scss_to_js/scss_variables.json

@@ -1379,6 +1379,86 @@
       "value": "px-to-rem(52px)",
       "compiledValue": "3.25rem"
     },
+    {
+      "name": "$gl-font-size-100-fixed",
+      "value": "px-to-rem(12px)",
+      "compiledValue": "0.75rem"
+    },
+    {
+      "name": "$gl-font-size-200-fixed",
+      "value": "px-to-rem(13px)",
+      "compiledValue": "0.8125rem"
+    },
+    {
+      "name": "$gl-font-size-300-fixed",
+      "value": "px-to-rem(14px)",
+      "compiledValue": "0.875rem"
+    },
+    {
+      "name": "$gl-font-size-400-fixed",
+      "value": "px-to-rem(16px)",
+      "compiledValue": "1rem"
+    },
+    {
+      "name": "$gl-font-size-500-fixed",
+      "value": "px-to-rem(18px)",
+      "compiledValue": "1.125rem"
+    },
+    {
+      "name": "$gl-font-size-600-fixed",
+      "value": "px-to-rem(21px)",
+      "compiledValue": "1.3125rem"
+    },
+    {
+      "name": "$gl-font-size-700-fixed",
+      "value": "px-to-rem(24px)",
+      "compiledValue": "1.5rem"
+    },
+    {
+      "name": "$gl-font-size-800-fixed",
+      "value": "px-to-rem(28px)",
+      "compiledValue": "1.75rem"
+    },
+    {
+      "name": "$gl-font-size-100",
+      "value": "$gl-font-size-100-fixed",
+      "compiledValue": "0.75rem"
+    },
+    {
+      "name": "$gl-font-size-200",
+      "value": "$gl-font-size-200-fixed",
+      "compiledValue": "0.8125rem"
+    },
+    {
+      "name": "$gl-font-size-300",
+      "value": "$gl-font-size-300-fixed",
+      "compiledValue": "0.875rem"
+    },
+    {
+      "name": "$gl-font-size-400",
+      "value": "$gl-font-size-400-fixed",
+      "compiledValue": "1rem"
+    },
+    {
+      "name": "$gl-font-size-500",
+      "value": "#{clamp-between($gl-font-size-500-fixed, px-to-rem(20px))}",
+      "compiledValue": "clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem)"
+    },
+    {
+      "name": "$gl-font-size-600",
+      "value": "#{clamp-between($gl-font-size-600-fixed, px-to-rem(25px))}",
+      "compiledValue": "clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem)"
+    },
+    {
+      "name": "$gl-font-size-700",
+      "value": "#{clamp-between($gl-font-size-700-fixed, px-to-rem(30px))}",
+      "compiledValue": "clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem)"
+    },
+    {
+      "name": "$gl-font-size-800",
+      "value": "#{clamp-between($gl-font-size-800-fixed, px-to-rem(36px))}",
+      "compiledValue": "clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem)"
+    },
     {
       "name": "$gl-font-size",
       "value": "px-to-rem(14px)",

package/src/scss/variables.scss

@@ -342,6 +342,32 @@ $gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);
 
+// New UI type scale
+// Implements the type scale from https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/15
+// Old variables and styles need to be removed after intergration
+
+// Font size scale
+
+// fixed scale (compact markdown)
+$gl-font-size-100-fixed: px-to-rem(12px);
+$gl-font-size-200-fixed: px-to-rem(13px);
+$gl-font-size-300-fixed: px-to-rem(14px);
+$gl-font-size-400-fixed: px-to-rem(16px);
+$gl-font-size-500-fixed: px-to-rem(18px);
+$gl-font-size-600-fixed: px-to-rem(21px);
+$gl-font-size-700-fixed: px-to-rem(24px);
+$gl-font-size-800-fixed: px-to-rem(28px);
+
+// dynamic scale (default) resizes based on viewport width
+$gl-font-size-100: $gl-font-size-100-fixed;
+$gl-font-size-200: $gl-font-size-200-fixed;
+$gl-font-size-300: $gl-font-size-300-fixed;
+$gl-font-size-400: $gl-font-size-400-fixed;
+$gl-font-size-500: #{clamp-between($gl-font-size-500-fixed, px-to-rem(20px))};
+$gl-font-size-600: #{clamp-between($gl-font-size-600-fixed, px-to-rem(25px))};
+$gl-font-size-700: #{clamp-between($gl-font-size-700-fixed, px-to-rem(30px))};
+$gl-font-size-800: #{clamp-between($gl-font-size-800-fixed, px-to-rem(36px))};
+
 // UI typescale
 
 // default (min-width: 0)