@mattreiss/themed-components v0.0.1

Themed Components

Combines styled system with react native components and provides light/dark themes based on the client's preferences.

Installation

yarn add themed-components

Usage

import React from 'react';
import { ThemeProvider, Components } from '@mattreiss/themed-components';

const { View, Text } = Components;

export default function App() {
  return (
    <ThemeProvider>
      <View bg='bg1' flex={1} alignItems='center' justifyContent='center'>
        <Text color='text1'>Open up App.js to start working on your app!</Text>
      </View>
    </ThemeProvider>
  );
}

Prop Colors

// constant colors
Colors.primary = '#2196f3';
Colors.primary2 = '#42a5f5';
Colors.primary3 = '#64b5f6';
Colors.primary4 = '#90caf9';
Colors.primary5 = '#bbdefb';
Colors.primary6 = '#e3f2fd';
Colors.greyscale1 = '#212121';
Colors.greyscale2 = '#424242';
Colors.greyscale3 = '#757575';
Colors.greyscale4 = '#9e9e9e';
Colors.greyscale5 = '#bdbdbd';
Colors.greyscale6 = '#eeeeee';
Colors.white = '#fafafa';
Colors.black = '#010101';
Colors.danger = '#f44336';
Colors.success = '#81c784';
Colors.success1 = '#A5D6A7';
Colors.success2 = '#C8E6C9';
Colors.success3 = '#E8F5E9';
Colors.warning = '#FFEE58';
Colors.warning1 = '#FFF176';
Colors.warning2 = '#FFF59D';
Colors.warning3 = '#FFFDE7';
Colors.google = '#db3236';


// variable colors
Colors.dark = Colors.greyscale1;
Colors.negative = Colors.greyscale3;
Colors.light = Colors.greyscale6;
Colors.bg1 = Colors.white;
Colors.bg2 = Colors.greyscale6;
Colors.bg3 = Colors.greyscale5;
Colors.text1 = Colors.greyscale1;
Colors.text2 = Colors.greyscale4;
Colors.text3 = Colors.greyscale2;

// react navigation colors
Colors.background = Colors.bg1
Colors.card = Colors.bg1
Colors.text = Colors.text1
Colors.border = Colors.negative
Colors.notification = Colors.danger

Prop Values

// layout (width/height)
this.sizes = {
    xs: 24,
    sm: 32,
    md: 48,
    lg: 64,
    xl: 80,
    xxl: 120
};
for (let key in this.sizes) {
    this.sizes[`${key}W`] = 5 * this.sizes[key]; // scale up for widths
}

// typography
this.fontSizes = {
    xxs: 4,
    xs: 8,
    sm: 12,
    md: 16,
    lg: 20,
    xl: 24,
    xxl: 28
};
this.lineHeights = {
    xs: 24,
    sm: 32,
    md: 48,
    lg: 64,
    xl: 80,
    xxl: 120
};
this.fonts = {
    default: 'Roboto',
}
this.fontWeights = {
    regular: 400,
    bold: 700,
};
this.letterSpacings = {};

// space (margins/paddings)
this.space = {
    xxxs: 4,
    xxs: 8,
    xs: 16,
    sm: 24,
    md: 32,
    lg: 48,
    xl: 64,
    xxl: 96
};

// border
this.radii = {
    sm: 4,
    md: 8,
    lg: 16,
    xl: 32,
    xxl: 64,
    xs: 24,
    smFab: 32,
    mdFab: 48,
    lgFab: 64,
    xlFab: 80,
    xxlFab: 120,
};
this.borderWidths = {};
this.borderStyles = {};
this.borders = {};

// shadow
this.shadows = {
    xs: '1px 1px 2px rgba(0,0,0,0.12)',
    sm: '2px 2px 4px rgba(0,0,0,0.12)',
    md: '4px 4px 8px rgba(0,0,0,0.24)',
    lg: '6px 6px 12px rgba(0,0,0,0.24)',
    xl: '8px 8px 16px rgba(0,0,0,0.48)',
}

// position
this.zIndices = {
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
}