@gitlab/ui 123.7.0 → 123.8.0

package/dist/tokens/tailwind/tokens.cjs

@@ -25,6 +25,10 @@
   const opacity = {"0":"var(--gl-opacity-0)","1":"var(--gl-opacity-1)","2":"var(--gl-opacity-2)","3":"var(--gl-opacity-3)","4":"var(--gl-opacity-4)","5":"var(--gl-opacity-5)","6":"var(--gl-opacity-6)","7":"var(--gl-opacity-7)","8":"var(--gl-opacity-8)","9":"var(--gl-opacity-9)","10":"var(--gl-opacity-10)"};
   const zindexes = {"0":"var(--gl-zindex-0)","1":"var(--gl-zindex-1)","2":"var(--gl-zindex-2)","3":"var(--gl-zindex-3)","4":"var(--gl-zindex-4)","200":"var(--gl-zindex-200)","9999":"var(--gl-zindex-9999)"};
   const boxShadow = {"sm":"var(--gl-shadow-sm)","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',
@@ -109,5 +113,9 @@
     opacity,
     zIndex: zindexes,
     boxShadow,
+    lineHeight,
+    fontFamily,
+    fontSize,
+    fontWeight,
   }
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.7.0",
+  "version": "123.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -104,7 +104,7 @@
     "@gitlab/svgs": "3.147.0",
     "@jest/test-sequencer": "30.2.0",
     "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.2",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",

package/src/scss/variables.scss

@@ -111,9 +111,6 @@ $gl-text-wrap-heading: pretty;
 
 // default (min-width: 0)
 $gl-font-size: px-to-rem(14px);
-$gl-font-size-xs: px-to-rem(10px);
-$gl-font-size-sm: px-to-rem(12px);
-$gl-font-size-lg: px-to-rem(16px);
 
 $gl-font-size-h-display: px-to-rem(28px);
 $gl-font-size-h1: px-to-rem(23px);

package/src/tokens/build/css/tokens.css

@@ -230,6 +230,17 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-font-family-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';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-xs: 0.625rem;
+  --gl-font-size-sm: 0.75rem;
+  --gl-font-size-md: 0.875rem;
+  --gl-font-size-lg: 1rem;
+  --gl-font-weight-100: 100;
+  --gl-font-weight-300: 300;
+  --gl-font-weight-normal: 400;
+  --gl-font-weight-semibold: 500;
+  --gl-font-weight-bold: 600;
   --gl-line-height-12: 0.75rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-20: 1.25rem;
@@ -573,6 +584,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */

package/src/tokens/build/css/tokens.dark.css

@@ -230,6 +230,17 @@
   --gl-color-brand-gray-04: #45424d;
   --gl-color-brand-gray-05: #2b2838;
   --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-font-family-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';
+  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-xs: 0.625rem;
+  --gl-font-size-sm: 0.75rem;
+  --gl-font-size-md: 0.875rem;
+  --gl-font-size-lg: 1rem;
+  --gl-font-weight-100: 100;
+  --gl-font-weight-300: 300;
+  --gl-font-weight-normal: 400;
+  --gl-font-weight-semibold: 500;
+  --gl-font-weight-bold: 600;
   --gl-line-height-12: 0.75rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-20: 1.25rem;
@@ -584,6 +595,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */