@marioschmidt/design-system-tokens 1.0.13 → 1.0.15

package/dist/scss/semantic/sportbild/breakpoints/breakpoint-sportbild-sm.scss

@@ -7,30 +7,30 @@ $semantic-border-border-radius-border-radius-sm: 4; // 4-4-4-4 – use for corne
 $semantic-border-border-radius-border-radius-md: 8; // 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements.
 $semantic-border-border-radius-border-radius-lg: 16; // 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces.
 $semantic-border-border-radius-border-radius-xl: 24; // 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components.
-$semantic-border-border-radius-border-radius-full: 9999; // creates fully rounded shapes, typically used for circular elements like avatars.
-$semantic-border-border-width-border-width-hairline: 0.33; // 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload.
+$semantic-border-border-radius-border-radius-full: 9999px; // creates fully rounded shapes, typically used for circular elements like avatars.
+$semantic-border-border-width-border-width-hairline: 0.33px; // 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload.
 $semantic-border-border-width-border-width-thin: 1; // 1-1-1-1 – use for subtle outlines and dividers
 $semantic-border-border-width-border-width-thick: 2; // 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active)
 // Common viewport width size based on the selected breakpoint.
 // Apply this token to the main frame of page layouts.
-$semantic-layout-canvas-width-size-web: 390;
+$semantic-layout-canvas-width-size-web: 390px;
 // Common viewport height size based on the selected mode.
 // Apply this token to the main frame of page layouts to simulate realistic vertical space.
-$semantic-layout-canvas-height-size-web: 844;
+$semantic-layout-canvas-height-size-web: 844px;
 // Common viewport width size based on the selected breakpoint.
 // Apply this token to the main frame of page layouts.
-$semantic-layout-canvas-width-size-app: 390;
+$semantic-layout-canvas-width-size-app: 390px;
 // Common viewport height size based on the selected mode.
 // Apply this token to the main frame of page layouts to simulate realistic vertical space.
-$semantic-layout-canvas-height-size-app: 844;
+$semantic-layout-canvas-height-size-app: 844px;
 // 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
 // Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports.
-$semantic-layout-breakpoints-breakpoint-min-width-size: 390;
+$semantic-layout-breakpoints-breakpoint-min-width-size: 390px;
 // 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
 // Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports.
-$semantic-layout-breakpoints-breakpoint-max-width-size: 599;
-$semantic-layout-content-width-content-max-width-medium: 700; // Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page.
-$semantic-layout-content-width-content-max-width-full: 1024; // Use for content containers that should fill the full width of the page
+$semantic-layout-breakpoints-breakpoint-max-width-size: 599px;
+$semantic-layout-content-width-content-max-width-medium: 700px; // Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page.
+$semantic-layout-content-width-content-max-width-full: 1024px; // Use for content containers that should fill the full width of the page
 $semantic-layout-grid-responsive-grid-space-resp-sm: 6; // 6-6-6-8 – use for side paddings and gutters in responsive layouts
 $semantic-layout-grid-responsive-grid-space-resp-base: 12; // 12-12-12-16 – use for side paddings and gutters in responsive layouts
 $semantic-layout-grid-responsive-grid-space-resp-lg: 24; // 24-24-32-32 – use for side paddings and gutters in responsive layouts
@@ -38,7 +38,7 @@ $semantic-layout-grid-responsive-grid-space-resp-xl: 48; // 48-48-64-64 – use
 $semantic-layout-grid-responsive-page-inline-space: 0; // 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints.
 $semantic-layout-grid-constant-grid-space-const-sm: 12; // 12-12-12-12 – use for fixed side paddings and gutters
 $semantic-layout-grid-constant-grid-space-const-lg: 16; // 16-16-16-16 – use for fixed side paddings and gutters
-$semantic-layout-grid-layout-guide-layout-guide-grid-colums: 4; // Used to set the column count in Figma Layout guide Grids
+$semantic-layout-grid-layout-guide-layout-guide-grid-colums: 4px; // Used to set the column count in Figma Layout guide Grids
 $semantic-layout-section-section-space-sm: 24; // 24-24-36-36 – Use for vertical spacing between subsections in a layout
 $semantic-layout-section-section-space-base: 36; // 36-36-48-48 – Use for vertical spacing between sections in a layout.
 $semantic-layout-section-section-space-lg: 72; // 72-72-96-96 – Use for vertical spacing between sections in a layout
