kitunga-web 0.1.87 → 0.1.89

package/README.md

@@ -0,0 +1,116 @@
+# 🎨 Kitunga Web
+
+> Biblioteca de componentes UI da Sinangu — usada pelos projectos Masolo.
+
+## 📋 Visão Geral
+
+O **Kitunga Web** é a biblioteca de componentes partilhados usada nos frontends da Sinangu. Inclui inputs, botões, cartões, estados vazios e outros elementos reutilizáveis construídos com **React**, **TypeScript**, **Next.js** e **CSS Modules**.
+
+## 🛠️ Stack Tecnológica
+
+- **React** >= 18
+- **Next.js** 16 com App Router
+- **TypeScript**
+- **CSS Modules**
+
+## 🚀 Início Rápido
+
+### Pré-requisitos
+- Node.js >= 18.0.0
+- pnpm >= 8.0.0
+
+### Instalação
+```bash
+pnpm install
+```
+
+### Scripts disponíveis
+
+```bash
+# Modo desenvolvimento (documentação + playground de componentes)
+pnpm dev
+
+# Build de produção do site de documentação
+pnpm build
+
+# Build da biblioteca para publicação
+pnpm build:lib
+
+# Publicar a biblioteca no npm
+pnpm publish:lib
+
+# Lint
+pnpm lint
+```
+
+## ⚙️ Gestão com PM2
+
+O `kitunga-web` corre em modo de desenvolvimento na porta `3005` (definida em `.env.local`) e é gerido pelo PM2 através do `ecosystem.config.cjs`.
+
+### Comandos úteis
+
+```bash
+# Iniciar o processo (modo dev com hot reload)
+pm2 start ecosystem.config.cjs
+
+# Parar o processo
+pm2 stop kitunga-web
+
+# Remover o processo do PM2
+pm2 delete kitunga-web
+
+# Reiniciar com a configuração actual
+pm2 reload ecosystem.config.cjs
+
+# Ver logs em tempo real
+pm2 logs kitunga-web
+
+# Listar processos
+pm2 list
+
+# Guardar a lista de processos para reiniciar após reboot
+pm2 save
+
+# Limpar logs antigos
+pm2 flush
+```
+
+### Modo desenvolvimento (hot reload)
+
+Por omissão, o PM2 corre `pnpm dev`.
+
+```bash
+pm2 start ecosystem.config.cjs
+```
+
+### Modo produção
+
+1. Gera o build do site:
+   ```bash
+   pnpm build
+   ```
+
+2. No `ecosystem.config.cjs`, muda `args` de `'dev'` para `'start'`:
+   ```js
+   args: 'start'
+   ```
+
+3. Actualiza o PM2:
+   ```bash
+   pm2 reload ecosystem.config.cjs
+   ```
+
+## 📦 Publicação da biblioteca
+
+Antes de consumir as alterações noutros projectos (como o `masolo-messenger-web`), é necessário gerar e publicar a biblioteca:
+
+```bash
+pnpm build:lib
+pnpm publish:lib
+```
+
+Depois actualiza a versão no `package.json` do projecto consumidor e corre `pnpm install`.
+
+## 📄 Licença
+
+Sinangu — Todos os direitos reservados.

package/dist/features/buttons/components/Btns/Button.module.css

