From 53120b0546d40adaee721aca8ea83050616a7371 Mon Sep 17 00:00:00 2001 From: github-actions-bot Date: Thu, 18 Apr 2024 16:25:15 +0000 Subject: [PATCH] Updates --- 404.html | 4 ++-- assets/js/3002f4e5.1278841a.js | 1 + assets/js/3002f4e5.e6e8b065.js | 1 - assets/js/{33d50a8e.f6271069.js => 33d50a8e.1117b758.js} | 2 +- assets/js/{4edc808e.59fc1453.js => 4edc808e.318b701a.js} | 2 +- assets/js/{5a58cff1.ec3072f7.js => 5a58cff1.33db6e20.js} | 2 +- assets/js/5c9eef2d.07edee36.js | 1 - assets/js/5c9eef2d.dcf64117.js | 1 + assets/js/{63d0de19.e4b71337.js => 63d0de19.ce0b707e.js} | 2 +- assets/js/{6ab114b0.20889665.js => 6ab114b0.9a3cbad5.js} | 2 +- assets/js/83398278.5f87606d.js | 1 - assets/js/83398278.93668d77.js | 1 + assets/js/92dde4bf.87b4fb7c.js | 1 - assets/js/92dde4bf.bc49227e.js | 1 + assets/js/{9825658c.7974d7dd.js => 9825658c.10fafb80.js} | 2 +- assets/js/{9cd7d415.07ee04b2.js => 9cd7d415.3af42409.js} | 2 +- assets/js/{9f55f1ad.62bdf1c9.js => 9f55f1ad.d06dd7d0.js} | 2 +- assets/js/{ab0123d0.d43e2625.js => ab0123d0.520b540e.js} | 2 +- assets/js/{ce6c328c.6e97b991.js => ce6c328c.51d22541.js} | 2 +- assets/js/{d5140e4c.5d3d9a38.js => d5140e4c.b5232790.js} | 2 +- assets/js/fa28435c.91e4a955.js | 1 - assets/js/fa28435c.9ce62d0e.js | 1 + assets/js/runtime~main.182d0703.js | 1 - assets/js/runtime~main.37ac3c5f.js | 1 + fundamentals/accessing-the-theme/index.html | 6 +++--- fundamentals/breakpoints/index.html | 6 +++--- fundamentals/colors/index.html | 6 +++--- fundamentals/components/custom-components/index.html | 6 +++--- fundamentals/components/index.html | 4 ++-- fundamentals/components/predefined-components/index.html | 6 +++--- fundamentals/defining-your-theme/index.html | 6 +++--- fundamentals/index.html | 4 ++-- fundamentals/overriding-styles/index.html | 6 +++--- fundamentals/responsive-values/index.html | 6 +++--- fundamentals/restyle-functions/index.html | 6 +++--- fundamentals/spacing/index.html | 6 +++--- fundamentals/variants/index.html | 6 +++--- guides/dark-mode/index.html | 6 +++--- guides/fixture-app/index.html | 6 +++--- guides/index.html | 4 ++-- guides/migrating-to-v2/index.html | 6 +++--- guides/shopify-design-system/index.html | 6 +++--- index.html | 6 +++--- search-index.json | 2 +- search/index.html | 4 ++-- 45 files changed, 76 insertions(+), 76 deletions(-) create mode 100644 assets/js/3002f4e5.1278841a.js delete mode 100644 assets/js/3002f4e5.e6e8b065.js rename assets/js/{33d50a8e.f6271069.js => 33d50a8e.1117b758.js} (54%) rename assets/js/{4edc808e.59fc1453.js => 4edc808e.318b701a.js} (53%) rename assets/js/{5a58cff1.ec3072f7.js => 5a58cff1.33db6e20.js} (75%) delete mode 100644 assets/js/5c9eef2d.07edee36.js create mode 100644 assets/js/5c9eef2d.dcf64117.js rename assets/js/{63d0de19.e4b71337.js => 63d0de19.ce0b707e.js} (73%) rename assets/js/{6ab114b0.20889665.js => 6ab114b0.9a3cbad5.js} (75%) delete mode 100644 assets/js/83398278.5f87606d.js create mode 100644 assets/js/83398278.93668d77.js delete mode 100644 assets/js/92dde4bf.87b4fb7c.js create mode 100644 assets/js/92dde4bf.bc49227e.js rename assets/js/{9825658c.7974d7dd.js => 9825658c.10fafb80.js} (50%) rename assets/js/{9cd7d415.07ee04b2.js => 9cd7d415.3af42409.js} (52%) rename assets/js/{9f55f1ad.62bdf1c9.js => 9f55f1ad.d06dd7d0.js} (53%) rename assets/js/{ab0123d0.d43e2625.js => ab0123d0.520b540e.js} (53%) rename assets/js/{ce6c328c.6e97b991.js => ce6c328c.51d22541.js} (58%) rename assets/js/{d5140e4c.5d3d9a38.js => d5140e4c.b5232790.js} (67%) delete mode 100644 assets/js/fa28435c.91e4a955.js create mode 100644 assets/js/fa28435c.9ce62d0e.js delete mode 100644 assets/js/runtime~main.182d0703.js create mode 100644 assets/js/runtime~main.37ac3c5f.js diff --git a/404.html b/404.html index a133c28..8bc989e 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Restyle - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/3002f4e5.1278841a.js b/assets/js/3002f4e5.1278841a.js new file mode 100644 index 0000000..c4e974d --- /dev/null +++ b/assets/js/3002f4e5.1278841a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[462],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=o.createContext({}),s=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=s(e.components);return o.createElement(l.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=s(n),u=r,f=m["".concat(l,".").concat(u)]||m[u]||d[u]||a;return n?o.createElement(f,i(i({ref:t},c),{},{components:n})):o.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=u;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>p,toc:()=>s});var o=n(7462),r=(n(7294),n(3905));const a={id:"predefined-components",title:"Predefined components"},i=void 0,p={unversionedId:"fundamentals/components/predefined-components",id:"fundamentals/components/predefined-components",title:"Predefined components",description:"This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme.",source:"@site/docs/fundamentals/components/predefined-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/predefined-components",permalink:"/restyle/fundamentals/components/predefined-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/predefined-components.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"predefined-components",title:"Predefined components"},sidebar:"docs",previous:{title:"Components",permalink:"/restyle/fundamentals/components"},next:{title:"Custom components",permalink:"/restyle/fundamentals/components/custom-components"}},l={},s=[{value:"Box",id:"box",level:4},{value:"Text",id:"text",level:4}],c={toc:s};function m(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,o.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"This library comes with predefined functions to create a ",(0,r.kt)("inlineCode",{parentName:"p"},"Box")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"Text")," component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme."),(0,r.kt)("h4",{id:"box"},"Box"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Box.tsx\nimport {createBox} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Box = createBox();\n\nexport default Box;\n")),(0,r.kt)("p",null,"The Box component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"backgroundColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"layout"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"border"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"shadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"position"),"."),(0,r.kt)("h4",{id:"text"},"Text"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Text.tsx\nimport {createText} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Text = createText();\n\nexport default Text;\n")),(0,r.kt)("p",null,"The Text component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"color"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textDecorationColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"typography"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textShadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"layout"),". It also includes a ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/variants"},"variant")," that picks up styles under the ",(0,r.kt)("inlineCode",{parentName:"p"},"textVariants")," key in your theme:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n ...,\n textVariants: {\n header: {\n fontFamily: 'ShopifySans-Bold',\n fontWeight: 'bold',\n fontSize: 34,\n lineHeight: 42.5,\n color: 'black',\n },\n subheader: {\n fontFamily: 'ShopifySans-SemiBold',\n fontWeight: '600',\n fontSize: 28,\n lineHeight: 36,\n color: 'black',\n },\n body: {\n fontFamily: 'ShopifySans',\n fontSize: 16,\n lineHeight: 24,\n color: 'black',\n },\n },\n});\n\n// In a component\nHeader\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3002f4e5.e6e8b065.js b/assets/js/3002f4e5.e6e8b065.js deleted file mode 100644 index 6deadde..0000000 --- a/assets/js/3002f4e5.e6e8b065.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[462],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=o.createContext({}),s=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=s(e.components);return o.createElement(l.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=s(n),u=r,f=m["".concat(l,".").concat(u)]||m[u]||d[u]||a;return n?o.createElement(f,i(i({ref:t},c),{},{components:n})):o.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=u;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>p,toc:()=>s});var o=n(7462),r=(n(7294),n(3905));const a={id:"predefined-components",title:"Predefined components"},i=void 0,p={unversionedId:"fundamentals/components/predefined-components",id:"fundamentals/components/predefined-components",title:"Predefined components",description:"This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme.",source:"@site/docs/fundamentals/components/predefined-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/predefined-components",permalink:"/restyle/fundamentals/components/predefined-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/predefined-components.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"predefined-components",title:"Predefined components"},sidebar:"docs",previous:{title:"Components",permalink:"/restyle/fundamentals/components"},next:{title:"Custom components",permalink:"/restyle/fundamentals/components/custom-components"}},l={},s=[{value:"Box",id:"box",level:4},{value:"Text",id:"text",level:4}],c={toc:s};function m(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,o.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"This library comes with predefined functions to create a ",(0,r.kt)("inlineCode",{parentName:"p"},"Box")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"Text")," component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme."),(0,r.kt)("h4",{id:"box"},"Box"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Box.tsx\nimport {createBox} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Box = createBox();\n\nexport default Box;\n")),(0,r.kt)("p",null,"The Box component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"backgroundColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"layout"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"border"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"shadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"position"),"."),(0,r.kt)("h4",{id:"text"},"Text"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Text.tsx\nimport {createText} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Text = createText();\n\nexport default Text;\n")),(0,r.kt)("p",null,"The Text component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"color"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textDecorationColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"typography"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textShadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"layout"),". It also includes a ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/variants"},"variant")," that picks up styles under the ",(0,r.kt)("inlineCode",{parentName:"p"},"textVariants")," key in your theme:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n ...,\n textVariants: {\n header: {\n fontFamily: 'ShopifySans-Bold',\n fontWeight: 'bold',\n fontSize: 34,\n lineHeight: 42.5,\n color: 'black',\n },\n subheader: {\n fontFamily: 'ShopifySans-SemiBold',\n fontWeight: '600',\n fontSize: 28,\n lineHeight: 36,\n color: 'black',\n },\n body: {\n fontFamily: 'ShopifySans',\n fontSize: 16,\n lineHeight: 24,\n color: 'black',\n },\n },\n});\n\n// In a component\nHeader\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/33d50a8e.f6271069.js b/assets/js/33d50a8e.1117b758.js similarity index 54% rename from assets/js/33d50a8e.f6271069.js rename to assets/js/33d50a8e.1117b758.js index 907ef33..2c28921 100644 --- a/assets/js/33d50a8e.f6271069.js +++ b/assets/js/33d50a8e.1117b758.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[641],{3905:(e,n,t)=>{t.d(n,{Zo:()=>l,kt:()=>f});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=r.createContext({}),i=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},l=function(e){var n=i(e.components);return r.createElement(c.Provider,{value:n},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,s=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=i(t),d=o,f=m["".concat(c,".").concat(d)]||m[d]||u[d]||s;return t?r.createElement(f,a(a({ref:n},l),{},{components:t})):r.createElement(f,a({ref:n},l))}));function f(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var s=t.length,a=new Array(s);a[0]=d;var p={};for(var c in n)hasOwnProperty.call(n,c)&&(p[c]=n[c]);p.originalType=e,p[m]="string"==typeof e?e:o,a[1]=p;for(var i=2;i{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>m,frontMatter:()=>s,metadata:()=>p,toc:()=>i});var r=t(7462),o=(t(7294),t(3905));const s={id:"custom-components",title:"Custom components"},a=void 0,p={unversionedId:"fundamentals/components/custom-components",id:"fundamentals/components/custom-components",title:"Custom components",description:"If you want to create your own component similar to Box or Text, but decide",source:"@site/docs/fundamentals/components/custom-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/custom-components",permalink:"/restyle/fundamentals/components/custom-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/custom-components.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"custom-components",title:"Custom components"},sidebar:"docs",previous:{title:"Predefined components",permalink:"/restyle/fundamentals/components/predefined-components"},next:{title:"Guides",permalink:"/restyle/guides"}},c={},i=[],l={toc:i};function m(e){let{components:n,...t}=e;return(0,o.kt)("wrapper",(0,r.Z)({},l,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"If you want to create your own component similar to ",(0,o.kt)("inlineCode",{parentName:"p"},"Box")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"Text"),", but decide\nyourself which ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"predefined Restyle functions")," to use, use the\n",(0,o.kt)("inlineCode",{parentName:"p"},"createRestyleComponent")," helper:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {\n createRestyleComponent,\n createVariant,\n spacing,\n SpacingProps,\n VariantProps,\n} from '@shopify/restyle';\nimport {Theme} from './theme';\n\ntype Props = SpacingProps & VariantProps;\nconst Card = createRestyleComponent([\n spacing,\n createVariant({themeKey: 'cardVariants'}),\n]);\n\nexport default Card;\n")),(0,o.kt)("p",null,"For more advanced components, you may want to instead use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\ntype RestyleProps = SpacingProps &\n BorderProps &\n BackgroundColorProps;\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\n\ntype Props = RestyleProps & {\n onPress: () => void;\n label: string;\n};\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[641],{3905:(e,n,t)=>{t.d(n,{Zo:()=>l,kt:()=>f});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=r.createContext({}),i=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},l=function(e){var n=i(e.components);return r.createElement(c.Provider,{value:n},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,s=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=i(t),d=o,f=m["".concat(c,".").concat(d)]||m[d]||u[d]||s;return t?r.createElement(f,a(a({ref:n},l),{},{components:t})):r.createElement(f,a({ref:n},l))}));function f(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var s=t.length,a=new Array(s);a[0]=d;var p={};for(var c in n)hasOwnProperty.call(n,c)&&(p[c]=n[c]);p.originalType=e,p[m]="string"==typeof e?e:o,a[1]=p;for(var i=2;i{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>m,frontMatter:()=>s,metadata:()=>p,toc:()=>i});var r=t(7462),o=(t(7294),t(3905));const s={id:"custom-components",title:"Custom components"},a=void 0,p={unversionedId:"fundamentals/components/custom-components",id:"fundamentals/components/custom-components",title:"Custom components",description:"If you want to create your own component similar to Box or Text, but decide",source:"@site/docs/fundamentals/components/custom-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/custom-components",permalink:"/restyle/fundamentals/components/custom-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/custom-components.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"custom-components",title:"Custom components"},sidebar:"docs",previous:{title:"Predefined components",permalink:"/restyle/fundamentals/components/predefined-components"},next:{title:"Guides",permalink:"/restyle/guides"}},c={},i=[],l={toc:i};function m(e){let{components:n,...t}=e;return(0,o.kt)("wrapper",(0,r.Z)({},l,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"If you want to create your own component similar to ",(0,o.kt)("inlineCode",{parentName:"p"},"Box")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"Text"),", but decide\nyourself which ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"predefined Restyle functions")," to use, use the\n",(0,o.kt)("inlineCode",{parentName:"p"},"createRestyleComponent")," helper:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {\n createRestyleComponent,\n createVariant,\n spacing,\n SpacingProps,\n VariantProps,\n} from '@shopify/restyle';\nimport {Theme} from './theme';\n\ntype Props = SpacingProps & VariantProps;\nconst Card = createRestyleComponent([\n spacing,\n createVariant({themeKey: 'cardVariants'}),\n]);\n\nexport default Card;\n")),(0,o.kt)("p",null,"For more advanced components, you may want to instead use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\ntype RestyleProps = SpacingProps &\n BorderProps &\n BackgroundColorProps;\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\n\ntype Props = RestyleProps & {\n onPress: () => void;\n label: string;\n};\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4edc808e.59fc1453.js b/assets/js/4edc808e.318b701a.js similarity index 53% rename from assets/js/4edc808e.59fc1453.js rename to assets/js/4edc808e.318b701a.js index 609add7..3b0b69d 100644 --- a/assets/js/4edc808e.59fc1453.js +++ b/assets/js/4edc808e.318b701a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[173],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),c=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=c(e.components);return a.createElement(i.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=c(n),m=r,h=p["".concat(i,".").concat(m)]||p[m]||d[m]||l;return n?a.createElement(h,o(o({ref:t},u),{},{components:n})):a.createElement(h,o({ref:t},u))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>k,contentTitle:()=>g,default:()=>w,frontMatter:()=>b,metadata:()=>v,toc:()=>x});var a=n(7462),r=n(7294),l=n(3905),o=n(6010),s=n(2389),i=n(7392),c=n(7094),u=n(2466);const p="tabList__CuJ",d="tabItem_LNqP";function m(e){const{lazy:t,block:n,defaultValue:l,values:s,groupId:m,className:h}=e,f=r.Children.map(e.children,(e=>{if((0,r.isValidElement)(e)&&"value"in e.props)return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})),y=s??f.map((e=>{let{props:{value:t,label:n,attributes:a}}=e;return{value:t,label:n,attributes:a}})),b=(0,i.l)(y,((e,t)=>e.value===t.value));if(b.length>0)throw new Error(`Docusaurus error: Duplicate values "${b.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`);const g=null===l?l:l??f.find((e=>e.props.default))?.props.value??f[0].props.value;if(null!==g&&!y.some((e=>e.value===g)))throw new Error(`Docusaurus error: The has a defaultValue "${g}" but none of its children has the corresponding value. Available values are: ${y.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);const{tabGroupChoices:v,setTabGroupChoices:k}=(0,c.U)(),[x,T]=(0,r.useState)(g),w=[],{blockElementScrollPositionUntilNextRender:N}=(0,u.o5)();if(null!=m){const e=v[m];null!=e&&e!==x&&y.some((t=>t.value===e))&&T(e)}const O=e=>{const t=e.currentTarget,n=w.indexOf(t),a=y[n].value;a!==x&&(N(t),T(a),null!=m&&k(m,String(a)))},E=e=>{let t=null;switch(e.key){case"Enter":O(e);break;case"ArrowRight":{const n=w.indexOf(e.currentTarget)+1;t=w[n]??w[0];break}case"ArrowLeft":{const n=w.indexOf(e.currentTarget)-1;t=w[n]??w[w.length-1];break}}t?.focus()};return r.createElement("div",{className:(0,o.Z)("tabs-container",p)},r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},h)},y.map((e=>{let{value:t,label:n,attributes:l}=e;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:x===t?0:-1,"aria-selected":x===t,key:t,ref:e=>w.push(e),onKeyDown:E,onClick:O},l,{className:(0,o.Z)("tabs__item",d,l?.className,{"tabs__item--active":x===t})}),n??t)}))),t?(0,r.cloneElement)(f.filter((e=>e.props.value===x))[0],{className:"margin-top--md"}):r.createElement("div",{className:"margin-top--md"},f.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==x})))))}function h(e){const t=(0,s.Z)();return r.createElement(m,(0,a.Z)({key:String(t)},e))}const f="tabItem_Ymn6";function y(e){let{children:t,hidden:n,className:a}=e;return r.createElement("div",{role:"tabpanel",className:(0,o.Z)(f,a),hidden:n},t)}const b={id:"getting-started",title:"Getting started",slug:"/"},g=void 0,v={unversionedId:"getting-started",id:"getting-started",title:"Getting started",description:"Build a consistent, themed UI in minutes.",source:"@site/docs/index.mdx",sourceDirName:".",slug:"/",permalink:"/restyle/",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/index.mdx",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"getting-started",title:"Getting started",slug:"/"},sidebar:"docs",next:{title:"Fundamentals",permalink:"/restyle/fundamentals"}},k={},x=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Playground",id:"playground",level:2}],T={toc:x};function w(e){let{components:t,...r}=e;return(0,l.kt)("wrapper",(0,a.Z)({},T,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Build a consistent, themed UI in minutes.")),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Welcome example",src:n(2565).Z,width:"700",height:"403"})),(0,l.kt)("p",null,"The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus."),(0,l.kt)("p",null,"This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum."),(0,l.kt)("p",null,"Here's an example of how a view built with Restyle components could look:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'import {\n ThemeProvider,\n createBox,\n createText,\n createRestyleComponent,\n createVariant,\n VariantProps,\n} from \'@shopify/restyle\';\n\n// See the "Defining your theme" section under "Fundamentals"\nimport theme, {Theme} from \'./theme\';\n\nconst Box = createBox();\nconst Text = createText();\n\nconst Card = createRestyleComponent<\n VariantProps & React.ComponentProps,\n Theme\n>([createVariant({themeKey: \'cardVariants\'})], Box);\n\nconst Welcome = () => {\n return (\n \n Welcome\n \n \n This is a simple example\n \n \n Displaying how to use Restyle\n \n \n \n );\n};\n\nconst App = () => {\n return (\n \n \n \n );\n};\n')),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Simple example",src:n(2355).Z,width:"700",height:"403"})),(0,l.kt)("h2",{id:"installation"},"Installation"),(0,l.kt)("p",null,"Add the package to your project:"),(0,l.kt)(h,{mdxType:"Tabs"},(0,l.kt)(y,{value:"yarn",label:"Yarn",default:!0,mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @shopify/restyle\n"))),(0,l.kt)(y,{value:"npm",label:"Npm",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @shopify/restyle\n"))),(0,l.kt)(y,{value:"expo",label:"Expo",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npx expo install @shopify/restyle\n")))),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)("p",null,"Read more about the usage of ",(0,l.kt)("inlineCode",{parentName:"p"},"Restyle")," ",(0,l.kt)("a",{parentName:"p",href:"/fundamentals"},"here"),"."),(0,l.kt)("h2",{id:"playground"},"Playground"),(0,l.kt)("p",null,"The ",(0,l.kt)("a",{parentName:"p",href:"/"},"fixture")," is an example app showing how to use the library."))}w.isMDXComponent=!0},2355:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/simple-example-866819cb9b1c401398713cd85972ce1e.gif"},2565:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/welcome-example-53186d2f4fdca35f97ddf093d2e95cca.gif"}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[173],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),c=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=c(e.components);return a.createElement(i.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=c(n),m=r,h=p["".concat(i,".").concat(m)]||p[m]||d[m]||l;return n?a.createElement(h,o(o({ref:t},u),{},{components:n})):a.createElement(h,o({ref:t},u))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>k,contentTitle:()=>g,default:()=>w,frontMatter:()=>b,metadata:()=>v,toc:()=>x});var a=n(7462),r=n(7294),l=n(3905),o=n(6010),s=n(2389),i=n(7392),c=n(7094),u=n(2466);const p="tabList__CuJ",d="tabItem_LNqP";function m(e){const{lazy:t,block:n,defaultValue:l,values:s,groupId:m,className:h}=e,f=r.Children.map(e.children,(e=>{if((0,r.isValidElement)(e)&&"value"in e.props)return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})),y=s??f.map((e=>{let{props:{value:t,label:n,attributes:a}}=e;return{value:t,label:n,attributes:a}})),b=(0,i.l)(y,((e,t)=>e.value===t.value));if(b.length>0)throw new Error(`Docusaurus error: Duplicate values "${b.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`);const g=null===l?l:l??f.find((e=>e.props.default))?.props.value??f[0].props.value;if(null!==g&&!y.some((e=>e.value===g)))throw new Error(`Docusaurus error: The has a defaultValue "${g}" but none of its children has the corresponding value. Available values are: ${y.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);const{tabGroupChoices:v,setTabGroupChoices:k}=(0,c.U)(),[x,T]=(0,r.useState)(g),w=[],{blockElementScrollPositionUntilNextRender:O}=(0,u.o5)();if(null!=m){const e=v[m];null!=e&&e!==x&&y.some((t=>t.value===e))&&T(e)}const N=e=>{const t=e.currentTarget,n=w.indexOf(t),a=y[n].value;a!==x&&(O(t),T(a),null!=m&&k(m,String(a)))},E=e=>{let t=null;switch(e.key){case"Enter":N(e);break;case"ArrowRight":{const n=w.indexOf(e.currentTarget)+1;t=w[n]??w[0];break}case"ArrowLeft":{const n=w.indexOf(e.currentTarget)-1;t=w[n]??w[w.length-1];break}}t?.focus()};return r.createElement("div",{className:(0,o.Z)("tabs-container",p)},r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},h)},y.map((e=>{let{value:t,label:n,attributes:l}=e;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:x===t?0:-1,"aria-selected":x===t,key:t,ref:e=>w.push(e),onKeyDown:E,onClick:N},l,{className:(0,o.Z)("tabs__item",d,l?.className,{"tabs__item--active":x===t})}),n??t)}))),t?(0,r.cloneElement)(f.filter((e=>e.props.value===x))[0],{className:"margin-top--md"}):r.createElement("div",{className:"margin-top--md"},f.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==x})))))}function h(e){const t=(0,s.Z)();return r.createElement(m,(0,a.Z)({key:String(t)},e))}const f="tabItem_Ymn6";function y(e){let{children:t,hidden:n,className:a}=e;return r.createElement("div",{role:"tabpanel",className:(0,o.Z)(f,a),hidden:n},t)}const b={id:"getting-started",title:"Getting started",slug:"/"},g=void 0,v={unversionedId:"getting-started",id:"getting-started",title:"Getting started",description:"Build a consistent, themed UI in minutes.",source:"@site/docs/index.mdx",sourceDirName:".",slug:"/",permalink:"/restyle/",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/index.mdx",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"getting-started",title:"Getting started",slug:"/"},sidebar:"docs",next:{title:"Fundamentals",permalink:"/restyle/fundamentals"}},k={},x=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Playground",id:"playground",level:2}],T={toc:x};function w(e){let{components:t,...r}=e;return(0,l.kt)("wrapper",(0,a.Z)({},T,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Build a consistent, themed UI in minutes.")),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Welcome example",src:n(2565).Z,width:"700",height:"403"})),(0,l.kt)("p",null,"The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus."),(0,l.kt)("p",null,"This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum."),(0,l.kt)("p",null,"Here's an example of how a view built with Restyle components could look:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'import {\n ThemeProvider,\n createBox,\n createText,\n createRestyleComponent,\n createVariant,\n VariantProps,\n} from \'@shopify/restyle\';\n\n// See the "Defining your theme" section under "Fundamentals"\nimport theme, {Theme} from \'./theme\';\n\nconst Box = createBox();\nconst Text = createText();\n\nconst Card = createRestyleComponent<\n VariantProps & React.ComponentProps,\n Theme\n>([createVariant({themeKey: \'cardVariants\'})], Box);\n\nconst Welcome = () => {\n return (\n \n Welcome\n \n \n This is a simple example\n \n \n Displaying how to use Restyle\n \n \n \n );\n};\n\nconst App = () => {\n return (\n \n \n \n );\n};\n')),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Simple example",src:n(2355).Z,width:"700",height:"403"})),(0,l.kt)("h2",{id:"installation"},"Installation"),(0,l.kt)("p",null,"Add the package to your project:"),(0,l.kt)(h,{mdxType:"Tabs"},(0,l.kt)(y,{value:"yarn",label:"Yarn",default:!0,mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @shopify/restyle\n"))),(0,l.kt)(y,{value:"npm",label:"Npm",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @shopify/restyle\n"))),(0,l.kt)(y,{value:"expo",label:"Expo",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npx expo install @shopify/restyle\n")))),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)("p",null,"Read more about the usage of ",(0,l.kt)("inlineCode",{parentName:"p"},"Restyle")," ",(0,l.kt)("a",{parentName:"p",href:"/fundamentals"},"here"),"."),(0,l.kt)("h2",{id:"playground"},"Playground"),(0,l.kt)("p",null,"The ",(0,l.kt)("a",{parentName:"p",href:"/"},"fixture")," is an example app showing how to use the library."))}w.isMDXComponent=!0},2355:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/simple-example-866819cb9b1c401398713cd85972ce1e.gif"},2565:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/welcome-example-53186d2f4fdca35f97ddf093d2e95cca.gif"}}]); \ No newline at end of file diff --git a/assets/js/5a58cff1.ec3072f7.js b/assets/js/5a58cff1.33db6e20.js similarity index 75% rename from assets/js/5a58cff1.ec3072f7.js rename to assets/js/5a58cff1.33db6e20.js index fcd2682..094171c 100644 --- a/assets/js/5a58cff1.ec3072f7.js +++ b/assets/js/5a58cff1.33db6e20.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[118],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>d});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,d=u["".concat(l,".").concat(m)]||u[m]||f[m]||o;return n?r.createElement(d,i(i({ref:t},p),{},{components:n})):r.createElement(d,i({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={id:"spacing",title:"Spacing"},i=void 0,s={unversionedId:"fundamentals/spacing",id:"fundamentals/spacing",title:"Spacing",description:"Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes):",source:"@site/docs/fundamentals/spacing.md",sourceDirName:"fundamentals",slug:"/fundamentals/spacing",permalink:"/restyle/fundamentals/spacing",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/spacing.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"spacing",title:"Spacing"},sidebar:"docs",previous:{title:"Colors",permalink:"/restyle/fundamentals/colors"},next:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"}},l={},c=[],p={toc:c};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Spacing tends to follow multiples of a given base spacing number, for example ",(0,a.kt)("inlineCode",{parentName:"p"},"8"),". We prefer using the t-shirt size naming convention, because of the scalability of it (any number of ",(0,a.kt)("inlineCode",{parentName:"p"},"x"),"'s can be prepended for smaller and larger sizes):"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n});\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[118],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>d});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,d=u["".concat(l,".").concat(m)]||u[m]||f[m]||o;return n?r.createElement(d,i(i({ref:t},p),{},{components:n})):r.createElement(d,i({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={id:"spacing",title:"Spacing"},i=void 0,s={unversionedId:"fundamentals/spacing",id:"fundamentals/spacing",title:"Spacing",description:"Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes):",source:"@site/docs/fundamentals/spacing.md",sourceDirName:"fundamentals",slug:"/fundamentals/spacing",permalink:"/restyle/fundamentals/spacing",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/spacing.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"spacing",title:"Spacing"},sidebar:"docs",previous:{title:"Colors",permalink:"/restyle/fundamentals/colors"},next:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"}},l={},c=[],p={toc:c};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Spacing tends to follow multiples of a given base spacing number, for example ",(0,a.kt)("inlineCode",{parentName:"p"},"8"),". We prefer using the t-shirt size naming convention, because of the scalability of it (any number of ",(0,a.kt)("inlineCode",{parentName:"p"},"x"),"'s can be prepended for smaller and larger sizes):"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n});\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5c9eef2d.07edee36.js b/assets/js/5c9eef2d.07edee36.js deleted file mode 100644 index 112fc04..0000000 --- a/assets/js/5c9eef2d.07edee36.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[892],{3905:(e,n,r)=>{r.d(n,{Zo:()=>p,kt:()=>y});var t=r(7294);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function o(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function d(e){for(var n=1;n=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=t.createContext({}),l=function(e){var n=t.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):d(d({},n),e)),r},p=function(e){var n=l(e.components);return t.createElement(c.Provider,{value:n},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},u=t.forwardRef((function(e,n){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),s=l(r),u=a,y=s["".concat(c,".").concat(u)]||s[u]||m[u]||o;return r?t.createElement(y,d(d({ref:n},p),{},{components:r})):t.createElement(y,d({ref:n},p))}));function y(e,n){var r=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=r.length,d=new Array(o);d[0]=u;var i={};for(var c in n)hasOwnProperty.call(n,c)&&(i[c]=n[c]);i.originalType=e,i[s]="string"==typeof e?e:a,d[1]=i;for(var l=2;l{r.r(n),r.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>s,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var t=r(7462),a=(r(7294),r(3905));const o={id:"dark-mode",title:"Implementing dark mode"},d=void 0,i={unversionedId:"guides/dark-mode",id:"guides/dark-mode",title:"Implementing dark mode",description:"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:",source:"@site/docs/guides/dark-mode.md",sourceDirName:"guides",slug:"/guides/dark-mode",permalink:"/restyle/guides/dark-mode",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/dark-mode.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"dark-mode",title:"Implementing dark mode"},sidebar:"docs",previous:{title:"Guides",permalink:"/restyle/guides"},next:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"}},c={},l=[],p={toc:l};function s(e){let{components:n,...r}=e;return(0,a.kt)("wrapper",(0,t.Z)({},p,r,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'import React, {useState} from \'react\';\nimport {Switch} from \'react-native\';\nimport {\n ThemeProvider,\n createBox,\n createText,\n createTheme,\n} from \'@shopify/restyle\';\n\nexport const palette = {\n purple: \'#5A31F4\',\n white: \'#FFF\',\n black: \'#111\',\n darkGray: \'#333\',\n lightGray: \'#EEE\',\n};\n\nconst theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n },\n colors: {\n mainBackground: palette.lightGray,\n mainForeground: palette.black,\n\n primaryCardBackground: palette.purple,\n secondaryCardBackground: palette.white,\n primaryCardText: palette.white,\n secondaryCardText: palette.black,\n },\n textVariants: {\n defaults: {},\n body: {\n fontSize: 16,\n lineHeight: 24,\n color: \'mainForeground\',\n },\n },\n cardVariants: {\n defaults: {},\n primary: {\n backgroundColor: \'primaryCardBackground\',\n shadowOpacity: 0.3,\n },\n secondary: {\n backgroundColor: \'secondaryCardBackground\',\n shadowOpacity: 0.1,\n },\n },\n});\n\ntype Theme = typeof theme;\n\nconst darkTheme: Theme = {\n ...theme,\n colors: {\n ...theme.colors,\n mainBackground: palette.black,\n mainForeground: palette.white,\n\n secondaryCardBackground: palette.darkGray,\n secondaryCardText: palette.white,\n },\n};\n\nconst Box = createBox();\nconst Text = createText();\n\nconst App = () => {\n const [darkMode, setDarkMode] = useState(false);\n return (\n \n \n \n \n Primary Card\n \n \n \n \n Secondary Card\n \n \n \n setDarkMode(value)}\n />\n \n \n \n );\n};\n\nexport default App;\n')))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5c9eef2d.dcf64117.js b/assets/js/5c9eef2d.dcf64117.js new file mode 100644 index 0000000..6fc2b4b --- /dev/null +++ b/assets/js/5c9eef2d.dcf64117.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[892],{3905:(e,n,r)=>{r.d(n,{Zo:()=>p,kt:()=>y});var t=r(7294);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function o(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function d(e){for(var n=1;n=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=t.createContext({}),l=function(e){var n=t.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):d(d({},n),e)),r},p=function(e){var n=l(e.components);return t.createElement(c.Provider,{value:n},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},u=t.forwardRef((function(e,n){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),s=l(r),u=a,y=s["".concat(c,".").concat(u)]||s[u]||m[u]||o;return r?t.createElement(y,d(d({ref:n},p),{},{components:r})):t.createElement(y,d({ref:n},p))}));function y(e,n){var r=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=r.length,d=new Array(o);d[0]=u;var i={};for(var c in n)hasOwnProperty.call(n,c)&&(i[c]=n[c]);i.originalType=e,i[s]="string"==typeof e?e:a,d[1]=i;for(var l=2;l{r.r(n),r.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>s,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var t=r(7462),a=(r(7294),r(3905));const o={id:"dark-mode",title:"Implementing dark mode"},d=void 0,i={unversionedId:"guides/dark-mode",id:"guides/dark-mode",title:"Implementing dark mode",description:"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:",source:"@site/docs/guides/dark-mode.md",sourceDirName:"guides",slug:"/guides/dark-mode",permalink:"/restyle/guides/dark-mode",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/dark-mode.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"dark-mode",title:"Implementing dark mode"},sidebar:"docs",previous:{title:"Guides",permalink:"/restyle/guides"},next:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"}},c={},l=[],p={toc:l};function s(e){let{components:n,...r}=e;return(0,a.kt)("wrapper",(0,t.Z)({},p,r,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'import React, {useState} from \'react\';\nimport {Switch} from \'react-native\';\nimport {\n ThemeProvider,\n createBox,\n createText,\n createTheme,\n} from \'@shopify/restyle\';\n\nexport const palette = {\n purple: \'#5A31F4\',\n white: \'#FFF\',\n black: \'#111\',\n darkGray: \'#333\',\n lightGray: \'#EEE\',\n};\n\nconst theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n },\n colors: {\n mainBackground: palette.lightGray,\n mainForeground: palette.black,\n\n primaryCardBackground: palette.purple,\n secondaryCardBackground: palette.white,\n primaryCardText: palette.white,\n secondaryCardText: palette.black,\n },\n textVariants: {\n defaults: {},\n body: {\n fontSize: 16,\n lineHeight: 24,\n color: \'mainForeground\',\n },\n },\n cardVariants: {\n defaults: {},\n primary: {\n backgroundColor: \'primaryCardBackground\',\n shadowOpacity: 0.3,\n },\n secondary: {\n backgroundColor: \'secondaryCardBackground\',\n shadowOpacity: 0.1,\n },\n },\n});\n\ntype Theme = typeof theme;\n\nconst darkTheme: Theme = {\n ...theme,\n colors: {\n ...theme.colors,\n mainBackground: palette.black,\n mainForeground: palette.white,\n\n secondaryCardBackground: palette.darkGray,\n secondaryCardText: palette.white,\n },\n};\n\nconst Box = createBox();\nconst Text = createText();\n\nconst App = () => {\n const [darkMode, setDarkMode] = useState(false);\n return (\n \n \n \n \n Primary Card\n \n \n \n \n Secondary Card\n \n \n \n setDarkMode(value)}\n />\n \n \n \n );\n};\n\nexport default App;\n')))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/63d0de19.e4b71337.js b/assets/js/63d0de19.ce0b707e.js similarity index 73% rename from assets/js/63d0de19.e4b71337.js rename to assets/js/63d0de19.ce0b707e.js index 9ccac0e..dcb494f 100644 --- a/assets/js/63d0de19.e4b71337.js +++ b/assets/js/63d0de19.ce0b707e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[493],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=r.createContext({}),l=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=l(e.components);return r.createElement(i.Provider,{value:t},e.children)},m="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),m=l(n),d=a,f=m["".concat(i,".").concat(d)]||m[d]||p[d]||o;return n?r.createElement(f,s(s({ref:t},u),{},{components:n})):r.createElement(f,s({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[m]="string"==typeof e?e:a,s[1]=c;for(var l=2;l{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>m,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(7462),a=(n(7294),n(3905));const o={id:"accessing-the-theme",title:"Accessing the theme"},s=void 0,c={unversionedId:"fundamentals/accessing-the-theme",id:"fundamentals/accessing-the-theme",title:"Accessing the theme",description:"If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook:",source:"@site/docs/fundamentals/accessing-the-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/accessing-the-theme",permalink:"/restyle/fundamentals/accessing-the-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/accessing-the-theme.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"accessing-the-theme",title:"Accessing the theme"},sidebar:"docs",previous:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"},next:{title:"Variants",permalink:"/restyle/fundamentals/variants"}},i={},l=[],u={toc:l};function m(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"If you need to manually access the theme outside of a component created with Restyle, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"useTheme")," hook:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"const Component = () => {\n const theme = useTheme();\n const {cardPrimaryBackground} = theme.colors;\n // ...\n};\n")),(0,a.kt)("p",null,"By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a ",(0,a.kt)("a",{parentName:"p",href:"/guides/dark-mode"},"dark mode switch")," in your app."))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[493],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=r.createContext({}),l=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=l(e.components);return r.createElement(i.Provider,{value:t},e.children)},m="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),m=l(n),d=a,f=m["".concat(i,".").concat(d)]||m[d]||p[d]||o;return n?r.createElement(f,s(s({ref:t},u),{},{components:n})):r.createElement(f,s({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[m]="string"==typeof e?e:a,s[1]=c;for(var l=2;l{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>m,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(7462),a=(n(7294),n(3905));const o={id:"accessing-the-theme",title:"Accessing the theme"},s=void 0,c={unversionedId:"fundamentals/accessing-the-theme",id:"fundamentals/accessing-the-theme",title:"Accessing the theme",description:"If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook:",source:"@site/docs/fundamentals/accessing-the-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/accessing-the-theme",permalink:"/restyle/fundamentals/accessing-the-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/accessing-the-theme.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"accessing-the-theme",title:"Accessing the theme"},sidebar:"docs",previous:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"},next:{title:"Variants",permalink:"/restyle/fundamentals/variants"}},i={},l=[],u={toc:l};function m(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"If you need to manually access the theme outside of a component created with Restyle, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"useTheme")," hook:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"const Component = () => {\n const theme = useTheme();\n const {cardPrimaryBackground} = theme.colors;\n // ...\n};\n")),(0,a.kt)("p",null,"By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a ",(0,a.kt)("a",{parentName:"p",href:"/guides/dark-mode"},"dark mode switch")," in your app."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/6ab114b0.20889665.js b/assets/js/6ab114b0.9a3cbad5.js similarity index 75% rename from assets/js/6ab114b0.20889665.js rename to assets/js/6ab114b0.9a3cbad5.js index ea9d521..5cbdd7f 100644 --- a/assets/js/6ab114b0.20889665.js +++ b/assets/js/6ab114b0.9a3cbad5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[387],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),c=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(r),y=a,f=u["".concat(i,".").concat(y)]||u[y]||d[y]||o;return r?n.createElement(f,s(s({ref:t},p),{},{components:r})):n.createElement(f,s({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,s=new Array(o);s[0]=y;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[u]="string"==typeof e?e:a,s[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={id:"overriding-styles",title:"Overriding styles"},s=void 0,l={unversionedId:"fundamentals/overriding-styles",id:"fundamentals/overriding-styles",title:"Overriding styles",description:"Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary.",source:"@site/docs/fundamentals/overriding-styles.md",sourceDirName:"fundamentals",slug:"/fundamentals/overriding-styles",permalink:"/restyle/fundamentals/overriding-styles",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/overriding-styles.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"overriding-styles",title:"Overriding styles"},sidebar:"docs",previous:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"},next:{title:"Restyle functions",permalink:"/restyle/fundamentals/restyle-functions"}},i={},c=[],p={toc:c};function u(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Any Restyle component also accepts a regular ",(0,a.kt)("inlineCode",{parentName:"p"},"style")," property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[387],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),c=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(r),y=a,f=u["".concat(i,".").concat(y)]||u[y]||d[y]||o;return r?n.createElement(f,s(s({ref:t},p),{},{components:r})):n.createElement(f,s({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,s=new Array(o);s[0]=y;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[u]="string"==typeof e?e:a,s[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={id:"overriding-styles",title:"Overriding styles"},s=void 0,l={unversionedId:"fundamentals/overriding-styles",id:"fundamentals/overriding-styles",title:"Overriding styles",description:"Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary.",source:"@site/docs/fundamentals/overriding-styles.md",sourceDirName:"fundamentals",slug:"/fundamentals/overriding-styles",permalink:"/restyle/fundamentals/overriding-styles",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/overriding-styles.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"overriding-styles",title:"Overriding styles"},sidebar:"docs",previous:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"},next:{title:"Restyle functions",permalink:"/restyle/fundamentals/restyle-functions"}},i={},c=[],p={toc:c};function u(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Any Restyle component also accepts a regular ",(0,a.kt)("inlineCode",{parentName:"p"},"style")," property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/83398278.5f87606d.js b/assets/js/83398278.5f87606d.js deleted file mode 100644 index fc2ddc8..0000000 --- a/assets/js/83398278.5f87606d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[352],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),m=p(n),u=r,f=m["".concat(l,".").concat(u)]||m[u]||d[u]||o;return n?a.createElement(f,i(i({ref:t},c),{},{components:n})):a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[m]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var a=n(7462),r=(n(7294),n(3905));const o={id:"variants",title:"Variants"},i=void 0,s={unversionedId:"fundamentals/variants",id:"fundamentals/variants",title:"Variants",description:"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme.",source:"@site/docs/fundamentals/variants.md",sourceDirName:"fundamentals",slug:"/fundamentals/variants",permalink:"/restyle/fundamentals/variants",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/variants.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"variants",title:"Variants"},sidebar:"docs",previous:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"},next:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"}},l={},p=[],c={toc:p};function m(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"// In theme\nconst theme = createTheme({\n // ...\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n },\n colors: {\n cardPrimaryBackground: '#EEEEEE',\n },\n breakpoints: {\n phone: 0,\n tablet: 768,\n },\n cardVariants: {\n defaults: {\n // We can define defaults for the variant here.\n // This will be applied after the defaults passed to createVariant and before the variant defined below.\n },\n regular: {\n // We can refer to other values in the theme here, and use responsive props\n padding: {\n phone: 's',\n tablet: 'm',\n },\n },\n elevated: {\n padding: {\n phone: 's',\n tablet: 'm',\n },\n shadowColor: '#000',\n shadowOpacity: 0.2,\n shadowOffset: {width: 0, height: 5},\n shadowRadius: 15,\n elevation: 5,\n }\n }\n})\n\nimport {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'\nimport {Theme} from './theme';\n\nconst variant = createVariant({\n themeKey: 'cardVariants',\n defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardPrimaryBackground',\n },\n})\n\nconst Card = createRestyleComponent<\n VariantProps & BoxProps,\n Theme,\n>([variant], Box)\n\n\n\n// createVariant and createRestyleComponent are often combined into a single\n// call, which improves the type hinting as well:\nconst Card = createRestyleComponent<\n VariantProps & React.ComponentProps,\n Theme\n>(\n [\n createVariant({\n themeKey: 'cardVariants',\n defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardPrimaryBackground',\n },\n }),\n ],\n Box,\n);\n")),(0,r.kt)("p",null,"Arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that will map to a variant. Defaults to ",(0,r.kt)("inlineCode",{parentName:"li"},"variant"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"themeKey"),": A key in the theme to map values from. Unlike ",(0,r.kt)("inlineCode",{parentName:"li"},"createRestyleFunction"),", this option ",(0,r.kt)("em",{parentName:"li"},"is required")," to create a variant."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaults"),": The default values to apply before applying anything from the values in the theme.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/83398278.93668d77.js b/assets/js/83398278.93668d77.js new file mode 100644 index 0000000..75859ec --- /dev/null +++ b/assets/js/83398278.93668d77.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[352],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),m=p(n),u=r,f=m["".concat(l,".").concat(u)]||m[u]||d[u]||o;return n?a.createElement(f,i(i({ref:t},c),{},{components:n})):a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[m]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var a=n(7462),r=(n(7294),n(3905));const o={id:"variants",title:"Variants"},i=void 0,s={unversionedId:"fundamentals/variants",id:"fundamentals/variants",title:"Variants",description:"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme.",source:"@site/docs/fundamentals/variants.md",sourceDirName:"fundamentals",slug:"/fundamentals/variants",permalink:"/restyle/fundamentals/variants",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/variants.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"variants",title:"Variants"},sidebar:"docs",previous:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"},next:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"}},l={},p=[],c={toc:p};function m(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"// In theme\nconst theme = createTheme({\n // ...\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n },\n colors: {\n cardPrimaryBackground: '#EEEEEE',\n },\n breakpoints: {\n phone: 0,\n tablet: 768,\n },\n cardVariants: {\n defaults: {\n // We can define defaults for the variant here.\n // This will be applied after the defaults passed to createVariant and before the variant defined below.\n },\n regular: {\n // We can refer to other values in the theme here, and use responsive props\n padding: {\n phone: 's',\n tablet: 'm',\n },\n },\n elevated: {\n padding: {\n phone: 's',\n tablet: 'm',\n },\n shadowColor: '#000',\n shadowOpacity: 0.2,\n shadowOffset: {width: 0, height: 5},\n shadowRadius: 15,\n elevation: 5,\n }\n }\n})\n\nimport {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'\nimport {Theme} from './theme';\n\nconst variant = createVariant({\n themeKey: 'cardVariants',\n defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardPrimaryBackground',\n },\n})\n\nconst Card = createRestyleComponent<\n VariantProps & BoxProps,\n Theme,\n>([variant], Box)\n\n\n\n// createVariant and createRestyleComponent are often combined into a single\n// call, which improves the type hinting as well:\nconst Card = createRestyleComponent<\n VariantProps & React.ComponentProps,\n Theme\n>(\n [\n createVariant({\n themeKey: 'cardVariants',\n defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardPrimaryBackground',\n },\n }),\n ],\n Box,\n);\n")),(0,r.kt)("p",null,"Arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that will map to a variant. Defaults to ",(0,r.kt)("inlineCode",{parentName:"li"},"variant"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"themeKey"),": A key in the theme to map values from. Unlike ",(0,r.kt)("inlineCode",{parentName:"li"},"createRestyleFunction"),", this option ",(0,r.kt)("em",{parentName:"li"},"is required")," to create a variant."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaults"),": The default values to apply before applying anything from the values in the theme.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/92dde4bf.87b4fb7c.js b/assets/js/92dde4bf.87b4fb7c.js deleted file mode 100644 index 133a7da..0000000 --- a/assets/js/92dde4bf.87b4fb7c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[795],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},g=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),g=o,m=u["".concat(l,".").concat(g)]||u[g]||d[g]||i;return n?r.createElement(m,a(a({ref:t},c),{},{components:n})):r.createElement(m,a({ref:t},c))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=g;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,a[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const i={id:"migrating-to-v2",title:"Migrating to Restyle V2"},a=void 0,s={unversionedId:"guides/migrating-to-v2",id:"guides/migrating-to-v2",title:"Migrating to Restyle V2",description:"v2 of this library introduces breaking changes in the usage of the useRestyle hook.",source:"@site/docs/guides/migrating-to-v2.md",sourceDirName:"guides",slug:"/guides/migrating-to-v2",permalink:"/restyle/guides/migrating-to-v2",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/migrating-to-v2.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"migrating-to-v2",title:"Migrating to Restyle V2"},sidebar:"docs",previous:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},p=[{value:"Addressing breaking changes in useRestyle",id:"addressing-breaking-changes-in-userestyle",level:2},{value:"Before",id:"before",level:3},{value:"After",id:"after",level:3}],c={toc:p};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"v2 of this library introduces breaking changes in the usage of the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook.\nIf you are not using ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," in your project, then you don't need to address any breaking change and can upgrade the library right away."),(0,o.kt)("h2",{id:"addressing-breaking-changes-in-userestyle"},"Addressing breaking changes in ",(0,o.kt)("inlineCode",{parentName:"h2"},"useRestyle")),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Import ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")," from ",(0,o.kt)("inlineCode",{parentName:"li"},"@shopify/restyle")),(0,o.kt)("li",{parentName:"ol"},"Wrap the array you were using as param of ",(0,o.kt)("inlineCode",{parentName:"li"},"useRestyle")," with ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")),(0,o.kt)("li",{parentName:"ol"},"Done")),(0,o.kt)("h3",{id:"before"},"Before"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = [spacing, border, backgroundColor];\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")),(0,o.kt)("h3",{id:"after"},"After"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/92dde4bf.bc49227e.js b/assets/js/92dde4bf.bc49227e.js new file mode 100644 index 0000000..fc34f0b --- /dev/null +++ b/assets/js/92dde4bf.bc49227e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[795],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},g=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),g=o,m=u["".concat(l,".").concat(g)]||u[g]||d[g]||i;return n?r.createElement(m,a(a({ref:t},c),{},{components:n})):r.createElement(m,a({ref:t},c))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=g;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,a[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const i={id:"migrating-to-v2",title:"Migrating to Restyle V2"},a=void 0,s={unversionedId:"guides/migrating-to-v2",id:"guides/migrating-to-v2",title:"Migrating to Restyle V2",description:"v2 of this library introduces breaking changes in the usage of the useRestyle hook.",source:"@site/docs/guides/migrating-to-v2.md",sourceDirName:"guides",slug:"/guides/migrating-to-v2",permalink:"/restyle/guides/migrating-to-v2",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/migrating-to-v2.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"migrating-to-v2",title:"Migrating to Restyle V2"},sidebar:"docs",previous:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},p=[{value:"Addressing breaking changes in useRestyle",id:"addressing-breaking-changes-in-userestyle",level:2},{value:"Before",id:"before",level:3},{value:"After",id:"after",level:3}],c={toc:p};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"v2 of this library introduces breaking changes in the usage of the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook.\nIf you are not using ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," in your project, then you don't need to address any breaking change and can upgrade the library right away."),(0,o.kt)("h2",{id:"addressing-breaking-changes-in-userestyle"},"Addressing breaking changes in ",(0,o.kt)("inlineCode",{parentName:"h2"},"useRestyle")),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Import ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")," from ",(0,o.kt)("inlineCode",{parentName:"li"},"@shopify/restyle")),(0,o.kt)("li",{parentName:"ol"},"Wrap the array you were using as param of ",(0,o.kt)("inlineCode",{parentName:"li"},"useRestyle")," with ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")),(0,o.kt)("li",{parentName:"ol"},"Done")),(0,o.kt)("h3",{id:"before"},"Before"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = [spacing, border, backgroundColor];\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")),(0,o.kt)("h3",{id:"after"},"After"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9825658c.7974d7dd.js b/assets/js/9825658c.10fafb80.js similarity index 50% rename from assets/js/9825658c.7974d7dd.js rename to assets/js/9825658c.10fafb80.js index 29601eb..47c764c 100644 --- a/assets/js/9825658c.7974d7dd.js +++ b/assets/js/9825658c.10fafb80.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[661],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,s=e.originalType,p=e.parentName,c=a(e,["components","mdxType","originalType","parentName"]),u=l(n),y=o,g=u["".concat(p,".").concat(y)]||u[y]||m[y]||s;return n?r.createElement(g,i(i({ref:t},c),{},{components:n})):r.createElement(g,i({ref:t},c))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var s=n.length,i=new Array(s);i[0]=y;var a={};for(var p in t)hasOwnProperty.call(t,p)&&(a[p]=t[p]);a.originalType=e,a[u]="string"==typeof e?e:o,i[1]=a;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var r=n(7462),o=(n(7294),n(3905));const s={id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},i=void 0,a={unversionedId:"guides/shopify-design-system",id:"guides/shopify-design-system",title:"Getting Setup With the Shopify Design System",description:"To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.",source:"@site/docs/guides/shopify-design-system.md",sourceDirName:"guides",slug:"/guides/shopify-design-system",permalink:"/restyle/guides/shopify-design-system",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/shopify-design-system.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},sidebar:"docs",previous:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"},next:{title:"Migrating to Restyle V2",permalink:"/restyle/guides/migrating-to-v2"}},p={},l=[{value:"Installation",id:"installation",level:4},{value:"Define Your Theme",id:"define-your-theme",level:4}],c={toc:l};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"To start using Shopify style assets we can leverage ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/Shopify/polaris/tree/main/polaris-tokens"},"Polaris tokens"),". You can see all of the tokens ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/tokens/colors"},"here"),"."),(0,o.kt)("h4",{id:"installation"},"Installation"),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://www.npmjs.com/"},"npm"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"npm install @shopify/polaris-tokens --save")),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://yarnpkg.com/en/"},"yarn"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"yarn add @shopify/polaris-tokens")),(0,o.kt)("h4",{id:"define-your-theme"},"Define Your Theme"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In theme\nimport tokens from '@shopify/polaris-tokens';\nimport {createTheme} from '@shopify/restyle';\n\nconst pxToNumber = (px: string) => {\n return parseInt(px.replace('px', ''), 10);\n};\n\nconst theme = createTheme({\n colors: {\n body: tokens.colorBlack,\n backgroundRegular: tokens.colorWhite,\n backgroundSubdued: tokens.colorSkyLighter,\n\n foregroundRegular: tokens.colorBlack,\n foregroundOff: tokens.colorInkLight,\n foregroundSubdued: tokens.colorInkLightest,\n foregroundContrasting: tokens.colorWhite,\n foregroundSuccess: tokens.colorGreenDark,\n\n highlightPrimary: tokens.colorIndigo,\n highlightPrimaryDisabled: tokens.colorIndigoLight,\n\n buttonBackgroundPlain: tokens.colorSky,\n errorPrimary: tokens.colorRed,\n\n iconBackgroundDark: tokens.colorBlueDarker,\n },\n spacing: {\n none: tokens.spacingNone,\n xxs: pxToNumber(tokens.spacingExtraTight),\n xs: pxToNumber(tokens.spacingTight),\n s: pxToNumber(tokens.spacingBaseTight),\n m: pxToNumber(tokens.spacingBase),\n l: pxToNumber(tokens.spacingLoose),\n xl: pxToNumber(tokens.spacingExtraLoose),\n xxl: 2 * pxToNumber(tokens.spacingExtraLoose),\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,"Now you can easily style your components with ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/"},"Shopify Polaris"),"."))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[661],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,s=e.originalType,p=e.parentName,c=a(e,["components","mdxType","originalType","parentName"]),u=l(n),y=o,g=u["".concat(p,".").concat(y)]||u[y]||m[y]||s;return n?r.createElement(g,i(i({ref:t},c),{},{components:n})):r.createElement(g,i({ref:t},c))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var s=n.length,i=new Array(s);i[0]=y;var a={};for(var p in t)hasOwnProperty.call(t,p)&&(a[p]=t[p]);a.originalType=e,a[u]="string"==typeof e?e:o,i[1]=a;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var r=n(7462),o=(n(7294),n(3905));const s={id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},i=void 0,a={unversionedId:"guides/shopify-design-system",id:"guides/shopify-design-system",title:"Getting Setup With the Shopify Design System",description:"To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.",source:"@site/docs/guides/shopify-design-system.md",sourceDirName:"guides",slug:"/guides/shopify-design-system",permalink:"/restyle/guides/shopify-design-system",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/shopify-design-system.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},sidebar:"docs",previous:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"},next:{title:"Migrating to Restyle V2",permalink:"/restyle/guides/migrating-to-v2"}},p={},l=[{value:"Installation",id:"installation",level:4},{value:"Define Your Theme",id:"define-your-theme",level:4}],c={toc:l};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"To start using Shopify style assets we can leverage ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/Shopify/polaris/tree/main/polaris-tokens"},"Polaris tokens"),". You can see all of the tokens ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/tokens/colors"},"here"),"."),(0,o.kt)("h4",{id:"installation"},"Installation"),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://www.npmjs.com/"},"npm"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"npm install @shopify/polaris-tokens --save")),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://yarnpkg.com/en/"},"yarn"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"yarn add @shopify/polaris-tokens")),(0,o.kt)("h4",{id:"define-your-theme"},"Define Your Theme"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In theme\nimport tokens from '@shopify/polaris-tokens';\nimport {createTheme} from '@shopify/restyle';\n\nconst pxToNumber = (px: string) => {\n return parseInt(px.replace('px', ''), 10);\n};\n\nconst theme = createTheme({\n colors: {\n body: tokens.colorBlack,\n backgroundRegular: tokens.colorWhite,\n backgroundSubdued: tokens.colorSkyLighter,\n\n foregroundRegular: tokens.colorBlack,\n foregroundOff: tokens.colorInkLight,\n foregroundSubdued: tokens.colorInkLightest,\n foregroundContrasting: tokens.colorWhite,\n foregroundSuccess: tokens.colorGreenDark,\n\n highlightPrimary: tokens.colorIndigo,\n highlightPrimaryDisabled: tokens.colorIndigoLight,\n\n buttonBackgroundPlain: tokens.colorSky,\n errorPrimary: tokens.colorRed,\n\n iconBackgroundDark: tokens.colorBlueDarker,\n },\n spacing: {\n none: tokens.spacingNone,\n xxs: pxToNumber(tokens.spacingExtraTight),\n xs: pxToNumber(tokens.spacingTight),\n s: pxToNumber(tokens.spacingBaseTight),\n m: pxToNumber(tokens.spacingBase),\n l: pxToNumber(tokens.spacingLoose),\n xl: pxToNumber(tokens.spacingExtraLoose),\n xxl: 2 * pxToNumber(tokens.spacingExtraLoose),\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,"Now you can easily style your components with ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/"},"Shopify Polaris"),"."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9cd7d415.07ee04b2.js b/assets/js/9cd7d415.3af42409.js similarity index 52% rename from assets/js/9cd7d415.07ee04b2.js rename to assets/js/9cd7d415.3af42409.js index 330313d..6ca49d9 100644 --- a/assets/js/9cd7d415.07ee04b2.js +++ b/assets/js/9cd7d415.3af42409.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[218],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(n),d=o,f=m["".concat(s,".").concat(d)]||m[d]||u[d]||a;return n?r.createElement(f,i(i({ref:t},c),{},{components:n})):r.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const a={id:"defining-your-theme",title:"Defining your theme"},i=void 0,l={unversionedId:"fundamentals/defining-your-theme",id:"fundamentals/defining-your-theme",title:"Defining your theme",description:'Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor="cardPrimary" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor.',source:"@site/docs/fundamentals/defining-your-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/defining-your-theme",permalink:"/restyle/fundamentals/defining-your-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/defining-your-theme.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"defining-your-theme",title:"Defining your theme"},sidebar:"docs",previous:{title:"Fundamentals",permalink:"/restyle/fundamentals"},next:{title:"Colors",permalink:"/restyle/fundamentals/colors"}},s={},p=[],c={toc:p};function m(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write ",(0,o.kt)("inlineCode",{parentName:"p"},'backgroundColor="cardPrimary"')," to use the named color from your theme. In fact, TypeScript enforces the ",(0,o.kt)("inlineCode",{parentName:"p"},"backgroundColor")," property to ",(0,o.kt)("em",{parentName:"p"},"only")," accept colors that have been defined in your theme, and autocompletes values for you in a modern editor."),(0,o.kt)("p",null,"Below is an example of how a basic theme could look. Make sure to read the other sections in ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals"},"Fundamentals")," for more details on how to set up your different theme values."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {createTheme} from '@shopify/restyle';\n\nconst palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n cardPrimaryBackground: palette.purplePrimary,\n },\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n textVariants: {\n header: {\n fontWeight: 'bold',\n fontSize: 34,\n },\n body: {\n fontSize: 16,\n lineHeight: 24,\n },\n defaults: {\n // We can define a default text variant here.\n },\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,(0,o.kt)("em",{parentName:"p"},"Note: ",(0,o.kt)("inlineCode",{parentName:"em"},"createTheme")," doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the ",(0,o.kt)("inlineCode",{parentName:"em"},"{ [key:string]: any }")," in BaseTheme")),(0,o.kt)("p",null,"This theme should be passed to a ",(0,o.kt)("inlineCode",{parentName:"p"},"ThemeProvider")," at the top of your React tree:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {ThemeProvider} from '@shopify/restyle';\nimport theme from './theme';\n\nconst App = () => (\n {/* Rest of the app */}\n);\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[218],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(n),d=o,f=m["".concat(s,".").concat(d)]||m[d]||u[d]||a;return n?r.createElement(f,i(i({ref:t},c),{},{components:n})):r.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const a={id:"defining-your-theme",title:"Defining your theme"},i=void 0,l={unversionedId:"fundamentals/defining-your-theme",id:"fundamentals/defining-your-theme",title:"Defining your theme",description:'Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor="cardPrimary" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor.',source:"@site/docs/fundamentals/defining-your-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/defining-your-theme",permalink:"/restyle/fundamentals/defining-your-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/defining-your-theme.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"defining-your-theme",title:"Defining your theme"},sidebar:"docs",previous:{title:"Fundamentals",permalink:"/restyle/fundamentals"},next:{title:"Colors",permalink:"/restyle/fundamentals/colors"}},s={},p=[],c={toc:p};function m(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write ",(0,o.kt)("inlineCode",{parentName:"p"},'backgroundColor="cardPrimary"')," to use the named color from your theme. In fact, TypeScript enforces the ",(0,o.kt)("inlineCode",{parentName:"p"},"backgroundColor")," property to ",(0,o.kt)("em",{parentName:"p"},"only")," accept colors that have been defined in your theme, and autocompletes values for you in a modern editor."),(0,o.kt)("p",null,"Below is an example of how a basic theme could look. Make sure to read the other sections in ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals"},"Fundamentals")," for more details on how to set up your different theme values."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {createTheme} from '@shopify/restyle';\n\nconst palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n cardPrimaryBackground: palette.purplePrimary,\n },\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n textVariants: {\n header: {\n fontWeight: 'bold',\n fontSize: 34,\n },\n body: {\n fontSize: 16,\n lineHeight: 24,\n },\n defaults: {\n // We can define a default text variant here.\n },\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,(0,o.kt)("em",{parentName:"p"},"Note: ",(0,o.kt)("inlineCode",{parentName:"em"},"createTheme")," doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the ",(0,o.kt)("inlineCode",{parentName:"em"},"{ [key:string]: any }")," in BaseTheme")),(0,o.kt)("p",null,"This theme should be passed to a ",(0,o.kt)("inlineCode",{parentName:"p"},"ThemeProvider")," at the top of your React tree:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {ThemeProvider} from '@shopify/restyle';\nimport theme from './theme';\n\nconst App = () => (\n {/* Rest of the app */}\n);\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9f55f1ad.62bdf1c9.js b/assets/js/9f55f1ad.d06dd7d0.js similarity index 53% rename from assets/js/9f55f1ad.62bdf1c9.js rename to assets/js/9f55f1ad.d06dd7d0.js index c205e67..b047ddf 100644 --- a/assets/js/9f55f1ad.62bdf1c9.js +++ b/assets/js/9f55f1ad.d06dd7d0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[433],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=p(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(h,l(l({ref:t},c),{},{components:n})):r.createElement(h,l({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const o={id:"colors",title:"Colors"},l=void 0,i={unversionedId:"fundamentals/colors",id:"fundamentals/colors",title:"Colors",description:"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette.",source:"@site/docs/fundamentals/colors.md",sourceDirName:"fundamentals",slug:"/fundamentals/colors",permalink:"/restyle/fundamentals/colors",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/colors.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"colors",title:"Colors"},sidebar:"docs",previous:{title:"Defining your theme",permalink:"/restyle/fundamentals/defining-your-theme"},next:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"}},s={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the ",(0,a.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/design/colors#color-palette"},"Polaris Color Palette"),"."),(0,a.kt)("p",null,"This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n mainForeground: palette.black,\n cardPrimaryBackground: palette.purplePrimary,\n buttonPrimaryBackground: palette.purplePrimary,\n },\n});\n")),(0,a.kt)("p",null,"Taking the time to define these semantic meanings comes with a number of benefits:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"It's easy to understand where and in what context colors are applied throughout the app"),(0,a.kt)("li",{parentName:"ul"},"If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to ",(0,a.kt)("inlineCode",{parentName:"li"},"purplePrimary")," throughout the app."),(0,a.kt)("li",{parentName:"ul"},"Even though ",(0,a.kt)("inlineCode",{parentName:"li"},"cardPrimaryBackground")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"buttonPrimaryBackground")," point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change."),(0,a.kt)("li",{parentName:"ul"},"A theme can easily be ",(0,a.kt)("a",{parentName:"li",href:"/guides/dark-mode"},"swapped at runtime"),".")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[433],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=p(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(h,l(l({ref:t},c),{},{components:n})):r.createElement(h,l({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const o={id:"colors",title:"Colors"},l=void 0,i={unversionedId:"fundamentals/colors",id:"fundamentals/colors",title:"Colors",description:"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette.",source:"@site/docs/fundamentals/colors.md",sourceDirName:"fundamentals",slug:"/fundamentals/colors",permalink:"/restyle/fundamentals/colors",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/colors.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"colors",title:"Colors"},sidebar:"docs",previous:{title:"Defining your theme",permalink:"/restyle/fundamentals/defining-your-theme"},next:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"}},s={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the ",(0,a.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/design/colors#color-palette"},"Polaris Color Palette"),"."),(0,a.kt)("p",null,"This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n mainForeground: palette.black,\n cardPrimaryBackground: palette.purplePrimary,\n buttonPrimaryBackground: palette.purplePrimary,\n },\n});\n")),(0,a.kt)("p",null,"Taking the time to define these semantic meanings comes with a number of benefits:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"It's easy to understand where and in what context colors are applied throughout the app"),(0,a.kt)("li",{parentName:"ul"},"If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to ",(0,a.kt)("inlineCode",{parentName:"li"},"purplePrimary")," throughout the app."),(0,a.kt)("li",{parentName:"ul"},"Even though ",(0,a.kt)("inlineCode",{parentName:"li"},"cardPrimaryBackground")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"buttonPrimaryBackground")," point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change."),(0,a.kt)("li",{parentName:"ul"},"A theme can easily be ",(0,a.kt)("a",{parentName:"li",href:"/guides/dark-mode"},"swapped at runtime"),".")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/ab0123d0.d43e2625.js b/assets/js/ab0123d0.520b540e.js similarity index 53% rename from assets/js/ab0123d0.d43e2625.js rename to assets/js/ab0123d0.520b540e.js index 3e81f06..d6e78de 100644 --- a/assets/js/ab0123d0.d43e2625.js +++ b/assets/js/ab0123d0.520b540e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[881],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),i=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=i(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=i(n),f=o,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return n?r.createElement(d,s(s({ref:t},c),{},{components:n})):r.createElement(d,s({ref:t},c))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,s=new Array(a);s[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:o,s[1]=l;for(var i=2;i{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>i});var r=n(7462),o=(n(7294),n(3905));const a={id:"responsive-values",title:"Responsive values"},s=void 0,l={unversionedId:"fundamentals/responsive-values",id:"fundamentals/responsive-values",title:"Responsive values",description:"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme:",source:"@site/docs/fundamentals/responsive-values.md",sourceDirName:"fundamentals",slug:"/fundamentals/responsive-values",permalink:"/restyle/fundamentals/responsive-values",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/responsive-values.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"responsive-values",title:"Responsive values"},sidebar:"docs",previous:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"},next:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"}},p={},i=[],c={toc:i};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the ",(0,o.kt)("inlineCode",{parentName:"p"},"breakpoints")," object in the theme:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n // ...\n breakpoints: {\n phone: 0,\n tablet: 768,\n }\n})\n\n// Props always accept either plain values\n\n\n// Or breakpoint-specific values\n\n")),(0,o.kt)("p",null,"If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useResponsiveProp")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {\n ColorProps,\n createBox,\n useResponsiveProp,\n useTheme,\n} from '@shopify/restyle';\nimport React from 'react';\nimport {\n ActivityIndicator,\n TouchableOpacity,\n TouchableOpacityProps,\n} from 'react-native';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst BaseButton = createBox(TouchableOpacity);\n\ntype Props = React.ComponentProps &\n ColorProps & {\n label: string;\n isLoading?: boolean;\n };\n\nconst Button = ({\n label,\n isLoading,\n color = {phone: 'purple', tablet: 'blue'},\n ...props\n}: Props) => {\n const theme = useTheme();\n\n // Will be 'purple' on phone and 'blue' on tablet\n const textColorProp = useResponsiveProp(color);\n\n // Can safely perform logic with the extracted value\n const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';\n\n return (\n \n \n {label}\n \n {isLoading ? (\n \n ) : null}\n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[881],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),i=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=i(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=i(n),f=o,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return n?r.createElement(d,s(s({ref:t},c),{},{components:n})):r.createElement(d,s({ref:t},c))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,s=new Array(a);s[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:o,s[1]=l;for(var i=2;i{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>i});var r=n(7462),o=(n(7294),n(3905));const a={id:"responsive-values",title:"Responsive values"},s=void 0,l={unversionedId:"fundamentals/responsive-values",id:"fundamentals/responsive-values",title:"Responsive values",description:"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme:",source:"@site/docs/fundamentals/responsive-values.md",sourceDirName:"fundamentals",slug:"/fundamentals/responsive-values",permalink:"/restyle/fundamentals/responsive-values",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/responsive-values.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"responsive-values",title:"Responsive values"},sidebar:"docs",previous:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"},next:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"}},p={},i=[],c={toc:i};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the ",(0,o.kt)("inlineCode",{parentName:"p"},"breakpoints")," object in the theme:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n // ...\n breakpoints: {\n phone: 0,\n tablet: 768,\n }\n})\n\n// Props always accept either plain values\n\n\n// Or breakpoint-specific values\n\n")),(0,o.kt)("p",null,"If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useResponsiveProp")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {\n ColorProps,\n createBox,\n useResponsiveProp,\n useTheme,\n} from '@shopify/restyle';\nimport React from 'react';\nimport {\n ActivityIndicator,\n TouchableOpacity,\n TouchableOpacityProps,\n} from 'react-native';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst BaseButton = createBox(TouchableOpacity);\n\ntype Props = React.ComponentProps &\n ColorProps & {\n label: string;\n isLoading?: boolean;\n };\n\nconst Button = ({\n label,\n isLoading,\n color = {phone: 'purple', tablet: 'blue'},\n ...props\n}: Props) => {\n const theme = useTheme();\n\n // Will be 'purple' on phone and 'blue' on tablet\n const textColorProp = useResponsiveProp(color);\n\n // Can safely perform logic with the extracted value\n const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';\n\n return (\n \n \n {label}\n \n {isLoading ? (\n \n ) : null}\n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/ce6c328c.6e97b991.js b/assets/js/ce6c328c.51d22541.js similarity index 58% rename from assets/js/ce6c328c.6e97b991.js rename to assets/js/ce6c328c.51d22541.js index d84c0f1..04a6141 100644 --- a/assets/js/ce6c328c.6e97b991.js +++ b/assets/js/ce6c328c.51d22541.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[444],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(r),y=a,f=c["".concat(l,".").concat(y)]||c[y]||d[y]||i;return r?n.createElement(f,o(o({ref:t},u),{},{components:r})):n.createElement(f,o({ref:t},u))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:a,o[1]=p;for(var s=2;s{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>c,frontMatter:()=>i,metadata:()=>p,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const i={id:"fixture-app",title:"Running the fixture app"},o=void 0,p={unversionedId:"guides/fixture-app",id:"guides/fixture-app",title:"Running the fixture app",description:"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:",source:"@site/docs/guides/fixture-app.md",sourceDirName:"guides",slug:"/guides/fixture-app",permalink:"/restyle/guides/fixture-app",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/fixture-app.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"fixture-app",title:"Running the fixture app"},sidebar:"docs",previous:{title:"Implementing dark mode",permalink:"/restyle/guides/dark-mode"},next:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},s=[{value:"Making changes to Restyle",id:"making-changes-to-restyle",level:3}],u={toc:s};function c(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"First, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn up")," to install all the Restyle and fixture app dependencies.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Next, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn start")," to start Metro.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Lastly, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-ios")," to start the app on iOS, and ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-android")," to start the app on Android."))),(0,a.kt)("p",null,"Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's ",(0,a.kt)("a",{parentName:"p",href:"https://reactnative.dev/docs/environment-setup"},"Setting up the development environment"),"."),(0,a.kt)("h3",{id:"making-changes-to-restyle"},"Making changes to Restyle"),(0,a.kt)("p",null,"When making changes to Restyle (the code in ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/Shopify/restyle/tree/master/src"},"/src"),"), you'll need to run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn build")," to use the latest Restyle build in the fixture app."))}c.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[444],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(r),y=a,f=c["".concat(l,".").concat(y)]||c[y]||d[y]||i;return r?n.createElement(f,o(o({ref:t},u),{},{components:r})):n.createElement(f,o({ref:t},u))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:a,o[1]=p;for(var s=2;s{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>c,frontMatter:()=>i,metadata:()=>p,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const i={id:"fixture-app",title:"Running the fixture app"},o=void 0,p={unversionedId:"guides/fixture-app",id:"guides/fixture-app",title:"Running the fixture app",description:"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:",source:"@site/docs/guides/fixture-app.md",sourceDirName:"guides",slug:"/guides/fixture-app",permalink:"/restyle/guides/fixture-app",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/fixture-app.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"fixture-app",title:"Running the fixture app"},sidebar:"docs",previous:{title:"Implementing dark mode",permalink:"/restyle/guides/dark-mode"},next:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},s=[{value:"Making changes to Restyle",id:"making-changes-to-restyle",level:3}],u={toc:s};function c(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"First, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn up")," to install all the Restyle and fixture app dependencies.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Next, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn start")," to start Metro.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Lastly, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-ios")," to start the app on iOS, and ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-android")," to start the app on Android."))),(0,a.kt)("p",null,"Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's ",(0,a.kt)("a",{parentName:"p",href:"https://reactnative.dev/docs/environment-setup"},"Setting up the development environment"),"."),(0,a.kt)("h3",{id:"making-changes-to-restyle"},"Making changes to Restyle"),(0,a.kt)("p",null,"When making changes to Restyle (the code in ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/Shopify/restyle/tree/master/src"},"/src"),"), you'll need to run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn build")," to use the latest Restyle build in the fixture app."))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d5140e4c.5d3d9a38.js b/assets/js/d5140e4c.b5232790.js similarity index 67% rename from assets/js/d5140e4c.5d3d9a38.js rename to assets/js/d5140e4c.b5232790.js index da9d2c9..6061dd6 100644 --- a/assets/js/d5140e4c.5d3d9a38.js +++ b/assets/js/d5140e4c.b5232790.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[899],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),f=a,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||i;return n?r.createElement(m,o(o({ref:t},c),{},{components:n})):r.createElement(m,o({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,o[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const i={id:"breakpoints",title:"Breakpoints"},o=void 0,s={unversionedId:"fundamentals/breakpoints",id:"fundamentals/breakpoints",title:"Breakpoints",description:"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:",source:"@site/docs/fundamentals/breakpoints.md",sourceDirName:"fundamentals",slug:"/fundamentals/breakpoints",permalink:"/restyle/fundamentals/breakpoints",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/breakpoints.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"breakpoints",title:"Breakpoints"},sidebar:"docs",previous:{title:"Variants",permalink:"/restyle/fundamentals/variants"},next:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"}},l={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n breakpoints: {\n phone: 0,\n longPhone: {\n width: 0,\n height: 812,\n },\n tablet: 768,\n largeTablet: 1024,\n },\n});\n")),(0,a.kt)("p",null,"See the ",(0,a.kt)("a",{parentName:"p",href:"/fundamentals/responsive-values"},"Responsive Values")," section to see how these can be used. Defining ",(0,a.kt)("inlineCode",{parentName:"p"},"breakpoints")," is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur."))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[899],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),f=a,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||i;return n?r.createElement(m,o(o({ref:t},c),{},{components:n})):r.createElement(m,o({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,o[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const i={id:"breakpoints",title:"Breakpoints"},o=void 0,s={unversionedId:"fundamentals/breakpoints",id:"fundamentals/breakpoints",title:"Breakpoints",description:"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:",source:"@site/docs/fundamentals/breakpoints.md",sourceDirName:"fundamentals",slug:"/fundamentals/breakpoints",permalink:"/restyle/fundamentals/breakpoints",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/breakpoints.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"breakpoints",title:"Breakpoints"},sidebar:"docs",previous:{title:"Variants",permalink:"/restyle/fundamentals/variants"},next:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"}},l={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n breakpoints: {\n phone: 0,\n longPhone: {\n width: 0,\n height: 812,\n },\n tablet: 768,\n largeTablet: 1024,\n },\n});\n")),(0,a.kt)("p",null,"See the ",(0,a.kt)("a",{parentName:"p",href:"/fundamentals/responsive-values"},"Responsive Values")," section to see how these can be used. Defining ",(0,a.kt)("inlineCode",{parentName:"p"},"breakpoints")," is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/fa28435c.91e4a955.js b/assets/js/fa28435c.91e4a955.js deleted file mode 100644 index 011d738..0000000 --- a/assets/js/fa28435c.91e4a955.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[263],{3905:(t,e,n)=>{n.d(e,{Zo:()=>s,kt:()=>y});var r=n(7294);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function o(t){for(var e=1;e=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var p=r.createContext({}),d=function(t){var e=r.useContext(p),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},s=function(t){var e=d(t.components);return r.createElement(p.Provider,{value:e},t.children)},m="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},c=r.forwardRef((function(t,e){var n=t.components,a=t.mdxType,l=t.originalType,p=t.parentName,s=i(t,["components","mdxType","originalType","parentName"]),m=d(n),c=a,y=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?r.createElement(y,o(o({ref:e},s),{},{components:n})):r.createElement(y,o({ref:e},s))}));function y(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=n.length,o=new Array(l);o[0]=c;var i={};for(var p in e)hasOwnProperty.call(e,p)&&(i[p]=e[p]);i.originalType=t,i[m]="string"==typeof t?t:a,o[1]=i;for(var d=2;d{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>i,toc:()=>d});var r=n(7462),a=(n(7294),n(3905));const l={id:"restyle-functions",title:"Restyle functions"},o=void 0,i={unversionedId:"fundamentals/restyle-functions",id:"fundamentals/restyle-functions",title:"Restyle functions",description:"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.",source:"@site/docs/fundamentals/restyle-functions.md",sourceDirName:"fundamentals",slug:"/fundamentals/restyle-functions",permalink:"/restyle/fundamentals/restyle-functions",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/restyle-functions.md",tags:[],version:"current",lastUpdatedBy:"Talha Naqvi",lastUpdatedAt:1712870130,formattedLastUpdatedAt:"Apr 11, 2024",frontMatter:{id:"restyle-functions",title:"Restyle functions"},sidebar:"docs",previous:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"},next:{title:"Components",permalink:"/restyle/fundamentals/components"}},p={},d=[{value:"Predefined Restyle functions",id:"predefined-restyle-functions",level:2},{value:"Custom Restyle functions",id:"custom-restyle-functions",level:2}],s={toc:d};function m(t){let{components:e,...n}=t;return(0,a.kt)("wrapper",(0,r.Z)({},s,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme."),(0,a.kt)("h2",{id:"predefined-restyle-functions"},"Predefined Restyle functions"),(0,a.kt)("p",null,"The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name."),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Restyle Function"),(0,a.kt)("th",{parentName:"tr",align:null},"Props"),(0,a.kt)("th",{parentName:"tr",align:null},"Theme Key"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor"),(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor ","[bg]"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"visible"),(0,a.kt)("td",{parentName:"tr",align:null},"display (maps ",(0,a.kt)("inlineCode",{parentName:"td"},"true")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"false")," to ",(0,a.kt)("inlineCode",{parentName:"td"},"flex")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"none"),")"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"spacing"),(0,a.kt)("td",{parentName:"tr",align:null},"margin ","[m]",", marginTop ","[mt]",", marginRight ","[mr]",", marginBottom ","[mb]",", marginLeft ","[ml]",", marginStart ","[ms]",", marginEnd","[me]",", marginHorizontal ","[mx]",", marginVertical ","[my]",", padding ","[p]",", paddingTop ","[pt]",", paddingRight ","[pr]",", paddingBottom ","[pb]",", paddingLeft ","[pl]",", paddingStart ","[ps]",", paddingEnd ","[pe]",", paddingHorizontal ","[px]",", paddingVertical ","[py]",", gap ","[g]",", rowGap ","[rG]",", columnGap ","[cG]"),(0,a.kt)("td",{parentName:"tr",align:null},"spacing")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"layout"),(0,a.kt)("td",{parentName:"tr",align:null},"width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"position, top, right, bottom, left, start, end"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndex"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndices")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadii")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowOpacity, shadowOffset, shadowRadius, elevation"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowOffset, textShadowRadius"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"typography"),(0,a.kt)("td",{parentName:"tr",align:null},"fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))))),(0,a.kt)("h2",{id:"custom-restyle-functions"},"Custom Restyle functions"),(0,a.kt)("p",null,"To define your own Restyle function, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"createRestyleFunction")," helper:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle'\nconst transparency = createRestyleFunction({\n property: 'transparency',\n styleProperty: 'opacity',\n transform: ({value}: {value: number}) => 1 - value,\n});\n\nconst TransparentComponent = createRestyleComponent([transparency])\n\n\n")),(0,a.kt)("p",null,"Arguments:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that the function will receive the value of."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"styleProperty"),": The name of the property in the style object to map to. Defaults to the value of ",(0,a.kt)("inlineCode",{parentName:"li"},"property"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"transform({value, theme, themeKey})"),": An optional function that transforms the value of the prop to the value that will be inserted into the style object."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"themeKey"),": An optional key in the theme to map values from, e.g. ",(0,a.kt)("inlineCode",{parentName:"li"},"colors"),".")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/fa28435c.9ce62d0e.js b/assets/js/fa28435c.9ce62d0e.js new file mode 100644 index 0000000..a6a144f --- /dev/null +++ b/assets/js/fa28435c.9ce62d0e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[263],{3905:(t,e,n)=>{n.d(e,{Zo:()=>s,kt:()=>y});var r=n(7294);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function o(t){for(var e=1;e=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var p=r.createContext({}),d=function(t){var e=r.useContext(p),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},s=function(t){var e=d(t.components);return r.createElement(p.Provider,{value:e},t.children)},m="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},c=r.forwardRef((function(t,e){var n=t.components,a=t.mdxType,l=t.originalType,p=t.parentName,s=i(t,["components","mdxType","originalType","parentName"]),m=d(n),c=a,y=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?r.createElement(y,o(o({ref:e},s),{},{components:n})):r.createElement(y,o({ref:e},s))}));function y(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=n.length,o=new Array(l);o[0]=c;var i={};for(var p in e)hasOwnProperty.call(e,p)&&(i[p]=e[p]);i.originalType=t,i[m]="string"==typeof t?t:a,o[1]=i;for(var d=2;d{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>i,toc:()=>d});var r=n(7462),a=(n(7294),n(3905));const l={id:"restyle-functions",title:"Restyle functions"},o=void 0,i={unversionedId:"fundamentals/restyle-functions",id:"fundamentals/restyle-functions",title:"Restyle functions",description:"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.",source:"@site/docs/fundamentals/restyle-functions.md",sourceDirName:"fundamentals",slug:"/fundamentals/restyle-functions",permalink:"/restyle/fundamentals/restyle-functions",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/restyle-functions.md",tags:[],version:"current",lastUpdatedBy:"naqvitalha",lastUpdatedAt:1713457427,formattedLastUpdatedAt:"Apr 18, 2024",frontMatter:{id:"restyle-functions",title:"Restyle functions"},sidebar:"docs",previous:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"},next:{title:"Components",permalink:"/restyle/fundamentals/components"}},p={},d=[{value:"Predefined Restyle functions",id:"predefined-restyle-functions",level:2},{value:"Custom Restyle functions",id:"custom-restyle-functions",level:2}],s={toc:d};function m(t){let{components:e,...n}=t;return(0,a.kt)("wrapper",(0,r.Z)({},s,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme."),(0,a.kt)("h2",{id:"predefined-restyle-functions"},"Predefined Restyle functions"),(0,a.kt)("p",null,"The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name."),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Restyle Function"),(0,a.kt)("th",{parentName:"tr",align:null},"Props"),(0,a.kt)("th",{parentName:"tr",align:null},"Theme Key"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor"),(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor ","[bg]"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"visible"),(0,a.kt)("td",{parentName:"tr",align:null},"display (maps ",(0,a.kt)("inlineCode",{parentName:"td"},"true")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"false")," to ",(0,a.kt)("inlineCode",{parentName:"td"},"flex")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"none"),")"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"spacing"),(0,a.kt)("td",{parentName:"tr",align:null},"margin ","[m]",", marginTop ","[mt]",", marginRight ","[mr]",", marginBottom ","[mb]",", marginLeft ","[ml]",", marginStart ","[ms]",", marginEnd","[me]",", marginHorizontal ","[mx]",", marginVertical ","[my]",", padding ","[p]",", paddingTop ","[pt]",", paddingRight ","[pr]",", paddingBottom ","[pb]",", paddingLeft ","[pl]",", paddingStart ","[ps]",", paddingEnd ","[pe]",", paddingHorizontal ","[px]",", paddingVertical ","[py]",", gap ","[g]",", rowGap ","[rG]",", columnGap ","[cG]"),(0,a.kt)("td",{parentName:"tr",align:null},"spacing")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"layout"),(0,a.kt)("td",{parentName:"tr",align:null},"width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"position, top, right, bottom, left, start, end"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndex"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndices")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadii")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowOpacity, shadowOffset, shadowRadius, elevation"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowOffset, textShadowRadius"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"typography"),(0,a.kt)("td",{parentName:"tr",align:null},"fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))))),(0,a.kt)("h2",{id:"custom-restyle-functions"},"Custom Restyle functions"),(0,a.kt)("p",null,"To define your own Restyle function, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"createRestyleFunction")," helper:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle'\nconst transparency = createRestyleFunction({\n property: 'transparency',\n styleProperty: 'opacity',\n transform: ({value}: {value: number}) => 1 - value,\n});\n\nconst TransparentComponent = createRestyleComponent([transparency])\n\n\n")),(0,a.kt)("p",null,"Arguments:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that the function will receive the value of."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"styleProperty"),": The name of the property in the style object to map to. Defaults to the value of ",(0,a.kt)("inlineCode",{parentName:"li"},"property"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"transform({value, theme, themeKey})"),": An optional function that transforms the value of the prop to the value that will be inserted into the style object."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"themeKey"),": An optional key in the theme to map values from, e.g. ",(0,a.kt)("inlineCode",{parentName:"li"},"colors"),".")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.182d0703.js b/assets/js/runtime~main.182d0703.js deleted file mode 100644 index e4a7cbd..0000000 --- a/assets/js/runtime~main.182d0703.js +++ /dev/null @@ -1 +0,0 @@ -(()=>{"use strict";var e,t,r,a,o,c={},f={};function n(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={exports:{}};return c[e].call(r.exports,r,r.exports,n),r.exports}n.m=c,e=[],n.O=(t,r,a,o)=>{if(!r){var c=1/0;for(l=0;l=o)&&Object.keys(n.O).every((e=>n.O[e](r[d])))?r.splice(d--,1):(f=!1,o0&&e[l-1][2]>o;l--)e[l]=e[l-1];e[l]=[r,a,o]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var o=Object.create(null);n.r(o);var c={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>c[t]=()=>e[t]));return c.default=()=>e,n.d(o,c),o},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>"assets/js/"+({53:"935f2afb",106:"926ca428",118:"5a58cff1",173:"4edc808e",218:"9cd7d415",263:"fa28435c",287:"357d96e7",352:"83398278",387:"6ab114b0",433:"9f55f1ad",444:"ce6c328c",462:"3002f4e5",493:"63d0de19",514:"1be78505",581:"a029320f",641:"33d50a8e",661:"9825658c",730:"815f03a2",795:"92dde4bf",817:"14eb3368",830:"89b3da96",881:"ab0123d0",892:"5c9eef2d",899:"d5140e4c",918:"17896441",920:"1a4e3797"}[e]||e)+"."+{53:"1f704c3d",106:"ad51852a",118:"ec3072f7",173:"59fc1453",218:"07ee04b2",263:"91e4a955",287:"dd0845c7",352:"5f87606d",387:"20889665",433:"62bdf1c9",443:"fa913646",444:"6e97b991",462:"e6e8b065",493:"e4b71337",514:"80022471",525:"52d2ade0",581:"27e1bf7d",641:"f6271069",661:"7974d7dd",730:"dc230ab6",795:"87b4fb7c",817:"a153f2a0",830:"45a310b8",881:"d43e2625",892:"07edee36",899:"5d3d9a38",918:"1e71642c",920:"d1d56fde",972:"852ca7af"}[e]+".js",n.miniCssF=e=>{},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},o="restyle:",n.l=(e,t,r,c)=>{if(a[e])a[e].push(t);else{var f,d;if(void 0!==r)for(var i=document.getElementsByTagName("script"),l=0;l{f.onerror=f.onload=null,clearTimeout(s);var o=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(r))),t)return t(r)},s=setTimeout(b.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=b.bind(null,f.onerror),f.onload=b.bind(null,f.onload),d&&document.head.appendChild(f)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/restyle/",n.gca=function(e){return e={17896441:"918",83398278:"352","935f2afb":"53","926ca428":"106","5a58cff1":"118","4edc808e":"173","9cd7d415":"218",fa28435c:"263","357d96e7":"287","6ab114b0":"387","9f55f1ad":"433",ce6c328c:"444","3002f4e5":"462","63d0de19":"493","1be78505":"514",a029320f:"581","33d50a8e":"641","9825658c":"661","815f03a2":"730","92dde4bf":"795","14eb3368":"817","89b3da96":"830",ab0123d0:"881","5c9eef2d":"892",d5140e4c:"899","1a4e3797":"920"}[e]||e,n.p+n.u(e)},(()=>{var e={303:0,532:0};n.f.j=(t,r)=>{var a=n.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var c=n.p+n.u(t),f=new Error;n.l(c,(r=>{if(n.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+o+": "+c+")",f.name="ChunkLoadError",f.type=o,f.request=c,a[1](f)}}),"chunk-"+t,t)}},n.O.j=t=>0===e[t];var t=(t,r)=>{var a,o,c=r[0],f=r[1],d=r[2],i=0;if(c.some((t=>0!==e[t]))){for(a in f)n.o(f,a)&&(n.m[a]=f[a]);if(d)var l=d(n)}for(t&&t(r);i{"use strict";var e,t,r,a,f,o={},n={};function d(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e].call(r.exports,r,r.exports,d),r.exports}d.m=o,e=[],d.O=(t,r,a,f)=>{if(!r){var o=1/0;for(l=0;l=f)&&Object.keys(d.O).every((e=>d.O[e](r[c])))?r.splice(c--,1):(n=!1,f0&&e[l-1][2]>f;l--)e[l]=e[l-1];e[l]=[r,a,f]},d.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return d.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);d.r(f);var o={};t=t||[null,r({}),r([]),r(r)];for(var n=2&a&&e;"object"==typeof n&&!~t.indexOf(n);n=r(n))Object.getOwnPropertyNames(n).forEach((t=>o[t]=()=>e[t]));return o.default=()=>e,d.d(f,o),f},d.d=(e,t)=>{for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((t,r)=>(d.f[r](e,t),t)),[])),d.u=e=>"assets/js/"+({53:"935f2afb",106:"926ca428",118:"5a58cff1",173:"4edc808e",218:"9cd7d415",263:"fa28435c",287:"357d96e7",352:"83398278",387:"6ab114b0",433:"9f55f1ad",444:"ce6c328c",462:"3002f4e5",493:"63d0de19",514:"1be78505",581:"a029320f",641:"33d50a8e",661:"9825658c",730:"815f03a2",795:"92dde4bf",817:"14eb3368",830:"89b3da96",881:"ab0123d0",892:"5c9eef2d",899:"d5140e4c",918:"17896441",920:"1a4e3797"}[e]||e)+"."+{53:"1f704c3d",106:"ad51852a",118:"33db6e20",173:"318b701a",218:"3af42409",263:"9ce62d0e",287:"dd0845c7",352:"93668d77",387:"9a3cbad5",433:"d06dd7d0",443:"fa913646",444:"51d22541",462:"1278841a",493:"ce0b707e",514:"80022471",525:"52d2ade0",581:"27e1bf7d",641:"1117b758",661:"10fafb80",730:"dc230ab6",795:"bc49227e",817:"a153f2a0",830:"45a310b8",881:"520b540e",892:"dcf64117",899:"b5232790",918:"1e71642c",920:"d1d56fde",972:"852ca7af"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="restyle:",d.l=(e,t,r,o)=>{if(a[e])a[e].push(t);else{var n,c;if(void 0!==r)for(var i=document.getElementsByTagName("script"),l=0;l{n.onerror=n.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],n.parentNode&&n.parentNode.removeChild(n),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(b.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=b.bind(null,n.onerror),n.onload=b.bind(null,n.onload),c&&document.head.appendChild(n)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/restyle/",d.gca=function(e){return e={17896441:"918",83398278:"352","935f2afb":"53","926ca428":"106","5a58cff1":"118","4edc808e":"173","9cd7d415":"218",fa28435c:"263","357d96e7":"287","6ab114b0":"387","9f55f1ad":"433",ce6c328c:"444","3002f4e5":"462","63d0de19":"493","1be78505":"514",a029320f:"581","33d50a8e":"641","9825658c":"661","815f03a2":"730","92dde4bf":"795","14eb3368":"817","89b3da96":"830",ab0123d0:"881","5c9eef2d":"892",d5140e4c:"899","1a4e3797":"920"}[e]||e,d.p+d.u(e)},(()=>{var e={303:0,532:0};d.f.j=(t,r)=>{var a=d.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var o=d.p+d.u(t),n=new Error;d.l(o,(r=>{if(d.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;n.message="Loading chunk "+t+" failed.\n("+f+": "+o+")",n.name="ChunkLoadError",n.type=f,n.request=o,a[1](n)}}),"chunk-"+t,t)}},d.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,o=r[0],n=r[1],c=r[2],i=0;if(o.some((t=>0!==e[t]))){for(a in n)d.o(n,a)&&(d.m[a]=n[a]);if(c)var l=c(d)}for(t&&t(r);i Accessing the theme | Restyle - +
-

