Theme

Theme can be configured by passing theme object to theme component. It is required to one Theme instance be provided as parent to all components from this library.

<Theme theme={theme}>
  <App />
<Theme>

Configuration

Here is what each property controls:

`variant`

Set default components variant: outlined | contained | text. This benefits mainly Input and Button Some components do not have all types of variants listed here.

`size`

Set the default size passed to components. sm | md | lg

`texts`

Set default feedback texts for components. Here you can pass you localized strings.

`zIndex`

Set default z-index values for components. This is useful when you have multiple modals, drawers or tooltips. For portals within portals e.g. Select in Modal/Drawer you still will need to pass custom z-Index higher than the parents or the option list will be beneath the dialog panel

`helpers`

Stores functions that are used across components to generate feedback or values.

`styles`

Designed to store shared TailwindCSS classes that are used across components. This is useful when you want to change the default behaviour of components.

covers common components states cases like disabled, readOnly, invalid, error and selected states,

`styles.animations`

Currently this object holds only one entry: microInteractions which is used to set default animations for components.

const animations = {
  microInteractions: ['duration-300', 'transition-all', 'ease-in-out'],
}

`styles.size`

handles size settings,

`styles.triggers`

triggers (mostly buttons) and inputs focus on setting styles for their variants,

`styles.inputs`

Controls default styling for inputs' base styles, checkable (radio, checkbox) and inputs' variants

`styles.drawers`

export const themeDrawers = {
  position: 'right', // sets default drawer position
  width: 'md:w-1/2', // for right and left
  height: 'md:h-1/2', // for top and bottom
}

`styles.typography`

This settings controls how each level of typography is styled.

// code shortened for brevity
{
  "h1": {
    "display": "block",
    "fontFamily": "font-sans",
    "fontSize": {
      "sm": "text-4xl",
      "md": "text-5xl",
      "lg": "text-6xl"
    },
    "fontWeight": "font-light",
    "lineHeight": "leading-normal"
  }
}

Typography levels:

export const TYPOGRAPHY = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'content', 'description'] as const

Default configuration:

import type { ThemeProps } from '../types'
import { themeDrawers } from './modal'
import { themeTypography } from './typography'
 
const animations = {
  microInteractions: ['duration-300', 'transition-all', 'ease-in-out'],
}
 
export const defaultTheme: ThemeProps = {
  variant: 'outlined',
  size: 'md',
  texts: {
    invalidInput: 'Input invalid',
  },
  zIndex: {
    base: 'z-0',
    dropdowns: 'z-[200]',
    tooltips: 'z-[400]',
    overlays: 'z-[600]',
    modals: 'z-[800]',
    notifications: 'z-[1000]',
  },
  helpers: {
    getLimitText: more => `+${more}`,
  },
  styles: {
    animations,
    selected: [...animations.microInteractions, 'bg-primary', 'text-white', 'hover:bg-primary/75'],
    disabled: ['cursor-not-allowed', 'pointer-events-none', 'opacity-50'],
    readOnly: ['cursor-not-allowed', 'pointer-events-none'],
    invalid: {
      border: ['!invalid:border-error', '!focus:invalid:border-error'],
      text: ['invalid:text-error'],
    },
    error: {
      border: ['!border-error', '!focus:border-error'],
      text: ['!text-error'],
    },
    triggers: {
      contained: ['hover:opacity-80', 'text-white', 'opacity-100', 'active:opacity-65', 'border'],
      outlined: ['hover:bg-opacity-10', 'bg-opacity-0', 'dark:hover:bg-opacity-25', 'border'],
      text: ['hover:text-opacity-65', 'bg-opacity-0', 'border-transparent'],
    },
    inputs: {
      base: [...animations.microInteractions, 'bg-background-input', 'border', 'border-border'],
      checkable: [
        ...animations.microInteractions,
        'text-primary',
        'checked:border-none',
        'checked:bg-primary',
        'indeterminate:bg-primary',
        'cursor-pointer',
        'peer',
        'hover:bg-white/25',
        'bg-opacity-100',
      ],
      variants: {
        contained: ['bg-background-input', 'border-transparent'],
        outlined: [],
        text: ['border-0', 'border-b', 'rounded-b-none'],
        unstyled: [],
      },
    },
    size: {
      sm: {
        minHeight: 'min-h-7',
        height: 'h-7',
        width: 'w-7',
        square: 'size-4',
        padding: 'px-2',
        fontSize: 'text-xs',
      },
      md: {
        minHeight: 'min-h-9',
        height: 'h-9',
        width: 'w-9',
        square: 'size-5',
        padding: 'px-3',
        fontSize: 'text-sm',
      },
      lg: {
        minHeight: 'min-h-12',
        height: 'h-12',
        width: 'w-12',
        square: 'size-6',
        padding: 'px-4',
        fontSize: 'text-base',
      },
    },
    drawers: {
      position: 'right',
      width: 'md:w-1/2',
      height: 'md:h-1/2',
    },
    typography: themeTypography,
  },
}

Colors