@marioschmidt/design-system-tokens 1.0.39 → 1.0.41

package/dist/android/res/values/brands/sportbild/components/Pagination/pagination-color-dark.xml

@@ -6,7 +6,7 @@
 <resources>
   <color name="pagination-element-color-default">#8c9196</color>
   <color name="pagination-element-color-active">#f7f9fd</color>
-  <string name="gallery-pagination-element-active-opacity">100px</string><!-- Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. -->
+  <string name="gallery-pagination-element-active-opacity">100</string><!-- Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. -->
   <color name="scroll-bar-track-bg-color">#ffffff1a</color><!-- Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements. -->
   <color name="scroll-bar-thumb-bg-color">#8c9196</color><!-- Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space. -->
 </resources>

package/dist/android/res/values/brands/sportbild/components/Pagination/pagination-color-light.xml

@@ -6,7 +6,7 @@
 <resources>
   <color name="pagination-element-color-default">#ced4da</color>
   <color name="pagination-element-color-active">#174482</color>
-  <string name="gallery-pagination-element-active-opacity">100px</string><!-- Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. -->
+  <string name="gallery-pagination-element-active-opacity">100</string><!-- Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. -->
   <color name="scroll-bar-track-bg-color">#0000001a</color><!-- Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements. -->
   <color name="scroll-bar-thumb-bg-color">#8c9196</color><!-- Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space. -->
 </resources>

package/dist/android/res/values/brands/sportbild/components/Slider/slider-color-dark.xml

@@ -4,6 +4,6 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="slider-button-opacity">90px</string><!-- When users hover on gallery slider buttons the opacity changes to 90%. -->
+  <string name="slider-button-opacity">90</string><!-- When users hover on gallery slider buttons the opacity changes to 90%. -->
   <color name="slider-track-bg-color">#ffffff59</color><!-- This variable is used on audio player slider bars. It references a pure white with 35% opacity. -->
 </resources>

package/dist/android/res/values/brands/sportbild/components/Slider/slider-color-light.xml

@@ -4,6 +4,6 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="slider-button-opacity">90px</string><!-- When users hover on gallery slider buttons the opacity changes to 90%. -->
+  <string name="slider-button-opacity">90</string><!-- When users hover on gallery slider buttons the opacity changes to 90%. -->
   <color name="slider-track-bg-color">#ffffff59</color><!-- This variable is used on audio player slider bars. It references a pure white with 35% opacity. -->
 </resources>

package/dist/android/res/values/brands/sportbild/components/Teaser/teaser-color-dark.xml

@@ -4,7 +4,7 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="teaser-hover-opacity">80px</string><!-- When users hover over graphical teasers the image reduces opacity to 80%. -->
+  <string name="teaser-hover-opacity">80</string><!-- When users hover over graphical teasers the image reduces opacity to 80%. -->
   <color name="teaser-title-background-gradient-start">#0a2750b2</color>
   <color name="teaser-title-background-gradient-stop">#0a275000</color>
   <color name="teaser-title-background-gradient-start">#0a2750b2</color>

package/dist/android/res/values/brands/sportbild/components/Teaser/teaser-color-light.xml

@@ -4,7 +4,7 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="teaser-hover-opacity">80px</string><!-- When users hover over graphical teasers the image reduces opacity to 80%. -->
+  <string name="teaser-hover-opacity">80</string><!-- When users hover over graphical teasers the image reduces opacity to 80%. -->
   <color name="teaser-title-background-gradient-start">#0a2750b2</color>
   <color name="teaser-title-background-gradient-stop">#0a275000</color>
   <color name="teaser-title-background-gradient-start">#0a2750b2</color>

package/dist/android/res/values/brands/sportbild/components/Teaser/teaser-overrides.xml

