Implement new Figma variable structure

[larsrickert]

Why?

UX has changed the design variables logic to have a dedicated light and dark theme for every theme (e.g. onyx light and onyx dark) instead of the same light/dark variables which adapt based on the select theme (onyx, kaufland, lidl etc.).

Design

Figma file

Acceptance criteria

• all components are updated to use the new variables
• the Figma variables import workflow in GitHub is updated to work with the new variable structure
• the variable docs are updated
• all available quantitative color variables are shown on the color variables page with preview + copy functionality
• the theming docs are updated accordingly
• our Storybook theme is updated if needed
• our VitePress theme is updated if needed
• Storybook theme switch still works

Implementation details

• Make use of https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
• New/added tokens which need to be replaced in all components are:
  

Definition of Done

• The following component requirements are implemented:
  • example usage added to apps/demo-app/src/views/HomeView.vue
• covered by tests
  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)
• follow-up tickets were created if necessary
• updated version + documentation is deployed
• Storybook can show the feature
• Storybook code snippet of new/changed examples are checked that they are generated correctly
• Namings are aligned with Figma

Approval

• Storybook
• Deployed Docs
• approved by designer @jannick-ux
• approved by dev