A small and scalable bearbones styling system using declaritive properties to apply styling. Has a comfy API based on hooks and drop in replacement components.

Much of this project came from dealing with common pitfalls associated with more opinionated UI Libraries that tend to be all or nothing solutions and can lead to dependency hell.

Currently only supports react-native

Contributing

Use https://github.com/wix-incubator/wml

Add local project

wml add ~/my-package ~/main-project/node_modules/my-package

Add WML to Watchman

IMPORTANT

On OSX WML will stall out if you do not add src to watchman. More details on this issue: https://github.com/wix-incubator/wml/issues/48

watchman watch [/path/to/global/node]/node_modules/wml/src

Start wml

wml start

Start TypeScript Build Watch

npm run build-watch

Get Started

Install

# npm
npm install react-simple-style-system

# yarn
yarn add react-simple-style-system

Setup & Basic Usage

In App.js

import {ThemeContainer, themes, View, Text} from 'react-simple-style-system';

{
  /* Create a custom UI element - Card */
}
const Card = props => {
  return (
    <View rounded margin padding surface elevated {...props}>
      {props.children}
    </View>
  );
};

const App = () => {
  /* 
    Select a theme - this package comes with a light and dark theme.  
    See theming section on defining your own theme.
    
    Default Themes: 
      themes.Light;
      themes.Dark;
  */
  const theme = themes.Light;

  return (
    <ThemeContainer theme={theme}>
      {/* Create a View with flex 1 and background using theme's background color */}
      <View flex background>
        <Card>
          {/* Add a title and text to the card with correct text color */}
          <Text h1 onSurface>
            Title
          </Text>
          <Text body onSurface>
            A brief description of something
          </Text>
        </Card>
      </View>
    </ThemeContainer>
  );
};

Hooks

useTheme()

Used to access the current theme's styles, colors, sizes & mode.

Example

import {Text} from 'react-native';
import {useTheme} from 'react-simple-style-system';

const CustomInput = props => {
  const {styles, colors, sizes, mode} = useTheme();
  return (
    <Text
      {...props}
      style={{color: colors.onSurface, backgroundColor: colors.surface}}
    />
  );
};

useStyleModifiers()

Used to enable modifiers on a given component. Given a set of modifier props, returns the appropiate styles.

Example

import {TextInput} from 'react-native';
import {useStyleModifiders} from 'react-simple-style-system';

const CustomInput = props => {
  const styles = useStyleModifiers(props);
  return <TextInput {...props} style={styles} />;
};

const ExampleUsage = props => {
  return (
    <CustomInput
      margin
      padding
      rounded
      surfaceVariant
      onSurfaceVariant
      style={{fontSize: 24}}
    />
  );
};

Create a custom theme

const customTheme = {
  mode: 'light', // System Light or Dark Mode
  sizes: {
    unit: 4, // Base unit size for margins and padding
    roundedRadius: 8, // Border radius when using `rounded` prop
    hairline: 0.25, // Outline width

    // Typography sizes
    h1: 32,
    h2: 24,
    h3: 18,
    body: 14,
    caption: 12,
    label: 14,
  },
  colors: {
    transparent: 'transparent',

    primary: '#FFFFFF',
    onPrimary: '#242526',

    primaryContainer: '#F6F8FC',
    onPrimaryContainer: '#242526',

    secondary: '#D6E2FB',
    onSecondary: '#242526',

    secondaryContainer: '#EBF1FA',
    onSecondaryContainer: '#242526',

    tertiary: '#C7DAFC',
    onTertiary: '#242526',

    tertiaryContainer: '#F3F6FB',
    onTertiaryContainer: '#242526',

    background: '#F6F8FC',
    onBackground: '#242526',

    surface: '#FFFFFF',
    onSurface: '#242526',

    surfaceVariant: '#EFEFEF',
    onSurfaceVariant: '#242526',

    outline: 'rgba(0,0,0, 0.25)',

    danger: '#ff4c30',
    onDanger: '#FFFFFF',

    dangerContainer: '#f1a9a0',
    onDangerContainer: '#FFFFFF',

    warning: '#f9b42d',
    onWarning: '#FFFFFF',

    warningContainer: '#fbc093',
    onWarningContainer: '#242526',

    success: '#66cc99',
    onSuccess: '#FFFFFF',

    successContainer: '#c8f7c5',
    onSuccessContainer: '#242526',

    isDisabled: 'rgba(0,0,0, 0.05)',
    onIsDisabled: 'rgba(0,0,0, 0.35)',

    isDisabledContainer: '#EFEFEF',
    onIsDisabledContainer: 'rgba(0,0,0, 0.35)',

    info: '#038aff',
    onInfo: '#FFFFFF',

    infoContainer: '#89c4f4',
    onInfoContainer: '#FFFFFF',
  },
};