@@ -210,7 +210,7 @@ $component-accordion-accordion-label-font-family: Inter; // This variable exists
 $component-avatar-avatar-article-size: 48; // This variable is used for setting the size of avatar images in article pages. It references the sizeConstMD variable from the "generic" semantic collection. Its value is 48 across devices.
 $component-avatar-avatar-author-page-size: 96; // 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages.
 $component-avatar-avatar-label-font-size: 13; // This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15
-$component-avatar-avatar-label-line-height: 21; // This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23
+$component-avatar-avatar-label-line-height: 21px; // This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23
 $component-avatar-avatar-font-family: Inter; // This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
 $component-avatar-avatar-lane-gap-space: 16; // This variable is used for setting the inline space between multiple avatars that are horizontally placed in a lane when an article has multiple authors. 16 - 16 - 24 - 24
 $component-avatar-app-avatar-font-family: AntennaCond; // This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review.
@@ -218,7 +218,7 @@ $component-article-article-kicker-font-size: 20; // This variable is used to con
 $component-article-article-headline-font-size: 42; // 40 - 40 - 72 - 100 - This variable uses the semantic variables headline2 for XS&SM, headline1 for MD&LG
 $component-article-article-image-caption-font-size: 13; // CSS --article-figure-meta-font-size 16-16-18-18
 $component-article-article-image-caption-line-height: 16.9; // this component level variable references the branding variables
-$component-article-article-meta-font-size: 12; // This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. 12 - 12 - 14 - 16
+$component-article-article-meta-font-size: 12px; // This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. 12 - 12 - 14 - 16
 $component-article-article-meta-font-family: AntennaCond; // This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. This variable references variables from the branding collection.
 $component-article-article-top-margin-space: 8; // 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box.
 $component-article-aricle-mobile1-col-grid-image-margin-space: 0;
@@ -226,7 +226,7 @@ $component-article-article-headings-stack-space: 12; // 12 | 12 | 12 | 16 - This
 $component-article-article-headings-inline-space: 16; // 16 | 16 | 72 | 16 - This variable is used for the left and right space within the article page headings container which holds the article page kicker, headline and subheadline.
 $component-article-article-content-stack-space: 16; // 16 - 16 - 24 - 32 - This variable creates the vertical spacing between different article body elements such as avatars, media players, corssheadings, paragraphs, field sets, images, tables, quotes, videos, social embeds, etc.
 $component-article-article-content-inline-space: 16; // 16 | 16 | 72 | 162 - This variable is used for making the left and right spacings around article content blocks. Current css has the article-body class assigned to a div and article body contains these horizontal padding values.
-$component-article-article-gallery-a-teaser-width: 145; // same as standard teaser width size variable
+$component-article-article-gallery-a-teaser-width: 145px; // same as standard teaser width size variable
 $component-article-article-image-source-font-size: 13; // NMT CSS --article-figure-meta-font-size
 $component-article-article-image-source-line-height: 17;
 $component-article-article-image-container-stack-space: 8;
@@ -234,27 +234,27 @@ $component-article-article-image-landscape-inline-space: 0;
 $component-article-article-image-portait-inline-space: 0;
 $component-article-article-infobox-inline-space: 16;
 $component-article-article-infobox-stack-space: 16;
-$component-audio-player-audio-player-font-size: 16; // This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18
-$component-badge-ad-label-badge-height-size: 30; // 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers.
+$component-audio-player-audio-player-font-size: 16px; // This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18
+$component-badge-ad-label-badge-height-size: 30px; // 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers.
 $component-badge-badges-inner-stack-space: 2; // This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of.
 $component-badge-badges-inner-inline-space: 4; // This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of.
 $component-breadcrumb-breadcrumb-font-family: Inter;
 $component-breadcrumb-breadcrumb-font-size: 14; // 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
 $component-breadcrumb-breadcrumb-line-height: 14; // 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
-$component-breadcrumb-breadcrumb-arrow-left-inline-space1: 3;
-$component-breadcrumb-breadcrumb-arrow-right-inline-space2: 5;
+$component-breadcrumb-breadcrumb-arrow-left-inline-space1: 3px;
+$component-breadcrumb-breadcrumb-arrow-right-inline-space2: 5px;
 $component-breadcrumb-breadcrumb-inline-space: 12;
 $component-breadcrumb-breadcrumb-font-weight: 400;
-$component-breadcrumb-breadcrumb-stack-space: 14;
+$component-breadcrumb-breadcrumb-stack-space: 14px;
 $component-breaking-news-breaking-news-container-height-size: 56;
 $component-breaking-news-breaking-news-badge-inline-space: 6;
 $component-breaking-news-breaking-news-badge-titels-stack-space: 0;
-$component-breaking-news-breaking-news-badge-upper-title-font-size: 13;
-$component-breaking-news-breaking-news-badge-upper-title-line-height: 13;
-$component-breaking-news-breaking-news-badge-lower-title-font-size: 23;
-$component-breaking-news-breaking-news-badge-lower-title-line-height: 21;
-$component-breaking-news-breaking-news-scrolling-text-font-size: 21;
-$component-breaking-news-breaking-news-scrolling-text-line-height: 24;
+$component-breaking-news-breaking-news-badge-upper-title-font-size: 13px;
+$component-breaking-news-breaking-news-badge-upper-title-line-height: 13px;
+$component-breaking-news-breaking-news-badge-lower-title-font-size: 23px;
+$component-breaking-news-breaking-news-badge-lower-title-line-height: 21px;
+$component-breaking-news-breaking-news-scrolling-text-font-size: 21px;
+$component-breaking-news-breaking-news-scrolling-text-line-height: 24px;
 $component-button-button-label-font-size: 15;
 $component-button-button-label-line-height: 15;
 $component-button-button-content-gap-space: 6;
@@ -262,40 +262,40 @@ $component-button-button-inline-space: 16;
 $component-button-button-stack-space: 6;
 $component-button-button-border-width-size: 2;
 $component-button-button-content-min-height-size: 24; // This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active.
-$component-button-partner-link-button-label-font-size: 16; // Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18
+$component-button-partner-link-button-label-font-size: 16px; // Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18
 $component-button-partner-link-button-inline-space: 8;
 $component-button-partner-link-button-label-height-size: 48;
 $component-button-button-border-radius: 8;
-$component-cards-search-result-card-image-width-size: 216;
-$component-cards-search-result-card-image-height-size-stacked: 189;
-$component-cards-newsticker-image-card-width-size: 206;
+$component-cards-search-result-card-image-width-size: 216px;
+$component-cards-search-result-card-image-height-size-stacked: 189px;
+$component-cards-newsticker-image-card-width-size: 206px;
 $component-carousel-gallery-teaser-title-bottom-space: 28; // This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
 $component-carousel-gallery-teaser-app-gap-space: 0; // This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
-$component-carousel-app-epaper-carousel-item-default-width: 144;
-$component-carousel-app-epaper-carousel-item-focus-width: 182;
-$component-carousel-app-epaper-carouse-beilage-item-width: 110;
-$component-carousel-standard-teaser-gallery-teaser-width-web: 145;
-$component-carousel-standard-teaser-gallery-teaser-width-app: 280;
+$component-carousel-app-epaper-carousel-item-default-width: 144px;
+$component-carousel-app-epaper-carousel-item-focus-width: 182px;
+$component-carousel-app-epaper-carouse-beilage-item-width: 110px;
+$component-carousel-standard-teaser-gallery-teaser-width-web: 145px;
+$component-carousel-standard-teaser-gallery-teaser-width-app: 280px;
 $component-chips-chips-font-size: 16; // This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18
 $component-chips-chips-inline-space: 12;
 $component-chips-chips-stack-space: 8;
-$component-datepicker-datepicker-item-day-width-size: 44;
-$component-datepicker-datepicker-item-year-width-size: 77;
-$component-datepicker-datepicker-item-height-size: 44;
-$component-drawers-mobile-menu-drawer-stack-space: 20;
-$component-drawers-mobile-menu-drawer-left-inline-space: 20;
-$component-drawers-mobile-menu-drawer-right-inline-space: 16;
-$component-drawers-mobile-menu-drawer-max-width-size: 400;
+$component-datepicker-datepicker-item-day-width-size: 44px;
+$component-datepicker-datepicker-item-year-width-size: 77px;
+$component-datepicker-datepicker-item-height-size: 44px;
+$component-drawers-mobile-menu-drawer-stack-space: 20px;
+$component-drawers-mobile-menu-drawer-left-inline-space: 20px;
+$component-drawers-mobile-menu-drawer-right-inline-space: 16px;
+$component-drawers-mobile-menu-drawer-max-width-size: 400px;
 $component-dropdown-drop-down-item-stack-space: 8;
 $component-dropdown-drop-down-item-inline-space: 12;
 $component-dropdown-drop-down-border-radius: 4;
 $component-footer-footer-font-family: Inter;
-$component-footer-footer-font-size: 11; // This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes.
-$component-footer-footer-line-height: 14;
-$component-footer-footer-font-size-user-offer-pages: 18;
-$component-footer-footer-line-height-user-offer-pages: 26;
+$component-footer-footer-font-size: 11px; // This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes.
+$component-footer-footer-line-height: 14px;
+$component-footer-footer-font-size-user-offer-pages: 18px;
+$component-footer-footer-line-height-user-offer-pages: 26px;
 $component-icon-icon-size: 24;
-$component-icon-icon-size-embedd-media: 40;
+$component-icon-icon-size-embedd-media: 40px;
 $component-info-element-info-element-teaser-badge-margin-space: 4;
 $component-info-element-info-element-teaser-image-height-size: 80;
 $component-info-element-info-element-teaser-image-width-size: 80;
@@ -309,31 +309,31 @@ $component-inputfield-input-field-i-message-inline-space: 16;
 $component-inputfield-input-field-mini-label-inline-space: 4;
 $component-inputfield-input-field-height-size: 36;
 $component-inputfield-hey-input-container-inline-space: 8;
-$component-liveticker-live-ticker-app-card-height-size: 96;
-$component-liveticker-live-ticker-app-card-width-size: 250;
+$component-liveticker-live-ticker-app-card-height-size: 96px;
+$component-liveticker-live-ticker-app-card-width-size: 250px;
 $component-liveticker-time-stamp-font-family: Gotham XNarrow;
 $component-liveticker-live-tickerheadline-font-weight: 600;
-$component-liveticker-live-ticker-headlines-font-size: 22; // This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32
-$component-liveticker-live-ticker-time-stamp-font-size: 14; // This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16
+$component-liveticker-live-ticker-headlines-font-size: 22px; // This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32
+$component-liveticker-live-ticker-time-stamp-font-size: 14px; // This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16
 $component-liveticker-live-ticker-time-headline-stack-space: 4;
-$component-liveticker-live-ticker-slider-item-width-max-size: 257;
+$component-liveticker-live-ticker-slider-item-width-max-size: 257px;
 $component-mediaplayer-audio-player-header-stack-space: 56;
 $component-mediaplayer-podcast-play-button-size: 48;
-$component-mediaplayer-vid-player-bottom-bar-gap-space: 0;
+$component-mediaplayer-vid-player-bottom-bar-gap-space: 0px;
 $component-mediaplayer-video-time-badge-font-family: Inter;
 $component-mediaplayer-vid-player-control-button-size: 42;
 $component-mediaplayer-vid-player-control-button-icon-size-hover: 28;
-$component-mediaplayer-vid-player-timecode-font-size: 14;
-$component-mediaplayer-vid-player-timecode-container-min-width-size: 45;
-$component-mediaplayer-vid-player-progress-bar-container-height-size: 24;
-$component-mediaplayer-vid-player-unmute-button-width-size: 220;
+$component-mediaplayer-vid-player-timecode-font-size: 14px;
+$component-mediaplayer-vid-player-timecode-container-min-width-size: 45px;
+$component-mediaplayer-vid-player-progress-bar-container-height-size: 24px;
+$component-mediaplayer-vid-player-unmute-button-width-size: 220px;
 $component-menu-menu-link-lane-height-size: 48;
 $component-menu-menu-logo-default-size: 56;
 $component-menu-menu-logo-scrolled-size: 56;
 $component-menu-menu-utillink-item-height-size: 48;
 $component-menu-menu-item-util-font-size: 12;
 $component-menu-menu-item-font-size: 18; // This variable is used on the menu link lane and on the mobile side menu drawer.
-$component-menu-menu-special-navi-item-height-size: 48;
+$component-menu-menu-special-navi-item-height-size: 48px;
 $component-menu-menu-item-space: 8;
 $component-menu-menu-link-item-inline-space: 4;
 $component-menu-menu-item-util-stack-space: 10;
@@ -347,17 +347,17 @@ $component-menu-menu-utility-links-gap-space: 24;
 $component-menu-menu-utility-links-divider-height-size: 40;
 $component-menu-menu-shadow-visibility: rgba(0, 0, 0, 0.1); // This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 10 - 10 - 10 - 0
 $component-menu-hey-input-shadow-visibility: rgba(0, 0, 0, 0); // This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 0 - 0 - 0 - 10
-$component-menu-i-o-sapp-top-bar-height-size: 44;
-$component-menu-i-o-sapp-top-bar-left-inline-space: 12;
-$component-menu-i-o-sapp-top-bar-right-inline-space: 16;
+$component-menu-i-o-sapp-top-bar-height-size: 44px;
+$component-menu-i-o-sapp-top-bar-left-inline-space: 12px;
+$component-menu-i-o-sapp-top-bar-right-inline-space: 16px;
 $component-menu-app-topbar-title-font-size: 12;
 $component-menu-app-topbar-stage-title-height: 14;
-$component-newsticker-news-ticker-app-card-height-size: 116;
-$component-newsticker-news-ticker-app-card-width-size: 250;
+$component-newsticker-news-ticker-app-card-height-size: 116px;
+$component-newsticker-news-ticker-app-card-width-size: 250px;
 $component-newsticker-news-ticker-time-font-family: AntennaExtraCond;
 $component-newsticker-news-ticker-time-font-weight: 700;
-$component-newsticker-news-ticker-time-font-size: 16; // similar to kicker3 values - 16 - 16 - 16 - 18
-$component-newsticker-news-ticker-time-line-height: 20.8; // Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices.
+$component-newsticker-news-ticker-time-font-size: 16px; // similar to kicker3 values - 16 - 16 - 16 - 18
+$component-newsticker-news-ticker-time-line-height: 20.8px; // Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices.
 $component-newsticker-news-ticker-badges-inline-space: 8;
 $component-newsticker-news-ticker-entries-stack-space: 22;
 $component-newsticker-news-ticker-entries-left-inline-space: 22;
@@ -365,7 +365,7 @@ $component-newsticker-news-ticker-content-stack-space: 4;
 $component-newsticker-news-ticker-kicker-inner-inline-space: 4;
 $component-newsticker-news-ticker-kicker-inner-stack-space: 2;
 $component-newsticker-news-ticker-time-kicker-stack-space: 4;
-$component-newsticker-news-ticker-titles-inline-space: 18;
+$component-newsticker-news-ticker-titles-inline-space: 18px;
 $component-newsticker-news-ticker-skeleton-bottom-space: 64;
 $component-newsticker-news-ticker-red-dot-size: 12;
 $component-newsticker-news-ticker-line-inline-space: 6;
@@ -374,12 +374,12 @@ $component-pagination-gallery-pagination-container-web-inline-space: 8; // 8 - 8
 $component-pagination-gallery-pagination-container-app-inline-space: 12;
 $component-pagination-gallery-pagination-container-stack-space: 12; // 12 - 12 - 16 - 16 - this component level variable references the semantic
 $component-pagination-scroll-bar-thickness-size: 8;
