Quick Tip: Using Arrays as CSS config and Immutable Reverse

/**
* styles/config.js
*/
export const scale = [
4, // Smallest
8,
16,
24,
32,
40, // Biggest
]
export const shadesOfGrey = [
'#FAFAFA', // Lightest
'#F5F5F5',
'#EEEEEE',
'#E0E0E0',
'#BDBDBD',
'#9E9E9E',
'#757575',
'#616161',
'#424242', // Darkest
]
/**
* Button/index.js
*/
import React from 'react'
import styled from 'styled-components'
import { scale, shadesOfGrey } from '../styles/config'export const Button = styled.button`
padding: ${scale[0]};
background: ${shadesOfGrey[4]};
`
export const DarkButton = styled.button`
padding: ${scale[1]};
background: ${shadesOfGrey.reverse()[0]};
color: ${shadesOfGrey[0]} // !!! MUTATED will be darkest !!!
`
export const DarkButton = styled.button`
padding: ${scale[1]};
background: ${[...${shadesOfGrey].reverse()[0]};
color: ${shadesOfGrey[0]} // still lightest! :)
`

--

--

--

Designer, developer and co-founder of @studiocartogram and @fondfolio

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matt Seccafien

Matt Seccafien

Designer, developer and co-founder of @studiocartogram and @fondfolio

More from Medium

React Comments and @ Mentions

Polling Position of Animated Elements

Screenshot of TypeSabers typing game

Media queries with CSS in JSS using @emotion/react.

React — css styled component