From 1d61071cebab69f669d67c174e2af07a65af3d6c Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Wed, 13 Mar 2024 12:38:50 +0100 Subject: [PATCH 1/4] Add breakpoints tokens Since we need to control the layout for different sized screens and such, we need the breakpoints for the media queries. This commit adds the breakpoints to a file, and adds that to the style-dictionary build command. The same as how we define and use the Spacings. In this way we have 1 place where all the breakpoint values are set, and can change them or add to them later if needed. --- libs/pxweb2-ui/style-dictionary/build.js | 1 + .../src/global-tokens/breakpoints.json | 41 +++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json diff --git a/libs/pxweb2-ui/style-dictionary/build.js b/libs/pxweb2-ui/style-dictionary/build.js index 6e269359..3fb1619f 100644 --- a/libs/pxweb2-ui/style-dictionary/build.js +++ b/libs/pxweb2-ui/style-dictionary/build.js @@ -34,6 +34,7 @@ const configs = [ { source: [ './libs/pxweb2-ui/style-dictionary/src/global-tokens/spacing.json', + './libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json', ], platforms: { scss: { diff --git a/libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json b/libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json new file mode 100644 index 00000000..1ef2a1c9 --- /dev/null +++ b/libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json @@ -0,0 +1,41 @@ +{ + "breakpoints": { + "XSmall": { + "MinWidth": { + "value": "0px" + }, + "MaxWidth": { + "value": "479px" + } + }, + "Small": { + "MinWidth": { + "value": "480px" + }, + "MaxWidth": { + "value": "689px" + } + }, + "Medium": { + "MinWidth": { + "value": "690px" + }, + "MaxWidth": { + "value": "1259px" + } + }, + "Large": { + "MinWidth": { + "value": "1260px" + }, + "MaxWidth": { + "value": "1599px" + } + }, + "XLarge": { + "MinWidth": { + "value": "1600px" + } + } + } +} From 941df01b3e3154933edea510f8753efec6d3cc74 Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Wed, 13 Mar 2024 16:14:08 +0100 Subject: [PATCH 2/4] Add example of breakpoints to app Since we want to see the breakpoints working, this commit adds an example to the main app page. One thing to consider is that currently the breakpoint tokens are imported (@use) from the files that are generated in the ui lib, and not from inside the app itself. I am not sure if we want this, or to create another set of files inside the app's own folder, and import from there. This is very easy to add in our current implementation, just add another output file to the build.js in the lib. --- apps/pxweb2/src/app/app.module.scss | 43 ++++++++++++++++++++++++++++- apps/pxweb2/src/app/app.tsx | 3 ++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/apps/pxweb2/src/app/app.module.scss b/apps/pxweb2/src/app/app.module.scss index 3d8b4e28..ae4e9791 100644 --- a/apps/pxweb2/src/app/app.module.scss +++ b/apps/pxweb2/src/app/app.module.scss @@ -1,2 +1,43 @@ +@use '../../../../libs/pxweb2-ui/style-dictionary/dist/scss/fixed-variables.scss' + as fixed; - \ No newline at end of file +.breakpoints { + height: 50px; + width: 100%; +} + +@media (min-width: fixed.$breakpoints-x-small-min-width) and (max-width: fixed.$breakpoints-x-small-max-width) { + .breakpoints { + max-width: 100px; + color: white; + background-color: black; + } +} + +@media (min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-small-max-width) { + .breakpoints { + max-width: 200px; + background-color: red; + } +} + +@media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) { + .breakpoints { + max-width: 300px; + background-color: green; + } +} + +@media (min-width: fixed.$breakpoints-large-min-width) and (max-width: fixed.$breakpoints-large-max-width) { + .breakpoints { + max-width: 500px; + background-color: blue; + } +} + +@media (min-width: fixed.$breakpoints-x-large-min-width) { + .breakpoints { + max-width: 700px; + background-color: yellow; + } +} diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx index 1eca7824..3763a1dc 100644 --- a/apps/pxweb2/src/app/app.tsx +++ b/apps/pxweb2/src/app/app.tsx @@ -1,5 +1,7 @@ import { useTranslation, Trans } from 'react-i18next'; +import cl from 'clsx'; +import classes from './app.module.scss'; import { Button, Heading, @@ -225,6 +227,7 @@ export function App() { value: -2.28, })}

+
Breakpoint test
); } From 5df1e9804a1de3c177865f2afd9e6fd94b0595e5 Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Thu, 14 Mar 2024 12:17:23 +0100 Subject: [PATCH 3/4] Update app styling to use a vite alias for import Improves how the scss is imported. This commit adds the alias '$ui' to the pxweb2 app's vite config, which can be used to import from the pxweb2-ui lib in a cleaner way than traversing the filesystem with '../..'. Co-authored-by: Michael Pande <> --- apps/pxweb2/src/app/app.module.scss | 3 +-- apps/pxweb2/vite.config.ts | 7 +++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/pxweb2/src/app/app.module.scss b/apps/pxweb2/src/app/app.module.scss index ae4e9791..745e687d 100644 --- a/apps/pxweb2/src/app/app.module.scss +++ b/apps/pxweb2/src/app/app.module.scss @@ -1,5 +1,4 @@ -@use '../../../../libs/pxweb2-ui/style-dictionary/dist/scss/fixed-variables.scss' - as fixed; +@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed; .breakpoints { height: 50px; diff --git a/apps/pxweb2/vite.config.ts b/apps/pxweb2/vite.config.ts index ee7384c4..8046e7cb 100644 --- a/apps/pxweb2/vite.config.ts +++ b/apps/pxweb2/vite.config.ts @@ -2,6 +2,7 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import path from 'path'; export default defineConfig({ root: __dirname, @@ -32,6 +33,12 @@ export default defineConfig({ }, }, + resolve: { + alias: { + '$ui': path.resolve('libs/pxweb2-ui/'), + }, + }, + test: { globals: true, cache: { From 888b7b30dfe2971035f465588e37ab47fe88bc3c Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Thu, 14 Mar 2024 12:55:23 +0100 Subject: [PATCH 4/4] Add blank space to readme to force new build --- libs/pxweb2-ui/style-dictionary/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/pxweb2-ui/style-dictionary/README.md b/libs/pxweb2-ui/style-dictionary/README.md index 78d331a0..f3fcacc6 100644 --- a/libs/pxweb2-ui/style-dictionary/README.md +++ b/libs/pxweb2-ui/style-dictionary/README.md @@ -5,4 +5,4 @@ Go to the root of the entire project and run ## Custom theme -To use a custom theme you have to create a file called `custom_theme.json`. When building the results end up in /build/. The variables stored in `custom_theme.json` will be used instead of the variables in `default_theme.json` when building the variables to js and sass if both files are present. +To use a custom theme you have to create a file called `custom_theme.json`. When building the results end up in /build/. The variables stored in `custom_theme.json` will be used instead of the variables in `default_theme.json` when building the variables to js and sass if both files are present.