@eduzz/houston-styles NPM

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;
`;

useStyles: estilar usando o padrão do JSS.

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

@eduzz/houston-tokens @emotion/cache @emotion/css @emotion/react @emotion/styled

@infinitebrahmanuniverse/nolb-_edu @everything-registry/sub-chunk-278 @eduzz/houston-ui @zalastax/nolb-_edu

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago