@gitlab/ui 66.9.0 → 66.10.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [66.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.10.0...v66.10.1) (2023-09-19)
+
+
+### Bug Fixes
+
+* adjust dark mode preview text color ([2196116](https://gitlab.com/gitlab-org/gitlab-ui/commit/2196116088f4d5100ae8095f4716f04417eac75f))
+* use CSS variables instead of JS literals for axis color ([6bc13ca](https://gitlab.com/gitlab-org/gitlab-ui/commit/6bc13ca9eb0d901feb71a263a4b6107cf3f82e15))
+* **GlChart:** make chart legend text visible in dark mode ([0ec9e7c](https://gitlab.com/gitlab-org/gitlab-ui/commit/0ec9e7cfbc387d5bcdbf490ebd3e51ff6fa666ef))
+
+# [66.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.9.0...v66.10.0) (2023-09-19)
+
+
+### Features
+
+* **Typography:** Add font-size variable map and heading mixins ([c412fe8](https://gitlab.com/gitlab-org/gitlab-ui/commit/c412fe834011683df677d78dbd793cdd65339783))
+
 # [66.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.8.0...v66.9.0) (2023-09-13)
 
 

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 22:15:41 GMT
+ * Generated on Tue, 19 Sep 2023 15:15:08 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 22:15:41 GMT
+ * Generated on Tue, 19 Sep 2023 15:15:08 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 22:15:41 GMT
+ * Generated on Tue, 19 Sep 2023 15:15:08 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 22:15:41 GMT
+ * Generated on Tue, 19 Sep 2023 15:15:08 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Sep 2023 22:15:41 GMT
+// Generated on Tue, 19 Sep 2023 15:15:08 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Sep 2023 22:15:41 GMT
+// Generated on Tue, 19 Sep 2023 15:15:08 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/dist/utils/charts/theme.js

@@ -24,7 +24,7 @@ const axes = {
   axisLabel: {
     margin: 8,
     show: true,
-    color: GRAY_600,
+    color: `var(--gray-600, ${GRAY_600})`,
     hideOverlap: true
   },
   axisLine: {
@@ -69,7 +69,7 @@ const createTheme = function () {
     color: colorPaletteDefault,
     backgroundColor: 'transparent',
     textStyle: {
-      color: GRAY_900
+      color: `var(--gl-text-color, ${GRAY_900})`
     },
     markLine: {
       silent: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.9.0",
+  "version": "66.10.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,28 +88,28 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.17",
+    "@babel/core": "^7.22.19",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.61.0",
+    "@gitlab/svgs": "3.62.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.4.0",
-    "@storybook/addon-docs": "7.4.0",
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-storyshots": "7.4.0",
-    "@storybook/addon-storyshots-puppeteer": "7.4.0",
-    "@storybook/addon-viewport": "7.4.0",
-    "@storybook/builder-webpack5": "7.4.0",
-    "@storybook/theming": "7.4.0",
-    "@storybook/vue": "7.4.0",
-    "@storybook/vue-webpack5": "7.4.0",
-    "@storybook/vue3": "7.4.0",
-    "@storybook/vue3-webpack5": "7.4.0",
+    "@storybook/addon-a11y": "7.4.2",
+    "@storybook/addon-docs": "7.4.2",
+    "@storybook/addon-essentials": "7.4.2",
+    "@storybook/addon-storyshots": "7.4.2",
+    "@storybook/addon-storyshots-puppeteer": "7.4.2",
+    "@storybook/addon-viewport": "7.4.2",
+    "@storybook/builder-webpack5": "7.4.2",
+    "@storybook/theming": "7.4.2",
+    "@storybook/vue": "7.4.2",
+    "@storybook/vue-webpack5": "7.4.2",
+    "@storybook/vue3": "7.4.2",
+    "@storybook/vue3-webpack5": "7.4.2",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.1.0",
+    "cypress": "13.2.0",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
@@ -133,9 +133,9 @@
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.6.4",
-    "jest-circus": "29.6.4",
-    "jest-environment-jsdom": "29.6.4",
+    "jest": "^29.7.0",
+    "jest-circus": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.0",
+    "storybook": "7.4.2",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/scss_to_js/scss_variables.js

@@ -263,22 +263,21 @@ 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 glMonospaceFont = ''
+export const glRegularFont = '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'
+export const glFonts = '("monospace": ("GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": ("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"))'
+export const glFontSizesFixed = '(100: 0.75rem, 200: 0.8125rem, 300: 0.875rem, 400: 1rem, 500: 1.125rem, 600: 1.3125rem, 700: 1.5rem, 800: 1.75rem)'
+export const glFontSizes = '(100: 0.75rem, 200: 0.8125rem, 300: 0.875rem, 400: 1rem, 500: clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem), 600: clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem), 700: clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem), 800: clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem))'
+export const glFontHeading = '"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'
+export const glFontWeightHeading = '600'
+export const glLetterSpacingHeading = 'inherit'
+export const glLetterSpacingHeadingReduced = '-0.01em'
+export const glLineHeightHeading = '1.25'
+export const glLineHeightHeadingDisplay = '1.125'
+export const glMbHeading = '1rem'
+export const glMbHeadingDisplay = '1.5rem'
+export const glTextColorHeading = '#333238'
+export const glTextWrapHeading = 'pretty'
 export const glFontSize = '0.875rem'
 export const glFontSizeXs = '0.625rem'
 export const glFontSizeSm = '0.75rem'
@@ -306,9 +305,6 @@ export const glFontSizeMarkdownH3Xl = '1.4375rem'
 export const glFontSizeCompactMarkdownH1 = '1.1875rem'
 export const glFontSizeCompactMarkdownH1Md = '1.25rem'
 export const glFontSizeCompactMarkdownH1Xl = '1.4375rem'
-export const glMonospaceFont = ''
-export const glRegularFont = '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'
-export const glFonts = '("monospace": ("GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": ("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"))'
 export const borderColor = '#dcdcde'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'

package/scss_to_js/scss_variables.json

@@ -1365,84 +1365,175 @@
       "compiledValue": "3.25rem"
     },
     {
-      "name": "$gl-font-size-100-fixed",
-      "value": "px-to-rem(12px)",
-      "compiledValue": "0.75rem"
+      "name": "$gl-monospace-font",
+      "value": "'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+      "compiledValue": ""
     },
     {
-      "name": "$gl-font-size-200-fixed",
-      "value": "px-to-rem(13px)",
-      "compiledValue": "0.8125rem"
+      "name": "$gl-regular-font",
+      "value": "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",
+      "compiledValue": "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"
     },
     {
-      "name": "$gl-font-size-300-fixed",
-      "value": "px-to-rem(14px)",
-      "compiledValue": "0.875rem"
+      "name": "$gl-fonts",
+      "value": "( 'monospace': $gl-monospace-font, 'regular': $gl-regular-font, )",
+      "mapValue": [
+        {
+          "name": "monospace",
+          "value": "$gl-monospace-font",
+          "compiledValue": "\"GitLab Mono\", \"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
+        },
+        {
+          "name": "regular",
+          "value": "$gl-regular-font",
+          "compiledValue": "\"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"
+        }
+      ],
+      "compiledValue": "(\"monospace\": (\"GitLab Mono\", \"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace), \"regular\": (\"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\"))"
     },
     {
-      "name": "$gl-font-size-400-fixed",
-      "value": "px-to-rem(16px)",
-      "compiledValue": "1rem"
+      "name": "$gl-font-sizes-fixed",
+      "value": "( 100: px-to-rem(12px), 200: px-to-rem(13px), 300: px-to-rem(14px), 400: px-to-rem(16px), 500: px-to-rem(18px), 600: px-to-rem(21px), 700: px-to-rem(24px), 800: px-to-rem(28px), )",
+      "mapValue": [
+        {
+          "name": "100",
+          "value": "px-to-rem(12px)",
+          "compiledValue": "0.75rem"
+        },
+        {
+          "name": "200",
+          "value": "px-to-rem(13px)",
+          "compiledValue": "0.8125rem"
+        },
+        {
+          "name": "300",
+          "value": "px-to-rem(14px)",
+          "compiledValue": "0.875rem"
+        },
+        {
+          "name": "400",
+          "value": "px-to-rem(16px)",
+          "compiledValue": "1rem"
+        },
+        {
+          "name": "500",
+          "value": "px-to-rem(18px)",
+          "compiledValue": "1.125rem"
+        },
+        {
+          "name": "600",
+          "value": "px-to-rem(21px)",
+          "compiledValue": "1.3125rem"
+        },
+        {
+          "name": "700",
+          "value": "px-to-rem(24px)",
+          "compiledValue": "1.5rem"
+        },
+        {
+          "name": "800",
+          "value": "px-to-rem(28px)",
+          "compiledValue": "1.75rem"
+        }
+      ],
+      "compiledValue": "(100: 0.75rem, 200: 0.8125rem, 300: 0.875rem, 400: 1rem, 500: 1.125rem, 600: 1.3125rem, 700: 1.5rem, 800: 1.75rem)"
     },
     {
-      "name": "$gl-font-size-500-fixed",
-      "value": "px-to-rem(18px)",
-      "compiledValue": "1.125rem"
+      "name": "$gl-font-sizes",
+      "value": "( 100: map-get($gl-font-sizes-fixed, 100), 200: map-get($gl-font-sizes-fixed, 200), 300: map-get($gl-font-sizes-fixed, 300), 400: map-get($gl-font-sizes-fixed, 400), 500: clamp-between(map-get($gl-font-sizes-fixed, 500), px-to-rem(20px)), 600: clamp-between(map-get($gl-font-sizes-fixed, 600), px-to-rem(25px)), 700: clamp-between(map-get($gl-font-sizes-fixed, 700), px-to-rem(30px)), 800: clamp-between(map-get($gl-font-sizes-fixed, 800), px-to-rem(36px)), )",
+      "mapValue": [
+        {
+          "name": "100",
+          "value": "map-get($gl-font-sizes-fixed, 100)",
+          "compiledValue": "0.75rem"
+        },
+        {
+          "name": "200",
+          "value": "map-get($gl-font-sizes-fixed, 200)",
+          "compiledValue": "0.8125rem"
+        },
+        {
+          "name": "300",
+          "value": "map-get($gl-font-sizes-fixed, 300)",
+          "compiledValue": "0.875rem"
+        },
+        {
+          "name": "400",
+          "value": "map-get($gl-font-sizes-fixed, 400)",
+          "compiledValue": "1rem"
+        },
+        {
+          "name": "500",
+          "value": "clamp-between(map-get($gl-font-sizes-fixed, 500)",
+          "compiledValue": ""
+        },
+        {
+          "name": "600",
+          "value": "clamp-between(map-get($gl-font-sizes-fixed, 600)",
+          "compiledValue": ""
+        },
+        {
+          "name": "700",
+          "value": "clamp-between(map-get($gl-font-sizes-fixed, 700)",
+          "compiledValue": ""
+        },
+        {
+          "name": "800",
+          "value": "clamp-between(map-get($gl-font-sizes-fixed, 800)",
+          "compiledValue": ""
+        }
+      ],
+      "compiledValue": "(100: 0.75rem, 200: 0.8125rem, 300: 0.875rem, 400: 1rem, 500: clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem), 600: clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem), 700: clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem), 800: clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem))"
     },
     {
-      "name": "$gl-font-size-600-fixed",
-      "value": "px-to-rem(21px)",
-      "compiledValue": "1.3125rem"
+      "name": "$gl-font-heading",
+      "value": "$gl-regular-font",
+      "compiledValue": "\"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"
     },
     {
-      "name": "$gl-font-size-700-fixed",
-      "value": "px-to-rem(24px)",
-      "compiledValue": "1.5rem"
+      "name": "$gl-font-weight-heading",
+      "value": "600",
+      "compiledValue": "600"
     },
     {
-      "name": "$gl-font-size-800-fixed",
-      "value": "px-to-rem(28px)",
-      "compiledValue": "1.75rem"
+      "name": "$gl-letter-spacing-heading",
+      "value": "inherit",
+      "compiledValue": "inherit"
     },
     {
-      "name": "$gl-font-size-100",
-      "value": "$gl-font-size-100-fixed",
-      "compiledValue": "0.75rem"
+      "name": "$gl-letter-spacing-heading-reduced",
+      "value": "-0.01em",
+      "compiledValue": "-0.01em"
     },
     {
-      "name": "$gl-font-size-200",
-      "value": "$gl-font-size-200-fixed",
-      "compiledValue": "0.8125rem"
+      "name": "$gl-line-height-heading",
+      "value": "1.25",
+      "compiledValue": "1.25"
     },
     {
-      "name": "$gl-font-size-300",
-      "value": "$gl-font-size-300-fixed",
-      "compiledValue": "0.875rem"
+      "name": "$gl-line-height-heading-display",
+      "value": "1.125",
+      "compiledValue": "1.125"
     },
     {
-      "name": "$gl-font-size-400",
-      "value": "$gl-font-size-400-fixed",
+      "name": "$gl-mb-heading",
+      "value": "$gl-spacing-scale-5",
       "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-mb-heading-display",
+      "value": "$gl-spacing-scale-6",
+      "compiledValue": "1.5rem"
     },
     {
-      "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-text-color-heading",
+      "value": "$gl-text-color",
+      "compiledValue": "#333238"
     },
     {
-      "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-text-wrap-heading",
+      "value": "pretty",
+      "compiledValue": "pretty"
     },
     {
       "name": "$gl-font-size",
@@ -1579,33 +1670,6 @@
       "value": "px-to-rem(23px)",
       "compiledValue": "1.4375rem"
     },
-    {
-      "name": "$gl-monospace-font",
-      "value": "'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
-      "compiledValue": ""
-    },
-    {
-      "name": "$gl-regular-font",
-      "value": "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",
-      "compiledValue": "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"
-    },
-    {
-      "name": "$gl-fonts",
-      "value": "( 'monospace': $gl-monospace-font, 'regular': $gl-regular-font, )",
-      "mapValue": [
-        {
-          "name": "monospace",
-          "value": "$gl-monospace-font",
-          "compiledValue": "\"GitLab Mono\", \"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
-        },
-        {
-          "name": "regular",
-          "value": "$gl-regular-font",
-          "compiledValue": "\"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"
-        }
-      ],
-      "compiledValue": "(\"monospace\": (\"GitLab Mono\", \"JetBrains Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace), \"regular\": (\"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\"))"
-    },
     {
       "name": "$border-color",
       "value": "$gray-100",

package/src/components/base/daterange_picker/daterange_picker.stories.js

@@ -21,9 +21,9 @@ const generateProps = ({
   maxDateRange = 0,
   sameDaySelection = false,
   tooltip = '',
-  startPickerClass = 'gl-text-blue-500',
-  endPickerClass = 'gl-text-red-500',
-  labelClass = 'gl-font-style-italic',
+  startPickerClass,
+  endPickerClass,
+  labelClass,
   theme = defaultValue('theme'),
 } = {}) => ({
   defaultMinDate: new Date(defaultMinDate),

package/src/scss/mixins.scss

@@ -122,3 +122,49 @@
     @content;
   }
 }
+
+// Helper functions to aid maintenance of heading styles
+
+// Because we can't interpolate into a variable name we have to do some stuff
+@function get-font-size-variable($size, $fixed) {
+  @if $fixed == true {
+    @if map-has-key($gl-font-sizes-fixed, $size) {
+      @return map-get($gl-font-sizes-fixed, $size);
+    } @else {
+      @error "#{$size} is not a valid fixed font size property";
+      @return null;
+    }
+  } @else {
+    @if map-has-key($gl-font-sizes, $size) {
+      @return map-get($gl-font-sizes, $size);
+    } @else {
+      @error "#{$size} is not a valid font size property";
+      @return null;
+    }
+  }
+}
+
+// Set fixed as false by default, matching desired usage in the product
+// Headings do not have margin included, margin is determined by the context
+@mixin gl-heading($size, $fixed: false) {
+  // These settings apply to all headings
+  font-weight: $gl-font-weight-heading;
+  margin-top: 0; // override bootstrap reset in GitLab
+
+  // Because we can't interpolate into a variable name we have to do some stuff
+  font-size: get-font-size-variable($size, $fixed);
+
+  // Larger headings have less letter spacing
+  @if ($size <= 500) {
+    letter-spacing: $gl-letter-spacing-heading;
+  } @else {
+    letter-spacing: $gl-letter-spacing-heading-reduced;
+  }
+
+  // Display heading has different line height
+  @if ($size == 800) {
+    line-height: $gl-line-height-heading-display;
+  } @else {
+    line-height: $gl-line-height-heading;
+  }
+}

package/src/scss/storybook_dark_mode.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 // conditional overrides for dark mode for use in storybook.
 // Because we only use application.css from gitlab (and not
 // application_dark), we need to override some base rules so
@@ -9,7 +11,11 @@
 
 .gl-dark {
   --color-body-bg: #1f1f1f;
-  --color-body-text: #fff;
+
+  // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
+  // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
+  --gl-text-color: #{$gray-50};
+  --gray-600: #{$gray-300};
 
   color-scheme: dark;
 
@@ -18,6 +24,6 @@
     // We can delete these once $body-bg and $body-color
     // variables in variables.scss are updated to use CSS custom properties
     background-color: var(--color-body-bg);
-    color: var(--color-body-text);
+    color: var(--gl-text-color);
   }
 }

package/src/scss/variables.scss

@@ -338,6 +338,18 @@ $gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);
 
+// Fonts
+$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
+  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
+$gl-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' !default;
+
+$gl-fonts: (
+  'monospace': $gl-monospace-font,
+  'regular': $gl-regular-font,
+);
+
 // 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
@@ -345,24 +357,44 @@ $gl-line-height-52: px-to-rem(52px);
 // 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);
+$gl-font-sizes-fixed: (
+  100: px-to-rem(12px),
+  200: px-to-rem(13px),
+  300: px-to-rem(14px),
+  400: px-to-rem(16px),
+  500: px-to-rem(18px),
+  600: px-to-rem(21px),
+  700: px-to-rem(24px),
+  800: 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))};
+$gl-font-sizes: (
+  100: map-get($gl-font-sizes-fixed, 100),
+  200: map-get($gl-font-sizes-fixed, 200),
+  300: map-get($gl-font-sizes-fixed, 300),
+  400: map-get($gl-font-sizes-fixed, 400),
+  500: clamp-between(map-get($gl-font-sizes-fixed, 500), px-to-rem(20px)),
+  600: clamp-between(map-get($gl-font-sizes-fixed, 600), px-to-rem(25px)),
+  700: clamp-between(map-get($gl-font-sizes-fixed, 700), px-to-rem(30px)),
+  800: clamp-between(map-get($gl-font-sizes-fixed, 800), px-to-rem(36px)),
+);
+
+// Heading variables
+// Not all are currently used, but documented here to capture intent
+$gl-font-heading: $gl-regular-font;
+$gl-font-weight-heading: 600;
+$gl-letter-spacing-heading: inherit;
+$gl-letter-spacing-heading-reduced: -0.01em;
+$gl-line-height-heading: 1.25;
+$gl-line-height-heading-display: 1.125;
+$gl-mb-heading: $gl-spacing-scale-5;
+$gl-mb-heading-display: $gl-spacing-scale-6;
+$gl-text-color-heading: $gl-text-color;
+// Not yet supported, but we'll be ready
+$gl-text-wrap-heading: pretty;
+
+// END New UI type scale
 
 // UI typescale
 
@@ -417,18 +449,6 @@ $gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
 // media xl (min-width: 1200px)
 $gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
 
-// Fonts
-$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
-  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
-$gl-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' !default;
-
-$gl-fonts: (
-  'monospace': $gl-monospace-font,
-  'regular': $gl-regular-font,
-);
-
 $border-color: $gray-100 !default;
 
 // use px for borders rather than rem

package/src/utils/charts/theme.js

@@ -162,7 +162,7 @@ const axes = {
   axisLabel: {
     margin: 8,
     show: true,
-    color: GRAY_600,
+    color: `var(--gray-600, ${GRAY_600})`,
     hideOverlap: true,
   },
   axisLine: {
@@ -209,7 +209,7 @@ export const createTheme = (options = {}) => ({
   color: colorPaletteDefault,
   backgroundColor: 'transparent',
   textStyle: {
-    color: GRAY_900,
+    color: `var(--gl-text-color, ${GRAY_900})`,
   },
   markLine: {
     silent: true,