feat(Media Queries): increase large desktop breakpoint

css/mistica-common.css

@@ -299,9 +299,9 @@
     }
 }
 
-@media (min-width: 1368px) {
+@media (min-width: 1512px) {
     .mistica-responsive-layout {
-        --mistica-responsive-layout-margin: calc((100vw - 1224px) / 2);
+        --mistica-responsive-layout-margin: calc((100vw - 1416px) / 2);
     }
 }
 

packages/generate-design-tokens/css-generator.js

@@ -51,7 +51,7 @@ const buildLineHeightVarName = (textPreset) => buildVarName('line-height', textP
 const buildFontWeightVarName = (textPreset) => buildVarName('font-weight', textPreset);
 const tabletMediaQuery = '@media (min-width: 768px)';
 const desktopMediaQuery = '@media (min-width: 1024px)';
-const largeDesktopMediaQuery = '@media (min-width: 1368px)';
+const largeDesktopMediaQuery = '@media (min-width: 1512px)';
 
 export const generateSkinCssSrc = (skinName, DESIGN_TOKENS_FOLDER) => {
     const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`), 'utf8');
@@ -345,7 +345,7 @@ ${desktopMediaQuery} {
 
 ${largeDesktopMediaQuery} {
     .${prefix}responsive-layout {
-        --${prefix}responsive-layout-margin: calc((100vw - 1224px) / 2);
+        --${prefix}responsive-layout-margin: calc((100vw - 1416px) / 2);
     }
 }
     `;

playroom.config.js

@@ -48,7 +48,7 @@ const getWidths = () => {
     if (process.env.FORCE_DESKTOP) {
         return [1024];
     }
-    return [320, 360, 768, 1024, 1368];
+    return [320, 360, 768, 1024, 1512];
 };
 
 const exampleCode = `

src/__screenshot_tests__/responsive-layout-screenshot-test.tsx

@@ -4,11 +4,11 @@ const TEST_CASES = [
     {id: 'layout-responsive-layout--default', device: 'MOBILE_IOS'},
     {id: 'layout-responsive-layout--default', device: 'TABLET'},
     {id: 'layout-responsive-layout--default', device: 'DESKTOP'},
-    {id: 'layout-responsive-layout--default', device: 'DESKTOP', viewport: {width: 1368, height: 770}},
+    {id: 'layout-responsive-layout--default', device: 'DESKTOP', viewport: {width: 1512, height: 770}},
     {id: 'layout-responsive-layout--nested', device: 'MOBILE_IOS'},
     {id: 'layout-responsive-layout--nested', device: 'TABLET'},
     {id: 'layout-responsive-layout--nested', device: 'DESKTOP'},
-    {id: 'layout-responsive-layout--nested', device: 'DESKTOP', viewport: {width: 1368, height: 770}},
+    {id: 'layout-responsive-layout--nested', device: 'DESKTOP', viewport: {width: 1512, height: 770}},
 ] as const;
 
 test.each(TEST_CASES)('ResponsiveLayout', async (testCase) => {

src/grid-layout.css.ts

@@ -22,7 +22,7 @@ export const grid = style({
         },
         [mq.desktop]: {
             gridTemplateColumns: 'repeat(12, 1fr)',
-            gridColumnGap: 16,
+            gridColumnGap: 24,
         },
         [mq.tablet]: {
             gridTemplateColumns: 'repeat(12, 1fr)',

src/media-queries.css.ts

@@ -6,7 +6,7 @@ export const mediaQueriesConfig: {
 } = {
     tabletMinWidth: 768,
     desktopMinWidth: 1024,
-    largeDesktopMinWidth: 1368,
+    largeDesktopMinWidth: 1512,
     desktopOrTabletMinHeight: 550,
     ...(process.env.MISTICA_MEDIA_QUERIES_CONFIG ? JSON.parse(process.env.MISTICA_MEDIA_QUERIES_CONFIG) : {}),
 };

src/responsive-layout.css.ts

@@ -5,8 +5,8 @@ import {vars as skinVars} from './skins/skin-contract.css';
 
 export const MOBILE_SIDE_MARGIN = 16;
 export const TABLET_SIDE_MARGIN = 32;
-export const SMALL_DESKTOP_SIDE_MARGIN = 40;
-export const LARGE_DESKTOP_MAX_WIDTH = 1224;
+export const SMALL_DESKTOP_SIDE_MARGIN = 48;
+export const LARGE_DESKTOP_MAX_WIDTH = 1416;
 
 const marginValue = {
     largeDesktop: `calc((100vw - ${LARGE_DESKTOP_MAX_WIDTH}px) / 2)`,

src/sheet-common.tsx

@@ -24,7 +24,7 @@ import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import {InternalIconButton} from './icon-button';
 import ButtonLayout from './button-layout';
 import {safeAreaInsetBottom} from './utils/css';
-import {MOBILE_SIDE_MARGIN, SMALL_DESKTOP_SIDE_MARGIN, TABLET_SIDE_MARGIN} from './responsive-layout.css';
+import {MOBILE_SIDE_MARGIN, TABLET_SIDE_MARGIN} from './responsive-layout.css';
 import * as tokens from './text-tokens';
 import Touchable from './touchable';
 
@@ -296,7 +296,7 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
 const paddingX = {
     mobile: MOBILE_SIDE_MARGIN,
     tablet: TABLET_SIDE_MARGIN,
-    desktop: SMALL_DESKTOP_SIDE_MARGIN,
+    desktop: 40, // to keep consistency with the rest of the dialogs components
 } as const;
 
 type SheetBodyProps = {