@xetwa/design-system 1.0.2

package/src/BordasSombras.mdx

@@ -0,0 +1,343 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand Guidelines/Bordas & Sombras" />
+
+# Raios de Borda & Sombras
+
+Estes tokens definem o comportamento estrutural dos elementos do **Xetlingo**, moldando os cantos arredondados (raios de borda) e a elevação visual (sombras) das nossas interfaces.
+
+---
+
+{/* Raios de Borda */}
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem',
+  marginTop: '1.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Raios de borda (Cantos Arredondados)</h3>
+  
+  <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
+    O sistema Xetwa usa cantos generosamente arredondados — amigável e consistente com a marca.
+  </p>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Token</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Valor</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em', width: '90px' }}>Visual</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Usado em</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-xs</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>6px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '6px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Etiquetas "EM CURSO", badges de estado
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-sm</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>10px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '10px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Chips/tags, chips de data, ícone de plano
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-md</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '12px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Inputs, botões pequenos, avatares quadrados
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-lg</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '16px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Botões primários, cards de opção, horários
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-xl</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>20px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '20px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Cards de módulo, bottom sheet, cartão de embarque
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-2xl</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>24px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '24px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Modals, cards de mascote, passaporte
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-screen</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>34px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderRadius: '34px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Ecrã dentro do frame de telemóvel
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-phone</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>42px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#51332d', borderRadius: '42px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Frame exterior do telemóvel (mockups)
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--radius-full</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>9999px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '32px', height: '32px', backgroundColor: '#f2974b', borderRadius: '9999px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Avatares circulares, nós do mapa, chips de nível
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{/* Sombras */}
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Sombras (Elevação & Efeito 3D)</h3>
+  
+  <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
+    As sombras são suaves e usam o castanho da marca (<code style={{ fontSize: '0.8rem' }}>rgba(81,51,45, ...)</code>) para não quebrar a paleta.
+    Os botões usam **sombra rígida ("bottom shadow") estilo jogo** — não box-shadow difuso.
+  </p>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Token</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Valor CSS</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em', width: '80px' }}>Amostra</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Usado em</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-xs</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 1px 3px rgba(81,51,45,.08)</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: 'var(--bg-surface)', border: '1px solid var(--border-color)', borderRadius: '6px', boxShadow: 'var(--shadow-xs)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Tags, chips, inputs em repouso
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-sm</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 2px 8px rgba(81,51,45,.10)</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: 'var(--bg-surface)', border: '1px solid var(--border-color)', borderRadius: '6px', boxShadow: 'var(--shadow-sm)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Cards simples, avatares
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-md</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 4px 14px rgba(81,51,45,.13)</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: 'var(--bg-surface)', border: '1px solid var(--border-color)', borderRadius: '6px', boxShadow: 'var(--shadow-md)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Cards de módulo, modals, passaporte
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-lg</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 8px 26px rgba(81,51,45,.18)</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: 'var(--bg-surface)', border: '1px solid var(--border-color)', borderRadius: '6px', boxShadow: 'var(--shadow-lg)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Bottom sheets, cards premium, boarding pass
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-xl</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 18px 40px rgba(81,51,45,.28)</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: 'var(--bg-surface)', border: '1px solid var(--border-color)', borderRadius: '6px', boxShadow: 'var(--shadow-xl)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Frame de telemóvel nos mockups
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-btn-primary</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 4px 0 #cf7a30</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#f2974b', borderBottom: '4px solid #cf7a30', borderRadius: '6px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Botão primário (laranja) — sombra rígida
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-btn-secondary</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 4px 0 #efe2d6</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#fef6ee', borderBottom: '4px solid #efe2d6', borderLeft: '1px solid #efe2d6', borderRight: '1px solid #efe2d6', borderRadius: '6px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Botão secundário (branco) — sombra rígida
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#ffffff', backgroundColor: '#51332d', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-btn-dark</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 4px 0 #3a241f</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '24px', backgroundColor: '#51332d', borderBottom: '4px solid #3a241f', borderRadius: '6px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Botão dark (castanho) — sombra rígida
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-focus</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>0 0 0 3px rgba(242,151,75,.22)</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '6px', border: '3px solid rgba(242, 151, 75, 0.22)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Focus ring de inputs e botões
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--shadow-ring-pulse</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>Pulse animation</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: '#f2974b', boxShadow: '0 0 0 6px rgba(242, 151, 75, 0.25)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Animação de pulse no nó ativo do mapa
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>