Accessing the theme

If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook:

const Component = () => {
  const theme = useTheme<Theme>();
  const {cardPrimaryBackground} = theme.colors;
  // ...
};

By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a dark mode switch in your app.

- +

Accessing the theme

If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook:

const Component = () => {
  const theme = useTheme<Theme>();
  const {cardPrimaryBackground} = theme.colors;
  // ...
};

By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a dark mode switch in your app.

+ \ No newline at end of file diff --git a/fundamentals/breakpoints/index.html b/fundamentals/breakpoints/index.html index 673a86f..30c5971 100644 --- a/fundamentals/breakpoints/index.html +++ b/fundamentals/breakpoints/index.html @@ -4,13 +4,13 @@ Breakpoints | Restyle - +
-

Breakpoints

Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:

const theme = createTheme({
  breakpoints: {
    phone: 0,
    longPhone: {
      width: 0,
      height: 812,
    },
    tablet: 768,
    largeTablet: 1024,
  },
});

See the Responsive Values section to see how these can be used. Defining breakpoints is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur.

- +

Breakpoints

Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:

const theme = createTheme({
  breakpoints: {
    phone: 0,
    longPhone: {
      width: 0,
      height: 812,
    },
    tablet: 768,
    largeTablet: 1024,
  },
});

See the Responsive Values section to see how these can be used. Defining breakpoints is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur.

+ \ No newline at end of file diff --git a/fundamentals/colors/index.html b/fundamentals/colors/index.html index a3b88e7..34a817c 100644 --- a/fundamentals/colors/index.html +++ b/fundamentals/colors/index.html @@ -4,13 +4,13 @@ Colors | Restyle - +
-

Colors

When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette.

This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example:

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    mainForeground: palette.black,
    cardPrimaryBackground: palette.purplePrimary,
    buttonPrimaryBackground: palette.purplePrimary,
  },
});

Taking the time to define these semantic meanings comes with a number of benefits:

  • It's easy to understand where and in what context colors are applied throughout the app
  • If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to purplePrimary throughout the app.
  • Even though cardPrimaryBackground and buttonPrimaryBackground point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change.
  • A theme can easily be swapped at runtime.
- +

Colors

When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette.

This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example:

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    mainForeground: palette.black,
    cardPrimaryBackground: palette.purplePrimary,
    buttonPrimaryBackground: palette.purplePrimary,
  },
});

Taking the time to define these semantic meanings comes with a number of benefits:

  • It's easy to understand where and in what context colors are applied throughout the app
  • If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to purplePrimary throughout the app.
  • Even though cardPrimaryBackground and buttonPrimaryBackground point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change.
  • A theme can easily be swapped at runtime.