@@ -4,23 +4,23 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="teaser-title-inline-space-lg">16px</string><!-- --teaser-title-padding-lg -->
-  <string name="teaser-title-inline-space-md">16px</string><!-- --teaser-title-padding-md -->
-  <string name="teaser-title-inline-space-sm">12px</string><!-- --teaser-title-padding-sm -->
-  <string name="teaser-title-inline-space-xs">12px</string><!-- --teaser-title-padding-xs -->
-  <string name="q-teaser-title-inline-space-lg">24px</string>
-  <string name="q-teaser-title-inline-space-md">24px</string>
-  <string name="q-teaser-title-inline-space-sm">12px</string>
-  <string name="q-teaser-title-inline-space-xs">12px</string>
-  <string name="a-teaser-title-inline-space-lg">16px</string>
-  <string name="a-teaser-title-inline-space-md">16px</string>
-  <string name="a-teaser-title-inline-space-xs">12px</string>
-  <string name="a-teaser-title-inline-space-sm">12px</string>
-  <string name="b-teaser-title-inline-space">16px</string>
-  <string name="2xa-teaser-title-inline-space">16px</string>
-  <string name="mini-qteaser-title-inline-space-md">12px</string>
-  <string name="mini-qteaser-title-inline-space-lg">12px</string>
-  <string name="mini-qteaser-title-inline-space-sm">12px</string>
-  <string name="mini-qteaser-title-inline-space-xs">12px</string>
-  <string name="super-ateaser-title-inline-space">24px</string>
+  <string name="teaser-title-inline-space-lg">16</string><!-- --teaser-title-padding-lg -->
+  <string name="teaser-title-inline-space-md">16</string><!-- --teaser-title-padding-md -->
+  <string name="teaser-title-inline-space-sm">12</string><!-- --teaser-title-padding-sm -->
+  <string name="teaser-title-inline-space-xs">12</string><!-- --teaser-title-padding-xs -->
+  <string name="q-teaser-title-inline-space-lg">24</string>
+  <string name="q-teaser-title-inline-space-md">24</string>
+  <string name="q-teaser-title-inline-space-sm">12</string>
+  <string name="q-teaser-title-inline-space-xs">12</string>
+  <string name="a-teaser-title-inline-space-lg">16</string>
+  <string name="a-teaser-title-inline-space-md">16</string>
+  <string name="a-teaser-title-inline-space-xs">12</string>
+  <string name="a-teaser-title-inline-space-sm">12</string>
+  <string name="b-teaser-title-inline-space">16</string>
+  <string name="2xa-teaser-title-inline-space">16</string>
+  <string name="mini-qteaser-title-inline-space-md">12</string>
+  <string name="mini-qteaser-title-inline-space-lg">12</string>
+  <string name="mini-qteaser-title-inline-space-sm">12</string>
+  <string name="mini-qteaser-title-inline-space-xs">12</string>
+  <string name="super-ateaser-title-inline-space">24</string>
 </resources>

package/dist/android/res/values/brands/sportbild/overrides/brandtokenmapping.xml

@@ -246,25 +246,25 @@
   <dimen name="app-top-bar-title-line-height-xs">14px</dimen>
   <dimen name="app-top-bar-title-line-height-sm">14px</dimen>
   <string name="menu-item-font-weight">Black Italic</string>
-  <string name="teaser-title-inline-space-lg">16px</string><!-- --teaser-title-padding-lg -->
-  <string name="teaser-title-inline-space-md">16px</string><!-- --teaser-title-padding-md -->
-  <string name="teaser-title-inline-space-sm">12px</string><!-- --teaser-title-padding-sm -->
-  <string name="teaser-title-inline-space-xs">12px</string><!-- --teaser-title-padding-xs -->
-  <string name="q-teaser-title-inline-space-lg">24px</string>
-  <string name="q-teaser-title-inline-space-md">24px</string>
-  <string name="q-teaser-title-inline-space-sm">12px</string>
-  <string name="q-teaser-title-inline-space-xs">12px</string>
-  <string name="a-teaser-title-inline-space-lg">16px</string>
-  <string name="a-teaser-title-inline-space-md">16px</string>
-  <string name="a-teaser-title-inline-space-xs">12px</string>
-  <string name="a-teaser-title-inline-space-sm">12px</string>
-  <string name="b-teaser-title-inline-space">16px</string>
-  <string name="2xa-teaser-title-inline-space">16px</string>
-  <string name="mini-qteaser-title-inline-space-md">12px</string>
-  <string name="mini-qteaser-title-inline-space-lg">12px</string>
-  <string name="mini-qteaser-title-inline-space-sm">12px</string>
-  <string name="mini-qteaser-title-inline-space-xs">12px</string>
-  <string name="super-ateaser-title-inline-space">24px</string>
+  <string name="teaser-title-inline-space-lg">16</string><!-- --teaser-title-padding-lg -->
+  <string name="teaser-title-inline-space-md">16</string><!-- --teaser-title-padding-md -->
+  <string name="teaser-title-inline-space-sm">12</string><!-- --teaser-title-padding-sm -->
+  <string name="teaser-title-inline-space-xs">12</string><!-- --teaser-title-padding-xs -->
+  <string name="q-teaser-title-inline-space-lg">24</string>
+  <string name="q-teaser-title-inline-space-md">24</string>
+  <string name="q-teaser-title-inline-space-sm">12</string>
+  <string name="q-teaser-title-inline-space-xs">12</string>
+  <string name="a-teaser-title-inline-space-lg">16</string>
+  <string name="a-teaser-title-inline-space-md">16</string>
+  <string name="a-teaser-title-inline-space-xs">12</string>
+  <string name="a-teaser-title-inline-space-sm">12</string>
+  <string name="b-teaser-title-inline-space">16</string>
+  <string name="2xa-teaser-title-inline-space">16</string>
+  <string name="mini-qteaser-title-inline-space-md">12</string>
+  <string name="mini-qteaser-title-inline-space-lg">12</string>
+  <string name="mini-qteaser-title-inline-space-sm">12</string>
+  <string name="mini-qteaser-title-inline-space-xs">12</string>
+  <string name="super-ateaser-title-inline-space">24</string>
   <string name="avatar-font-family">Inter</string><!-- current css 09-2025 --article-author-font // Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande -->
   <dimen name="avatar-font-size-sm">13px</dimen><!-- 09-2025 css using footnote var for font sizes SM & LG // Bild: 16; SpoBi: 13; Ads: 13 -->
   <dimen name="avatar-font-size-lg">15px</dimen><!-- 09-2025 css using footnote var for font sizes SM & LG // Bild: 18; SpoBi: 15; Ads: 15 -->

