Paleta de cores

O Design System tem uma paleta de cores própria, ele faz uso durante a definição das telas. A biblioteca @zoox-ui/components. Então este pacote deve estar instalado no projeto para isto funcionar.

A paleta completa pode ser encontrada no Link: Paleta de cores (opens new window)

Dentro da biblioteca fornecemos 2 maneiras de acessar as cores pré-definidas: Variáveis CSS e Instância global da Zoox no Vue.

Instância Global do Vue ($zoox)

Além da utilização dentro do CSS, tem vezes que precisamos utilizá-las dentro do nosso código Vue. Para estes casos, temos uma variável da Zoox definida globalmente, chamada $zoox

Esta variável contém dentro dela as cores da paleta de cores.

<template>
  <!-- Dentro da tag do template -->
  <z-btn :color="$zoox.colors.magenta" />
</template>

<script>
// Dentro da VM
export default {
  computed: {
    color() {
      return this.$zoox.colors.magenta100; // Retorna a mesma cor que a variável --magenta-100
    },
  },
};
</script>

Variáveis CSS

O Design System busca dar a maior flexibilidade possível para o usuário. Por esse motivo, em diversos estilos, são utilizadas variáveis CSS.

Para garantir que sempre as mesmas cores serão utilizadas e para facilitar a aplicação delas e facilitar a alteração caso necessário.

As principais estão definidas da seguinte forma

:root {
  --primary: #0273c3;
  --background: #f4f4f4;

  // Brand Colors
  --zooxblue: #00bbd3;
  --zooxlightblue: #b2d2d6;

  // Black and white
  --white: #fff;
  --black-050: #ececec;
  --black-100: #ddd;
  --black-300: #999;
  --black-600: #666;
  --black-800: #333;
  --black: #000;
}

Já as cores que tem tonalidade, seguem o seguinte padrão:

:root {
  --magenta: #a92374;
  --magenta-100: #e7a2cc;
  --magenta-200: #d57db2;
  --magenta-300: #c05295;
  --magenta-400: #af2f7c;
  --magenta-500: #a92374;
  --magenta-600: #8e2066;
  --magenta-700: #801d5e;
  --magenta-800: #5d0d41;
  --magenta-900: #47032f;
}

Os também já estão definidos para utilização caso necessário:

:root {
  --gradient-blue: linear-gradient(160.62deg, #00bbd3 0%, #0273c3 100%);
  --gradient-fullblue: linear-gradient(
    160.62deg,
    #55a9db 0%,
    #0273c3 49.73%,
    #004c91 100%
  );
  --gradient-blue-magenta: linear-gradient(
    99.9deg,
    #0273c3 0%,
    #004c91 50.52%,
    #a92374 100%
  );
  --gradient-blue-purple-magenta: linear-gradient(
    99.87deg,
    #004c91 0%,
    #6f2a82 51.46%,
    #a92374 100%
  );
}

Todas as cores da paleta de cores estão definidas como variáveis SCSS

Para acessá-las dentro do CSS a sintaxe é a seguinte:

.background {
  color: var(--magenta-100);
  background-color: var(--black-600);
}

TIP

No Devtools, na aba CSS são exibidas as variáveis CSS na parte inferior.