CenUI - Config

The configuration for CenUI

Usage

This package holds the theme for the styled-bootstrap and related functions. You can use is to customize your components.

Using styled-components

You can change appearance of styled-components as normal.

import styled from 'styled-components';
import { Button } from '@arnat/styled-bootstrap';

const CustomizedButton = styled(Button)`
  border-radius: 0;
  width: 128px;
`;

Using a theme

You can use 'ThemeProvider' from 'styled-components' to modify the components' look. Theme provided to components directly or through provider can contain values that should override default ones.

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Button } from '@arnat/styled-button';

const App = () => (
  <ThemeProvider
    theme={{
      button: {
        colors: {
          primary: {
            color: '#001919',
          },
        },
      },
    }}
  >
    <Button block primary>
      Themed primary button
    </Button>
  </ThemeProvider>
);

You can change colorScheme object in theme to influence the whole library's look.

const App = () => (
  <ThemeProvider
    theme={{
      colorScheme: {
        primaryLight: '#a1bfff',
        primaryLighter: '#6e9cff',
        primary: '#548bff',
        primaryDarker: '#3b7aff',
        primaryDark: '#2168ff',
        primaryDarkest: '#0757ff',
      },
    }}
  >
    <div>
      <Button block primary mb2>
        Themed primary button
      </Button>
      <Alert block primary mb2>
        Themed primary alert
      </Alert>
      <Container bgPrimary p2>
        Themed primary container
      </Container>
    </div>
  </ThemeProvider>
);

Values in config can be plain strings to use in styles or function that accepts the single argument - function for getting value from the current theme. If the value is function, it's return value will be used in styles.

// Part of default theme demonstrating usage of 'functional' values in the
// configuration. This can be used to reference other values.

const defaultTheme = {
  // ...

  button: {
    colors: {
      primary: {
        color: get => get('colorScheme', 'white'),
        colorOutline: get => get('colorScheme', 'primary'),
        colorOutlineHover: get => get('colorScheme', 'white'),
        backgroundColor: get => get('colorScheme', 'primary'),
        backgroundColorDisabled: get => get('colorScheme', 'primary'),
        backgroundColorHoverFocus: get => get('colorScheme', 'primaryDarker'),
        backgroundColorActive: get => get('colorScheme', 'primaryDark'),
        borderColor: get => get('colorScheme', 'primary'),
        borderColorDisabled: get => get('colorScheme', 'primary'),
        borderColorHoverFocus: get => get('colorScheme', 'primaryDark'),
        borderColorActive: get => get('colorScheme', 'primaryDark'),
        boxShadow: get => get('colorScheme', 'primaryBoxShadow'),
      },
    },
  },

  // ...
};

To see how to modify all the styled-bootstrap-components to create your own UI component library take a look at the theme.