Getting Started API Styling ChattyForm Common Props Input Select MultiSelect

💬chatty-form

Styling

All the components are styled from a common theme object with custom color, typography, and layout values. This theme object follows theme-ui specifications, making it very robust, easy to customize and scale.

Here's the structure of the default theme used in chatty-form (click to expand)

const theme = {
  colors: {
    primary: '#198cff',
    secondary: '#e2e8f0',
    text: {
      question: 'white',
      answer: 'black',
    },
  },
  fonts: {
    default:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
  },
  fontSizes: [0, 12, 14, 16, 20, 24, 32, 48, 64, 96],
  fontWeights: {
    regular: 500,
    semibold: 600,
    bold: 700,
  },
  lineHeights: {
    tight: 1.25,
    normal: 1.5,
  },
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  radii: {
    xs: 3,
    sm: 5,
    md: 15,
    lg: 20,
    circle: 99999,
  },
  shadows: {
    default: '2px 2px 4px rgba(0, 0, 0, .2)',
    input: '1px 1px 7px rgba(0, 0, 0, .2)',
    button: '1px 1px 4px rgba(0, 0, 0, .1)',
  },
  text: {
    question: {
      fontFamily: 'default',
      lineHeight: 'tight',
      fontWeight: 'semibold',
      color: 'text.question',
    },
    answer: {
      fontFamily: 'default',
      lineHeight: 'tight',
      fontWeight: 'semibold',
      color: 'text.answer',
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
    },
  },
  variants: {
    question: {
      p: 3,
      my: 2,
      bg: 'primary',
      borderRadius: 'lg',
      borderBottomLeftRadius: 'xs',
      boxShadow: 'default',
      transition: 'color 0.3s, background 0.3s',
    },
    pretext: {
      p: 3,
      mt: 1,
      borderRadius: 'lg',
      bg: 'primary',
      boxShadow: 'default',
      transition: 'color 0.3s, background 0.3s',
    },
    answer: {
      p: 3,
      my: 3,
      bg: 'secondary',
      borderRadius: 'lg',
      borderBottomRightRadius: 'xs',
      boxShadow: 'default',
      transition: 'color 0.3s, background 0.3s',
    },
    inputContainer: {
      p: 2,
      borderRadius: 'md',
      boxShadow: 'input',
    },
  },
  forms: {
    input: {
      mr: 20,
      borderColor: 'transparent',
    },
  },
  buttons: {
    default: {
      cursor: 'pointer',
      fontSize: 3,
      transition: 'color 0.3s, background 0.3s',
    },
    input: {
      variant: 'buttons.default',
      color: 'white',
      bg: 'primary',
      borderRadius: 'md',
    },
    select: {
      variant: 'buttons.default',
      color: 'black',
      bg: '#e2e8f0',
      mr: 2,
      mb: 2,
      '&:hover': {
        bg: '#cbd5e0',
      },
    },
    selected: {
      variant: 'buttons.default',
      color: 'white',
      bg: 'primary',
      mr: 2,
      mb: 2,
    },
    action: {
      variant: 'buttons.default',
      fontWeight: 'bold',
      color: 'white',
      bg: 'primary',
      mb: 2,
    },
  },
};

Customizing the theme

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). Each 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 <ChattyForm/> component. The custom theme object will be merged with the default theme resulting in change of style.

Internally the custom theme object passed throught the theme prop is deepmerged with the default theme.

Colors

The entire ChattyForm's color is controlled by theme.colors, notice that a lot of UI blocks references the primary color.

So e.g to change the primary color to hotpink, you need to pass the following as the theme prop.

Howdy! What's your name?

<ChattyForm theme={{
  colors: {
    primary: 'hotpink'
  }
}}>
  <Input
    name="name"
    question="Howdy! What's your name?"
    placeholder="Type your answer"
  />
</ChattyForm>

The same goes for text colors.

Common UI blocks

The question, answer and pretext blocks are common to every input component and can be seen being styled from theme.variants while using text styles from theme.text

Components Specific Styles

Input

The Input Component has a inputContainer Wrapper for styling purpose on top of the primitive input. The inputContainer is styled from theme.variants.inputContainer and the input field itself can be styled from theme.forms.input Additionally, there's an action button associated with the input which can be styled from theme.buttons.input

Select

The Select Component consists only of only buttons specific to its UI. They can be styled from theme.buttons.select Additionally, there's an action button associated with the select which can be styled from theme.buttons.action

MultiSelect

Similar to Select, the 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 theme.buttons.selected

API

ChattyForm