Applying Styles

Typography

Apply fontSize to text

• h1
• h2
• h3
• body
• caption
• label

const theme = {
  sizes: {
    h1: 32,
    h2: 24,
    h3: 18,
    body: 14,
    caption: 12,
    label: 14,
  }
}

Text Styles

Apply text styles to text

• thin
• bold
• italic
• textShadow
• lineThrough

Text Alignment

Apply text alignment

• textCenter
• textLeft
• textRight

Text Example

<Text h1 italic textCenter>
  H1 Italic Example
</Text>

Border Radius

Apply border radius based on theme rounded radius

• rounded (All)
• roundedT (Top)
• roundedB (Bottom)
• roundedR (Right)
• roundedL (Left)

const theme = { sizes: { roundedRadius: 8 } }

Border Outline

Apply border outline

• outline (All)
• outlineT (Top)
• outlineB (Bottom)
• outlineR (Right)
• outlineL (Left)

Elevation

Apply elevation shadow effect

• elevated

Padding

Apply padding based on theme unit

• padding (All)
• paddingT (Top)
• paddingB (Bottom)
• paddingR (Right)
• paddingL (Left)
• paddingV (Vertical)
• paddingH (Horizontal)

const theme = { sizes: { unit: 4 } };

Padding2x

Apply padding based on theme unit x 2

• padding2x (All)
• paddingT2x (Top)
• paddingB2x (Bottom)
• paddingR2x (Right)
• paddingL2x (Left)
• paddingV2x (Vertical)
• paddingH2x (Horizontal)

Padding3x

Apply padding based on theme unit x 3

• padding3x (All)
• paddingT3x (Top)
• paddingB3x (Bottom)
• paddingR3x (Right)
• paddingL3x (Left)
• paddingV3x (Vertical)
• paddingH3x (Horizontal)

Padding 4x

Apply padding based on theme unit x 4

• padding4x (All)
• paddingT4x (Top)
• paddingB4x (Bottom)
• paddingR4x (Right)
• paddingL4x (Left)
• paddingV4x (Vertical)
• paddingH4x (Horizontal)

Margin

Apply margin based on theme unit

• margin (All)
• marginT (Top)
• marginB (Bottom)
• marginR (Right)
• marginL (Left)
• marginV (Vertical)
• marginH (Horizontal)

const theme = { sizes: { unit: 4 } };

Margin2x

Apply margin based on theme unit x 2

• margin2x (All)
• marginT2x (Top)
• marginB2x (Bottom)
• marginR2x (Right)
• marginL2x (Left)
• marginV2x (Vertical)
• marginH2x (Horizontal)

Margin3x

Apply margin based on theme unit x 3

• margin3x (All)
• marginT3x (Top)
• marginB3x (Bottom)
• marginR3x (Right)
• marginL3x (Left)
• marginV3x (Vertical)
• marginH3x (Horizontal)

Margin 4x

Apply margin based on theme unit x 4

• margin4x (All)
• marginT4x (Top)
• marginB4x (Bottom)
• marginR4x (Right)
• marginL4x (Left)
• marginV4x (Vertical)
• marginH4x (Horizontal)

Flex

