acai-ui 1.65.5

package/dist/scss/_ds-input-base.scss

@@ -0,0 +1,302 @@
+// Açaí UI — Input Base Styles
+
+// Respiro horizontal da caixa. Mesmo 12px que o Quasar usa em filled/outlined/
+// standout — o valor tem que ser IGUAL, senão alternar a variante move o texto.
+$ds-input-padding-x: 12px;
+
+// Altura do campo no caminho de altura FIXA — os mesmos números que o Quasar usa
+// (`QField.sass`), repetidos aqui porque o `auto-height` precisa alcançá-los.
+$ds-input-altura: 56px;
+$ds-input-altura-dense: 40px;
+
+.ds-input {
+  &.q-field {
+    :deep(.q-field__control) {
+      min-height: 40px;
+      transition: all 0.2s ease;
+    }
+
+    // 🔴 O SELECT NASCE 2px MAIS ALTO QUE O INPUT — e a culpa é da nossa borda.
+    //
+    // O QSelect emite `q-field--auto-height` INCONDICIONALMENTE (`QSelect.js`,
+    // no `fieldClass`; só o sufixo `with-input` depende da prop). Com essa classe
+    // o controle troca `height: 56px` por `height: auto`, e aí a altura passa a
+    // ser o conteúdo mais o que estiver em volta. O conteúdo já bate os 56px
+    // sozinho (24px de recuo do container + 32px do native), então a borda de 1px
+    // que reservamos logo abaixo SOMA POR FORA: 58px contra 56px do input.
+    //
+    // Ninguém repara nos 2px de um campo isolado. O que se vê é a linha da grade
+    // de duas colunas nunca fechar certo, porque todo par input+select tem esse
+    // degrau — e como o `auto-height` é incondicional, isso vale para TODO select
+    // da lib, não para um caso especial.
+    //
+    // Devolver a altura fixa resolve na origem: a caixa desenhada volta a medir o
+    // mesmo que a do input (não só o espaço ocupado — tentar com `margin` negativo
+    // encolhe o espaço e deixa a BORDA 2px maior, o degrau visual continua lá).
+    //
+    // Só para o select de valor único e sem chips: com `multiple`/`use-chips` o
+    // campo precisa mesmo crescer conforme as seleções, e é para isso que o
+    // `auto-height` existe. Esse caso continua 2px mais alto que os demais mesmo
+    // vazio — medido, não suposto: tentar compensar reduzindo o respiro do native
+    // não move nada ali, porque quem dita a altura são as chips, não o padding.
+    // Fica assim de propósito: é o único campo cuja altura muda com o uso, então
+    // ninguém alinha grade por ele.
+    &.q-select--single:not(.q-select--with-chips) {
+      :deep(.q-field__control) {
+        height: $ds-input-altura;
+      }
+
+      &.q-field--dense :deep(.q-field__control) {
+        height: $ds-input-altura-dense;
+      }
+    }
+
+    // A CAIXA e o RESPIRO DELA andam juntos.
+    //
+    // O Quasar só põe `padding: 0 12px` no controle das variantes que têm caixa
+    // (filled/outlined/standout). Em `standard` ele crava 0 DE PROPÓSITO, porque
+    // standard é a variante do sublinhado — ali não existe caixa nenhuma. Só que
+    // a lib desenhava a caixa (radius, e no escuro fundo+borda) sem olhar a
+    // variante: em leitura (`:filled="false"`) o texto encostava na borda, e ao
+    // entrar em edição (`:filled="true"`) saltava 12px na horizontal.
+    //
+    // Agora o padding vale em todas as variantes, no mesmo 12px — alternar
+    // `filled` não move o texto um pixel. O `.q-field__bottom` (hint/erro) vai
+    // junto, senão a mensagem fica desalinhada do valor que ela comenta.
+    //
+    // `borderless` fica de fora de tudo: ali a intenção é NENHUM chrome, e o
+    // guard certo é na caixa, não no padding.
+    &:not(.q-field--borderless) {
+      :deep(.q-field__control) {
+        border-radius: $radius-lg;
+        padding-left: $ds-input-padding-x;
+        padding-right: $ds-input-padding-x;
+        // A borda é RESERVADA em toda variante, transparente onde não deve
+        // aparecer. Sem isso sobra 1px de salto: em leitura a caixa tem borda e
+        // em edição não, e a borda empurra o conteúdo. De quebra, `border-color`
+        // de foco e de erro passa a ter o que pintar também no filled do tema
+        // claro — hoje aquelas regras existem e não pintam nada, porque sem
+        // largura de borda não há borda pra colorir.
+        border: 1px solid transparent;
+      }
+
+      :deep(.q-field__bottom) {
+        padding-left: $ds-input-padding-x;
+        padding-right: $ds-input-padding-x;
+      }
+    }
+
+    // A BARRA de foco/erro do Material, refeita para acompanhar a caixa.
+    //
+    // O `::after` do Quasar é uma linha de 2px, reta e de ponta a ponta, absoluta
+    // no padding box. A faixa de altura em que ela cai é justamente onde o canto
+    // arredondado já se curvou para dentro, então as duas pontas sobram para fora
+    // da silhueta: a linha vaza pelos lados do campo.
+    //
+    // Em vez de encurtar a barra (o que abre um vão de borda sem linha nas duas
+    // extremidades), ela vira a PRÓPRIA curva: uma caixa da altura do raio, sem
+    // fundo, desenhada só pela borda de baixo e com os cantos inferiores no mesmo
+    // raio da caixa. Assim a linha percorre a base inteira e sobe junto com o
+    // arredondamento, terminando exatamente onde ele termina.
+    //
+    // Os números não são estéticos, são geometria:
+    // - `height` IGUAL ao raio. Os cantos de cima são retos, então a soma dos
+    //   raios na aresta lateral é `0 + $radius-lg`: com essa altura o navegador
+    //   desenha o raio pedido em vez de reduzi-lo proporcionalmente (é o que
+    //   acontece se a caixa for mais baixa, e a curva deixa de bater com a da
+    //   borda).
+    // - `left`/`right` em `-1px` alinham a barra com a borda EXTERNA da caixa —
+    //   sem isso ela nasce no padding box, 1px mais estreita de cada lado, e as
+    //   duas curvas ficam desencontradas.
+    // - `bottom: -2px` (a altura da linha) a leva para DEBAIXO da borda, em vez
+    //   de sobreposta por dentro.
+    //
+    // O fundo vai para a borda porque é `currentColor` nos dois casos — a cor
+    // continua sendo a que o Quasar resolve por estado, e a animação de entrada
+    // (`scale3d` no eixo X) segue intacta.
+    //
+    // 🔴 Só `filled` e `standard`, NUNCA `outlined`: nessa variante o Quasar usa
+    // o mesmo `::after` para outra coisa — a moldura inteira do campo, com
+    // `height: inherit`, `border-radius: inherit` e borda nos quatro lados. Uma
+    // regra escrita larga aqui reescreve a moldura e desenha o campo errado.
+    &.q-field--filled,
+    &.q-field--standard {
+      :deep(.q-field__control::after) {
+        height: $radius-lg;
+        top: auto;
+        left: -1px;
+        right: -1px;
+        bottom: -2px;
+        background: transparent;
+        border: 0 solid currentColor;
+        border-bottom-width: 2px;
+        border-bottom-left-radius: $radius-lg;
+        border-bottom-right-radius: $radius-lg;
+      }
+    }
+
+    // Caixa da variante SEM chrome próprio (`standard`, que é o modo leitura da
+    // ficha). Isto existia só dentro do `.body--dark` lá embaixo: no tema claro
+    // o mesmo campo ficava sem fundo, sem borda, só com o sublinhado do
+    // Material — dois desenhos diferentes pro mesmo componente, e cada
+    // consumidor escrevendo o próprio paliativo. Os dois valores já são token,
+    // então valem nos dois temas (o bloco dark sobrescreve com o tom de lá).
+    //
+    // Só `standard`: filled e outlined já trazem o chrome deles: dar borda a
+    // eles aqui mudaria todo formulário de todo consumidor.
+    &.q-field--standard {
+      :deep(.q-field__control) {
+        background: var(--acai-surface-2);
+        // Só a cor: a largura já vem reservada do bloco acima.
+        border-color: var(--acai-border);
+      }
+
+      // Sublinhado do Material sai — com a caixa desenhada, ele dobra o chrome.
+      // (Em readonly o Quasar o deixa tracejado, mesma coisa.)
+      :deep(.q-field__control::before) {
+        border-color: transparent;
+      }
+    }
+
+    // Ritmo vertical do MODO LEITURA.
+    //
+    // A geometria do Quasar (label `top: 18px`, native `padding: 24px/8px`) é a
+    // do campo de ENTRADA DE DADOS: ali o rótulo flutuante é um ESTADO de um
+    // campo focável. Numa ficha em leitura o rótulo vira legenda do valor, e a
+    // mesma geometria deixa ~3,7px entre os dois glifos contra ~11px em cima e
+    // ~10,9px embaixo — grudado no meio e sobrando nas pontas.
+    //
+    // Sobe o rótulo 3px e desce o valor 2px: fica ~8 / 8,7 / 8,9. A soma do
+    // native continua 56px (26 + 24 de line-height + 6), então a altura do
+    // controle não muda. Vale só em não-dense: a caixa densa tem 40px e outra
+    // proporção, que não foi medida.
+    &.q-field--standard.q-field--labeled:not(.q-field--dense) {
+      :deep(.q-field__label) {
+        top: 15px;
+      }
+
+      :deep(.q-field__native),
+      :deep(.q-field__prefix),
+      :deep(.q-field__suffix) {
+        padding-top: 26px;
+        padding-bottom: 6px;
+      }
+    }
+
+    :deep(.q-field__label) {
+      font-weight: 500;
+      // Token semântico: gray no claro, claro no escuro (o input vira dark).
+      color: var(--acai-text-muted, #{$color-gray-700});
+    }
+
+    // Texto digitado + placeholder: NÃO confiar no dark nativo do Quasar (só
+    // trata as cores de marca dele). Tokens --acai-* flipam claro/escuro sozinhos
+    // — vale pra input, select, date, time (todos importam este partial).
+    :deep(.q-field__native),
+    :deep(.q-field__input),
+    :deep(.q-field__native > span) {
+      color: var(--acai-text, #{$color-gray-900});
+    }
+
+    :deep(.q-field__native)::placeholder,
+    :deep(.q-field__input)::placeholder {
+      color: var(--acai-text-muted, #{$color-gray-600});
+    }
+
+    // Ícones prepend/append (iconLeft/iconRight): cor mutada dark-aware. Antes
+    // herdavam currentColor e no escuro saíam navy/apagados. --acai-text-muted
+    // flipa (cinza no claro, claro no escuro).
+    :deep(.q-field__prepend .q-icon),
+    :deep(.q-field__append .q-icon) {
+      color: var(--acai-text-muted, #{$color-gray-600});
+    }
+
+    :deep(.q-field__bottom) {
+      font-size: 0.75rem;
+      padding-top: 4px;
+      // Hint/mensagem: sem cor o Quasar deixa preto → some no dark. --acai-text-muted
+      // flipa. (O estado de erro sobrescreve pra $negative logo abaixo.)
+      color: var(--acai-text-muted, #{$color-gray-600});
+    }
+
+    // `.q-field--focused` é classe do PRÓPRIO elemento raiz (é ele que é o
+    // `.q-field`), não de um descendente: como descendente a regra nunca casava
+    // e o foco não mudava a borda. Com a caixa agora existindo também no claro,
+    // isso é indicação de foco (eMAG 4.3) — precisa valer. `--acai-control-on`
+    // no lugar de `$primary` cru para clarear no escuro e recolorir no daltônico.
+    &.q-field--focused :deep(.q-field__control) {
+      border-color: var(--acai-control-on, #{$primary});
+    }
+  }
+
+  // Estado de erro: keiar na classe do QUASAR (`.q-field--error`), que é setada
+  // tanto pelo prop `error` quanto pela validação por `rules`. Antes keiava em
+  // `.ds-input--error` (só o prop) → erro de `rules` não pegava o vermelho e a
+  // mensagem/borda/label ficavam na cor base (muted/preta). Agora ambos ficam
+  // $negative. (A cor do hint continua sendo a base — só o erro sobrescreve.)
+  // `--acai-negative` (não `$negative` cru): clareia no escuro — o vermelho fixo
+  // dava ~1.6:1 sobre a superfície navy — e recolore no daltônico.
+  //
+  // O `.q-field` a mais não muda o que casa (a raiz É um q-field): é
+  // especificidade. Sem ele a regra tem 3 classes e perde a borda para a caixa
+  // do `standard`, que tem 4 — o campo em erro ficava com a borda cinza.
+  &.q-field.q-field--error {
+    :deep(.q-field__control) {
+      border-color: var(--acai-negative, #{$negative});
+    }
+
+    :deep(.q-field__label) {
+      color: var(--acai-negative, #{$negative});
+    }
+
+    :deep(.q-field__bottom) {
+      color: var(--acai-negative, #{$negative});
+    }
+  }
+
+  &--disabled.q-field {
+    :deep(.q-field__control) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Tema escuro: campo ESCURO limpo (deixa o Quasar tratar texto/label/placeholder
+// nativamente — todos claros no dark), só damos um fundo sutil + borda definida
+// no lugar do overlay pálido/sujo padrão. O `::before` (linha do filled) sai pra
+// não dobrar com a borda; foco vira azul legível.
+// `borderless` fora do guard aqui também: sem isso ele ficava sem radius (o
+// bloco de cima o exclui) mas ganhava fundo e borda no escuro — caixa quadrada
+// numa variante que pede nenhum chrome.
+.body--dark .ds-input.q-field:not(.q-field--borderless) {
+  :deep(.q-field__control) {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--acai-border);
+  }
+
+  :deep(.q-field__control::before) {
+    border-color: transparent;
+  }
+
+  // Ícones prepend/append com color FORÇADO (ex: acai-ui-date usa color="primary"
+  // no ícone 'event') não invertem sozinhos — o `.text-primary` do Quasar vence a
+  // regra do bloco base. !important só no escuro inverte pra cor mutada (o claro
+  // mantém o navy).
+  :deep(.q-field__prepend .q-icon),
+  :deep(.q-field__append .q-icon) {
+    color: var(--acai-text-muted) !important;
+  }
+
+  &.q-field--highlighted :deep(.q-field__control) {
+    border-color: #6aa5e8;
+  }
+
+  // Erro no escuro: a borda da caixa daqui tem `.body--dark` a mais e vencia a
+  // do bloco de erro — o campo inválido ficava com a borda cinza normal, sem
+  // sinal nenhum além da mensagem embaixo (eMAG 6.7). Reafirma o vermelho no
+  // mesmo nível de especificidade do bloco escuro.
+  &.q-field--error :deep(.q-field__control) {
+    border-color: var(--acai-negative);
+  }
+}

package/dist/scss/_ds-picker-m3.scss

@@ -0,0 +1,179 @@
+// Açaí UI — Picker M3 Style (data, hora, data-hora)
+
+@import 'breakpoints';
+
+.ds-picker-m3 {
+  border-radius: $radius-lg;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+
+  // 🔴 No celular o popup vira diálogo e o Quasar limita a altura dele à tela.
+  // Como esta moldura não era flex, o conteúdo que não coubesse simplesmente
+  // TRANSBORDAVA e era decepado pelo `overflow: hidden` acima — sem rolagem,
+  // sem aviso. No <acai-ui-datetime>, onde calendário e relógio empilham, os
+  // últimos 38px do relógio sumiam num aparelho de 667px de altura: dava pra
+  // ver o mostrador cortado no rodapé e não havia como alcançar o resto.
+  //
+  // Como coluna flex, o cabeçalho e o rodapé (onde mora o "OK") ficam fixos e
+  // sobra pro miolo a altura exata — quem rola é ele, no bloco abaixo.
+  @include ate-mobile {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+  }
+
+  .ds-picker-m3__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px 10px 16px;
+    background: $primary;
+    color: white;
+
+    .ds-picker-m3__title {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: white;
+      letter-spacing: 0.3px;
+    }
+
+    .ds-picker-m3__close {
+      color: rgba(255, 255, 255, 0.85);
+
+      &:hover {
+        color: white;
+      }
+    }
+  }
+
+  :deep(.q-date) {
+    border-radius: 0;
+    box-shadow: none;
+
+    .q-date__header {
+      display: none;
+    }
+
+    .q-date__calendar-item .q-btn {
+      border-radius: $radius-sm;
+      font-weight: 500;
+    }
+
+    .q-date__navigation {
+      padding: 4px 8px;
+    }
+  }
+
+  :deep(.q-time) {
+    border-radius: 0;
+    box-shadow: none;
+
+    .q-time__header {
+      display: none;
+    }
+  }
+
+  .ds-picker-m3__footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 6px 12px 10px;
+    gap: 8px;
+    background: var(--acai-surface, #fff);
+    border-top: 1px solid var(--acai-border, #{$color-gray-100});
+  }
+}
+
+// Tema escuro: o q-date/q-time do Quasar é BRANCO (não escurece sem prop `dark`)
+// → miolo do calendário/relógio 100% branco e ilegível. Escurece o container +
+// o miolo + textos. (Header navy e footer --acai-surface já eram dark-aware.)
+.body--dark .ds-picker-m3 {
+  background: var(--acai-surface);
+
+  :deep(.q-date),
+  :deep(.q-time) {
+    background: var(--acai-surface);
+    color: var(--acai-text);
+  }
+
+  :deep(.q-date__calendar-item .q-btn),
+  :deep(.q-date__navigation .q-btn),
+  :deep(.q-time__clock-position) {
+    color: var(--acai-text);
+  }
+
+  :deep(.q-date__calendar-weekdays > div) {
+    color: var(--acai-text-muted);
+  }
+
+  :deep(.q-time__clock) {
+    background: var(--acai-surface-2);
+  }
+
+  // Botão OK do footer: color="primary" (→ .text-primary !important) fica navy
+  // apagado no escuro. !important + azul clicável.
+  :deep(.ds-picker-m3__footer .q-btn) {
+    color: var(--acai-control-on) !important;
+  }
+
+  // Range (data-hora início→fim): o highlight entre as datas usa
+  // `background-color: currentColor` (= primary navy) → some no escuro. Tinta
+  // azul translúcida visível; as pontas (from/to) ganham o azul cheio.
+  :deep(.q-date__range::before) {
+    background: rgba(58, 128, 208, 0.28) !important;
+  }
+
+  :deep(.q-date__range-from::before),
+  :deep(.q-date__range-to::before) {
+    background: var(--acai-control-on) !important;
+  }
+
+  // Dia SELECIONADO (single, ex.: acai-ui-date): o Quasar pinta o botão com
+  // `bg-primary` (navy) → some sobre a superfície escura. Vira control-on (azul
+  // legível) + número branco.
+  :deep(.q-date__calendar-item .q-btn.bg-primary) {
+    background: var(--acai-control-on) !important;
+    color: #fff !important;
+  }
+
+  // Pontas do RANGE (from/to): o número herdava `text-primary` (navy) e ficava
+  // navy SOBRE o círculo azul (control-on, já no ::before) → "azul no azul".
+  // Força branco (o círculo continua azul). eMAG 4.1: branco sobre #3a80d0 ~4.5:1.
+  :deep(.q-date__range-from .q-btn),
+  :deep(.q-date__range-to .q-btn) {
+    color: #fff !important;
+  }
+
+  // Indicador de EDIÇÃO do range (tracejado que segue o mouse após o 1º clique): a
+  // borda (::after via currentColor) e o número herdavam o primary navy → somem no
+  // escuro. Borda azul (control-on) + número claro. As PONTAS têm classe própria
+  // (`-from`/`-to`/`-from-to`, concatenada — QDate.js:763), NÃO contêm o token
+  // `q-date__edit-range`, então precisam ser listadas à parte.
+  :deep(.q-date__edit-range),
+  :deep(.q-date__edit-range-from),
+  :deep(.q-date__edit-range-to),
+  :deep(.q-date__edit-range-from-to) {
+    color: var(--acai-control-on) !important;
+  }
+  :deep(.q-date__edit-range .q-btn),
+  :deep(.q-date__edit-range-from .q-btn),
+  :deep(.q-date__edit-range-to .q-btn),
+  :deep(.q-date__edit-range-from-to .q-btn) {
+    color: var(--acai-text) !important;
+  }
+
+  // Relógio (q-time): ponteiro, centro, posição ATIVA e botão "agora" usam
+  // --q-primary (navy) → somem no mostrador escuro. Viram control-on (azul legível);
+  // o número da posição ativa segue branco.
+  :deep(.q-time__clock-pointer),
+  :deep(.q-time__clock-center) {
+    color: var(--acai-control-on) !important;
+    background: var(--acai-control-on) !important;
+  }
+  :deep(.q-time__clock-position--active) {
+    background-color: var(--acai-control-on) !important;
+    color: #fff !important;
+  }
+  :deep(.q-time__now-button) {
+    background-color: var(--acai-control-on) !important;
+  }
+}

package/dist/scss/_effects.scss

@@ -0,0 +1,42 @@
+// Açaí UI — Effects Tokens (shadows + blur)
+
+// Shadow
+$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+$shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+$shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+$shadow-inset: inset 0 4px 8px rgba(0, 0, 0, 0.15);
+
+// Classes utilitárias — Shadow
+.shadow-xs { box-shadow: $shadow-xs; }
+.shadow-sm { box-shadow: $shadow-sm; }
+.shadow-md { box-shadow: $shadow-md; }
+.shadow-lg { box-shadow: $shadow-lg; }
+.shadow-xl { box-shadow: $shadow-xl; }
+.shadow-2xl { box-shadow: $shadow-2xl; }
+.shadow-inner { box-shadow: $shadow-inner; }
+.shadow-inset { box-shadow: $shadow-inset; }
+
+// Blur
+$blur-xs: 2px;
+$blur-sm: 4px;
+$blur-md: 8px;
+$blur-lg: 16px;
+$blur-xl: 24px;
+
+// Classes utilitárias — Blur
+.blur-xs { filter: blur($blur-xs); }
+.blur-sm { filter: blur($blur-sm); }
+.blur-md { filter: blur($blur-md); }
+.blur-lg { filter: blur($blur-lg); }
+.blur-xl { filter: blur($blur-xl); }
+
+// Backdrop blur
+.backdrop-blur-xs { backdrop-filter: blur($blur-xs); }
+.backdrop-blur-sm { backdrop-filter: blur($blur-sm); }
+.backdrop-blur-md { backdrop-filter: blur($blur-md); }
+.backdrop-blur-lg { backdrop-filter: blur($blur-lg); }
+.backdrop-blur-xl { backdrop-filter: blur($blur-xl); }

package/dist/scss/_overlays.scss

@@ -0,0 +1,13 @@
+// Açaí UI — Overlays globais (Quasar)
+
+// Backdrop de TODO overlay do Quasar (q-dialog: modais/confirm/validation;
+// q-drawer: preferências + navegação em mobile).
+//
+// SEM backdrop-filter de propósito: `blur()` é pesadíssimo na GPU (blura a
+// viewport inteira e recalcula por frame na animação) e trava em máquinas
+// fracas — caso dos PCs do DETRAN. Um overlay sólido navy semi-transparente
+// é performático em qualquer hardware e mantém o foco no conteúdo.
+.q-dialog__backdrop,
+.q-drawer__backdrop {
+  background: rgba(10, 18, 32, 0.55);
+}

package/dist/scss/_radius.scss

@@ -0,0 +1,24 @@
+// Açaí UI — Radius Tokens
+
+$radius-2xs: 1px;
+$radius-xs: 2px;
+$radius-sm: 4px;
+$radius-md: 6px;
+$radius-lg: 8px;
+$radius-xl: 12px;
+$radius-2xl: 16px;
+$radius-3xl: 24px;
+$radius-4xl: 32px;
+$radius-full: 9999px;
+
+// Classes utilitárias
+.radius-2xs { border-radius: $radius-2xs; }
+.radius-xs { border-radius: $radius-xs; }
+.radius-sm { border-radius: $radius-sm; }
+.radius-md { border-radius: $radius-md; }
+.radius-lg { border-radius: $radius-lg; }
+.radius-xl { border-radius: $radius-xl; }
+.radius-2xl { border-radius: $radius-2xl; }
+.radius-3xl { border-radius: $radius-3xl; }
+.radius-4xl { border-radius: $radius-4xl; }
+.radius-full { border-radius: $radius-full; }

package/dist/scss/_reset.scss

@@ -0,0 +1,60 @@
+// Açaí UI — CSS Reset
+
+html,
+body,
+applet,
+object,
+iframe,
+h1, h2, h3, h4, h5, h6,
+p,
+blockquote,
+pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, legend,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+body {
+  font-family: Roboto, sans-serif;
+  line-height: 1;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}