From 71d39a3b0a1b89a271858423f8547a1b6488da01 Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 21 Nov 2024 13:33:41 -0800 Subject: [PATCH 1/2] Fix breakpoints output --- design-tokens/README.md | 4 ++-- design-tokens/src/scripts/build-style-dictionary.js | 2 +- sandbox/grommet-app/src/theme.jsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/design-tokens/README.md b/design-tokens/README.md index d3b84138a..8a8052149 100644 --- 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 index 59cd157d4..5f46bc3c8 100644 --- 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 index 51a3ad110..91e0007d5 100644 --- 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: {}, }, From 4acbe0e73bca96ea04ec7990a43b8f2510e48f97 Mon Sep 17 00:00:00 2001 From: Taylor Seamans Date: Thu, 21 Nov 2024 13:35:49 -0800 Subject: [PATCH 2/2] Create heavy-books-promise.md --- .changeset/heavy-books-promise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/heavy-books-promise.md diff --git a/.changeset/heavy-books-promise.md b/.changeset/heavy-books-promise.md new file mode 100644 index 000000000..7cd692b19 --- /dev/null +++ b/.changeset/heavy-books-promise.md @@ -0,0 +1,5 @@ +--- +"hpe-design-tokens": minor +--- + +Remove media query from CSS output for dimension.medium.css