update breakpoint values to match design

Author: Jpoliachik

src/docs/breakpoints/breakpoints.stories.mdx

@@ -8,11 +8,10 @@ Use the `ScreenSize` enum for standard breakpoints.
 
 ```ts
 export enum ScreenSize {
-  sm = 640,
-  md = 768,
-  lg = 1024,
-  xl = 1280,
-  xxl = 1536,
+  xs = 600,
+  sm = 905,
+  md = 1240,
+  lg = 1440,
 }
 ```
 
@@ -23,7 +22,7 @@ import { style } from "@vanilla-extract/css";
 export const myStyle = style({
   ...
   "@media": {
-    ...atScreenSizeSm({
+    ...atScreenSizeXs({
       justifyContent: "flex-start",
       padding: "0px 24px",
     }),
@@ -34,7 +33,7 @@ export const myStyle = style({
 ### In React components:
 
 ```ts
-const isScreenSmall = useBreakpoint(ScreenSize.sm);
+const isScreenSmall = useBreakpoint(ScreenSize.xs);
 
 return (
   {isScreenSmall && <></>}

src/tokens/breakpoints.css.ts

@@ -1,9 +1,8 @@
 export enum ScreenSize {
-  sm = 640,
-  md = 768,
-  lg = 1024,
-  xl = 1280,
-  xxl = 1536,
+  xs = 600,
+  sm = 905,
+  md = 1240,
+  lg = 1440,
 }
 
 // deprecated, use ScreenSize instead.

src/util/breakpoint-utils.ts

@@ -23,16 +23,14 @@ export const makeCustomBreakpoint =
     [`(max-width: ${breakpoint})`]: { ...styles },
   });
 
+export const atScreenSizeXs = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>
+  makeCustomBreakpoint(ScreenSize.xs)(styles);
 export const atScreenSizeSm = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>
   makeCustomBreakpoint(ScreenSize.sm)(styles);
 export const atScreenSizeMd = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>
   makeCustomBreakpoint(ScreenSize.md)(styles);
 export const atScreenSizeLg = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>
   makeCustomBreakpoint(ScreenSize.lg)(styles);
-export const atScreenSizeXl = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>
-  makeCustomBreakpoint(ScreenSize.xl)(styles);
-export const atScreenSizeXXL = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>
-  makeCustomBreakpoint(ScreenSize.xxl)(styles);
 
 // below are all deprecated. Prefer `atScreenSizeX` instead.
 export const atLargeBreakpoint = (styles: StyleRule): FeatureQueries<StyleWithSelectors> =>