fix(blocks): keep explicit badge colors above utility defaults - #10814

Problem

A badge with color: '#ffcc00' can still render gray in the API reference. The color is present in --badge-color, but late-loading .scalar-app .bg-b-2 and .scalar-app .text-c-2 utilities have the same specificity as the scoped .badge-colored rule and win by source order. The text contrast rule loses too.

Small reproduction:

openapi: 3.1.0
info:
  title: Badge color example
  version: 1.0.0
paths:
  /hello-world:
    get:
      summary: Hello World
      x-badges:
        - name: Gamma
          color: '#ffcc00'
      responses:
        '200':
          description: OK

Solution

Use .badge.badge-colored for both explicit-color rules, matching the specificity already used by the badge's themed color variants. This keeps the selected background and derived text contrast above the default utilities, without changing plain badges or adding inline styles or !important.

The story covers plain, yellow and black badges. Its browser regression loads consumer utilities after the component styles, so it exercises the source-order collision rather than relying on Storybook's default stylesheet order.

Visual

Actual Vue Badge component with the Blocks stylesheet and light theme, before and after:

Checklist

• I explained why the change is needed.
• I added a changeset.
• I added tests.
• I updated the documentation. No option or documented behavior changes.

AI-assisted.

Ticket

Fixes #10793