Frontend

DESIGN SYSTEM AGRSIS - CORES E IDENTIDADE VISUAL

⚠️ INSTALAÇÃO NECESSÁRIA - LEIA PRIMEIRO

STATUS ATUAL:

✅ Frontend Produtor: Tailwind instalado, nuxt.config.ts e app.vue atualizados
⏳ Frontend Produtor: CRIAR tailwind.config.js e assets/css/main.css
⏳ Frontend Fornecedor: INSTALAR Tailwind e criar todos os arquivos

📋 PASSOS RÁPIDOS DE INSTALAÇÃO

1. Instalar Tailwind no Frontend Fornecedor

cd /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/frontend-fornecedor
npm install -D @nuxtjs/tailwindcss tailwindcss postcss autoprefixer

2. Criar diretórios necessários

# Frontend Produtor
mkdir -p /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/frontend-produtor/assets/css

# Frontend Fornecedor
mkdir -p /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/frontend-fornecedor/assets/css
mkdir -p /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/frontend-fornecedor/app

# Shared
mkdir -p /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/shared/theme

3. Criar arquivos de configuração

Todos os códigos completos estão documentados nas seções abaixo.

Arquivos a criar:

frontend-produtor/tailwind.config.js → Ver seção "Tailwind Config Produtor"
frontend-produtor/assets/css/main.css → Ver seção "Main CSS Produtor"
frontend-fornecedor/tailwind.config.js → Ver seção "Tailwind Config Fornecedor"
frontend-fornecedor/assets/css/main.css → Ver seção "Main CSS Fornecedor"
frontend-fornecedor/nuxt.config.ts → Ver seção "Nuxt Config Fornecedor"
frontend-fornecedor/app/app.vue → Ver seção "App Vue Fornecedor"
shared/theme/agrsis.ts → Ver seção "Shared Theme"

4. Testar

# Produtor
cd frontend-produtor && npm run dev

# Fornecedor
cd frontend-fornecedor && npm run dev

🎨 PALETA DE CORES OFICIAL

Cores Principais (da Logo e Marca)

Baseado na logo oficial da AgrSis e na paleta de cores fornecida:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        agrsis: {
          // 🟢 VERDE PRIMÁRIO (da folha da logo)
          primary: {
            50: '#f5f7db',   // Muito claro
            100: '#e9efb8',  // #e9efb8
            200: '#dde795',  // #dde795
            300: '#cfe070',  // #cfe070
            400: '#c0d848',  // #c0d848
            500: '#afd000',  // PRINCIPAL - Verde limão vibrante (logo)
            600: '#90aa10',  // #90aa10
            700: '#728516',  // #728516
            800: '#556216',  // #556216
            900: '#3a4214',  // #3a4214
            950: '#21230e',  // Muito escuro
          },

          // 🔵 AZUL/TEAL PRIMÁRIO (do texto da logo)
          secondary: {
            50: '#d6dce1',   // Muito claro
            100: '#aebbc5',  // #aebbc5
            200: '#879aa8',  // #879aa8
            300: '#607a8d',  // #607a8d
            400: '#3a5c73',  // #3a5c73
            500: '#084059',  // PRINCIPAL - Azul petróleo escuro (logo)
            600: '#0e364a',  // #0e364a
            700: '#102c3c',  // #102c3c
            800: '#10232e',  // #10232e
            900: '#0f1a21',  // #0f1a21
            950: '#081014',  // Muito escuro
          },

          // 🌿 VERDE SKY (paleta complementar - para variações)
          sky: {
            50: '#d6dce1',
            100: '#aebbc5',
            200: '#879aa8',
            300: '#607a8d',
            400: '#3a5c73',
            500: '#084059',  // Base (mesmo que secondary)
            600: '#0e364a',
            700: '#102c3c',
            800: '#10232e',
            900: '#0f1a21',
            950: '#081014',
          },

          // 🎯 CORES DE STATUS
          success: '#28a745',  // Verde sucesso
          warning: '#ffc107',  // Amarelo alerta
          error: '#dc3545',    // Vermelho erro
          info: '#17a2b8',     // Azul info

          // 🔘 NEUTROS (cinzas)
          neutral: {
            50: '#f8f9fa',
            100: '#e9ecef',
            200: '#dee2e6',
            300: '#ced4da',
            400: '#adb5bd',
            500: '#6c757d',
            600: '#495057',
            700: '#343a40',
            800: '#212529',
            900: '#0d1117',
          },
        },
      },
    },
  },
}

