Merge pull request #4444 from grommet/fix/breakpoints

Fix breakpoints output
grommet · Nov 21, 2024 · 9b008f7 · 9b008f7
2 parents 1e121a9 + 4acbe0e
commit 9b008f7
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/heavy-books-promise.md b/.changeset/heavy-books-promise.md
@@ -0,0 +1,5 @@
+---
+"hpe-design-tokens": minor
+---
+
+Remove media query from CSS output for dimension.medium.css
diff --git a/design-tokens/README.md b/design-tokens/README.md
@@ -18,8 +18,8 @@ npm i hpe-design-tokens
 
 ## Usage
 
-For usage instructions, see [HPE Design System design tokens documentation](https://design-system.hpe.design/tokens).
+For usage instructions, see [HPE Design System design tokens documentation](https://design-system.hpe.design/design-tokens).
 
 ## License
 
-[Apache-2.0](https://github.com/grommet/hpe-design-system/blob/design-tokens-alpha/design-tokens/LICENSE)
+[Apache-2.0](https://github.com/grommet/hpe-design-system/blob/design-tokens-stable/LICENSE)
diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js
@@ -291,7 +291,7 @@ try {
                 outputReferences: true,
                 mediaQuery:
                   parsedGlobal.breakpoint?.[mode] &&
-                  !['large', 'xlarge'].includes(mode) &&
+                  !['medium', 'large', 'xlarge'].includes(mode) &&
                   `max-width: ${numberToPixel(
                     parsedGlobal.breakpoint[mode].$value,
                   )}`,

diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx
@@ -441,7 +441,7 @@ const buildTheme = tokens => {
           xxlarge: small.hpe.size.content.xxlarge,
           full: '100%',
         },
-        value: global.hpe.breakpoint.xsmall,
+        value: parseInt(global.hpe.breakpoint.xsmall, 10),
       },
       small: {
         borderSize: {
@@ -473,13 +473,13 @@ const buildTheme = tokens => {
           xxlarge: small.hpe.size.content.xxlarge,
           full: '100%',
         },
-        value: global.hpe.breakpoint.small,
+        value: parseInt(global.hpe.breakpoint.small, 10),
       },
       medium: {
-        value: global.hpe.breakpoint.medium,
+        value: parseInt(global.hpe.breakpoint.medium, 10),
       },
       large: {
-        value: global.hpe.breakpoint.large,
+        value: parseInt(global.hpe.breakpoint.large, 10),
       },
       xlarge: {},
     },