@@ -49,13 +49,13 @@
 
 /* Variants */
 .primary {
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  background: var(--color-primary);
   color: white;
   padding: var(--spacing-sm-md) var(--spacing-md);
 }
 
 .primary:hover:not(:disabled) {
-  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  background: var(--color-primary-dark);
 }
 
 .secondary {
@@ -104,7 +104,7 @@
   position: absolute;
   inset: 0;
   padding: 2px;
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  background: var(--color-primary);
   border-radius: inherit;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -114,12 +114,12 @@
 }
 
 .outline:hover:not(:disabled) {
-  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  background: var(--color-primary-dark);
   color: white;
 }
 
 .outline:hover:not(:disabled)::before {
-  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  background: var(--color-primary-dark);
 }
 
 .round {

package/dist/features/data-display/components/Cards/MetricCard.module.css

@@ -66,7 +66,7 @@
 
 /* Color variants */
 .blue .iconContainer {
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  background: var(--color-primary);
 }
 
 .green .iconContainer {

package/dist/features/data-display/components/Table/LineItemsTable.module.css

@@ -162,7 +162,7 @@
   width: fit-content;
   border: none;
   background: transparent;
-  color: var(--color-blue-600);
+  color: var(--color-primary);
   cursor: pointer;
   display: inline-flex;
   align-items: center;

package/dist/features/data-display/components/Table/Table.module.css

@@ -212,7 +212,7 @@
 }
 .badgeMode {
   background-color: #dbeafe;
-  color: #1d4ed8;
+  color: var(--color-primary);
 }
 
 /* Ações */

package/dist/features/feedback/components/FlowNotice/FlowNotice.module.css

@@ -117,6 +117,6 @@
 
 .info .icon,
 .info .progressBar {
-  color: #1d4ed8;
-  background: #3b82f6;
+  color: var(--color-primary);
+  background: var(--color-info);
 }

package/dist/features/feedback/components/Tooltips/ProgressChecklistTooltip.module.css

@@ -104,7 +104,7 @@
 
 .progressFill {
   height: 100%;
-  background: linear-gradient(90deg, var(--bg-interactive) 0%, var(--bg-interactive-hover) 100%);
+  background: var(--color-primary);
   border-radius: 3px;
   transition: width 0.3s ease;
 }
@@ -141,7 +141,7 @@
 }
 
 .completedIcon {
-  color: var(--bg-interactive, #3b82f6) !important;
+  color: var(--color-primary) !important;
 }
 
 .itemText {
@@ -149,13 +149,13 @@
 }
 
 .completedText {
-  color: var(--bg-interactive, #3b82f6) !important;
+  color: var(--color-primary) !important;
   font-size: 0.85rem !important;
   flex: 1;
 }
 
 .completedTailIcon {
-  color: var(--bg-interactive, #3b82f6) !important;
+  color: var(--color-primary) !important;
   margin-left: var(--spacing-xs);
 }
 

package/dist/features/inputs/components/Inputs/NumberInput.module.css

@@ -95,11 +95,11 @@
 }
 
 .sm {
-  height: 32px;
+  height: 35px;
 }
 
 .sm .textInput {
-  height: 32px;
+  height: 35px;
   font-size: 0.75rem;
 }
 

package/dist/features/inputs/components/Inputs/PhoneInput/PhoneInput.module.css

@@ -205,7 +205,7 @@
 }
 
 .sm {
-    height: 32px;
+    height: 35px;
 }
 
 .sm .textInput {

package/dist/features/inputs/components/Inputs/SearchInput.module.css

@@ -3,7 +3,6 @@
   display: flex;
   align-items: center;
   width: 100%;
-  max-width: 450px;
 }
 
 .inputWrapperMain {
@@ -16,6 +15,11 @@
 .searchIcon {
   position: absolute;
   left: var(--spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--text-tertiary);
   pointer-events: none;
   z-index: 1;
@@ -23,14 +27,17 @@
 
 .searchInput {
   width: 100%;
-  padding: var(--spacing-sm-large) 2.5rem var(--spacing-sm-large) 2.5rem;
+  padding: 0 2.5rem 0 2.8rem;
   border: 1px solid var(--border-divider);
   border-radius: var(--radius-sm);
   font-size: 0.9rem;
   background-color: var(--bg-secondary);
   color: var(--text-primary);
   transition: all var(--transition-fast);
-  margin-top: 1.5px;
+}
+
+.searchInput::placeholder {
+  color: var(--text-tertiary);
 }
 
 .searchInput:focus {
@@ -40,9 +47,17 @@
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
+.searchInput:disabled {
+  background-color: var(--bg-secondary);
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+
 .clearButton {
   position: absolute;
   right: var(--spacing-sm);
+  top: 50%;
+  transform: translateY(-50%);
   width: 24px;
   height: 24px;
   display: flex;
@@ -62,20 +77,17 @@
   color: var(--text-primary);
 }
 
-/* Sizes */
+/* Sizes — régua do design system (Button): sm 35 / md 40 / lg 45.
+   A altura vem de height (padding só horizontal no .searchInput). */
 .sm {
-  height: 32px;
-  max-width: 300px;
+  height: 35px;
 }
 
+/* sm: como no TextInput — só muda height + font-size. O ícone fica a
+   spacing-md da borda e o padding-left 2.8rem em TODOS os sizes. */
 .sm .searchInput {
-  height: 32px;
+  height: 35px;
   font-size: 0.75rem;
-  padding: var(--spacing-sm) 2rem var(--spacing-sm) 2rem;
-}
-
-.sm .searchIcon {
-  left: var(--spacing-sm);
 }
 
 .sm .clearButton {
@@ -84,19 +96,21 @@
   right: var(--spacing-xs);
 }
 
+.md {
+  height: 40px;
+}
+
+.md .searchInput {
+  height: 40px;
+}
+
 .lg {
-  height: 48px;
-  max-width: 600px;
+  height: 45px;
 }
 
 .lg .searchInput {
-  height: 48px;
+  height: 45px;
   font-size: 1rem;
-  padding: var(--spacing-md) 3rem var(--spacing-md) 3rem;
-}
-
-.lg .searchIcon {
-  left: var(--spacing-md);
 }
 
 .lg .clearButton {
@@ -104,4 +118,3 @@
   height: 28px;
   right: var(--spacing-md);
 }
-

package/dist/features/inputs/components/Inputs/StepperInput.module.css

@@ -21,26 +21,21 @@
 .button:first-of-type {
   background: transparent;
   border-color: var(--border-divider);
-  color: var(--color-blue-600);
+  color: var(--color-primary);
 }
 
 .button:last-of-type {
   background: transparent;
   border-color: var(--border-divider);
-  color: var(--color-blue-600);
+  color: var(--color-primary);
 }
 
 .button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  background: var(--color-primary);
   color: #fff;
   border-color: transparent;
 }
 
-.button:last-of-type:hover:not(:disabled) {
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
-  color: #fff;
-}
-
 .button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -66,12 +61,12 @@
 }
 
 .sm .button {
-  width: 32px;
-  height: 32px;
+  width: 35px;
+  height: 35px;
 }
 
 .sm .input {
-  width: 32px;
+  width: 35px;
   font-size: 0.95rem;
 }
 
@@ -86,11 +81,11 @@
 }
 
 .lg .button {
-  width: 44px;
-  height: 44px;
+  width: 45px;
+  height: 45px;
 }
 
 .lg .input {
-  width: 44px;
+  width: 45px;
   font-size: 1.05rem;
 }

package/dist/features/inputs/components/Inputs/TaxIdInput/TaxIdInput.module.css

@@ -215,7 +215,7 @@
 }
 
 .sm {
-  min-height: 32px;
+  min-height: 35px;
 }
 
 .sm .maskOverlay,
@@ -234,7 +234,7 @@
 }
 
 .lg {
-  min-height: 48px;
+  min-height: 45px;
 }
 
 .lg .maskOverlay,