+ \ No newline at end of file diff --git a/fundamentals/components/custom-components/index.html b/fundamentals/components/custom-components/index.html index 1576440..d49786e 100644 --- a/fundamentals/components/custom-components/index.html +++ b/fundamentals/components/custom-components/index.html @@ -4,15 +4,15 @@ Custom components | Restyle - +

Custom components

If you want to create your own component similar to Box or Text, but decide yourself which predefined Restyle functions to use, use the -createRestyleComponent helper:

import {
  createRestyleComponent,
  createVariant,
  spacing,
  SpacingProps,
  VariantProps,
} from '@shopify/restyle';
import {Theme} from './theme';

type Props = SpacingProps<Theme> & VariantProps<Theme, 'cardVariants'>;
const Card = createRestyleComponent<Props, Theme>([
  spacing,
  createVariant({themeKey: 'cardVariants'}),
]);

export default Card;

For more advanced components, you may want to instead use the useRestyle hook:

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
  composeRestyleFunctions,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

type RestyleProps = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme>;

const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
  spacing,
  border,
  backgroundColor,
]);

type Props = RestyleProps & {
  onPress: () => void;
  label: string;
};

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};
- +createRestyleComponent helper:

import {
  createRestyleComponent,
  createVariant,
  spacing,
  SpacingProps,
  VariantProps,
} from '@shopify/restyle';
import {Theme} from './theme';

type Props = SpacingProps<Theme> & VariantProps<Theme, 'cardVariants'>;
const Card = createRestyleComponent<Props, Theme>([
  spacing,
  createVariant({themeKey: 'cardVariants'}),
]);

export default Card;

For more advanced components, you may want to instead use the useRestyle hook:

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
  composeRestyleFunctions,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

type RestyleProps = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme>;

const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
  spacing,
  border,
  backgroundColor,
]);

type Props = RestyleProps & {
  onPress: () => void;
  label: string;
};

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};
+ \ No newline at end of file diff --git a/fundamentals/components/index.html b/fundamentals/components/index.html index 7dbc598..7c084b7 100644 --- a/fundamentals/components/index.html +++ b/fundamentals/components/index.html @@ -4,13 +4,13 @@ Components | Restyle - +
- + \ No newline at end of file diff --git a/fundamentals/components/predefined-components/index.html b/fundamentals/components/predefined-components/index.html index 4aa85b5..7b68ee0 100644 --- a/fundamentals/components/predefined-components/index.html +++ b/fundamentals/components/predefined-components/index.html @@ -4,13 +4,13 @@ Predefined components | Restyle - +
-

Predefined components

This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme.

Box​

// In Box.tsx
import {createBox} from '@shopify/restyle';
import {Theme} from './theme';

const Box = createBox<Theme>();

export default Box;

The Box component comes with the following Restyle functions: backgroundColor, opacity, visible, layout, spacing, border, shadow, position.

Text​

// In Text.tsx
import {createText} from '@shopify/restyle';
import {Theme} from './theme';

const Text = createText<Theme>();

export default Text;

The Text component comes with the following Restyle functions: color, textDecorationColor, opacity, visible, typography, textShadow, spacing, layout. It also includes a variant that picks up styles under the textVariants key in your theme:

// In your theme
const theme = createTheme({
  ...,
  textVariants: {
    header: {
      fontFamily: 'ShopifySans-Bold',
      fontWeight: 'bold',
      fontSize: 34,
      lineHeight: 42.5,
      color: 'black',
    },
    subheader: {
      fontFamily: 'ShopifySans-SemiBold',
      fontWeight: '600',
      fontSize: 28,
      lineHeight: 36,
      color: 'black',
    },
    body: {
      fontFamily: 'ShopifySans',
      fontSize: 16,
      lineHeight: 24,
      color: 'black',
    },
  },
});

// In a component
<Text variant="header">Header</Text>
- +

Predefined components

This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme.

Box​

// In Box.tsx
import {createBox} from '@shopify/restyle';
import {Theme} from './theme';

const Box = createBox<Theme>();

export default Box;

The Box component comes with the following Restyle functions: backgroundColor, opacity, visible, layout, spacing, border, shadow, position.

Text​

// In Text.tsx
import {createText} from '@shopify/restyle';
import {Theme} from './theme';

const Text = createText<Theme>();

export default Text;

The Text component comes with the following Restyle functions: color, textDecorationColor, opacity, visible, typography, textShadow, spacing, layout. It also includes a variant that picks up styles under the textVariants key in your theme:

// In your theme
const theme = createTheme({
  ...,
  textVariants: {
    header: {
      fontFamily: 'ShopifySans-Bold',
      fontWeight: 'bold',
      fontSize: 34,
      lineHeight: 42.5,
      color: 'black',
    },
    subheader: {
      fontFamily: 'ShopifySans-SemiBold',
      fontWeight: '600',
      fontSize: 28,
      lineHeight: 36,
      color: 'black',
    },
    body: {
      fontFamily: 'ShopifySans',
      fontSize: 16,
      lineHeight: 24,
      color: 'black',
    },
  },
});

// In a component
<Text variant="header">Header</Text>
+ \ No newline at end of file diff --git a/fundamentals/defining-your-theme/index.html b/fundamentals/defining-your-theme/index.html index a823ac2..7c91578 100644 --- a/fundamentals/defining-your-theme/index.html +++ b/fundamentals/defining-your-theme/index.html @@ -4,13 +4,13 @@ Defining your theme | Restyle - +
-

Defining your theme

Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor="cardPrimary" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor.

Below is an example of how a basic theme could look. Make sure to read the other sections in Fundamentals for more details on how to set up your different theme values.

import {createTheme} from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

Note: createTheme doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the { [key:string]: any } in BaseTheme

This theme should be passed to a ThemeProvider at the top of your React tree:

import {ThemeProvider} from '@shopify/restyle';
import theme from './theme';

const App = () => (
  <ThemeProvider theme={theme}>{/* Rest of the app */}</ThemeProvider>
);
- +

Defining your theme

Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor="cardPrimary" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor.

Below is an example of how a basic theme could look. Make sure to read the other sections in Fundamentals for more details on how to set up your different theme values.

import {createTheme} from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

Note: createTheme doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the { [key:string]: any } in BaseTheme

This theme should be passed to a ThemeProvider at the top of your React tree:

import {ThemeProvider} from '@shopify/restyle';
import theme from './theme';

const App = () => (
  <ThemeProvider theme={theme}>{/* Rest of the app */}</ThemeProvider>
);
+ \ No newline at end of file diff --git a/fundamentals/index.html b/fundamentals/index.html index 46cd839..eea21db 100644 --- a/fundamentals/index.html +++ b/fundamentals/index.html @@ -4,13 +4,13 @@ Fundamentals | Restyle - +

Fundamentals

- + \ No newline at end of file diff --git a/fundamentals/overriding-styles/index.html b/fundamentals/overriding-styles/index.html index 9de9149..9c3792e 100644 --- a/fundamentals/overriding-styles/index.html +++ b/fundamentals/overriding-styles/index.html @@ -4,13 +4,13 @@ Overriding styles | Restyle - +
-

Overriding styles

Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary.

<Box
  margin="s"
  padding="m"
  style={{
    backgroundColor: '#F00BAA',
  }}
/>
- +

Overriding styles

Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary.

<Box
  margin="s"
  padding="m"
  style={{
    backgroundColor: '#F00BAA',
  }}
/>
+ \ No newline at end of file diff --git a/fundamentals/responsive-values/index.html b/fundamentals/responsive-values/index.html index 4d0b3f6..74357f1 100644 --- a/fundamentals/responsive-values/index.html +++ b/fundamentals/responsive-values/index.html @@ -4,13 +4,13 @@ Responsive values | Restyle - +
-

Responsive values

Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme:

// In your theme
const theme = createTheme({
  // ...
  breakpoints: {
    phone: 0,
    tablet: 768,
  }
})

// Props always accept either plain values
<Box flexDirection="row" />

// Or breakpoint-specific values
<Box flexDirection={{phone: 'column', tablet: 'row'}} />

If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the useResponsiveProp hook:

import {
  ColorProps,
  createBox,
  useResponsiveProp,
  useTheme,
} from '@shopify/restyle';
import React from 'react';
import {
  ActivityIndicator,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';

import Text from './Text';
import {Theme} from './theme';

const BaseButton = createBox<Theme, TouchableOpacityProps>(TouchableOpacity);

type Props = React.ComponentProps<typeof BaseButton> &
  ColorProps<Theme> & {
    label: string;
    isLoading?: boolean;
  };

const Button = ({
  label,
  isLoading,
  color = {phone: 'purple', tablet: 'blue'},
  ...props
}: Props) => {
  const theme = useTheme<Theme>();

  // Will be 'purple' on phone and 'blue' on tablet
  const textColorProp = useResponsiveProp(color);

  // Can safely perform logic with the extracted value
  const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';

  return (
    <BaseButton
      flexDirection="row"
      columnGap="s"
      backgroundColor={bgColor}
      {...props}
    >
      <Text variant="buttonLabel" color={color}>
        {label}
      </Text>
      {isLoading ? (
        <ActivityIndicator color={theme.colors[textColorProp]} />
      ) : null}
    </BaseButton>
  );
};
- +

Responsive values

Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme:

// In your theme
const theme = createTheme({
  // ...
  breakpoints: {
    phone: 0,
    tablet: 768,
  }
})

// Props always accept either plain values
<Box flexDirection="row" />

// Or breakpoint-specific values
<Box flexDirection={{phone: 'column', tablet: 'row'}} />

If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the useResponsiveProp hook:

import {
  ColorProps,
  createBox,
  useResponsiveProp,
  useTheme,
} from '@shopify/restyle';
import React from 'react';
import {
  ActivityIndicator,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';

import Text from './Text';
import {Theme} from './theme';

const BaseButton = createBox<Theme, TouchableOpacityProps>(TouchableOpacity);

type Props = React.ComponentProps<typeof BaseButton> &
  ColorProps<Theme> & {
    label: string;
    isLoading?: boolean;
  };

const Button = ({
  label,
  isLoading,
  color = {phone: 'purple', tablet: 'blue'},
  ...props
}: Props) => {
  const theme = useTheme<Theme>();

  // Will be 'purple' on phone and 'blue' on tablet
  const textColorProp = useResponsiveProp(color);

  // Can safely perform logic with the extracted value
  const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';

  return (
    <BaseButton
      flexDirection="row"
      columnGap="s"
      backgroundColor={bgColor}
      {...props}
    >
      <Text variant="buttonLabel" color={color}>
        {label}
      </Text>
      {isLoading ? (
        <ActivityIndicator color={theme.colors[textColorProp]} />
      ) : null}
    </BaseButton>
  );
};
+ \ No newline at end of file diff --git a/fundamentals/restyle-functions/index.html b/fundamentals/restyle-functions/index.html index 8e2f5d7..223ca69 100644 --- a/fundamentals/restyle-functions/index.html +++ b/fundamentals/restyle-functions/index.html @@ -4,13 +4,13 @@ Restyle functions | Restyle - +
-

Restyle functions

Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.

Predefined Restyle functions​

The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name.

Restyle FunctionPropsTheme Key
backgroundColorbackgroundColor [bg]colors
colorcolorcolors
opacityopacitynone
visibledisplay (maps true / false to flex / none)none
spacingmargin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG]spacing
layoutwidth, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrapnone
positionposition, top, right, bottom, left, start, endnone
positionzIndexzIndices
borderborderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidthnone
borderborderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColorcolors
borderborderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadiusborderRadii
shadowshadowOpacity, shadowOffset, shadowRadius, elevationnone
shadowshadowColorcolors
textShadowtextShadowOffset, textShadowRadiusnone
textShadowtextShadowColorcolors
typographyfontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirectionnone

Custom Restyle functions​

To define your own Restyle function, use the createRestyleFunction helper:

import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle'
const transparency = createRestyleFunction({
  property: 'transparency',
  styleProperty: 'opacity',
  transform: ({value}: {value: number}) => 1 - value,
});

const TransparentComponent = createRestyleComponent([transparency])

<TransparentComponent transparency={0.5} />

Arguments:

  • property: The name of the component prop that the function will receive the value of.
  • styleProperty: The name of the property in the style object to map to. Defaults to the value of property.
  • transform({value, theme, themeKey}): An optional function that transforms the value of the prop to the value that will be inserted into the style object.
  • themeKey: An optional key in the theme to map values from, e.g. colors.
- +

Restyle functions

Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.

Predefined Restyle functions​

The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name.

Restyle FunctionPropsTheme Key
backgroundColorbackgroundColor [bg]colors
colorcolorcolors
opacityopacitynone
visibledisplay (maps true / false to flex / none)none
spacingmargin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG]spacing
layoutwidth, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrapnone
positionposition, top, right, bottom, left, start, endnone
positionzIndexzIndices
borderborderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidthnone
borderborderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColorcolors
borderborderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadiusborderRadii
shadowshadowOpacity, shadowOffset, shadowRadius, elevationnone
shadowshadowColorcolors
textShadowtextShadowOffset, textShadowRadiusnone
textShadowtextShadowColorcolors
typographyfontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirectionnone

Custom Restyle functions​

To define your own Restyle function, use the createRestyleFunction helper:

import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle'
const transparency = createRestyleFunction({
  property: 'transparency',
  styleProperty: 'opacity',
  transform: ({value}: {value: number}) => 1 - value,
});

const TransparentComponent = createRestyleComponent([transparency])

<TransparentComponent transparency={0.5} />

Arguments:

  • property: The name of the component prop that the function will receive the value of.
  • styleProperty: The name of the property in the style object to map to. Defaults to the value of property.
  • transform({value, theme, themeKey}): An optional function that transforms the value of the prop to the value that will be inserted into the style object.
  • themeKey: An optional key in the theme to map values from, e.g. colors.
+ \ No newline at end of file diff --git a/fundamentals/spacing/index.html b/fundamentals/spacing/index.html index e3d5baa..8651a31 100644 --- a/fundamentals/spacing/index.html +++ b/fundamentals/spacing/index.html @@ -4,13 +4,13 @@ Spacing | Restyle - +
-

Spacing

Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes):

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
});
- +

Spacing

Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes):

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
});
+ \ No newline at end of file diff --git a/fundamentals/variants/index.html b/fundamentals/variants/index.html index 788639a..a591619 100644 --- a/fundamentals/variants/index.html +++ b/fundamentals/variants/index.html @@ -4,13 +4,13 @@ Variants | Restyle - +
-

Variants

A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme.

// In theme
const theme = createTheme({
  // ...
  spacing: {
    s: 8,
    m: 16,
    l: 24,
  },
  colors: {
    cardPrimaryBackground: '#EEEEEE',
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
  cardVariants: {
    defaults: {
      // We can define defaults for the variant here.
      // This will be applied after the defaults passed to createVariant and before the variant defined below.
    },
    regular: {
      // We can refer to other values in the theme here, and use responsive props
      padding: {
        phone: 's',
        tablet: 'm',
      },
    },
    elevated: {
      padding: {
        phone: 's',
        tablet: 'm',
      },
      shadowColor: '#000',
      shadowOpacity: 0.2,
      shadowOffset: {width: 0, height: 5},
      shadowRadius: 15,
      elevation: 5,
    }
  }
})

import {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'
import {Theme} from './theme';

const variant = createVariant<Theme, 'cardVariants'>({
  themeKey: 'cardVariants',
  defaults: {
    margin: {
      phone: 's',
      tablet: 'm',
    },
    backgroundColor: 'cardPrimaryBackground',
  },
})

const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & BoxProps<Theme>,
  Theme,
>([variant], Box)

<Card variant="elevated" />

// createVariant and createRestyleComponent are often combined into a single
// call, which improves the type hinting as well:
const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
  Theme
>(
  [
    createVariant({
      themeKey: 'cardVariants',
      defaults: {
        margin: {
          phone: 's',
          tablet: 'm',
        },
        backgroundColor: 'cardPrimaryBackground',
      },
    }),
  ],
  Box,
);

Arguments:

  • property: The name of the component prop that will map to a variant. Defaults to variant.
  • themeKey: A key in the theme to map values from. Unlike createRestyleFunction, this option is required to create a variant.
  • defaults: The default values to apply before applying anything from the values in the theme.
- +

Variants

A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme.

// In theme
const theme = createTheme({
  // ...
  spacing: {
    s: 8,
    m: 16,
    l: 24,
  },
  colors: {
    cardPrimaryBackground: '#EEEEEE',
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
  cardVariants: {
    defaults: {
      // We can define defaults for the variant here.
      // This will be applied after the defaults passed to createVariant and before the variant defined below.
    },
    regular: {
      // We can refer to other values in the theme here, and use responsive props
      padding: {
        phone: 's',
        tablet: 'm',
      },
    },
    elevated: {
      padding: {
        phone: 's',
        tablet: 'm',
      },
      shadowColor: '#000',
      shadowOpacity: 0.2,
      shadowOffset: {width: 0, height: 5},
      shadowRadius: 15,
      elevation: 5,
    }
  }
})

import {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'
import {Theme} from './theme';

const variant = createVariant<Theme, 'cardVariants'>({
  themeKey: 'cardVariants',
  defaults: {
    margin: {
      phone: 's',
      tablet: 'm',
    },
    backgroundColor: 'cardPrimaryBackground',
  },
})

const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & BoxProps<Theme>,
  Theme,
>([variant], Box)

<Card variant="elevated" />

// createVariant and createRestyleComponent are often combined into a single
// call, which improves the type hinting as well:
const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
  Theme
>(
  [
    createVariant({
      themeKey: 'cardVariants',
      defaults: {
        margin: {
          phone: 's',
          tablet: 'm',
        },
        backgroundColor: 'cardPrimaryBackground',
      },
    }),
  ],
  Box,
);

Arguments:

  • property: The name of the component prop that will map to a variant. Defaults to variant.
  • themeKey: A key in the theme to map values from. Unlike createRestyleFunction, this option is required to create a variant.
  • defaults: The default values to apply before applying anything from the values in the theme.
+ \ No newline at end of file diff --git a/guides/dark-mode/index.html b/guides/dark-mode/index.html index d025c1c..beb0287 100644 --- a/guides/dark-mode/index.html +++ b/guides/dark-mode/index.html @@ -4,13 +4,13 @@ Implementing dark mode | Restyle - +
-

Implementing dark mode

Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:

import React, {useState} from 'react';
import {Switch} from 'react-native';
import {
  ThemeProvider,
  createBox,
  createText,
  createTheme,
} from '@shopify/restyle';

export const palette = {
  purple: '#5A31F4',
  white: '#FFF',
  black: '#111',
  darkGray: '#333',
  lightGray: '#EEE',
};

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16,
  },
  colors: {
    mainBackground: palette.lightGray,
    mainForeground: palette.black,

    primaryCardBackground: palette.purple,
    secondaryCardBackground: palette.white,
    primaryCardText: palette.white,
    secondaryCardText: palette.black,
  },
  textVariants: {
    defaults: {},
    body: {
      fontSize: 16,
      lineHeight: 24,
      color: 'mainForeground',
    },
  },
  cardVariants: {
    defaults: {},
    primary: {
      backgroundColor: 'primaryCardBackground',
      shadowOpacity: 0.3,
    },
    secondary: {
      backgroundColor: 'secondaryCardBackground',
      shadowOpacity: 0.1,
    },
  },
});

type Theme = typeof theme;

const darkTheme: Theme = {
  ...theme,
  colors: {
    ...theme.colors,
    mainBackground: palette.black,
    mainForeground: palette.white,

    secondaryCardBackground: palette.darkGray,
    secondaryCardText: palette.white,
  },
};

const Box = createBox<Theme>();
const Text = createText<Theme>();

const App = () => {
  const [darkMode, setDarkMode] = useState(false);
  return (
    <ThemeProvider theme={darkMode ? darkTheme : theme}>
      <Box padding="m" backgroundColor="mainBackground" flex={1}>
        <Box
          backgroundColor="primaryCardBackground"
          margin="s"
          padding="m"
          flexGrow={1}
        >
          <Text variant="body" color="primaryCardText">
            Primary Card
          </Text>
        </Box>
        <Box
          backgroundColor="secondaryCardBackground"
          margin="s"
          padding="m"
          flexGrow={1}
        >
          <Text variant="body" color="secondaryCardText">
            Secondary Card
          </Text>
        </Box>
        <Box marginTop="m">
          <Switch
            value={darkMode}
            onValueChange={(value: boolean) => setDarkMode(value)}
          />
        </Box>
      </Box>
    </ThemeProvider>
  );
};

export default App;
- +

Implementing dark mode

Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:

import React, {useState} from 'react';
import {Switch} from 'react-native';
import {
  ThemeProvider,
  createBox,
  createText,
  createTheme,
} from '@shopify/restyle';

export const palette = {
  purple: '#5A31F4',
  white: '#FFF',
  black: '#111',
  darkGray: '#333',
  lightGray: '#EEE',
};

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16,
  },
  colors: {
    mainBackground: palette.lightGray,
    mainForeground: palette.black,

    primaryCardBackground: palette.purple,
    secondaryCardBackground: palette.white,
    primaryCardText: palette.white,
    secondaryCardText: palette.black,
  },
  textVariants: {
    defaults: {},
    body: {
      fontSize: 16,
      lineHeight: 24,
      color: 'mainForeground',
    },
  },
  cardVariants: {
    defaults: {},
    primary: {
      backgroundColor: 'primaryCardBackground',
      shadowOpacity: 0.3,
    },
    secondary: {
      backgroundColor: 'secondaryCardBackground',
      shadowOpacity: 0.1,
    },
  },
});

type Theme = typeof theme;

const darkTheme: Theme = {
  ...theme,
  colors: {
    ...theme.colors,
    mainBackground: palette.black,
    mainForeground: palette.white,

    secondaryCardBackground: palette.darkGray,
    secondaryCardText: palette.white,
  },
};

const Box = createBox<Theme>();
const Text = createText<Theme>();

const App = () => {
  const [darkMode, setDarkMode] = useState(false);
  return (
    <ThemeProvider theme={darkMode ? darkTheme : theme}>
      <Box padding="m" backgroundColor="mainBackground" flex={1}>
        <Box
          backgroundColor="primaryCardBackground"
          margin="s"
          padding="m"
          flexGrow={1}
        >
          <Text variant="body" color="primaryCardText">
            Primary Card
          </Text>
        </Box>
        <Box
          backgroundColor="secondaryCardBackground"
          margin="s"
          padding="m"
          flexGrow={1}
        >
          <Text variant="body" color="secondaryCardText">
            Secondary Card
          </Text>
        </Box>
        <Box marginTop="m">
          <Switch
            value={darkMode}
            onValueChange={(value: boolean) => setDarkMode(value)}
          />
        </Box>
      </Box>
    </ThemeProvider>
  );
};

export default App;
+ \ No newline at end of file diff --git a/guides/fixture-app/index.html b/guides/fixture-app/index.html index e1118a8..db7ce84 100644 --- a/guides/fixture-app/index.html +++ b/guides/fixture-app/index.html @@ -4,13 +4,13 @@ Running the fixture app | Restyle - +
-

Running the fixture app

The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:

  1. First, run yarn up to install all the Restyle and fixture app dependencies.

  2. Next, run yarn start to start Metro.

  3. Lastly, run yarn run-ios to start the app on iOS, and yarn run-android to start the app on Android.

Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's Setting up the development environment.

