Téléchargement styled theme - Téléchargement du code source styled theme

styled theme

Téléchargement de polices

1.0.0

Télécharger

Styled-thème ??

Système de thème pour les composants stylisés?

Installer

 $ npm install --save styled-theme

Usage

Jouez avec Webpackbin

 import styled from 'styled-components'
import { font , palette } from 'styled-theme' 

const Text = styled . span `
  font-family: ${ font ( 'primary' ) } ;
  background-color: ${ palette ( 1 ) } ;
  color: ${ palette ( 'grayscale' , 0 , true ) } ;
`

Text . defaultProps = {
  palette : 'primary'
}

 < Text > Hello </ Text >

 < Text reverse > Hello </ Text >

 < Text palette = "secondary" > Hello </ Text >

Fournissez votre propre thème

 import { ThemeProvider } from 'styled-components'

const xmasTheme = {
  fonts : {
    primary : 'Georgia, serif'
  } ,
  palette : {
    // red gradient
    primary : [ '#D32F2F' , '#F44336' , '#F8877F' , '#FFCDD2' ]
  }
}

< ThemeProvider theme = { xmasTheme } >
  < Text > Hello </ Text >
< / ThemeProvider>

Structure du thème par défaut

Ceci est le contenu de src/theme.js :

 import coolorsToHex from 'coolors-to-hex'
import { reversePalette } from './composer'

const theme = { }

theme . palette = {
  primary : coolorsToHex ( 'https://coolors.co/1976d2-2196f3-71bcf7-97cef9-c2e2fb' ) ,
  secondary : coolorsToHex ( 'https://coolors.co/c2185b-e91e63-f06292-f48caf-f8bbd0' ) ,
  danger : coolorsToHex ( 'https://coolors.co/d32f2f-f44336-f8877f-f9a7a1-ffcdd2' ) ,
  alert : coolorsToHex ( 'https://coolors.co/ffa000-ffc107-ffd761-ffecb3-fff2ce' ) ,
  success : coolorsToHex ( 'https://coolors.co/388e3c-4caf50-7cc47f-9fd4a1-c8e6c9' ) ,
  grayscale : [ '#212121' , '#616161' , '#9e9e9e' , '#bdbdbd' , '#e0e0e0' , '#ffffff' ]
}

theme . reversePalette = reversePalette ( theme . palette )

theme . fonts = {
  primary : 'Helvetica Neue, Helvetica, Roboto, sans-serif' ,
  pre : 'Consolas, Liberation Mono, Menlo, Courier, monospace' ,
  quote : 'Georgia, serif'
}

theme . sizes = {
  maxWidth : '1100px'
}

export default theme

reversePalette est une méthode d'assistance. Importez-le à partir styled-theme/composer .

API

inverse

Retourne la palette

Paramètres

palette

Exemples

 reversePalette ( { primary : [ 'red' , 'yellow' , 'green' ] } )
// { primary: ['green', 'yellow', 'red'] }

Palette de retours

clé

Renvoie la valeur des props.theme[path] styledTheme[path]

Paramètres

path (String | Array <string>)
defaultValue n'importe quel

Exemples

 const Button = styled . button `
 font-family: ${ key ( 'fonts.primary' ) } ;
 color: ${ key ( [ 'colors' , 'primary' , 0 ] ) } ;
`

Renvoie un

fonte

SHORTME À key(['fonts', path])

Paramètres

chaîne path
defaultValue n'importe quel

Exemples

 const Button = styled . button `
 font-family: ${ font ( 'primary' ) } ;
`

Renvoie la police

taille

Sténographie à key(['sizes', path])

Paramètres

chaîne path
defaultValue n'importe quel

Exemples

 const Button = styled . button `
 padding: ${ size ( 'padding' ) } ;
`

Taille des rendements

palette

Renvoie la valeur des props.theme[palette || reversePalette][path][index] ou styledTheme[palette || reversePalette][path][index] (thème par défaut)

Les arguments peuvent être adoptés dans n'importe quel ordre, tant que les types sont conservés.

Paramètres

Numéro index L'index du ton dans le tableau des tons de palette de thème
String path ? La clé des tons dans l'objet de palette de thèmes ( props.palette par défaut facultatifs.palette)
Objet exceptions ? Un objet avec chemin comme clé et index comme valeur
booléen reverse ? Flag pour retourner le ton de reversePalette ou palette
String defaultValue ? Valeur par défaut
args ... tout

Exemples

 // index = 1
// exception = { grayscale: 0 }
// reverse = true
const Button = styled . button `
 background-color: ${ palette ( { grayscale : 0 } , 1 , true ) } ;
`

// renders props.theme.reversePalette.grayscale[0]
< Button palette = "grayscale" / >

// renders props.theme.palette.danger[1] (nullify reverse)
< Button palette = "danger" reverse />