@dev-tcloud/tcloud-ui 7.8.1 → 8.0.0

package/docs/tcloud-ui-tag.md

@@ -248,16 +248,24 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
       <!-- Neutras -->
       <div>
         <h5>Neutras</h5>
+        <tcloud-ui-tag [color]="'neutral-50'">neutral-50</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-100'">neutral-100</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-200'">neutral-200</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'neutral-300'">neutral-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-400'">neutral-400</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'neutral-500'">neutral-500</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-600'">neutral-600</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'neutral-700'">neutral-700</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'neutral-800'">neutral-800</tcloud-ui-tag>
       </div>
 
       <!-- Primárias -->
       <div>
         <h5>Primárias</h5>
         <tcloud-ui-tag [color]="'primary-300'">primary-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'primary-400'">primary-400</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'primary-500'">primary-500</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'primary-600'">primary-600</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'primary-700'">primary-700</tcloud-ui-tag>
       </div>
 
@@ -265,6 +273,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
       <div>
         <h5>Risco/Erro</h5>
         <tcloud-ui-tag [color]="'danger-300'">danger-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'danger-400'">danger-400</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'danger-500'">danger-500</tcloud-ui-tag>
       </div>
 
@@ -272,6 +281,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
       <div>
         <h5>Sucesso</h5>
         <tcloud-ui-tag [color]="'success-300'">success-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'success-400'">success-400</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'success-500'">success-500</tcloud-ui-tag>
       </div>
 
@@ -279,6 +289,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
       <div>
         <h5>Informação</h5>
         <tcloud-ui-tag [color]="'info-300'">info-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'info-400'">info-400</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'info-500'">info-500</tcloud-ui-tag>
       </div>
 
@@ -286,6 +297,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
       <div>
         <h5>Alerta</h5>
         <tcloud-ui-tag [color]="'alert-300'">alert-300</tcloud-ui-tag>
+        <tcloud-ui-tag [color]="'alert-400'">alert-400</tcloud-ui-tag>
         <tcloud-ui-tag [color]="'alert-500'">alert-500</tcloud-ui-tag>
       </div>
     </div>

package/docs/tcloud-ui-tc-btn.md

@@ -3,7 +3,7 @@
 ## Características
 
 - Classe base para botões e links estilizados, aplicável às tags `<button>` e `<a>`.
-- Cinco variantes **filled** e três variantes **outline**, cobrindo todos os contextos semânticos: ação principal, destrutiva, alerta, sucesso e neutra.
+- Seis variantes **filled** (primary, danger, alert, success, neutral e **fantasy** — gradiente de marca) e três variantes **outline**, cobrindo os contextos semânticos e o destaque de marca.
 - Três tamanhos: `tc-btn-sm`, padrão e `tc-btn-lg`.
 - Classe complementar `.tc-link` para links inline com variantes de cor.
 - Compatível com dark mode e variantes de tema — cores baseadas nos tokens `--c-*`.
@@ -61,6 +61,14 @@ Certifique-se de que o stylesheet principal do `tcloud-ui` está incluído na ap
 | `tc-btn tc-btn-alert` | Ação que requer atenção |
 | `tc-btn tc-btn-success` | Confirmação ou conclusão |
 | `tc-btn tc-btn-neutral` | Ação secundária sem destaque |
+| `tc-btn tc-btn-fantasy` | Destaque especial — gradiente de marca "T-Cloud.IA" (roxo → magenta) |
+
+> **`tc-btn-fantasy`** usa o gradiente de marca da T-Cloud.IA (mesmo do botão
+> `.subject-option` do chat Genesys): fundo roxo → magenta com texto branco. O
+> gradiente é **cor de marca, constante em light e dark** — o texto branco garante o
+> contraste nos dois temas, e o anel de foco (`--c-primary-400`) se adapta ao tema.
+> Tokens: `--c-fantasy-start`, `--c-fantasy-end`, `--c-fantasy-gradient`,
+> `--c-fantasy-border`, `--c-fantasy-on` (texto branco fixo) — em `_colors.scss`.
 
 ---
 
@@ -107,6 +115,9 @@ Classe para links inline. Utiliza `border-bottom` em vez de `text-decoration` pa
 <button class="tc-btn tc-btn-success">Confirmar</button>
 <button class="tc-btn tc-btn-neutral">Cancelar</button>
 
+<!-- Variante fantasy — gradiente de marca T-Cloud.IA -->
+<button class="tc-btn tc-btn-fantasy">Fale com a T-Cloud.IA</button>
+
 <!-- Botões outline -->
 <button class="tc-btn tc-btn-outline-primary">Cancelar</button>
 <button class="tc-btn tc-btn-outline-danger">Remover</button>