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

Predefined components

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

Box​

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

const Box = createBox<Theme>();

export default Box;

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

Text​

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

const Text = createText<Theme>();

export default Text;

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

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

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

Predefined components

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

Box​

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

const Box = createBox<Theme>();

export default Box;

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

Text​

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

const Text = createText<Theme>();

export default Text;

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

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

// In a component
<Text variant="header">Header</Text>
+ \ No newline at end of file diff --git a/fundamentals/defining-your-theme/index.html b/fundamentals/defining-your-theme/index.html index 7dd7ea7..3958e92 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 42124da..f7e099b 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 65f225a..a4dd64a 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 4d3ec7f..ce42039 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 4c49230..b792253 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 e01a0eb..9942f2b 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 fc8a9a6..8c32841 100644 --- a/fundamentals/variants/index.html +++ b/fundamentals/variants/index.html @@ -4,13 +4,13 @@ Variants | Restyle - +
-

Variants

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

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

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

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

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

<Card variant="elevated" />

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

Arguments:

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

Variants

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

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

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

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

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

<Card variant="elevated" />

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

Arguments:

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

Search the documentation

- + \ No newline at end of file