package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.xml

@@ -16,20 +16,14 @@
   <dimen name="section-space-lg">96px</dimen><!-- 72-72-96-96 – Use for vertical spacing between sections in a layout -->
   <dimen name="paragraph-end-space">32px</dimen><!-- 16-16-32-32 – Use for spacing after paragraphs in text content -->
   <dimen name="section-space-sm">36px</dimen><!-- 24-24-36-36 – Use for vertical spacing between subsections in a layout -->
-  <dimen name="breakpoint-min-width-size">1024px</dimen><!-- 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. -->
-  <dimen name="breakpoint-max-width-size">1024px</dimen><!-- 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. -->
-  <dimen name="canvas-height-size-web">768px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="breakpoint-min-width-size">1024px</dimen><!-- 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. -->
+  <dimen name="breakpoint-max-width-size">1024px</dimen><!-- 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. -->
+  <dimen name="canvas-height-size-web">768px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="content-max-width-medium">700px</dimen><!-- 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. -->
   <dimen name="content-max-width-full">1024px</dimen><!-- Use for content containers that should fill the full width of the page -->
-  <dimen name="canvas-width-size-web">1024px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-width-size-app">1194px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-height-size-app">834px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="canvas-width-size-web">1024px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-width-size-app">1194px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-height-size-app">834px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="title1-font-size">30px</dimen><!-- 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="title2-font-size">20px</dimen><!-- 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="display1-font-size">114px</dimen><!-- This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 -->

package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.xml

@@ -16,20 +16,14 @@
   <dimen name="section-space-lg">96px</dimen><!-- 72-72-96-96 – Use for vertical spacing between sections in a layout -->
   <dimen name="paragraph-end-space">32px</dimen><!-- 16-16-32-32 – Use for spacing after paragraphs in text content -->
   <dimen name="section-space-sm">36px</dimen><!-- 24-24-36-36 – Use for vertical spacing between subsections in a layout -->
-  <dimen name="breakpoint-min-width-size">600px</dimen><!-- 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. -->
-  <dimen name="breakpoint-max-width-size">1023px</dimen><!-- 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. -->
-  <dimen name="canvas-height-size-web">960px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="breakpoint-min-width-size">600px</dimen><!-- 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. -->
+  <dimen name="breakpoint-max-width-size">1023px</dimen><!-- 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. -->
+  <dimen name="canvas-height-size-web">960px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="content-max-width-medium">700px</dimen><!-- 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. -->
   <dimen name="content-max-width-full">1024px</dimen><!-- Use for content containers that should fill the full width of the page -->
-  <dimen name="canvas-width-size-web">600px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-width-size-app">834px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-height-size-app">1194px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="canvas-width-size-web">600px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-width-size-app">834px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-height-size-app">1194px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="title1-font-size">28px</dimen><!-- 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="title2-font-size">18px</dimen><!-- 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="display1-font-size">68px</dimen><!-- This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 -->

package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.xml

@@ -16,20 +16,14 @@
   <dimen name="section-space-lg">72px</dimen><!-- 72-72-96-96 – Use for vertical spacing between sections in a layout -->
   <dimen name="paragraph-end-space">16px</dimen><!-- 16-16-32-32 – Use for spacing after paragraphs in text content -->
   <dimen name="section-space-sm">24px</dimen><!-- 24-24-36-36 – Use for vertical spacing between subsections in a layout -->
-  <dimen name="breakpoint-min-width-size">390px</dimen><!-- 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. -->
-  <dimen name="breakpoint-max-width-size">599px</dimen><!-- 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. -->
-  <dimen name="canvas-height-size-web">844px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="breakpoint-min-width-size">390px</dimen><!-- 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. -->
+  <dimen name="breakpoint-max-width-size">599px</dimen><!-- 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. -->
+  <dimen name="canvas-height-size-web">844px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="content-max-width-medium">700px</dimen><!-- 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. -->
   <dimen name="content-max-width-full">1024px</dimen><!-- Use for content containers that should fill the full width of the page -->
