Skip to content

Token: Update documentation #2414

Description

@SergejLust

Detailed description of how to reproduce the problem

  1. Open Storybook and navigate to the opacity documentation page (MDX).
  2. Locate the Opacity table on the page — it lists CSS Variable / SCSS Variable / Value rows for --ifx-opacity-0 / $ifxOpacity0 / 0 through --ifx-opacity-100 / $ifxOpacity100 / 1.
  3. Open the DDS Figma library and search for the corresponding opacity variables.
  4. Observe that no opacity variables exist in Figma — the tokens --ifx-opacity-0, --ifx-opacity-25, --ifx-opacity-50, --ifx-opacity-75, --ifx-opacity-100 (and their SCSS equivalents $ifxOpacity0$ifxOpacity100) have no counterpart on the design side.

Actual behavior: The DDS ships a set of opacity tokens (--ifx-opacity-0, --ifx-opacity-25, --ifx-opacity-50, --ifx-opacity-75, --ifx-opacity-100 and the SCSS equivalents) that are documented in Storybook but have no matching Figma variables. Since Figma is the source of truth for design tokens, this creates orphaned code-side tokens without design-side ownership and misleads consumers into treating them as part of the official token set.

Expected behavior: The opacity tokens are removed from the DDS. The Opacity table is removed from the Storybook documentation page in its entirety, and the CSS custom properties and SCSS variables backing those tokens are removed from the token layer in code.

Upload a screenshot

Image

Describe the development framework

Infineon Design System (DDS) component library — Stencil-based Web Components authored in TypeScript, with styles written in SCSS. Documented and previewed in Storybook (MDX). Issue affects the token layer (CSS custom properties and SCSS variables) as well as the opacity documentation page.

Expected behavior

  • The following tokens are removed from the token layer:
    • --ifx-opacity-0 / $ifxOpacity0
    • --ifx-opacity-25 / $ifxOpacity25
    • --ifx-opacity-50 / $ifxOpacity50
    • --ifx-opacity-75 / $ifxOpacity75
    • --ifx-opacity-100 / $ifxOpacity100
  • The Opacity table is removed from the Storybook documentation page in its entirety.
  • Any prose, heading, or example on the opacity documentation page that references the removed tokens is removed or rewritten to no longer depend on them.
  • No new opacity tokens are introduced — Figma has no opacity variables, so the code side matches by having none either.
  • No API changes on any component.

Additional information

  • Rationale: Figma is the source of truth for DDS design tokens. Tokens that live only in code, with no Figma counterpart, are orphaned — they cannot be picked in design, cannot be linked in specs, and drift silently from the design system's intent. Removing them keeps the token layer in one-to-one alignment with Figma.
  • Assumption to confirm: it was not stated whether any DDS components currently consume the opacity tokens in their SCSS. Before removal, run a repo-wide search (e.g. grep -rn "ifx-opacity-\|ifxOpacity" packages/components/src) to confirm no component depends on them. If any component does, that usage must be migrated first (either to a hardcoded opacity value or to a different token) so this removal does not break any component. If usages are found, this becomes a two-step change: migrate consumers, then remove the tokens.
  • Assumption to confirm: exact Storybook MDX page path (e.g. Foundations → Opacity) was not specified — please confirm which page the table lives on.
  • Breaking change note: If any external consumer of the DDS uses these tokens directly in their application code, this removal will affect them. Consider whether a deprecation notice in a release ahead of removal is warranted.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingminorminor version bumprequestUser request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions