React-simple-style-system NPM

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/)

themes styles react react-native

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago