diff --git a/404.html b/404.html index 81ac8392..2bd59ca4 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.893707d0.js b/assets/js/3002f4e5.e17c0b11.js similarity index 99% rename from assets/js/3002f4e5.893707d0.js rename to assets/js/3002f4e5.e17c0b11.js index 33539bec..16409bef 100644 --- a/assets/js/3002f4e5.893707d0.js +++ b/assets/js/3002f4e5.e17c0b11.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[462],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>f});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=o.createContext({}),l=function(e){var n=o.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=l(e.components);return o.createElement(s.Provider,{value:n},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=l(t),u=r,f=m["".concat(s,".").concat(u)]||m[u]||d[u]||a;return t?o.createElement(f,i(i({ref:n},c),{},{components:t})):o.createElement(f,i({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=u;var p={};for(var s in n)hasOwnProperty.call(n,s)&&(p[s]=n[s]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var l=2;l{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>p,toc:()=>l});var o=t(7462),r=(t(7294),t(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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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"}},s={},l=[{value:"Box",id:"box",level:4},{value:"Text",id:"text",level:4}],c={toc:l};function m(e){let{components:n,...t}=e;return(0,r.kt)("wrapper",(0,o.Z)({},c,t,{components:n,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"),". 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 +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[462],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>f});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=o.createContext({}),l=function(e){var n=o.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=l(e.components);return o.createElement(s.Provider,{value:n},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=l(t),u=r,f=m["".concat(s,".").concat(u)]||m[u]||d[u]||a;return t?o.createElement(f,i(i({ref:n},c),{},{components:t})):o.createElement(f,i({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=u;var p={};for(var s in n)hasOwnProperty.call(n,s)&&(p[s]=n[s]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var l=2;l{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>p,toc:()=>l});var o=t(7462),r=(t(7294),t(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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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"}},s={},l=[{value:"Box",id:"box",level:4},{value:"Text",id:"text",level:4}],c={toc:l};function m(e){let{components:n,...t}=e;return(0,r.kt)("wrapper",(0,o.Z)({},c,t,{components:n,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"),". 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.13e4155f.js b/assets/js/33d50a8e.f4378c93.js similarity index 98% rename from assets/js/33d50a8e.13e4155f.js rename to assets/js/33d50a8e.f4378c93.js index 1f306e17..29451c18 100644 --- a/assets/js/33d50a8e.13e4155f.js +++ b/assets/js/33d50a8e.f4378c93.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.710912b1.js b/assets/js/4edc808e.52356f09.js similarity index 99% rename from assets/js/4edc808e.710912b1.js rename to assets/js/4edc808e.52356f09.js index 6a395e03..30dcdc8d 100644 --- a/assets/js/4edc808e.710912b1.js +++ b/assets/js/4edc808e.52356f09.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[173],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,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({}),u=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(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,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,h=p["".concat(i,".").concat(m)]||p[m]||d[m]||l;return n?a.createElement(h,o(o({ref:t},c),{},{components:n})):a.createElement(h,o({ref:t},c))}));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 u=2;u{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),u=n(7094),c=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,u.U)(),[x,T]=(0,r.useState)(g),w=[],{blockElementScrollPositionUntilNextRender:O}=(0,c.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:()=>c,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({}),u=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(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,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,h=p["".concat(i,".").concat(m)]||p[m]||d[m]||l;return n?a.createElement(h,o(o({ref:t},c),{},{components:n})):a.createElement(h,o({ref:t},c))}));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 u=2;u{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),u=n(7094),c=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,u.U)(),[x,T]=(0,r.useState)(g),w=[],{blockElementScrollPositionUntilNextRender:O}=(0,c.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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.16385320.js b/assets/js/5a58cff1.0a117587.js similarity index 98% rename from assets/js/5a58cff1.16385320.js rename to assets/js/5a58cff1.0a117587.js index d3d40eb9..5f5aa571 100644 --- a/assets/js/5a58cff1.16385320.js +++ b/assets/js/5a58cff1.0a117587.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.067d7f94.js b/assets/js/5c9eef2d.bd6d378f.js similarity index 98% rename from assets/js/5c9eef2d.067d7f94.js rename to assets/js/5c9eef2d.bd6d378f.js index 954df48c..3ba5b0bc 100644 --- a/assets/js/5c9eef2d.067d7f94.js +++ b/assets/js/5c9eef2d.bd6d378f.js @@ -1 +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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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 +"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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.c5fa4c3a.js b/assets/js/63d0de19.10d25a1a.js similarity index 98% rename from assets/js/63d0de19.c5fa4c3a.js rename to assets/js/63d0de19.10d25a1a.js index eb2724d4..6f2f2478 100644 --- a/assets/js/63d0de19.c5fa4c3a.js +++ b/assets/js/63d0de19.10d25a1a.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.83802fa5.js b/assets/js/6ab114b0.10b84f70.js similarity index 98% rename from assets/js/6ab114b0.83802fa5.js rename to assets/js/6ab114b0.10b84f70.js index 9befbfba..afa675b9 100644 --- a/assets/js/6ab114b0.83802fa5.js +++ b/assets/js/6ab114b0.10b84f70.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.6e9796bd.js b/assets/js/83398278.afc9bd35.js similarity index 98% rename from assets/js/83398278.6e9796bd.js rename to assets/js/83398278.afc9bd35.js index 385015c4..f9aee5c4 100644 --- a/assets/js/83398278.6e9796bd.js +++ b/assets/js/83398278.afc9bd35.js @@ -1 +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)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=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"]),u=p(n),d=r,f=u["".concat(l,".").concat(d)]||u[d]||m[d]||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]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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 u(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 cardRegularBackground: '#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';\nconst variant = createVariant({themeKey: 'cardVariants', defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardRegularBackground',\n}})\n\nconst Card = createRestyleComponent, Theme>([variant])\n\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.")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"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)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=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"]),u=p(n),d=r,f=u["".concat(l,".").concat(d)]||u[d]||m[d]||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]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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 u(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 cardRegularBackground: '#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';\nconst variant = createVariant({themeKey: 'cardVariants', defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardRegularBackground',\n}})\n\nconst Card = createRestyleComponent, Theme>([variant])\n\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.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/92dde4bf.52324c12.js b/assets/js/92dde4bf.37576bf9.js similarity index 98% rename from assets/js/92dde4bf.52324c12.js rename to assets/js/92dde4bf.37576bf9.js index 63294f95..f8c0065b 100644 --- a/assets/js/92dde4bf.52324c12.js +++ b/assets/js/92dde4bf.37576bf9.js @@ -1 +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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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 +"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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.c7cad999.js b/assets/js/9825658c.c42a1f1e.js similarity index 98% rename from assets/js/9825658c.c7cad999.js rename to assets/js/9825658c.c42a1f1e.js index f8381342..9715b6bf 100644 --- a/assets/js/9825658c.c7cad999.js +++ b/assets/js/9825658c.c42a1f1e.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.a7cb4dcf.js b/assets/js/9cd7d415.6273b9ac.js similarity index 99% rename from assets/js/9cd7d415.a7cb4dcf.js rename to assets/js/9cd7d415.6273b9ac.js index 0a730ed1..b65a908c 100644 --- a/assets/js/9cd7d415.a7cb4dcf.js +++ b/assets/js/9cd7d415.6273b9ac.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.d522d422.js b/assets/js/9f55f1ad.871bbd23.js similarity index 98% rename from assets/js/9f55f1ad.d522d422.js rename to assets/js/9f55f1ad.871bbd23.js index 95b1a08a..387fc759 100644 --- a/assets/js/9f55f1ad.d522d422.js +++ b/assets/js/9f55f1ad.871bbd23.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[433],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,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({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(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,p=i(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(h,l(l({ref:t},p),{},{components:n})):r.createElement(h,l({ref:t},p))}));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 c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>c});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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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={},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,"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:()=>p,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({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(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,p=i(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(h,l(l({ref:t},p),{},{components:n})):r.createElement(h,l({ref:t},p))}));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 c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>c});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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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={},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,"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.551f7fae.js b/assets/js/ab0123d0.973ea45b.js similarity index 98% rename from assets/js/ab0123d0.551f7fae.js rename to assets/js/ab0123d0.973ea45b.js index 1936ce48..7886e9ec 100644 --- a/assets/js/ab0123d0.551f7fae.js +++ b/assets/js/ab0123d0.973ea45b.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.81b06b86.js b/assets/js/ce6c328c.4688c3d2.js similarity index 98% rename from assets/js/ce6c328c.81b06b86.js rename to assets/js/ce6c328c.4688c3d2.js index bd9c9760..3ac2449a 100644 --- a/assets/js/ce6c328c.81b06b86.js +++ b/assets/js/ce6c328c.4688c3d2.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.0dd9d90e.js b/assets/js/d5140e4c.1ae913f3.js similarity index 98% rename from assets/js/d5140e4c.0dd9d90e.js rename to assets/js/d5140e4c.1ae913f3.js index eb5a40d7..bbec66c2 100644 --- a/assets/js/d5140e4c.0dd9d90e.js +++ b/assets/js/d5140e4c.1ae913f3.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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.ad9bd4c6.js b/assets/js/fa28435c.523ccdf8.js similarity index 99% rename from assets/js/fa28435c.ad9bd4c6.js rename to assets/js/fa28435c.523ccdf8.js index 66e893b3..9df322c6 100644 --- a/assets/js/fa28435c.ad9bd4c6.js +++ b/assets/js/fa28435c.523ccdf8.js @@ -1 +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:"Guilherme Varandas",lastUpdatedAt:1708636258,formattedLastUpdatedAt:"Feb 22, 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 +"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:"Guilherme Varandas",lastUpdatedAt:1708636280,formattedLastUpdatedAt:"Feb 22, 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.2d0ab6fa.js b/assets/js/runtime~main.2d0ab6fa.js new file mode 100644 index 00000000..14c5f3ea --- /dev/null +++ b/assets/js/runtime~main.2d0ab6fa.js @@ -0,0 +1 @@ +(()=>{"use strict";var e,t,r,a,o,f={},n={};function d(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return f[e].call(r.exports,r,r.exports,d),r.exports}d.m=f,e=[],d.O=(t,r,a,o)=>{if(!r){var f=1/0;for(b=0;b=o)&&Object.keys(d.O).every((e=>d.O[e](r[c])))?r.splice(c--,1):(n=!1,o0&&e[b-1][2]>o;b--)e[b]=e[b-1];e[b]=[r,a,o]},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 o=Object.create(null);d.r(o);var f={};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=>f[t]=()=>e[t]));return f.default=()=>e,d.d(o,f),o},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:"0a117587",173:"52356f09",218:"6273b9ac",263:"523ccdf8",287:"dd0845c7",352:"afc9bd35",387:"10b84f70",433:"871bbd23",443:"fa913646",444:"4688c3d2",462:"e17c0b11",493:"10d25a1a",514:"80022471",525:"52d2ade0",581:"27e1bf7d",641:"f4378c93",661:"c42a1f1e",730:"dc230ab6",795:"37576bf9",817:"a153f2a0",830:"45a310b8",881:"973ea45b",892:"bd6d378f",899:"1ae913f3",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={},o="restyle:",d.l=(e,t,r,f)=>{if(a[e])a[e].push(t);else{var n,c;if(void 0!==r)for(var i=document.getElementsByTagName("script"),b=0;b{n.onerror=n.onload=null,clearTimeout(s);var o=a[e];if(delete a[e],n.parentNode&&n.parentNode.removeChild(n),o&&o.forEach((e=>e(r))),t)return t(r)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=u.bind(null,n.onerror),n.onload=u.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 o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var f=d.p+d.u(t),n=new Error;d.l(f,(r=>{if(d.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),f=r&&r.target&&r.target.src;n.message="Loading chunk "+t+" failed.\n("+o+": "+f+")",n.name="ChunkLoadError",n.type=o,n.request=f,a[1](n)}}),"chunk-"+t,t)}},d.O.j=t=>0===e[t];var t=(t,r)=>{var a,o,f=r[0],n=r[1],c=r[2],i=0;if(f.some((t=>0!==e[t]))){for(a in n)d.o(n,a)&&(d.m[a]=n[a]);if(c)var b=c(d)}for(t&&t(r);i{"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:"16385320",173:"710912b1",218:"a7cb4dcf",263:"ad9bd4c6",287:"dd0845c7",352:"6e9796bd",387:"83802fa5",433:"d522d422",443:"fa913646",444:"81b06b86",462:"893707d0",493:"c5fa4c3a",514:"80022471",525:"52d2ade0",581:"27e1bf7d",641:"13e4155f",661:"c7cad999",730:"dc230ab6",795:"52324c12",817:"a153f2a0",830:"45a310b8",881:"551f7fae",892:"067d7f94",899:"0dd9d90e",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 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 1333c8f3..79120fb8 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 f462f339..99e6b6c7 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 d050a602..5d35fb98 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 423876ac..ab3286cf 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 c9da2b95..8209daee 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. 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. 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 7c670541..fc2d7288 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 b5962f43..01883b27 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 8524413c..b448bf61 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 79573584..22d69f81 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 847ca175..85928b79 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 8130b106..4ccbdea9 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 83d8cd94..f0c2d384 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: {
    cardRegularBackground: '#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>({themeKey: 'cardVariants', defaults: {
  margin: {
    phone: 's',
    tablet: 'm',
  },
  backgroundColor: 'cardRegularBackground',
}})

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

<Card variant="elevated" />

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: {
    cardRegularBackground: '#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>({themeKey: 'cardVariants', defaults: {
  margin: {
    phone: 's',
    tablet: 'm',
  },
  backgroundColor: 'cardRegularBackground',
}})

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

