1.9.8 • Published 2 years ago

@eduzz/houston-styles v1.9.8

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

name: Visão geral

Styles

Instalação

É necessário instalar diretamente o @eduzz/houston-styles caso não utilize o @eduzz/houston-ui.

yarn add @eduzz/houston-styles

Uso

No arquivo raiz de seu projeto, defina sua paleta de cores e adicione o provedor da seguinte maneira:

import createTheme, { HoustonThemeProps } from '@eduzz/houston-styles/createTheme';
import ThemeProvider from '@eduzz/houston-styles/ThemeProvider';

const theme: HoustonThemeProps = createTheme('orbita');
// ou
const theme: HoustonThemeProps = createTheme({
  primary: {
    pure: '#0D47A1',
    light: '#9EB5D9',
    medium: '#265AAB',
    dark: '#072D83'
  }
});

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

Estilizando um componente

Existem duas maneiras de estilar, mas ambos usam o emotion e tem o mesmo impacto de performance, fica mais a critério de gosto, mas recomendamos o styled para padronizar:

  • styled (Recomendado): estilar os componentes no estilo styled-components.
import styled, { StyledProp } from '@eduzz/houston-styles';

const Component: React.FC<StyledProp> = ({ className }) => {
  return <div className={className} />;
};

export default styled(Component)`
  background-color: red;
`;
import createUseStyles from '@eduzz/houston-styles/createUseStyles';

const useStyles = createUseStyles(() => {
  container: {
    background: 'red';
  }
});

const Component: React.FC = props => {
  const styles = useStyles(props);

  return <div className={styles.container} />;
};

export default Component;

useHoustonTheme

Caso queria apenas utlizar as variáveis sem criar um estilo é possível utilizar esse hook.

import useHoustonTheme from '@eduzz/houston-styles/useHoustonTheme';

const ComponentsDev = memo<IProps>(props => {
  const theme = useHoustonTheme();
  return <div>Tamanho: {theme.font.size.xs}</div>;
});

Objeto Tema (HoustonThemeProps)

Veja aqui os tokens

1.6.1

2 years ago

1.6.0

2 years ago

1.9.1

2 years ago

1.5.5

2 years ago

1.9.0

2 years ago

1.5.4

2 years ago

1.5.3

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.0.16

2 years ago

1.8.2

2 years ago

1.8.1

2 years ago

1.8.0

2 years ago

1.5.1-beta.0

2 years ago

1.9.8

2 years ago

1.9.7

2 years ago

1.9.6

2 years ago

1.9.5

2 years ago

1.5.9

2 years ago

1.9.4

2 years ago

1.5.8

2 years ago

1.9.3

2 years ago

1.5.7

2 years ago

1.9.2

2 years ago

1.5.6

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.0.11

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.2.10

3 years ago

1.5.0

2 years ago

1.2.9

3 years ago

1.4.1

2 years ago

1.4.0

3 years ago

1.4.0-beta.0

3 years ago

1.3.0

3 years ago

1.5.0-beta.0

2 years ago

1.0.10

3 years ago

1.2.0

3 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

0.63.4

3 years ago

0.63.3

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

0.63.0

3 years ago

0.63.2

3 years ago

0.63.1

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

0.64.7

3 years ago

0.64.6

3 years ago

0.64.8

3 years ago

0.64.3

3 years ago

0.64.2

3 years ago

0.64.5

3 years ago

0.64.4

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

0.64.1

3 years ago

1.0.7

3 years ago

0.64.0

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

0.65.0-beta.3

3 years ago

0.65.0-beta.2

3 years ago

0.65.0-beta.1

3 years ago

0.65.0-beta.0

3 years ago

0.65.0-beta.7

3 years ago

0.65.0-beta.5

3 years ago

0.65.0-beta.4

3 years ago

1.2.0-beta.1

3 years ago

1.2.0-beta.0

3 years ago

0.65.0-beta.9

3 years ago

1.2.0-beta.2

3 years ago

1.2.0-beta.5

3 years ago

1.2.0-beta.4

3 years ago

0.65.0-beta.10

3 years ago

0.65.0-beta.16

3 years ago

0.65.0-beta.15

3 years ago

0.65.0-beta.17

3 years ago

0.65.0-beta.11

3 years ago

0.65.0-beta.14

3 years ago

0.65.0-beta.13

3 years ago

1.0.0-rc.1

3 years ago

0.63.1-beta.0

3 years ago

0.58.0-beta.0

3 years ago

0.58.0-beta.1

3 years ago

0.58.0-beta.2

3 years ago

0.58.0-beta.3

3 years ago

0.60.3

3 years ago

0.62.0

3 years ago

0.60.2

3 years ago

0.53.0-beta.0

3 years ago

0.60.1

3 years ago

0.60.0

3 years ago

0.59.0

3 years ago

0.57.2

3 years ago

0.57.0

3 years ago

0.53.4

3 years ago

0.57.1

3 years ago

0.55.0

3 years ago

0.53.2

3 years ago

0.53.3

3 years ago

0.53.0

3 years ago

0.53.1

3 years ago

0.51.0

3 years ago

0.52.0-beta.2

3 years ago

0.48.0

3 years ago

0.48.1

3 years ago

0.52.0-beta.0

3 years ago

0.52.0-beta.1

3 years ago

0.61.2

3 years ago

0.61.1

3 years ago

0.61.0

3 years ago

0.58.3

3 years ago

0.58.4

3 years ago

0.58.1

3 years ago

0.58.2

3 years ago

0.56.1

3 years ago

0.58.0

3 years ago

0.56.0

3 years ago

0.58.9

3 years ago

0.58.10

3 years ago

0.58.11

3 years ago

0.58.8

3 years ago

0.58.6

3 years ago

0.54.0-beta.1

3 years ago

0.54.0-beta.0

3 years ago

0.54.0-beta.3

3 years ago

0.54.0-beta.2

3 years ago

0.54.0-beta.5

3 years ago

0.60.0-beta.1

3 years ago

0.54.0-beta.4

3 years ago

0.52.1

3 years ago

0.59.0-beta.0

3 years ago

0.54.0

3 years ago

0.52.0

3 years ago

0.50.0

3 years ago

0.59.0-beta.1

3 years ago

0.47.13

3 years ago

0.47.12

3 years ago

0.47.11

3 years ago

0.49.0

3 years ago

0.47.3

3 years ago

0.46.4

3 years ago

0.47.4

3 years ago

0.46.5

3 years ago

0.47.1

3 years ago

0.46.2

3 years ago

0.47.10

3 years ago

0.47.2

3 years ago

0.46.3

3 years ago

0.47.0-beta.2

3 years ago

0.46.0

3 years ago

0.47.0

3 years ago

0.47.0-beta.3

3 years ago

0.46.1

3 years ago

0.47.0-beta.0

3 years ago

0.47.0-beta.1

3 years ago

0.47.9

3 years ago

0.47.7

3 years ago

0.47.8

3 years ago

0.47.5

3 years ago

0.46.6

3 years ago

0.47.6

3 years ago

0.46.7

3 years ago

0.44.0

3 years ago

0.44.0-beta.1

3 years ago

0.45.0

3 years ago

0.44.1

3 years ago

0.44.0-beta.0

3 years ago

0.43.2

3 years ago