📐 APLICAÇÃO DAS CORES

Produtor Rural (Verde)

Sidebar: bg-agrsis-primary-500 (#afd000)
Hover items: bg-agrsis-primary-600
Active items: bg-agrsis-primary-700
Botões primários: bg-agrsis-primary-500 hover:bg-agrsis-primary-600
Links e destaques: text-agrsis-primary-600

Fornecedor (Azul/Teal)

Sidebar: bg-agrsis-secondary-500 (#084059)
Hover items: bg-agrsis-secondary-600
Active items: bg-agrsis-secondary-700
Botões primários: bg-agrsis-secondary-500 hover:bg-agrsis-secondary-600
Links e destaques: text-agrsis-secondary-600

Elementos Comuns

Fundos claros: bg-agrsis-neutral-50
Bordas: border-agrsis-neutral-200
Textos: text-agrsis-neutral-700 (padrão), text-agrsis-neutral-900 (títulos)
Textos secundários: text-agrsis-neutral-500
Disabled: bg-agrsis-neutral-100 text-agrsis-neutral-400

🎭 VARIAÇÕES DE TEMA

Light Mode (Padrão)

:root {
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-border: #dee2e6;
}

Dark Mode

.dark {
  --color-background: #0d1117;
  --color-surface: #212529;
  --color-text-primary: #f8f9fa;
  --color-text-secondary: #adb5bd;
  --color-border: #343a40;
}

/* Ajustes para verde primário em dark mode */
.dark .agrsis-primary-bg {
  background-color: #90aa10; /* Tom mais escuro do verde */
}

/* Ajustes para azul secundário em dark mode */
.dark .agrsis-secondary-bg {
  background-color: #102c3c; /* Tom mais claro do azul para contraste */
}

🖼️ ASSETS DA MARCA

Logo

Localização:

PNG: /agrsis-v1/docs/frontend/assets/logo-agrsis.png
JPG: /agrsis-v1/docs/frontend/assets/logo-agrsis.jpg

Variações necessárias:

Logo completa (colorida) - para header
Logo branca - para sidebar escura
Logo verde - para sidebar clara
Favicon (16x16, 32x32, 64x64)

Exportar:

# Copiar logos do sistema legado
cp /Users/gustavocarneiro/EMPRESA/web/agrsis/agrosis_livewire-main/public/img/logo-agrsis.png \
   /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/docs/frontend/assets/

cp /Users/gustavocarneiro/EMPRESA/web/agrsis/agrosis_livewire-main/public/img/logo-agrsis.jpg \
   /Users/gustavocarneiro/EMPRESA/web/agrsis/agrsis-v1/docs/frontend/assets/

🎨 ÍCONES SVG DA MARCA

Ícone Produtor (Verde #afd000)

Tamanho 32x32:

<svg
  width="32"
  height="32"
  viewBox="0 0 32 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  class="inline-block"
>
  <circle
    cx="16"
    cy="16"
    r="15"
    fill="#afd000"
  />
  <path
    d="M16 8C16 8 12 10 12 14C12 18 14 20 16 22C18 20 20 18 20 14C20 10 16 8 16 8Z"
    fill="white"
    stroke="white"
    stroke-width="1"
    stroke-linejoin="round"
  />
  <path
    d="M16 14V24"
    stroke="white"
    stroke-width="2"
    stroke-linecap="round"
  />
  <path
    d="M16 12L14 15M16 12L18 15"
    stroke="#90aa10"
    stroke-width="1.5"
    stroke-linecap="round"
  />
</svg>

Tamanho 40x40 (para títulos):

<svg
  width="40"
  height="40"
  viewBox="0 0 32 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- Mesmo conteúdo interno -->
</svg>

Ícone Fornecedor (Azul #084059)

Tamanho 32x32:

<svg
  width="32"
  height="32"
  viewBox="0 0 32 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  class="inline-block"
>
  <circle
    cx="16"
    cy="16"
    r="15"
    fill="#084059"
  />
  <path
    d="M16 8C16 8 12 10 12 14C12 18 14 20 16 22C18 20 20 18 20 14C20 10 16 8 16 8Z"
    fill="white"
    stroke="white"
    stroke-width="1"
    stroke-linejoin="round"
  />
  <path
    d="M16 14V24"
    stroke="white"
    stroke-width="2"
    stroke-linecap="round"
  />
  <path
    d="M16 12L14 15M16 12L18 15"
    stroke="#0e364a"
    stroke-width="1.5"
    stroke-linecap="round"
  />
</svg>

Tamanho 40x40 (para títulos):

<svg
  width="40"
  height="40"
  viewBox="0 0 32 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- Mesmo conteúdo interno -->
</svg>

Ícone Neutro (para documentação)

Tamanho 32x32:

<svg
  width="32"
  height="32"
  viewBox="0 0 32 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  class="inline-block"
>
  <circle
    cx="16"
    cy="16"
    r="15"
    fill="#6c757d"
  />
  <path
    d="M16 8C16 8 12 10 12 14C12 18 14 20 16 22C18 20 20 18 20 14C20 10 16 8 16 8Z"
    fill="white"
    stroke="white"
    stroke-width="1"
    stroke-linejoin="round"
  />
  <path
    d="M16 14V24"
    stroke="white"
    stroke-width="2"
    stroke-linecap="round"
  />
  <path
    d="M16 12L14 15M16 12L18 15"
    stroke="#495057"
    stroke-width="1.5"
    stroke-linecap="round"
  />
</svg>

Conceito do Ícone

Elementos:

Círculo: Representa completude, união e a plataforma integrada
Folha: Simboliza agricultura, crescimento e sustentabilidade
Haste vertical: Representa tecnologia, estrutura e conexão
Nervuras: Detalhes que dão profundidade e remetem ao mundo agrícola

Cores:

Produtor: Verde #afd000 (da logo original)
Fornecedor: Azul #084059 (da logo original)
Neutro: Cinza #6c757d (para contextos gerais)

Vantagens sobre emojis:

Cores exatas da marca (não aproximadas)
Renderização consistente em todos os navegadores
Escalável sem perda de qualidade (SVG)
Identidade visual própria
Acessibilidade melhorada (pode adicionar aria-label)

Uso nos Componentes

Componente Vue reutilizável:

<!-- components/icons/IconAgrsis.vue -->
<script setup lang="ts">
interface Props {
  variant?: 'produtor' | 'fornecedor' | 'neutro'
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'produtor',
  size: 32
})

const colors = {
  produtor: {
    circle: '#afd000',
    detail: '#90aa10'
  },
  fornecedor: {
    circle: '#084059',
    detail: '#0e364a'
  },
  neutro: {
    circle: '#6c757d',
    detail: '#495057'
  }
}
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="inline-block flex-shrink-0"
    role="img"
    aria-label="Logo AgrSis"
  >
    <circle
      cx="16"
      cy="16"
      r="15"
      :fill="colors[variant].circle"
    />
    <path
      d="M16 8C16 8 12 10 12 14C12 18 14 20 16 22C18 20 20 18 20 14C20 10 16 8 16 8Z"
      fill="white"
      stroke="white"
      stroke-width="1"
      stroke-linejoin="round"
    />
    <path
      d="M16 14V24"
      stroke="white"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      d="M16 12L14 15M16 12L18 15"
      :stroke="colors[variant].detail"
      stroke-width="1.5"
      stroke-linecap="round"
    />
  </svg>
</template>

Uso:

<!-- Produtor -->
<IconAgrsis variant="produtor" :size="40" />

<!-- Fornecedor -->
<IconAgrsis variant="fornecedor" :size="40" />

<!-- Neutro -->
<IconAgrsis variant="neutro" :size="32" />

📏 TIPOGRAFIA

Font Family

fontFamily: {
  sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
  mono: ['Fira Code', 'Monaco', 'Courier New', 'monospace'],
}

Importar no HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Escala de Tamanhos

fontSize: {
  'xs': ['0.75rem', { lineHeight: '1rem' }],      // 12px
  'sm': ['0.875rem', { lineHeight: '1.25rem' }],  // 14px
  'base': ['1rem', { lineHeight: '1.5rem' }],     // 16px
  'lg': ['1.125rem', { lineHeight: '1.75rem' }],  // 18px
  'xl': ['1.25rem', { lineHeight: '1.75rem' }],   // 20px
  '2xl': ['1.5rem', { lineHeight: '2rem' }],      // 24px
  '3xl': ['1.875rem', { lineHeight: '2.25rem' }], // 30px
  '4xl': ['2.25rem', { lineHeight: '2.5rem' }],   // 36px
  '5xl': ['3rem', { lineHeight: '1' }],           // 48px
}

Pesos

fontWeight: {
  light: '300',
  normal: '400',
  medium: '500',
  semibold: '600',
  bold: '700',
  extrabold: '800',
}

🎨 SOMBRAS E EFEITOS

Box Shadows

boxShadow: {
  'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
  'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
  'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
  'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
}

Border Radius

borderRadius: {
  'none': '0',
  'sm': '0.25rem',    // 4px
  'DEFAULT': '0.5rem', // 8px
  'md': '0.75rem',    // 12px
  'lg': '1rem',       // 16px
  'xl': '1.5rem',     // 24px
  '2xl': '2rem',      // 32px
  'full': '9999px',
}

Transições

transitionDuration: {
  '75': '75ms',
  '100': '100ms',
  '150': '150ms',
  '200': '200ms',
  '300': '300ms',
  '500': '500ms',
  '700': '700ms',
  '1000': '1000ms',
}

transitionTimingFunction: {
  'DEFAULT': 'cubic-bezier(0.4, 0, 0.2, 1)',
  'linear': 'linear',
  'in': 'cubic-bezier(0.4, 0, 1, 1)',
  'out': 'cubic-bezier(0, 0, 0.2, 1)',
  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
}

📱 ESPAÇAMENTOS E BREAKPOINTS

Spacing Scale (base 8px)

spacing: {
  '0': '0',
  '1': '0.25rem',  // 4px
  '2': '0.5rem',   // 8px
  '3': '0.75rem',  // 12px
  '4': '1rem',     // 16px
  '5': '1.25rem',  // 20px
  '6': '1.5rem',   // 24px
  '8': '2rem',     // 32px
  '10': '2.5rem',  // 40px
  '12': '3rem',    // 48px
  '16': '4rem',    // 64px
  '20': '5rem',    // 80px
  '24': '6rem',    // 96px
}

Breakpoints (Mobile-First)

screens: {
  'xs': '480px',   // Extra small devices
  'sm': '640px',   // Small devices (landscape phones)
  'md': '768px',   // Medium devices (tablets)
  'lg': '1024px',  // Large devices (desktops)
  'xl': '1280px',  // Extra large devices
  '2xl': '1536px', // 2X Extra large devices
}

Uso recomendado:

Prioridade mobile: Desenvolver primeiro para xs e sm
Tablet: Ajustar layout em md
Desktop: Otimizar em lg e xl

🎯 COMPONENTES DE EXEMPLO

Botão Primário (Produtor - Verde)

<button class="
  bg-agrsis-primary-500
  hover:bg-agrsis-primary-600
  active:bg-agrsis-primary-700
  text-white
  font-medium
  px-6 py-3
  rounded-lg
  transition-colors
  duration-200
  focus:outline-none
  focus:ring-2
  focus:ring-agrsis-primary-500
  focus:ring-offset-2
">
  Criar Licitação
</button>

Botão Primário (Fornecedor - Azul)

<button class="
  bg-agrsis-secondary-500
  hover:bg-agrsis-secondary-600
  active:bg-agrsis-secondary-700
  text-white
  font-medium
  px-6 py-3
  rounded-lg
  transition-colors
  duration-200
  focus:outline-none
  focus:ring-2
  focus:ring-agrsis-secondary-500
  focus:ring-offset-2
">
  Enviar Proposta
</button>

Card Padrão

<div class="
  bg-white
  dark:bg-agrsis-neutral-800
  border
  border-agrsis-neutral-200
  dark:border-agrsis-neutral-700
  rounded-lg
  shadow-md
  p-6
  hover:shadow-lg
  transition-shadow
  duration-200
">
  <h3 class="text-xl font-semibold text-agrsis-neutral-900 dark:text-white mb-2">
    Título do Card
  </h3>
  <p class="text-agrsis-neutral-600 dark:text-agrsis-neutral-400">
    Conteúdo do card com texto secundário.
  </p>
</div>

Badge de Status

<!-- Sucesso -->
<span class="
  inline-flex items-center
  px-3 py-1
  rounded-full
  text-sm font-medium
  bg-green-100 text-green-800
  dark:bg-green-900 dark:text-green-200
">
  Ativa
</span>

<!-- Alerta -->
<span class="
  inline-flex items-center
  px-3 py-1
  rounded-full
  text-sm font-medium
  bg-yellow-100 text-yellow-800
  dark:bg-yellow-900 dark:text-yellow-200
">
  Aguardando
</span>

<!-- Erro -->
<span class="
  inline-flex items-center
  px-3 py-1
  rounded-full
  text-sm font-medium
  bg-red-100 text-red-800
  dark:bg-red-900 dark:text-red-200
">
  Encerrada
</span>

✅ CHECKLIST DE IMPLEMENTAÇÃO

Fase 1: Setup Design System

Copiar logos para /docs/frontend/assets/
Criar variações da logo (branca, verde, favicon)
Configurar tailwind.config.js com cores AgrSis
Importar fonte Inter via Google Fonts
Criar arquivo de tema compartilhado shared/theme/agrsis.ts
Testar paleta de cores em componentes básicos

Fase 2: Componentes Base

Implementar componentes usando cores corretas
Criar variantes para Produtor (verde) e Fornecedor (azul)
Adicionar dark mode com ajustes de contraste
Documentar uso de cada componente
Criar Storybook/showcase de componentes

Fase 3: Layouts

Layout Produtor com sidebar verde
Layout Fornecedor com sidebar azul
Layout Auth com cores neutras
Testar responsividade em todos os breakpoints
Validar acessibilidade (contraste de cores WCAG AA)

📝 CÓDIGOS COMPLETOS DOS ARQUIVOS

Tailwind Config Produtor

Arquivo: frontend-produtor/tailwind.config.js

/**
 * AgrSis - Configuração Tailwind CSS
 * Frontend Produtor (Verde Primário)
 */

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './error.vue',
  ],

  darkMode: 'class',

  theme: {
    extend: {
      colors: {
        agrsis: {
          primary: {
            50: '#f5f7db',
            100: '#e9efb8',
            200: '#dde795',
            300: '#cfe070',
            400: '#c0d848',
            500: '#afd000',
            600: '#90aa10',
            700: '#728516',
            800: '#556216',
            900: '#3a4214',
            950: '#21230e',
          },
          secondary: {
            50: '#d6dce1',
            100: '#aebbc5',
            200: '#879aa8',
            300: '#607a8d',
            400: '#3a5c73',
            500: '#084059',
            600: '#0e364a',
            700: '#102c3c',
            800: '#10232e',
            900: '#0f1a21',
            950: '#081014',
          },
          success: '#28a745',
          warning: '#ffc107',
          error: '#dc3545',
          info: '#17a2b8',
          neutral: {
            50: '#f8f9fa',
            100: '#e9ecef',
            200: '#dee2e6',
            300: '#ced4da',
            400: '#adb5bd',
            500: '#6c757d',
            600: '#495057',
            700: '#343a40',
            800: '#212529',
            900: '#0d1117',
          },
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

Main CSS Produtor

Arquivo: frontend-produtor/assets/css/main.css

/**
 * AgrSis - Design System
 * Frontend Produtor (Verde Primário)
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-brand-primary: #afd000;
    --color-brand-hover: #90aa10;
  }

  html {
    font-family: 'Inter', system-ui, sans-serif;
  }

  body {
    @apply bg-agrsis-neutral-50 text-agrsis-neutral-800;
  }
}

@layer components {
  .btn-primary {
    @apply bg-agrsis-primary-500 hover:bg-agrsis-primary-600;
    @apply text-white font-medium px-6 py-3 rounded-lg;
    @apply transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-agrsis-primary-500;
  }

  .btn-secondary {
    @apply bg-agrsis-neutral-100 hover:bg-agrsis-neutral-200;
    @apply text-agrsis-neutral-700 font-medium px-6 py-3 rounded-lg;
    @apply transition-colors duration-200;
  }

  .btn-outline {
    @apply border-2 border-agrsis-primary-500 hover:bg-agrsis-primary-50;
    @apply text-agrsis-primary-600 font-medium px-6 py-3 rounded-lg;
    @apply transition-colors duration-200;
  }

  .card {
    @apply bg-white border border-agrsis-neutral-200;
    @apply rounded-lg shadow-md p-6;
  }

  .card-hover {
    @apply card transition-shadow duration-200 hover:shadow-lg;
  }

  .input {
    @apply w-full px-4 py-2.5 rounded-lg;
    @apply border border-agrsis-neutral-300;
    @apply focus:outline-none focus:ring-2 focus:ring-agrsis-primary-500;
    @apply transition-colors duration-200;
  }

  .label {
    @apply block text-sm font-medium text-agrsis-neutral-700 mb-2;
  }

  .label-required::after {
    content: '*';
    @apply text-red-500 ml-1;
  }

  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }

  .badge-success {
    @apply badge bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-800;
  }

  .badge-info {
    @apply badge bg-blue-100 text-blue-800;
  }

  .loading-spinner {
    @apply inline-block animate-spin rounded-full;
    @apply border-2 border-solid border-agrsis-primary-500 border-r-transparent;
    @apply h-5 w-5;
  }

  .skeleton {
    @apply bg-agrsis-neutral-200 rounded animate-pulse;
  }
}

Tailwind Config Fornecedor

Arquivo: frontend-fornecedor/tailwind.config.js

Mesma configuração do produtor (cores são compartilhadas, apenas a aplicação muda):

cp frontend-produtor/tailwind.config.js frontend-fornecedor/tailwind.config.js

Main CSS Fornecedor

Arquivo: frontend-fornecedor/assets/css/main.css

/**
 * AgrSis - Design System
 * Frontend Fornecedor (Azul Primário)
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-brand-primary: #084059;  /* Azul */
    --color-brand-hover: #0e364a;
  }

  html {
    font-family: 'Inter', system-ui, sans-serif;
  }

  body {
    @apply bg-agrsis-neutral-50 text-agrsis-neutral-800;
  }
}

@layer components {
  .btn-primary {
    @apply bg-agrsis-secondary-500 hover:bg-agrsis-secondary-600;  /* Azul */
    @apply text-white font-medium px-6 py-3 rounded-lg;
    @apply transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-agrsis-secondary-500;
  }

  .btn-secondary {
    @apply bg-agrsis-neutral-100 hover:bg-agrsis-neutral-200;
    @apply text-agrsis-neutral-700 font-medium px-6 py-3 rounded-lg;
    @apply transition-colors duration-200;
  }

  .btn-outline {
    @apply border-2 border-agrsis-secondary-500 hover:bg-agrsis-secondary-50;
    @apply text-agrsis-secondary-600 font-medium px-6 py-3 rounded-lg;
    @apply transition-colors duration-200;
  }

  .card {
    @apply bg-white border border-agrsis-neutral-200;
    @apply rounded-lg shadow-md p-6;
  }

  .card-hover {
    @apply card transition-shadow duration-200 hover:shadow-lg;
  }

  .input {
    @apply w-full px-4 py-2.5 rounded-lg;
    @apply border border-agrsis-neutral-300;
    @apply focus:outline-none focus:ring-2 focus:ring-agrsis-secondary-500;
    @apply transition-colors duration-200;
  }

  .label {
    @apply block text-sm font-medium text-agrsis-neutral-700 mb-2;
  }

  .label-required::after {
    content: '*';
    @apply text-red-500 ml-1;
  }

  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }

  .badge-success {
    @apply badge bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-800;
  }

  .badge-info {
    @apply badge bg-blue-100 text-blue-800;
  }

  .loading-spinner {
    @apply inline-block animate-spin rounded-full;
    @apply border-2 border-solid border-agrsis-secondary-500 border-r-transparent;
    @apply h-5 w-5;
  }

  .skeleton {
    @apply bg-agrsis-neutral-200 rounded animate-pulse;
  }
}

Nuxt Config Fornecedor

Arquivo: frontend-fornecedor/nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },

  modules: [
    '@nuxtjs/tailwindcss',
  ],

  css: [
    '~/assets/css/main.css',
  ],

  app: {
    head: {
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com'
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: 'anonymous'
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'
        }
      ]
    }
  }
})