-$component-paywall-paywall-card-max-width-size: 346;
+$component-paywall-paywall-card-max-width-size: 346px;
 $component-paywall-paywall-card-price-tag-font-size: 64; // This variable is used on the paywall card price tag. 64 constant
 $component-paywall-paywall-card-price-tag-line-height: 64;
 $component-paywall-paywall-card-price-note-font-size: 40; // This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40
 $component-paywall-paywall-card-price-note-line-height: 40;
-$component-paywall-paywall-container-gap-space: -48;
+$component-paywall-paywall-container-gap-space: -48px;
 $component-paywall-paywall-header-bottom-stack-space: 80;
 $component-quotes-quote-container-inline-space: 16;
 $component-quotes-quote-content-gap-space: 16;
@@ -389,29 +389,29 @@ $component-radio-buttons-radio-selector-size: 20;
 $component-radio-buttons-radio-selector-dot-active-size: 12;
 $component-search-search-result-badge-height-size: 18;
 $component-section-title-section-title-inner-stack-bottom-space: 12;
-$component-section-title-section-title-arrow-inline-space: 5; // This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title.
-$component-section-title-section-title-arrow-inline-space-active: 5; // This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values.
+$component-section-title-section-title-arrow-inline-space: 5px; // This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title.
+$component-section-title-section-title-arrow-inline-space-active: 5px; // This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values.
 $component-section-title-section-title-height-size: 32;
 $component-separators-separator-thickness-size: 2;
-$component-skeletons-headlines-skeleton-image-placeholder-max-width: 282;
+$component-skeletons-headlines-skeleton-image-placeholder-max-width: 282px;
 $component-skeletons-article-skeleton-image-inline-space: 12;
-$component-skeletons-article-skeleton-text-inline-space: 0;
-$component-skeletons-article-text-skeleton-height-size: 270;
+$component-skeletons-article-skeleton-text-inline-space: 0px;
+$component-skeletons-article-text-skeleton-height-size: 270px;
 $component-special-navi-special-navi-inline-space: 24;
 $component-sliders-slider-progress-bar-idle-height-size: 4;
 $component-sliders-slider-progress-bar-hover-height-size: 8;
 $component-sliders-slider-progress-inactive-height-size: 2;
 $component-sliders-vid-player-progress-bar-height-size: 12;
 $component-spinners-video-spinner-size: 40;
-$component-spinners-video-spinner-size0-5x: 20;
-$component-spinners-video-spinner-stroke-size: 2;
-$component-tabs-tab-label-font-size: 16; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
-$component-tabs-tab-label-font-size-line: 12; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
-$component-tabs-ios-tabbar-height-size: 49;
-$component-tabs-android-tabbar-height-size: 56;
-$component-tabs-apps-tabs-label-font-size: 12; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
-$component-tabs-apps-tabs-label-line-height: 14.4; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
-$component-tabs-top-bar-tab-item-height-size: 44;
+$component-spinners-video-spinner-size0-5x: 20px;
+$component-spinners-video-spinner-stroke-size: 2px;
+$component-tabs-tab-label-font-size: 16px; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+$component-tabs-tab-label-font-size-line: 12px; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+$component-tabs-ios-tabbar-height-size: 49px;
+$component-tabs-android-tabbar-height-size: 56px;
+$component-tabs-apps-tabs-label-font-size: 12px; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+$component-tabs-apps-tabs-label-line-height: 14.4px; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+$component-tabs-top-bar-tab-item-height-size: 44px;
 $component-table-table-column-width-size0-5x: 40;
 $component-table-table-column-width-size0-75x: 56;
 $component-table-table-column-width-size1x: 80;
@@ -419,14 +419,14 @@ $component-table-table-column-width-size1-5x: 120;
 $component-table-table-column-width-size2x: 140;
 $component-table-table-column-width-size2-5x: 180;
 $component-table-table-column-width-size3x: 200;