Apply display flex and flex number

• flex
• flex2
• flex3
• flex4
• flex5

Flex Directions

Apply flex direction

• row
• rowReverse
• column
• columnReverse

Width

Apply width

• width100

Flex Positioning

Apply flex positioning

• center
• centerV
• centerH
• top
• bottom
• right
• left
• alignSelfCenter
• alignSelfEnd
• alignSelfStart
• spaceEvenly
• flexWrap

Theme Colors

Apply background & Text colors

Theme Background Colors

• primary
• primaryContainer
• secondary
• secondaryContainer
• tertiary
• tertiaryContainer
• surface
• surfaceVariant
• background
• transparent

Theme Text Colors

• onPrimary
• onPrimaryContainer
• onSecondary
• onSecondaryContainer
• onTertiary
• onTertiaryContainer
• onSurface
• onSurfaceVariant
• onBackground

const theme = {
  colors: {
    primary: '#FFFFFF',
    primaryContainer: '#F6F8FC',
    secondary: '#D6E2FB',
    secondaryContainer: '#EBF1FA',
    tertiary: '#C7DAFC',
    tertiaryContainer: '#F3F6FB',
    surface: '#FFFFFF',
    surfaceVariant: '#EFEFEF',
    background: '#F6F8FC',

    onPrimary: '#242526,
    onPrimaryContainer: '#242526,
    onSecondary: '#242526,
    onSecondaryContainer: '#242526,
    onTertiary: '#242526,
    onTertiaryContainer: '#242526,
    onSurface: '#242526',
    onSurfaceVariant: '#242526',
    onBackground: '#242526',
  }
}

Semantic Background Colors

• info
• infoContainer
• success
• successContainer
• warning
• warningContainer
• danger
• dangerContainer
• isDisabled
• isDisabledContainer

Semantic Text Colors

• onInfo
• onInfoContainer
• onSuccess
• onSuccessContainer
• onWarning
• onWarningContainer
• onDanger
• onDangerContainer
• onIsDisabled
• onIsDisabledContainer

const theme = {
  colors: {
    info: '#038aff',
    infoContainer: '#89c4f4',
    success: '#66cc99',
    successContainer: '#c8f7c5',
    warning: "#f9b42d",
    warningContainer: '#fbc093',
    danger: '#ff4c30',
    dangerContainer: '#f1a9a0',
    isDisabled: 'rgba(0,0,0, 0.05)',
    isDisabledContainer: '#EFEFEF',

    onInfo: '#FFFFFF',
    onInfoContainer: '#FFFFFF',
    onSuccess: '#FFFFFF',
    onSuccessContainer: '#242526',
    onWarning: '#FFFFFF',
    onWarningContainer: '#242526',
    onDanger: '#FFFFFF',
    onDangerContainer: '#FFFFFF',
    onIsDisabled: 'rgba(0,0,0, 0.35)',
    onIsDisabledContainer: 'rgba(0,0,0, 0.35)',
  }
}

Coloring example

// Card example with warning text at the bottom
<View flex background padding>
  <View surface rounded padding elevated>
    <Text h1 onSurface>
      This is some information on a card!
    </Text>

    <View warning padding rounded margin>
      <Text body onWarning>
        This is some warning text!
      </Text>
    </View>
  </View>
</View>

Components

ReactNative drop in replacements

• <View />
• <Text />
• <SafeAreaView />
• <ScrollView />
• <ActivityIndicator />
• <Pressable />

UI components

• <Error />
• <Icon /> (Requires https://github.com/oblador/react-native-vector-icons)

Additional Input components

Form inputs

• <DateTimeInput /> (Requires https://github.com/react-native-datetimepicker/datetimepicker & https://day.js.org/)
• <NumberInput />
• <MultiSelectInput />
• <SelectInput />
• <TextAreaInput />
• <Switch />
• <TextInput />

react-hook-form components

• <InputContainer /> (Requires https://react-hook-form.com/)
• <Form /> (Requires https://react-hook-form.com/)