SteedMonteiro / zeplin-styled-components-extension

Generates styled-components snippets from colors, text styles and layers.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Zeplin Styled Components - React Native Extension

Generates styled-components snippets from colors, text styles and layers for react-native.

This is an adaptation from the original styled components extension to make the subtle changes needed for use in react-native.

Sample component output:

styled.View`
  ${Typography.Button};
  width: 69px;
  height: 16px;
  font-weight: 500;
  color: ${Colors.White};
`

Sample colors output:

export default {
  White: '#ffffff',
  Blue300: '#4a90e2',
  Gray300: '#9b9b9b',
  Black300: '#000000'
}

Sample text style output:

import { styled } from 'styled-components/native'

export default {
  Body: styled.Text`
    font-family: OpenSans;
    font-size: 18px;
    line-height: 24px;
  `,

  Title: styled.Text`
    font-family: OpenSans;
    font-size: 48px;
    font-weight: bold;
    line-height: 52px;
  `,

  Button: styled.Text`
    font-family: OpenSans;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1px;
  `
}

TODO

  • Add parameter for exporting colors with alpha channel using hexToRgba function.
  • Add parameter for including breakpoints.

About

Generates styled-components snippets from colors, text styles and layers.


Languages

Language:JavaScript 100.0%