1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[18],{"9hLo":function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return h}));var o=t("Ff2n"),a=t("1OyB"),s=t("vuIU"),r=t("Ji7U"),m=t("md7G"),i=t("foSv"),p=t("q1tI"),c=t.n(p),l=t("6qfE"),u=c.a.createElement;function g(n){var e=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var t,o=Object(i.a)(n);if(e){var a=Object(i.a)(this).constructor;t=Reflect.construct(o,arguments,a)}else t=o.apply(this,arguments);return Object(m.a)(this,t)}}var h=function(n){Object(r.a)(t,n);var e=g(t);function t(n){var o;return Object(a.a)(this,t),(o=e.call(this,n)).layout=null,o}return Object(s.a)(t,[{key:"render",value:function(){var n=this.props,e=n.components;Object(o.a)(n,["components"]);return u(l.MDXTag,{name:"wrapper",components:e},u(l.MDXTag,{name:"h1",components:e,props:{id:"styling"}},"Styling"),u(l.MDXTag,{name:"p",components:e},"All the components are styled from a common theme object with custom color, typography, and layout values. This theme object follows ",u(l.MDXTag,{name:"a",components:e,parentName:"p",props:{href:"https://theme-ui.com/theming"}},"theme-ui specifications"),", making it very robust, easy to customize and scale."),u("details",null,u("summary",null,"Here's the structure of the default theme used in chatty-form (click to expand)"),u(l.MDXTag,{name:"pre",components:e},u(l.MDXTag,{name:"code",components:e,parentName:"pre",props:{className:"language-js"}},"const theme = {\n colors: {\n primary: '#198cff',\n secondary: '#e2e8f0',\n text: {\n question: 'white',\n answer: 'black',\n },\n },\n fonts: {\n default:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n },\n fontSizes: [0, 12, 14, 16, 20, 24, 32, 48, 64, 96],\n fontWeights: {\n regular: 500,\n semibold: 600,\n bold: 700,\n },\n lineHeights: {\n tight: 1.25,\n normal: 1.5,\n },\n space: [0, 4, 8, 16, 32, 64, 128, 256, 512],\n radii: {\n xs: 3,\n sm: 5,\n md: 15,\n lg: 20,\n circle: 99999,\n },\n shadows: {\n default: '2px 2px 4px rgba(0, 0, 0, .2)',\n input: '1px 1px 7px rgba(0, 0, 0, .2)',\n button: '1px 1px 4px rgba(0, 0, 0, .1)',\n },\n text: {\n question: {\n fontFamily: 'default',\n lineHeight: 'tight',\n fontWeight: 'semibold',\n color: 'text.question',\n },\n answer: {\n fontFamily: 'default',\n lineHeight: 'tight',\n fontWeight: 'semibold',\n color: 'text.answer',\n },\n caps: {\n textTransform: 'uppercase',\n letterSpacing: '0.1em',\n },\n },\n variants: {\n question: {\n p: 3,\n my: 2,\n bg: 'primary',\n borderRadius: 'lg',\n borderBottomLeftRadius: 'xs',\n boxShadow: 'default',\n transition: 'color 0.3s, background 0.3s',\n },\n pretext: {\n p: 3,\n mt: 1,\n borderRadius: 'lg',\n bg: 'primary',\n boxShadow: 'default',\n transition: 'color 0.3s, background 0.3s',\n },\n answer: {\n p: 3,\n my: 3,\n bg: 'secondary',\n borderRadius: 'lg',\n borderBottomRightRadius: 'xs',\n boxShadow: 'default',\n transition: 'color 0.3s, background 0.3s',\n },\n inputContainer: {\n p: 2,\n borderRadius: 'md',\n boxShadow: 'input',\n },\n },\n forms: {\n input: {\n mr: 20,\n borderColor: 'transparent',\n },\n },\n buttons: {\n default: {\n cursor: 'pointer',\n fontSize: 3,\n transition: 'color 0.3s, background 0.3s',\n },\n input: {\n variant: 'buttons.default',\n color: 'white',\n bg: 'primary',\n borderRadius: 'md',\n },\n select: {\n variant: 'buttons.default',\n color: 'black',\n bg: '#e2e8f0',\n mr: 2,\n mb: 2,\n '&:hover': {\n bg: '#cbd5e0',\n },\n },\n selected: {\n variant: 'buttons.default',\n color: 'white',\n bg: 'primary',\n mr: 2,\n mb: 2,\n },\n action: {\n variant: 'buttons.default',\n fontWeight: 'bold',\n color: 'white',\n bg: 'primary',\n mb: 2,\n },\n },\n};\n"))),u(l.MDXTag,{name:"h2",components:e,props:{id:"customizing-the-theme"}},"Customizing the theme"),u(l.MDXTag,{name:"p",components:e},"The most primitive UI blocks in chatty-form are the question block, answer block and the different types of input sections (for Input, Select and MultiSelect).\nEach of them can be found being styled under different sections of the theme object. Theme can be customised by passing an custom theme object as the theme prop to ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"<ChattyForm/>"))," component. The custom theme object will be merged with the default theme resulting in change of style."),u(l.MDXTag,{name:"p",components:e},"Internally the custom theme object passed throught the theme prop is deepmerged with the default theme."),u(l.MDXTag,{name:"h2",components:e,props:{id:"colors"}},"Colors"),u(l.MDXTag,{name:"p",components:e},"The entire ChattyForm's color is controlled by ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.colors")),", notice that a lot of UI blocks references the ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"primary"))," color."),u(l.MDXTag,{name:"p",components:e},"So e.g to change the primary color to ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"hotpink")),", you need to pass the following as the theme prop."),u(l.MDXTag,{name:"pre",components:e},u(l.MDXTag,{name:"code",components:e,parentName:"pre",props:{className:"language-.jsx"}},'<ChattyForm theme={{\n colors: {\n primary: \'hotpink\'\n }\n}}>\n <Input\n name="name"\n question="Howdy! What\'s your name?"\n placeholder="Type your answer"\n />\n</ChattyForm>\n')),u(l.MDXTag,{name:"p",components:e},"The same goes for text colors."),u(l.MDXTag,{name:"h2",components:e,props:{id:"common-ui-blocks"}},"Common UI blocks"),u(l.MDXTag,{name:"p",components:e},"The question, answer and pretext blocks are common to every input component and can be seen being styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.variants"))," while using text styles from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.text"))),u(l.MDXTag,{name:"h2",components:e,props:{id:"components-specific-styles"}},"Components Specific Styles"),u(l.MDXTag,{name:"h3",components:e,props:{id:"input"}},"Input"),u(l.MDXTag,{name:"p",components:e},"The ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},"Input Component")," has a inputContainer Wrapper for styling purpose on top of the primitive input. The inputContainer is styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.variants.inputContainer"))," and the input field itself can be styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.forms.input")),"\nAdditionally, there's an action button associated with the input which can be styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.buttons.input"))),u(l.MDXTag,{name:"h3",components:e,props:{id:"select"}},"Select"),u(l.MDXTag,{name:"p",components:e},"The ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},"Select Component")," consists only of only buttons specific to its UI. They can be styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.buttons.select")),"\nAdditionally, there's an action button associated with the select which can be styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.buttons.action"))),u(l.MDXTag,{name:"h3",components:e,props:{id:"multiselect"}}
1,"MultiSelect"),u(l.MDXTag,{name:"p",components:e},"Similar to Select, the ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},"MultiSelect Component")," also consists of ony buttons specific to its UI. However, there's an additional state when an option(button) is selected which can be styled from ",u(l.MDXTag,{name:"strong",components:e,parentName:"p"},u(l.MDXTag,{name:"inlineCode",components:e,parentName:"strong"},"theme.buttons.selected"))))}}]),t}(c.a.Component)},DmF3:function(n,e,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/styling",function(){return t("9hLo")}])}},[["DmF3",0,1,2]]]);
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.