@marioschmidt/design-system-tokens 1.0.39 → 1.0.40

package/dist/android/res/values/brands/sportbild/semantic/color/colormode-light.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">#232629</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">#666b70</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">#e9ecef</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">#232629</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">#666b70</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">#e9ecef</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">#174482</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">#ffffff</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">#f7f9fd</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">#081828</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">#ffffff</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">#f7f9fd</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">#081828</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">#ced4da</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">#bdcadb</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">#e9ecef00</color><!-- Represents tertiary-level gradient background.
-Currently used on skeletons. -->
-  <color name="surface-color-tertiary-inverse">#174482</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">#bdcadb</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">#e9ecef00</color><!-- Represents tertiary-level gradient background. Currently used on skeletons. -->
+  <color name="surface-color-tertiary-inverse">#174482</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">#ffffff00</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">#f2f4f500</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">#4b525a</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">#0a2750</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">#232629</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">#e9ecef</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">#f2f4f5</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">#f2f4f5</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">#8c9196</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">#ced4da</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">#e9ecef</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">#232629</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">#f2f4f500</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">#4b525a</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">#0a2750</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">#232629</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">#e9ecef</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">#f2f4f5</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">#f2f4f5</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">#8c9196</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">#ced4da</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">#e9ecef</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">#232629</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">#f2f4f5</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">#e9ecef</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">#476d93</color><!-- this is a test for the token pipeline -->
   <color name="icon-color-primary">#4b525a</color><!-- Primary icon color on primary surfaces. -->
-  <color name="icon-color-inverse">#ced4da</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">#ced4da</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">#232629</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">#4b525a</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">#ced4da</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">#e9ecef</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">#232629</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">#4b525a</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">#ced4da</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">#e9ecef</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">#174482</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">#ffffff</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>

package/dist/android/res/values/shared/colorprimitive.xml

@@ -68,16 +68,16 @@
   <color name="spobi-red">#e52528</color>
   <color name="spobi-blue016-alpha0">#0a275000</color>
   <color name="spobi-blue016-alpha70">#0a2750b2</color>
-  <string name="opacity05">5px</string>
-  <string name="opacity10">10px</string>
-  <string name="opacity20">20px</string>
-  <string name="opacity40">40px</string>
-  <string name="opacity60">60px</string>
-  <string name="opacity80">80px</string>
-  <string name="opacity100">100px</string>
-  <string name="opacity90">90px</string>
-  <string name="opacity30">30px</string>
-  <string name="opacity50">50px</string>
-  <string name="opacity00">0px</string>
-  <string name="opacity70">70px</string>
+  <string name="opacity05">5</string>
+  <string name="opacity10">10</string>
+  <string name="opacity20">20</string>
+  <string name="opacity40">40</string>
+  <string name="opacity60">60</string>
+  <string name="opacity80">80</string>
+  <string name="opacity100">100</string>
+  <string name="opacity90">90</string>
+  <string name="opacity30">30</string>
+  <string name="opacity50">50</string>
+  <string name="opacity00">0</string>
+  <string name="opacity70">70</string>
 </resources>

package/dist/android/res/values/shared/fontprimitive.xml

@@ -24,17 +24,17 @@
   <string name="500-medium-font-weight">500</string>
   <string name="bold-italic-font-weight-st">Bold Italic</string>
   <string name="black-font-weight-st">Black</string>
