feat(@kadena/ui): Add responsiveStyle and mapToProperty utility theme…

… functions
kadena-community · Oct 11, 2023 · 90c69ce · 90c69ce · vercel · Oct 11, 2023
2 parents 6cf0c27 + aae4059
commit 90c69ce
Show file tree

Hide file tree

Showing 30 changed files with 608 additions and 336 deletions.
diff --git a/.changeset/tender-suits-punch.md b/.changeset/tender-suits-punch.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Added responsiveStyle and mapToProperty styling utility functions
diff --git a/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts b/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -76,33 +76,33 @@ export const figureClass = style([
   {
     width: `100%`,
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
         aspectRatio: '1',
       },
-    },
+    }),
   },
 ]);
 
 export const figureVariant = styleVariants({
   default: {
     width: '100%',
     aspectRatio: '16 / 3',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
       },
-    },
+    }),
   },
   large: {
     width: '100%',
     aspectRatio: '16 / 7',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         width: `clamp(${vars.sizes.$48}, 20vw, ${vars.sizes.$64})`,
       },
-    },
+    }),
   },
 });
 
@@ -130,12 +130,12 @@ export const gridWrapperClass = style([
       "header"
     `,
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         gridTemplateAreas: `
         "header image"
       `,
       },
-    },
+    }),
   },
 ]);
diff --git a/packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts b/packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';
 
 import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { style } from '@vanilla-extract/css';
@@ -29,17 +29,16 @@ export const stripItemWrapperClass = style([
       },
     },
 
-    '@media': {
-      [`screen and ${breakpoints.lg}`]: {
+    ...responsiveStyle({
+      lg: {
         flex: '33%',
-
         selectors: {
           '&:last-child': {
             display: 'none',
           },
         },
       },
-    },
+    }),
   },
 ]);
 

diff --git a/packages/apps/docs/src/components/BottomPageSection/styles.css.ts b/packages/apps/docs/src/components/BottomPageSection/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
@@ -9,15 +9,13 @@ export const bottomWrapperClass = style([
   }),
 ]);
 
-export const bottomWrapperCodeLayoutClass = style([
-  {
-    '@media': {
-      [`screen and ${breakpoints.xl}`]: {
-        width: '56%',
-      },
-      [`screen and ${breakpoints.xxl}`]: {
-        width: '60%',
-      },
+export const bottomWrapperCodeLayoutClass = style(
+  responsiveStyle({
+    xl: {
+      width: '56%',
     },
-  },
-]);
+    xxl: {
+      width: '60%',
+    },
+  }),
+);
diff --git a/packages/apps/docs/src/components/BrowseSection/styles.css.ts b/packages/apps/docs/src/components/BrowseSection/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -21,11 +21,11 @@ export const directionVariants = styleVariants({
       rowGap: 0,
       flexDirection: 'column',
 
-      '@media': {
-        [`screen and ${breakpoints.md}`]: {
+      ...responsiveStyle({
+        md: {
           flexDirection: 'row',
         },
-      },
+      }),
     },
   ],
   column: [
@@ -68,11 +68,12 @@ export const listItemClass = style([
   }),
   {
     flexBasis: '50%',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+
+    ...responsiveStyle({
+      md: {
         flexBasis: '33%',
       },
-    },
+    }),
   },
 ]);
 

diff --git a/packages/apps/docs/src/components/DocsCard/styles.css.ts b/packages/apps/docs/src/components/DocsCard/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -70,77 +70,77 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -150px bottom -150px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -250px bottom -250px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   contribute: {
     backgroundRepeat: 'no-repeat',
     backgroundImage: `url("/assets/background/contribute.svg")`,
     backgroundPosition: 'right -165px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -300px bottom -200px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   quickstart: {
     backgroundRepeat: 'no-repeat',
     backgroundImage: `url("/assets/background/quickstart.svg")`,
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -220px bottom -220px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   smartwallet: {
     backgroundRepeat: 'no-repeat',
     backgroundImage: `url("/assets/background/smartwallet.svg")`,
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -320px bottom -120px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   react: {
     backgroundRepeat: 'no-repeat',
     backgroundImage: `url("/assets/background/react.svg")`,
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -250px bottom -220px',
         backgroundSize: '450px',
       },
-    },
+    }),
   },
   marmalade: {
     backgroundRepeat: 'no-repeat',
     backgroundImage: `url("/assets/background/marmalade.svg")`,
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -200px bottom -220px',
         backgroundSize: '450px',
       },
-    },
+    }),
   },
   default: {},
 });
diff --git a/packages/apps/docs/src/components/Layout/Blog/styles.css.ts b/packages/apps/docs/src/components/Layout/Blog/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
@@ -38,28 +38,27 @@ export const pageGridClass = style({
             "footer footer"
           `,
 
-  '@media': {
-    [`screen and ${breakpoints.md}`]: {
+  ...responsiveStyle({
+    md: {
       gridTemplateColumns: '0% 5% auto 5%',
 
       gridTemplateAreas: `
-              "header header header header"
-              "pageheader pageheader pageheader pageheader"
-              ". content . ."
-              "footer footer footer footer"
-            `,
+                      "header header header header"
+                      "pageheader pageheader pageheader pageheader"
+                      ". content . ."
+                      "footer footer footer footer"
+                    `,
     },
-
-    [`screen and ${breakpoints.xxl}`]: {
+    xxl: {
       gridTemplateColumns: '0% minmax(20%, auto) auto minmax(20%, auto)',
       gridTemplateAreas: `
-              "header header header header"
-              "pageheader pageheader pageheader pageheader"
-              ". content ."
-              "footer footer footer footer"
-            `,
+                      "header header header header"
+                      "pageheader pageheader pageheader pageheader"
+                      ". content ."
+                      "footer footer footer footer"
+                    `,
     },
-  },
+  }),
 });
 
 export const articleMetaDataItemClass = style({