-  <dimen name="canvas-width-size-web">390px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-width-size-app">390px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-height-size-app">844px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="canvas-width-size-web">390px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-width-size-app">390px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-height-size-app">844px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="title1-font-size">24px</dimen><!-- 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="title2-font-size">16px</dimen><!-- 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="display1-font-size">38px</dimen><!-- This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 -->

package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.xml

@@ -16,20 +16,14 @@
   <dimen name="section-space-lg">72px</dimen><!-- 72-72-96-96 – Use for vertical spacing between sections in a layout -->
   <dimen name="paragraph-end-space">16px</dimen><!-- 16-16-32-32 – Use for spacing after paragraphs in text content -->
   <dimen name="section-space-sm">24px</dimen><!-- 24-24-36-36 – Use for vertical spacing between subsections in a layout -->
-  <dimen name="breakpoint-min-width-size">320px</dimen><!-- 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. -->
-  <dimen name="breakpoint-max-width-size">389px</dimen><!-- 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. -->
-  <dimen name="canvas-height-size-web">568px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="breakpoint-min-width-size">320px</dimen><!-- 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. -->
+  <dimen name="breakpoint-max-width-size">389px</dimen><!-- 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. -->
+  <dimen name="canvas-height-size-web">568px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="content-max-width-medium">700px</dimen><!-- 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. -->
   <dimen name="content-max-width-full">1024px</dimen><!-- Use for content containers that should fill the full width of the page -->
-  <dimen name="canvas-width-size-web">320px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-width-size-app">320px</dimen><!-- Common viewport width size based on the selected breakpoint.
-Apply this token to the main frame of page layouts. -->
-  <dimen name="canvas-height-size-app">568px</dimen><!-- Common viewport height size based on the selected mode.
-Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
+  <dimen name="canvas-width-size-web">320px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-width-size-app">320px</dimen><!-- Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. -->
+  <dimen name="canvas-height-size-app">568px</dimen><!-- Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
   <dimen name="title1-font-size">24px</dimen><!-- 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="title2-font-size">16px</dimen><!-- 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
   <dimen name="display1-font-size">38px</dimen><!-- This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 -->

package/dist/android/res/values/brands/sportbild/semantic/color/colormode-dark.xml

@@ -4,90 +4,50 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <color name="text-color-accent-constant">#174482</color><!-- Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds).
-Behavior: Constant — maintains identical red tone across Light and Dark mode. -->
-  <color name="text-color-primary">#e9ecef</color><!-- Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces.
-Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds. -->
-  <color name="text-color-muted">#ced4da</color><!-- Muted text tone for subtle information, timestamps, or inactive text elements.
-Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode. -->
-  <color name="text-color-primary-inverse">#232629</color><!-- Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
-Behavior: Dynamic — alternates between light and dark mode. -->
-  <color name="text-color-primary-constant">#232629</color><!-- Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds).
-Behavior: Constant — same tone across Light and Dark mode. -->
-  <color name="text-color-success-constant">#006e3e</color><!-- Used for positive or success-related messages (e.g., “Saved”, “Success”, or confirmation text) on success surface colors.
-Behavior: Constant — green tone remains consistent across both modes. -->
-  <color name="text-color-primary-inverse-constant">#e9ecef</color><!-- Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
-Behavior: Constant — unchanged across modes. -->
-  <color name="text-color-secondary">#8c9196</color><!-- Secondary text color used for supportive information, subtitles, and less prominent text.
-Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta. -->
-  <color name="text-color-attention-high">#dd0000</color><!-- Used for strong warnings, errors, or destructive action labels.
-Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition. -->
+  <color name="text-color-accent-constant">#174482</color><!-- Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds). Behavior: Constant — maintains identical red tone across Light and Dark mode. -->
+  <color name="text-color-primary">#e9ecef</color><!-- Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces. Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds. -->
+  <color name="text-color-muted">#ced4da</color><!-- Muted text tone for subtle information, timestamps, or inactive text elements. Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode. -->
+  <color name="text-color-primary-inverse">#232629</color><!-- Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode. -->
+  <color name="text-color-primary-constant">#232629</color><!-- Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds). Behavior: Constant — same tone across Light and Dark mode. -->
+  <color name="text-color-success-constant">#006e3e</color><!-- Used for positive or success-related messages (e.g., “Saved”, “Success”, or confirmation text) on success surface colors. Behavior: Constant — green tone remains consistent across both modes. -->
+  <color name="text-color-primary-inverse-constant">#e9ecef</color><!-- Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards). Behavior: Constant — unchanged across modes. -->
+  <color name="text-color-secondary">#8c9196</color><!-- Secondary text color used for supportive information, subtitles, and less prominent text. Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta. -->
+  <color name="text-color-attention-high">#dd0000</color><!-- Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition. -->
   <color name="text-color-accent">#f7f9fd</color><!-- Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode. -->
-  <color name="text-color-attention-medium">#fd8227</color><!-- Represents medium attention states, often used in warnings or pending states.
-Behavior: Constant — same orange tone across Light and Dark mode. -->
-  <color name="text-color-on-dark-surface">#ffffff</color><!-- Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
-Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds. -->
-  <color name="surface-color-primary">#081828</color><!-- Primary surface color used for main backgrounds and large layout areas (e.g., page background, primary containers).
-Behavior: Dynamic — adapts between light and dark surface tokens to maintain legibility and hierarchy. -->
-  <color name="surface-color-secondary">#0a2750</color><!-- Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface. .
-Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast. -->
-  <color name="surface-color-primary-inverse">#ffffff</color><!-- Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections).
-Behavior: Dynamic — switches between dark and light values depending on mode. -->
-  <color name="surface-color-primary-constant-light">#ffffff</color><!-- A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts).
-Behavior: Constant — remains the same in both modes. -->
-  <color name="surface-color-primary-constant-dark">#081828</color><!-- A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
-Behavior: Constant — identical across Light and Dark mode. -->
+  <color name="text-color-attention-medium">#fd8227</color><!-- Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode. -->
+  <color name="text-color-on-dark-surface">#ffffff</color><!-- Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds. -->
+  <color name="surface-color-primary">#081828</color><!-- Primary surface color used for main backgrounds and large layout areas (e.g., page background, primary containers). Behavior: Dynamic — adapts between light and dark surface tokens to maintain legibility and hierarchy. -->
+  <color name="surface-color-secondary">#0a2750</color><!-- Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface.  Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast. -->
+  <color name="surface-color-primary-inverse">#ffffff</color><!-- Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections). Behavior: Dynamic — switches between dark and light values depending on mode. -->
+  <color name="surface-color-primary-constant-light">#ffffff</color><!-- A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts). Behavior: Constant — remains the same in both modes. -->
+  <color name="surface-color-primary-constant-dark">#081828</color><!-- A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts. Behavior: Constant — identical across Light and Dark mode. -->
   <color name="surface-color-quartenary">#4b525a</color><!-- HIghtest elevation surface color, typically used for grouping or background accents to differentiate themselves from all previous surface color options. Uses corresponding light/dark tones for consistent layering. -->
-  <color name="surface-color-success">#cef4e4</color><!-- Success-related background used for positive notifications, confirmation surfaces, or success banners.
-Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment. -->
-  <color name="surface-color-tertiary">#174482</color><!-- Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces.
-Behavior: Dynamic — switches between light and dark tertiary tones. -->
-  <color name="surface-color-tertiary-gradient-stop">#343c4100</color><!-- Represents tertiary-level gradient background.
-Currently used on skeletons. -->
-  <color name="surface-color-tertiary-inverse">#bdcadb</color><!-- Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards).
-Behavior: Dynamic — swaps values between modes for contrast preservation. -->
+  <color name="surface-color-success">#cef4e4</color><!-- Success-related background used for positive notifications, confirmation surfaces, or success banners. Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment. -->
+  <color name="surface-color-tertiary">#174482</color><!-- Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces. Behavior: Dynamic — switches between light and dark tertiary tones. -->
+  <color name="surface-color-tertiary-gradient-stop">#343c4100</color><!-- Represents tertiary-level gradient background. Currently used on skeletons. -->
+  <color name="surface-color-tertiary-inverse">#bdcadb</color><!-- Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards). Behavior: Dynamic — swaps values between modes for contrast preservation. -->
   <color name="surface-color-primary-gradient-stop">#23262900</color><!-- Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode. -->