-  <string name="letter-space-0-25">-0.25px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a subtle small letter spacing value of -0.25. -->
-  <string name="letter-space-0">0px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0. -->
-  <string name="letter-space1">1px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a positive letter spacing value of 1. -->
-  <string name="letter-space0-5">0.5px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a slight positive letter spacing value of 0.5. -->
-  <string name="letter-space0-25">0.25px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a subtle positive letter spacing value of 0.25. -->
-  <string name="letter-space-0-5">-0.5px</string><!-- This variable is a primitive for use in creating semantic variables that need to use a subtle negative letter spacing value of -0.5. -->
-  <string name="letter-space2">2px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a large letter spacing value of 2. -->
-  <string name="letter-space-1">-1px</string><!-- This variable is a primitive for use in creating semantic variables that need to use a negative letter spacing value of -1. -->
-  <string name="letter-space-2">-2px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -2. This is usually reserved for large texts styles that are used on titles or headlines. -->
-  <string name="letter-space3">3px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a much larger letter spacing value of 3. Text styles that have smaller font sizes should use increasingly positive values for their letter spacings on smaller device sizes. -->
-  <string name="letter-space-3">-3px</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -3. Text styles that have larger font sizes should use increasingly negative values for their letter spacings on larger device sizes. -->
+  <string name="letter-space-neg0-25">-0.25</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a subtle small letter spacing value of -0.25. -->
+  <string name="letter-space0">0</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0. -->
+  <string name="letter-space1">1</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a positive letter spacing value of 1. -->
+  <string name="letter-space0-5">0.5</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a slight positive letter spacing value of 0.5. -->
+  <string name="letter-space0-25">0.25</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a subtle positive letter spacing value of 0.25. -->
+  <string name="letter-space-neg0-5">-0.5</string><!-- This variable is a primitive for use in creating semantic variables that need to use a subtle negative letter spacing value of -0.5. -->
+  <string name="letter-space2">2</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a large letter spacing value of 2. -->
+  <string name="letter-space-neg1">-1</string><!-- This variable is a primitive for use in creating semantic variables that need to use a negative letter spacing value of -1. -->
+  <string name="letter-space-neg2">-2</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -2. This is usually reserved for large texts styles that are used on titles or headlines. -->
+  <string name="letter-space3">3</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a much larger letter spacing value of 3. Text styles that have smaller font sizes should use increasingly positive values for their letter spacings on smaller device sizes. -->
+  <string name="letter-space-neg3">-3</string><!-- This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -3. Text styles that have larger font sizes should use increasingly negative values for their letter spacings on larger device sizes. -->
   <string name="1000-ultra-font-weight">1000</string>
   <string name="900-extra-black-font-weight">900</string>
   <string name="800-black-font-weight">800</string>

package/dist/bundles/components/advertorial-_dsysdocs.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.39
+ * ADVERTORIAL Design System Tokens v1.0.40
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Component Bundle (Component-specific tokens)

package/dist/bundles/components/advertorial-accordion.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.39
+ * ADVERTORIAL Design System Tokens v1.0.40
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Component Bundle (Component-specific tokens)
@@ -23,16 +23,14 @@
   .accordionlabel {
     font-family: Lucida Grande;
     font-weight: 700;
-    font-size: 17px;
-    letter-spacing: 0px;
+    font-size: 17;
   }
 
   @media (min-width: 390px) {
     .accordionlabel {
       font-family: Lucida Grande;
       font-weight: 700;
-      font-size: 17px;
-      letter-spacing: 0px;
+      font-size: 17;
     }
 
   }
@@ -41,8 +39,7 @@
     .accordionlabel {
       font-family: Lucida Grande;
       font-weight: 700;
-      font-size: 17px;
-      letter-spacing: 0px;
+      font-size: 17;
     }
 
   }
@@ -51,8 +48,7 @@
     .accordionlabel {
       font-family: Lucida Grande;
       font-weight: 700;
-      font-size: 17px;
-      letter-spacing: 0px;
+      font-size: 17;
     }
 
   }

package/dist/bundles/components/advertorial-alert.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.39
+ * ADVERTORIAL Design System Tokens v1.0.40
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Component Bundle (Component-specific tokens)