<Card variant="elevated" />

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 abe4643e..af2a3f62 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 8a34ccc4..9647c50f 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 2f922e1f..57ad460e 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 454777dc..8a3b8762 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 69a2e9da..a4366447 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 dc4a2cfe..936906be 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 aed37d8c..4a2b6cbf 100644 --- a/search-index.json +++ b/search-index.json @@ -1 +1 @@ -[{"documents":[{"i":1,"t":"Accessing the theme","u":"/restyle/fundamentals/accessing-the-theme","b":["Fundamentals"]},{"i":3,"t":"Getting started","u":"/restyle/","b":[]},{"i":11,"t":"Breakpoints","u":"/restyle/fundamentals/breakpoints","b":["Fundamentals"]},{"i":13,"t":"Colors","u":"/restyle/fundamentals/colors","b":["Fundamentals"]},{"i":15,"t":"Custom components","u":"/restyle/fundamentals/components/custom-components","b":["Fundamentals","Components"]},{"i":17,"t":"Predefined components","u":"/restyle/fundamentals/components/predefined-components","b":["Fundamentals","Components"]},{"i":19,"t":"Overriding styles","u":"/restyle/fundamentals/overriding-styles","b":["Fundamentals"]},{"i":21,"t":"Defining your theme","u":"/restyle/fundamentals/defining-your-theme","b":["Fundamentals"]},{"i":23,"t":"Responsive values","u":"/restyle/fundamentals/responsive-values","b":["Fundamentals"]},{"i":25,"t":"Restyle functions","u":"/restyle/fundamentals/restyle-functions","b":["Fundamentals"]},{"i":31,"t":"Spacing","u":"/restyle/fundamentals/spacing","b":["Fundamentals"]},{"i":33,"t":"Variants","u":"/restyle/fundamentals/variants","b":["Fundamentals"]},{"i":35,"t":"Implementing dark mode","u":"/restyle/guides/dark-mode","b":["Guides"]},{"i":37,"t":"Running the fixture app","u":"/restyle/guides/fixture-app","b":["Guides"]},{"i":41,"t":"Getting Setup With the Shopify Design System","u":"/restyle/guides/shopify-design-system","b":["Guides"]},{"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,2.488,1,1.964]],["t/3",[2,1.964,3,2.488]],["t/11",[4,3.099]],["t/13",[5,3.099]],["t/15",[6,2.488,7,1.964]],["t/17",[7,1.964,8,2.488]],["t/19",[9,2.488,10,2.488]],["t/21",[1,1.964,11,2.488]],["t/23",[12,2.488,13,2.488]],["t/25",[14,1.964,15,2.488]],["t/31",[16,3.099]],["t/33",[17,3.099]],["t/35",[18,2.078,19,2.078,20,2.078]],["t/37",[21,2.078,22,2.078,23,2.078]],["t/41",[2,1.234,24,1.563,25,1.563,26,1.563,27,1.563]],["t/43",[14,1.641,28,2.078,29,2.078]]],"invertedIndex":[["access",{"_index":0,"t":{"1":{"position":[[0,9]]}}}],["app",{"_index":23,"t":{"37":{"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":[[7,10]]},"17":{"position":[[11,10]]}}}],["custom",{"_index":6,"t":{"15":{"position":[[0,6]]}}}],["dark",{"_index":19,"t":{"35":{"position":[[13,4]]}}}],["defin",{"_index":11,"t":{"21":{"position":[[0,8]]}}}],["design",{"_index":26,"t":{"41":{"position":[[31,6]]}}}],["fixtur",{"_index":22,"t":{"37":{"position":[[12,7]]}}}],["function",{"_index":15,"t":{"25":{"position":[[8,9]]}}}],["get",{"_index":2,"t":{"3":{"position":[[0,7]]},"41":{"position":[[0,7]]}}}],["implement",{"_index":18,"t":{"35":{"position":[[0,12]]}}}],["migrat",{"_index":28,"t":{"43":{"position":[[0,9]]}}}],["mode",{"_index":20,"t":{"35":{"position":[[18,4]]}}}],["overrid",{"_index":9,"t":{"19":{"position":[[0,10]]}}}],["predefin",{"_index":8,"t":{"17":{"position":[[0,10]]}}}],["respons",{"_index":12,"t":{"23":{"position":[[0,10]]}}}],["restyl",{"_index":14,"t":{"25":{"position":[[0,7]]},"43":{"position":[[13,7]]}}}],["run",{"_index":21,"t":{"37":{"position":[[0,7]]}}}],["setup",{"_index":24,"t":{"41":{"position":[[8,5]]}}}],["shopifi",{"_index":25,"t":{"41":{"position":[[23,7]]}}}],["space",{"_index":16,"t":{"31":{"position":[[0,7]]}}}],["start",{"_index":3,"t":{"3":{"position":[[8,7]]}}}],["style",{"_index":10,"t":{"19":{"position":[[11,6]]}}}],["system",{"_index":27,"t":{"41":{"position":[[38,6]]}}}],["theme",{"_index":1,"t":{"1":{"position":[[14,5]]},"21":{"position":[[14,5]]}}}],["v2",{"_index":29,"t":{"43":{"position":[[21,2]]}}}],["valu",{"_index":13,"t":{"23":{"position":[[11,6]]}}}],["variant",{"_index":17,"t":{"33":{"position":[[0,8]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":5,"t":"Installation","u":"/restyle/","h":"#installation","p":3},{"i":7,"t":"Usage","u":"/restyle/","h":"#usage","p":3},{"i":9,"t":"Playground","u":"/restyle/","h":"#playground","p":3},{"i":27,"t":"Predefined Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#predefined-restyle-functions","p":25},{"i":29,"t":"Custom Restyle functions","u":"/restyle/fundamentals/restyle-functions","h":"#custom-restyle-functions","p":25},{"i":39,"t":"Making changes to Restyle","u":"/restyle/guides/fixture-app","h":"#making-changes-to-restyle","p":37},{"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/5",[0,2.349]],["t/7",[1,2.349]],["t/9",[2,2.349]],["t/27",[3,1.529,4,0.846,5,1.117]],["t/29",[4,0.846,5,1.117,6,1.529]],["t/39",[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":{"39":{"position":[[7,7]]},"45":{"position":[[20,7]]}}}],["custom",{"_index":6,"t":{"29":{"position":[[0,6]]}}}],["function",{"_index":5,"t":{"27":{"position":[[19,9]]},"29":{"position":[[15,9]]}}}],["instal",{"_index":0,"t":{"5":{"position":[[0,12]]}}}],["make",{"_index":7,"t":{"39":{"position":[[0,6]]}}}],["playground",{"_index":2,"t":{"9":{"position":[[0,10]]}}}],["predefin",{"_index":3,"t":{"27":{"position":[[0,10]]}}}],["restyl",{"_index":4,"t":{"27":{"position":[[11,7]]},"29":{"position":[[7,7]]},"39":{"position":[[18,7]]}}}],["usag",{"_index":1,"t":{"7":{"position":[[0,5]]}}}],["userestyl",{"_index":11,"t":{"45":{"position":[[31,10]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":2,"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":1},{"i":4,"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":3},{"i":6,"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":3},{"i":8,"t":"Read more about the usage of Restyle here.","s":"Usage","u":"/restyle/","h":"#usage","p":3},{"i":10,"t":"The fixture is an example app showing how to use the library.","s":"Playground","u":"/restyle/","h":"#playground","p":3},{"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":"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":15},{"i":18,"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. 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":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":"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":21},{"i":24,"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":23},{"i":26,"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":25},{"i":28,"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":25},{"i":30,"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":25},{"i":32,"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":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: { cardRegularBackground: '#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: 'cardRegularBackground', }}) const Card = createRestyleComponent, Theme>([variant]) 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":"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":35},{"i":38,"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":37},{"i":40,"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":37},{"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,1.914,1,3.516,2,3.516,3,0.728,4,2.886,5,1.289,6,2.162,7,0.72,8,0.488,9,2.886,10,2.162,11,0.902,12,0.801,13,2.886,14,2.471,15,2.886,16,2.886,17,2.162,18,2.886,19,0.808,20,1.378,21,2.886,22,2.886,23,2.886,24,3.516,25,3.516,26,2.886,27,1.378,28,2.886,29,2.886,30,2.886,31,2.886,32,1.378]],["t/4",[3,0.656,5,0.904,7,0.647,8,0.293,11,0.816,12,0.807,19,0.726,27,0.828,32,0.828,33,3.109,34,2.112,35,4.203,36,2.112,37,1.961,38,1.733,39,0.671,40,1.733,41,3.109,42,0.745,43,0.92,44,1.733,45,1.733,46,2.112,47,2.112,48,2.112,49,2.112,50,3.16,51,2.112,52,1.733,53,2.112,54,1.238,55,1.484,56,0.671,57,0.604,58,2.112,59,2.112,60,2.112,61,2.112,62,1.733,63,2.112,64,0.828,65,2.112,66,2.112,67,1.733,68,2.112,69,2.112,70,0.745,71,2.112,72,1.733,73,2.112,74,1.298,75,1.733,76,2.662,77,1.298,78,1.484,79,1.943,80,1.484,81,1.484,82,0.485,83,1.298,84,1.484,85,1.733,86,1.733,87,2.38,88,1.298,89,1.647,90,1.484,91,2.451,92,1.733,93,1.943,94,1.733,95,1.733,96,3.16,97,1.377,98,1.733,99,1.733,100,2.112,101,2.112,102,2.112,103,1.733,104,1.298,105,1.733,106,1.298,107,1.733,108,2.221,109,2.112,110,2.112,111,1.733,112,2.112,113,2.112,114,2.112,115,2.112,116,1.733]],["t/6",[82,1.248,117,4.18,118,4.283,119,3.011,120,3.131,121,4.18,122,5.092,123,3.579,124,4.283]],["t/8",[7,0.95,125,3.812,126,3.264,127,3.812,128,2.528]],["t/10",[8,0.64,27,1.806,32,1.806,37,2.008,129,3.239,130,4.608]],["t/12",[3,0.406,8,0.63,11,0.53,12,0.748,20,1.146,39,0.929,54,1.912,64,1.146,70,1.603,72,2.4,83,2.453,84,2.055,104,1.798,106,1.798,131,3.139,132,3.429,133,2.924,134,3.275,135,2.924,136,2.4,137,2.055,138,2.4,139,1.798,140,2.924,141,3.275,142,1.274,143,2.924,144,2.4,145,2.924,146,2.4,147,2.924,148,2.924,149,2.924,150,2.804,151,1.032,152,2.804,153,2.924,154,2.924,155,2.055,156,2.924,157,2.924,158,2.453,159,1.798,160,2.924,161,2.924,162,2.924,163,2.4,164,2.924,165,1.798,166,2.4,167,2.924,168,2.924,169,2.924,170,2.924,171,2.924,172,2.924]],["t/14",[3,0.614,8,0.326,11,0.62,12,0.703,14,2.402,17,2.721,18,1.928,20,0.92,21,1.928,22,1.928,23,1.928,26,1.928,27,1.579,32,1.339,41,1.928,45,1.928,52,1.928,54,0.92,56,1.65,70,0.829,83,2.101,91,1.279,139,1.444,142,1.489,151,0.829,173,2.348,174,2.348,175,2.348,176,3.45,177,2.806,178,2.101,179,1.651,180,2.348,181,2.348,182,3.418,183,1.928,184,2.348,185,2.348,186,4.029,187,2.806,188,1.928,189,1.928,190,2.806,191,1.651,192,1.928,193,1.928,194,1.928,195,1.928,196,1.928,197,1.928,198,1.928,199,1.928,200,1.444,201,1.928,202,1.651,203,1.928,204,1.651,205,1.651,206,1.928,207,1.928,208,2.806,209,3.418,210,2.348,211,2.348,212,1.651,213,2.348,214,2.348,215,2.348,216,3.418,217,2.477,218,1.651,219,1.444,220,2.402,221,1.928,222,3.418,223,3.418,224,1.928,225,2.348,226,2.348,227,1.928,228,2.348,229,1.928,230,1.279,231,2.348,232,2.348,233,2.348,234,1.928]],["t/16",[3,0.653,5,0.977,6,1.444,7,0.481,8,0.559,10,1.444,11,0.802,12,0.818,17,1.444,19,1.128,39,1.281,42,0.829,43,1.023,57,1.265,74,2.477,79,2.101,80,1.651,81,1.651,82,0.785,87,1.141,89,1.734,91,1.861,92,1.928,93,2.101,95,1.928,97,1.023,126,1.651,138,2.806,229,1.928,230,1.279,235,2.348,236,2.348,237,1.651,238,1.141,239,1.928,240,2.402,241,1.66,242,2.402,243,2.348,244,1.279,245,1.023,246,2.348,247,1.861,248,2.477,249,1.861,250,1.206,251,1.651,252,1.651,253,1.651,254,4.029,255,1.651,256,1.651,257,1.651,258,2.348,259,2.402,260,1.651,261,2.101,262,1.651,263,2.101,264,1.651,265,1.651,266,1.651]],["t/18",[3,0.729,5,1.293,6,1.312,7,0.652,11,0.691,12,0.782,16,1.752,17,1.312,19,0.971,20,0.836,27,0.836,37,0.93,38,1.752,39,1.012,56,1.343,57,0.911,64,0.836,70,0.753,77,1.312,78,1.5,82,0.732,85,1.752,87,2.197,88,1.312,89,1.858,90,1.5,141,1.752,151,0.753,165,1.312,177,1.752,179,1.5,200,2.343,212,2.97,218,1.5,237,1.5,238,2.053,241,0.753,244,1.734,245,1.388,249,1.162,250,0.753,267,2.134,268,2.134,269,2.134,270,2.134,271,2.134,272,1.5,273,1.162,274,2.134,275,2.134,276,2.134,277,1.752,278,2.134,279,2.239,280,2.239,281,2.615,282,1.752,283,1.752,284,1.752,285,2.134,286,1.752,287,1.752,288,1.752,289,1.5,290,2.134,291,2.239,292,1.312,293,1.752,294,3.128,295,3.81,296,2.615,297,2.239,298,2.343,299,1.752,300,2.343,301,2.134,302,2.134,303,2.134,304,2.134,305,2.134,306,2.134,307,1.312,308,1.162,309,1.162,310,2.134]],["t/20",[5,1.183,7,0.847,8,0.574,12,0.692,64,2.098,87,2.011,108,2.909,139,2.544,187,3.397,250,1.46,311,2.909,312,3.397,313,2.253,314,4.138,315,4.138,316,4.138,317,3.397,318,4.138]],["t/22",[3,0.751,5,0.556,7,0.398,8,0.412,11,0.653,12,0.802,14,1.366,19,0.827,20,0.761,27,1.163,32,1.163,37,0.847,39,0.943,40,2.436,42,0.686,44,1.595,54,1.163,55,2.086,56,1.38,57,0.849,62,1.595,70,1.532,75,1.595,76,2.833,82,0.682,84,1.366,86,1.595,89,0.761,116,1.595,119,1.366,125,1.595,126,2.086,128,1.058,131,1.195,134,1.595,142,0.847,146,1.595,151,1.271,165,1.195,176,1.366,188,1.595,189,1.595,190,1.595,191,1.366,192,1.595,193,1.595,194,1.595,195,1.595,196,1.595,197,1.595,198,1.595,199,1.595,200,1.195,201,1.595,202,1.366,203,1.595,204,1.366,205,1.366,208,1.595,218,1.366,219,1.195,227,1.595,244,1.616,245,1.569,250,0.686,263,1.195,272,1.366,277,1.595,289,1.366,291,1.366,293,1.595,296,1.595,297,1.366,298,1.824,299,1.595,300,1.195,307,1.195,308,1.616,309,1.616,311,1.366,313,1.058,319,1.943,320,1.595,321,1.943,322,1.943,323,1.943,324,1.943,325,1.943,326,1.943,327,1.366,328,1.943,329,1.943,330,1.943,331,1.058,332,1.195,333,0.944,334,1.195,335,1.366,336,1.595,337,1.366,338,1.943,339,1.943,340,1.595,341,1.943,342,2.967,343,1.943,344,1.595,345,1.595,346,1.943,347,1.943,348,1.595,349,1.943,350,1.366,351,1.595,352,1.943]],["t/24",[0,1.089,3,0.642,4,1.642,5,0.868,7,0.41,8,0.421,9,1.642,10,1.23,11,0.839,12,0.831,13,1.642,19,1.01,20,0.784,39,0.636,42,1.294,43,0.872,54,0.784,56,0.636,64,0.784,70,1.552,77,1.23,82,0.46,87,1.474,88,1.23,89,1.603,94,1.642,97,0.872,104,2.253,105,1.642,106,2.515,107,1.642,131,2.253,136,1.642,137,1.406,151,0.706,152,1.406,155,1.406,158,1.23,159,1.23,163,1.642,219,1.23,220,2.576,221,2.491,230,1.089,241,1.697,248,1.23,261,2.253,262,1.406,311,2.133,344,1.642,353,2,354,2,355,1.642,356,2,357,3.034,358,2,359,3.034,360,2,361,3.034,362,2,363,3.034,364,2,365,4.09,366,2,367,2,368,3.665,369,1.642,370,3.034,371,2,372,2,373,2,374,2,375,2,376,2,377,2,378,2,379,2,380,2,381,2,382,2]],["t/26",[3,0.563,5,1.16,7,1.009,20,1.589,42,1.431,43,1.767,64,1.589,70,1.873,158,2.493,238,1.971,241,1.739,273,2.683,320,3.329,348,3.329,350,2.85,383,4.055,384,4.055,385,4.055,386,4.055]],["t/28",[3,0.276,7,0.747,12,0.507,37,0.866,56,1.525,57,0.863,103,1.632,132,1.397,142,0.866,150,1.397,178,1.222,212,1.397,237,1.397,238,1.467,241,1.065,249,1.988,250,1.065,273,1.082,280,2.122,281,1.632,282,1.632,283,2.478,284,2.997,286,1.632,287,1.632,288,2.478,292,1.222,294,1.632,297,1.397,298,1.222,300,1.222,313,1.082,333,0.966,351,1.632,387,1.987,388,1.987,389,1.987,390,1.987,391,1.987,392,1.987,393,1.987,394,4.156,395,1.987,396,1.987,397,1.987,398,3.019,399,1.632,400,1.987,401,1.987,402,1.987,403,1.987,404,1.987,405,1.987,406,1.987,407,1.987,408,1.987,409,1.987,410,1.987,411,1.987,412,1.987,413,1.987,414,1.632,415,1.987,416,1.987,417,1.987,418,1.987,419,1.987,420,1.987,421,1.987,422,1.987,423,1.987,424,1.987,425,1.987,426,1.987,427,1.987,428,1.987,429,1.632,430,1.987,431,1.987,432,1.987,433,1.987,434,1.987,435,1.987,436,1.987,437,1.987,438,1.987,439,1.987,440,1.987,441,1.987,442,1.987,443,1.987,444,1.987,445,1.987,446,1.987,447,1.987,448,1.987,449,1.987,450,1.987,451,1.987,452,1.632,453,1.987,454,1.987,455,1.397,456,1.987,457,1.987,458,1.987,459,1.987,460,1.987,461,1.987,462,1.987,463,1.987,464,1.987,465,1.987,466,1.987,467,1.987,468,1.987,469,1.987,470,1.987,471,1.987,472,1.987,473,1.987,474,1.987,475,1.987,476,1.987,477,1.987,478,1.987,479,1.987,480,1.987,481,1.987,482,1.987,483,1.987,484,1.397,485,1.632,486,1.632,487,1.632,488,1.632,489,1.987,490,1.987,491,1.987,492,1.987,493,1.987,494,1.987,495,1.987,496,1.987,497,1.987,498,1.987,499,1.987,500,1.987,501,1.987,502,1.987]],["t/30",[3,0.576,5,0.887,7,0.635,8,0.431,11,0.753,12,0.723,19,0.713,20,1.628,54,1.216,56,0.986,64,1.628,70,1.964,79,1.908,82,0.713,142,1.81,159,2.553,178,1.908,219,1.908,238,2.275,239,2.547,241,1.466,245,1.352,273,2.261,280,2.181,292,1.908,313,2.722,503,3.842,504,4.153,505,4.153,506,4.153,507,3.103,508,4.153,509,3.103,510,3.103,511,2.547,512,3.103,513,3.103,514,3.409,515,3.103]],["t/32",[3,0.508,8,0.508,11,0.664,12,0.739,27,1.436,57,1.45,137,3.252,142,1.597,151,1.293,178,2.845,179,2.576,279,2.576,308,1.995,309,1.995,331,1.995,332,2.845,333,1.781,334,2.253,335,2.576,336,3.008,516,3.664,517,3.008,518,3.664,519,3.664,520,3.664,521,3.664,522,3.664,523,3.664,524,3.664,525,3.664,526,3.664,527,3.664]],["t/34",[0,1.115,3,0.692,5,0.586,6,1.259,7,0.632,8,0.429,11,0.674,12,0.82,19,0.709,54,1.21,56,0.651,57,0.586,70,1.461,79,1.259,80,2.171,81,1.439,82,0.47,91,1.681,93,2.286,104,2.545,106,2.545,128,1.681,131,1.259,132,1.439,139,2.286,142,0.892,150,1.439,151,0.723,152,2.171,155,1.439,158,1.259,159,1.259,224,1.681,238,1.501,241,1.461,245,2.112,250,0.723,273,2.254,289,3.507,292,1.899,308,1.115,309,1.115,312,1.681,313,1.115,327,1.439,331,2.254,332,1.259,333,2.011,334,1.259,340,1.681,350,1.439,355,1.681,399,1.681,414,2.535,484,1.439,485,1.681,486,1.681,487,2.535,488,1.681,503,1.681,511,1.681,514,1.681,517,1.681,528,2.048,529,3.088,530,2.048,531,3.088,532,2.048,533,2.048,534,3.088,535,2.048,536,2.048,537,2.048,538,2.048,539,2.048,540,2.048,541,2.048]],["t/36",[3,0.625,11,0.851,12,0.827,15,1.531,19,0.806,27,0.731,28,1.531,29,1.531,30,1.531,31,2.361,32,1.376,39,0.593,42,1.239,43,0.813,56,1.116,57,0.533,76,2.467,77,1.147,78,1.311,82,0.429,87,2.415,88,1.147,89,1.67,90,1.311,91,1.566,93,1.147,97,0.813,98,1.531,99,1.531,108,2.022,111,1.531,128,1.016,151,1.015,176,1.311,191,1.311,200,1.147,202,1.311,204,2.022,205,2.773,206,2.881,207,2.881,220,1.311,244,1.566,245,1.53,250,1.015,291,1.311,298,1.147,300,1.147,307,1.147,308,1.566,309,1.016,317,2.881,331,1.016,332,1.147,333,0.907,337,1.311,369,1.531,484,2.022,542,1.865,543,1.865,544,1.865,545,1.865,546,1.865,547,1.865,548,1.865,549,1.865,550,1.865,551,1.865,552,1.865,553,2.876,554,1.865,555,3.51,556,1.865,557,2.876,558,2.876,559,1.865,560,2.876,561,1.865,562,2.876,563,1.865,564,1.865,565,1.865,566,1.865,567,1.865,568,1.865,569,2.876,570,2.876,571,1.865,572,1.865,573,1.865,574,1.865,575,1.865,576,1.865,577,1.865]],["t/38",[7,0.877,8,0.451,32,1.996,37,1.417,42,1.148,55,2.286,67,2.67,120,3.131,123,2.286,129,3.012,144,2.67,165,2.634,217,2,279,3.012,327,2.286,455,3.58,578,3.252,579,3.252,580,3.252,581,3.252,582,3.252,583,3.252,584,4.461,585,3.252,586,3.252,587,3.252,588,3.252,589,3.252,590,3.252,591,4.791,592,4.791,593,3.252,594,3.252,595,3.252,596,3.252,597,3.252,598,3.252,599,3.252,600,3.252]],["t/40",[0,2.332,7,1.042,8,0.594,32,1.679,33,4.18,120,2.634,129,3.011,217,2.634,272,3.011,584,3.516,601,4.283,602,4.283,603,4.283,604,4.283]],["t/42",[3,0.695,5,0.713,8,0.578,11,0.647,12,0.786,19,0.82,39,0.792,54,0.977,56,0.792,57,0.713,64,1.398,82,0.573,83,1.533,97,1.086,117,2.046,120,2.194,121,2.929,123,2.508,128,1.357,151,1.259,166,2.046,183,2.929,234,2.046,244,1.943,245,1.086,262,1.752,307,1.533,331,1.357,333,1.211,334,1.533,335,1.752,337,1.752,394,2.046,429,2.046,455,1.752,605,3.568,606,2.492,607,2.492,608,5.009,609,4.167,610,2.492,611,2.492,612,2.492,613,3.568,614,2.492,615,3.568,616,2.492,617,2.492,618,2.492,619,2.492,620,2.492,621,2.492,622,2.492,623,2.492,624,2.492,625,2.492,626,2.492,627,2.492,628,2.492,629,2.492,630,2.492,631,2.492,632,2.492,633,2.492,634,2.492,635,2.492,636,2.492,637,2.492,638,2.492,639,2.492,640,2.492,641,2.492,642,2.492,643,2.492,644,3.568,645,2.492,646,2.492,647,2.492]],["t/44",[0,2.269,8,0.578,10,2.562,37,2.182,119,2.929,127,3.42,217,3.079,247,2.727,345,3.42,452,3.42,648,4.166,649,4.166,650,5.008,651,4.166,652,4.166,653,4.166]],["t/46",[8,0.621,19,1.028,82,1.028,247,2.435,253,3.672,654,4.472,655,4.472,656,4.472,657,4.472]],["t/48",[3,0.578,11,0.851,12,0.825,19,1.151,39,0.991,42,1.101,43,1.359,57,1.192,74,2.885,82,0.717,89,1.839,97,1.359,230,1.698,240,2.193,241,1.768,242,2.193,247,1.698,248,2.885,249,2.269,250,1.471,251,2.193,252,2.193,255,2.193,256,2.193,257,2.193,259,2.929,260,2.193,261,1.918,263,2.562,264,2.193,265,2.193,266,2.193]],["t/50",[3,0.572,11,0.844,12,0.826,19,1.144,39,0.976,42,1.084,43,1.339,57,1.179,74,2.863,82,0.706,89,1.825,97,1.339,230,1.673,240,2.159,241,1.757,242,2.159,247,1.673,248,2.863,249,2.246,250,1.456,251,2.159,252,2.159,253,2.899,255,2.159,256,2.159,257,2.159,259,2.899,260,2.159,261,1.889,263,2.536,264,2.159,265,2.159,266,2.159]]],"invertedIndex":[["",{"_index":12,"t":{"2":{"position":[[125,1],[127,2],[130,2],[133,1],[147,1],[198,1],[214,2],[217,3],[221,2]]},"4":{"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]]},"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":[[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]]},"18":{"position":[[380,2],[479,1],[667,2],[769,1],[1045,2],[1074,1],[1090,4],[1109,1],[1119,1],[1221,2],[1235,1],[1338,2],[1347,1],[1422,2],[1425,2],[1428,3],[1432,2]]},"20":{"position":[[252,2],[255,2]]},"22":{"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]]},"24":{"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]]},"28":{"position":[[133,1],[319,1],[335,1]]},"30":{"position":[[173,1],[289,2],[303,3],[334,1],[416,2]]},"32":{"position":[[245,1],[270,1],[300,2],[303,3]]},"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],[1007,1],[1017,1],[1044,2],[1089,3],[1104,1],[1209,2]]},"36":{"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":152,"t":{"12":{"position":[[391,2],[414,2]]},"24":{"position":[[205,2]]},"34":{"position":[[317,2],[763,2]]}}}],["0.1",{"_index":561,"t":{"36":{"position":[[937,4]]}}}],["0.2",{"_index":533,"t":{"34":{"position":[[736,4]]}}}],["0.3",{"_index":559,"t":{"36":{"position":[[857,4]]}}}],["000",{"_index":532,"t":{"34":{"position":[[713,7]]}}}],["0a906",{"_index":199,"t":{"14":{"position":[[547,10]]},"22":{"position":[[836,10]]}}}],["0b0b0b",{"_index":201,"t":{"14":{"position":[[565,10]]},"22":{"position":[[854,10]]}}}],["0ecd9d",{"_index":197,"t":{"14":{"position":[[525,10]]},"22":{"position":[[814,10]]}}}],["1",{"_index":507,"t":{"30":{"position":[[292,1]]}}}],["10",{"_index":166,"t":{"12":{"position":[[659,2]]},"42":{"position":[[415,4]]}}}],["1024",{"_index":157,"t":{"12":{"position":[[459,5]]}}}],["111",{"_index":547,"t":{"36":{"position":[[333,7]]}}}],["15",{"_index":535,"t":{"34":{"position":[[792,3]]}}}],["16",{"_index":308,"t":{"18":{"position":[[1386,3]]},"22":{"position":[[1024,3],[1127,3]]},"32":{"position":[[281,3]]},"34":{"position":[[234,3]]},"36":{"position":[[429,3],[708,3]]}}}],["2",{"_index":646,"t":{"42":{"position":[[1252,1]]}}}],["24",{"_index":309,"t":{"18":{"position":[[1402,3]]},"22":{"position":[[1031,3],[1143,3]]},"32":{"position":[[288,3]]},"34":{"position":[[241,3]]},"36":{"position":[[724,3]]}}}],["28",{"_index":305,"t":{"18":{"position":[[1302,3]]}}}],["333",{"_index":549,"t":{"36":{"position":[[351,7]]}}}],["34",{"_index":299,"t":{"18":{"position":[[1183,3]]},"22":{"position":[[1102,3]]}}}],["36",{"_index":306,"t":{"18":{"position":[[1318,3]]}}}],["3f22ab",{"_index":193,"t":{"14":{"position":[[477,10]]},"22":{"position":[[766,10]]}}}],["40",{"_index":336,"t":{"22":{"position":[[1039,3]]},"32":{"position":[[296,3]]}}}],["42.5",{"_index":301,"t":{"18":{"position":[[1199,5]]}}}],["5",{"_index":534,"t":{"34":{"position":[[774,3],[807,2]]}}}],["56dcba",{"_index":195,"t":{"14":{"position":[[500,10]]},"22":{"position":[[789,10]]}}}],["5a31f4",{"_index":191,"t":{"14":{"position":[[454,10]]},"22":{"position":[[743,10]]},"36":{"position":[[300,10]]}}}],["600",{"_index":304,"t":{"18":{"position":[[1285,6]]}}}],["768",{"_index":155,"t":{"12":{"position":[[441,4]]},"24":{"position":[[216,4]]},"34":{"position":[[328,4]]}}}],["8",{"_index":332,"t":{"22":{"position":[[1018,2]]},"32":{"position":[[78,2],[275,2]]},"34":{"position":[[228,2]]},"36":{"position":[[423,2]]}}}],["812",{"_index":154,"t":{"12":{"position":[[425,4]]}}}],["8c6ff7",{"_index":189,"t":{"14":{"position":[[428,10]]},"22":{"position":[[717,10]]}}}],["abov",{"_index":228,"t":{"14":{"position":[[1298,6]]}}}],["accept",{"_index":311,"t":{"20":{"position":[[27,7]]},"22":{"position":[[366,6]]},"24":{"position":[[43,6],[242,6]]}}}],["access",{"_index":2,"t":{"2":{"position":[[24,6]]}}}],["acknowledg",{"_index":61,"t":{"4":{"position":[[411,12]]}}}],["action",{"_index":268,"t":{"18":{"position":[[92,6]]}}}],["activityind",{"_index":363,"t":{"24":{"position":[[673,18],[1537,18]]}}}],["add",{"_index":117,"t":{"6":{"position":[[0,3],[52,3]]},"42":{"position":[[189,3]]}}}],["address",{"_index":651,"t":{"44":{"position":[[156,7]]}}}],["advanc",{"_index":246,"t":{"16":{"position":[[520,8]]}}}],["alias",{"_index":390,"t":{"28":{"position":[[125,7]]}}}],["aligncont",{"_index":444,"t":{"28":{"position":[[816,13]]}}}],["alignitem",{"_index":445,"t":{"28":{"position":[[830,11]]}}}],["alignself",{"_index":446,"t":{"28":{"position":[[842,10]]}}}],["allow",{"_index":63,"t":{"4":{"position":[[470,8]]}}}],["alway",{"_index":355,"t":{"24":{"position":[[235,6]]},"34":{"position":[[133,6]]}}}],["android",{"_index":592,"t":{"38":{"position":[[346,7],[374,8],[412,7]]}}}],["anyth",{"_index":340,"t":{"22":{"position":[[1303,8]]},"34":{"position":[[1491,8]]}}}],["app",{"_index":32,"t":{"2":{"position":[[391,4]]},"4":{"position":[[1573,3]]},"10":{"position":[[26,3]]},"14":{"position":[[965,3],[1192,4]]},"22":{"position":[[1713,3],[1772,3]]},"36":{"position":[[14,3],[1260,3],[1920,4]]},"38":{"position":[[12,3],[228,3],[321,3],[367,3]]},"40":{"position":[[128,4]]}}}],["appli",{"_index":139,"t":{"12":{"position":[[105,5]]},"14":{"position":[[942,7]]},"20":{"position":[[69,5]]},"34":{"position":[[428,7],[1469,5],[1482,8]]}}}],["argument",{"_index":511,"t":{"30":{"position":[[419,10]]},"34":{"position":[[1212,10]]}}}],["array",{"_index":655,"t":{"46":{"position":[[62,5]]}}}],["aspectratio",{"_index":443,"t":{"28":{"position":[[803,12]]}}}],["asset",{"_index":606,"t":{"42":{"position":[[29,6]]}}}],["assign",{"_index":185,"t":{"14":{"position":[[339,6]]}}}],["assum",{"_index":49,"t":{"4":{"position":[[245,7]]}}}],["autocomplet",{"_index":324,"t":{"22":{"position":[[422,13]]}}}],["automat",{"_index":597,"t":{"38":{"position":[[441,14]]}}}],["avail",{"_index":277,"t":{"18":{"position":[[350,9]]},"22":{"position":[[163,9]]}}}],["averag",{"_index":168,"t":{"12":{"position":[[670,7]]}}}],["away",{"_index":653,"t":{"44":{"position":[[218,5]]}}}],["backgroundcolor",{"_index":250,"t":{"16":{"position":[[681,16],[1038,16]]},"18":{"position":[[583,16]]},"20":{"position":[[224,16]]},"22":{"position":[[333,15]]},"28":{"position":[[208,15],[224,15]]},"34":{"position":[[1047,16]]},"36":{"position":[[800,16],[878,16]]},"48":{"position":[[91,16],[285,17]]},"50":{"position":[[91,16],[335,16]]}}}],["backgroundcolor=\"cardprimari",{"_index":322,"t":{"22":{"position":[[230,29]]}}}],["backgroundcolor=\"mainbackground",{"_index":99,"t":{"4":{"position":[[1171,32]]},"36":{"position":[[1402,32]]}}}],["backgroundcolor=\"primarycardbackground",{"_index":568,"t":{"36":{"position":[[1450,39]]}}}],["backgroundcolor=\"secondarycardbackground",{"_index":572,"t":{"36":{"position":[[1607,41]]}}}],["backgroundcolor={bgcolor",{"_index":378,"t":{"24":{"position":[[1424,25]]}}}],["backgroundcolorprop",{"_index":252,"t":{"16":{"position":[[725,21]]},"48":{"position":[[135,21]]},"50":{"position":[[135,21]]}}}],["backgroundcolorprops({themekey",{"_index":536,"t":{"34":{"position":[[949,31]]}}}],["custom",{"_index":360,"t":{"24":{"position":[[446,6]]}}}],["dark",{"_index":29,"t":{"2":{"position":[[366,4]]},"36":{"position":[[40,4]]}}}],["darker",{"_index":180,"t":{"14":{"position":[[121,6]]}}}],["darkgray",{"_index":548,"t":{"36":{"position":[[341,9]]}}}],["darkmod",{"_index":564,"t":{"36":{"position":[[1280,10]]}}}],["darkthem",{"_index":562,"t":{"36":{"position":[[985,10],[1365,9]]}}}],["decid",{"_index":229,"t":{"14":{"position":[[1305,8]]},"16":{"position":[[69,6]]}}}],["default",{"_index":245,"t":{"16":{"position":[[497,7]]},"18":{"position":[[508,7],[799,7]]},"22":{"position":[[1150,9],[1181,7],[1259,7]]},"30":{"position":[[587,8]]},"34":{"position":[[352,9],[381,8],[446,8],[997,9],[1292,8],[1437,9],[1451,7]]},"36":{"position":[[676,9],[775,9],[1912,7]]},"42":{"position":[[1342,7]]}}}],["defin",{"_index":54,"t":{"4":{"position":[[320,7],[801,9]]},"12":{"position":[[16,7],[253,7],[536,8],[586,8]]},"14":{"position":[[817,6]]},"22":{"position":[[395,7],[1172,6]]},"24":{"position":[[83,7]]},"30":{"position":[[3,6]]},"34":{"position":[[374,6],[502,7]]},"42":{"position":[[217,6]]}}}],["depend",{"_index":587,"t":{"38":{"position":[[232,13]]}}}],["design",{"_index":52,"t":{"4":{"position":[[281,6]]},"14":{"position":[[30,6]]}}}],["detail",{"_index":330,"t":{"22":{"position":[[586,7]]}}}],["develop",{"_index":67,"t":{"4":{"position":[[520,9]]},"38":{"position":[[516,11]]}}}],["devic",{"_index":145,"t":{"12":{"position":[[208,6]]}}}],["differ",{"_index":134,"t":{"12":{"position":[[58,9],[111,9]]},"22":{"position":[[616,9]]}}}],["directli",{"_index":18,"t":{"2":{"position":[[249,8]]},"14":{"position":[[230,8]]}}}],["display",{"_index":395,"t":{"28":{"position":[[300,7]]}}}],["do",{"_index":16,"t":{"2":{"position":[[227,5]]},"18":{"position":[[248,5]]}}}],["doesn't",{"_index":339,"t":{"22":{"position":[[1292,7]]}}}],["don't",{"_index":345,"t":{"22":{"position":[[1476,5]]},"44":{"position":[[142,5]]}}}],["done",{"_index":657,"t":{"46":{"position":[[135,4]]}}}],["down",{"_index":385,"t":{"26":{"position":[[158,4]]}}}],["due",{"_index":162,"t":{"12":{"position":[[627,3]]}}}],["dure",{"_index":25,"t":{"2":{"position":[[324,6]]}}}],["e.g",{"_index":219,"t":{"14":{"position":[[1004,5]]},"22":{"position":[[1436,5]]},"24":{"position":[[463,5]]},"30":{"position":[[835,4]]}}}],["each",{"_index":354,"t":{"24":{"position":[[62,4]]}}}],["easi",{"_index":22,"t":{"2":{"position":[[297,4]]},"14":{"position":[[886,4]]}}}],["easili",{"_index":234,"t":{"14":{"position":[[1417,6]]},"42":{"position":[[1369,6]]}}}],["editor",{"_index":326,"t":{"22":{"position":[[463,7]]}}}],["eee",{"_index":551,"t":{"36":{"position":[[370,7]]}}}],["eeeeee",{"_index":530,"t":{"34":{"position":[[281,10]]}}}],["elev",{"_index":487,"t":{"28":{"position":[[1558,9]]},"34":{"position":[[649,9],[796,10]]}}}],["emul",{"_index":595,"t":{"38":{"position":[[420,8]]}}}],["end",{"_index":456,"t":{"28":{"position":[[989,3]]}}}],["enforc",{"_index":40,"t":{"4":{"position":[[78,8]]},"22":{"position":[[320,8],[1319,9]]}}}],["environ",{"_index":600,"t":{"38":{"position":[[528,12]]}}}],["errorprimari",{"_index":632,"t":{"42":{"position":[[899,13]]}}}],["even",{"_index":225,"t":{"14":{"position":[[1197,4]]}}}],["exampl",{"_index":27,"t":{"2":{"position":[[346,7]]},"4":{"position":[[599,7]]},"10":{"position":[[18,7]]},"14":{"position":[[156,7],[388,8],[1290,7]]},"18":{"position":[[119,8]]},"22":{"position":[[216,7],[483,7]]},"32":{"position":[[70,7]]},"36":{"position":[[65,7]]}}}],["example([vari",{"_index":538,"t":{"34":{"position":[[1166,17]]}}}],["themekey",{"_index":514,"t":{"30":{"position":[[647,11],[776,9]]},"34":{"position":[[1313,9]]}}}],["themeprovid",{"_index":76,"t":{"4":{"position":[[672,14],[1596,14],[1638,16]]},"22":{"position":[[1585,13],[1637,15],[1727,14],[1776,19]]},"36":{"position":[[189,14],[1332,14],[1882,16]]}}}],["though",{"_index":226,"t":{"14":{"position":[[1202,6]]}}}],["throughout",{"_index":216,"t":{"14":{"position":[[950,10],[1177,10]]}}}],["time",{"_index":211,"t":{"14":{"position":[[809,4]]}}}],["token",{"_index":608,"t":{"42":{"position":[[60,7],[91,6],[158,6],[210,6],[255,6],[285,8]]}}}],["tokens.color",{"_index":633,"t":{"42":{"position":[[913,16]]}}}],["tokens.colorblack",{"_index":613,"t":{"42":{"position":[[467,18],[586,18]]}}}],["tokens.colorbluedark",{"_index":635,"t":{"42":{"position":[[950,23]]}}}],["tokens.colorgreendark",{"_index":625,"t":{"42":{"position":[[747,22]]}}}],["tokens.colorindigo",{"_index":627,"t":{"42":{"position":[[788,19]]}}}],["tokens.colorindigolight",{"_index":629,"t":{"42":{"position":[[834,24]]}}}],["tokens.colorinklight",{"_index":620,"t":{"42":{"position":[[620,21]]}}}],["tokens.colorinklightest",{"_index":622,"t":{"42":{"position":[[661,24]]}}}],["tokens.colorski",{"_index":631,"t":{"42":{"position":[[882,16]]}}}],["tokens.colorskylight",{"_index":617,"t":{"42":{"position":[[543,23]]}}}],["tokens.colorwhit",{"_index":615,"t":{"42":{"position":[[505,18],[709,18]]}}}],["tokens.spacingnon",{"_index":636,"t":{"42":{"position":[[994,19]]}}}],["top",{"_index":351,"t":{"22":{"position":[[1606,3]]},"28":{"position":[[956,4]]}}}],["touchableopac",{"_index":248,"t":{"16":{"position":[[597,18],[1242,17],[1348,19]]},"24":{"position":[[692,17]]},"48":{"position":[[7,18],[529,17],[635,19]]},"50":{"position":[[7,18],[582,17],[688,19]]}}}],["touchableopacityprop",{"_index":364,"t":{"24":{"position":[[710,22]]}}}],["touchableopacityprops>(touchableopac",{"_index":366,"t":{"24":{"position":[[850,41]]}}}],["transform",{"_index":506,"t":{"30":{"position":[[251,10],[685,10]]}}}],["transform({valu",{"_index":513,"t":{"30":{"position":[[622,17]]}}}],["transpar",{"_index":504,"t":{"30":{"position":[[160,12],[209,15]]}}}],["transparency={0.5",{"_index":510,"t":{"30":{"position":[[397,18]]}}}],["transparentcompon",{"_index":508,"t":{"30":{"position":[[313,20],[375,21]]}}}],["tree",{"_index":352,"t":{"22":{"position":[[1624,5]]}}}],["trivial",{"_index":233,"t":{"14":{"position":[[1389,7]]}}}],["true",{"_index":396,"t":{"28":{"position":[[314,4]]}}}],["type",{"_index":39,"t":{"4":{"position":[[73,4]]},"12":{"position":[[200,4]]},"16":{"position":[[310,4],[857,4],[1059,4]]},"18":{"position":[[221,4],[316,5]]},"22":{"position":[[1225,4],[1401,5]]},"24":{"position":[[892,4]]},"36":{"position":[[952,4]]},"42":{"position":[[1308,4]]},"48":{"position":[[303,4]]},"50":{"position":[[356,4]]}}}],["typeof",{"_index":337,"t":{"22":{"position":[[1238,6]]},"36":{"position":[[965,6]]},"42":{"position":[[1321,6]]}}}],["typesafeti",{"_index":347,"t":{"22":{"position":[[1487,10]]}}}],["typescript",{"_index":44,"t":{"4":{"position":[[142,11]]},"22":{"position":[[309,10]]}}}],["typographi",{"_index":287,"t":{"18":{"position":[[922,11]]},"28":{"position":[[1684,10]]}}}],["ui",{"_index":35,"t":{"4":{"position":[[27,2],[107,2],[182,2],[262,2]]}}}],["under",{"_index":85,"t":{"4":{"position":[[831,5]]},"18":{"position":[[1003,5]]}}}],["understand",{"_index":214,"t":{"14":{"position":[[894,10]]}}}],["unlik",{"_index":540,"t":{"34":{"position":[[1362,6]]}}}],["up",{"_index":165,"t":{"12":{"position":[[652,3]]},"18":{"position":[[993,2]]},"22":{"position":[[608,2]]},"38":{"position":[[186,2],[509,2]]}}}],["updat",{"_index":222,"t":{"14":{"position":[[1085,6],[1136,8]]}}}],["upgrad",{"_index":652,"t":{"44":{"position":[[192,7]]}}}],["upon",{"_index":51,"t":{"4":{"position":[[274,4]]}}}],["us",{"_index":8,"t":{"2":{"position":[[86,3]]},"4":{"position":[[1520,3]]},"10":{"position":[[45,3]]},"12":{"position":[[227,6],[530,5],[618,3]]},"14":{"position":[[331,4]]},"16":{"position":[[123,4],[128,3],[565,3]]},"20":{"position":[[127,3]]},"22":{"position":[[12,5],[263,3]]},"24":{"position":[[472,3],[517,3]]},"30":{"position":[[37,3]]},"32":{"position":[[91,5]]},"34":{"position":[[86,3],[586,3]]},"38":{"position":[[58,3]]},"40":{"position":[[84,3]]},"42":{"position":[[9,5],[118,5],[172,5]]},"44":{"position":[[99,5]]},"46":{"position":[[77,5]]}}}],["usag",{"_index":127,"t":{"8":{"position":[[20,5]]},"44":{"position":[[54,5]]}}}],["user",{"_index":146,"t":{"12":{"position":[[219,4]]},"22":{"position":[[1415,4]]}}}],["useresponsiveprop",{"_index":361,"t":{"24":{"position":[[525,17],[581,18]]}}}],["useresponsiveprop(color",{"_index":371,"t":{"24":{"position":[[1216,25]]}}}],["userestyl",{"_index":247,"t":{"16":{"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":264,"t":{"16":{"position":[[1197,28]]},"48":{"position":[[484,28]]},"50":{"position":[[537,28]]}}}],["usest",{"_index":545,"t":{"36":{"position":[[118,10]]}}}],["usestate(fals",{"_index":566,"t":{"36":{"position":[[1306,16]]}}}],["usethem",{"_index":9,"t":{"2":{"position":[[94,8]]},"24":{"position":[[600,9]]}}}],["usethemedisplay",{"_index":114,"t":{"4":{"position":[[1487,25]]}}}],["variant=\"body\">thi",{"_index":110,"t":{"4":{"position":[[1390,19]]}}}],["variant=\"buttonlabel",{"_index":379,"t":{"24":{"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":"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":9},{"i":12,"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":11},{"i":14,"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. 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":13},{"i":16,"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":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":"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":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":"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":23},{"i":26,"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":25},{"i":28,"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: { cardRegularBackground: '#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: 'cardRegularBackground', }}) const Card = createRestyleComponent, Theme>([variant]) 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":27},{"i":30,"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":29},{"i":32,"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":29},{"i":34,"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":29},{"i":36,"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":35},{"i":38,"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":35},{"i":40,"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":35},{"i":42,"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":35},{"i":44,"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":43},{"i":46,"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":45},{"i":48,"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":45},{"i":50,"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":49}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,3.109,1,2.112,2,0.656,3,4.203,4,2.112,5,0.647,6,1.961,7,1.733,8,0.671,9,1.733,10,3.109,11,0.904,12,0.745,13,0.92,14,1.733,15,1.733,16,2.112,17,2.112,18,2.112,19,2.112,20,3.16,21,2.112,22,1.733,23,2.112,24,1.238,25,1.484,26,0.671,27,0.604,28,2.112,29,2.112,30,2.112,31,2.112,32,1.733,33,2.112,34,0.828,35,2.112,36,2.112,37,1.733,38,2.112,39,2.112,40,0.745,41,2.112,42,1.733,43,2.112,44,0.828,45,1.298,46,1.733,47,0.726,48,0.807,49,2.662,50,1.298,51,1.484,52,1.943,53,1.484,54,1.484,55,0.485,56,1.298,57,1.484,58,1.733,59,1.733,60,0.816,61,2.38,62,1.298,63,1.647,64,1.484,65,2.451,66,1.733,67,1.943,68,1.733,69,1.733,70,3.16,71,1.377,72,1.733,73,1.733,74,2.112,75,2.112,76,2.112,77,1.733,78,1.298,79,1.733,80,1.298,81,1.733,82,2.221,83,2.112,84,2.112,85,1.733,86,2.112,87,2.112,88,2.112,89,0.293,90,2.112,91,0.828,92,1.733]],["t/4",[55,1.248,93,4.18,94,4.283,95,3.011,96,3.131,97,4.18,98,5.092,99,3.579,100,4.283]],["t/6",[5,0.95,101,3.812,102,3.264,103,3.812,104,2.528]],["t/8",[6,2.008,44,1.806,89,0.64,91,1.806,105,3.239,106,4.608]],["t/10",[2,0.406,8,0.929,24,1.912,34,1.146,40,1.603,42,2.4,48,0.748,56,2.453,57,2.055,60,0.53,78,1.798,80,1.798,89,0.63,107,3.139,108,3.429,109,2.924,110,3.275,111,2.924,112,2.4,113,2.055,114,2.4,115,1.798,116,2.924,117,3.275,118,1.274,119,2.924,120,2.4,121,2.924,122,2.4,123,2.924,124,1.146,125,2.924,126,2.924,127,2.804,128,1.032,129,2.804,130,2.924,131,2.924,132,2.055,133,2.924,134,2.924,135,2.453,136,1.798,137,2.924,138,2.924,139,2.924,140,2.4,141,2.924,142,1.798,143,2.4,144,2.924,145,2.924,146,2.924,147,2.924,148,2.924,149,2.924]],["t/12",[2,0.614,10,1.928,15,1.928,22,1.928,24,0.92,26,1.65,40,0.829,44,1.579,48,0.703,56,2.101,60,0.62,65,1.279,89,0.326,91,1.339,115,1.444,118,1.489,124,0.92,128,0.829,150,2.348,151,2.348,152,2.348,153,3.45,154,2.806,155,2.101,156,1.651,157,2.348,158,2.348,159,3.418,160,1.928,161,2.348,162,1.928,163,2.721,164,2.348,165,4.029,166,2.806,167,1.928,168,1.928,169,2.806,170,1.651,171,1.928,172,1.928,173,1.928,174,1.928,175,1.928,176,1.928,177,1.928,178,1.928,179,1.444,180,1.928,181,1.651,182,1.928,183,1.651,184,1.651,185,1.928,186,1.928,187,2.402,188,2.806,189,3.418,190,2.348,191,2.348,192,1.651,193,2.348,194,1.928,195,2.348,196,2.348,197,3.418,198,2.477,199,1.651,200,1.444,201,2.402,202,1.928,203,3.418,204,3.418,205,1.928,206,2.348,207,2.348,208,1.928,209,2.348,210,1.928,211,1.279,212,2.348,213,2.348,214,1.928,215,2.348,216,1.928,217,1.928,218,1.928]],["t/14",[2,0.729,5,0.652,6,0.93,7,1.752,8,1.012,11,1.293,26,1.343,27,0.911,34,0.836,40,0.753,44,0.836,47,0.971,48,0.782,50,1.312,51,1.5,55,0.732,58,1.752,60,0.691,61,2.197,62,1.312,63,1.858,64,1.5,117,1.752,124,0.836,128,0.753,142,1.312,154,1.752,156,1.5,163,1.312,179,2.343,192,2.97,199,1.5,219,1.5,220,2.053,221,1.312,222,2.134,223,2.134,224,2.134,225,2.134,226,2.134,227,1.752,228,1.5,229,0.753,230,1.162,231,2.134,232,2.134,233,2.134,234,1.752,235,2.134,236,1.734,237,1.388,238,2.239,239,0.753,240,2.239,241,2.615,242,1.752,243,1.162,244,1.752,245,1.752,246,2.134,247,1.752,248,1.752,249,1.752,250,1.5,251,2.134,252,2.239,253,1.312,254,1.752,255,3.128,256,3.81,257,2.615,258,2.239,259,2.343,260,1.752,261,2.343,262,2.134,263,2.134,264,2.134,265,2.134,266,2.134,267,2.134,268,1.312,269,1.162,270,1.162,271,2.134]],["t/16",[2,0.653,5,0.481,8,1.281,11,0.977,12,0.829,13,1.023,27,1.265,45,2.477,47,1.128,48,0.818,52,2.101,53,1.651,54,1.651,55,0.785,60,0.802,61,1.141,63,1.734,65,1.861,66,1.928,67,2.101,69,1.928,71,1.023,89,0.559,102,1.651,114,2.806,163,1.444,210,1.928,211,1.279,219,1.651,220,1.141,221,1.444,229,1.66,236,1.279,237,1.023,239,1.206,243,1.861,272,2.348,273,2.348,274,1.928,275,2.402,276,2.402,277,2.348,278,2.348,279,1.861,280,1.444,281,2.477,282,1.651,283,1.651,284,1.651,285,4.029,286,1.651,287,1.651,288,1.651,289,2.348,290,2.402,291,1.651,292,2.101,293,1.651,294,2.101,295,1.651,296,1.651,297,1.651]],["t/18",[5,0.847,11,1.183,34,2.098,48,0.692,61,2.011,82,2.909,89,0.574,115,2.544,166,3.397,239,1.46,298,2.909,299,3.397,300,2.253,301,4.138,302,4.138,303,4.138,304,3.397,305,4.138]],["t/20",[2,0.508,27,1.45,44,1.436,48,0.739,60,0.664,89,0.508,113,3.252,118,1.597,128,1.293,155,2.845,156,2.576,238,2.576,269,1.995,270,1.995,306,3.664,307,3.008,308,3.664,309,2.845,310,3.664,311,3.664,312,3.664,313,3.664,314,3.664,315,3.664,316,3.664,317,3.664,318,3.664,319,1.995,320,1.781,321,2.253,322,2.576,323,3.008]],["t/22",[2,0.642,5,0.41,8,0.636,11,0.868,12,1.294,13,0.872,24,0.784,26,0.636,34,0.784,40,1.552,47,1.01,48,0.831,50,1.23,55,0.46,60,0.839,61,1.474,62,1.23,63,1.603,68,1.642,71,0.872,78,2.253,79,1.642,80,2.515,81,1.642,89,0.421,107,2.253,112,1.642,113,1.406,124,0.784,128,0.706,129,1.406,132,1.406,135,1.23,136,1.23,140,1.642,200,1.23,201,2.576,202,2.491,211,1.089,229,1.697,280,1.23,281,1.23,292,2.253,293,1.406,298,2.133,324,2,325,2,326,1.642,327,2,328,3.034,329,1.642,330,2,331,1.089,332,3.034,333,2,334,1.642,335,3.034,336,2,337,1.642,338,3.034,339,2,340,4.09,341,2,342,2,343,3.665,344,1.642,345,1.642,346,3.034,347,2,348,2,349,2,350,2,351,2,352,2,353,2,354,2,355,2,356,2,357,2,358,2]],["t/24",[2,0.728,5,0.72,11,1.289,44,1.378,47,0.808,48,0.801,60,0.902,89,0.488,91,1.378,124,1.378,162,2.886,163,2.162,187,2.471,194,2.886,214,2.886,217,2.886,218,2.886,221,2.162,227,2.886,280,2.162,331,1.914,334,2.886,337,2.886,345,2.886,359,3.516,360,3.516,361,2.886,362,3.516,363,3.516,364,2.886,365,2.886,366,2.886,367,2.886]],["t/26",[2,0.751,5,0.398,6,0.847,8,0.943,9,2.436,11,0.556,12,0.686,14,1.595,24,1.163,25,2.086,26,1.38,27,0.849,32,1.595,40,1.532,44,1.163,46,1.595,47,0.827,48,0.802,49,2.833,55,0.682,57,1.366,59,1.595,60,0.653,63,0.761,89,0.412,91,1.163,92,1.595,95,1.366,101,1.595,102,2.086,104,1.058,107,1.195,110,1.595,118,0.847,122,1.595,124,0.761,128,1.271,142,1.195,153,1.366,167,1.595,168,1.595,169,1.595,170,1.366,171,1.595,172,1.595,173,1.595,174,1.595,175,1.595,176,1.595,177,1.595,178,1.595,179,1.195,180,1.595,181,1.366,182,1.595,183,1.366,184,1.366,187,1.366,188,1.595,199,1.366,200,1.195,208,1.595,228,1.366,234,1.595,236,1.616,237,1.569,239,0.686,250,1.366,252,1.366,254,1.595,257,1.595,258,1.366,259,1.824,260,1.595,261,1.195,268,1.195,269,1.616,270,1.616,294,1.195,298,1.366,300,1.058,309,1.195,319,1.058,320,0.944,321,1.195,322,1.366,323,1.595,329,1.595,368,1.943,369,1.595,370,1.943,371,1.943,372,1.943,373,1.943,374,1.943,375,1.943,376,1.366,377,1.943,378,1.943,379,1.943,380,1.366,381,1.943,382,1.943,383,1.595,384,1.943,385,2.967,386,1.943,387,1.595,388,1.943,389,1.943,390,1.595,391,1.943,392,1.366,393,1.595,394,1.943]],["t/28",[2,0.692,5,0.632,11,0.586,24,1.21,26,0.651,27,0.586,40,1.461,47,0.709,48,0.82,52,1.259,53,2.171,54,1.439,55,0.47,60,0.674,65,1.681,67,2.286,78,2.545,80,2.545,89,0.429,104,1.681,107,1.259,108,1.439,115,2.286,118,0.892,127,1.439,128,0.723,129,2.171,132,1.439,135,1.259,136,1.259,205,1.681,220,1.501,221,1.259,229,1.461,230,2.254,237,2.112,239,0.723,250,3.507,253,1.899,269,1.115,270,1.115,299,1.681,300,1.115,307,1.681,309,1.259,319,2.254,320,2.011,321,1.259,326,1.681,331,1.115,376,1.439,383,1.681,392,1.439,395,2.048,396,3.088,397,2.048,398,3.088,399,2.535,400,2.535,401,1.681,402,2.048,403,1.439,404,2.048,405,1.681,406,3.088,407,1.681,408,2.048,409,2.048,410,1.681,411,2.048,412,2.048,413,2.048,414,1.681,415,1.681,416,2.048,417,1.681,418,2.048]],["t/30",[2,0.563,5,1.009,11,1.16,12,1.431,13,1.767,34,1.589,40,1.873,124,1.589,135,2.493,220,1.971,229,1.739,230,2.683,369,3.329,390,3.329,392,2.85,419,4.055,420,4.055,421,4.055,422,4.055]],["t/32",[2,0.276,5,0.747,6,0.866,26,1.525,27,0.863,48,0.507,77,1.632,108,1.397,118,0.866,127,1.397,155,1.222,192,1.397,219,1.397,220,1.467,229,1.065,230,1.082,239,1.065,240,2.122,241,1.632,242,1.632,243,1.988,244,2.478,245,2.997,247,1.632,248,1.632,249,2.478,253,1.222,255,1.632,258,1.397,259,1.222,261,1.222,300,1.082,320,0.966,393,1.632,399,1.632,400,1.632,401,1.632,403,1.397,405,1.632,407,1.632,410,1.632,423,1.987,424,1.987,425,1.987,426,1.987,427,1.987,428,1.987,429,1.987,430,4.156,431,1.987,432,1.987,433,1.987,434,3.019,435,1.987,436,1.987,437,1.987,438,1.987,439,1.987,440,1.987,441,1.987,442,1.987,443,1.987,444,1.987,445,1.987,446,1.987,447,1.987,448,1.987,449,1.987,450,1.987,451,1.987,452,1.987,453,1.987,454,1.987,455,1.987,456,1.987,457,1.987,458,1.987,459,1.987,460,1.987,461,1.987,462,1.987,463,1.632,464,1.987,465,1.987,466,1.987,467,1.987,468,1.987,469,1.987,470,1.987,471,1.987,472,1.987,473,1.987,474,1.987,475,1.987,476,1.987,477,1.987,478,1.987,479,1.987,480,1.987,481,1.987,482,1.987,483,1.987,484,1.987,485,1.987,486,1.632,487,1.987,488,1.987,489,1.397,490,1.987,491,1.987,492,1.987,493,1.987,494,1.987,495,1.987,496,1.987,497,1.987,498,1.987,499,1.987,500,1.987,501,1.987,502,1.987,503,1.987,504,1.987,505,1.987,506,1.987,507,1.987,508,1.987,509,1.987,510,1.987,511,1.987,512,1.987,513,1.987,514,1.987,515,1.987,516,1.987,517,1.987,518,1.987,519,1.987,520,1.987,521,1.987,522,1.987,523,1.987,524,1.987,525,1.987,526,1.987,527,1.987,528,1.987,529,1.987,530,1.987,531,1.987]],["t/34",[2,0.576,5,0.635,11,0.887,24,1.216,26,0.986,34,1.628,40,1.964,47,0.713,48,0.723,52,1.908,55,0.713,60,0.753,89,0.431,118,1.81,124,1.628,136,2.553,155,1.908,200,1.908,220,2.275,229,1.466,230,2.261,237,1.352,240,2.181,253,1.908,274,2.547,300,2.722,414,2.547,415,3.409,417,3.842,532,4.153,533,4.153,534,4.153,535,3.103,536,4.153,537,3.103,538,3.103,539,3.103,540,3.103,541,3.103]],["t/36",[6,2.182,89,0.578,95,2.929,103,3.42,198,3.079,279,2.727,280,2.562,331,2.269,387,3.42,486,3.42,542,4.166,543,4.166,544,5.008,545,4.166,546,4.166,547,4.166]],["t/38",[47,1.028,55,1.028,89,0.621,279,2.435,284,3.672,548,4.472,549,4.472,550,4.472,551,4.472]],["t/40",[2,0.578,8,0.991,12,1.101,13,1.359,27,1.192,45,2.885,47,1.151,48,0.825,55,0.717,60,0.851,63,1.839,71,1.359,211,1.698,229,1.768,239,1.471,243,2.269,275,2.193,276,2.193,279,1.698,281,2.885,282,2.193,283,2.193,286,2.193,287,2.193,288,2.193,290,2.929,291,2.193,292,1.918,294,2.562,295,2.193,296,2.193,297,2.193]],["t/42",[2,0.572,8,0.976,12,1.084,13,1.339,27,1.179,45,2.863,47,1.144,48,0.826,55,0.706,60,0.844,63,1.825,71,1.339,211,1.673,229,1.757,239,1.456,243,2.246,275,2.159,276,2.159,279,1.673,281,2.863,282,2.159,283,2.159,284,2.899,286,2.159,287,2.159,288,2.159,290,2.899,291,2.159,292,1.889,294,2.536,295,2.159,296,2.159,297,2.159]],["t/44",[2,0.625,8,0.593,12,1.239,13,0.813,26,1.116,27,0.533,44,0.731,47,0.806,48,0.827,49,2.467,50,1.147,51,1.311,55,0.429,60,0.851,61,2.415,62,1.147,63,1.67,64,1.311,65,1.566,67,1.147,71,0.813,72,1.531,73,1.531,82,2.022,85,1.531,91,1.376,104,1.016,128,1.015,153,1.311,170,1.311,179,1.147,181,1.311,183,2.022,184,2.773,185,2.881,186,2.881,201,1.311,236,1.566,237,1.53,239,1.015,252,1.311,259,1.147,261,1.147,268,1.147,269,1.566,270,1.016,304,2.881,309,1.147,319,1.016,320,0.907,344,1.531,361,1.531,364,1.531,365,1.531,366,1.531,367,2.361,380,1.311,403,2.022,552,1.865,553,1.865,554,1.865,555,1.865,556,1.865,557,1.865,558,1.865,559,1.865,560,1.865,561,1.865,562,1.865,563,2.876,564,1.865,565,3.51,566,1.865,567,2.876,568,2.876,569,1.865,570,2.876,571,1.865,572,2.876,573,1.865,574,1.865,575,1.865,576,1.865,577,1.865,578,1.865,579,2.876,580,2.876,581,1.865,582,1.865,583,1.865,584,1.865,585,1.865,586,1.865,587,1.865]],["t/46",[5,0.877,6,1.417,12,1.148,25,2.286,37,2.67,89,0.451,91,1.996,96,3.131,99,2.286,105,3.012,120,2.67,142,2.634,198,2,238,3.012,376,2.286,489,3.58,588,3.252,589,3.252,590,3.252,591,3.252,592,3.252,593,3.252,594,4.461,595,3.252,596,3.252,597,3.252,598,3.252,599,3.252,600,3.252,601,4.791,602,4.791,603,3.252,604,3.252,605,3.252,606,3.252,607,3.252,608,3.252,609,3.252,610,3.252]],["t/48",[0,4.18,5,1.042,89,0.594,91,1.679,96,2.634,105,3.011,198,2.634,228,3.011,331,2.332,594,3.516,611,4.283,612,4.283,613,4.283,614,4.283]],["t/50",[2,0.695,8,0.792,11,0.713,24,0.977,26,0.792,27,0.713,34,1.398,47,0.82,48,0.786,55,0.573,56,1.533,60,0.647,71,1.086,89,0.578,93,2.046,96,2.194,97,2.929,99,2.508,104,1.357,128,1.259,143,2.046,160,2.929,216,2.046,236,1.943,237,1.086,268,1.533,293,1.752,319,1.357,320,1.211,321,1.533,322,1.752,380,1.752,430,2.046,463,2.046,489,1.752,615,3.568,616,2.492,617,2.492,618,5.009,619,4.167,620,2.492,621,2.492,622,2.492,623,3.568,624,2.492,625,3.568,626,2.492,627,2.492,628,2.492,629,2.492,630,2.492,631,2.492,632,2.492,633,2.492,634,2.492,635,2.492,636,2.492,637,2.492,638,2.492,639,2.492,640,2.492,641,2.492,642,2.492,643,2.492,644,2.492,645,2.492,646,2.492,647,2.492,648,2.492,649,2.492,650,2.492,651,2.492,652,2.492,653,2.492,654,3.568,655,2.492,656,2.492,657,2.492]]],"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":[[353,1],[382,1],[405,1],[430,2],[465,2],[468,3],[662,1]]},"12":{"position":[[411,1],[413,1],[594,2],[609,1],[633,1],[791,2],[794,3]]},"14":{"position":[[380,2],[479,1],[667,2],[769,1],[1045,2],[1074,1],[1090,4],[1109,1],[1119,1],[1221,2],[1235,1],[1338,2],[1347,1],[1422,2],[1425,2],[1428,3],[1432,2]]},"16":{"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]]},"18":{"position":[[252,2],[255,2]]},"20":{"position":[[245,1],[270,1],[300,2],[303,3]]},"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]]},"24":{"position":[[125,1],[127,2],[130,2],[133,1],[147,1],[198,1],[214,2],[217,3],[221,2]]},"26":{"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]]},"28":{"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],[1007,1],[1017,1],[1044,2],[1089,3],[1104,1],[1209,2]]},"32":{"position":[[133,1],[319,1],[335,1]]},"34":{"position":[[173,1],[289,2],[303,3],[334,1],[416,2]]},"40":{"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]]},"42":{"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]]},"44":{"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]]},"50":{"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]]}}}],["0",{"_index":129,"t":{"10":{"position":[[391,2],[414,2]]},"22":{"position":[[205,2]]},"28":{"position":[[317,2],[763,2]]}}}],["0.1",{"_index":571,"t":{"44":{"position":[[937,4]]}}}],["0.2",{"_index":404,"t":{"28":{"position":[[736,4]]}}}],["0.3",{"_index":569,"t":{"44":{"position":[[857,4]]}}}],["000",{"_index":402,"t":{"28":{"position":[[713,7]]}}}],["0a906",{"_index":178,"t":{"12":{"position":[[547,10]]},"26":{"position":[[836,10]]}}}],["0b0b0b",{"_index":180,"t":{"12":{"position":[[565,10]]},"26":{"position":[[854,10]]}}}],["0ecd9d",{"_index":176,"t":{"12":{"position":[[525,10]]},"26":{"position":[[814,10]]}}}],["1",{"_index":535,"t":{"34":{"position":[[292,1]]}}}],["10",{"_index":143,"t":{"10":{"position":[[659,2]]},"50":{"position":[[415,4]]}}}],["1024",{"_index":134,"t":{"10":{"position":[[459,5]]}}}],["111",{"_index":557,"t":{"44":{"position":[[333,7]]}}}],["15",{"_index":408,"t":{"28":{"position":[[792,3]]}}}],["16",{"_index":269,"t":{"14":{"position":[[1386,3]]},"20":{"position":[[281,3]]},"26":{"position":[[1024,3],[1127,3]]},"28":{"position":[[234,3]]},"44":{"position":[[429,3],[708,3]]}}}],["2",{"_index":656,"t":{"50":{"position":[[1252,1]]}}}],["24",{"_index":270,"t":{"14":{"position":[[1402,3]]},"20":{"position":[[288,3]]},"26":{"position":[[1031,3],[1143,3]]},"28":{"position":[[241,3]]},"44":{"position":[[724,3]]}}}],["28",{"_index":266,"t":{"14":{"position":[[1302,3]]}}}],["333",{"_index":559,"t":{"44":{"position":[[351,7]]}}}],["34",{"_index":260,"t":{"14":{"position":[[1183,3]]},"26":{"position":[[1102,3]]}}}],["36",{"_index":267,"t":{"14":{"position":[[1318,3]]}}}],["3f22ab",{"_index":172,"t":{"12":{"position":[[477,10]]},"26":{"position":[[766,10]]}}}],["40",{"_index":323,"t":{"20":{"position":[[296,3]]},"26":{"position":[[1039,3]]}}}],["42.5",{"_index":262,"t":{"14":{"position":[[1199,5]]}}}],["5",{"_index":406,"t":{"28":{"position":[[774,3],[807,2]]}}}],["56dcba",{"_index":174,"t":{"12":{"position":[[500,10]]},"26":{"position":[[789,10]]}}}],["5a31f4",{"_index":170,"t":{"12":{"position":[[454,10]]},"26":{"position":[[743,10]]},"44":{"position":[[300,10]]}}}],["600",{"_index":265,"t":{"14":{"position":[[1285,6]]}}}],["768",{"_index":132,"t":{"10":{"position":[[441,4]]},"22":{"position":[[216,4]]},"28":{"position":[[328,4]]}}}],["8",{"_index":309,"t":{"20":{"position":[[78,2],[275,2]]},"26":{"position":[[1018,2]]},"28":{"position":[[228,2]]},"44":{"position":[[423,2]]}}}],["812",{"_index":131,"t":{"10":{"position":[[425,4]]}}}],["8c6ff7",{"_index":168,"t":{"12":{"position":[[428,10]]},"26":{"position":[[717,10]]}}}],["abov",{"_index":209,"t":{"12":{"position":[[1298,6]]}}}],["accept",{"_index":298,"t":{"18":{"position":[[27,7]]},"22":{"position":[[43,6],[242,6]]},"26":{"position":[[366,6]]}}}],["access",{"_index":360,"t":{"24":{"position":[[24,6]]}}}],["acknowledg",{"_index":31,"t":{"2":{"position":[[411,12]]}}}],["action",{"_index":223,"t":{"14":{"position":[[92,6]]}}}],["activityind",{"_index":338,"t":{"22":{"position":[[673,18],[1537,18]]}}}],["add",{"_index":93,"t":{"4":{"position":[[0,3],[52,3]]},"50":{"position":[[189,3]]}}}],["address",{"_index":545,"t":{"36":{"position":[[156,7]]}}}],["advanc",{"_index":278,"t":{"16":{"position":[[520,8]]}}}],["alias",{"_index":426,"t":{"32":{"position":[[125,7]]}}}],["aligncont",{"_index":478,"t":{"32":{"position":[[816,13]]}}}],["alignitem",{"_index":479,"t":{"32":{"position":[[830,11]]}}}],["alignself",{"_index":480,"t":{"32":{"position":[[842,10]]}}}],["allow",{"_index":33,"t":{"2":{"position":[[470,8]]}}}],["alway",{"_index":326,"t":{"22":{"position":[[235,6]]},"28":{"position":[[133,6]]}}}],["android",{"_index":602,"t":{"46":{"position":[[346,7],[374,8],[412,7]]}}}],["anyth",{"_index":383,"t":{"26":{"position":[[1303,8]]},"28":{"position":[[1491,8]]}}}],["app",{"_index":91,"t":{"2":{"position":[[1573,3]]},"8":{"position":[[26,3]]},"12":{"position":[[965,3],[1192,4]]},"24":{"position":[[391,4]]},"26":{"position":[[1713,3],[1772,3]]},"44":{"position":[[14,3],[1260,3],[1920,4]]},"46":{"position":[[12,3],[228,3],[321,3],[367,3]]},"48":{"position":[[128,4]]}}}],["appli",{"_index":115,"t":{"10":{"position":[[105,5]]},"12":{"position":[[942,7]]},"18":{"position":[[69,5]]},"28":{"position":[[428,7],[1469,5],[1482,8]]}}}],["argument",{"_index":414,"t":{"28":{"position":[[1212,10]]},"34":{"position":[[419,10]]}}}],["array",{"_index":549,"t":{"38":{"position":[[62,5]]}}}],["aspectratio",{"_index":477,"t":{"32":{"position":[[803,12]]}}}],["asset",{"_index":616,"t":{"50":{"position":[[29,6]]}}}],["assign",{"_index":164,"t":{"12":{"position":[[339,6]]}}}],["assum",{"_index":19,"t":{"2":{"position":[[245,7]]}}}],["autocomplet",{"_index":373,"t":{"26":{"position":[[422,13]]}}}],["automat",{"_index":607,"t":{"46":{"position":[[441,14]]}}}],["avail",{"_index":234,"t":{"14":{"position":[[350,9]]},"26":{"position":[[163,9]]}}}],["averag",{"_index":145,"t":{"10":{"position":[[670,7]]}}}],["away",{"_index":547,"t":{"36":{"position":[[218,5]]}}}],["backgroundcolor",{"_index":239,"t":{"14":{"position":[[583,16]]},"16":{"position":[[681,16],[1038,16]]},"18":{"position":[[224,16]]},"26":{"position":[[333,15]]},"28":{"position":[[1047,16]]},"32":{"position":[[208,15],[224,15]]},"40":{"position":[[91,16],[285,17]]},"42":{"position":[[91,16],[335,16]]},"44":{"position":[[800,16],[878,16]]}}}],["backgroundcolor=\"cardprimari",{"_index":371,"t":{"26":{"position":[[230,29]]}}}],["backgroundcolor=\"mainbackground",{"_index":73,"t":{"2":{"position":[[1171,32]]},"44":{"position":[[1402,32]]}}}],["backgroundcolor=\"primarycardbackground",{"_index":578,"t":{"44":{"position":[[1450,39]]}}}],["backgroundcolor=\"secondarycardbackground",{"_index":582,"t":{"44":{"position":[[1607,41]]}}}],["backgroundcolor={bgcolor",{"_index":354,"t":{"22":{"position":[[1424,25]]}}}],["backgroundcolorprop",{"_index":283,"t":{"16":{"position":[[725,21]]},"40":{"position":[[135,21]]},"42":{"position":[[135,21]]}}}],["backgroundcolorprops({themekey",{"_index":409,"t":{"28":{"position":[[949,31]]}}}],["custom",{"_index":333,"t":{"22":{"position":[[446,6]]}}}],["dark",{"_index":365,"t":{"24":{"position":[[366,4]]},"44":{"position":[[40,4]]}}}],["darker",{"_index":157,"t":{"12":{"position":[[121,6]]}}}],["darkgray",{"_index":558,"t":{"44":{"position":[[341,9]]}}}],["darkmod",{"_index":574,"t":{"44":{"position":[[1280,10]]}}}],["darkthem",{"_index":572,"t":{"44":{"position":[[985,10],[1365,9]]}}}],["decid",{"_index":210,"t":{"12":{"position":[[1305,8]]},"16":{"position":[[69,6]]}}}],["default",{"_index":237,"t":{"14":{"position":[[508,7],[799,7]]},"16":{"position":[[497,7]]},"26":{"position":[[1150,9],[1181,7],[1259,7]]},"28":{"position":[[352,9],[381,8],[446,8],[997,9],[1292,8],[1437,9],[1451,7]]},"34":{"position":[[587,8]]},"44":{"position":[[676,9],[775,9],[1912,7]]},"50":{"position":[[1342,7]]}}}],["defin",{"_index":24,"t":{"2":{"position":[[320,7],[801,9]]},"10":{"position":[[16,7],[253,7],[536,8],[586,8]]},"12":{"position":[[817,6]]},"22":{"position":[[83,7]]},"26":{"position":[[395,7],[1172,6]]},"28":{"position":[[374,6],[502,7]]},"34":{"position":[[3,6]]},"50":{"position":[[217,6]]}}}],["depend",{"_index":597,"t":{"46":{"position":[[232,13]]}}}],["design",{"_index":22,"t":{"2":{"position":[[281,6]]},"12":{"position":[[30,6]]}}}],["detail",{"_index":379,"t":{"26":{"position":[[586,7]]}}}],["develop",{"_index":37,"t":{"2":{"position":[[520,9]]},"46":{"position":[[516,11]]}}}],["devic",{"_index":121,"t":{"10":{"position":[[208,6]]}}}],["differ",{"_index":110,"t":{"10":{"position":[[58,9],[111,9]]},"26":{"position":[[616,9]]}}}],["directli",{"_index":162,"t":{"12":{"position":[[230,8]]},"24":{"position":[[249,8]]}}}],["display",{"_index":431,"t":{"32":{"position":[[300,7]]}}}],["do",{"_index":227,"t":{"14":{"position":[[248,5]]},"24":{"position":[[227,5]]}}}],["doesn't",{"_index":382,"t":{"26":{"position":[[1292,7]]}}}],["don't",{"_index":387,"t":{"26":{"position":[[1476,5]]},"36":{"position":[[142,5]]}}}],["done",{"_index":551,"t":{"38":{"position":[[135,4]]}}}],["down",{"_index":421,"t":{"30":{"position":[[158,4]]}}}],["due",{"_index":139,"t":{"10":{"position":[[627,3]]}}}],["dure",{"_index":363,"t":{"24":{"position":[[324,6]]}}}],["e.g",{"_index":200,"t":{"12":{"position":[[1004,5]]},"22":{"position":[[463,5]]},"26":{"position":[[1436,5]]},"34":{"position":[[835,4]]}}}],["each",{"_index":325,"t":{"22":{"position":[[62,4]]}}}],["easi",{"_index":194,"t":{"12":{"position":[[886,4]]},"24":{"position":[[297,4]]}}}],["easili",{"_index":216,"t":{"12":{"position":[[1417,6]]},"50":{"position":[[1369,6]]}}}],["editor",{"_index":375,"t":{"26":{"position":[[463,7]]}}}],["eee",{"_index":561,"t":{"44":{"position":[[370,7]]}}}],["eeeeee",{"_index":397,"t":{"28":{"position":[[281,10]]}}}],["elev",{"_index":400,"t":{"28":{"position":[[649,9],[796,10]]},"32":{"position":[[1558,9]]}}}],["emul",{"_index":605,"t":{"46":{"position":[[420,8]]}}}],["end",{"_index":490,"t":{"32":{"position":[[989,3]]}}}],["enforc",{"_index":9,"t":{"2":{"position":[[78,8]]},"26":{"position":[[320,8],[1319,9]]}}}],["environ",{"_index":610,"t":{"46":{"position":[[528,12]]}}}],["errorprimari",{"_index":642,"t":{"50":{"position":[[899,13]]}}}],["even",{"_index":206,"t":{"12":{"position":[[1197,4]]}}}],["exampl",{"_index":44,"t":{"2":{"position":[[599,7]]},"8":{"position":[[18,7]]},"12":{"position":[[156,7],[388,8],[1290,7]]},"14":{"position":[[119,8]]},"20":{"position":[[70,7]]},"24":{"position":[[346,7]]},"26":{"position":[[216,7],[483,7]]},"44":{"position":[[65,7]]}}}],["example([vari",{"_index":412,"t":{"28":{"position":[[1166,17]]}}}],["themekey",{"_index":415,"t":{"28":{"position":[[1313,9]]},"34":{"position":[[647,11],[776,9]]}}}],["themeprovid",{"_index":49,"t":{"2":{"position":[[672,14],[1596,14],[1638,16]]},"26":{"position":[[1585,13],[1637,15],[1727,14],[1776,19]]},"44":{"position":[[189,14],[1332,14],[1882,16]]}}}],["though",{"_index":207,"t":{"12":{"position":[[1202,6]]}}}],["throughout",{"_index":197,"t":{"12":{"position":[[950,10],[1177,10]]}}}],["time",{"_index":191,"t":{"12":{"position":[[809,4]]}}}],["token",{"_index":618,"t":{"50":{"position":[[60,7],[91,6],[158,6],[210,6],[255,6],[285,8]]}}}],["tokens.color",{"_index":643,"t":{"50":{"position":[[913,16]]}}}],["tokens.colorblack",{"_index":623,"t":{"50":{"position":[[467,18],[586,18]]}}}],["tokens.colorbluedark",{"_index":645,"t":{"50":{"position":[[950,23]]}}}],["tokens.colorgreendark",{"_index":635,"t":{"50":{"position":[[747,22]]}}}],["tokens.colorindigo",{"_index":637,"t":{"50":{"position":[[788,19]]}}}],["tokens.colorindigolight",{"_index":639,"t":{"50":{"position":[[834,24]]}}}],["tokens.colorinklight",{"_index":630,"t":{"50":{"position":[[620,21]]}}}],["tokens.colorinklightest",{"_index":632,"t":{"50":{"position":[[661,24]]}}}],["tokens.colorski",{"_index":641,"t":{"50":{"position":[[882,16]]}}}],["tokens.colorskylight",{"_index":627,"t":{"50":{"position":[[543,23]]}}}],["tokens.colorwhit",{"_index":625,"t":{"50":{"position":[[505,18],[709,18]]}}}],["tokens.spacingnon",{"_index":646,"t":{"50":{"position":[[994,19]]}}}],["top",{"_index":393,"t":{"26":{"position":[[1606,3]]},"32":{"position":[[956,4]]}}}],["touchableopac",{"_index":281,"t":{"16":{"position":[[597,18],[1242,17],[1348,19]]},"22":{"position":[[692,17]]},"40":{"position":[[7,18],[529,17],[635,19]]},"42":{"position":[[7,18],[582,17],[688,19]]}}}],["touchableopacityprop",{"_index":339,"t":{"22":{"position":[[710,22]]}}}],["touchableopacityprops>(touchableopac",{"_index":341,"t":{"22":{"position":[[850,41]]}}}],["transform",{"_index":534,"t":{"34":{"position":[[251,10],[685,10]]}}}],["transform({valu",{"_index":540,"t":{"34":{"position":[[622,17]]}}}],["transpar",{"_index":532,"t":{"34":{"position":[[160,12],[209,15]]}}}],["transparency={0.5",{"_index":538,"t":{"34":{"position":[[397,18]]}}}],["transparentcompon",{"_index":536,"t":{"34":{"position":[[313,20],[375,21]]}}}],["tree",{"_index":394,"t":{"26":{"position":[[1624,5]]}}}],["trivial",{"_index":215,"t":{"12":{"position":[[1389,7]]}}}],["true",{"_index":432,"t":{"32":{"position":[[314,4]]}}}],["type",{"_index":8,"t":{"2":{"position":[[73,4]]},"10":{"position":[[200,4]]},"14":{"position":[[221,4],[316,5]]},"16":{"position":[[310,4],[857,4],[1059,4]]},"22":{"position":[[892,4]]},"26":{"position":[[1225,4],[1401,5]]},"40":{"position":[[303,4]]},"42":{"position":[[356,4]]},"44":{"position":[[952,4]]},"50":{"position":[[1308,4]]}}}],["typeof",{"_index":380,"t":{"26":{"position":[[1238,6]]},"44":{"position":[[965,6]]},"50":{"position":[[1321,6]]}}}],["typesafeti",{"_index":389,"t":{"26":{"position":[[1487,10]]}}}],["typescript",{"_index":14,"t":{"2":{"position":[[142,11]]},"26":{"position":[[309,10]]}}}],["typographi",{"_index":248,"t":{"14":{"position":[[922,11]]},"32":{"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]]},"14":{"position":[[1003,5]]}}}],["understand",{"_index":195,"t":{"12":{"position":[[894,10]]}}}],["unlik",{"_index":416,"t":{"28":{"position":[[1362,6]]}}}],["up",{"_index":142,"t":{"10":{"position":[[652,3]]},"14":{"position":[[993,2]]},"26":{"position":[[608,2]]},"46":{"position":[[186,2],[509,2]]}}}],["updat",{"_index":203,"t":{"12":{"position":[[1085,6],[1136,8]]}}}],["upgrad",{"_index":546,"t":{"36":{"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":[[227,6],[530,5],[618,3]]},"12":{"position":[[331,4]]},"16":{"position":[[123,4],[128,3],[565,3]]},"18":{"position":[[127,3]]},"20":{"position":[[91,5]]},"22":{"position":[[472,3],[517,3]]},"24":{"position":[[86,3]]},"26":{"position":[[12,5],[263,3]]},"28":{"position":[[86,3],[586,3]]},"34":{"position":[[37,3]]},"36":{"position":[[99,5]]},"38":{"position":[[77,5]]},"46":{"position":[[58,3]]},"48":{"position":[[84,3]]},"50":{"position":[[9,5],[118,5],[172,5]]}}}],["usag",{"_index":103,"t":{"6":{"position":[[20,5]]},"36":{"position":[[54,5]]}}}],["user",{"_index":122,"t":{"10":{"position":[[219,4]]},"26":{"position":[[1415,4]]}}}],["useresponsiveprop",{"_index":335,"t":{"22":{"position":[[525,17],[581,18]]}}}],["useresponsiveprop(color",{"_index":347,"t":{"22":{"position":[[1216,25]]}}}],["userestyl",{"_index":279,"t":{"16":{"position":[[573,10],[652,11]]},"36":{"position":[[67,10],[105,10]]},"38":{"position":[[95,10]]},"40":{"position":[[62,11]]},"42":{"position":[[62,11]]}}}],["userestyle(restylefunct",{"_index":295,"t":{"16":{"position":[[1197,28]]},"40":{"position":[[484,28]]},"42":{"position":[[537,28]]}}}],["usest",{"_index":555,"t":{"44":{"position":[[118,10]]}}}],["usestate(fals",{"_index":576,"t":{"44":{"position":[[1306,16]]}}}],["usethem",{"_index":337,"t":{"22":{"position":[[600,9]]},"24":{"position":[[94,8]]}}}],["usethemedisplay",{"_index":88,"t":{"2":{"position":[[1487,25]]}}}],["variant=\"body\">thi",{"_index":84,"t":{"2":{"position":[[1390,19]]}}}],["variant=\"buttonlabel",{"_index":355,"t":{"22":{"position":[[1469,21]]}}}],["variant=\"buttonlabel\">{label}headerwelcome Search the documentation - +

Search the documentation

- + \ No newline at end of file