-  <color name="surface-color-secondary-gradient-stop">#2c313800</color><!-- Used for secondary surface gradients or subtle depth layers across backgrounds.
-Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions. -->
-  <color name="surface-color-quartenary-inverse">#ced4da</color><!-- Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
-Behavior: Dynamic — inverts between dark and light tones depending on mode. -->
-  <color name="kicker-text-color-on-surface">#8c9196</color><!-- Used for kicker text and category labels placed directly on standard surface backgrounds.
-Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes. -->
-  <color name="headline-color-primary">#ffffff</color><!-- Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition.
-Behavior: Dynamic — dark text in Light mode, light text in Dark mode. -->
-  <color name="headline-color-white-const">#ffffff</color><!-- Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes.
-Behavior: Constant — remains white in both Light and Dark mode. -->
-  <color name="kicker-text-color-on-red">#ffffff</color><!-- Specialized kicker color for use on red or brand-colored backgrounds (e.g., red kicker bg within teaser cards).
-Behavior: Constant — remains consistent across light and darkmode. -->
-  <color name="kicker-text-color-on-dark-bg">#ffffffcc</color><!-- Applied to kicker or meta text on dark colored backgrounds to maintain high legibility.
-Behavior: Constant — always uses semi-transparent white for consistent readability. -->
-  <color name="kicker-text-color-on-bright-bg">#000000b2</color><!-- Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance.
-Behavior: Constant — remains semi-transparent black across both modes. -->
-  <color name="color-secondary-active">#f2f4f5</color><!-- Defines the active state color for secondary actions (e.g., secondary buttons, tabs, or toggles).
-Behavior: Dynamic — light gray in Light mode and bright gray in Dark mode to maintain perceptual balance. -->
-  <color name="color-primary-active">#174482</color><!-- Used to represent the active or pressed state of primary actions such as tabs or links.
-Behavior: Constant — identical value across modes for consistent interaction feedback. -->
-  <color name="color-secondary-disabled">#4b525a</color><!-- Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
-Behavior: Dynamic — adapts neutral tones based on theme brightness. -->
-  <color name="color-primary-disabled">#343c41</color><!-- Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity.
-Behavior: Dynamic — slightly lighter in Light mode and darker in Dark mode to remain visually accessible. -->
-  <color name="color-secondary-active-inverse">#232629</color><!-- Inverse variant of the secondary active state, applied on dark backgrounds or inverse layouts.
-Behavior: Dynamic — switches between bright and dark tones depending on the background. -->
-  <color name="color-tertiary-active">#00c373</color><!-- Represents active or pressed states for tertiary elements (e.g., link highlights, icons, or subtle interactive surfaces).
-Behavior: Constant — uses the same green success tone across Light and Dark mode. -->
-  <color name="color-tertiary-disabled">#666b70</color><!-- Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
-Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency. -->
-  <color name="border-color-medium-contrast">#666b70</color><!-- Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast.
-Behavior: Dynamic — adjusts to maintain legibility in Light and Dark themes. -->
-  <color name="border-color-low-contrast">#4b525a</color><!-- Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers).
-Dynamic — light gray in Light mode, dark gray in Dark mode. -->
-  <color name="border-color-high-contrast">#ffffff</color><!-- High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones).
-Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. -->
+  <color name="surface-color-secondary-gradient-stop">#2c313800</color><!-- Used for secondary surface gradients or subtle depth layers across backgrounds. Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions. -->
+  <color name="surface-color-quartenary-inverse">#ced4da</color><!-- Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode. -->
+  <color name="kicker-text-color-on-surface">#8c9196</color><!-- Used for kicker text and category labels placed directly on standard surface backgrounds. Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes. -->
+  <color name="headline-color-primary">#ffffff</color><!-- Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition. Behavior: Dynamic — dark text in Light mode, light text in Dark mode. -->
+  <color name="headline-color-white-const">#ffffff</color><!-- Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes. Behavior: Constant — remains white in both Light and Dark mode. -->
+  <color name="kicker-text-color-on-red">#ffffff</color><!-- Specialized kicker color for use on red or brand-colored backgrounds (e.g., red kicker bg within teaser cards). Behavior: Constant — remains consistent across light and darkmode. -->
+  <color name="kicker-text-color-on-dark-bg">#ffffffcc</color><!-- Applied to kicker or meta text on dark colored backgrounds to maintain high legibility. Behavior: Constant — always uses semi-transparent white for consistent readability. -->
+  <color name="kicker-text-color-on-bright-bg">#000000b2</color><!-- Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance. Behavior: Constant — remains semi-transparent black across both modes. -->
+  <color name="color-secondary-active">#f2f4f5</color><!-- Defines the active state color for secondary actions (e.g., secondary buttons, tabs, or toggles). Behavior: Dynamic - light gray in Light mode and bright gray in Dark mode to maintain perceptual balance. -->
+  <color name="color-primary-active">#174482</color><!-- Used to represent the active or pressed state of primary actions such as tabs or links. Behavior: Constant - identical value across modes for consistent interaction feedback. -->
+  <color name="color-secondary-disabled">#4b525a</color><!-- Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility. Behavior: Dynamic - adapts neutral tones based on theme brightness. -->
+  <color name="color-primary-disabled">#343c41</color><!-- Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity. Behavior: Dynamic - slightly lighter in Light mode and darker in Dark mode to remain visually accessible. -->
+  <color name="color-secondary-active-inverse">#232629</color><!-- Inverse variant of the secondary active state, applied on dark backgrounds or inverse layouts. Behavior: Dynamic - switches between bright and dark tones depending on the background. -->
+  <color name="color-tertiary-active">#00c373</color><!-- Represents active or pressed states for tertiary elements (e.g., link highlights, icons, or subtle interactive surfaces). Behavior: Constant - uses the same green success tone across Light and Dark mode. -->
+  <color name="color-tertiary-disabled">#666b70</color><!-- Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention. Behavior: Dynamic - adjusts between gray tones for Light and Dark mode consistency. -->
+  <color name="border-color-medium-contrast">#666b70</color><!-- Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. -->
+  <color name="border-color-low-contrast">#4b525a</color><!-- Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers). Dynamic - light gray 093 in Light mode, dark gray 035 in Dark mode. -->
+  <color name="border-color-high-contrast">#ffffff</color><!-- High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. -->
   <color name="border-color-low-contrast-constant">#e9ecef</color><!-- Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. -->
