Merge pull request #74 from PxTools/feature/PXWEB2-63-add-global-brea…

…kpoint-tokens

Feature/pxweb2 63 add global breakpoint tokens

apps/pxweb2/src/app/app.module.scss

@@ -1,2 +1,42 @@
+@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed;
 
-
+.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;
+  }
+}

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,
         })}
       </p>
+      <div className={cl(classes.breakpoints)}>Breakpoint test</div>
     </>
   );
 }

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: {

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. 

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: {

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"
+      }
+    }
+  }
+}