@gitlab/ui 66.8.0 → 66.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.8.0",
+  "version": "66.10.0",
   "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/components/base/skeleton_loader/skeleton_loader.md

@@ -9,6 +9,29 @@ loading animation. Any skeleton state components should be created with
 `<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton
 will be used. See "Default" and "Default With Custom Props" examples.
 
+**NOTE:** Skeleton loaders can also be composed with a `.gl-animate-skeleton-loader`
+CSS class. This CSS-based approach is easier to make responsive and match mocked elements.
+Feel free to use this approach if it suits your use case and please leave your
+feedback in this [Feedback for css-based skeleton loading
+indicator](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2319) issue.
+To improve developer experience and simplify matching Pajamas styles we're considering
+several improvements in the future, including adding more CSS util classes for
+this animation, or creating a dedicated component.  Here is an example of how
+you could replicate the default `<gl-skeleton-loader />` behavior with the
+CSS-based approach:
+
+```html
+<div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-20!"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-30!"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-26!"></div>
+</div>
+```
+
+See
+[animation.scss](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/scss/utility-mixins/animation.scss#L17)
+to learn more.
+
 ## Progressive Loading
 
 Determine if progressive loading is available, if it is break apart the skeleton to load data as it

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/utilities.scss

@@ -60,6 +60,19 @@
   }
 }
 
+$gl-animate-skeleton-loader-max-width: 64 * $grid-size;
+
+@keyframes gl-keyframes-skeleton-loader {
+
+  0% {
+    background-position-x: -$gl-animate-skeleton-loader-max-width;
+  }
+
+  100% {
+    background-position-x: $gl-animate-skeleton-loader-max-width;
+  }
+}
+
 .gl-spin {
   animation: gl-spinner-rotate 2s infinite linear;
 }
@@ -67,6 +80,48 @@
 .gl-spin\! {
   animation: gl-spinner-rotate 2s infinite linear !important;
 }
+
+.gl-animate-skeleton-loader {
+  $max-width: $gl-animate-skeleton-loader-max-width;
+
+  overflow: hidden;
+  max-width: $max-width;
+  background-size: $max-width 100%;
+  background-position: -$max-width 0;
+  background-color: $gray-100;
+  background-image: linear-gradient(to right,
+  $gray-100 0,
+  $gray-50 23%,
+  $gray-50 27%,
+  $gray-100 50%);
+  background-repeat: no-repeat;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: gl-keyframes-skeleton-loader 2.5s linear;
+    animation-delay: inherit;
+    animation-iteration-count: 3;
+  }
+}
+
+.gl-animate-skeleton-loader\! {
+  $max-width: $gl-animate-skeleton-loader-max-width !important;
+
+  overflow: hidden !important;
+  max-width: $max-width !important;
+  background-size: $max-width 100% !important;
+  background-position: -$max-width 0 !important;
+  background-color: $gray-100 !important;
+  background-image: linear-gradient(to right,
+  $gray-100 0,
+  $gray-50 23%,
+  $gray-50 27%,
+  $gray-100 50%) !important;
+  background-repeat: no-repeat !important;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: gl-keyframes-skeleton-loader 2.5s linear !important;
+    animation-delay: inherit !important;
+    animation-iteration-count: 3 !important;
+  }
+}
 .gl-appearance-none {
   appearance: none;
   -moz-appearance: none;
@@ -5396,6 +5451,14 @@
   max-width: $gl-spacing-scale-15 !important;
 }
 
+.gl-max-w-20 {
+  max-width: $gl-spacing-scale-20;
+}
+
+.gl-max-w-20\! {
+  max-width: $gl-spacing-scale-20 !important;
+}
+
 .gl-max-w-26 {
   max-width: $gl-spacing-scale-26;
 }
@@ -5404,6 +5467,14 @@
   max-width: $gl-spacing-scale-26 !important;
 }
 
+.gl-max-w-30 {
+  max-width: $gl-spacing-scale-30;
+}
+
+.gl-max-w-30\! {
+  max-width: $gl-spacing-scale-30 !important;
+}
+
 .gl-max-w-34 {
   max-width: $gl-spacing-scale-34;
 }