-  <color name="border-color-success">#00c373</color><!-- Used for success states and validation borders (e.g., input success outlines or confirmation frames).
-Behavior: Constant — same success tone across modes for consistent feedback semantics. -->
-  <color name="border-color-warning">#dd0000</color><!-- Defines border color for warning and error-related components, typically used for input validation or caution zones.
-Behavior: Constant — retains the same red warning tone in both Light and Dark modes. -->
+  <color name="border-color-success">#00c373</color><!-- Used for success states and validation borders (e.g., input success outlines or confirmation frames). Behavior: Constant — same success tone across modes for consistent feedback semantics. -->
+  <color name="border-color-warning">#dd0000</color><!-- Defines border color for warning and error-related components, typically used for input validation or caution zones. Behavior: Constant — retains the same red warning tone in both Light and Dark modes. -->
   <color name="border-color-primary-disabled">#343c41</color><!-- Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity. -->
   <color name="border-color-secondary-disabled">#4b525a</color><!-- Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines). -->
   <color name="core-color-primary">#0a2750</color><!-- Used as the main brand color for key interactive elements such as primary buttons, active states, and prominent highlights. It remains constant across Light and Dark Mode. -->
@@ -97,29 +57,18 @@ Behavior: Constant — retains the same red warning tone in both Light and Dark
   <color name="core-color-tertiary-constant">#081828</color><!-- Use this on elements that need to maintain the dark color across themes and color modes. -->
   <color name="pipe-test-renaming">#b0d1f3</color><!-- this is a test for the token pipeline -->
   <color name="icon-color-primary">#8c9196</color><!-- Primary icon color on primary surfaces. -->
-  <color name="icon-color-inverse">#4b525a</color><!-- Inverse icon color for use on contrasting backgrounds (e.g., light icons on dark surfaces or dark icons on bright surfaces).
-Behavior: Dynamic — switches between light and dark. -->
+  <color name="icon-color-inverse">#4b525a</color><!-- Inverse icon color for use on contrasting backgrounds (e.g., light icons on dark surfaces or dark icons on bright surfaces). Behavior: Dynamic - switches between light and dark. -->
   <color name="icon-color-secondary-constant">#8c9196</color><!-- Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes. -->