package/dist/features/inputs/components/Inputs/TextareaInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/TextareaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,aAAa,oHA4ElB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/TextareaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,aAAa,oHAsFlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/features/inputs/components/Inputs/TextareaInput.js

@@ -14,14 +14,13 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { X } from 'lucide-react';
 import styles from './TextareaInput.module.css';
 const TextareaInput = forwardRef((_a, ref) => {
-    var { size = 'md', containerClassName = '', className = '', leftIcon, value = '', onChange, showClearButton = true, clearButtonLabel = 'Limpar campo', disabled = false, readOnly = false, hasError, errorMessage } = _a, rest = __rest(_a, ["size", "containerClassName", "className", "leftIcon", "value", "onChange", "showClearButton", "clearButtonLabel", "disabled", "readOnly", "hasError", "errorMessage"]);
+    var { size = 'md', containerClassName = '', className = '', leftIcon, value = '', onChange, showClearButton = true, clearButtonLabel = 'Limpar campo', disabled = false, readOnly = false, maxLength, hasError, errorMessage } = _a, rest = __rest(_a, ["size", "containerClassName", "className", "leftIcon", "value", "onChange", "showClearButton", "clearButtonLabel", "disabled", "readOnly", "maxLength", "hasError", "errorMessage"]);
     const textareaRef = useRef(null);
     useImperativeHandle(ref, () => textareaRef.current);
     const isError = hasError || !!errorMessage;
     const containerClasses = [
         styles.inputContainer,
         styles[size],
-        leftIcon ? styles.hasLeftIcon : '',
         containerClassName,
     ]
         .filter(Boolean)
@@ -38,7 +37,7 @@ const TextareaInput = forwardRef((_a, ref) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
     };
     const shouldShowClearButton = showClearButton && !!(value === null || value === void 0 ? void 0 : value.length) && !disabled && !readOnly;
-    return (_jsxs("div", { className: containerClasses.concat(isError ? ` ${styles.hasError}` : ''), children: [leftIcon && _jsx("span", { className: styles.inputIcon, children: leftIcon }), _jsx("textarea", Object.assign({ ref: textareaRef, className: `${textareaClasses} ${isError ? styles.inputError : ''}`, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, autoComplete: "off" }, rest)), shouldShowClearButton && (_jsx("button", { type: "button", className: styles.clearButton, onClick: handleClear, "aria-label": clearButtonLabel, tabIndex: -1, children: _jsx(X, { size: 16 }) })), errorMessage && _jsx("span", { className: styles.errorText, children: errorMessage })] }));
+    return (_jsxs("div", { className: containerClasses.concat(isError ? ` ${styles.hasError}` : ''), children: [_jsxs("div", { className: styles.field, children: [leftIcon && _jsx("span", { className: styles.inputIcon, children: leftIcon }), _jsx("textarea", Object.assign({ ref: textareaRef, className: `${textareaClasses} ${isError ? styles.inputError : ''}`, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, autoComplete: "off" }, rest)), maxLength !== undefined && (_jsxs("span", { className: styles.charCounter, children: [(value !== null && value !== void 0 ? value : '').length, "/", maxLength] })), shouldShowClearButton && (_jsx("button", { type: "button", className: styles.clearButton, onClick: handleClear, "aria-label": clearButtonLabel, tabIndex: -1, children: _jsx(X, { size: 16 }) }))] }), errorMessage && _jsx("span", { className: styles.errorText, children: errorMessage })] }));
 });
 TextareaInput.displayName = 'TextareaInput';
 export default TextareaInput;

