Skip to main content

@fower/core

Installation​

npm install @fower/core

css​

import { fower, css } from '@fower/core'
import preset from '@fower/preset-web'

fower.setConfig(preset)

const className = css('p-20', 'mx-10', 'borderGray', 'text4XL')

const $app = document.getElementById('root')

$app.className = className

createStyle​

Use Atomic Props:

import React from 'react'
import { createStyle } from '@fower/core'

const cardStyle = createStyle('p-20', 'square-400', 'bgRed')

export default () => {
  return <div style={cardStyle}></div>
}

Use CSS Object:

import React from 'react'
import { createStyle } from '@fower/core'

const cardStyle = createStyle('p-20', 'square-400', 'bgRed', {
  background: '#fff',
  fontSize: 14,
})

export default () => {
  return <div style={cardStyle}></div>
}

keyframe​

import { Box } from '@fower/react'
import { keyframes } from '@fower/core'

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
    padding: 10,
  },

  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },

  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },

  '90%': {
    transform: 'translate3d(0,-4px,0)',
  },
})

export default () => {
  return (
    <Box toCenter>
      <Box
        text-30
        css={{
          animation: `${bounce} 1s ease infinite`,
        }}
      >
        40 Lorem ipsum dolor sit amet
      </Box>
    </Box>
  )
}

injectGlobalStyle​

import { injectGlobalStyle } from '@fower/core'

injectGlobalStyle({
  '*, ::before, ::after': {
    borderWidth: 0,
    borderStyle: 'solid',
    borderColor: '#d4d4d4',
    boxSizing: 'border-box',
  },
  html: {
    padding: 0,
    margin: 0,
  },
})

setConfig​

import { setConfig } from '@fower/core'

setConfig({
  unit: 'rem',
})

getConfig​

import { getConfig } from '@fower/core'

const config = getConfig()

setTheme​

import { setTheme } from '@fower/core'

setTheme({
  colors: {
    brandLight: '#e0f2fe',
    brandLighter: '#bae6fd',
    brandLightest: '#7dd3fc',
    brandPrimary: '#38bdf8',
    brandDark: '#0ea5e9',
    brandDarker: '#0284c7',
    brandDarkest: '#0369a1',
  },
})

getTheme​

import { getTheme } from '@fower/core'

const theme = getTheme()

addAtom​

addAtom will create new atomic prop.

import { addAtom } from '@fower/core'

addAtom('textHeading', {
  fontSize: 28,
  fontWeight: 600,
  lineHeight: 1.5,
})

composeAtom​

composeAtom will compose existed atomic props to single, but not create a new prop.

import { composeAtom } from '@fower/core'

composeAtom('formInput', {
  'border-2': true,
  borderGray200: true,
  'borderOrange400--focus': true,
  rounded: true,
  outlineNone: true,
  px4: true,
  py2: true,
})