fix(tag): tipografia definida só pelo size e highlight neutral em brandPrimaryPure (MR-802)

[devin-ai-integration]

Description

Padroniza a Tag do Ocean Web para a regra decidida na MR-802: a tipografia é definida só pelo size, nunca pela variant, e a highlight neutral passa a ter contraste AA. Só as highlight mudam; .ods-tag--medium e .ods-tag--small (legado, 8px) ficam como estão.

packages/ocean-core/src/components/_tag.scss:

 @mixin highlight {
   color: $color-interface-light-pure;
-  font-size: 10px;
-  font-weight: $font-weight-extrabold;
-  line-height: 10px;
   padding: $spacing-stack-xxxs $spacing-stack-xxs;
 }
 &--highlight__neutral {
-  background-color: $color-brand-primary-down;   // 4,09:1 com texto branco
+  background-color: $color-brand-primary-pure;   // #0025E0 — 8,97:1
 }

Resultado: uma highlight herda a tipografia da classe de tamanho (medium = Nunito Sans SemiBold 600 / 12px; small = Bold 700 / 8px). Nenhum nome de classe nem a API React mudam. A highlight important mantém o coral.

Stories novas em Tag.stories.tsx (mantidas as existentes e seus IDs): All variants (highlight + 6 status × medium/small), PagBlu list (oferta highlight neutral ao lado do status default numa ListAction) e Long label in list, 320px.

Teste novo Tag.styles.test.ts compila o SCSS da Tag com os tokens e afirma os valores por size e a ausência de tipografia nas regras highlight.

Também adiciona a página docs/components/tag.mdx ao portal Docusaurus (@useblu/ocean-docs) e a registra na sidebar — a Tag era o único componente de data-display sem página.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• jest packages/ocean-react/src/Tag: 12 testes passam (snapshots existentes inalterados + 2 do CSS compilado; os 2 novos falham contra o SCSS anterior).
• eslint (ocean-react), stylelint (ocean-core), tsc --noEmit e prettier sem erros nos arquivos alterados.
• yarn build em ocean-core: ocean.min.css gera .ods-tag--highlight__neutral{background-color:#0025e0;…} sem font-size/font-weight próprios; .ods-tag--small inalterada.
• Visual: Storybook do Chromatic desta PR (stories Components/Tag).

Screenshots (if appropriate):

Tela aprovada da feature: https://github.com/Pagnet/product-bluprints/blob/main/prd-tracking/MR-802-ocean-padronizar-tamanho-peso-tags/artefatos/tela-aprovada.md

Checklist:

• I have read the CONTRIBUTING document
• I have performed a self-review of my own code
• My changes generate no new warnings
• My changes work in Chrome, Edge, and Firefox
• I have made corresponding changes to the documentation (if appropriate)
• I have added tests that prove my fix is effective or that my feature works
• All new and existing tests passed

Links

• PRD / Ledger: https://github.com/Pagnet/product-bluprints/blob/main/prd-tracking/MR-802-ocean-padronizar-tamanho-peso-tags/MR-802-ocean-padronizar-tamanho-peso-tags-ledger.md
• Card: https://useblu.atlassian.net/browse/MR-802
• iOS e Android: mesma regra, PRs a abrir pelo time de design (fatia F-1 do Ledger)

Co-authored-by: igor-monteiro-almeida igor.monteiro@useblu.com.br

Link to Devin session: https://app.devin.ai/sessions/876dfa98c4e24f67b9de7b78bb2df2af
Open in Devin Desktop: https://app.devin.ai/desktop/session/876dfa98c4e24f67b9de7b78bb2df2af?variant=devin
Requested by: @igor-monteiro-almeida

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

---

Original prompt from igor.monteiro

@playbook:playbook-761b740ef1fb4b0fa415f5dc51c9c5f7 https://useblu.atlassian.net/browse/MR-802

[devin-ai-integration]

Gate de merge (release-gate) — MR-802

Resultado: GATE FALHOU — 3 linha(s) aberta(s); as 3 linhas são as mesmas decisões do dono do componente (Igor Monteiro, time do Ocean, 18/09/2026), registradas como DESVIO | no Ledger:

• marco 5 / marco 9 — sem feature flag ("ajuste de cor e token em componente, não tem risco de quebrar nada"); o freio em produção é a adoção da versão pelos consumidores.
• marco 6 — nada a medir (H-1/H-2 retiradas); tracking SEM EVENTO.

Tudo o mais verde: feature-doc gate OK, spec gate OK, classificação em dia (Sim), homologação 8/8 aprovada pelo operador (web 17/09, Android e iOS 18/09).

Por isso a etiqueta ai-auto-merge não foi aplicada; o merge fica com o time do Ocean. Registro: artefatos/merge/gate.md · Ledger

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.5% Duplication on New Code

See analysis details on SonarQube Cloud