fix: update design tokens and corresponding storybook docs, remove du…

…plicates and unused vars

* docs: update text

* docs: removing pink and purple additional color (#978)

* docs: update scoped vars in storybook (#977)

* docs: update scoped vars in storybook

* fix: update design tokens and corresponding storybook docs, remove duplicates and unused vars

* docs: update text and images

* test: update visual snapshots

* docs: update text

* test: update snapshots

* chore: prettier

Co-authored-by: Marvin_Laubenstein <[email protected]>
Co-authored-by: felix-ico <[email protected]>

packages/components/src/components/date-picker/date-picker.css

@@ -18,10 +18,7 @@ duet-date-picker {
   --duet-font-bold: var(--telekom-typography-font-weight-medium);
   --duet-color-placeholder: var(--telekom-color-ui-additional-regular);
   --duet-radius: var(--telekom-radius-standard);
-  --duet-color-text-active: var(
-    --telekom-color-text-and-icon-white-standard,
-    #ffffff
-  );
+  --duet-color-text-active: var(--telekom-color-text-and-icon-white-standard);
   --duet-color-button: var(--telekom-color-background-surface);
   --duet-color-surface: var(--telekom-color-background-surface);
   --duet-z-index: 600;

packages/components/src/components/pagination/pagination.css

@@ -13,7 +13,7 @@
   --color: var(--telekom-color-text-and-icon-standard);
   --radius: var(--telekom-radius-large);
   --font-size: var(--telekom-typography-font-size-small);
-  --border: 1px solid var(--telekom-color-ui-additional-subtle);
+  --border: 1px solid var(--telekom-color-ui-additional-light);
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-active: var(--telekom-color-text-and-icon-primary-pressed);
   --color-button: var(--telekom-color-ui-additional-subtle);

packages/components/src/components/tab-header/tab-header.css

@@ -17,9 +17,6 @@
   --color: var(--telekom-color-text-and-icon-standard);
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-selected: var(--telekom-color-text-and-icon-primary-standard);
-  --background-underline-hover: var(--telekom-color-primary-hovered);
-  --background-underline-active: var(--telekom-color-primary-pressed);
-  --color-active: var(--telekom-color-text-and-icon-primary-standard);
   --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
     var(--telekom-color-functional-focus);
   --spacing-right-slotted: var(--telekom-spacing-unit-x2);
@@ -97,13 +94,13 @@
   color: var(--color-hover);
 }
 .tab-header:hover:after {
-  background-color: var(--background-underline-hover);
+  background-color: var(--color-hover);
 }
 .tab-header:active {
-  color: var(--color-active);
+  color: var(--color-selected);
 }
 .tab-header:active:after {
-  background-color: var(--background-underline-active);
+  background-color: var(--color-selected);
 }
 .tab-header ::slotted(*) {
   margin-right: var(--spacing-right-slotted);

packages/storybook-vue/stories/components/callout/Callout.stories.mdx

@@ -134,7 +134,7 @@ export const TemplateAsterisk = (args, { argTypes }) => ({
   --height-small: 120px;
   --height-large: 160px;
   --width-large: 160px;
-  --color-blue: var(--telekom-color-additional-blue-600);
+  --color-blue: var(--telekom-color-functional-informational-standard);
   --color-white: var(--telekom-color-background-surface);
   --color-black: var(--telekom-color-text-and-icon-functional-black);
   --color-primary: var(--telekom-color-primary-standard);

packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx

@@ -71,7 +71,7 @@ scale-checkbox {
       var(--telekom-motion-easing-standard)
     );
   --color-text: var(--telekom-color-text-and-icon-standard);
-  --color-error: var(--telekom-color-text-and-icon-functional-danger);
+  --color-error: var(--telekom-color-functional-danger-standard);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --color-standard: var(--telekom-color-background-surface);
   --background-disabled: var(--telekom-color-ui-outlined-fill-disabled);

packages/storybook-vue/stories/components/footer/Footer.stories.mdx

@@ -133,7 +133,7 @@ export const Template = (args, { argTypes }) => ({
     --telekom-color-text-and-icon-primary-pressed
   );
   --box-shadow-navigation-focus: 0 0 0 var(--telekom-spacing-unit-x05) var(
-      --telekom-color-primary-standard
+      --telekom-color-functional-focus
     );
   --border-color-standard-hover: var(
     --telekom-color-text-and-icon-white-standard

packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx

@@ -165,7 +165,7 @@ export const TemplateCustomColor = (args, { argTypes }) => ({
   --color-error: var(--telekom-color-text-and-icon-functional-danger);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background: var(--telekom-color-primary-standard);
-  --color-inner-status: var(--telekom-color-background-surface);
+  --color-inner-status: var(--telekom-color-primary-standard);
   --font-size-inner-status: var(--telekom-typography-font-size-small);
   --font-size-status: var(--telekom-typography-font-size-small);
   --font-weight-status: var(--telekom-typography-font-weight-extra-bold);
@@ -174,7 +174,7 @@ export const TemplateCustomColor = (args, { argTypes }) => ({
   --font-size-status-description: var(--telekom-typography-font-size-small);
   --font-weight-status-description: var(--telekom-typography-font-weight-bold);
   --spacing-label: var(--telekom-spacing-unit-x2) 0;
-  --border: 1px solid var(--telekom-color-ui-additional-regular);
+  --border: 1px solid var(--telekom-color-ui-outlined-border-standard);
 }
 ```
 

packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

@@ -116,9 +116,6 @@ export const Template = (args, { argTypes }) => ({
   --color: var(--telekom-color-text-and-icon-standard);
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-selected: var(--telekom-color-text-and-icon-primary-standard);
-  --background-underline-hover: var(--telekom-color-primary-hovered);
-  --background-underline-active: var(--telekom-color-primary-pressed);
-  --color-active: var(--telekom-color-text-and-icon-primary-standard);
   --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) var(
       --telekom-color-functional-focus
     );

packages/storybook-vue/stories/guidelines/Colors.stories.mdx

@@ -1006,7 +1006,7 @@ import { addons } from '@storybook/addons';
                 {!darkMode
                   ? generateSectionTitle(
                       'Primäre Farben im Light Mode',
-                      'Light Mode Primary Colors'
+                      'Light mode primary colors'
                     )
                   : generateSectionTitle(
                       'Primäre Farben im Dark Mode',
@@ -1028,7 +1028,7 @@ import { addons } from '@storybook/addons';
                   {generateTableColorRow(
                     'color.primary.standard',
                     'Markenfarbe Magenta',
-                    'Brand color magenta'
+                    'Brand color, Magenta'
                   )}
                   {generateTableColorRow(
                     'color.background.canvas',
@@ -1038,12 +1038,12 @@ import { addons } from '@storybook/addons';
                   {generateTableColorRow(
                     'color.background.surface-highlight',
                     'Für den Hintergrund von Komponenten oder Flächen, die hervorgehoben werden sollen (bspw. der Footer).',
-                    'For the background of components or areas that should be highlighted (e.g. the footer).'
+                    'For the background of components or areas that should be highlighted (e.g., the footer).'
                   )}
                 </tbody>
                 {generateSectionTitle(
                   'Textfarben Standard',
-                  'Text color Standard'
+                  'Text color standard'
                 )}
                 <tbody>
                   {generateTableColorRow(
@@ -1106,7 +1106,7 @@ import { addons } from '@storybook/addons';
                   {generateTableColorRow(
                     'color.text-&-icon.link.standard',
                     'Für unterstützende Informationen sowie für Funktionen wie Synchronisieren, Sortieren und Hinzufügen.',
-                    'For supporting information as well as for functions like synchronize, sort and add.'
+                    'For supporting information as well as for functions like synchronize, sort, and add.'
                   )}
                   {generateTableColorRow(
                     'color.text-&-icon.functional.success',
@@ -1225,7 +1225,7 @@ import { addons } from '@storybook/addons';
                     'For background areas of components without an outline.'
                   )}
                 </tbody>
-                {generateSectionSubTitle('UI Additional', 'UI Additional')}
+                {generateSectionSubTitle('UI Additional', 'UI additional')}
                 <tbody>
                   {generateTableColorRow('color.ui.additional.base')}
                   {generateTableColorRow('color.ui.additional.subtle')}
@@ -1234,21 +1234,21 @@ import { addons } from '@storybook/addons';
                   {generateTableColorRow('color.ui.additional.strong')}
                   {generateTableColorRow('color.ui.additional.extra-strong')}
                 </tbody>
-                {generateSectionTitle('Agent States', 'Agent States')}
+                {generateSectionTitle('Agent States', 'Agent states')}
                 {generateSectionDescription(
-                  'Z.B Primary Button',
-                  'e.g. Primary Button'
+                  'Z. B. Primary Button',
+                  'e.g., Primary Button'
                 )}
                 <tbody>
                   {generateTableColorRow(
                     'color.text-&-icon.primary.standard',
                     'Markenfarbe Magenta',
-                    'Brand color magenta'
+                    'Brand color, Magenta'
                   )}
                   {generateTableColorRow('color.text-&-icon.primary.hovered')}
                   {generateTableColorRow('color.text-&-icon.primary.pressed')}
                 </tbody>
-                {generateSectionSubTitle('Text Link', 'Text Link')}
+                {generateSectionSubTitle('Text-Link', 'Text link')}
                 <tbody>
                   {generateTableColorRow('color.text-&-icon.link.standard')}
                   {generateTableColorRow('color.text-&-icon.link.hovered')}
@@ -1257,7 +1257,7 @@ import { addons } from '@storybook/addons';
                 </tbody>
                 {generateSectionSubTitle(
                   'Funktionale Elemente',
-                  'Functional Elements'
+                  'Functional elements'
                 )}
                 <tbody>
                   {generateTableColorRow('color.functional.success.standard')}
@@ -1266,13 +1266,10 @@ import { addons } from '@storybook/addons';
                 </tbody>
                 {generateSectionSubTitle(
                   'Border Focus State',
-                  'Border Focus State'
+                  'Border focus state'
                 )}
                 <tbody>{generateTableColorRow('color.functional.focus')}</tbody>
-                {generateSectionSubTitle(
-                  'UI Outlined',
-                  'UI Outlined Elements'
-                )}
+                {generateSectionSubTitle('UI Outlined', 'UI outlined elements')}
                 <tbody>
                   {generateUIOutlinedTableColorRow(
                     'color.ui.outlined.fill.standard',
@@ -1307,10 +1304,7 @@ import { addons } from '@storybook/addons';
                     '#fff'
                   )}
                 </tbody>
-                {generateSectionSubTitle(
-                  'UI Solide',
-                  'UI Solid Elements'
-                )}
+                {generateSectionSubTitle('UI Solid', 'UI solid elements')}
                 <tbody>
                   {generateTableColorRow('color.ui.solid.standard')}
                   {generateTableColorRow('color.ui.solid.hovered')}
@@ -1385,132 +1379,6 @@ import { addons } from '@storybook/addons';
                     true
                   )}
                 </tbody>
-                {generateSectionSubTitle('Pink', 'Pink')}
-                <tbody>
-                  {generateTableColorRow(
-                    'color.additional.pink.0',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.100',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.200',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.300',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.400',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.500',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.600',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.700',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.800',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.pink.900',
-                    '',
-                    '',
-                    true
-                  )}
-                </tbody>
-                {generateSectionSubTitle('Purple', 'Purple')}
-                <tbody>
-                  {generateTableColorRow(
-                    'color.additional.purple.0',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.100',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.200',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.300',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.400',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.500',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.600',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.700',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.800',
-                    '',
-                    '',
-                    true
-                  )}
-                  {generateTableColorRow(
-                    'color.additional.purple.900',
-                    '',
-                    '',
-                    true
-                  )}
-                </tbody>
                 {generateSectionSubTitle('Violet', 'Violet')}
                 <tbody>
                   {generateTableColorRow(

packages/storybook-vue/stories/guidelines/DesignTokens_de.md

@@ -23,6 +23,7 @@ Als Entwickler*in bindest du die Tokens in Form von CSS-Variablen oder Javascrip
 ## Light und Dark Mode
 
 Design Tokens bilden die Grundlage für einen intuitiven Light und Dark Mode. In dieser Guideline erfährst du mehr darüber, welche Vorteile der Dark Mode bietet und wie du diesen implementieren kannst.
+
 [Light and Dark Mode](./?path=/docs/guidelines-light-and-dark-mode--page)
 
 ## Die Vorteile im Überblick

packages/storybook-vue/stories/guidelines/LightAndDarkMode_de.md

@@ -1,12 +1,10 @@
-# Telekom Light and Dark Mode
-
-## Light & Dark Mode
+# Light and Dark Mode
 
 **Light und Dark Mode richten sich an unterschiedliche Nutzungsgruppen und -szenarien. Dabei geht es nicht nur um Ästhetik, sondern oft auch darum, eine Überanstrengung der Augen zu vermeiden. Sei es aufgrund des Umgebungslichts oder bspw. bei Sehbehinderungen, wie dem Grauen Star.**
 
 Mithilfe unserer Komponenten lässt sich der Dark Mode nahezu ohne zusätzlichen Aufwand implementieren. Sowohl im Design als auch im Code.
 
-![Dark mode example modal](assets/dark-mode-example-modal.png)
+![Dark mode example modal](assets/img_color.png)
 
 ## Light Mode