fix: replace _footnote_ typography size token (#1696)

telekom · Mar 31, 2023 · a33843f · a33843f
1 parent 6c4a02a
commit a33843f
Show file tree

Hide file tree

Showing 20 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
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
diff --git 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
@@ -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
@@ -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/..._snapshots__/date-picker-visual-spec-js-date-picker-dark-helper-text-1-snap.png b/..._snapshots__/date-picker-visual-spec-js-date-picker-dark-helper-text-1-snap.png
diff --git a/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png b/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png
diff --git a/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-2-snap.png b/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-2-snap.png
diff --git a/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-3-snap.png b/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-3-snap.png
diff --git a/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-4-snap.png b/...age_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-4-snap.png
diff --git a/...snapshots__/date-picker-visual-spec-js-date-picker-light-helper-text-1-snap.png b/...snapshots__/date-picker-visual-spec-js-date-picker-light-helper-text-1-snap.png
diff --git a/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png b/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png
diff --git a/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-2-snap.png b/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-2-snap.png
diff --git a/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-3-snap.png b/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-3-snap.png
diff --git a/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-4-snap.png b/...ge_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-4-snap.png