0.0.36 • Published 4 years ago

@thesaurus/themes v0.0.36

Weekly downloads
-
License
-
Repository
-
Last release
4 years ago

Thesaurus themes

Themes de thesaurus IE

Instalación

yarn

yarn add @thesaurus/themes styled-components @sqymagma/theme

npm

npm install --save @thesaurus/components styled-components @sqymagma/theme

Funciones

@thesaurus/themes viene con varias funciones para obtener los themes.

### getTheme

Devuelve el Site Theme y/o el Sub Theme de un site.

// Theme
getTheme({ site: "1" })
// SubTheme
getTheme({ site: "1", subtheme: "accent" })

GlobalCSS

Devuelve el CSS Global que aplicamos a Thesaurus.

Viene con:

  • reset
  • normalize
  • custom css

Es obligatorio añadirlo a la raíz de la App o donde vaya a renderizarse nuestra web.

import { GlobalCSS } from "@thesaurus/themes"

const App = () => (
  <ThemeProvider theme={{}}>
    <React.Fragment>
      <GlobalCSS />
      <div>Contenido</div>
    </React.Fragment>
  </ThemeProvider>
)

GlobalCSSCMS

Devuelve el CSS Global que aplicamos a Thesaurus CMS.

Viene con:

  • @import SourceSans
  • reset
  • normalize
  • custom css
import { GlobalCSSCMS } from "@thesaurus/themes"

const App = () => (
  <ThemeProvider theme={{}}>
    <React.Fragment>
      <GlobalCSSCMS />
      <div>Contenido</div>
    </React.Fragment>
  </ThemeProvider>
)

getGlobalTheme

Devuelve el theme global parseado. Probablemente no vas a querer hacer esto salvo por pruebas, etc..

getSiteTheme

Devuelve el theme del site parseado. Este theme es el que probablemente asignes al un site del IE.

getSubTheme

Devuelve un subtheme parseado. Este theme se utilizará para aplicar los subthemes tanto de componentes como de módulos

Raw

Hay una versión por cada función que devuelve lo mismo pero con el theme sin procesar

  • getGlobalTheme__raw
  • getSiteTheme__raw
  • getSubTheme__raw

## Como se usa

import { getSiteTheme, getSubTheme } from "@thesaurus/themes"

// Site Theme
<ThemeProvider theme={getSiteTheme({site: "1"})>
  ...
</ThemeProvider>

// SubTheme
<ThemeProvider theme={getSubTheme({site: "1", name:"accent"})>
  ...
</ThemeProvider>

montserratCSS

Font face para Montserrat. Devuelve una función css de styled component.

const Global = createGlobalStyle = `
  ${montserratCSS}
  ...
`

<ThemeProvider theme={...}>
  <Global />
</ThemeProvider>

ptsansCSS

Font face para PT-Sans Devuelve una función css de styled component.

sourceSansProCSS

Font face para Source Sans Pro Devuelve una función css de styled component.

Futuro

En un futuro se podría implementar llamadas directas a themes

Ejemeplo

import { UniversityTheme, UniversitySubThemes } from "@thesaurus/themes"
0.0.36

4 years ago

0.0.35

4 years ago

0.0.34

4 years ago

0.0.33

4 years ago

0.0.32

4 years ago

0.0.30

4 years ago

0.0.31

4 years ago

0.0.29

4 years ago

0.0.28

4 years ago

0.0.27

4 years ago

0.0.25

4 years ago

0.0.26

4 years ago

0.0.24

4 years ago

0.0.22

4 years ago

0.0.23

4 years ago

0.0.20

4 years ago

0.0.21

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.17

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.14

4 years ago

0.0.13

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago