coast-redwood

the alpha version of a common ui

Install

npm install --save coastal-redwood

Usage

import React, { Component } from 'react'

// import colors as javascript variables
import { Colors } from 'coastal-redwood'

// import common component css
import 'coastal-redwood/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

import React, { Component } from 'react'

import { StylesJS, StylesCSS } from 'coastal-redwood'
import 'coastal-redwood/dist/index.css'

class Example extends Component {
  console.log(StylesJS.shades.colors.base) // #00C0E8
  console.log(StylesCSS.variables) // _styles-module__variables__3o5-J
  console.log(StylesCSS.textBase)  // _styles-module__textBase__d4DYY

  render() {
    return (
      <>
      </>
    )
  }
}

<div className={StylesCSS.variables}> 
  { /* access to the CSS custom properties here */ }  
</div>

<div className={StylesCSS.textBase}>
  { /* all the text would be accurately styled here using css */ }  
</div>    

<div style={{...StylesJS.typography.textBase}}>
  { /* all the text would be accurately styled here using JS */ }  
</div>    

<div 
  style={ 
    fontSize: StylesJS.typography.textBase.fontSize, 
    color: StylesJS.typography.textBase.color,   
  }>
    { /* all the text would be accurately styled here using JS */ }  
</div>