Slup - Theming

This package contains the Theming, a Utility Component which is part of a bigger ecosystem called Slup and also contains many useful features such as a reproduction of the styled-components library and some handy functions to modify colors.

Description

From Google's Material Design guidelines:

In Material Design, a primary color refers to a color that appears most frequently in your app.
A secondary color refers to a color used to accent key parts of your UI.

These are some of the values that you are able to modify with the theming component.

Installation

This package can be installed with NPM

npm install --save @slup/theming

Usage

All material design colors are available in this package
We provide by default lightTheme(default one) and a darkTheme option.

import { ThemeProvider, lightTheme } from '@slup/theming'

<ThemeProvider theme={lightTheme}>
  <Application />
</ThemeProvider>

Available properties

Props	Type	Default	Documentation
theme	object	{}	Link

Property: 'theme'

With this property you can set a custom theme or you can import our preset themes: lightTheme or darkTheme. The default theme can be seen on the component demons of our other packages.

import {
  ThemeProvider,
  black,
  white,
  cyan,
  pink
} from '@slup/theming'

const customTheme = {
  text: black,
  background: white,
  primary: cyan[300],
  secondary: pink[500]
}

const App = () =>
  <ThemeProvider theme={customTheme}>
    <YourApp />
  </ThemeProvider>

Styling

We've made a reproduction of the styled-components library since we had some problems with compatibility but we also wanted a faster and lighter way of styling our components. The syntax is almost identical to styled-components so if you want to see all the features that we offer you can take a look at their site.

import Inferno from 'inferno'
import styled, { keyframes } from '@slup/theming'

const Rotate = keyframes`
  0%,
  100% {
    transform: scale(0)
  }

  50% {
    transform: scale(1)
  }
`

const Bubble = styled.div`
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, .5);
  border-radius: 50%;
  animation: ${Rotate} 2s infinite forwards;
  animation-delay: ${props => props.second
    ? -1
    : 0
  }s;
`

const Container = styled.section`
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
`

render(
  <Container>
    <Bubble />
    <Bubble second />
  </Container>,
  document.body.firstChild
)

Modifying colors

We have created some useful functions that help us doing modifying colors:

• rgba()
• shade()

Rgba

rgba() makes an rgba color by taking normal rgb values or an hex color:
The first parameter is the hex or the rgb color, the second one is the alpha value.

import styled, { rgba } from '@slup/theming'

const Title = styled.h1`
  color: ${rgba('#fff', 0.87)};
  background: ${rgba(52, 37, 137, 0.3)};
`

Shade

shade() is a function that combines two other functions called lighten() and darken() in Sass.

So shade() lightens the color if the first parameter is positive and it darkens it if it is negative:
The first parameter is the amount of lightness/darkness you want to add, the second one is a string representing the hex or the rgb color.

import styled, { shade } from '@slup/theming'

const Box = styled.div`
  background: ${shade(-1, '#fff')};          // Returns pure black
  color: ${shade(0.3, 'rgb(66, 134, 244)')}; // Returns rgb(212,227,252)
`