diff --git a/.changeset/clever-pandas-chew.md b/.changeset/clever-pandas-chew.md
new file mode 100644
index 00000000000..ef1edbfd6da
--- /dev/null
+++ b/.changeset/clever-pandas-chew.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core): replace font styles with actual formats
diff --git a/.npmrc b/.npmrc
index d76d37bec21..84654b08410 100644
--- a/.npmrc
+++ b/.npmrc
@@ -18,3 +18,4 @@ public-hoist-pattern[]=mark.js
 public-hoist-pattern[]=lunr
 
 public-hoist-pattern[]=playwright
+public-hoist-pattern[]=eslint**
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 92bfacd8a61..dc4358b3751 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -55,7 +55,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -120,7 +120,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -890,7 +890,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -911,7 +911,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -937,7 +937,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -1406,7 +1406,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -1588,6 +1588,7 @@
               "text": "2.1.0"
             }
           ],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -3249,7 +3250,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16785,7 +16786,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16824,7 +16825,7 @@
               "type": "TypographyFormatCode"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16884,7 +16885,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -17679,11 +17680,6 @@
       "docstring": "",
       "path": "src/components/card/card.tsx"
     },
-    "src/components/typography/typography.tsx::TypographyVariants": {
-      "declaration": "export type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';",
-      "docstring": "",
-      "path": "src/components/typography/typography.tsx"
-    },
     "src/components/typography/typography.tsx::TypographyFormat": {
       "declaration": "export type TypographyFormat =\n  | TypographyFormatLabel\n  | TypographyFormatBody\n  | TypographyFormatDisplay\n  | TypographyFormatHeading\n  | TypographyFormatCode;",
       "docstring": "",
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 03f40e0d391..8903f3406f0 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -44,7 +44,7 @@ import { ToastConfig, ToastType } from "./components/toast/toast-utils";
 import { ShowToastResult } from "./components/toast/toast-container";
 import { Element } from "@stencil/core";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
-import { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography";
+import { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography";
 import { UploadFileState } from "./components/upload/upload-file-state";
 export { ActionCardVariant } from "./components/action-card/action-card";
 export { IxTheme } from "./components/utils/theme-switcher";
@@ -85,7 +85,7 @@ export { ToastConfig, ToastType } from "./components/toast/toast-utils";
 export { ShowToastResult } from "./components/toast/toast-container";
 export { Element } from "@stencil/core";
 export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
-export { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography";
+export { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography";
 export { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
     /**
@@ -95,7 +95,7 @@ export namespace Components {
         /**
           * Card heading
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * Card icon
          */
@@ -107,7 +107,7 @@ export namespace Components {
         /**
           * Card subheading
          */
-        "subheading": string;
+        "subheading"?: string;
         /**
           * Card variant
           * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
@@ -206,16 +206,16 @@ export namespace Components {
           * Optional icon to be displayed next to the header label
           * @since 1.5.0
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Label of blind
          */
-        "label": string;
+        "label"?: string;
         /**
           * Secondary label inside blind header
           * @since 2.0.0
          */
-        "sublabel": string;
+        "sublabel"?: string;
         /**
           * Blind variant
           * @since 2.0.0
@@ -268,7 +268,7 @@ export namespace Components {
         /**
           * Icon name
          */
-        "icon": string;
+        "icon"?: string;
         "iconSize": '12' | '16' | '24';
         /**
           * Loading button
@@ -508,7 +508,7 @@ export namespace Components {
         /**
           * Title of Header
          */
-        "headerTitle": string;
+        "headerTitle"?: string;
         /**
           * Variant of content header
          */
@@ -518,7 +518,7 @@ export namespace Components {
         /**
           * Define css grid template
          */
-        "templates": Partial<Record<CssGridTemplateType, string[][]>>;
+        "templates"?: Partial<Record<CssGridTemplateType, string[][]>>;
     }
     interface IxCssGridItem {
         /**
@@ -2338,24 +2338,19 @@ export namespace Components {
           * Text color based on theme variables
           * @deprecated since 2.1.0 use property `text-color`
          */
-        "color": TypographyColors;
+        "color"?: TypographyColors;
         /**
           * Text format
          */
-        "format": TypographyFormat;
+        "format"?: TypographyFormat;
         /**
           * Text color based on theme variables
          */
-        "textColor": TypographyColors;
+        "textColor"?: TypographyColors;
         /**
           * Text decoration
          */
         "textDecoration": TextDecoration;
-        /**
-          * Font variant based on theme variables
-          * @deprecated Use `format` property
-         */
-        "variant": TypographyVariants;
     }
     interface IxUpload {
         /**
@@ -6637,11 +6632,6 @@ declare namespace LocalJSX {
           * Text decoration
          */
         "textDecoration"?: TextDecoration;
-        /**
-          * Font variant based on theme variables
-          * @deprecated Use `format` property
-         */
-        "variant"?: TypographyVariants;
     }
     interface IxUpload {
         /**
diff --git a/packages/core/src/components/action-card/action-card.tsx b/packages/core/src/components/action-card/action-card.tsx
index 36c889a06b5..1882c9d3e68 100644
--- a/packages/core/src/components/action-card/action-card.tsx
+++ b/packages/core/src/components/action-card/action-card.tsx
@@ -36,19 +36,19 @@ export class IxActionCard {
   /**
    * Card heading
    */
-  @Prop() heading: string;
+  @Prop() heading?: string;
 
   /**
    * Card subheading
    */
-  @Prop() subheading: string;
+  @Prop() subheading?: string;
 
   /**
    * Card selection
    */
   @Prop() selected = false;
 
-  private getSubheadingColor(): TypographyColors {
+  private getSubheadingColor(): TypographyColors | undefined {
     switch (this.variant) {
       case 'insight':
       case 'notification':
diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx
index 2ecfba1be35..73372379d43 100644
--- a/packages/core/src/components/blind/blind.tsx
+++ b/packages/core/src/components/blind/blind.tsx
@@ -40,19 +40,19 @@ export class Blind {
   /**
    * Label of blind
    */
-  @Prop() label: string;
+  @Prop() label?: string;
 
   /**
    * Secondary label inside blind header
    * @since 2.0.0
    */
-  @Prop() sublabel: string;
+  @Prop() sublabel?: string;
 
   /**
    * Optional icon to be displayed next to the header label
    * @since 1.5.0
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   /**
    * Blind variant
@@ -63,11 +63,11 @@ export class Blind {
   /**
    * Collapsed state changed
    */
-  @Event() collapsedChange: EventEmitter<boolean>;
+  @Event() collapsedChange!: EventEmitter<boolean>;
 
   @Element() hostElement!: HTMLIxBlindElement;
 
-  private chevronRef: HTMLElement;
+  private chevronRef?: HTMLElement;
   private blindId = ++sequentialInstanceId;
 
   constructor() {}
@@ -82,7 +82,7 @@ export class Blind {
   }
 
   get content() {
-    return this.hostElement.shadowRoot.querySelector('.blind-content');
+    return this.hostElement.shadowRoot!.querySelector('.blind-content');
   }
 
   @Watch('collapsed')
@@ -160,7 +160,7 @@ export class Blind {
                   ? 'color-primary'
                   : `color-${this.variant}--contrast`
               }
-              ref={(ref) => (this.chevronRef = ref)}
+              ref={(ref: HTMLElement) => (this.chevronRef = ref)}
             ></ix-icon>
             <div
               class="blind-header-title"
diff --git a/packages/core/src/components/button/base-button.tsx b/packages/core/src/components/button/base-button.tsx
index d0d4e1e81a2..5b0ca13bc83 100644
--- a/packages/core/src/components/button/base-button.tsx
+++ b/packages/core/src/components/button/base-button.tsx
@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 import { A11yAttributes } from '../utils/a11y';
 import { ButtonVariant } from './button';
 
@@ -61,7 +61,7 @@ export type BaseButtonProps = {
   selected: boolean;
   disabled: boolean;
   loading: boolean;
-  icon: string;
+  icon?: string;
   onClick?: Function;
   ariaAttributes?: A11yAttributes;
   extraClasses?: { [key: string]: boolean };
@@ -87,7 +87,10 @@ const getSpinnerSize = (btnProps: BaseButtonProps) => {
   }
 };
 
-export function BaseButton(props: BaseButtonProps, children) {
+export const BaseButton: FunctionalComponent<BaseButtonProps> = (
+  props: BaseButtonProps,
+  children
+) => {
   const extraClasses = props.extraClasses ?? {};
 
   const ariaAttributes = props.ariaAttributes ?? {};
@@ -136,4 +139,4 @@ export function BaseButton(props: BaseButtonProps, children) {
       {props.afterContent ? props.afterContent : null}
     </button>
   );
-}
+};
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index bf87fb03176..3e78601326f 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -54,7 +54,7 @@ export class Button {
   /**
    * Icon name
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   /** @internal */
   @Prop() alignment: 'center' | 'start' = 'center';
@@ -62,12 +62,12 @@ export class Button {
   /** @internal */
   @Prop() iconSize: '12' | '16' | '24' = '24';
 
-  @Element() hostElement: HTMLIxButtonElement;
+  @Element() hostElement!: HTMLIxButtonElement;
 
   /**
    * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)
    */
-  submitButtonElement: HTMLButtonElement;
+  submitButtonElement?: HTMLButtonElement;
 
   componentDidLoad() {
     if (this.type === 'submit') {
diff --git a/packages/core/src/components/card-accordion/card-accordion.tsx b/packages/core/src/components/card-accordion/card-accordion.tsx
index bb356ee34c3..95538f39f40 100644
--- a/packages/core/src/components/card-accordion/card-accordion.tsx
+++ b/packages/core/src/components/card-accordion/card-accordion.tsx
@@ -35,12 +35,12 @@ export class CardAccordion {
    */
   @Prop() collapse = false;
 
-  @Element() hostElement: HTMLIxCardAccordionElement;
+  @Element() hostElement!: HTMLIxCardAccordionElement;
 
   /**
    * @internal
    */
-  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;
+  @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;
 
   @State() expandContent = false;
 
@@ -50,7 +50,7 @@ export class CardAccordion {
   }
 
   get expandedContent() {
-    return this.hostElement.shadowRoot.querySelector('.expand-content');
+    return this.hostElement.shadowRoot!.querySelector('.expand-content');
   }
 
   onExpandActionClick(event: Event) {
@@ -69,10 +69,10 @@ export class CardAccordion {
 
   private scrollExpandedContentIntoView() {
     setTimeout(() => {
-      const rect = this.expandedContent.getBoundingClientRect();
+      const rect = this.expandedContent!.getBoundingClientRect();
       if (rect.bottom > window.innerHeight) {
-        this.hostElement.shadowRoot
-          .querySelector('.expand-content')
+        this.hostElement
+          .shadowRoot!.querySelector('.expand-content')!
           .scrollIntoView(false);
       }
     }, 150);
diff --git a/packages/core/src/components/card-list/card-list.tsx b/packages/core/src/components/card-list/card-list.tsx
index bfcb672a746..0d07809e3fb 100644
--- a/packages/core/src/components/card-list/card-list.tsx
+++ b/packages/core/src/components/card-list/card-list.tsx
@@ -36,7 +36,7 @@ function CardListTitle(props: {
           CardList__Title__Button__Collapsed: props.isCollapsed,
         }}
       ></ix-icon-button>
-      <ix-typography class="CardList_Title__Label" variant="large-single">
+      <ix-typography class="CardList_Title__Label" format="body-lg">
         {props.label}
       </ix-typography>
       {!props.hideShowAll && (
diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 7f56e6450d1..a037a39bfcd 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -23,7 +23,7 @@ export type CardVariant =
   shadow: true,
 })
 export class Card {
-  @Element() hostElement: HTMLIxCardElement;
+  @Element() hostElement!: HTMLIxCardElement;
 
   /**
    * Card variant
@@ -34,7 +34,7 @@ export class Card {
   /**
    * @since 2.1.0
    */
-  @Prop() selected: boolean;
+  @Prop() selected: boolean = false;
 
   render() {
     return (
diff --git a/packages/core/src/components/col/col.tsx b/packages/core/src/components/col/col.tsx
index 7a646713cc3..30a6d25fa20 100644
--- a/packages/core/src/components/col/col.tsx
+++ b/packages/core/src/components/col/col.tsx
@@ -81,8 +81,8 @@ export class Col {
     }
   }
 
-  private getColumnSize() {
-    let size: ColumnSize;
+  private getColumnSize(): ColumnSize | undefined {
+    let size: ColumnSize | undefined;
     Col.Breakpoints.forEach((breakpoint) => {
       const isMediaQueryActive =
         breakpoint !== '' ? matchBreakpoint(breakpoint) : true;
diff --git a/packages/core/src/components/content-header/content-header.tsx b/packages/core/src/components/content-header/content-header.tsx
index 620e606dffc..927b1ae5b94 100644
--- a/packages/core/src/components/content-header/content-header.tsx
+++ b/packages/core/src/components/content-header/content-header.tsx
@@ -25,7 +25,7 @@ export class ContentHeader {
   /**
    * Title of Header
    */
-  @Prop() headerTitle: string;
+  @Prop() headerTitle?: string;
 
   /**
    * Subtitle of Header
@@ -40,7 +40,7 @@ export class ContentHeader {
   /**
    * Triggered when back button is clicked
    */
-  @Event() backButtonClick: EventEmitter<void>;
+  @Event() backButtonClick!: EventEmitter<void>;
 
   render() {
     return (
@@ -56,13 +56,11 @@ export class ContentHeader {
         ) : null}
 
         <div class="titleGroup">
-          <ix-typography
-            variant={this.variant === 'secondary' ? 'large-single' : 'h2'}
-          >
+          <ix-typography format={this.variant === 'secondary' ? 'h4' : 'h3'}>
             {this.headerTitle}
           </ix-typography>
           {this.headerSubtitle !== undefined ? (
-            <ix-typography variant={'caption'} color={'soft'} class="subtitle">
+            <ix-typography format={'h6'} color={'soft'} class="subtitle">
               {this.headerSubtitle}
             </ix-typography>
           ) : null}
diff --git a/packages/core/src/components/css-grid/css-grid.tsx b/packages/core/src/components/css-grid/css-grid.tsx
index de0e6b72ed6..12dc01ae5b7 100644
--- a/packages/core/src/components/css-grid/css-grid.tsx
+++ b/packages/core/src/components/css-grid/css-grid.tsx
@@ -37,9 +37,9 @@ export class CssGrid {
   /**
    * Define css grid template
    */
-  @Prop() templates: Partial<Record<CssGridTemplateType, string[][]>>;
+  @Prop() templates?: Partial<Record<CssGridTemplateType, string[][]>>;
 
-  @State() currentTemplate: string[][];
+  @State() currentTemplate?: string[][];
 
   private disposeMediaQueryListener: ((event: MediaQueryListEvent) => void)[] =
     [];
@@ -77,7 +77,10 @@ export class CssGrid {
     });
   }
 
-  private findNextTemplate(type: CssGridTemplateType) {
+  private findNextTemplate(type: CssGridTemplateType): string[][] {
+    if (!this.templates) {
+      return [];
+    }
     const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);
     const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];
     if (!nextTemplate) {
@@ -87,6 +90,9 @@ export class CssGrid {
   }
 
   private applyTemplate() {
+    if (!this.templates) {
+      return;
+    }
     let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);
 
     if (!active) {
@@ -103,8 +109,8 @@ export class CssGrid {
   }
 
   render() {
-    const style = {};
-    if (this.currentTemplate?.length !== 0) {
+    const style: Record<string, string> = {};
+    if (this.currentTemplate && this.currentTemplate.length !== 0) {
       style['grid-template-areas'] = templateBuilder(this.currentTemplate);
     }
     return (
diff --git a/packages/core/src/components/dropdown-header/dropdown-header.tsx b/packages/core/src/components/dropdown-header/dropdown-header.tsx
index fce356f8a26..1076d6fe4a8 100644
--- a/packages/core/src/components/dropdown-header/dropdown-header.tsx
+++ b/packages/core/src/components/dropdown-header/dropdown-header.tsx
@@ -26,7 +26,7 @@ export class DropdownHeader {
   render() {
     return (
       <Host>
-        <ix-typography class={'category-text'} variant={'default-title'}>
+        <ix-typography class={'category-text'} format={'h5'}>
           {this.label}
         </ix-typography>
       </Host>
diff --git a/packages/core/src/components/empty-state/empty-state.tsx b/packages/core/src/components/empty-state/empty-state.tsx
index 38d76b4cbc4..ee840a7c735 100644
--- a/packages/core/src/components/empty-state/empty-state.tsx
+++ b/packages/core/src/components/empty-state/empty-state.tsx
@@ -66,9 +66,7 @@ export class EmptyState {
 
         <div class="emptyState__content">
           <div class="content__label">
-            <ix-typography
-              variant={this.layout === 'large' ? 'display-large' : 'default'}
-            >
+            <ix-typography format={this.layout === 'large' ? 'h3' : 'body'}>
               {this.header}
             </ix-typography>
 
diff --git a/packages/core/src/components/menu-about-news/menu-about-news.tsx b/packages/core/src/components/menu-about-news/menu-about-news.tsx
index ef9dd6236d8..29b58097d0e 100644
--- a/packages/core/src/components/menu-about-news/menu-about-news.tsx
+++ b/packages/core/src/components/menu-about-news/menu-about-news.tsx
@@ -75,7 +75,7 @@ export class MenuAboutNews {
         </div>
 
         <div class="cui-popover-news-header">
-          <ix-typography variant="default-title-single">
+          <ix-typography format="label" bold>
             {this.label}
           </ix-typography>
         </div>
diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx
index f45ec845f18..18a908b5ae0 100644
--- a/packages/core/src/components/menu-category/menu-category.tsx
+++ b/packages/core/src/components/menu-category/menu-category.tsx
@@ -274,7 +274,7 @@ export class MenuCategory {
           }}
         >
           <ix-dropdown-item class={'category-dropdown-header'}>
-            <ix-typography variant="default-title-single" color="std">
+            <ix-typography format="label" bold color="std">
               {this.label}
             </ix-typography>
           </ix-dropdown-item>
diff --git a/packages/core/src/components/modal-header/modal-header.tsx b/packages/core/src/components/modal-header/modal-header.tsx
index ee9bd2ddd37..d2fab6910f6 100644
--- a/packages/core/src/components/modal-header/modal-header.tsx
+++ b/packages/core/src/components/modal-header/modal-header.tsx
@@ -91,7 +91,7 @@ export class ModalHeader {
             color={this.iconColor}
           ></ix-icon>
         ) : null}
-        <ix-typography variant={'default-title'}>
+        <ix-typography format="h5">
           <slot></slot>
         </ix-typography>
         {!this.hideClose ? (
diff --git a/packages/core/src/components/pagination/pagination.tsx b/packages/core/src/components/pagination/pagination.tsx
index 86f0cf59e6c..f1bda781559 100644
--- a/packages/core/src/components/pagination/pagination.tsx
+++ b/packages/core/src/components/pagination/pagination.tsx
@@ -219,7 +219,7 @@ export class Pagination {
 
         {this.advanced ? (
           <div class="advanced-pagination">
-            <ix-typography variant="default">{this.i18nPage}</ix-typography>
+            <ix-typography format="body">{this.i18nPage}</ix-typography>
             <input
               class="form-control page-selection"
               type="number"
@@ -232,7 +232,7 @@ export class Pagination {
               }}
             />
             <span class="total-count">
-              <ix-typography variant="default">
+              <ix-typography format="body">
                 {this.i18nOf} {this.count}
               </ix-typography>
             </span>
@@ -250,7 +250,7 @@ export class Pagination {
 
         {this.advanced && this.showItemCount ? (
           <span class="item-count">
-            <ix-typography variant="default">{this.i18nItems}</ix-typography>
+            <ix-typography format="body">{this.i18nItems}</ix-typography>
             <ix-select
               hideListHeader
               i18nPlaceholder=""
diff --git a/packages/core/src/components/time-picker/time-picker.tsx b/packages/core/src/components/time-picker/time-picker.tsx
index 78c1d24633d..58330a3011b 100644
--- a/packages/core/src/components/time-picker/time-picker.tsx
+++ b/packages/core/src/components/time-picker/time-picker.tsx
@@ -247,9 +247,7 @@ export class TimePicker {
           corners={this.corners}
         >
           <div class="header" slot="header">
-            <ix-typography variant="default-title">
-              {this.textTime || 'Time'}
-            </ix-typography>
+            <ix-typography format="h5">{this.textTime || 'Time'}</ix-typography>
           </div>
           <div class="clock">
             {timepickerInformation.map((descriptor, index: number) => (
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
index 6e59ee5849b..7c37cf4ad46 100644
--- a/packages/core/src/components/tooltip/tooltip.tsx
+++ b/packages/core/src/components/tooltip/tooltip.tsx
@@ -35,7 +35,8 @@ type ArrowPosition = {
   right?: string;
 };
 
-const numberToPixel = (value: number) => (value != null ? `${value}px` : '');
+const numberToPixel = (value?: number | null) =>
+  value != null ? `${value}px` : '';
 
 /**
  * @slot title-icon - Icon of tooltip title
@@ -91,7 +92,7 @@ export class Tooltip implements IxOverlayComponent {
   private disposeListener?: () => void;
 
   private get arrowElement(): HTMLElement {
-    return this.hostElement.shadowRoot.querySelector('.arrow');
+    return this.hostElement.shadowRoot!.querySelector('.arrow')!;
   }
 
   private destroyAutoUpdate() {
@@ -133,8 +134,8 @@ export class Tooltip implements IxOverlayComponent {
   private computeArrowPosition({
     placement,
     middlewareData,
-  }: ComputePositionReturn): ArrowPosition {
-    let { x, y } = middlewareData.arrow;
+  }: ComputePositionReturn): ArrowPosition | undefined {
+    let { x, y } = middlewareData.arrow!;
     const resetPosition = {
       top: 'unset',
       right: 'unset',
@@ -380,7 +381,7 @@ export class Tooltip implements IxOverlayComponent {
         <div class="tooltip-container">
           <div class={'tooltip-title'}>
             <slot name="title-icon"></slot>
-            <ix-typography variant="default-title">
+            <ix-typography format="h5">
               {this.titleContent}
               <slot name="title-content"></slot>
             </ix-typography>
diff --git a/packages/core/src/components/typography/test/ix-typography.spec.tsx b/packages/core/src/components/typography/test/ix-typography.spec.tsx
index 8d69dde3114..f2c7e5c263b 100644
--- a/packages/core/src/components/typography/test/ix-typography.spec.tsx
+++ b/packages/core/src/components/typography/test/ix-typography.spec.tsx
@@ -61,19 +61,4 @@ describe('ix-typography', () => {
       </ix-typography>
     `);
   });
-
-  it('should provide fallback', async () => {
-    const page = await newSpecPage({
-      components: [IxTypography],
-      html: `<ix-typography variant="h2">Example content</ix-typography>`,
-    });
-    expect(page.root).toEqualHtml(`
-      <ix-typography variant="h2" class="text-h2">
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-        Example content
-      </ix-typography>
-    `);
-  });
 });
diff --git a/packages/core/src/components/typography/type-mapping.ts b/packages/core/src/components/typography/type-mapping.ts
index a78c7b6c1b1..c6db11cac5c 100644
--- a/packages/core/src/components/typography/type-mapping.ts
+++ b/packages/core/src/components/typography/type-mapping.ts
@@ -20,6 +20,9 @@ export type TypographyVariants =
   | 'h2'
   | 'display-large';
 
+/**
+ * @deprecated Will be removed with 3.0.0
+ */
 export const VariantsMapping: Record<TypographyVariants, string> = {
   'x-small': 'text-xs',
   small: 'text-s',
diff --git a/packages/core/src/components/typography/typography.tsx b/packages/core/src/components/typography/typography.tsx
index a759f8ce565..58c616ad19b 100644
--- a/packages/core/src/components/typography/typography.tsx
+++ b/packages/core/src/components/typography/typography.tsx
@@ -8,7 +8,6 @@
  */
 
 import { Component, h, Host, Prop } from '@stencil/core';
-import { VariantsMapping } from './type-mapping';
 
 export type TypographyVariants =
   | 'x-small'
@@ -67,18 +66,10 @@ export type TextDecoration = 'none' | 'underline' | 'line-through';
   shadow: true,
 })
 export class IxTypography {
-  /**
-   * Font variant based on theme variables
-   *
-   * @deprecated Use `format` property
-   * @internal
-   */
-  @Prop() variant: TypographyVariants;
-
   /**
    * Text format
    */
-  @Prop() format: TypographyFormat;
+  @Prop() format?: TypographyFormat;
 
   /**
    * Text color based on theme variables
@@ -86,12 +77,12 @@ export class IxTypography {
    * @deprecated since 2.1.0 use property `text-color`
    */
   // eslint-disable-next-line @stencil-community/reserved-member-names
-  @Prop() color: TypographyColors;
+  @Prop() color?: TypographyColors;
 
   /**
    * Text color based on theme variables
    */
-  @Prop() textColor: TypographyColors;
+  @Prop() textColor?: TypographyColors;
 
   /**
    * Display text bold
@@ -104,13 +95,8 @@ export class IxTypography {
   @Prop() textDecoration: TextDecoration = 'none';
 
   render() {
-    let typographyClass = {};
-
-    if (this.variant) {
-      typographyClass[VariantsMapping[this.variant ?? 'default']] = true;
-    } else {
-      typographyClass[`typography-${this.format ?? 'body'}`] = true;
-    }
+    let typographyClass: Record<string, boolean> = {};
+    typographyClass[`typography-${this.format ?? 'body'}`] = true;
 
     if (this.textDecoration !== 'none') {
       typographyClass[`typography-decoration-${this.textDecoration}`] = true;
diff --git a/packages/core/src/components/utils/context.ts b/packages/core/src/components/utils/context.ts
index 29c1cc9c762..30fd36b81b7 100644
--- a/packages/core/src/components/utils/context.ts
+++ b/packages/core/src/components/utils/context.ts
@@ -97,7 +97,7 @@ export function useContextConsumer<
   ) => void,
   subscribe?: boolean
 ): ContextConsumerSubscription {
-  let _unsubscribe: () => void;
+  let _unsubscribe: (() => void) | undefined;
   hostElement.dispatchEvent(
     new ContextEvent(
       context,
@@ -111,7 +111,9 @@ export function useContextConsumer<
 
   return {
     unsubscribe: () => {
-      _unsubscribe();
+      if (_unsubscribe) {
+        _unsubscribe();
+      }
     },
   };
 }
@@ -133,27 +135,25 @@ export function useContextProvider<
 
   const requests = new Set<ContextEvent<UnknownContext>>();
 
-  hostElement.addEventListener(
-    'context-request',
-    (requestContextEvent: ContextEvent<C>) => {
-      if (requestContextEvent?.context.name !== context.name) {
-        return;
-      }
+  hostElement.addEventListener('context-request', (event: Event) => {
+    const requestContextEvent = event as ContextEvent<C>;
+    if (requestContextEvent?.context.name !== context.name) {
+      return;
+    }
 
-      requestContextEvent.stopPropagation();
+    requestContextEvent.stopPropagation();
 
-      if (requestContextEvent.subscribe) {
-        requests.add(requestContextEvent);
-      }
-      requestContext.emit(requestContextEvent);
+    if (requestContextEvent.subscribe) {
+      requests.add(requestContextEvent);
+    }
+    requestContext.emit(requestContextEvent);
 
-      if (contextPayload) {
-        requestContextEvent.callback(contextPayload, () => {
-          requests.delete(requestContextEvent);
-        });
-      }
+    if (contextPayload) {
+      requestContextEvent.callback(contextPayload, () => {
+        requests.delete(requestContextEvent);
+      });
     }
-  );
+  });
 
   updateContext.on((context: ContextType<C>) => {
     requests.forEach((r) =>
diff --git a/packages/core/src/components/utils/listener.ts b/packages/core/src/components/utils/listener.ts
index 37325ebfd45..0314abeeb77 100644
--- a/packages/core/src/components/utils/listener.ts
+++ b/packages/core/src/components/utils/listener.ts
@@ -8,18 +8,29 @@
  */
 
 import { getElement } from '@stencil/core';
+import { HTMLStencilElement } from '@stencil/core/internal';
 
 export type ListenerOptions = {
   target?: 'window';
   defaultEnabled?: boolean;
 };
 
+type HostListener = {
+  on: (onEventCallback: any) => void;
+  isEnabled: boolean | undefined;
+  enable: (state: boolean) => void;
+  destroy: () => void;
+};
+
 const defaultOptions: ListenerOptions = {
   target: 'window',
   defaultEnabled: true,
 };
 
-export function createListener(event: string, options: ListenerOptions = {}) {
+export function createListener(
+  event: string,
+  options: ListenerOptions = {}
+): HostListener {
   const opts = {
     ...defaultOptions,
     ...options,
@@ -52,10 +63,14 @@ export function createListener(event: string, options: ListenerOptions = {}) {
     },
   };
 
-  resultObject.enable(opts.defaultEnabled);
+  resultObject.enable(!!opts.defaultEnabled);
   return resultObject;
 }
 
+type HTMLStencilElementWithListener = HTMLStencilElement & {
+  [K in `__ix__${string}`]?: HostListener | null;
+};
+
 export function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {
   return (proto: any, methodName: string) => {
     const { componentWillLoad, componentWillRender, disconnectedCallback } =
@@ -63,7 +78,7 @@ export function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {
 
     if (fnExp) {
       proto.componentWillRender = function () {
-        const host = getElement(this);
+        const host = getElement(this) as HTMLStencilElementWithListener;
         host[`__ix__${methodName}`]?.enable(fnExp(this));
         return componentWillRender && componentWillRender.call(this);
       };
@@ -71,7 +86,7 @@ export function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {
 
     proto.componentWillLoad = function () {
       const listener = createListener(event);
-      const host = getElement(this);
+      const host = getElement(this) as HTMLStencilElementWithListener;
       const method = this[methodName];
 
       host[`__ix__${methodName}`] = listener;
@@ -81,7 +96,7 @@ export function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {
     };
 
     proto.disconnectedCallback = function () {
-      const host = getElement(this);
+      const host = getElement(this) as HTMLStencilElementWithListener;
 
       if (host && host[`__ix__${methodName}`]) {
         host[`__ix__${methodName}`]?.destroy();
diff --git a/packages/core/src/components/utils/theme-switcher.ts b/packages/core/src/components/utils/theme-switcher.ts
index ea494982d6d..26e6fe3f6b1 100644
--- a/packages/core/src/components/utils/theme-switcher.ts
+++ b/packages/core/src/components/utils/theme-switcher.ts
@@ -8,7 +8,7 @@ class ThemeSwitcher {
   readonly suffixDark = '-dark';
   readonly defaultTheme = 'theme-classic-dark';
 
-  mutationObserver: MutationObserver;
+  mutationObserver?: MutationObserver;
   _themeChanged = new TypedEvent<string>();
 
   public get themeChanged() {
@@ -115,6 +115,8 @@ class ThemeSwitcher {
     if (themeName.endsWith(this.suffixLight)) {
       return themeName.replace(/-light$/g, this.suffixDark);
     }
+
+    return '';
   }
 
   private handleMutations(mutations: MutationRecord[]) {
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-dark-linux.png
index 15013b02610..c0c017b76db 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-light-linux.png
index 34918206930..1196b2a6120 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-lg-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-dark-linux.png
index 9e5386e3018..6034c519d70 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-light-linux.png
index 0a2564cdb79..5d1d6c41937 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/MenuSidebar-md-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-dark-linux.png
index 1defa5b3972..67cbf6b9764 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-light-linux.png
index a4fa6847248..635ea6ec475 100644
Binary files a/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/application/application.e2e.ts-snapshots/application-switch-modal-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-dark-linux.png
index 0ba8438960f..7f48ee5afb5 100644
Binary files a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-light-linux.png
index 681257a7423..092f39453aa 100644
Binary files a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-dark-linux.png
index dd58dceff29..0d05c3fc91b 100644
Binary files a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-light-linux.png
index 4a5e4402fdd..2c2304065bf 100644
Binary files a/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/content-header/content-header.e2e.ts-snapshots/content-header-secondary-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-dark-linux.png
index 45f308cf639..97ac6e3a14c 100644
Binary files a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-light-linux.png
index 0649af4cbb1..c2ac88f482b 100644
Binary files a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-dark-linux.png
index 9e48e174fd0..b6c3e631470 100644
Binary files a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-light-linux.png
index 524247ebea7..56b4e9eb86d 100644
Binary files a/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/empty-state/empty-state.e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png
index 40ce9459426..5beaeb26c11 100644
Binary files a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png
index 48dff127269..8ec1baf4e3d 100644
Binary files a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-dark-linux.png
index 111f9fe893d..2035b0e0209 100644
Binary files a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-light-linux.png
index 5cbae3bd534..1c2e79f570d 100644
Binary files a/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/menu-about-news/menu-about-news.e2e.ts-snapshots/menu-about-news-mobile-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-dark-linux.png
index c3a7e05e150..75a4722e77f 100644
Binary files a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-light-linux.png
index 97146007faa..a806f46c94c 100644
Binary files a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-dark-linux.png
index 47d3b6012be..7293c0be7ac 100644
Binary files a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-light-linux.png
index c341a8f2338..0f6c4785e56 100644
Binary files a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-icon-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png
index 20079756abd..0f7ca3f20e6 100644
Binary files a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png
index b26a361d327..af234cc56f8 100644
Binary files a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-dark-linux.png
index f1f84c0be37..46698b05107 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-light-linux.png
index 3aa1f358f2b..799b42fe763 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-bottom-with-delay-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-dark-linux.png
index 59bcdeb1240..09f2caa61ff 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-light-linux.png
index 15bf2a9ef13..39008f3aa8e 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-left-with-delay-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-dark-linux.png
index 962d465cd1b..1c0047d9837 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-light-linux.png
index d8849c20a36..0bfd8ba3bf1 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-right-with-delay-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-dark-linux.png
index 057f202945d..6932a4e3856 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-light-linux.png
index a14d23275f4..e46effaddef 100644
Binary files a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-delay-tooltip-placement-top-with-delay-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index e1a95c021f1..3c628a10bec 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -19,6 +19,7 @@
       "@utils/test": ["src/tests/utils/test"]
     }
     // Strict check uncomment to check for strict
+    // "strict": true,
     // "strictNullChecks": true,
     // "strictPropertyInitialization": true,
     // "noImplicitAny": true
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
index 8f4f2bc4a94..1ea941c4d8b 100644
--- a/packages/vue/src/components.ts
+++ b/packages/vue/src/components.ts
@@ -979,7 +979,6 @@ export const IxTreeItem = /*@__PURE__*/ defineContainer<JSX.IxTreeItem>('ix-tree
 
 
 export const IxTypography = /*@__PURE__*/ defineContainer<JSX.IxTypography>('ix-typography', defineIxTypography, [
-  'variant',
   'format',
   'color',
   'textColor',