-  <color name="icon-color-constant-on-dark">#f2f4f5</color><!-- Used for icons displayed on dark backgrounds that don´t change colors, ensuring sufficient contrast and legibility.
-Behavior: Constant — always uses a neutral bright value. -->
-  <color name="icon-color-primary-constant">#4b525a</color><!-- Used for icons that must remain visually consistent regardless of mode (e.g.,  icons that are on surfaces that don't change color).
-Identical tone in both Light and Dark mode. -->
-  <color name="icon-color-success">#00c373</color><!-- Represents success or confirmation icons (e.g., checkmarks, completion indicators).
-Behavior: Constant — same success green tone across Light and Dark mode. -->
-  <color name="label-color-primary">#e9ecef</color><!-- Primary label color used for labels, badges, or tag text on light backgrounds. Ensures strong readability and visual hierarchy.
-Behavior: Dynamic — dark neutral in Light mode, light neutral in Dark mode. -->
-  <color name="label-color-secondary">#ced4da</color><!-- Secondary label tone used for less prominent text such as secondary badges or supporting labels.
-Behavior: Dynamic — adapts between mid-grays for Light and Dark surfaces. -->
-  <color name="label-color-disabled">#4b525a</color><!-- Disabled label tone indicating inactive or unavailable states in UI elements.
-Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. -->
-  <color name="label-color-primary-constant">#232629</color><!-- Used when primary label color should remain unchanged across modes in static UI areas.
-Behavior: Constant — identical tone in both Light and Dark mode. -->
-  <color name="label-color-primary-inverse-constant">#e9ecef</color><!-- Fixed inverse label tone applied where white or bright text must always appear, regardless of theme.
-Behavior: Constant — remains bright neutral in both Light and Dark mode. -->
-  <color name="label-color-tertiary">#8c9196</color><!-- Tertiary label tone for subtle, low-emphasis UI text such as placeholder text or tertiary badges.
-Behavior: Constant — identical tone across both modes for stable hierarchy. -->
-  <color name="label-color-primary-inverse">#232629</color><!-- Inverse version of the primary label color, used on dark or colored backgrounds.
-Behavior: Dynamic — switches between light and dark. -->
+  <color name="icon-color-constant-on-dark">#f2f4f5</color><!-- Used for icons displayed on dark backgrounds that don´t change colors, ensuring sufficient contrast and legibility. Behavior: Constant - always uses a neutral bright value. -->
+  <color name="icon-color-primary-constant">#4b525a</color><!-- Used for icons that must remain visually consistent regardless of mode (e.g.,  icons that are on surfaces that don't change color). Identical tone in both Light and Dark mode. -->
+  <color name="icon-color-success">#00c373</color><!-- Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode. -->
+  <color name="label-color-primary">#e9ecef</color><!-- Primary label color used for labels, badges, or tag text on light backgrounds. Ensures strong readability and visual hierarchy. Behavior: Dynamic — dark neutral in Light mode, light neutral in Dark mode. -->
+  <color name="label-color-secondary">#ced4da</color><!-- Secondary label tone used for less prominent text such as secondary badges or supporting labels. Behavior: Dynamic — adapts between mid-grays for Light and Dark surfaces. -->
+  <color name="label-color-disabled">#4b525a</color><!-- Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. -->
+  <color name="label-color-primary-constant">#232629</color><!-- Used when primary label color should remain unchanged across modes in static UI areas. Behavior: Constant — identical tone in both Light and Dark mode. -->
+  <color name="label-color-primary-inverse-constant">#e9ecef</color><!-- Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. -->
+  <color name="label-color-tertiary">#8c9196</color><!-- Tertiary label tone for subtle, low-emphasis UI text such as placeholder text or tertiary badges. Behavior: Constant — identical tone across both modes for stable hierarchy. -->
+  <color name="label-color-primary-inverse">#232629</color><!-- Inverse version of the primary label color, used on dark or colored backgrounds. Behavior: Dynamic — switches between light and dark. -->
   <color name="attention-color-high">#dd0000</color><!-- High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition. -->
   <color name="accent-color-primary">#f7f9fd</color><!-- Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone. -->
   <color name="attention-color-medium">#fd8227</color><!-- Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. -->
@@ -129,18 +78,17 @@ Behavior: Dynamic — switches between light and dark. -->
   <color name="attention-color-extra-low">#343c41</color><!-- Very low-contrast background tone used for information or system-neutral surfaces, often for tooltips or quiet information highlights. Dynamic — light neutral in Light mode and dark neutral in Dark mode. -->
   <color name="attention-color-success-secondary">#006e3e</color><!-- Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. -->
   <color name="overlay-scrim-black">#000000b2</color><!-- A semi-transparent black overlay used to dim background content when modals, drawers, or dialogs are active. Identical opacity and tone in both Light and Dark mode to ensure consistent overlay depth. -->
-  <color name="overlay-scrim-white">#ffffffb2</color><!-- A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels.
-Behavior: Constant — same opacity level across modes to preserve uniform layering behavior. -->
-  <string name="layer-opacity05">5px</string>
-  <string name="layer-opacity10">10px</string>
-  <string name="layer-opacity20">20px</string>
-  <string name="layer-opacity30">30px</string>
-  <string name="layer-opacity40">40px</string>
-  <string name="layer-opacity50">50px</string>
-  <string name="layer-opacity60">60px</string>
-  <string name="layer-opacity70">70px</string>
-  <string name="layer-opacity80">80px</string>
-  <string name="layer-opacity90">90px</string>
-  <string name="layer-opacity100">100px</string>
-  <string name="layer-opacity00">0px</string>
+  <color name="overlay-scrim-white">#ffffffb2</color><!-- A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels. Behavior: Constant — same opacity level across modes to preserve uniform layering behavior. -->
+  <string name="layer-opacity05">5</string>
+  <string name="layer-opacity10">10</string>
+  <string name="layer-opacity20">20</string>
+  <string name="layer-opacity30">30</string>
+  <string name="layer-opacity40">40</string>
+  <string name="layer-opacity50">50</string>
+  <string name="layer-opacity60">60</string>
+  <string name="layer-opacity70">70</string>
+  <string name="layer-opacity80">80</string>
+  <string name="layer-opacity90">90</string>
+  <string name="layer-opacity100">100</string>
+  <string name="layer-opacity00">0</string>
 </resources>