WEB-2413: Fix

Author: Marcosld

doc/design-tokens.md

@@ -14,85 +14,7 @@ exported from `@telefonica/mistica`. Tokens adapt automatically to the active sk
 
 ## Color tokens
 
-All colors are accessed via `skinVars.colors.*`. Each token resolves to a CSS custom property.
-
-### Semantic colors
-
-| Token                   | Usage                                                    |
-| ----------------------- | -------------------------------------------------------- |
-| `brand`                 | Primary brand color                                      |
-| `brandHigh`             | High-contrast brand color                                |
-| `inverse`               | Inverse foreground color                                 |
-| `neutralHigh`           | High-contrast neutral (e.g. primary text on default)     |
-| `neutralMedium`         | Medium-contrast neutral (e.g. secondary text on default) |
-| `neutralLow`            | Low-contrast neutral                                     |
-| `neutralLowAlternative` | Alternative low-contrast neutral                         |
-| `success`               | Success semantic color                                   |
-| `warning`               | Warning semantic color                                   |
-| `error`                 | Error semantic color                                     |
-| `promo`                 | Promotional color                                        |
-| `highlight`             | Highlight color                                          |
-
-### Background colors
-
-| Token                            | Usage                               |
-| -------------------------------- | ----------------------------------- |
-| `background`                     | Default page background             |
-| `backgroundAlternative`          | Alternative section background      |
-| `backgroundBrand`                | Brand-colored background            |
-| `backgroundBrandSecondary`       | Secondary brand background          |
-| `backgroundContainer`            | Container/card background           |
-| `backgroundContainerBrand`       | Container on brand background       |
-| `backgroundContainerAlternative` | Container on alternative background |
-| `backgroundOverlay`              | Modal/sheet overlay                 |
-| `backgroundSkeleton`             | Skeleton loading placeholder        |
-| `appBarBackground`               | App bar background                  |
-| `navigationBarBackground`        | Navigation bar background           |
-
-### Text colors
-
-| Token                  | Usage                                      |
-| ---------------------- | ------------------------------------------ |
-| `textPrimary`          | Primary text on default background         |
-| `textPrimaryInverse`   | Primary text on brand/inverse background   |
-| `textPrimaryBrand`     | Primary text on brand background           |
-| `textPrimaryMedia`     | Primary text on media background           |
-| `textSecondary`        | Secondary text on default background       |
-| `textSecondaryInverse` | Secondary text on brand/inverse background |
-| `textSecondaryBrand`   | Secondary text on brand background         |
-| `textError`            | Error text                                 |
-| `textLink`             | Link text color                            |
-| `textLinkInverse`      | Link text on brand/inverse background      |
-| `textLinkDanger`       | Danger link text color                     |
-
-### Border colors
-
-| Token            | Usage                  |
-| ---------------- | ---------------------- |
-| `borderLow`      | Low-contrast border    |
-| `border`         | Default border         |
-| `borderHigh`     | High-contrast border   |
-| `borderSelected` | Selected/active border |
-
-### Status colors (low/high contrast)
-
-| Low contrast | High contrast | Usage          |
-| ------------ | ------------- | -------------- |
-| `successLow` | `successHigh` | Success status |
-| `warningLow` | `warningHigh` | Warning status |
-| `errorLow`   | `errorHigh`   | Error status   |
-| `promoLow`   | `promoHigh`   | Promo status   |
-| `brandLow`   | `brandHigh`   | Brand status   |
-
-### Control colors
-
-| Token              | Usage                                     |
-| ------------------ | ----------------------------------------- |
-| `control`          | Default control (checkbox, radio, switch) |
-| `controlActivated` | Activated control                         |
-| `controlError`     | Error state control                       |
-| `loadingBar`       | Loading bar color                         |
-| `divider`          | Divider line color                        |
+All colors are accessed via `skinVars.colors.*`. Each token resolves to a CSS custom property. Low/High colors mean low-contrast or high-contrast versions.
 
 ## Using colors in code