diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 3726e9820d..e4d2af8958 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -12,7 +12,7 @@ :host { --background-color-circle: var(--telekom-color-primary-standard); --color-circle: var(--telekom-color-text-and-icon-inverted-standard); - --font-size-circle: var(--telekom-typography-font-size-footnote); + --font-size-circle: var(--telekom-typography-font-size-badge, 10px); --font-weight-circle: bold; --border-radius-circle: var(--telekom-radius-circle); --font-color-label: var(--telekom-color-text-and-icon-standard); diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css index 7307d92597..f4fab76002 100644 --- a/packages/components/src/components/date-picker/date-picker.css +++ b/packages/components/src/components/date-picker/date-picker.css @@ -170,7 +170,7 @@ duet-date-picker .duet-date__input::placeholder { ); transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); - font-size: var(--telekom-typography-font-size-footnote); + font-size: var(--telekom-typography-font-size-small); font-weight: var(--telekom-typography-font-weight-bold); } diff --git a/packages/components/src/components/input/input.css b/packages/components/src/components/input/input.css index 0da2e265ef..4fbfe6dac4 100644 --- a/packages/components/src/components/input/input.css +++ b/packages/components/src/components/input/input.css @@ -169,7 +169,7 @@ ); transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); - font-size: var(--telekom-typography-font-size-footnote); + font-size: var(--telekom-typography-font-size-badge, 10px); font-weight: var(--telekom-typography-font-weight-bold); } .input--status-error .input__input, @@ -225,7 +225,7 @@ ); transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); - font-size: var(--telekom-typography-font-size-footnote); + font-size: var(--telekom-typography-font-size-badge, 10px); font-weight: var(--telekom-typography-font-weight-medium); } .input--transparent .input__input, diff --git a/packages/components/src/components/notification-badge/notification-badge.css b/packages/components/src/components/notification-badge/notification-badge.css index 50525e63a4..ccfd50290d 100644 --- a/packages/components/src/components/notification-badge/notification-badge.css +++ b/packages/components/src/components/notification-badge/notification-badge.css @@ -17,7 +17,7 @@ /*notification-badge circle*/ --background-color-circle: var(--telekom-color-primary-standard); --color-circle: var(--telekom-color-text-and-icon-inverted-standard); - --font-size-circle: var(--telekom-typography-font-size-footnote); + --font-size-circle: var(--telekom-typography-font-size-badge, 10px); --font-weight-circle: bold; --border-radius-circle: var(--telekom-radius-circle); diff --git a/packages/components/src/components/telekom/nav-icon/nav-icon.css b/packages/components/src/components/telekom/nav-icon/nav-icon.css index 866dd32160..364a77135d 100644 --- a/packages/components/src/components/telekom/nav-icon/nav-icon.css +++ b/packages/components/src/components/telekom/nav-icon/nav-icon.css @@ -11,7 +11,7 @@ scale-nav-icon { --spacing-mobile: var(--telekom-spacing-unit-x0) 6px; - --font-size-mobile: var(--telekom-typography-font-size-footnote); + --font-size-mobile: var(--telekom-typography-font-size-badge, 10px); --line-height-mobile: var(--telekom-typography-line-spacing-tight); --font-weight-mobile: var(--telekom-typography-font-weight-bold); diff --git a/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-DE.png b/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-DE.png index 749e7ad4f6..2f779c6ab0 100644 Binary files a/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-DE.png and b/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-DE.png differ diff --git a/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-EN.png b/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-EN.png index 0bec00bf71..a4a5d8d377 100644 Binary files a/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-EN.png and b/packages/storybook-vue/public/assets/2_guidelines/3_typography/font-formats-EN.png differ diff --git a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx index bdd4029066..9b2232375f 100644 --- a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx +++ b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx @@ -148,7 +148,7 @@ export const Template = (args, { argTypes }) => ({ --transition-label: var(--transition); --font-size-label: var(--telekom-typography-font-size-body); --font-weight-label: var(--telekom-typography-font-weight-medium); - --font-size-label-focus: var(--telekom-typography-font-size-footnote); + --font-size-label-focus: var(--telekom-typography-font-size-small); --font-weight-label-focus: var(--telekom-typography-font-weight-bold); } ``` diff --git a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx index 532222693b..aeae39a295 100644 --- a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx +++ b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx @@ -152,7 +152,7 @@ scale-textarea { --transition-label: var(--transition); --font-size-label: var(--telekom-typography-font-size-body); --font-weight-label: var(--telekom-typography-font-weight-medium); - --font-size-label-focus: var(--telekom-typography-font-size-footnote); + --font-size-label-focus: var(--telekom-typography-font-size-small); --font-weight-label-focus: var(--telekom-typography-font-weight-bold); } ``` diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx index ad21a4152c..2ba916a9f3 100644 --- a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx +++ b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx @@ -265,7 +265,7 @@ scale-text-field { --transition-label: var(--transition); --font-size-label: var(--telekom-typography-font-size-body); --font-weight-label: var(--telekom-typography-font-weight-medium); - --font-size-label-focus: var(--telekom-typography-font-size-footnote); + --font-size-label-focus: var(--telekom-typography-font-size-small); --font-weight-label-focus: var(--telekom-typography-font-weight-bold); } ``` diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-helper-text-1-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-helper-text-1-snap.png index f24d013881..a852c86cf5 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-helper-text-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-helper-text-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png index 237b8c83b0..7e2e05060a 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-2-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-2-snap.png index 2da640d67d..47a1e3c750 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-2-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-2-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-3-snap.png index 7543e88b3c..3d56dc8bfd 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-3-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-3-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-4-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-4-snap.png index d2c7304348..e865e179a7 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-4-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-4-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-helper-text-1-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-helper-text-1-snap.png index b4f9566e9d..b0ee131b3a 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-helper-text-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-helper-text-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png index 253ec4ad06..9fa1d8d64e 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-2-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-2-snap.png index c978958c7a..e9b6d0510e 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-2-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-2-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-3-snap.png index 4d02346582..a0dd0c1066 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-3-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-3-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-4-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-4-snap.png index 4d550d088a..a6b3a83cd9 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-4-snap.png and b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-4-snap.png differ