feat: add breakpoints to custom properties (#220)

Author: montezume

materials/custom-properties.css

@@ -117,4 +117,9 @@
   --transition-linear-80ms: 80ms linear;
   --transition-easeinout-150ms: 150ms ease-in-out;
   --transition-standard: all 0.2s ease;
+  --break-point-mobile: 768px;
+  --break-point-desktop: 1024px;
+  --break-point-biggerdesktop: 1280px;
+  --break-point-giantdesktop: 1680px;
+  --break-point-jumbodesktop: 1920px;
 }

materials/custom-properties.json

@@ -105,5 +105,10 @@
   "--token-size-height-tag": "26px",
   "--transition-linear-80ms": "80ms linear",
   "--transition-easeinout-150ms": "150ms ease-in-out",
-  "--transition-standard": "all 0.2s ease"
+  "--transition-standard": "all 0.2s ease",
+  "--break-point-mobile": "768px",
+  "--break-point-desktop": "1024px",
+  "--break-point-biggerdesktop": "1280px",
+  "--break-point-giantdesktop": "1680px",
+  "--break-point-jumbodesktop": "1920px"
 }

materials/internals/breakpoints.mod.css

@@ -0,0 +1,7 @@
+:root {
+  --break-point-mobile: 768px;
+  --break-point-desktop: 1024px;
+  --break-point-biggerdesktop: 1280px;
+  --break-point-giantdesktop: 1680px;
+  --break-point-jumbodesktop: 1920px;
+}

materials/internals/index.css

@@ -5,3 +5,4 @@
 @import './spacings.mod.css';
 @import './tokens/tokens.mod.css';
 @import './transitions.mod.css';
+@import './breakpoints.mod.css';