From 026a7e2c231e896895318f38e9a9ae2f435b8d1e Mon Sep 17 00:00:00 2001 From: Jared White Date: Mon, 19 Jun 2023 18:23:29 -0700 Subject: [PATCH] chore: add screen size variables and fix lg size (#41) --- .vscode/settings.json | 3 +++ package.json | 2 ++ postcss.config.js | 6 ++++++ src/blocks/Card.scss | 2 +- src/global/text.scss | 2 +- src/global/tokens/screens.scss | 13 ++++++++++++- src/layout/Grid.scss | 8 ++++---- yarn.lock | 35 ++++++++++++++++++++++++++++++++++ 8 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..84c191f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "scss.lint.unknownAtRules": "ignore" +} \ No newline at end of file diff --git a/package.json b/package.json index 5b57f91..23a49cb 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "typescript": "^4.4.2" }, "devDependencies": { + "@csstools/postcss-global-data": "^1.0.3", "@storybook/addon-actions": "^6.5.16", "@storybook/addon-essentials": "^6.5.16", "@storybook/addon-interactions": "^6.5.16", @@ -57,6 +58,7 @@ "@types/jest": "^27.0.1", "babel-plugin-named-exports-order": "^0.0.2", "postcss": "8.4.19", + "postcss-custom-media": "^9.1.4", "postcss-import": "^14.1.0", "postcss-load-config": "^3.1.4", "postcss-loader": "7.0.1", diff --git a/postcss.config.js b/postcss.config.js index 90d9fff..efd399e 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,11 @@ module.exports = { plugins: { + "@csstools/postcss-global-data": { + files: [ + "src/global/tokens/screens.scss" + ] + }, + "postcss-custom-media": {}, autoprefixer: {}, }, } diff --git a/src/blocks/Card.scss b/src/blocks/Card.scss index f1e7f2d..24cc198 100644 --- a/src/blocks/Card.scss +++ b/src/blocks/Card.scss @@ -29,7 +29,7 @@ --card-header-padding-inline: var(--card-header-padding-inline-desktop); --card-content-padding-inline: var(--card-content-padding-inline-desktop); - @media (max-width: 640px) { /* small screen */ + @media (--sm-only) { --card-header-padding-inline: var(--card-header-padding-inline-mobile); --card-content-padding-inline: var(--card-content-padding-inline-mobile); } diff --git a/src/global/text.scss b/src/global/text.scss index a95b783..5fd6f81 100644 --- a/src/global/text.scss +++ b/src/global/text.scss @@ -83,7 +83,7 @@ } /* Stop largest headings down one size for mobile */ -@media (max-width: 640px) { +@media (--sm-only) { .text-heading-4xl { font-size: var(--bloom-type-heading-size-3xl); } diff --git a/src/global/tokens/screens.scss b/src/global/tokens/screens.scss index 36a73b2..14ab638 100644 --- a/src/global/tokens/screens.scss +++ b/src/global/tokens/screens.scss @@ -1,7 +1,18 @@ +@custom-media --sm-only (max-width: 639px); +@custom-media --sm-and-up (min-width: 640px); +@custom-media --md-down (max-width: 767px); +@custom-media --md-and-up (min-width: 768px); +@custom-media --lg-down (max-width: 1023px); +@custom-media --lg-and-up (min-width: 1024px); +@custom-media --xl-down (max-width: 1279px); +@custom-media --xl-and-up (min-width: 1280px); +@custom-media --2xl-down (max-width: 1439px); +@custom-media --2xl-and-up (min-width: 1440px); + :root { --bloom-screen-sm: 640px; --bloom-screen-md: 768px; - --bloom-screen-lg: 1200px; + --bloom-screen-lg: 1024px; --bloom-screen-xl: 1280px; --bloom-screen-2xl: 1440px; diff --git a/src/layout/Grid.scss b/src/layout/Grid.scss index 21200fd..6937ed9 100644 --- a/src/layout/Grid.scss +++ b/src/layout/Grid.scss @@ -8,14 +8,14 @@ --grid-gap: var(--grid-gap-md); - @media (max-width: 1023px) { + @media (--lg-down) { --grid-gap: var(--grid-gap-tablet); } display: grid; gap: var(--grid-gap); - @media (min-width: 1024px) { + @media (--lg-and-up) { &[data-spacing="sm"] { --grid-gap: var(--grid-gap-sm); } @@ -38,7 +38,7 @@ --grid-columns: auto-fit; --grid-minimum-column-size: 0; - @media (max-width: 639px) { + @media (--sm-only) { --grid-columns: 1; } @@ -51,7 +51,7 @@ overflow-wrap: break-word; } -@media (min-width: 640px) { +@media (--sm-and-up) { .grid-row[data-columns="4"] { --grid-columns: 4; } diff --git a/yarn.lock b/yarn.lock index d43e9ef..1d15562 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1203,6 +1203,26 @@ resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== +"@csstools/cascade-layer-name-parser@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.2.tgz#35253f57c6c83d684fe396672486c644e6a84127" + integrity sha512-xm7Mgwej/wBfLoK0K5LfntmPJzoULayl1XZY9JYgQgT29JiqNw++sLnx95u5y9zCihblzkyaRYJrsRMhIBzRdg== + +"@csstools/css-parser-algorithms@^2.1.1": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.2.0.tgz#1268b07196d1118296443aeff41bca27d94b0981" + integrity sha512-9BoQ/jSrPq4vv3b9jjLW+PNNv56KlDH5JMx5yASSNrCtvq70FCNZUjXRvbCeR9hYj9ZyhURtqpU/RFIgg6kiOw== + +"@csstools/css-tokenizer@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz#07ae11a0a06365d7ec686549db7b729bc036528e" + integrity sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA== + +"@csstools/media-query-list-parser@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.0.tgz#6e1a5e12e0d103cd13b94bddb88b878bd6866103" + integrity sha512-MXkR+TeaS2q9IkpyO6jVCdtA/bfpABJxIrfkLswThFN8EZZgI2RfAHhm6sDNDuYV25d5+b8Lj1fpTccIcSLPsQ== + "@csstools/normalize.css@*": version "12.0.0" resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4" @@ -1231,6 +1251,11 @@ dependencies: postcss-value-parser "^4.2.0" +"@csstools/postcss-global-data@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@csstools/postcss-global-data/-/postcss-global-data-1.0.3.tgz#baa266a7ed2372d4f7d0996f9148809134d901af" + integrity sha512-x2fZOl7RJJtKC9ZfG+1bdrQKeRfP1a3Ff4uF2/fykNUKly8E8Q7lw7oegsEnqenSEDC1xjk6qXJ/fcJkTAdcNg== + "@csstools/postcss-hwb-function@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b" @@ -12989,6 +13014,16 @@ postcss-custom-media@^8.0.2: dependencies: postcss-value-parser "^4.2.0" +postcss-custom-media@^9.1.4: + version "9.1.4" + resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-9.1.4.tgz#90ea49986b91512f95430775b191d83893142c16" + integrity sha512-4A7WEG3iIyKwfpxL5bkuSlHoHHGRTHl0212Z3uvpwJPyVfZJlkZAQNNgVC+oogrJgksDnfKyuuMbG6HafZPW8Q== + dependencies: + "@csstools/cascade-layer-name-parser" "^1.0.2" + "@csstools/css-parser-algorithms" "^2.1.1" + "@csstools/css-tokenizer" "^2.1.1" + "@csstools/media-query-list-parser" "^2.1.0" + postcss-custom-properties@^12.1.10: version "12.1.10" resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.10.tgz#624517179fd4cf50078a7a60f628d5782e7d4903"