package/dist/bundles/components/advertorial-article.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.39
+ * ADVERTORIAL Design System Tokens v1.0.40
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Component Bundle (Component-specific tokens)
@@ -15,95 +15,93 @@
 /* === COMPONENT TOKENS & EFFECTS === */
 
 [data-brand="advertorial"] {
-  --article-image-caption-font-size-xs: 13px;
-  --article-image-caption-font-size-md: 13px;
-  --article-image-caption-font-size-lg: 16px;
-  --article-image-caption-font-size-sm: 13px;
-  --article-image-source-font-size-xs: 13px;
-  --article-image-source-font-size-sm: 13px;
-  --article-image-source-font-size-md: 13px;
-  --article-image-source-font-size-lg: 16px;
-  --article-image-caption-line-height-xs: 19.5px;
-  --article-image-caption-line-height-md: 19.5px;
-  --article-image-caption-line-height-lg: 24px;
-  --article-image-caption-line-height-sm: 19.5px;
-  --article-image-source-line-height-md: 19px;
-  --article-image-source-line-height-lg: 24px;
-  --article-image-source-line-height-xs: 19px;
-  --article-image-source-line-height-sm: 19px;
+  --article-image-caption-font-size-xs: 13;
+  --article-image-caption-font-size-md: 13;
+  --article-image-caption-font-size-lg: 16;
+  --article-image-caption-font-size-sm: 13;
+  --article-image-source-font-size-xs: 13;
+  --article-image-source-font-size-sm: 13;
+  --article-image-source-font-size-md: 13;
+  --article-image-source-font-size-lg: 16;
+  --article-image-caption-line-height-xs: 19.5;
+  --article-image-caption-line-height-md: 19.5;
+  --article-image-caption-line-height-lg: 24;
+  --article-image-caption-line-height-sm: 19.5;
+  --article-image-source-line-height-md: 19;
+  --article-image-source-line-height-lg: 24;
+  --article-image-source-line-height-xs: 19;
+  --article-image-source-line-height-sm: 19;
 }
 /* === RESPONSIVE TOKENS & TYPOGRAPHY === */
 
 [data-brand="advertorial"] {
   .articlekicker {
     font-family: Lucida Grande;
-    font-size: 16px;
-    line-height: 17.600000381469727px;
+    font-size: 16;
+    line-height: 17.600000381469727;
     font-style: 700;
   }
 
   .articleimagecaption {
     font-family: Lucida Grande;
     font-weight: 700;
-    font-size: 13px;
-    line-height: 19.5px;
-    letter-spacing: 0px;
+    font-size: 13;
+    line-height: 19.5;
   }
 
   .articleheadline {
     font-family: Lucida Grande;
-    font-size: 30px;
-    line-height: 30px;
+    font-size: 30;
+    line-height: 30;
     font-style: 700;
   }
 
   .articlemetasource {
     font-family: Lucida Grande;
     font-weight: 400;
-    font-size: 13px;
-    line-height: 19px;
+    font-size: 13;
+    line-height: 19;
   }
 
   .articletimestamp {
     font-family: Lucida Grande;
     font-weight: 800;
-    font-size: 12px;
+    font-size: 12;
   }
 
   @media (min-width: 390px) {
     .articlekicker {
       font-family: Lucida Grande;
-      font-size: 16px;
-      line-height: 17.600000381469727px;
+      font-size: 16;
+      line-height: 17.600000381469727;
       font-style: 700;
     }
 
     .articleimagecaption {
       font-family: Lucida Grande;
       font-weight: 700;
-      font-size: 13px;
-      line-height: 19.5px;
-      letter-spacing: 0px;
+      font-size: 13;
+      line-height: 19.5;
     }
 
     .articleheadline {
       font-family: Lucida Grande;
-      font-size: 30px;
-      line-height: 30px;
+      font-size: 30;
+      line-height: 30;
       font-style: 700;
     }
 
     .articlemetasource {
       font-family: Lucida Grande;
       font-weight: 400;
-      font-size: 13px;
-      line-height: 19px;
+      font-size: 13;
+      line-height: 19;
     }
 
     .articletimestamp {
       font-family: Lucida Grande;
       font-weight: 800;
-      font-size: 12px;
+      font-size: 12;
     }
 
   }
@@ -111,37 +109,36 @@
   @media (min-width: 600px) {
     .articlekicker {
       font-family: Lucida Grande;
-      font-size: 18px;
-      line-height: 19.799999237060547px;
+      font-size: 18;
+      line-height: 19.799999237060547;
       font-style: 700;
     }
 
     .articleimagecaption {
       font-family: Lucida Grande;
       font-weight: 700;
-      font-size: 13px;
-      line-height: 19.5px;
-      letter-spacing: 0px;
+      font-size: 13;
+      line-height: 19.5;
     }
 
     .articleheadline {
       font-family: Lucida Grande;
-      font-size: 54px;
-      line-height: 54px;
+      font-size: 54;
+      line-height: 54;
       font-style: 700;
     }
 
     .articlemetasource {
       font-family: Lucida Grande;
       font-weight: 400;
-      font-size: 13px;
-      line-height: 19px;
+      font-size: 13;
+      line-height: 19;
     }
 
     .articletimestamp {
       font-family: Lucida Grande;
       font-weight: 800;
-      font-size: 14px;
+      font-size: 14;
     }
 
   }
@@ -149,37 +146,36 @@
   @media (min-width: 1024px) {
     .articlekicker {
       font-family: Lucida Grande;
-      font-size: 25px;
-      line-height: 27.5px;
+      font-size: 25;
+      line-height: 27.5;
       font-style: 700;
     }
 
     .articleimagecaption {
       font-family: Lucida Grande;
       font-weight: 700;
-      font-size: 16px;
-      line-height: 24px;
-      letter-spacing: 0px;
+      font-size: 16;
+      line-height: 24;
     }
 
     .articleheadline {
       font-family: Lucida Grande;
-      font-size: 70px;
-      line-height: 70px;
+      font-size: 70;
+      line-height: 70;
       font-style: 700;
     }
 
     .articlemetasource {
       font-family: Lucida Grande;
       font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
+      font-size: 16;
+      line-height: 24;
     }
 
     .articletimestamp {
       font-family: Lucida Grande;
       font-weight: 800;
-      font-size: 16px;
+      font-size: 16;
     }
 
   }