package/dist/features/inputs/components/Inputs/TextareaInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.js","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/TextareaInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextareaInput.js","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/TextareaInput.tsx"],"names":[],"mappings":"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"}

package/dist/features/inputs/components/Inputs/TextareaInput.module.css

@@ -1,22 +1,54 @@
 .inputContainer {
-  position: relative;
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   width: 100%;
 }
 
-.textArea {
+/* A caixa visual: o ícone é um filho flex NORMAL — o spacing-md do padding
+   afasta-o das bordas e o gap spacing-md afasta-o do texto. Nada de absolute
+   "grudado" por cima do campo. */
+.field {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-md);
   width: 100%;
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: var(--spacing-md);
   border: 1px solid var(--border-divider);
   border-radius: var(--radius-sm);
-  font-size: 0.9rem;
   background-color: var(--bg-secondary);
-  color: var(--text-primary);
   transition: all var(--transition-fast);
+}
+
+.field:focus-within {
+  border-color: var(--border-focus);
+  background-color: var(--bg-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.inputIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  /* Alinha o ícone com a primeira linha de texto (line-height 1.35 do
+     textArea × font-size do size). */
+  height: calc(0.9rem * 1.35);
+}
+
+.textArea {
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: 0.9rem;
+  font-family: inherit;
+  color: var(--text-primary);
   resize: vertical;
-  min-height: 96px;
   line-height: 1.35;
+  min-height: 0;
 }
 
 .textArea::placeholder {
@@ -25,34 +57,16 @@
 
 .textArea:focus {
   outline: none;
-  border-color: var(--border-focus);
-  background-color: var(--bg-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.textArea:-webkit-autofill,
-.textArea:-webkit-autofill:hover,
-.textArea:-webkit-autofill:focus,
-.textArea:-webkit-autofill:active {
-  -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset;
-  box-shadow: 0 0 0 1000px var(--bg-secondary) inset;
-  background-color: var(--bg-secondary) !important;
-  -webkit-text-fill-color: var(--text-primary);
-  color: var(--text-primary);
-  caret-color: var(--text-primary);
 }
 
 .textArea:disabled,
 .textArea[readonly] {
-  background-color: var(--bg-secondary);
   color: var(--text-tertiary);
   cursor: not-allowed;
 }
 
 .clearButton {
-  position: absolute;
-  right: var(--spacing-sm);
-  top: var(--spacing-sm);
+  flex-shrink: 0;
   width: 24px;
   height: 24px;
   display: flex;
@@ -64,7 +78,6 @@
   color: var(--text-tertiary);
   cursor: pointer;
   transition: all var(--transition-fast);
-  z-index: 1;
 }
 
 .clearButton:hover {
@@ -72,69 +85,60 @@
   color: var(--text-primary);
 }
 
-.inputIcon {
+/* Contador de caracteres — vive na faixa de padding inferior da .field
+   (o textarea acaba 16px acima do fundo da caixa), por isso nunca pisa
+   o texto e fica ao lado do grip nativo de resize. */
+.charCounter {
   position: absolute;
-  left: var(--spacing-md);
-  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  bottom: 3px;
+  font-size: 0.7rem;
   color: var(--text-tertiary);
   pointer-events: none;
-  z-index: 1;
 }
 
-.hasLeftIcon .textArea {
-  padding-left: 2.5rem;
-}
-
-.sm {
+/* Sizes — a min-height mora na caixa (.field), o textarea estica dentro.
+   Só mudam font-size, min-height e a linha que alinha o ícone. */
+.sm .field {
   min-height: 80px;
 }
 
 .sm .textArea {
   font-size: 0.75rem;
-  padding: var(--spacing-sm) var(--spacing-lg);
-  min-height: 80px;
+}
+
+.sm .inputIcon {
+  height: calc(0.75rem * 1.35);
 }
 
 .sm .clearButton {
   width: 20px;
   height: 20px;
-  right: var(--spacing-xs);
-  top: var(--spacing-xs);
-}
-
-.md {
-  min-height: 96px;
 }
 
-.md .textArea {
+.md .field {
   min-height: 96px;
 }
 
-.lg {
+.lg .field {
   min-height: 120px;
 }
 
 .lg .textArea {
   font-size: 1rem;
-  padding: var(--spacing-md) var(--spacing-xl);
-  min-height: 120px;
 }
 
-/* lg + leftIcon: preservar padding-left do hasLeftIcon */
-.lg.hasLeftIcon .textArea {
-  padding-left: 2.5rem;
+.lg .inputIcon {
+  height: calc(1rem * 1.35);
 }
 
 .lg .clearButton {
   width: 28px;
   height: 28px;
-  right: var(--spacing-md);
-  top: var(--spacing-sm);
 }
 
-
-.inputContainer.hasError {
-  flex-direction: column;
+.inputContainer.hasError .field {
+  border-color: #ef4444;
 }
 
 .errorText {
@@ -143,7 +147,3 @@
   margin-top: 4px;
   display: block;
 }
-
-.inputError {
-  border-color: #ef4444 !important;
-}

package/dist/features/navigation/components/Menu/SharedMenuItem.module.css

@@ -71,22 +71,30 @@
     background-color: var(--bg-hover-normal);
 }
 
-/* Active styles */
+/* Active styles — azul #007AFF; hover escurece só um pouco (#0062D6). */
 .menuItem.activeItem > .menuLink {
-    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+    background: var(--bg-interactive);
     color: #ffffff;
 }
 
+.menuItem.activeItem > .menuLink:hover {
+    background: var(--bg-interactive-hover);
+}
+
 .expandedItem.activeItem > .menuLink .menuText,
 .expandedItem.activeItem > .menuLink .iconWrapper {
     color: #ffffff;
 }
 
 .collapsedItem.activeItem > .menuLink {
-    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+    background: var(--bg-interactive);
     color: #ffffff;
 }
 
+.collapsedItem.activeItem > .menuLink:hover {
+    background: var(--bg-interactive-hover);
+}
+
 .collapsedItem.activeItem > .menuLink .menuText {
     color: #ffffff;
 }

package/dist/features/overlays/components/DeleteModal/ComprehensiveDeleteModal.module.css

@@ -125,7 +125,7 @@
 
 .badgeInfo {
   background: rgba(59, 130, 246, 0.12);
-  color: #1d4ed8;
+  color: var(--color-primary);
   border-color: rgba(59, 130, 246, 0.4);
 }
 
@@ -235,13 +235,13 @@
   cursor: pointer;
   font-size: 0.75rem;
   font-weight: 600;
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  background: var(--color-primary);
   color: #fff;
   transition: var(--transition-fast);
 }
 
 .actionButton:hover {
-  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  background: var(--color-primary-dark);
 }
 
 .footer {

package/dist/features/overlays/components/PrerequisiteGuardModal/PrerequisiteGuardModal.module.css

@@ -177,7 +177,7 @@
 
 .iconInfo {
   background: rgba(59, 130, 246, 0.14);
-  color: #1d4ed8;
+  color: var(--color-primary);
 }
 
 .iconWarning {
@@ -246,7 +246,7 @@
 
 .badgeInfo {
   background: rgba(59, 130, 246, 0.12);
-  color: #1d4ed8;
+  color: var(--color-primary);
   border-color: rgba(59, 130, 246, 0.4);
 }
 
@@ -285,13 +285,13 @@
   cursor: pointer;
   font-size: 0.75rem;
   font-weight: 600;
-  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  background: var(--color-primary);
   color: #fff;
   transition: var(--transition-fast);
 }
 
 .actionButton:hover {
-  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  background: var(--color-primary-dark);
 }
 
 .footer {

package/dist/features/selects/components/Selects/CustomSelect.module.css

@@ -71,7 +71,7 @@
 }
 
 .customSelect.sm .selectedValue {
-  height: 32px;
+  height: 35px;
 }
 
 .customSelect.sm .valueText {
@@ -209,7 +209,7 @@
 }
 
 .customSelect.sm .option {
-  height: 32px;
+  height: 35px;
 }
 
 .customSelect.sm .option span {

package/dist/shared/styles/tokens.css

@@ -1,8 +1,8 @@
 :root {
   /* Cores Principais */
-  --color-primary: #1E40AF;
+  --color-primary: #007AFF;
   --color-primary-light: #3B82F6;
-  --color-primary-dark: #1E3A8A;
+  --color-primary-dark: #0062D6;
   --color-secondary: #0891B2;
   --color-secondary-light: #06B6D4;
   --color-accent: #F59E0B;
@@ -36,7 +36,7 @@
   --bg-accent: var(--color-primary-light);
   --bg-hover-primary: #f1f1f196;
   --bg-hover-normal: #f1f3f4;
-  --bg-interactive: var(--color-primary-light);
+  --bg-interactive: var(--color-primary);
   --bg-interactive-hover: var(--color-primary-dark);
   --bg-interactive-active: var(--color-primary);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitunga-web",
-  "version": "0.1.87",
+  "version": "0.1.89",
   "private": false,
   "type": "module",
   "repository": {