App Vue Fornecedor

Arquivo: frontend-fornecedor/app/app.vue

<template>
  <div class="min-h-screen bg-agrsis-neutral-50">
    <div class="container mx-auto p-8">
      <h1 class="text-4xl font-bold text-agrsis-neutral-900 mb-8">
        🔵 AgrSis - Frontend Fornecedor
      </h1>

      <div class="grid gap-6">
        <div class="card">
          <h2 class="text-2xl font-semibold mb-4">Botões</h2>
          <div class="flex gap-4 flex-wrap">
            <button class="btn-primary">Botão Primário (Azul)</button>
            <button class="btn-secondary">Botão Secundário</button>
            <button class="btn-outline">Botão Outline</button>
          </div>
        </div>

        <div class="card">
          <h2 class="text-2xl font-semibold mb-4">Status Badges</h2>
          <div class="flex gap-3 flex-wrap">
            <span class="badge-success">Ativa</span>
            <span class="badge-warning">Aguardando</span>
            <span class="badge-error">Encerrada</span>
            <span class="badge-info">Em análise</span>
          </div>
        </div>

        <div class="card">
          <h3 class="text-xl font-semibold text-agrsis-neutral-900 mb-2">
            Card de Exemplo
          </h3>
          <p class="text-agrsis-neutral-600">
            Frontend Fornecedor com cores primárias em azul (#084059).
          </p>
        </div>
      </div>

      <div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <p class="text-sm text-blue-800 font-medium">
          ✅ Design System AgrSis instalado e funcionando!
        </p>
        <p class="text-xs text-blue-600 mt-1">
          Frontend Fornecedor - Paleta Azul (#084059)
        </p>
      </div>
    </div>

    <NuxtRouteAnnouncer />
  </div>
</template>

Shared Theme

Arquivo: shared/theme/agrsis.ts

/**
 * AgrSis - Tema Compartilhado
 * Design tokens reutilizáveis
 */

export const agrsisTheme = {
  colors: {
    primary: {
      verde: '#afd000',    // Produtor
      azul: '#084059',     // Fornecedor
    },
    status: {
      success: '#28a745',
      warning: '#ffc107',
      error: '#dc3545',
      info: '#17a2b8',
    },
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
  },
};

export type Perfil = 'produtor' | 'fornecedor';

export function getThemeColor(perfil: Perfil): string {
  return perfil === 'produtor'
    ? agrsisTheme.colors.primary.verde
    : agrsisTheme.colors.primary.azul;
}

🔗 REFERÊNCIAS

Cores Extraídas

Verde primário: #afd000 (logo - folha)
Azul primário: #084059 (logo - texto)
Paleta verde: Baseada na imagem fornecida (50-950)
Paleta sky: Baseada na imagem fornecida (50-950)

Documentação Relacionada

TailAdmin Integration
Tailwind CSS Docs
Color Hunt - Inspiração de paletas
Coolors - Gerador de paletas

Última atualização: 2025-12-05 Versão: 1.0 Status: ✅ Cores oficiais aprovadas

Edit this pageorReport an issue

Frontend

Guias e padrões dos portais Producer, Supplier e Admin.

TAILADMIN VUE.JS - INTEGRAÇÃO E DESIGN SYSTEM