-$component-table-table-item-max-width-size: 224;
+$component-table-table-item-max-width-size: 224px;
 $component-teaser-a-teaser-a-teaser-kicker-font-size: 16; // 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable
 $component-teaser-a-teaser-a-teaser-kicker-line-height: 16;
 $component-teaser-a-teaser-a-teaser-headline-font-size: 30; // This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64
 $component-teaser-a-teaser-a-teaser-headline-line-height: 30;
 $component-teaser-a-teaser-a-teaser-title-inline-space: 12;
 $component-teaser-b-teaser-b-teaser-title-inline-space: 16;
-$component-teaser-bild-play-bild-play-teaser-width-size: 145;
+$component-teaser-bild-play-bild-play-teaser-width-size: 145px;
 $component-teaser-m-q-teaser-m-q-teaser-headline-font-size: 21; // XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40
 $component-teaser-m-q-teaser-m-q-teaser-headline-line-height: 23.1;
 $component-teaser-m-q-teaser-m-q-teaser-headline-font-weight: 700;
@@ -449,27 +449,27 @@ $component-teaser-teaser-title-inline-left-space: 12;
 $component-teaser-teaser-title-stack-space: 4;
 $component-teaser-teaser-title-gap-space: 4;
 $component-teaser-teaser-title-bottom-stack-space: 12;
-$component-toggle-switch-app-toggle-item-label-font-size: 14; // This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18
-$component-toggle-switch-app-toggle-item-label-line-height: 14.1; // This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2
-$component-video-video-badge-time-line-height: 21;
-$component-video-video-time-badge-font-size: 16; // 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos.
-$component-video-vertical-video-mock-headline-font-size: 22;
-$component-video-video-frame-inline-space: 0;
+$component-toggle-switch-app-toggle-item-label-font-size: 14px; // This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18
+$component-toggle-switch-app-toggle-item-label-line-height: 14.1px; // This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2
+$component-video-video-badge-time-line-height: 21px;
+$component-video-video-time-badge-font-size: 16px; // 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos.
+$component-video-vertical-video-mock-headline-font-size: 22px;
+$component-video-video-frame-inline-space: 0px;
 $component-video-video-red-play-icon-height-size: 10; // This variable is used for changing the red play icon inside the white square.
 $component-video-video-red-play-icon-width-size: 8;
-$component-video-video-skeleton-container-height: 180;
+$component-video-video-skeleton-container-height: 180px;
 $component-video-video-time-badge-size: 24; // 24 - 24 - 32 - 40 - This variable is used on horizontal video badges that contain a red play icon on top of a white square next to a timestamp.
 $component-video-video-time-badge-corner-size: 2; // This variable is used on video player badges that display a red play icon on top of a white square next to a time stamp. This variable references the borderRadiusXS. Constant value of 2 across device sizes.
-$component-video-video-ad-badge-font-size: 14; // 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter.
+$component-video-video-ad-badge-font-size: 14px; // 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter.
 $component-d-sys-docs-specs-font-family: Gotham; // This variable is used only for texts and labels that form part of this design system's documentation.
-$component-d-sys-docs-1column-mobile: 320; // This variable is used only for this design system's component tests.
-$component-d-sys-docs-d-sys-docs-width-size: 750;
+$component-d-sys-docs-1column-mobile: 320px; // This variable is used only for this design system's component tests.
+$component-d-sys-docs-d-sys-docs-width-size: 750px;
 $component-d-sys-docs-ds-caption-stack-space0-5x: 4; // This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8
 $component-d-sys-docs-ds-caption-stack-space1x: 8;
 $component-d-sys-docs-ds-main-container-space: 0; // This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68
 $component-d-sys-docs-foundations-banner-height-size: 80; // This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140
 $component-d-sys-docs-main-content-stage-size: 750; // This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024
-$component-d-sys-docs-thin-banner-vertical-height-size: 558; // This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186
+$component-d-sys-docs-thin-banner-vertical-height-size: 558px; // This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186
 $component-d-sys-docs-bild-design-frame-space: 12; // Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe
-$component-d-sys-docs-doc-header-height-size: 144; // This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180
+$component-d-sys-docs-doc-header-height-size: 144px; // This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180
 $breakpoint-name: sm;