@jetbrains/kotlin-web-site-ui 4.3.0-next-layout.2 → 4.3.0-next-layout.4

package/out/components/breakpoints/constants.js

@@ -1,4 +1,4 @@
-const BREAKPOINTS = Object.freeze({
+const POINTS = {
   MS: 376,
   MM: 472,
   TS: 616,
@@ -6,14 +6,15 @@ const BREAKPOINTS = Object.freeze({
   TL: 1000,
   DS: 1190,
   DM: 1144
-});
-const BREAKPOINTS_KEYS = Object.keys(BREAKPOINTS);
+};
+const BREAKPOINTS = Object.freeze(POINTS);
+const BREAKPOINTS_KEYS = Object.keys(POINTS);
 const BREAKPOINTS_MAX_MEDIA = Object.freeze(BREAKPOINTS_KEYS.reduce(function (result, name) {
-  result[name] = `screen and (max-width: ${BREAKPOINTS[name]}px)`;
+  result[name] = `(max-width: ${BREAKPOINTS[name]}px)`;
   return result;
 }, {}));
 const BREAKPOINTS_MIN_MEDIA = Object.freeze(BREAKPOINTS_KEYS.reduce(function (result, name) {
-  result[name] = `screen and (min-width: ${BREAKPOINTS[name] + 1}px)`;
+  result[name] = `(min-width: ${BREAKPOINTS[name] + 1}px)`;
   return result;
 }, {}));
 export { BREAKPOINTS, BREAKPOINTS_KEYS, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA };

package/out/components/breakpoints/hooks.js

@@ -1,32 +1,32 @@
 import { useMedia } from 'the-platform/useMedia';
-import { BREAKPOINTS } from './constants.js';
+import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
 
 function useMS() {
-  return useMedia(BREAKPOINTS.MS, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
 }
 
 function useMM() {
-  return useMedia(BREAKPOINTS.MM, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.MM, false);
 }
 
 function useTS() {
-  return useMedia(BREAKPOINTS.TS, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.TS, false);
 }
 
 function useTM() {
-  return useMedia(BREAKPOINTS.TM, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.TM, false);
 }
 
 function useTL() {
-  return useMedia(BREAKPOINTS.TL, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.TL, false);
 }
 
 function useDM() {
-  return useMedia(BREAKPOINTS.DM, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.DM, false);
 }
 
 function useDS() {
-  return useMedia(BREAKPOINTS.DS, false);
+  return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
 }
 
 export { useDM, useDS, useMM, useMS, useTL, useTM, useTS };

package/out/components/breakpoints/media.pcss

@@ -0,0 +1,14 @@
+@custom-media --ktl-ms-min (min-width: 377px);
+@custom-media --ktl-mm-min (min-width: 473px);
+@custom-media --ktl-ts-min (min-width: 617px);
+@custom-media --ktl-tm-min (min-width: 809px);
+@custom-media --ktl-tl-min (min-width: 1001px);
+@custom-media --ktl-ds-min (min-width: 1191px);
+@custom-media --ktl-dm-min (min-width: 1145px);
+@custom-media --ktl-ms (max-width: 376px);
+@custom-media --ktl-mm (max-width: 472px);
+@custom-media --ktl-ts (max-width: 616px);
+@custom-media --ktl-tm (max-width: 808px);
+@custom-media --ktl-tl (max-width: 1000px);
+@custom-media --ktl-ds (max-width: 1190px);
+@custom-media --ktl-dm (max-width: 1144px);

package/out/components/layout/index.css

@@ -3,32 +3,32 @@
     --ktl-layout-width: 1144px;
 }
 
-    @media screen and (max-width: 1190px) {:root {
+    @media (max-width: 1190px) {:root {
         --ktl-layout-width: 952px
 }
     }
 
-    @media screen and (max-width: 1000px) {:root {
+    @media (max-width: 1000px) {:root {
         --ktl-layout-width: 760px
 }
     }
 
-    @media screen and (max-width: 808px) {:root {
+    @media (max-width: 808px) {:root {
         --ktl-layout-width: 568px
 }
     }
 
-    @media screen and (max-width: 616px) {:root {
+    @media (max-width: 616px) {:root {
         --ktl-layout-width: 424px
 }
     }
 
-    @media screen and (max-width: 472px) {:root {
+    @media (max-width: 472px) {:root {
         --ktl-layout-width: 328px
 }
     }
 
-    @media screen and (max-width: 376px) {:root {
+    @media (max-width: 376px) {:root {
         --ktl-layout-width: 272px
 }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.3.0-next-layout.2",
+  "version": "4.3.0-next-layout.4",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -123,6 +123,7 @@
     "sha.js": "^2.4.11",
     "standard-version": "^9.2.0",
     "svgo-loader": "^3.0.0",
+    "the-platform": "^0.10.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.2.4",
     "webpack": "^5.30.0",