@thesaurus/themes v0.0.36
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
- getTheme
- GlobalCSS
- GlobalCSSCMS
- getGlobalTheme
- getSiteTheme (A deprecar)
- getSubTheme (A deprecar)
- getGlobalTheme__raw
- getSiteTheme__raw (A deprecar)
- getSubTheme__raw (A deprecar)
- montserratCSS
- ptsansCSS
- sourceSansProCSS
@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"
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago