1"use strict";(self.webpackChunk_fower_website=self.webpackChunk_fower_website||[]).push([[7402],{4852:(e,r,t)=>{t.d(r,{Zo:()=>c,kt:()=>m});var n=t(9231);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function i(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var u=n.createContext({}),s=function(e){var r=n.useContext(u),t=r;return e&&(t="function"==typeof e?e(r):l(l({},r),e)),t},c=function(e){var r=s(e.components);return n.createElement(u.Provider,{value:r},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},f=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,u=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),p=s(t),f=o,m=p["".concat(u,".").concat(f)]||p[f]||d[f]||a;return t?n.createElement(m,l(l({ref:r},c),{},{components:t})):n.createElement(m,l({ref:r},c))}));function m(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,l=new Array(a);l[0]=f;var i={};for(var u in r)hasOwnProperty.call(r,u)&&(i[u]=r[u]);i.originalType=e,i[p]="string"==typeof e?e:o,l[1]=i;for(var s=2;s<a;s++)l[s]=t[s];return n.createElement.apply(null,l)}return n.createElement.apply(null,t)}f.displayName="MDXCreateElement"},2202:(e,r,t)=>{t.d(r,{Z:()=>l});var n=t(9231),o=t(9841);const a={tabItem:"tabItem_GRuo"};function l(e){let{children:r,hidden:t,className:l}=e;return n.createElement("div",{role:"tabpanel",className:(0,o.Z)(a.tabItem,l),hidden:t},r)}},9334:(e,r,t)=>{t.d(r,{Z:()=>k});var n=t(5527),o=t(9231),a=t(9841),l=t(6038),i=t(9409),u=t(6364),s=t(9197),c=t(2285);function p(e){return function(e){return o.Children.map(e,(e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:r}=e;return!!r&&"object"==typeof r&&"value"in r}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}(e).map((e=>{let{props:{value:r,label:t,attributes:n,default:o}}=e;return{value:r,label:t,attributes:n,default:o}}))}function d(e){const{values:r,children:t}=e;return(0,o.useMemo)((()=>{const e=r??p(t);return function(e){const r=(0,s.l)(e,((e,r)=>e.value===r.value));if(r.length>0)throw new Error(`Docusaurus error: Duplicate values "${r.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[r,t])}function f(e){let{value:r,tabValues:t}=e;return t.some((e=>e.value===r))}function m(e){let{queryString:r=!1,groupId:t}=e;const n=(0,i.k6)(),a=function(e){let{queryString:r=!1,groupId:t}=e;if("string"==typeof r)return r;if(!1===r)return null;if(!0===r&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:r,groupId:t});return[(0,u._X)(a),(0,o.useCallback)((e=>{if(!a)return;const r=new URLSearchParams(n.location.search);r.set(a,e),n.replace({...n.location,search:r.toString()})}),[a,n])]}function b(e){const{defaultValue:r,queryString:t=!1,groupId:n}=e,a=d(e),[l,i]=(0,o.useState)((()=>function(e){let{defaultValue:r,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(r){if(!f({value:r,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${r}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return r}const n=t.find((e=>e.default))??t[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:r,tabValues:a}))),[u,s]=m({queryString:t,groupId:n}),[p,b]=function(e){let{groupId:r}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(r),[n,a]=(0,c.Nk)(t);return[n,(0,o.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:n}),h=(()=>{const e=u??p;return f({value:e,tabValues:a})?e:null})();(0,o.useLayoutEffect)((()=>{h&&i(h)}),[h]);return{selectedValue:l,selectValue:(0,o.useCallback)((e=>{if(!f({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),s(e),b(e)}),[s,b,a]),tabValues:a}}var h=t(4566);const g={tabList:"tabList_m6JF",tabItem:"tabItem_R1fT"};function x(e){let{className:r,block:t,selectedValue:i,selectValue:u,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:p}=(0,l.o5)(),d=e=>{const r=e.currentTarget,t=c.indexOf(r),n=s[t].value;n!==i&&(p(r),u(n))},f=e=>{let r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=c.indexOf(e.currentTarget)+1;r=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(e.currentTarget)-1;r=c[t]??c[c.length-1];break}}r?.focus()};return o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},r)},s.map((e=>{let{value:r,label:t,attributes:l}=e;return o.createElement("li",(0,n.Z)({role:"tab",tabIndex:i===r?0:-1,"aria-selected":i===r,key:r,ref:e=>c.push(e),onKeyDown:f,onClick:d},l,{className:(0,a.Z)("tabs__item",g.tabItem,l?.className,{"tabs__item--active":i===r})}),t??r)})))}function v(e){let{lazy:r,children:t,selectedValue:n}=e;
1const a=(Array.isArray(t)?t:[t]).filter(Boolean);if(r){const e=a.find((e=>e.props.value===n));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return o.createElement("div",{className:"margin-top--md"},a.map(((e,r)=>(0,o.cloneElement)(e,{key:r,hidden:e.props.value!==n}))))}function y(e){const r=b(e);return o.createElement("div",{className:(0,a.Z)("tabs-container",g.tabList)},o.createElement(x,(0,n.Z)({},e,r)),o.createElement(v,(0,n.Z)({},e,r)))}function k(e){const r=(0,h.Z)();return o.createElement(y,(0,n.Z)({key:String(r)},e))}},364:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>u,contentTitle:()=>l,default:()=>d,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=t(5527),o=(t(9231),t(4852));t(9334),t(2202);const a={id:"color-helper",title:"Color helper"},l=void 0,i={unversionedId:"color-helper",id:"color-helper",title:"Color helper",description:"Another cool feature of Fower is the color helper. you can handle color with some postfix.",source:"@site/docs/color-helper.mdx",sourceDirName:".",slug:"/color-helper",permalink:"/docs/color-helper",draft:!1,editUrl:"https://github.com/forsigner/fower/edit/master/website/docs/color-helper.mdx",tags:[],version:"current",frontMatter:{id:"color-helper",title:"Color helper"},sidebar:"docs",previous:{title:"Predictable style",permalink:"/docs/predictable-style"},next:{title:"Composition Postfix",permalink:"/docs/composition-postfix"}},u={},s=[{value:"Darken",id:"darken",level:2},{value:"Lighten",id:"lighten",level:2},{value:"Transparentize",id:"transparentize",level:2},{value:"Opacify",id:"opacify",level:2},{value:"Use with pseudo",id:"use-with-pseudo",level:2}],c={toc:s},p="wrapper";function d(e){let{components:r,...t}=e;return(0,o.kt)(p,(0,n.Z)({},c,t,{components:r,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Another cool feature of Fower is the color helper. you can handle color with some postfix."),(0,o.kt)("p",null,"all color helper postfix:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"--D{0-100}"),", to darken a color, eg: ",(0,o.kt)("inlineCode",{parentName:"li"},"red200--D20")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"--L{0-100}"),", to lighten a color, eg: ",(0,o.kt)("inlineCode",{parentName:"li"},"red200--L20")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"--T{0-100}"),", to transparentize a color, eg: ",(0,o.kt)("inlineCode",{parentName:"li"},"red200--T20")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"--O{0-100}"),", to opacify a color, eg: ",(0,o.kt)("inlineCode",{parentName:"li"},'color="rgba(0, 0, 0, 0.2)--20)"'))),(0,o.kt)("h2",{id:"darken"},"Darken"),(0,o.kt)("p",null,"Use ",(0,o.kt)("inlineCode",{parentName:"p"},"--D{0-100}")," postfix to darken a color."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<Box toEvenly toCenterY>\n <Box red300>normal</Box>\n <Box red300--D40>darken</Box>\n <Box color="#fff--D40">darken</Box>\n <Box bgRed300 square-84></Box>\n <Box bgRed300--D40 square-84></Box>\n <Box border borderRed300 square-84></Box>\n <Box border borderRed300--D40 square-84></Box>\n</Box>\n')),(0,o.kt)("h2",{id:"lighten"},"Lighten"),(0,o.kt)("p",null,"Use ",(0,o.kt)("inlineCode",{parentName:"p"},"--L{0-100}")," to lighten a color."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<Box toEvenly toCenterY>\n <Box red500>normal</Box>\n <Box red500--L40>lighten</Box>\n <Box color="#000--L40">lighten</Box>\n <Box bgRed300 square-84></Box>\n <Box bgRed300--L20 square-84></Box>\n <Box border borderRed300 square-84></Box>\n <Box border borderRed300--L20 square-84></Box>\n</Box>\n')),(0,o.kt)("h2",{id:"transparentize"},"Transparentize"),(0,o.kt)("p",null,"Use ",(0,o.kt)("inlineCode",{parentName:"p"},"--T{0-100}")," to transparentize a color."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<Box toEvenly>\n <Box red500>normal</Box>\n <Box red500--T40>transparentize</Box>\n <Box color="#000--T40">transparentize</Box>\n <Box bgRed500 square-84></Box>\n <Box bgRed500--T40 square-84></Box>\n <Box border borderRed300 square-84></Box>\n <Box border borderRed300--T40 square-84></Box>\n</Box>\n')),(0,o.kt)("h2",{id:"opacify"},"Opacify"),(0,o.kt)("p",null,"Use ",(0,o.kt)("inlineCode",{parentName:"p"},"--O{0-100}")," to opacify a color."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<Box toEvenly>\n <Box color="rgba(0,0,0,0.4)">0.4</Box>\n <Box color="rgba(0,0,0,0.4)--O40">Opacify to 0.6</Box>\n <Box bg="rgba(0,0,0,0.4)" square-84></Box>\n <Box bg="rgba(0,0,0,0.4)--O40" square-84></Box>\n <Box border borderColor="rgba(0,0,0,0.4)" square-84></Box>\n <Box border borderColor="rgba(0,0,0,0.4)--O40" square-84></Box>\n</Box>\n')),(0,o.kt)("h2",{id:"use-with-pseudo"},"Use with pseudo"),(0,o.kt)("p",null,"The color helper postfix can use with pseudo postfix, Let's build a beautiful Button Component:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js",metastring:"live",live:!0},'<Box\n as="button"\n bgOrange400\n bgOrange400--D10--hover\n white\n rounded\n py3\n px5\n outlineNone\n cursorPointer\n>\n Button\n</Box>\n')))}d.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.