Making changes to Restyle​

When making changes to Restyle (the code in /src), you'll need to run yarn build to use the latest Restyle build in the fixture app.

- +

Running the fixture app

The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:

  1. First, run yarn up to install all the Restyle and fixture app dependencies.

  2. Next, run yarn start to start Metro.

  3. Lastly, run yarn run-ios to start the app on iOS, and yarn run-android to start the app on Android.

Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's Setting up the development environment.

Making changes to Restyle​

When making changes to Restyle (the code in /src), you'll need to run yarn build to use the latest Restyle build in the fixture app.

+ \ No newline at end of file diff --git a/guides/index.html b/guides/index.html index f40aeca..4355360 100644 --- a/guides/index.html +++ b/guides/index.html @@ -4,13 +4,13 @@ Guides | Restyle - +
- + \ No newline at end of file diff --git a/guides/migrating-to-v2/index.html b/guides/migrating-to-v2/index.html index 1915fe8..907bc0d 100644 --- a/guides/migrating-to-v2/index.html +++ b/guides/migrating-to-v2/index.html @@ -4,14 +4,14 @@ Migrating to Restyle V2 | Restyle - +

Migrating to Restyle V2

v2 of this library introduces breaking changes in the usage of the useRestyle hook. -If you are not using useRestyle in your project, then you don't need to address any breaking change and can upgrade the library right away.

Addressing breaking changes in useRestyle​

  1. Import composeRestyleFunctions from @shopify/restyle
  2. Wrap the array you were using as param of useRestyle with composeRestyleFunctions
  3. Done

Before​

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

const restyleFunctions = [spacing, border, backgroundColor];
type Props = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme> & {
    onPress: () => void;
  };

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};

After​

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
  composeRestyleFunctions,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

const restyleFunctions = composeRestyleFunctions([
  spacing,
  border,
  backgroundColor,
]);
type Props = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme> & {
    onPress: () => void;
  };

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};
- +If you are not using useRestyle in your project, then you don't need to address any breaking change and can upgrade the library right away.

Addressing breaking changes in useRestyle​

  1. Import composeRestyleFunctions from @shopify/restyle
  2. Wrap the array you were using as param of useRestyle with composeRestyleFunctions
  3. Done

Before​

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

const restyleFunctions = [spacing, border, backgroundColor];
type Props = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme> & {
    onPress: () => void;
  };

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};

After​

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
  composeRestyleFunctions,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

const restyleFunctions = composeRestyleFunctions([
  spacing,
  border,
  backgroundColor,
]);
type Props = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme> & {
    onPress: () => void;
  };

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};
+ \ No newline at end of file diff --git a/guides/shopify-design-system/index.html b/guides/shopify-design-system/index.html index ec7122f..cc930a7 100644 --- a/guides/shopify-design-system/index.html +++ b/guides/shopify-design-system/index.html @@ -4,13 +4,13 @@ Getting Setup With the Shopify Design System | Restyle - +
-

Getting Setup With the Shopify Design System

To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.

Installation​

Using npm:

npm install @shopify/polaris-tokens --save

Using yarn:

yarn add @shopify/polaris-tokens

Define Your Theme​

// In theme
import tokens from '@shopify/polaris-tokens';
import {createTheme} from '@shopify/restyle';

const pxToNumber = (px: string) => {
  return parseInt(px.replace('px', ''), 10);
};

const theme = createTheme({
  colors: {
    body: tokens.colorBlack,
    backgroundRegular: tokens.colorWhite,
    backgroundSubdued: tokens.colorSkyLighter,

    foregroundRegular: tokens.colorBlack,
    foregroundOff: tokens.colorInkLight,
    foregroundSubdued: tokens.colorInkLightest,
    foregroundContrasting: tokens.colorWhite,
    foregroundSuccess: tokens.colorGreenDark,

    highlightPrimary: tokens.colorIndigo,
    highlightPrimaryDisabled: tokens.colorIndigoLight,

    buttonBackgroundPlain: tokens.colorSky,
    errorPrimary: tokens.colorRed,

    iconBackgroundDark: tokens.colorBlueDarker,
  },
  spacing: {
    none: tokens.spacingNone,
    xxs: pxToNumber(tokens.spacingExtraTight),
    xs: pxToNumber(tokens.spacingTight),
    s: pxToNumber(tokens.spacingBaseTight),
    m: pxToNumber(tokens.spacingBase),
    l: pxToNumber(tokens.spacingLoose),
    xl: pxToNumber(tokens.spacingExtraLoose),
    xxl: 2 * pxToNumber(tokens.spacingExtraLoose),
  },
});

export type Theme = typeof theme;
export default theme;

Now you can easily style your components with Shopify Polaris.

- +

Getting Setup With the Shopify Design System

To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.

Installation​

Using npm:

npm install @shopify/polaris-tokens --save

Using yarn:

yarn add @shopify/polaris-tokens

Define Your Theme​

// In theme
import tokens from '@shopify/polaris-tokens';
import {createTheme} from '@shopify/restyle';

const pxToNumber = (px: string) => {
  return parseInt(px.replace('px', ''), 10);
};

const theme = createTheme({
  colors: {
    body: tokens.colorBlack,
    backgroundRegular: tokens.colorWhite,
    backgroundSubdued: tokens.colorSkyLighter,

    foregroundRegular: tokens.colorBlack,
    foregroundOff: tokens.colorInkLight,
    foregroundSubdued: tokens.colorInkLightest,
    foregroundContrasting: tokens.colorWhite,
    foregroundSuccess: tokens.colorGreenDark,

    highlightPrimary: tokens.colorIndigo,
    highlightPrimaryDisabled: tokens.colorIndigoLight,

    buttonBackgroundPlain: tokens.colorSky,
    errorPrimary: tokens.colorRed,

    iconBackgroundDark: tokens.colorBlueDarker,
  },
  spacing: {
    none: tokens.spacingNone,
    xxs: pxToNumber(tokens.spacingExtraTight),
    xs: pxToNumber(tokens.spacingTight),
    s: pxToNumber(tokens.spacingBaseTight),
    m: pxToNumber(tokens.spacingBase),
    l: pxToNumber(tokens.spacingLoose),
    xl: pxToNumber(tokens.spacingExtraLoose),
    xxl: 2 * pxToNumber(tokens.spacingExtraLoose),
  },
});

export type Theme = typeof theme;
export default theme;

Now you can easily style your components with Shopify Polaris.

+ \ No newline at end of file diff --git a/index.html b/index.html index 770b216..1f40bc0 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,13 @@ Getting started | Restyle - +
-

Getting started

Build a consistent, themed UI in minutes.

Welcome example

The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus.

This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum.

Here's an example of how a view built with Restyle components could look:

import {
  ThemeProvider,
  createBox,
  createText,
  createRestyleComponent,
  createVariant,
  VariantProps,
} from '@shopify/restyle';

// See the "Defining your theme" section under "Fundamentals"
import theme, {Theme} from './theme';

const Box = createBox<Theme>();
const Text = createText<Theme>();

const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
  Theme
>([createVariant({themeKey: 'cardVariants'})], Box);

const Welcome = () => {
  return (
    <Box
      flex={1}
      backgroundColor="mainBackground"
      paddingVertical="xl"
      paddingHorizontal="m"
    >
      <Text variant="header">Welcome</Text>
      <Box
        flexDirection={{
          phone: 'column',
          tablet: 'row',
        }}
      >
        <Card margin="s" variant="secondary">
          <Text variant="body">This is a simple example</Text>
        </Card>
        <Card margin="s" variant="primary">
          <Text variant="body">Displaying how to use Restyle</Text>
        </Card>
      </Box>
    </Box>
  );
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Welcome />
    </ThemeProvider>
  );
};

Simple example

Installation​

Add the package to your project:

yarn add @shopify/restyle

Usage​

Read more about the usage of Restyle here.

Playground​

The fixture is an example app showing how to use the library.

- +

Getting started

Build a consistent, themed UI in minutes.

Welcome example

The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus.

This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum.

Here's an example of how a view built with Restyle components could look:

import {
  ThemeProvider,
  createBox,
  createText,
  createRestyleComponent,
  createVariant,
  VariantProps,
} from '@shopify/restyle';

// See the "Defining your theme" section under "Fundamentals"
import theme, {Theme} from './theme';

const Box = createBox<Theme>();
const Text = createText<Theme>();

const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
  Theme
>([createVariant({themeKey: 'cardVariants'})], Box);

const Welcome = () => {
  return (
    <Box
      flex={1}
      backgroundColor="mainBackground"
      paddingVertical="xl"
      paddingHorizontal="m"
    >
      <Text variant="header">Welcome</Text>
      <Box
        flexDirection={{
          phone: 'column',
          tablet: 'row',
        }}
      >
        <Card margin="s" variant="secondary">
          <Text variant="body">This is a simple example</Text>
        </Card>
        <Card margin="s" variant="primary">
          <Text variant="body">Displaying how to use Restyle</Text>
        </Card>
      </Box>
    </Box>
  );
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Welcome />
    </ThemeProvider>
  );
};

Simple example

Installation​

Add the package to your project:

yarn add @shopify/restyle

Usage​

Read more about the usage of Restyle here.

Playground​

The fixture is an example app showing how to use the library.

+ \ No newline at end of file diff --git a/search-index.json b/search-index.json index 0863ba1..52687d8 100644 --- a/search-index.json +++ b/search-index.json @@ -1 +1 @@ -[{"documents":[{"i":1,"t":"Getting started","u":"/restyle/","b":[]},{"i":9,"t":"Accessing the theme","u":"/restyle/fundamentals/accessing-the-theme","b":["Fundamentals"]},{"i":11,"t":"Breakpoints","u":"/restyle/fundamentals/breakpoints","b":["Fundamentals"]},{"i":13,"t":"Colors","u":"/restyle/fundamentals/colors","b":["Fundamentals"]},{"i":15,"t":"Predefined components","u":"/restyle/fundamentals/components/predefined-components","b":["Fundamentals","Components"]},{"i":17,"t":"Defining your theme","u":"/restyle/fundamentals/defining-your-theme","b":["Fundamentals"]},{"i":19,"t":"Overriding styles","u":"/restyle/fundamentals/overriding-styles","b":["Fundamentals"]},{"i":21,"t":"Custom components","u":"/restyle/fundamentals/components/custom-components","b":["Fundamentals","Components"]},{"i":23,"t":"Restyle functions","u":"/restyle/fundamentals/restyle-functions","b":["Fundamentals"]},{"i":29,"t":"Responsive values","u":"/restyle/fundamentals/responsive-values","b":["Fundamentals"]},{"i":31,"t":"Running the fixture app","u":"/restyle/guides/fixture-app","b":["Guides"]},{"i":35,"t":"Variants","u":"/restyle/fundamentals/variants","b":["Fundamentals"]},{"i":37,"t":"Implementing dark mode","u":"/restyle/guides/dark-mode","b":["Guides"]},{"i":39,"t":"Getting Setup With the Shopify Design System","u":"/restyle/guides/shopify-design-system","b":["Guides"]},{"i":41,"t":"Spacing","u":"/restyle/fundamentals/spacing","b":["Fundamentals"]},{"i":43,"t":"Migrating to Restyle V2","u":"/restyle/guides/migrating-to-v2","b":["Guides"]}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/1",[0,1.964,1,2.488]],["t/9",[2,2.488,3,1.964]],["t/11",[4,3.099]],["t/13",[5,3.099]],["t/15",[6,2.488,7,1.964]],["t/17",[3,1.964,8,2.488]],["t/19",[9,2.488,10,2.488]],["t/21",[7,1.964,11,2.488]],["t/23",[12,1.964,13,2.488]],["t/29",[14,2.488,15,2.488]],["t/31",[16,2.078,17,2.078,18,2.078]],["t/35",[19,3.099]],["t/37",[20,2.078,21,2.078,22,2.078]],["t/39",[0,1.234,23,1.563,24,1.563,25,1.563,26,1.563]],["t/41",[27,3.099]],["t/43",[12,1.641,28,2.078,29,2.078]]],"invertedIndex":[["access",{"_index":2,"t":{"9":{"position":[[0,9]]}}}],["app",{"_index":18,"t":{"31":{"position":[[20,3]]}}}],["breakpoint",{"_index":4,"t":{"11":{"position":[[0,11]]}}}],["color",{"_index":5,"t":{"13":{"position":[[0,6]]}}}],["compon",{"_index":7,"t":{"15":{"position":[[11,10]]},"21":{"position":[[7,10]]}}}],["custom",{"_index":11,"t":{"21":{"position":[[0,6]]}}}],["dark",{"_index":21,"t":{"37":{"position":[[13,4]]}}}],["defin",{"_index":8,"t":{"17":{"position":[[0,8]]}}}],["design",{"_index":25,"t":{"39":{"position":[[31,6]]}}}],["fixtur",{"_index":17,"t":{"31":{"position":[[12,7]]}}}],["function",{"_index":13,"t":{"23":{"position":[[8,9]]}}}],["get",{"_index":0,"t":{"1":{"position":[[0,7]]},"39":{"position":[[0,7]]}}}],["implement",{"_index":20,"t":{"37":{"position":[[0,12]]}}}],["migrat",{"_index":28,"t":{"43":{"position":[[0,9]]}}}],["mode",{"_index":22,"t":{"37":{"position":[[18,4]]}}}],["overrid",{"_index":9,"t":{"19":{"position":[[0,10]]}}}],["predefin",{"_index":6,"t":{"15":{"position":[[0,10]]}}}],["respons",{"_index":14,"t":{"29":{"position":[[0,10]]}}}],["restyl",{"_index":12,"t":{"23":{"position":[[0,7]]},"43":{"position":[[13,7]]}}}],["run",{"_index":16,"t":{"31":{"position":[[0,7]]}}}],["setup",{"_index":23,"t":{"39":{"position":[[8,5]]}}}],["shopifi",{"_index":24,"t":{"39":{"position":[[23,7]]}}}],["space",{"_index":27,"t":{"41":{"position":[[0,7]]}}}],["start",{"_index":1,"t":{"1":{"position":[[8,7]]}}}],["style",{"_index":10,"t":{"19":{"position":[[11,6]]}}}],["system",{"_index":26,"t":{"39":{"position":[[38,6]]}}}],["theme",{"_index":3,"t":{"9":{"position":[[14,5]]},"17":{"position":[[14,5]]}}}],["v2",{"_index":29,"t":{"43":{"position":[[21,2]]}}}],["valu",{"_index":15,"t":{"29":{"position":[[11,6]]}}}],["variant",{"_index":19,"t":{"35":{"position":[[0,8]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":3,"t":"Installation","u":"/restyle/","h":"#installation","p":1},{"i":5,"t":"Usage","u":"/restyle/","h":"#usage","p":1},{"i":7,"t":"Playground","u":"/restyle/","h":"#playground","p":1},{"i":25,"t":"Predefined Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#predefined-restyle-functions","p":23},{"i":27,"t":"Custom Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#custom-restyle-functions","p":23},{"i":33,"t":"Making changes to Restyle","u":"/restyle/guides/fixture-app","h":"#making-changes-to-restyle","p":31},{"i":45,"t":"Addressing breaking changes in useRestyle","u":"/restyle/guides/migrating-to-v2","h":"#addressing-breaking-changes-in-userestyle","p":43},{"i":47,"t":"Before","u":"/restyle/guides/migrating-to-v2","h":"#before","p":43},{"i":49,"t":"After","u":"/restyle/guides/migrating-to-v2","h":"#after","p":43}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/3",[0,2.349]],["t/5",[1,2.349]],["t/7",[2,2.349]],["t/25",[3,1.529,4,0.846,5,1.117]],["t/27",[4,0.846,5,1.117,6,1.529]],["t/33",[4,0.846,7,1.529,8,1.117]],["t/45",[8,0.951,9,1.302,10,1.302,11,1.302]],["t/47",[12,2.349]],["t/49",[]]],"invertedIndex":[["address",{"_index":9,"t":{"45":{"position":[[0,10]]}}}],["befor",{"_index":12,"t":{"47":{"position":[[0,6]]}}}],["break",{"_index":10,"t":{"45":{"position":[[11,8]]}}}],["chang",{"_index":8,"t":{"33":{"position":[[7,7]]},"45":{"position":[[20,7]]}}}],["custom",{"_index":6,"t":{"27":{"position":[[0,6]]}}}],["function",{"_index":5,"t":{"25":{"position":[[19,9]]},"27":{"position":[[15,9]]}}}],["instal",{"_index":0,"t":{"3":{"position":[[0,12]]}}}],["make",{"_index":7,"t":{"33":{"position":[[0,6]]}}}],["playground",{"_index":2,"t":{"7":{"position":[[0,10]]}}}],["predefin",{"_index":3,"t":{"25":{"position":[[0,10]]}}}],["restyl",{"_index":4,"t":{"25":{"position":[[11,7]]},"27":{"position":[[7,7]]},"33":{"position":[[18,7]]}}}],["usag",{"_index":1,"t":{"5":{"position":[[0,5]]}}}],["userestyl",{"_index":11,"t":{"45":{"position":[[31,10]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":2,"t":"Build a consistent, themed UI in minutes. The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus. This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum. Here's an example of how a view built with Restyle components could look: import { ThemeProvider, createBox, createText, createRestyleComponent, createVariant, VariantProps, } from '@shopify/restyle'; // See the \"Defining your theme\" section under \"Fundamentals\" import theme, {Theme} from './theme'; const Box = createBox(); const Text = createText(); const Card = createRestyleComponent< VariantProps & React.ComponentProps, Theme >([createVariant({themeKey: 'cardVariants'})], Box); const Welcome = () => { return ( Welcome This is a simple example Displaying how to use Restyle ); }; const App = () => { return ( ); };","s":"Getting started","u":"/restyle/","h":"","p":1},{"i":4,"t":"Add the package to your project: Yarn Npm Expo yarn add @shopify/restyle npm install @shopify/restyle npx expo install @shopify/restyle","s":"Installation","u":"/restyle/","h":"#installation","p":1},{"i":6,"t":"Read more about the usage of Restyle here.","s":"Usage","u":"/restyle/","h":"#usage","p":1},{"i":8,"t":"The fixture is an example app showing how to use the library.","s":"Playground","u":"/restyle/","h":"#playground","p":1},{"i":10,"t":"If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook: const Component = () => { const theme = useTheme(); const {cardPrimaryBackground} = theme.colors; // ... }; By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a dark mode switch in your app.","s":"Accessing the theme","u":"/restyle/fundamentals/accessing-the-theme","h":"","p":9},{"i":12,"t":"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height: const theme = createTheme({ breakpoints: { phone: 0, longPhone: { width: 0, height: 812, }, tablet: 768, largeTablet: 1024, }, }); See the Responsive Values section to see how these can be used. Defining breakpoints is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur.","s":"Breakpoints","u":"/restyle/fundamentals/breakpoints","h":"","p":11},{"i":14,"t":"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette. This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example: const palette = { purpleLight: '#8C6FF7', purplePrimary: '#5A31F4', purpleDark: '#3F22AB', greenLight: '#56DCBA', greenPrimary: '#0ECD9D', greenDark: '#0A906E', black: '#0B0B0B', white: '#F0F2F3', }; const theme = createTheme({ colors: { mainBackground: palette.white, mainForeground: palette.black, cardPrimaryBackground: palette.purplePrimary, buttonPrimaryBackground: palette.purplePrimary, }, }); Taking the time to define these semantic meanings comes with a number of benefits: It's easy to understand where and in what context colors are applied throughout the app If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to purplePrimary throughout the app. Even though cardPrimaryBackground and buttonPrimaryBackground point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change. A theme can easily be swapped at runtime.","s":"Colors","u":"/restyle/fundamentals/colors","h":"","p":13},{"i":16,"t":"This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme. Box​ // In Box.tsx import {createBox} from '@shopify/restyle'; import {Theme} from './theme'; const Box = createBox(); export default Box; The Box component comes with the following Restyle functions: backgroundColor, opacity, visible, layout, spacing, border, shadow, position. Text​ // In Text.tsx import {createText} from '@shopify/restyle'; import {Theme} from './theme'; const Text = createText(); export default Text; The Text component comes with the following Restyle functions: color, textDecorationColor, opacity, visible, typography, textShadow, spacing, layout. It also includes a variant that picks up styles under the textVariants key in your theme: // In your theme const theme = createTheme({ ..., textVariants: { header: { fontFamily: 'ShopifySans-Bold', fontWeight: 'bold', fontSize: 34, lineHeight: 42.5, color: 'black', }, subheader: { fontFamily: 'ShopifySans-SemiBold', fontWeight: '600', fontSize: 28, lineHeight: 36, color: 'black', }, body: { fontFamily: 'ShopifySans', fontSize: 16, lineHeight: 24, color: 'black', }, }, }); // In a component Header","s":"Predefined components","u":"/restyle/fundamentals/components/predefined-components","h":"","p":15},{"i":18,"t":"Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor=\"cardPrimary\" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor. Below is an example of how a basic theme could look. Make sure to read the other sections in Fundamentals for more details on how to set up your different theme values. import {createTheme} from '@shopify/restyle'; const palette = { purpleLight: '#8C6FF7', purplePrimary: '#5A31F4', purpleDark: '#3F22AB', greenLight: '#56DCBA', greenPrimary: '#0ECD9D', greenDark: '#0A906E', black: '#0B0B0B', white: '#F0F2F3', }; const theme = createTheme({ colors: { mainBackground: palette.white, cardPrimaryBackground: palette.purplePrimary, }, spacing: { s: 8, m: 16, l: 24, xl: 40, }, textVariants: { header: { fontWeight: 'bold', fontSize: 34, }, body: { fontSize: 16, lineHeight: 24, }, defaults: { // We can define a default text variant here. }, }, }); export type Theme = typeof theme; export default theme; Note: createTheme doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the { [key:string]: any } in BaseTheme This theme should be passed to a ThemeProvider at the top of your React tree: import {ThemeProvider} from '@shopify/restyle'; import theme from './theme'; const App = () => ( {/* Rest of the app */} );","s":"Defining your theme","u":"/restyle/fundamentals/defining-your-theme","h":"","p":17},{"i":20,"t":"Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary. ","s":"Overriding styles","u":"/restyle/fundamentals/overriding-styles","h":"","p":19},{"i":22,"t":"If you want to create your own component similar to Box or Text, but decide yourself which predefined Restyle functions to use, use the createRestyleComponent helper: import { createRestyleComponent, createVariant, spacing, SpacingProps, VariantProps, } from '@shopify/restyle'; import {Theme} from './theme'; type Props = SpacingProps & VariantProps; const Card = createRestyleComponent([ spacing, createVariant({themeKey: 'cardVariants'}), ]); export default Card; For more advanced components, you may want to instead use the useRestyle hook: import {TouchableOpacity, View} from 'react-native'; import { useRestyle, spacing, border, backgroundColor, SpacingProps, BorderProps, BackgroundColorProps, composeRestyleFunctions, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; type RestyleProps = SpacingProps & BorderProps & BackgroundColorProps; const restyleFunctions = composeRestyleFunctions([ spacing, border, backgroundColor, ]); type Props = RestyleProps & { onPress: () => void; label: string; }; const Button = ({onPress, label, ...rest}: Props) => { const props = useRestyle(restyleFunctions, rest); return ( {label} ); };","s":"Custom components","u":"/restyle/fundamentals/components/custom-components","h":"","p":21},{"i":24,"t":"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.","s":"Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"","p":23},{"i":26,"t":"The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name. Restyle Function Props Theme Key backgroundColor backgroundColor [bg] colors color color colors opacity opacity none visible display (maps true / false to flex / none) none spacing margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG] spacing layout width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap none position position, top, right, bottom, left, start, end none position zIndex zIndices border borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth none border borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor colors border borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius borderRadii shadow shadowOpacity, shadowOffset, shadowRadius, elevation none shadow shadowColor colors textShadow textShadowOffset, textShadowRadius none textShadow textShadowColor colors typography fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection none","s":"Predefined Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#predefined-restyle-functions","p":23},{"i":28,"t":"To define your own Restyle function, use the createRestyleFunction helper: import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle' const transparency = createRestyleFunction({ property: 'transparency', styleProperty: 'opacity', transform: ({value}: {value: number}) => 1 - value, }); const TransparentComponent = createRestyleComponent([transparency]) Arguments: property: The name of the component prop that the function will receive the value of. styleProperty: The name of the property in the style object to map to. Defaults to the value of property. transform({value, theme, themeKey}): An optional function that transforms the value of the prop to the value that will be inserted into the style object. themeKey: An optional key in the theme to map values from, e.g. colors.","s":"Custom Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#custom-restyle-functions","p":23},{"i":30,"t":"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme: // In your theme const theme = createTheme({ // ... breakpoints: { phone: 0, tablet: 768, } }) // Props always accept either plain values // Or breakpoint-specific values If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the useResponsiveProp hook: import { ColorProps, createBox, useResponsiveProp, useTheme, } from '@shopify/restyle'; import React from 'react'; import { ActivityIndicator, TouchableOpacity, TouchableOpacityProps, } from 'react-native'; import Text from './Text'; import {Theme} from './theme'; const BaseButton = createBox(TouchableOpacity); type Props = React.ComponentProps & ColorProps & { label: string; isLoading?: boolean; }; const Button = ({ label, isLoading, color = {phone: 'purple', tablet: 'blue'}, ...props }: Props) => { const theme = useTheme(); // Will be 'purple' on phone and 'blue' on tablet const textColorProp = useResponsiveProp(color); // Can safely perform logic with the extracted value const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue'; return ( {label} {isLoading ? ( ) : null} ); };","s":"Responsive values","u":"/restyle/fundamentals/responsive-values","h":"","p":29},{"i":32,"t":"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below: First, run yarn up to install all the Restyle and fixture app dependencies. Next, run yarn start to start Metro. Lastly, run yarn run-ios to start the app on iOS, and yarn run-android to start the app on Android. Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's Setting up the development environment.","s":"Running the fixture app","u":"/restyle/guides/fixture-app","h":"","p":31},{"i":34,"t":"When making changes to Restyle (the code in /src), you'll need to run yarn build to use the latest Restyle build in the fixture app.","s":"Making changes to Restyle","u":"/restyle/guides/fixture-app","h":"#making-changes-to-restyle","p":31},{"i":36,"t":"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme. // In theme const theme = createTheme({ // ... spacing: { s: 8, m: 16, l: 24, }, colors: { cardPrimaryBackground: '#EEEEEE', }, breakpoints: { phone: 0, tablet: 768, }, cardVariants: { defaults: { // We can define defaults for the variant here. // This will be applied after the defaults passed to createVariant and before the variant defined below. }, regular: { // We can refer to other values in the theme here, and use responsive props padding: { phone: 's', tablet: 'm', }, }, elevated: { padding: { phone: 's', tablet: 'm', }, shadowColor: '#000', shadowOpacity: 0.2, shadowOffset: {width: 0, height: 5}, shadowRadius: 15, elevation: 5, } } }) import {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle' import {Theme} from './theme'; const variant = createVariant({ themeKey: 'cardVariants', defaults: { margin: { phone: 's', tablet: 'm', }, backgroundColor: 'cardPrimaryBackground', }, }) const Card = createRestyleComponent< VariantProps & BoxProps, Theme, >([variant], Box) // createVariant and createRestyleComponent are often combined into a single // call, which improves the type hinting as well: const Card = createRestyleComponent< VariantProps & React.ComponentProps, Theme >( [ createVariant({ themeKey: 'cardVariants', defaults: { margin: { phone: 's', tablet: 'm', }, backgroundColor: 'cardPrimaryBackground', }, }), ], Box, ); Arguments: property: The name of the component prop that will map to a variant. Defaults to variant. themeKey: A key in the theme to map values from. Unlike createRestyleFunction, this option is required to create a variant. defaults: The default values to apply before applying anything from the values in the theme.","s":"Variants","u":"/restyle/fundamentals/variants","h":"","p":35},{"i":38,"t":"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it: import React, {useState} from 'react'; import {Switch} from 'react-native'; import { ThemeProvider, createBox, createText, createTheme, } from '@shopify/restyle'; export const palette = { purple: '#5A31F4', white: '#FFF', black: '#111', darkGray: '#333', lightGray: '#EEE', }; const theme = createTheme({ spacing: { s: 8, m: 16, }, colors: { mainBackground: palette.lightGray, mainForeground: palette.black, primaryCardBackground: palette.purple, secondaryCardBackground: palette.white, primaryCardText: palette.white, secondaryCardText: palette.black, }, textVariants: { defaults: {}, body: { fontSize: 16, lineHeight: 24, color: 'mainForeground', }, }, cardVariants: { defaults: {}, primary: { backgroundColor: 'primaryCardBackground', shadowOpacity: 0.3, }, secondary: { backgroundColor: 'secondaryCardBackground', shadowOpacity: 0.1, }, }, }); type Theme = typeof theme; const darkTheme: Theme = { ...theme, colors: { ...theme.colors, mainBackground: palette.black, mainForeground: palette.white, secondaryCardBackground: palette.darkGray, secondaryCardText: palette.white, }, }; const Box = createBox(); const Text = createText(); const App = () => { const [darkMode, setDarkMode] = useState(false); return ( Primary Card Secondary Card setDarkMode(value)} /> ); }; export default App;","s":"Implementing dark mode","u":"/restyle/guides/dark-mode","h":"","p":37},{"i":40,"t":"To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here. Installation​ Using npm: npm install @shopify/polaris-tokens --save Using yarn: yarn add @shopify/polaris-tokens Define Your Theme​ // In theme import tokens from '@shopify/polaris-tokens'; import {createTheme} from '@shopify/restyle'; const pxToNumber = (px: string) => { return parseInt(px.replace('px', ''), 10); }; const theme = createTheme({ colors: { body: tokens.colorBlack, backgroundRegular: tokens.colorWhite, backgroundSubdued: tokens.colorSkyLighter, foregroundRegular: tokens.colorBlack, foregroundOff: tokens.colorInkLight, foregroundSubdued: tokens.colorInkLightest, foregroundContrasting: tokens.colorWhite, foregroundSuccess: tokens.colorGreenDark, highlightPrimary: tokens.colorIndigo, highlightPrimaryDisabled: tokens.colorIndigoLight, buttonBackgroundPlain: tokens.colorSky, errorPrimary: tokens.colorRed, iconBackgroundDark: tokens.colorBlueDarker, }, spacing: { none: tokens.spacingNone, xxs: pxToNumber(tokens.spacingExtraTight), xs: pxToNumber(tokens.spacingTight), s: pxToNumber(tokens.spacingBaseTight), m: pxToNumber(tokens.spacingBase), l: pxToNumber(tokens.spacingLoose), xl: pxToNumber(tokens.spacingExtraLoose), xxl: 2 * pxToNumber(tokens.spacingExtraLoose), }, }); export type Theme = typeof theme; export default theme; Now you can easily style your components with Shopify Polaris.","s":"Getting Setup With the Shopify Design System","u":"/restyle/guides/shopify-design-system","h":"","p":39},{"i":42,"t":"Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes): const theme = createTheme({ spacing: { s: 8, m: 16, l: 24, xl: 40, }, });","s":"Spacing","u":"/restyle/fundamentals/spacing","h":"","p":41},{"i":44,"t":"v2 of this library introduces breaking changes in the usage of the useRestyle hook. If you are not using useRestyle in your project, then you don't need to address any breaking change and can upgrade the library right away.","s":"Migrating to Restyle V2","u":"/restyle/guides/migrating-to-v2","h":"","p":43},{"i":46,"t":"Import composeRestyleFunctions from @shopify/restyle Wrap the array you were using as param of useRestyle with composeRestyleFunctions Done","s":"Addressing breaking changes in useRestyle","u":"/restyle/guides/migrating-to-v2","h":"#addressing-breaking-changes-in-userestyle","p":43},{"i":48,"t":"import {TouchableOpacity, View} from 'react-native'; import { useRestyle, spacing, border, backgroundColor, SpacingProps, BorderProps, BackgroundColorProps, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; const restyleFunctions = [spacing, border, backgroundColor]; type Props = SpacingProps & BorderProps & BackgroundColorProps & { onPress: () => void; }; const Button = ({onPress, label, ...rest}: Props) => { const props = useRestyle(restyleFunctions, rest); return ( {label} ); };","s":"Before","u":"/restyle/guides/migrating-to-v2","h":"#before","p":43},{"i":50,"t":"import {TouchableOpacity, View} from 'react-native'; import { useRestyle, spacing, border, backgroundColor, SpacingProps, BorderProps, BackgroundColorProps, composeRestyleFunctions, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; const restyleFunctions = composeRestyleFunctions([ spacing, border, backgroundColor, ]); type Props = SpacingProps & BorderProps & BackgroundColorProps & { onPress: () => void; }; const Button = ({onPress, label, ...rest}: Props) => { const props = useRestyle(restyleFunctions, rest); return ( {label} ); };","s":"After","u":"/restyle/guides/migrating-to-v2","h":"#after","p":43}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,3.133,1,2.139,2,0.659,3,4.231,4,2.139,5,0.653,6,1.972,7,1.756,8,0.612,9,1.756,10,3.133,11,0.912,12,0.755,13,0.932,14,1.756,15,1.756,16,2.139,17,2.139,18,2.139,19,2.139,20,3.191,21,2.139,22,1.756,23,2.139,24,1.251,25,1.504,26,0.68,27,0.612,28,2.139,29,2.139,30,2.139,31,2.139,32,1.756,33,2.139,34,0.838,35,2.139,36,2.139,37,1.756,38,2.139,39,2.139,40,0.755,41,2.139,42,1.756,43,2.139,44,0.838,45,1.315,46,1.756,47,0.733,48,0.808,49,2.683,50,1.315,51,1.504,52,1.962,53,1.504,54,1.504,55,0.491,56,1.315,57,1.504,58,1.756,59,1.756,60,0.821,61,2.143,62,1.315,63,1.658,64,1.504,65,2.464,66,1.504,67,1.962,68,1.504,69,1.756,70,3.191,71,1.391,72,1.756,73,1.756,74,2.139,75,2.139,76,2.139,77,1.756,78,1.315,79,1.756,80,1.315,81,1.756,82,2.243,83,2.139,84,2.139,85,1.756,86,2.139,87,2.139,88,2.139,89,0.297,90,2.139,91,0.838,92,1.756]],["t/4",[55,1.25,93,4.186,94,4.294,95,3.019,96,3.136,97,4.186,98,5.099,99,3.585,100,4.294]],["t/6",[5,0.951,101,3.815,102,3.267,103,3.815,104,2.531]],["t/8",[6,2.01,44,1.808,89,0.64,91,1.808,105,3.243,106,4.613]],["t/10",[2,0.73,5,0.724,11,1.294,44,1.387,47,0.813,48,0.802,60,0.905,89,0.491,91,1.387,107,1.926,108,3.538,109,3.538,110,2.904,111,2.175,112,2.904,113,2.175,114,2.904,115,2.175,116,2.904,117,2.904,118,2.175,119,2.904,120,1.387,121,2.904,122,2.904,123,2.904,124,3.538,125,3.538,126,2.904,127,2.904,128,2.904,129,2.904,130,2.904]],["t/12",[2,0.409,8,0.844,24,1.919,34,1.156,40,1.61,42,2.422,48,0.75,56,2.468,57,2.074,60,0.535,78,1.814,80,1.814,89,0.633,120,1.156,131,3.149,132,3.442,133,2.951,134,3.295,135,2.951,136,2.422,137,2.074,138,2.422,139,1.814,140,2.951,141,3.295,142,1.286,143,2.951,144,2.422,145,2.951,146,2.422,147,2.422,148,2.951,149,2.951,150,2.822,151,1.041,152,2.822,153,2.951,154,2.951,155,2.074,156,2.951,157,2.951,158,2.468,159,1.814,160,2.951,161,2.951,162,2.951,163,2.422,164,2.951,165,1.814,166,2.422,167,2.951,168,2.951,169,2.951,170,2.951,171,2.951,172,2.951]],["t/14",[2,0.618,10,1.951,15,1.951,22,1.951,24,0.931,26,1.655,40,0.839,44,1.59,48,0.706,56,2.119,60,0.625,65,1.294,89,0.33,91,1.351,115,2.119,118,2.736,119,1.951,120,0.931,121,1.951,122,1.951,123,1.951,126,1.951,139,1.461,142,1.502,151,0.839,173,2.376,174,2.376,175,2.376,176,3.464,177,2.83,178,2.119,179,1.67,180,2.376,181,2.376,182,3.447,183,1.951,184,2.376,185,2.376,186,4.056,187,2.83,188,1.951,189,1.951,190,2.83,191,1.67,192,1.951,193,1.951,194,1.951,195,1.951,196,1.951,197,1.951,198,1.951,199,1.951,200,1.461,201,1.951,202,1.67,203,1.951,204,1.67,205,1.67,206,1.951,207,1.951,208,2.83,209,3.447,210,2.376,211,2.376,212,1.67,213,2.376,214,2.376,215,2.376,216,3.447,217,2.494,218,1.67,219,1.461,220,2.423,221,1.951,222,3.447,223,3.447,224,1.951,225,2.376,226,2.376,227,1.951,228,2.376,229,1.951,230,1.294,231,2.376,232,2.376,233,2.376,234,1.951]],["t/16",[2,0.731,5,0.657,6,0.939,7,1.768,8,0.917,11,1.298,26,1.349,27,0.917,34,0.844,40,0.76,44,0.844,47,0.975,48,0.783,50,1.324,51,1.514,55,0.737,58,1.768,60,0.695,61,1.978,62,1.324,63,1.865,64,1.514,111,1.324,117,1.768,118,1.324,120,0.844,141,1.768,151,0.76,165,1.324,177,1.768,179,1.514,200,2.356,212,2.984,218,1.514,235,1.514,236,2.063,237,2.154,238,2.154,239,2.154,240,2.154,241,2.154,242,1.514,243,0.76,244,1.173,245,2.154,246,2.154,247,2.154,248,1.768,249,2.154,250,1.746,251,1.398,252,2.255,253,0.76,254,2.255,255,2.633,256,2.633,257,1.173,258,1.768,259,1.768,260,2.154,261,1.768,262,1.768,263,1.768,264,1.514,265,2.154,266,2.255,267,1.324,268,1.768,269,3.146,270,3.832,271,2.633,272,2.255,273,2.356,274,1.768,275,2.356,276,2.154,277,2.154,278,2.154,279,2.154,280,2.154,281,2.154,282,1.324,283,1.173,284,1.173,285,2.154]],["t/18",[2,0.753,5,0.403,6,0.858,8,0.857,9,2.462,11,0.563,12,0.695,14,1.617,24,1.175,25,2.108,26,1.388,27,0.857,32,1.617,40,1.541,44,1.175,46,1.617,47,0.834,48,0.803,49,2.853,55,0.689,57,1.385,59,1.617,60,0.658,63,0.772,89,0.416,91,1.175,92,1.617,95,1.385,101,1.617,102,2.108,104,1.073,115,1.211,120,0.772,131,1.211,134,1.617,142,0.858,146,1.617,151,1.281,165,1.211,176,1.385,188,1.617,189,1.617,190,1.617,191,1.385,192,1.617,193,1.617,194,1.617,195,1.617,196,1.617,197,1.617,198,1.617,199,1.617,200,1.211,201,1.617,202,1.385,203,1.617,204,1.385,205,1.385,208,1.617,218,1.385,219,1.211,227,1.617,242,1.385,248,1.617,250,1.633,251,1.582,253,0.695,264,1.385,266,1.385,268,1.617,271,1.617,272,1.385,273,1.844,274,1.617,275,1.211,282,1.211,283,1.633,284,1.633,286,1.97,287,1.617,288,1.97,289,1.97,290,1.97,291,1.073,292,1.385,293,1.97,294,1.97,295,1.97,296,1.385,297,1.97,298,1.97,299,1.97,300,1.073,301,1.211,302,0.957,303,1.211,304,1.385,305,1.617,306,1.385,307,1.97,308,1.97,309,1.617,310,1.97,311,2.999,312,1.97,313,1.617,314,1.617,315,1.97,316,1.97,317,1.617,318,1.97,319,1.385,320,1.617,321,1.97,322,1.211]],["t/20",[5,0.85,11,1.187,34,2.101,48,0.694,61,1.809,82,2.918,89,0.576,139,2.553,187,3.408,253,1.465,291,2.26,292,2.918,323,3.408,324,4.151,325,4.151,326,4.151,327,3.408,328,4.151]],["t/22",[2,0.656,5,0.486,8,1.16,11,0.986,12,0.839,13,1.035,27,1.273,45,2.494,47,1.132,48,0.819,52,2.119,53,1.67,54,1.67,55,0.792,60,0.807,61,1.035,63,1.744,65,1.877,66,1.67,67,2.119,69,1.951,71,1.035,89,0.563,102,1.67,111,1.461,113,1.461,118,1.461,138,2.83,229,1.951,230,1.294,235,1.67,236,1.155,243,1.668,250,1.294,251,1.035,253,1.217,257,1.877,322,2.119,329,2.376,330,2.376,331,1.951,332,2.423,333,2.423,334,2.376,335,2.376,336,1.877,337,2.494,338,1.67,339,1.67,340,1.67,341,4.056,342,1.67,343,1.67,344,1.67,345,2.376,346,2.423,347,1.67,348,2.119,349,1.67,350,1.67,351,1.67,352,1.67]],["t/24",[2,0.565,5,1.011,11,1.164,12,1.436,13,1.774,34,1.595,40,1.876,120,1.595,158,2.502,236,1.978,243,1.743,244,2.689,287,3.341,317,3.341,319,2.861,353,4.07,354,4.07,355,4.07,356,4.07]],["t/26",[2,0.28,5,0.753,6,0.878,26,1.532,27,0.872,48,0.511,77,1.654,132,1.416,142,0.878,150,1.416,178,1.239,212,1.416,235,1.416,236,1.482,243,1.076,244,1.097,253,1.076,254,2.144,255,1.654,256,1.654,257,2.004,258,2.504,259,3.021,261,1.654,262,1.654,263,2.504,267,1.239,269,1.654,272,1.416,273,1.239,275,1.239,291,1.097,302,0.979,320,1.654,357,2.014,358,2.014,359,2.014,360,2.014,361,2.014,362,2.014,363,2.014,364,4.172,365,2.014,366,2.014,367,2.014,368,3.05,369,1.654,370,2.014,371,2.014,372,2.014,373,2.014,374,2.014,375,2.014,376,2.014,377,2.014,378,2.014,379,2.014,380,2.014,381,2.014,382,2.014,383,2.014,384,1.654,385,2.014,386,2.014,387,2.014,388,2.014,389,2.014,390,2.014,391,2.014,392,2.014,393,2.014,394,2.014,395,2.014,396,2.014,397,2.014,398,2.014,399,1.654,400,2.014,401,2.014,402,2.014,403,2.014,404,2.014,405,2.014,406,2.014,407,2.014,408,2.014,409,2.014,410,2.014,411,2.014,412,2.014,413,2.014,414,2.014,415,2.014,416,2.014,417,2.014,418,2.014,419,2.014,420,2.014,421,2.014,422,1.654,423,2.014,424,2.014,425,1.416,426,2.014,427,2.014,428,2.014,429,2.014,430,2.014,431,2.014,432,2.014,433,2.014,434,2.014,435,2.014,436,2.014,437,2.014,438,2.014,439,2.014,440,2.014,441,2.014,442,2.014,443,2.014,444,2.014,445,2.014,446,2.014,447,2.014,448,2.014,449,2.014,450,2.014,451,2.014,452,2.014,453,2.014,454,1.416,455,1.654,456,1.654,457,1.654,458,1.654,459,2.014,460,2.014,461,2.014,462,2.014,463,2.014,464,2.014,465,2.014,466,2.014,467,2.014,468,2.014,469,2.014,470,2.014,471,2.014,472,2.014]],["t/28",[2,0.579,5,0.64,11,0.895,24,1.226,26,0.994,34,1.637,40,1.968,47,0.719,48,0.725,52,1.924,55,0.719,60,0.757,89,0.434,120,1.637,142,1.82,159,2.567,178,1.924,219,1.924,236,2.284,243,1.474,244,2.274,251,1.363,254,2.199,267,1.924,291,2.731,331,2.568,473,3.858,474,4.176,475,4.176,476,4.176,477,3.129,478,4.176,479,3.129,480,3.129,481,2.568,482,3.129,483,3.129,484,3.428,485,3.129]],["t/30",[2,0.646,5,0.415,8,0.58,11,0.876,12,1.304,13,0.884,24,0.795,26,0.644,34,0.795,40,1.561,47,1.016,48,0.831,50,1.247,55,0.466,60,0.843,61,1.336,62,1.247,63,1.614,68,1.425,71,0.884,78,2.272,79,1.665,80,2.532,81,1.665,89,0.425,107,1.104,110,1.665,112,1.665,113,1.247,114,1.665,120,0.795,131,2.272,136,1.665,137,1.425,151,0.716,152,1.425,155,1.425,158,1.247,159,1.247,163,1.665,219,1.247,220,2.598,221,2.516,230,1.104,243,1.705,292,2.155,313,1.665,337,1.247,348,2.272,349,1.425,486,2.028,487,2.028,488,1.665,489,2.028,490,3.065,491,2.028,492,3.065,493,2.028,494,3.065,495,2.028,496,3.065,497,2.028,498,4.119,499,2.028,500,2.028,501,3.695,502,1.665,503,3.065,504,2.028,505,2.028,506,2.028,507,2.028,508,2.028,509,2.028,510,2.028,511,2.028,512,2.028,513,2.028,514,2.028,515,2.028]],["t/32",[5,0.881,6,1.428,12,1.157,25,2.304,37,2.69,89,0.455,91,2.002,96,3.14,99,2.304,105,3.027,144,2.69,165,2.647,217,2.015,252,3.027,296,2.304,425,3.59,516,3.277,517,3.277,518,3.277,519,3.277,520,3.277,521,3.277,522,4.47,523,3.277,524,3.277,525,3.277,526,3.277,527,3.277,528,3.277,529,4.809,530,4.809,531,3.277,532,3.277,533,3.277,534,3.277,535,3.277,536,3.277,537,3.277,538,3.277]],["t/34",[0,4.186,5,1.044,89,0.596,91,1.683,96,2.641,105,3.019,107,2.338,217,2.641,242,3.019,522,3.525,539,4.294,540,4.294,541,4.294,542,4.294]],["t/36",[2,0.695,5,0.567,8,0.509,11,0.509,24,1.086,26,0.565,27,0.509,40,1.357,47,0.637,48,0.827,52,2.364,53,2.703,54,1.25,55,0.409,60,0.697,61,1.484,65,1.854,66,1.948,67,2.715,68,1.25,78,2.563,80,2.563,89,0.385,104,1.509,107,0.968,111,1.094,115,2.094,131,1.094,132,1.25,139,2.094,142,0.775,147,1.46,150,1.25,151,0.628,152,1.948,155,1.25,158,1.094,159,1.094,224,1.46,236,1.347,243,1.357,244,2.094,251,2.078,253,0.978,264,3.444,267,1.704,283,0.968,284,0.968,291,0.968,296,1.25,300,2.27,301,1.094,302,2.025,303,1.094,309,1.46,319,1.25,323,1.46,369,2.275,384,2.275,454,1.25,455,1.46,456,1.46,457,2.275,458,1.46,473,1.46,481,1.46,484,2.796,488,1.46,543,1.778,544,1.46,545,1.778,546,2.771,547,1.778,548,1.778,549,2.771,550,1.778,551,1.778,552,1.778,553,1.778,554,1.778,555,1.778,556,1.778,557,1.778,558,1.778,559,1.778,560,1.778]],["t/38",[2,0.628,8,0.541,12,1.25,13,0.825,26,1.126,27,0.541,44,0.742,47,0.814,48,0.828,49,2.489,50,1.163,51,1.33,55,0.435,60,0.855,61,2.175,62,1.163,63,1.681,64,1.33,65,1.583,67,1.163,71,0.825,72,1.553,73,1.553,82,2.044,85,1.553,91,1.388,104,1.03,116,1.553,127,1.553,128,1.553,129,1.553,130,2.387,151,1.026,176,1.33,191,1.33,200,1.163,202,1.33,204,2.044,205,2.794,206,2.907,207,2.907,220,1.33,250,1.583,251,1.543,253,1.026,266,1.33,273,1.163,275,1.163,282,1.163,283,1.583,284,1.03,300,1.03,301,1.163,302,0.919,306,1.33,327,2.907,454,2.044,502,1.553,561,1.892,562,1.892,563,1.892,564,1.892,565,1.892,566,1.892,567,1.892,568,1.892,569,1.892,570,1.892,571,1.892,572,2.907,573,1.892,574,3.541,575,1.892,576,2.907,577,2.907,578,1.892,579,2.907,580,1.892,581,2.907,582,1.892,583,1.892,584,1.892,585,1.892,586,1.892,587,1.892,588,2.907,589,2.907,590,1.892,591,1.892,592,1.892,593,1.892,594,1.892,595,1.892,596,1.892]],["t/40",[2,0.698,8,0.721,11,0.721,24,0.988,26,0.801,27,0.721,34,1.41,47,0.826,48,0.787,55,0.579,56,1.55,60,0.652,71,1.098,89,0.582,93,2.069,96,2.211,97,2.952,99,2.528,104,1.372,151,1.269,166,2.069,183,2.952,234,2.069,250,1.958,251,1.098,282,1.55,300,1.372,302,1.225,303,1.55,304,1.772,306,1.772,349,1.772,364,2.069,399,2.069,425,1.772,597,3.596,598,2.52,599,2.52,600,5.027,601,4.193,602,2.52,603,2.52,604,2.52,605,3.596,606,2.52,607,3.596,608,2.52,609,2.52,610,2.52,611,2.52,612,2.52,613,2.52,614,2.52,615,2.52,616,2.52,617,2.52,618,2.52,619,2.52,620,2.52,621,2.52,622,2.52,623,2.52,624,2.52,625,2.52,626,2.52,627,2.52,628,2.52,629,2.52,630,2.52,631,2.52,632,2.52,633,2.52,634,2.52,635,2.52,636,3.596,637,2.52,638,2.52,639,2.52]],["t/42",[2,0.511,27,1.454,44,1.444,48,0.741,60,0.668,89,0.511,137,3.264,142,1.606,151,1.3,178,2.855,179,2.59,252,2.59,283,2.006,284,2.006,300,2.006,301,2.855,302,1.79,303,2.265,304,2.59,305,3.025,544,3.025,640,3.684,641,3.684,642,3.684,643,3.684,644,3.684,645,3.684,646,3.684,647,3.684,648,3.684,649,3.684,650,3.684]],["t/44",[6,2.187,89,0.58,95,2.938,103,3.431,107,2.276,113,2.57,217,3.085,314,3.431,336,2.732,422,3.431,651,4.179,652,4.179,653,5.017,654,4.179,655,4.179,656,4.179]],["t/46",[47,1.029,55,1.029,89,0.622,336,2.439,340,3.675,657,4.48,658,4.48,659,4.48,660,4.48]],["t/48",[2,0.581,8,0.899,12,1.11,13,1.37,27,1.198,45,2.897,47,1.154,48,0.825,55,0.722,60,0.854,63,1.847,71,1.37,230,1.712,243,1.773,253,1.479,257,2.281,322,2.576,332,2.21,333,2.21,336,1.712,337,2.897,338,2.21,339,2.21,342,2.21,343,2.21,344,2.21,346,2.945,347,2.21,348,1.933,350,2.21,351,2.21,352,2.21]],["t/50",[2,0.576,8,0.886,12,1.093,13,1.35,27,1.186,45,2.875,47,1.148,48,0.826,55,0.712,60,0.848,63,1.833,71,1.35,230,1.687,243,1.763,253,1.464,257,2.259,322,2.55,332,2.177,333,2.177,336,1.687,337,2.875,338,2.177,339,2.177,340,2.916,342,2.177,343,2.177,344,2.177,346,2.916,347,2.177,348,1.905,350,2.177,351,2.177,352,2.177]]],"invertedIndex":[["",{"_index":48,"t":{"2":{"position":[[670,1],[763,1],[790,2],[900,1],[933,1],[967,1],[1029,1],[1138,1],[1140,2],[1143,2],[1146,1],[1155,1],[1247,1],[1341,2],[1344,1],[1561,2],[1564,2],[1577,1],[1579,2],[1582,2],[1585,1],[1594,1],[1635,2],[1655,2],[1658,2]]},"10":{"position":[[125,1],[127,2],[130,2],[133,1],[147,1],[198,1],[214,2],[217,3],[221,2]]},"12":{"position":[[353,1],[382,1],[405,1],[430,2],[465,2],[468,3],[662,1]]},"14":{"position":[[411,1],[413,1],[594,2],[609,1],[633,1],[791,2],[794,3]]},"16":{"position":[[380,2],[479,1],[667,2],[769,1],[1053,2],[1082,1],[1098,4],[1117,1],[1127,1],[1229,2],[1243,1],[1346,2],[1355,1],[1430,2],[1433,2],[1436,3],[1440,2]]},"18":{"position":[[700,1],[702,1],[883,2],[898,1],[922,1],[1001,2],[1013,1],[1043,2],[1060,1],[1070,1],[1106,2],[1115,1],[1147,2],[1160,1],[1162,2],[1208,2],[1211,2],[1214,3],[1236,1],[1517,1],[1537,1],[1717,1],[1719,2],[1722,2],[1725,1],[1796,2]]},"20":{"position":[[252,2],[255,2]]},"22":{"position":[[174,1],[252,1],[321,1],[343,1],[393,1],[486,3],[650,1],[772,1],[875,1],[897,1],[918,1],[972,1],[1055,3],[1070,1],[1085,1],[1087,1],[1098,2],[1101,2],[1125,2],[1141,1],[1178,2],[1181,1],[1195,1],[1240,1],[1368,2],[1371,2]]},"26":{"position":[[133,1],[319,1],[335,1]]},"28":{"position":[[173,1],[289,2],[303,3],[334,1],[416,2]]},"30":{"position":[[131,2],[160,1],[176,2],[179,3],[196,1],[221,1],[223,2],[226,2],[294,2],[297,2],[384,2],[556,1],[610,1],[671,1],[733,1],[831,1],[903,1],[945,1],[965,1],[967,1],[1005,2],[1021,1],[1023,2],[1050,1],[1096,2],[1106,2],[1109,1],[1123,1],[1144,2],[1214,1],[1242,2],[1309,1],[1325,3],[1338,1],[1354,1],[1376,1],[1461,1],[1533,1],[1535,1],[1592,2],[1595,1],[1597,1],[1619,2],[1622,2]]},"36":{"position":[[167,2],[191,1],[207,2],[210,3],[223,1],[245,2],[256,1],[292,2],[308,1],[333,2],[350,1],[362,1],[364,2],[412,2],[517,2],[529,1],[531,2],[616,1],[643,2],[646,2],[659,1],[670,1],[697,2],[810,1],[812,1],[814,2],[947,1],[1024,1],[1034,1],[1061,2],[1106,2],[1109,2],[1123,1],[1185,1],[1254,2],[1257,2],[1334,2],[1395,1],[1457,1],[1499,2],[1502,1],[1556,1],[1566,1],[1593,2],[1638,2],[1641,3],[1645,2],[1653,2]]},"38":{"position":[[187,1],[240,1],[288,1],[290,1],[378,2],[393,1],[418,1],[433,2],[444,1],[657,2],[674,1],[686,3],[696,1],[753,2],[756,2],[773,1],[785,3],[798,1],[862,2],[876,1],[942,2],[945,2],[948,3],[963,1],[1002,1],[1004,1],[1024,1],[1182,2],[1185,2],[1198,1],[1231,1],[1264,1],[1266,2],[1269,2],[1272,1],[1304,1],[1330,1],[1363,1],[1375,1],[1526,1],[1685,1],[1842,2],[1865,2],[1899,2],[1902,2]]},"40":{"position":[[236,2],[357,1],[372,2],[375,1],[410,4],[420,2],[435,1],[459,1],[974,2],[986,1],[1254,1],[1294,2],[1297,3],[1319,1]]},"42":{"position":[[245,1],[270,1],[300,2],[303,3]]},"48":{"position":[[60,1],[157,1],[265,1],[314,1],[336,1],[357,1],[387,1],[389,1],[400,2],[403,2],[412,2],[428,1],[465,2],[468,1],[482,1],[527,1],[655,2],[658,2]]},"50":{"position":[[60,1],[182,1],[290,1],[352,3],[367,1],[389,1],[410,1],[440,1],[442,1],[453,2],[456,2],[465,2],[481,1],[518,2],[521,1],[535,1],[580,1],[708,2],[711,2]]}}}],["0",{"_index":152,"t":{"12":{"position":[[391,2],[414,2]]},"30":{"position":[[205,2]]},"36":{"position":[[317,2],[763,2]]}}}],["0.1",{"_index":580,"t":{"38":{"position":[[937,4]]}}}],["0.2",{"_index":548,"t":{"36":{"position":[[736,4]]}}}],["0.3",{"_index":578,"t":{"38":{"position":[[857,4]]}}}],["000",{"_index":547,"t":{"36":{"position":[[713,7]]}}}],["0a906",{"_index":199,"t":{"14":{"position":[[547,10]]},"18":{"position":[[836,10]]}}}],["0b0b0b",{"_index":201,"t":{"14":{"position":[[565,10]]},"18":{"position":[[854,10]]}}}],["0ecd9d",{"_index":197,"t":{"14":{"position":[[525,10]]},"18":{"position":[[814,10]]}}}],["1",{"_index":477,"t":{"28":{"position":[[292,1]]}}}],["10",{"_index":166,"t":{"12":{"position":[[659,2]]},"40":{"position":[[415,4]]}}}],["1024",{"_index":157,"t":{"12":{"position":[[459,5]]}}}],["111",{"_index":566,"t":{"38":{"position":[[333,7]]}}}],["15",{"_index":550,"t":{"36":{"position":[[792,3]]}}}],["16",{"_index":283,"t":{"16":{"position":[[1394,3]]},"18":{"position":[[1024,3],[1127,3]]},"36":{"position":[[234,3]]},"38":{"position":[[429,3],[708,3]]},"42":{"position":[[281,3]]}}}],["2",{"_index":638,"t":{"40":{"position":[[1252,1]]}}}],["24",{"_index":284,"t":{"16":{"position":[[1410,3]]},"18":{"position":[[1031,3],[1143,3]]},"36":{"position":[[241,3]]},"38":{"position":[[724,3]]},"42":{"position":[[288,3]]}}}],["28",{"_index":280,"t":{"16":{"position":[[1310,3]]}}}],["333",{"_index":568,"t":{"38":{"position":[[351,7]]}}}],["34",{"_index":274,"t":{"16":{"position":[[1191,3]]},"18":{"position":[[1102,3]]}}}],["36",{"_index":281,"t":{"16":{"position":[[1326,3]]}}}],["3f22ab",{"_index":193,"t":{"14":{"position":[[477,10]]},"18":{"position":[[766,10]]}}}],["40",{"_index":305,"t":{"18":{"position":[[1039,3]]},"42":{"position":[[296,3]]}}}],["42.5",{"_index":276,"t":{"16":{"position":[[1207,5]]}}}],["5",{"_index":549,"t":{"36":{"position":[[774,3],[807,2]]}}}],["56dcba",{"_index":195,"t":{"14":{"position":[[500,10]]},"18":{"position":[[789,10]]}}}],["5a31f4",{"_index":191,"t":{"14":{"position":[[454,10]]},"18":{"position":[[743,10]]},"38":{"position":[[300,10]]}}}],["600",{"_index":279,"t":{"16":{"position":[[1293,6]]}}}],["768",{"_index":155,"t":{"12":{"position":[[441,4]]},"30":{"position":[[216,4]]},"36":{"position":[[328,4]]}}}],["8",{"_index":301,"t":{"18":{"position":[[1018,2]]},"36":{"position":[[228,2]]},"38":{"position":[[423,2]]},"42":{"position":[[78,2],[275,2]]}}}],["812",{"_index":154,"t":{"12":{"position":[[425,4]]}}}],["8c6ff7",{"_index":189,"t":{"14":{"position":[[428,10]]},"18":{"position":[[717,10]]}}}],["abov",{"_index":228,"t":{"14":{"position":[[1298,6]]}}}],["accept",{"_index":292,"t":{"18":{"position":[[366,6]]},"20":{"position":[[27,7]]},"30":{"position":[[43,6],[242,6]]}}}],["access",{"_index":109,"t":{"10":{"position":[[24,6]]}}}],["acknowledg",{"_index":31,"t":{"2":{"position":[[411,12]]}}}],["action",{"_index":238,"t":{"16":{"position":[[92,6]]}}}],["activityind",{"_index":496,"t":{"30":{"position":[[673,18],[1537,18]]}}}],["add",{"_index":93,"t":{"4":{"position":[[0,3],[52,3]]},"40":{"position":[[189,3]]}}}],["address",{"_index":654,"t":{"44":{"position":[[156,7]]}}}],["advanc",{"_index":335,"t":{"22":{"position":[[520,8]]}}}],["alias",{"_index":360,"t":{"26":{"position":[[125,7]]}}}],["aligncont",{"_index":414,"t":{"26":{"position":[[816,13]]}}}],["alignitem",{"_index":415,"t":{"26":{"position":[[830,11]]}}}],["alignself",{"_index":416,"t":{"26":{"position":[[842,10]]}}}],["allow",{"_index":33,"t":{"2":{"position":[[470,8]]}}}],["alway",{"_index":488,"t":{"30":{"position":[[235,6]]},"36":{"position":[[133,6]]}}}],["android",{"_index":530,"t":{"32":{"position":[[346,7],[374,8],[412,7]]}}}],["anyth",{"_index":309,"t":{"18":{"position":[[1303,8]]},"36":{"position":[[1935,8]]}}}],["app",{"_index":91,"t":{"2":{"position":[[1573,3]]},"8":{"position":[[26,3]]},"10":{"position":[[391,4]]},"14":{"position":[[965,3],[1192,4]]},"18":{"position":[[1713,3],[1772,3]]},"32":{"position":[[12,3],[228,3],[321,3],[367,3]]},"34":{"position":[[128,4]]},"38":{"position":[[14,3],[1260,3],[1920,4]]}}}],["appli",{"_index":139,"t":{"12":{"position":[[105,5]]},"14":{"position":[[942,7]]},"20":{"position":[[69,5]]},"36":{"position":[[428,7],[1913,5],[1926,8]]}}}],["argument",{"_index":481,"t":{"28":{"position":[[419,10]]},"36":{"position":[[1656,10]]}}}],["array",{"_index":658,"t":{"46":{"position":[[62,5]]}}}],["aspectratio",{"_index":413,"t":{"26":{"position":[[803,12]]}}}],["asset",{"_index":598,"t":{"40":{"position":[[29,6]]}}}],["assign",{"_index":185,"t":{"14":{"position":[[339,6]]}}}],["assum",{"_index":19,"t":{"2":{"position":[[245,7]]}}}],["autocomplet",{"_index":293,"t":{"18":{"position":[[422,13]]}}}],["automat",{"_index":535,"t":{"32":{"position":[[441,14]]}}}],["avail",{"_index":248,"t":{"16":{"position":[[350,9]]},"18":{"position":[[163,9]]}}}],["averag",{"_index":168,"t":{"12":{"position":[[670,7]]}}}],["away",{"_index":656,"t":{"44":{"position":[[218,5]]}}}],["backgroundcolor",{"_index":253,"t":{"16":{"position":[[583,16]]},"18":{"position":[[333,15]]},"20":{"position":[[224,16]]},"22":{"position":[[681,16],[1038,16]]},"26":{"position":[[208,15],[224,15]]},"36":{"position":[[1064,16],[1596,16]]},"38":{"position":[[800,16],[878,16]]},"48":{"position":[[91,16],[285,17]]},"50":{"position":[[91,16],[335,16]]}}}],["backgroundcolor=\"cardprimari",{"_index":289,"t":{"18":{"position":[[230,29]]}}}],["backgroundcolor=\"mainbackground",{"_index":73,"t":{"2":{"position":[[1171,32]]},"38":{"position":[[1402,32]]}}}],["backgroundcolor=\"primarycardbackground",{"_index":587,"t":{"38":{"position":[[1450,39]]}}}],["backgroundcolor=\"secondarycardbackground",{"_index":591,"t":{"38":{"position":[[1607,41]]}}}],["backgroundcolor={bgcolor",{"_index":511,"t":{"30":{"position":[[1424,25]]}}}],["backgroundcolorprop",{"_index":339,"t":{"22":{"position":[[725,21]]},"48":{"position":[[135,21]]},"50":{"position":[[135,21]]}}}],["backgroundcolorprops(touchableopac",{"_index":499,"t":{"30":{"position":[[850,41]]}}}],["transform",{"_index":476,"t":{"28":{"position":[[251,10],[685,10]]}}}],["transform({valu",{"_index":483,"t":{"28":{"position":[[622,17]]}}}],["transpar",{"_index":474,"t":{"28":{"position":[[160,12],[209,15]]}}}],["transparency={0.5",{"_index":480,"t":{"28":{"position":[[397,18]]}}}],["transparentcompon",{"_index":478,"t":{"28":{"position":[[313,20],[375,21]]}}}],["tree",{"_index":321,"t":{"18":{"position":[[1624,5]]}}}],["trivial",{"_index":233,"t":{"14":{"position":[[1389,7]]}}}],["true",{"_index":366,"t":{"26":{"position":[[314,4]]}}}],["type",{"_index":8,"t":{"2":{"position":[[73,4]]},"12":{"position":[[200,4]]},"16":{"position":[[221,4],[316,5]]},"18":{"position":[[1225,4],[1401,5]]},"22":{"position":[[310,4],[857,4],[1059,4]]},"30":{"position":[[892,4]]},"36":{"position":[[1362,4]]},"38":{"position":[[952,4]]},"40":{"position":[[1308,4]]},"48":{"position":[[303,4]]},"50":{"position":[[356,4]]}}}],["typeof",{"_index":306,"t":{"18":{"position":[[1238,6]]},"38":{"position":[[965,6]]},"40":{"position":[[1321,6]]}}}],["typesafeti",{"_index":316,"t":{"18":{"position":[[1487,10]]}}}],["typescript",{"_index":14,"t":{"2":{"position":[[142,11]]},"18":{"position":[[309,10]]}}}],["typographi",{"_index":262,"t":{"16":{"position":[[922,11]]},"26":{"position":[[1684,10]]}}}],["ui",{"_index":3,"t":{"2":{"position":[[27,2],[107,2],[182,2],[262,2]]}}}],["under",{"_index":58,"t":{"2":{"position":[[831,5]]},"16":{"position":[[1011,5]]}}}],["understand",{"_index":214,"t":{"14":{"position":[[894,10]]}}}],["unlik",{"_index":559,"t":{"36":{"position":[[1806,6]]}}}],["up",{"_index":165,"t":{"12":{"position":[[652,3]]},"16":{"position":[[1001,2]]},"18":{"position":[[608,2]]},"32":{"position":[[186,2],[509,2]]}}}],["updat",{"_index":222,"t":{"14":{"position":[[1085,6],[1136,8]]}}}],["upgrad",{"_index":655,"t":{"44":{"position":[[192,7]]}}}],["upon",{"_index":21,"t":{"2":{"position":[[274,4]]}}}],["us",{"_index":89,"t":{"2":{"position":[[1520,3]]},"8":{"position":[[45,3]]},"10":{"position":[[86,3]]},"12":{"position":[[227,6],[530,5],[618,3]]},"14":{"position":[[331,4]]},"18":{"position":[[12,5],[263,3]]},"20":{"position":[[127,3]]},"22":{"position":[[123,4],[128,3],[565,3]]},"28":{"position":[[37,3]]},"30":{"position":[[472,3],[517,3]]},"32":{"position":[[58,3]]},"34":{"position":[[84,3]]},"36":{"position":[[86,3],[586,3]]},"40":{"position":[[9,5],[118,5],[172,5]]},"42":{"position":[[91,5]]},"44":{"position":[[99,5]]},"46":{"position":[[77,5]]}}}],["usag",{"_index":103,"t":{"6":{"position":[[20,5]]},"44":{"position":[[54,5]]}}}],["user",{"_index":146,"t":{"12":{"position":[[219,4]]},"18":{"position":[[1415,4]]}}}],["useresponsiveprop",{"_index":494,"t":{"30":{"position":[[525,17],[581,18]]}}}],["useresponsiveprop(color",{"_index":504,"t":{"30":{"position":[[1216,25]]}}}],["userestyl",{"_index":336,"t":{"22":{"position":[[573,10],[652,11]]},"44":{"position":[[67,10],[105,10]]},"46":{"position":[[95,10]]},"48":{"position":[[62,11]]},"50":{"position":[[62,11]]}}}],["userestyle(restylefunct",{"_index":350,"t":{"22":{"position":[[1197,28]]},"48":{"position":[[484,28]]},"50":{"position":[[537,28]]}}}],["usest",{"_index":564,"t":{"38":{"position":[[118,10]]}}}],["usestate(fals",{"_index":585,"t":{"38":{"position":[[1306,16]]}}}],["usethem",{"_index":112,"t":{"10":{"position":[[94,8]]},"30":{"position":[[600,9]]}}}],["usethemedisplay",{"_index":88,"t":{"2":{"position":[[1487,25]]}}}],["variant=\"body\">thi",{"_index":84,"t":{"2":{"position":[[1390,19]]}}}],["variant=\"buttonlabel",{"_index":512,"t":{"30":{"position":[[1469,21]]}}}],["variant=\"buttonlabel\">{label}headerwelcome(); const Text = createText(); const Card = createRestyleComponent< VariantProps & React.ComponentProps, Theme >([createVariant({themeKey: 'cardVariants'})], Box); const Welcome = () => { return ( Welcome This is a simple example Displaying how to use Restyle ); }; const App = () => { return ( ); };","s":"Getting started","u":"/restyle/","h":"","p":1},{"i":4,"t":"Add the package to your project: Yarn Npm Expo yarn add @shopify/restyle npm install @shopify/restyle npx expo install @shopify/restyle","s":"Installation","u":"/restyle/","h":"#installation","p":1},{"i":6,"t":"Read more about the usage of Restyle here.","s":"Usage","u":"/restyle/","h":"#usage","p":1},{"i":8,"t":"The fixture is an example app showing how to use the library.","s":"Playground","u":"/restyle/","h":"#playground","p":1},{"i":10,"t":"If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook: const Component = () => { const theme = useTheme(); const {cardPrimaryBackground} = theme.colors; // ... }; By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a dark mode switch in your app.","s":"Accessing the theme","u":"/restyle/fundamentals/accessing-the-theme","h":"","p":9},{"i":12,"t":"This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme. Box​ // In Box.tsx import {createBox} from '@shopify/restyle'; import {Theme} from './theme'; const Box = createBox(); export default Box; The Box component comes with the following Restyle functions: backgroundColor, opacity, visible, layout, spacing, border, shadow, position. Text​ // In Text.tsx import {createText} from '@shopify/restyle'; import {Theme} from './theme'; const Text = createText(); export default Text; The Text component comes with the following Restyle functions: color, textDecorationColor, opacity, visible, typography, textShadow, spacing, layout. It also includes a variant that picks up styles under the textVariants key in your theme: // In your theme const theme = createTheme({ ..., textVariants: { header: { fontFamily: 'ShopifySans-Bold', fontWeight: 'bold', fontSize: 34, lineHeight: 42.5, color: 'black', }, subheader: { fontFamily: 'ShopifySans-SemiBold', fontWeight: '600', fontSize: 28, lineHeight: 36, color: 'black', }, body: { fontFamily: 'ShopifySans', fontSize: 16, lineHeight: 24, color: 'black', }, }, }); // In a component Header","s":"Predefined components","u":"/restyle/fundamentals/components/predefined-components","h":"","p":11},{"i":14,"t":"If you want to create your own component similar to Box or Text, but decide yourself which predefined Restyle functions to use, use the createRestyleComponent helper: import { createRestyleComponent, createVariant, spacing, SpacingProps, VariantProps, } from '@shopify/restyle'; import {Theme} from './theme'; type Props = SpacingProps & VariantProps; const Card = createRestyleComponent([ spacing, createVariant({themeKey: 'cardVariants'}), ]); export default Card; For more advanced components, you may want to instead use the useRestyle hook: import {TouchableOpacity, View} from 'react-native'; import { useRestyle, spacing, border, backgroundColor, SpacingProps, BorderProps, BackgroundColorProps, composeRestyleFunctions, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; type RestyleProps = SpacingProps & BorderProps & BackgroundColorProps; const restyleFunctions = composeRestyleFunctions([ spacing, border, backgroundColor, ]); type Props = RestyleProps & { onPress: () => void; label: string; }; const Button = ({onPress, label, ...rest}: Props) => { const props = useRestyle(restyleFunctions, rest); return ( {label} ); };","s":"Custom components","u":"/restyle/fundamentals/components/custom-components","h":"","p":13},{"i":16,"t":"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette. This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example: const palette = { purpleLight: '#8C6FF7', purplePrimary: '#5A31F4', purpleDark: '#3F22AB', greenLight: '#56DCBA', greenPrimary: '#0ECD9D', greenDark: '#0A906E', black: '#0B0B0B', white: '#F0F2F3', }; const theme = createTheme({ colors: { mainBackground: palette.white, mainForeground: palette.black, cardPrimaryBackground: palette.purplePrimary, buttonPrimaryBackground: palette.purplePrimary, }, }); Taking the time to define these semantic meanings comes with a number of benefits: It's easy to understand where and in what context colors are applied throughout the app If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to purplePrimary throughout the app. Even though cardPrimaryBackground and buttonPrimaryBackground point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change. A theme can easily be swapped at runtime.","s":"Colors","u":"/restyle/fundamentals/colors","h":"","p":15},{"i":18,"t":"Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary. ","s":"Overriding styles","u":"/restyle/fundamentals/overriding-styles","h":"","p":17},{"i":20,"t":"Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor=\"cardPrimary\" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor. Below is an example of how a basic theme could look. Make sure to read the other sections in Fundamentals for more details on how to set up your different theme values. import {createTheme} from '@shopify/restyle'; const palette = { purpleLight: '#8C6FF7', purplePrimary: '#5A31F4', purpleDark: '#3F22AB', greenLight: '#56DCBA', greenPrimary: '#0ECD9D', greenDark: '#0A906E', black: '#0B0B0B', white: '#F0F2F3', }; const theme = createTheme({ colors: { mainBackground: palette.white, cardPrimaryBackground: palette.purplePrimary, }, spacing: { s: 8, m: 16, l: 24, xl: 40, }, textVariants: { header: { fontWeight: 'bold', fontSize: 34, }, body: { fontSize: 16, lineHeight: 24, }, defaults: { // We can define a default text variant here. }, }, }); export type Theme = typeof theme; export default theme; Note: createTheme doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the { [key:string]: any } in BaseTheme This theme should be passed to a ThemeProvider at the top of your React tree: import {ThemeProvider} from '@shopify/restyle'; import theme from './theme'; const App = () => ( {/* Rest of the app */} );","s":"Defining your theme","u":"/restyle/fundamentals/defining-your-theme","h":"","p":19},{"i":22,"t":"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme: // In your theme const theme = createTheme({ // ... breakpoints: { phone: 0, tablet: 768, } }) // Props always accept either plain values // Or breakpoint-specific values If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the useResponsiveProp hook: import { ColorProps, createBox, useResponsiveProp, useTheme, } from '@shopify/restyle'; import React from 'react'; import { ActivityIndicator, TouchableOpacity, TouchableOpacityProps, } from 'react-native'; import Text from './Text'; import {Theme} from './theme'; const BaseButton = createBox(TouchableOpacity); type Props = React.ComponentProps & ColorProps & { label: string; isLoading?: boolean; }; const Button = ({ label, isLoading, color = {phone: 'purple', tablet: 'blue'}, ...props }: Props) => { const theme = useTheme(); // Will be 'purple' on phone and 'blue' on tablet const textColorProp = useResponsiveProp(color); // Can safely perform logic with the extracted value const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue'; return ( {label} {isLoading ? ( ) : null} ); };","s":"Responsive values","u":"/restyle/fundamentals/responsive-values","h":"","p":21},{"i":24,"t":"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.","s":"Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"","p":23},{"i":26,"t":"The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name. Restyle Function Props Theme Key backgroundColor backgroundColor [bg] colors color color colors opacity opacity none visible display (maps true / false to flex / none) none spacing margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG] spacing layout width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap none position position, top, right, bottom, left, start, end none position zIndex zIndices border borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth none border borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor colors border borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius borderRadii shadow shadowOpacity, shadowOffset, shadowRadius, elevation none shadow shadowColor colors textShadow textShadowOffset, textShadowRadius none textShadow textShadowColor colors typography fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection none","s":"Predefined Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#predefined-restyle-functions","p":23},{"i":28,"t":"To define your own Restyle function, use the createRestyleFunction helper: import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle' const transparency = createRestyleFunction({ property: 'transparency', styleProperty: 'opacity', transform: ({value}: {value: number}) => 1 - value, }); const TransparentComponent = createRestyleComponent([transparency]) Arguments: property: The name of the component prop that the function will receive the value of. styleProperty: The name of the property in the style object to map to. Defaults to the value of property. transform({value, theme, themeKey}): An optional function that transforms the value of the prop to the value that will be inserted into the style object. themeKey: An optional key in the theme to map values from, e.g. colors.","s":"Custom Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#custom-restyle-functions","p":23},{"i":30,"t":"Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes): const theme = createTheme({ spacing: { s: 8, m: 16, l: 24, xl: 40, }, });","s":"Spacing","u":"/restyle/fundamentals/spacing","h":"","p":29},{"i":32,"t":"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height: const theme = createTheme({ breakpoints: { phone: 0, longPhone: { width: 0, height: 812, }, tablet: 768, largeTablet: 1024, }, }); See the Responsive Values section to see how these can be used. Defining breakpoints is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur.","s":"Breakpoints","u":"/restyle/fundamentals/breakpoints","h":"","p":31},{"i":34,"t":"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme. // In theme const theme = createTheme({ // ... spacing: { s: 8, m: 16, l: 24, }, colors: { cardPrimaryBackground: '#EEEEEE', }, breakpoints: { phone: 0, tablet: 768, }, cardVariants: { defaults: { // We can define defaults for the variant here. // This will be applied after the defaults passed to createVariant and before the variant defined below. }, regular: { // We can refer to other values in the theme here, and use responsive props padding: { phone: 's', tablet: 'm', }, }, elevated: { padding: { phone: 's', tablet: 'm', }, shadowColor: '#000', shadowOpacity: 0.2, shadowOffset: {width: 0, height: 5}, shadowRadius: 15, elevation: 5, } } }) import {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle' import {Theme} from './theme'; const variant = createVariant({ themeKey: 'cardVariants', defaults: { margin: { phone: 's', tablet: 'm', }, backgroundColor: 'cardPrimaryBackground', }, }) const Card = createRestyleComponent< VariantProps & BoxProps, Theme, >([variant], Box) // createVariant and createRestyleComponent are often combined into a single // call, which improves the type hinting as well: const Card = createRestyleComponent< VariantProps & React.ComponentProps, Theme >( [ createVariant({ themeKey: 'cardVariants', defaults: { margin: { phone: 's', tablet: 'm', }, backgroundColor: 'cardPrimaryBackground', }, }), ], Box, ); Arguments: property: The name of the component prop that will map to a variant. Defaults to variant. themeKey: A key in the theme to map values from. Unlike createRestyleFunction, this option is required to create a variant. defaults: The default values to apply before applying anything from the values in the theme.","s":"Variants","u":"/restyle/fundamentals/variants","h":"","p":33},{"i":36,"t":"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below: First, run yarn up to install all the Restyle and fixture app dependencies. Next, run yarn start to start Metro. Lastly, run yarn run-ios to start the app on iOS, and yarn run-android to start the app on Android. Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's Setting up the development environment.","s":"Running the fixture app","u":"/restyle/guides/fixture-app","h":"","p":35},{"i":38,"t":"When making changes to Restyle (the code in /src), you'll need to run yarn build to use the latest Restyle build in the fixture app.","s":"Making changes to Restyle","u":"/restyle/guides/fixture-app","h":"#making-changes-to-restyle","p":35},{"i":40,"t":"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it: import React, {useState} from 'react'; import {Switch} from 'react-native'; import { ThemeProvider, createBox, createText, createTheme, } from '@shopify/restyle'; export const palette = { purple: '#5A31F4', white: '#FFF', black: '#111', darkGray: '#333', lightGray: '#EEE', }; const theme = createTheme({ spacing: { s: 8, m: 16, }, colors: { mainBackground: palette.lightGray, mainForeground: palette.black, primaryCardBackground: palette.purple, secondaryCardBackground: palette.white, primaryCardText: palette.white, secondaryCardText: palette.black, }, textVariants: { defaults: {}, body: { fontSize: 16, lineHeight: 24, color: 'mainForeground', }, }, cardVariants: { defaults: {}, primary: { backgroundColor: 'primaryCardBackground', shadowOpacity: 0.3, }, secondary: { backgroundColor: 'secondaryCardBackground', shadowOpacity: 0.1, }, }, }); type Theme = typeof theme; const darkTheme: Theme = { ...theme, colors: { ...theme.colors, mainBackground: palette.black, mainForeground: palette.white, secondaryCardBackground: palette.darkGray, secondaryCardText: palette.white, }, }; const Box = createBox(); const Text = createText(); const App = () => { const [darkMode, setDarkMode] = useState(false); return ( Primary Card Secondary Card setDarkMode(value)} /> ); }; export default App;","s":"Implementing dark mode","u":"/restyle/guides/dark-mode","h":"","p":39},{"i":42,"t":"To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here. Installation​ Using npm: npm install @shopify/polaris-tokens --save Using yarn: yarn add @shopify/polaris-tokens Define Your Theme​ // In theme import tokens from '@shopify/polaris-tokens'; import {createTheme} from '@shopify/restyle'; const pxToNumber = (px: string) => { return parseInt(px.replace('px', ''), 10); }; const theme = createTheme({ colors: { body: tokens.colorBlack, backgroundRegular: tokens.colorWhite, backgroundSubdued: tokens.colorSkyLighter, foregroundRegular: tokens.colorBlack, foregroundOff: tokens.colorInkLight, foregroundSubdued: tokens.colorInkLightest, foregroundContrasting: tokens.colorWhite, foregroundSuccess: tokens.colorGreenDark, highlightPrimary: tokens.colorIndigo, highlightPrimaryDisabled: tokens.colorIndigoLight, buttonBackgroundPlain: tokens.colorSky, errorPrimary: tokens.colorRed, iconBackgroundDark: tokens.colorBlueDarker, }, spacing: { none: tokens.spacingNone, xxs: pxToNumber(tokens.spacingExtraTight), xs: pxToNumber(tokens.spacingTight), s: pxToNumber(tokens.spacingBaseTight), m: pxToNumber(tokens.spacingBase), l: pxToNumber(tokens.spacingLoose), xl: pxToNumber(tokens.spacingExtraLoose), xxl: 2 * pxToNumber(tokens.spacingExtraLoose), }, }); export type Theme = typeof theme; export default theme; Now you can easily style your components with Shopify Polaris.","s":"Getting Setup With the Shopify Design System","u":"/restyle/guides/shopify-design-system","h":"","p":41},{"i":44,"t":"v2 of this library introduces breaking changes in the usage of the useRestyle hook. If you are not using useRestyle in your project, then you don't need to address any breaking change and can upgrade the library right away.","s":"Migrating to Restyle V2","u":"/restyle/guides/migrating-to-v2","h":"","p":43},{"i":46,"t":"Import composeRestyleFunctions from @shopify/restyle Wrap the array you were using as param of useRestyle with composeRestyleFunctions Done","s":"Addressing breaking changes in useRestyle","u":"/restyle/guides/migrating-to-v2","h":"#addressing-breaking-changes-in-userestyle","p":43},{"i":48,"t":"import {TouchableOpacity, View} from 'react-native'; import { useRestyle, spacing, border, backgroundColor, SpacingProps, BorderProps, BackgroundColorProps, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; const restyleFunctions = [spacing, border, backgroundColor]; type Props = SpacingProps & BorderProps & BackgroundColorProps & { onPress: () => void; }; const Button = ({onPress, label, ...rest}: Props) => { const props = useRestyle(restyleFunctions, rest); return ( {label} ); };","s":"Before","u":"/restyle/guides/migrating-to-v2","h":"#before","p":43},{"i":50,"t":"import {TouchableOpacity, View} from 'react-native'; import { useRestyle, spacing, border, backgroundColor, SpacingProps, BorderProps, BackgroundColorProps, composeRestyleFunctions, } from '@shopify/restyle'; import Text from './Text'; import {Theme} from './theme'; const restyleFunctions = composeRestyleFunctions([ spacing, border, backgroundColor, ]); type Props = SpacingProps & BorderProps & BackgroundColorProps & { onPress: () => void; }; const Button = ({onPress, label, ...rest}: Props) => { const props = useRestyle(restyleFunctions, rest); return ( {label} ); };","s":"After","u":"/restyle/guides/migrating-to-v2","h":"#after","p":43}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,3.133,1,2.139,2,0.659,3,4.231,4,2.139,5,0.653,6,1.972,7,1.756,8,0.612,9,1.756,10,3.133,11,0.912,12,0.755,13,0.932,14,1.756,15,1.756,16,2.139,17,2.139,18,2.139,19,2.139,20,3.191,21,2.139,22,1.756,23,2.139,24,1.251,25,1.504,26,0.68,27,0.612,28,2.139,29,2.139,30,2.139,31,2.139,32,1.756,33,2.139,34,0.838,35,2.139,36,2.139,37,1.756,38,2.139,39,2.139,40,0.755,41,2.139,42,1.756,43,2.139,44,0.838,45,1.315,46,1.756,47,0.733,48,0.808,49,2.683,50,1.315,51,1.504,52,1.962,53,1.504,54,1.504,55,0.491,56,1.315,57,1.504,58,1.756,59,1.756,60,0.821,61,2.143,62,1.315,63,1.658,64,1.504,65,2.464,66,1.504,67,1.962,68,1.504,69,1.756,70,3.191,71,1.391,72,1.756,73,1.756,74,2.139,75,2.139,76,2.139,77,1.756,78,1.315,79,1.756,80,1.315,81,1.756,82,2.243,83,2.139,84,2.139,85,1.756,86,2.139,87,2.139,88,2.139,89,0.297,90,2.139,91,0.838,92,1.756]],["t/4",[55,1.25,93,4.186,94,4.294,95,3.019,96,3.136,97,4.186,98,5.099,99,3.585,100,4.294]],["t/6",[5,0.951,101,3.815,102,3.267,103,3.815,104,2.531]],["t/8",[6,2.01,44,1.808,89,0.64,91,1.808,105,3.243,106,4.613]],["t/10",[2,0.73,5,0.724,11,1.294,44,1.387,47,0.813,48,0.802,60,0.905,89,0.491,91,1.387,107,1.926,108,3.538,109,3.538,110,2.904,111,2.175,112,2.904,113,2.175,114,2.904,115,2.175,116,2.904,117,2.904,118,2.175,119,2.904,120,1.387,121,2.904,122,2.904,123,2.904,124,3.538,125,3.538,126,2.904,127,2.904,128,2.904,129,2.904,130,2.904]],["t/12",[2,0.731,5,0.657,6,0.939,7,1.768,8,0.917,11,1.298,26,1.349,27,0.917,34,0.844,40,0.76,44,0.844,47,0.975,48,0.783,50,1.324,51,1.514,55,0.737,58,1.768,60,0.695,61,1.978,62,1.324,63,1.865,64,1.514,111,1.324,117,1.768,118,1.324,120,0.844,131,2.984,132,1.514,133,2.063,134,2.154,135,2.154,136,2.154,137,2.154,138,1.514,139,1.768,140,2.154,141,1.514,142,0.76,143,1.173,144,2.154,145,2.154,146,1.514,147,2.154,148,1.768,149,2.154,150,1.746,151,1.398,152,2.255,153,0.76,154,2.255,155,2.633,156,2.633,157,1.173,158,1.768,159,1.768,160,2.154,161,1.768,162,1.768,163,1.768,164,1.768,165,1.514,166,2.154,167,1.324,168,2.255,169,1.324,170,0.76,171,1.768,172,3.146,173,3.832,174,2.633,175,2.255,176,2.356,177,1.768,178,2.356,179,2.154,180,2.356,181,2.154,182,2.154,183,2.154,184,2.154,185,2.154,186,1.324,187,1.173,188,1.173,189,2.154]],["t/14",[2,0.656,5,0.486,8,1.16,11,0.986,12,0.839,13,1.035,27,1.273,45,2.494,47,1.132,48,0.819,52,2.119,53,1.67,54,1.67,55,0.792,60,0.807,61,1.035,63,1.744,65,1.877,66,1.67,67,2.119,69,1.951,71,1.035,89,0.563,102,1.67,111,1.461,113,1.461,118,1.461,132,1.67,133,1.155,142,1.668,150,1.294,151,1.035,153,1.217,157,1.877,190,2.83,191,2.376,192,1.951,193,2.376,194,1.951,195,2.423,196,2.423,197,2.376,198,2.376,199,1.877,200,2.494,201,1.67,202,1.67,203,1.67,204,4.056,205,1.67,206,1.67,207,1.67,208,2.376,209,2.423,210,1.67,211,2.119,212,1.67,213,1.294,214,2.119,215,1.67,216,1.67,217,1.67]],["t/16",[2,0.618,10,1.951,15,1.951,22,1.951,24,0.931,26,1.655,40,0.839,44,1.59,48,0.706,56,2.119,60,0.625,65,1.294,89,0.33,91,1.351,115,2.119,118,2.736,119,1.951,120,0.931,121,1.951,122,1.951,123,1.951,126,1.951,131,1.67,138,1.67,146,1.67,164,2.83,170,0.839,180,1.461,192,1.951,213,1.294,218,2.376,219,2.376,220,2.376,221,3.464,222,2.119,223,2.376,224,2.376,225,3.447,226,1.951,227,2.376,228,1.502,229,2.376,230,4.056,231,2.83,232,1.951,233,1.951,234,2.83,235,1.67,236,1.951,237,1.951,238,1.951,239,1.951,240,1.951,241,1.951,242,1.951,243,1.951,244,1.951,245,1.67,246,1.951,247,1.67,248,1.67,249,1.951,250,1.951,251,2.83,252,3.447,253,2.376,254,2.376,255,2.376,256,2.376,257,2.376,258,1.461,259,3.447,260,2.494,261,1.461,262,2.423,263,1.951,264,3.447,265,3.447,266,1.951,267,2.376,268,2.376,269,1.951,270,2.376,271,2.376,272,2.376,273,2.376,274,1.951]],["t/18",[5,0.85,11,1.187,34,2.101,48,0.694,61,1.809,82,2.918,89,0.576,153,1.465,231,3.408,258,2.553,275,2.918,276,3.408,277,2.26,278,4.151,279,4.151,280,4.151,281,3.408,282,4.151]],["t/20",[2,0.753,5,0.403,6,0.858,8,0.857,9,2.462,11,0.563,12,0.695,14,1.617,24,1.175,25,2.108,26,1.388,27,0.857,32,1.617,40,1.541,44,1.175,46,1.617,47,0.834,48,0.803,49,2.853,55,0.689,57,1.385,59,1.617,60,0.658,63,0.772,89,0.416,91,1.175,92,1.617,95,1.385,101,1.617,102,2.108,104,1.073,115,1.211,120,0.772,138,1.385,141,1.385,148,1.617,150,1.633,151,1.582,153,0.695,165,1.385,167,1.211,168,1.385,170,1.281,171,1.617,174,1.617,175,1.385,176,1.844,177,1.617,178,1.211,180,1.211,186,1.211,187,1.633,188,1.633,214,1.211,221,1.385,228,0.858,232,1.617,233,1.617,234,1.617,235,1.385,236,1.617,237,1.617,238,1.617,239,1.617,240,1.617,241,1.617,242,1.617,243,1.617,244,1.617,245,1.385,246,1.617,247,1.385,248,1.385,251,1.617,261,1.211,269,1.617,275,1.385,277,1.073,283,1.97,284,1.617,285,1.211,286,1.97,287,1.97,288,1.97,289,1.97,290,1.97,291,1.97,292,1.385,293,1.97,294,1.97,295,1.97,296,1.617,297,1.073,298,1.211,299,0.957,300,1.211,301,1.385,302,1.617,303,1.385,304,1.97,305,1.97,306,1.617,307,1.97,308,2.999,309,1.97,310,1.617,311,1.617,312,1.617,313,1.97,314,1.97,315,1.617,316,1.97,317,1.385,318,1.617,319,1.97]],["t/22",[2,0.646,5,0.415,8,0.58,11,0.876,12,1.304,13,0.884,24,0.795,26,0.644,34,0.795,40,1.561,47,1.016,48,0.831,50,1.247,55,0.466,60,0.843,61,1.336,62,1.247,63,1.614,68,1.425,71,0.884,78,2.272,79,1.665,80,2.532,81,1.665,89,0.425,107,1.104,110,1.665,112,1.665,113,1.247,114,1.665,120,0.795,142,1.705,170,0.716,200,1.247,211,2.272,212,1.425,213,1.104,261,1.247,262,2.598,263,2.516,275,2.155,285,2.272,311,1.665,320,2.028,321,1.247,322,2.028,323,1.665,324,1.425,325,1.425,326,1.425,327,1.665,328,2.028,329,3.065,330,2.028,331,3.065,332,1.247,333,2.028,334,3.065,335,2.028,336,3.065,337,2.028,338,4.119,339,2.028,340,2.028,341,3.695,342,1.665,343,3.065,344,2.028,345,2.028,346,1.665,347,2.028,348,2.028,349,2.028,350,2.028,351,2.028,352,2.028,353,2.028,354,2.028,355,2.028,356,2.028]],["t/24",[2,0.565,5,1.011,11,1.164,12,1.436,13,1.774,34,1.595,40,1.876,120,1.595,133,1.978,142,1.743,143,2.689,284,3.341,315,3.341,317,2.861,332,2.502,357,4.07,358,4.07,359,4.07,360,4.07]],["t/26",[2,0.28,5,0.753,6,0.878,26,1.532,27,0.872,48,0.511,77,1.654,131,1.416,132,1.416,133,1.482,142,1.076,143,1.097,153,1.076,154,2.144,155,1.654,156,1.654,157,2.004,158,2.504,159,3.021,161,1.654,162,1.654,163,2.504,169,1.239,172,1.654,175,1.416,176,1.239,178,1.239,222,1.239,228,0.878,277,1.097,299,0.979,318,1.654,361,2.014,362,2.014,363,2.014,364,2.014,365,2.014,366,2.014,367,2.014,368,4.172,369,2.014,370,2.014,371,2.014,372,3.05,373,1.654,374,2.014,375,2.014,376,2.014,377,2.014,378,2.014,379,2.014,380,2.014,381,2.014,382,2.014,383,2.014,384,2.014,385,2.014,386,2.014,387,2.014,388,1.654,389,2.014,390,2.014,391,2.014,392,2.014,393,2.014,394,2.014,395,2.014,396,2.014,397,2.014,398,2.014,399,2.014,400,2.014,401,2.014,402,2.014,403,1.654,404,2.014,405,2.014,406,2.014,407,2.014,408,2.014,409,2.014,410,2.014,411,2.014,412,1.416,413,1.416,414,2.014,415,2.014,416,2.014,417,2.014,418,2.014,419,2.014,420,2.014,421,2.014,422,2.014,423,2.014,424,2.014,425,2.014,426,2.014,427,2.014,428,1.654,429,2.014,430,2.014,431,1.416,432,2.014,433,2.014,434,2.014,435,2.014,436,2.014,437,2.014,438,2.014,439,2.014,440,2.014,441,2.014,442,2.014,443,2.014,444,2.014,445,2.014,446,2.014,447,2.014,448,2.014,449,2.014,450,2.014,451,2.014,452,2.014,453,2.014,454,2.014,455,2.014,456,2.014,457,2.014,458,2.014,459,2.014,460,1.416,461,1.654,462,1.654,463,1.654,464,1.654,465,2.014,466,2.014,467,2.014,468,2.014,469,2.014,470,2.014,471,2.014,472,2.014,473,2.014,474,2.014,475,2.014,476,2.014,477,2.014,478,2.014]],["t/28",[2,0.579,5,0.64,11,0.895,24,1.226,26,0.994,34,1.637,40,1.968,47,0.719,48,0.725,52,1.924,55,0.719,60,0.757,89,0.434,120,1.637,133,2.284,142,1.474,143,2.274,151,1.363,154,2.199,169,1.924,194,2.568,222,1.924,228,1.82,261,1.924,277,2.731,321,2.567,479,3.858,480,4.176,481,4.176,482,4.176,483,3.129,484,4.176,485,3.129,486,3.129,487,2.568,488,3.129,489,3.129,490,3.428,491,3.129]],["t/30",[2,0.511,27,1.454,44,1.444,48,0.741,60,0.668,89,0.511,146,2.59,152,2.59,170,1.3,187,2.006,188,2.006,222,2.855,228,1.606,297,2.006,298,2.855,299,1.79,300,2.265,301,2.59,302,3.025,324,3.264,492,3.684,493,3.025,494,3.684,495,3.684,496,3.684,497,3.684,498,3.684,499,3.684,500,3.684,501,3.684,502,3.684,503,3.684]],["t/32",[2,0.409,8,0.844,24,1.919,34,1.156,40,1.61,42,2.422,48,0.75,56,2.468,57,2.074,60,0.535,78,1.814,80,1.814,89,0.633,120,1.156,139,3.295,167,1.814,170,1.041,190,2.422,228,1.286,258,1.814,285,3.149,296,3.295,310,2.422,321,1.814,323,2.422,324,2.074,325,2.822,326,2.074,332,2.468,346,2.422,412,3.442,413,2.822,504,2.951,505,2.951,506,2.951,507,2.951,508,2.422,509,2.951,510,2.422,511,2.951,512,2.951,513,2.951,514,2.951,515,2.951,516,2.951,517,2.951,518,2.951,519,2.951,520,2.951,521,2.422,522,2.951,523,2.951,524,2.951,525,2.951,526,2.951,527,2.951]],["t/34",[2,0.695,5,0.567,8,0.509,11,0.509,24,1.086,26,0.565,27,0.509,40,1.357,47,0.637,48,0.827,52,2.364,53,2.703,54,1.25,55,0.409,60,0.697,61,1.484,65,1.854,66,1.948,67,2.715,68,1.25,78,2.563,80,2.563,89,0.385,104,1.509,107,0.968,111,1.094,115,2.094,133,1.347,142,1.357,143,2.094,151,2.078,153,0.978,165,3.444,169,1.704,170,0.628,187,0.968,188,0.968,228,0.775,258,2.094,266,1.46,276,1.46,277,0.968,285,1.094,292,1.25,297,2.27,298,1.094,299,2.025,300,1.094,306,1.46,317,1.25,321,1.094,325,1.948,326,1.25,327,1.46,332,1.094,373,2.275,388,2.275,412,1.25,413,1.25,460,1.25,461,1.46,462,1.46,463,2.275,464,1.46,479,1.46,487,1.46,490,2.796,493,1.46,510,1.46,528,1.778,529,1.778,530,2.771,531,1.778,532,1.778,533,2.771,534,1.778,535,1.778,536,1.778,537,1.778,538,1.778,539,1.778,540,1.778,541,1.778,542,1.778,543,1.778,544,1.778]],["t/36",[5,0.881,6,1.428,12,1.157,25,2.304,37,2.69,89,0.455,91,2.002,96,3.14,99,2.304,105,3.027,152,3.027,167,2.647,260,2.015,292,2.304,431,3.59,508,2.69,545,3.277,546,3.277,547,3.277,548,3.277,549,3.277,550,3.277,551,4.47,552,3.277,553,3.277,554,3.277,555,3.277,556,3.277,557,3.277,558,4.809,559,4.809,560,3.277,561,3.277,562,3.277,563,3.277,564,3.277,565,3.277,566,3.277,567,3.277]],["t/38",[0,4.186,5,1.044,89,0.596,91,1.683,96,2.641,105,3.019,107,2.338,141,3.019,260,2.641,551,3.525,568,4.294,569,4.294,570,4.294,571,4.294]],["t/40",[2,0.628,8,0.541,12,1.25,13,0.825,26,1.126,27,0.541,44,0.742,47,0.814,48,0.828,49,2.489,50,1.163,51,1.33,55,0.435,60,0.855,61,2.175,62,1.163,63,1.681,64,1.33,65,1.583,67,1.163,71,0.825,72,1.553,73,1.553,82,2.044,85,1.553,91,1.388,104,1.03,116,1.553,127,1.553,128,1.553,129,1.553,130,2.387,150,1.583,151,1.543,153,1.026,168,1.33,170,1.026,176,1.163,178,1.163,180,1.163,186,1.163,187,1.583,188,1.03,221,1.33,235,1.33,245,1.33,247,2.044,248,2.794,249,2.907,250,2.907,262,1.33,281,2.907,297,1.03,298,1.163,299,0.919,303,1.33,342,1.553,460,2.044,572,1.892,573,1.892,574,1.892,575,1.892,576,1.892,577,1.892,578,1.892,579,1.892,580,1.892,581,1.892,582,1.892,583,2.907,584,1.892,585,3.541,586,1.892,587,2.907,588,2.907,589,1.892,590,2.907,591,1.892,592,2.907,593,1.892,594,1.892,595,1.892,596,1.892,597,1.892,598,1.892,599,2.907,600,2.907,601,1.892,602,1.892,603,1.892,604,1.892,605,1.892,606,1.892,607,1.892]],["t/42",[2,0.698,8,0.721,11,0.721,24,0.988,26,0.801,27,0.721,34,1.41,47,0.826,48,0.787,55,0.579,56,1.55,60,0.652,71,1.098,89,0.582,93,2.069,96,2.211,97,2.952,99,2.528,104,1.372,150,1.958,151,1.098,170,1.269,186,1.55,212,1.772,226,2.952,274,2.069,297,1.372,299,1.225,300,1.55,301,1.772,303,1.772,368,2.069,403,2.069,431,1.772,521,2.069,608,3.596,609,2.52,610,2.52,611,5.027,612,4.193,613,2.52,614,2.52,615,2.52,616,3.596,617,2.52,618,3.596,619,2.52,620,2.52,621,2.52,622,2.52,623,2.52,624,2.52,625,2.52,626,2.52,627,2.52,628,2.52,629,2.52,630,2.52,631,2.52,632,2.52,633,2.52,634,2.52,635,2.52,636,2.52,637,2.52,638,2.52,639,2.52,640,2.52,641,2.52,642,2.52,643,2.52,644,2.52,645,2.52,646,2.52,647,3.596,648,2.52,649,2.52,650,2.52]],["t/44",[6,2.187,89,0.58,95,2.938,103,3.431,107,2.276,113,2.57,199,2.732,260,3.085,312,3.431,428,3.431,651,4.179,652,4.179,653,5.017,654,4.179,655,4.179,656,4.179]],["t/46",[47,1.029,55,1.029,89,0.622,199,2.439,203,3.675,657,4.48,658,4.48,659,4.48,660,4.48]],["t/48",[2,0.581,8,0.899,12,1.11,13,1.37,27,1.198,45,2.897,47,1.154,48,0.825,55,0.722,60,0.854,63,1.847,71,1.37,142,1.773,153,1.479,157,2.281,195,2.21,196,2.21,199,1.712,200,2.897,201,2.21,202,2.21,205,2.21,206,2.21,207,2.21,209,2.945,210,2.21,211,1.933,213,1.712,214,2.576,215,2.21,216,2.21,217,2.21]],["t/50",[2,0.576,8,0.886,12,1.093,13,1.35,27,1.186,45,2.875,47,1.148,48,0.826,55,0.712,60,0.848,63,1.833,71,1.35,142,1.763,153,1.464,157,2.259,195,2.177,196,2.177,199,1.687,200,2.875,201,2.177,202,2.177,203,2.916,205,2.177,206,2.177,207,2.177,209,2.916,210,2.177,211,1.905,213,1.687,214,2.55,215,2.177,216,2.177,217,2.177]]],"invertedIndex":[["",{"_index":48,"t":{"2":{"position":[[670,1],[763,1],[790,2],[900,1],[933,1],[967,1],[1029,1],[1138,1],[1140,2],[1143,2],[1146,1],[1155,1],[1247,1],[1341,2],[1344,1],[1561,2],[1564,2],[1577,1],[1579,2],[1582,2],[1585,1],[1594,1],[1635,2],[1655,2],[1658,2]]},"10":{"position":[[125,1],[127,2],[130,2],[133,1],[147,1],[198,1],[214,2],[217,3],[221,2]]},"12":{"position":[[380,2],[479,1],[667,2],[769,1],[1053,2],[1082,1],[1098,4],[1117,1],[1127,1],[1229,2],[1243,1],[1346,2],[1355,1],[1430,2],[1433,2],[1436,3],[1440,2]]},"14":{"position":[[174,1],[252,1],[321,1],[343,1],[393,1],[486,3],[650,1],[772,1],[875,1],[897,1],[918,1],[972,1],[1055,3],[1070,1],[1085,1],[1087,1],[1098,2],[1101,2],[1125,2],[1141,1],[1178,2],[1181,1],[1195,1],[1240,1],[1368,2],[1371,2]]},"16":{"position":[[411,1],[413,1],[594,2],[609,1],[633,1],[791,2],[794,3]]},"18":{"position":[[252,2],[255,2]]},"20":{"position":[[700,1],[702,1],[883,2],[898,1],[922,1],[1001,2],[1013,1],[1043,2],[1060,1],[1070,1],[1106,2],[1115,1],[1147,2],[1160,1],[1162,2],[1208,2],[1211,2],[1214,3],[1236,1],[1517,1],[1537,1],[1717,1],[1719,2],[1722,2],[1725,1],[1796,2]]},"22":{"position":[[131,2],[160,1],[176,2],[179,3],[196,1],[221,1],[223,2],[226,2],[294,2],[297,2],[384,2],[556,1],[610,1],[671,1],[733,1],[831,1],[903,1],[945,1],[965,1],[967,1],[1005,2],[1021,1],[1023,2],[1050,1],[1096,2],[1106,2],[1109,1],[1123,1],[1144,2],[1214,1],[1242,2],[1309,1],[1325,3],[1338,1],[1354,1],[1376,1],[1461,1],[1533,1],[1535,1],[1592,2],[1595,1],[1597,1],[1619,2],[1622,2]]},"26":{"position":[[133,1],[319,1],[335,1]]},"28":{"position":[[173,1],[289,2],[303,3],[334,1],[416,2]]},"30":{"position":[[245,1],[270,1],[300,2],[303,3]]},"32":{"position":[[353,1],[382,1],[405,1],[430,2],[465,2],[468,3],[662,1]]},"34":{"position":[[167,2],[191,1],[207,2],[210,3],[223,1],[245,2],[256,1],[292,2],[308,1],[333,2],[350,1],[362,1],[364,2],[412,2],[517,2],[529,1],[531,2],[616,1],[643,2],[646,2],[659,1],[670,1],[697,2],[810,1],[812,1],[814,2],[947,1],[1024,1],[1034,1],[1061,2],[1106,2],[1109,2],[1123,1],[1185,1],[1254,2],[1257,2],[1334,2],[1395,1],[1457,1],[1499,2],[1502,1],[1556,1],[1566,1],[1593,2],[1638,2],[1641,3],[1645,2],[1653,2]]},"40":{"position":[[187,1],[240,1],[288,1],[290,1],[378,2],[393,1],[418,1],[433,2],[444,1],[657,2],[674,1],[686,3],[696,1],[753,2],[756,2],[773,1],[785,3],[798,1],[862,2],[876,1],[942,2],[945,2],[948,3],[963,1],[1002,1],[1004,1],[1024,1],[1182,2],[1185,2],[1198,1],[1231,1],[1264,1],[1266,2],[1269,2],[1272,1],[1304,1],[1330,1],[1363,1],[1375,1],[1526,1],[1685,1],[1842,2],[1865,2],[1899,2],[1902,2]]},"42":{"position":[[236,2],[357,1],[372,2],[375,1],[410,4],[420,2],[435,1],[459,1],[974,2],[986,1],[1254,1],[1294,2],[1297,3],[1319,1]]},"48":{"position":[[60,1],[157,1],[265,1],[314,1],[336,1],[357,1],[387,1],[389,1],[400,2],[403,2],[412,2],[428,1],[465,2],[468,1],[482,1],[527,1],[655,2],[658,2]]},"50":{"position":[[60,1],[182,1],[290,1],[352,3],[367,1],[389,1],[410,1],[440,1],[442,1],[453,2],[456,2],[465,2],[481,1],[518,2],[521,1],[535,1],[580,1],[708,2],[711,2]]}}}],["0",{"_index":325,"t":{"22":{"position":[[205,2]]},"32":{"position":[[391,2],[414,2]]},"34":{"position":[[317,2],[763,2]]}}}],["0.1",{"_index":591,"t":{"40":{"position":[[937,4]]}}}],["0.2",{"_index":532,"t":{"34":{"position":[[736,4]]}}}],["0.3",{"_index":589,"t":{"40":{"position":[[857,4]]}}}],["000",{"_index":531,"t":{"34":{"position":[[713,7]]}}}],["0a906",{"_index":243,"t":{"16":{"position":[[547,10]]},"20":{"position":[[836,10]]}}}],["0b0b0b",{"_index":244,"t":{"16":{"position":[[565,10]]},"20":{"position":[[854,10]]}}}],["0ecd9d",{"_index":241,"t":{"16":{"position":[[525,10]]},"20":{"position":[[814,10]]}}}],["1",{"_index":483,"t":{"28":{"position":[[292,1]]}}}],["10",{"_index":521,"t":{"32":{"position":[[659,2]]},"42":{"position":[[415,4]]}}}],["1024",{"_index":516,"t":{"32":{"position":[[459,5]]}}}],["111",{"_index":577,"t":{"40":{"position":[[333,7]]}}}],["15",{"_index":534,"t":{"34":{"position":[[792,3]]}}}],["16",{"_index":187,"t":{"12":{"position":[[1394,3]]},"20":{"position":[[1024,3],[1127,3]]},"30":{"position":[[281,3]]},"34":{"position":[[234,3]]},"40":{"position":[[429,3],[708,3]]}}}],["2",{"_index":649,"t":{"42":{"position":[[1252,1]]}}}],["24",{"_index":188,"t":{"12":{"position":[[1410,3]]},"20":{"position":[[1031,3],[1143,3]]},"30":{"position":[[288,3]]},"34":{"position":[[241,3]]},"40":{"position":[[724,3]]}}}],["28",{"_index":184,"t":{"12":{"position":[[1310,3]]}}}],["333",{"_index":579,"t":{"40":{"position":[[351,7]]}}}],["34",{"_index":177,"t":{"12":{"position":[[1191,3]]},"20":{"position":[[1102,3]]}}}],["36",{"_index":185,"t":{"12":{"position":[[1326,3]]}}}],["3f22ab",{"_index":237,"t":{"16":{"position":[[477,10]]},"20":{"position":[[766,10]]}}}],["40",{"_index":302,"t":{"20":{"position":[[1039,3]]},"30":{"position":[[296,3]]}}}],["42.5",{"_index":179,"t":{"12":{"position":[[1207,5]]}}}],["5",{"_index":533,"t":{"34":{"position":[[774,3],[807,2]]}}}],["56dcba",{"_index":239,"t":{"16":{"position":[[500,10]]},"20":{"position":[[789,10]]}}}],["5a31f4",{"_index":235,"t":{"16":{"position":[[454,10]]},"20":{"position":[[743,10]]},"40":{"position":[[300,10]]}}}],["600",{"_index":183,"t":{"12":{"position":[[1293,6]]}}}],["768",{"_index":326,"t":{"22":{"position":[[216,4]]},"32":{"position":[[441,4]]},"34":{"position":[[328,4]]}}}],["8",{"_index":298,"t":{"20":{"position":[[1018,2]]},"30":{"position":[[78,2],[275,2]]},"34":{"position":[[228,2]]},"40":{"position":[[423,2]]}}}],["812",{"_index":514,"t":{"32":{"position":[[425,4]]}}}],["8c6ff7",{"_index":233,"t":{"16":{"position":[[428,10]]},"20":{"position":[[717,10]]}}}],["abov",{"_index":270,"t":{"16":{"position":[[1298,6]]}}}],["accept",{"_index":275,"t":{"18":{"position":[[27,7]]},"20":{"position":[[366,6]]},"22":{"position":[[43,6],[242,6]]}}}],["access",{"_index":109,"t":{"10":{"position":[[24,6]]}}}],["acknowledg",{"_index":31,"t":{"2":{"position":[[411,12]]}}}],["action",{"_index":135,"t":{"12":{"position":[[92,6]]}}}],["activityind",{"_index":336,"t":{"22":{"position":[[673,18],[1537,18]]}}}],["add",{"_index":93,"t":{"4":{"position":[[0,3],[52,3]]},"42":{"position":[[189,3]]}}}],["address",{"_index":654,"t":{"44":{"position":[[156,7]]}}}],["advanc",{"_index":198,"t":{"14":{"position":[[520,8]]}}}],["alias",{"_index":364,"t":{"26":{"position":[[125,7]]}}}],["aligncont",{"_index":420,"t":{"26":{"position":[[816,13]]}}}],["alignitem",{"_index":421,"t":{"26":{"position":[[830,11]]}}}],["alignself",{"_index":422,"t":{"26":{"position":[[842,10]]}}}],["allow",{"_index":33,"t":{"2":{"position":[[470,8]]}}}],["alway",{"_index":327,"t":{"22":{"position":[[235,6]]},"34":{"position":[[133,6]]}}}],["android",{"_index":559,"t":{"36":{"position":[[346,7],[374,8],[412,7]]}}}],["anyth",{"_index":306,"t":{"20":{"position":[[1303,8]]},"34":{"position":[[1935,8]]}}}],["app",{"_index":91,"t":{"2":{"position":[[1573,3]]},"8":{"position":[[26,3]]},"10":{"position":[[391,4]]},"16":{"position":[[965,3],[1192,4]]},"20":{"position":[[1713,3],[1772,3]]},"36":{"position":[[12,3],[228,3],[321,3],[367,3]]},"38":{"position":[[128,4]]},"40":{"position":[[14,3],[1260,3],[1920,4]]}}}],["appli",{"_index":258,"t":{"16":{"position":[[942,7]]},"18":{"position":[[69,5]]},"32":{"position":[[105,5]]},"34":{"position":[[428,7],[1913,5],[1926,8]]}}}],["argument",{"_index":487,"t":{"28":{"position":[[419,10]]},"34":{"position":[[1656,10]]}}}],["array",{"_index":658,"t":{"46":{"position":[[62,5]]}}}],["aspectratio",{"_index":419,"t":{"26":{"position":[[803,12]]}}}],["asset",{"_index":609,"t":{"42":{"position":[[29,6]]}}}],["assign",{"_index":229,"t":{"16":{"position":[[339,6]]}}}],["assum",{"_index":19,"t":{"2":{"position":[[245,7]]}}}],["autocomplet",{"_index":289,"t":{"20":{"position":[[422,13]]}}}],["automat",{"_index":564,"t":{"36":{"position":[[441,14]]}}}],["avail",{"_index":148,"t":{"12":{"position":[[350,9]]},"20":{"position":[[163,9]]}}}],["averag",{"_index":523,"t":{"32":{"position":[[670,7]]}}}],["away",{"_index":656,"t":{"44":{"position":[[218,5]]}}}],["backgroundcolor",{"_index":153,"t":{"12":{"position":[[583,16]]},"14":{"position":[[681,16],[1038,16]]},"18":{"position":[[224,16]]},"20":{"position":[[333,15]]},"26":{"position":[[208,15],[224,15]]},"34":{"position":[[1064,16],[1596,16]]},"40":{"position":[[800,16],[878,16]]},"48":{"position":[[91,16],[285,17]]},"50":{"position":[[91,16],[335,16]]}}}],["backgroundcolor=\"cardprimari",{"_index":287,"t":{"20":{"position":[[230,29]]}}}],["backgroundcolor=\"mainbackground",{"_index":73,"t":{"2":{"position":[[1171,32]]},"40":{"position":[[1402,32]]}}}],["backgroundcolor=\"primarycardbackground",{"_index":598,"t":{"40":{"position":[[1450,39]]}}}],["backgroundcolor=\"secondarycardbackground",{"_index":602,"t":{"40":{"position":[[1607,41]]}}}],["backgroundcolor={bgcolor",{"_index":352,"t":{"22":{"position":[[1424,25]]}}}],["backgroundcolorprop",{"_index":202,"t":{"14":{"position":[[725,21]]},"48":{"position":[[135,21]]},"50":{"position":[[135,21]]}}}],["backgroundcolorprops(touchableopac",{"_index":339,"t":{"22":{"position":[[850,41]]}}}],["transform",{"_index":482,"t":{"28":{"position":[[251,10],[685,10]]}}}],["transform({valu",{"_index":489,"t":{"28":{"position":[[622,17]]}}}],["transpar",{"_index":480,"t":{"28":{"position":[[160,12],[209,15]]}}}],["transparency={0.5",{"_index":486,"t":{"28":{"position":[[397,18]]}}}],["transparentcompon",{"_index":484,"t":{"28":{"position":[[313,20],[375,21]]}}}],["tree",{"_index":319,"t":{"20":{"position":[[1624,5]]}}}],["trivial",{"_index":273,"t":{"16":{"position":[[1389,7]]}}}],["true",{"_index":370,"t":{"26":{"position":[[314,4]]}}}],["type",{"_index":8,"t":{"2":{"position":[[73,4]]},"12":{"position":[[221,4],[316,5]]},"14":{"position":[[310,4],[857,4],[1059,4]]},"20":{"position":[[1225,4],[1401,5]]},"22":{"position":[[892,4]]},"32":{"position":[[200,4]]},"34":{"position":[[1362,4]]},"40":{"position":[[952,4]]},"42":{"position":[[1308,4]]},"48":{"position":[[303,4]]},"50":{"position":[[356,4]]}}}],["typeof",{"_index":303,"t":{"20":{"position":[[1238,6]]},"40":{"position":[[965,6]]},"42":{"position":[[1321,6]]}}}],["typesafeti",{"_index":314,"t":{"20":{"position":[[1487,10]]}}}],["typescript",{"_index":14,"t":{"2":{"position":[[142,11]]},"20":{"position":[[309,10]]}}}],["typographi",{"_index":162,"t":{"12":{"position":[[922,11]]},"26":{"position":[[1684,10]]}}}],["ui",{"_index":3,"t":{"2":{"position":[[27,2],[107,2],[182,2],[262,2]]}}}],["under",{"_index":58,"t":{"2":{"position":[[831,5]]},"12":{"position":[[1011,5]]}}}],["understand",{"_index":256,"t":{"16":{"position":[[894,10]]}}}],["unlik",{"_index":543,"t":{"34":{"position":[[1806,6]]}}}],["up",{"_index":167,"t":{"12":{"position":[[1001,2]]},"20":{"position":[[608,2]]},"32":{"position":[[652,3]]},"36":{"position":[[186,2],[509,2]]}}}],["updat",{"_index":264,"t":{"16":{"position":[[1085,6],[1136,8]]}}}],["upgrad",{"_index":655,"t":{"44":{"position":[[192,7]]}}}],["upon",{"_index":21,"t":{"2":{"position":[[274,4]]}}}],["us",{"_index":89,"t":{"2":{"position":[[1520,3]]},"8":{"position":[[45,3]]},"10":{"position":[[86,3]]},"14":{"position":[[123,4],[128,3],[565,3]]},"16":{"position":[[331,4]]},"18":{"position":[[127,3]]},"20":{"position":[[12,5],[263,3]]},"22":{"position":[[472,3],[517,3]]},"28":{"position":[[37,3]]},"30":{"position":[[91,5]]},"32":{"position":[[227,6],[530,5],[618,3]]},"34":{"position":[[86,3],[586,3]]},"36":{"position":[[58,3]]},"38":{"position":[[84,3]]},"42":{"position":[[9,5],[118,5],[172,5]]},"44":{"position":[[99,5]]},"46":{"position":[[77,5]]}}}],["usag",{"_index":103,"t":{"6":{"position":[[20,5]]},"44":{"position":[[54,5]]}}}],["user",{"_index":310,"t":{"20":{"position":[[1415,4]]},"32":{"position":[[219,4]]}}}],["useresponsiveprop",{"_index":334,"t":{"22":{"position":[[525,17],[581,18]]}}}],["useresponsiveprop(color",{"_index":344,"t":{"22":{"position":[[1216,25]]}}}],["userestyl",{"_index":199,"t":{"14":{"position":[[573,10],[652,11]]},"44":{"position":[[67,10],[105,10]]},"46":{"position":[[95,10]]},"48":{"position":[[62,11]]},"50":{"position":[[62,11]]}}}],["userestyle(restylefunct",{"_index":215,"t":{"14":{"position":[[1197,28]]},"48":{"position":[[484,28]]},"50":{"position":[[537,28]]}}}],["usest",{"_index":575,"t":{"40":{"position":[[118,10]]}}}],["usestate(fals",{"_index":596,"t":{"40":{"position":[[1306,16]]}}}],["usethem",{"_index":112,"t":{"10":{"position":[[94,8]]},"22":{"position":[[600,9]]}}}],["usethemedisplay",{"_index":88,"t":{"2":{"position":[[1487,25]]}}}],["variant=\"body\">thi",{"_index":84,"t":{"2":{"position":[[1390,19]]}}}],["variant=\"buttonlabel",{"_index":353,"t":{"22":{"position":[[1469,21]]}}}],["variant=\"buttonlabel\">{label}headerwelcome Search the documentation - +

Search the documentation

- + \ No newline at end of file