@marioschmidt/design-system-tokens 1.0.9

package/dist/js/semantic/advertorial/color/color-advertorial-light.js

@@ -0,0 +1,343 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const semanticCoreCorecolorprimary = "#de0000"; // 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.
+export const semanticCoreCorecolorsecondary = "#ffffff"; // Defines the secondary brand tone. This variable changes across Light and Dark Mode.
+export const semanticCoreCorecolortertiary = "#242629"; // Represents tertiary brand accents. This variable changes across Light and Dark Mode.
+export const semanticCoreCorecolorsecondaryconstant = "#ffffff"; // Use this on elements that must maintain the white color even in dark mode.
+export const semanticCoreCorecolortertiaryconstant = "#242629"; // Use this on elements that need to maintain the dark color across themes and color modes.
+export const semanticCoreCorecolortertiaryvvpipetest = "#476e94"; // this is a test for the token pipeline
+export const semanticCoreLeotestcolor = "#476e94"; // this is a test for the token pipeline
+export const semanticAttentionAccentcolorprimary = "#de0000"; // 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.
+export const semanticAttentionAccentcolorprimaryconstant = "#de0000"; // Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode.
+export const semanticAttentionAttentioncolorsuccessprimary = "#00c273"; // Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency.
+export const semanticAttentionAttentioncolorsuccesssecondary = "#006e3d"; // Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity.
+export const semanticAttentionAttentioncolorextralow = "#ffffff"; // 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.
+export const semanticAttentionAttentioncolorlow = "#ffbf00"; // Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition.
+export const semanticAttentionAttentioncolormedium = "#fc8226"; // Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes.
+export const semanticAttentionAttentioncolorhigh = "#de0000"; // 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.
+// 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.
+export const semanticBorderBordercolorlowcontrast = "#e8edf0";
+export const semanticBorderBordercolorlowcontrastconstant = "#e8edf0"; // 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.
+// 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.
+export const semanticBorderBordercolormediumcontrast = "#cfd4d9";
+// 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.
+export const semanticBorderBordercolorhighcontrast = "#242629";
+// 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.
+export const semanticBorderBordercolorsuccess = "#00c273";
+// 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.
+export const semanticBorderBordercolorwarning = "#de0000";
+export const semanticBorderBordercolorprimarydisabled = "#f2f5f5"; // Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
+export const semanticBorderBordercolorsecondarydisabled = "#e8edf0"; // Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines).
+export const semanticIconIconcolorprimary = "#4a5259"; // Primary icon color on primary surfaces.
+// 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.
+export const semanticIconIconcolorprimaryconstant = "#4a5259";
+// 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.
+export const semanticIconIconcolorinverse = "#cfd4d9";
+export const semanticIconIconcolorsecondaryconstant = "#8c9196"; // Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes.
+// 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.
+export const semanticIconIconcolorconstantondark = "#f2f5f5";
+// Represents success or confirmation icons (e.g., checkmarks, completion indicators).
+// Behavior: Constant — same success green tone across Light and Dark mode.
+export const semanticIconIconcolorsuccess = "#00c273";
+export const semanticOverlayOverlayscrimblack = "rgba(0, 0, 0, 0.7)"; // 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.
+// 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.
+export const semanticOverlayOverlayscrimwhite = "rgba(255, 255, 255, 0.7)";
+// 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.
+export const semanticStateColorprimaryactive = "#de0000";
+// 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.
+export const semanticStateColorsecondaryactive = "#242629";
+// 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.
+export const semanticStateColorsecondaryactiveinverse = "#f2f5f5";
+// 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.
+export const semanticStateColortertiaryactive = "#00c273";
+// 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.
+export const semanticStateColorprimarydisabled = "#f2f5f5";
+// Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
+// Behavior: Dynamic — adapts neutral tones based on theme brightness.
+export const semanticStateColorsecondarydisabled = "#e8edf0";
+// Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
+// Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency.
+export const semanticStateColortertiarydisabled = "#8c9196";
+// 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.
+export const semanticSurfaceSurfacecolorprimary = "#ffffff";
+// 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.
+export const semanticSurfaceSurfacecolorprimaryinverse = "#242629";
+// 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.
+export const semanticSurfaceSurfacecolorprimaryconstantlight = "#ffffff";
+// A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
+// Behavior: Constant — identical across Light and Dark mode.
+export const semanticSurfaceSurfacecolorprimaryconstantdark = "#242629";
+// 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.
+export const semanticSurfaceSurfacecolorsecondary = "#f2f5f5";
+// 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.
+export const semanticSurfaceSurfacecolortertiary = "#e8edf0";
+// 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.
+export const semanticSurfaceSurfacecolortertiaryinverse = "#333d40";
+export const semanticSurfaceSurfacecolorquartenary = "#cfd4d9"; // 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.
+// Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
+// Behavior: Dynamic — inverts between dark and light tones depending on mode.
+export const semanticSurfaceSurfacecolorquartenaryinverse = "#4a5259";
+// 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.
+export const semanticSurfaceSurfacecolorsuccess = "#cff5e3";
+export const semanticSurfaceSurfacecolorprimarygradientstop =
+  "rgba(255, 255, 255, 0)"; // 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.
+// Used for secondary surface gradients or subtle depth layers across backgrounds.
+// Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+export const semanticSurfaceSurfacecolorsecondarygradientstop =
+  "rgba(242, 245, 245, 0)";
+// Represents tertiary-level gradient background.
+// Currently used on skeletons.
+export const semanticSurfaceSurfacecolortertiarygradientstop =
+  "rgba(232, 237, 240, 0)";
+// 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.
+export const semanticHeadingHeadlinecolorprimary = "#242629";
+// 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.
+export const semanticHeadingHeadlinecolorwhiteconst = "#ffffff";
+// 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.
+export const semanticHeadingKickertextcoloronsurface = "#de0000";
+// 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.
+export const semanticHeadingKickertextcoloronred = "#ffffff";
+// Applied to kicker or meta text on dark colored backgrounds to maintain high legibility.
+// Behavior: Constant — always uses semi-transparent white for consistent readability.
+export const semanticHeadingKickertextcolorondarkbg =
+  "rgba(255, 255, 255, 0.8)";
+// 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.
+export const semanticHeadingKickertextcoloronbrightbg = "rgba(0, 0, 0, 0.7)";
+// 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.
+export const semanticTextTextcolorprimary = "#242629";
+// 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.
+export const semanticTextTextcolorprimaryconstant = "#242629";
+// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
+// Behavior: Dynamic — alternates between light and dark mode.
+export const semanticTextTextcolorprimaryinverse = "#e8edf0";
+// Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
+// Behavior: Constant — unchanged across modes.
+export const semanticTextTextcolorprimaryinverseconstant = "#e8edf0";
+// 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.
+export const semanticTextTextcolorsecondary = "#8c9196";
+// 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.
+export const semanticTextTextcolormuted = "#666b70";
+// Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
+// Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+export const semanticTextTextcolorondarksurface = "#ffffff";
+export const semanticTextTextcoloraccent = "#de0000"; // 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.
+// 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.
+export const semanticTextTextcoloraccentconstant = "#de0000";
+// 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.
+export const semanticTextTextcolorsuccessconstant = "#006e3d";
+// Used for strong warnings, errors, or destructive action labels.
+// Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+export const semanticTextTextcolorattentionhigh = "#de0000";
+// Represents medium attention states, often used in warnings or pending states.
+// Behavior: Constant — same orange tone across Light and Dark mode.
+export const semanticTextTextcolorattentionmedium = "#fc8226";
+// 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.
+export const semanticLabelLabelcolorprimary = "#242629";
+// Inverse version of the primary label color, used on dark or colored backgrounds.
+// Behavior: Dynamic — switches between light and dark.
+export const semanticLabelLabelcolorprimaryinverse = "#e8edf0";
+// Used when primary label color should remain unchanged across modes in static UI areas.
+// Behavior: Constant — identical tone in both Light and Dark mode.
+export const semanticLabelLabelcolorprimaryconstant = "#242629";
+// 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.
+export const semanticLabelLabelcolorprimaryinverseconstant = "#e8edf0";
+// 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.
+export const semanticLabelLabelcolorsecondary = "#4a5259";
+// 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.
+export const semanticLabelLabelcolortertiary = "#8c9196";
+// Disabled label tone indicating inactive or unavailable states in UI elements.
+// Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode.
+export const semanticLabelLabelcolordisabled = "#cfd4d9";
+export const semanticLayeropacityLayeropacity00 = 0;
+export const semanticLayeropacityLayeropacity05 = 5;
+export const semanticLayeropacityLayeropacity10 = 10;
+export const semanticLayeropacityLayeropacity20 = 20;
+export const semanticLayeropacityLayeropacity30 = 30;
+export const semanticLayeropacityLayeropacity40 = 40;
+export const semanticLayeropacityLayeropacity50 = 50;
+export const semanticLayeropacityLayeropacity60 = 60;
+export const semanticLayeropacityLayeropacity70 = 70;
+export const semanticLayeropacityLayeropacity80 = 80;
+export const semanticLayeropacityLayeropacity90 = 90;
+export const semanticLayeropacityLayeropacity100 = 100;
+export const componentAvatarAvatarlabelcolor = "#242629"; // 09-2025 css --article-author-name-color
+export const componentAvatarAvatarlabelcolorhover = "#de0000"; // 09-2025 css --article-author-name-color
+export const componentAlertAlertsurfacecolor = "#ffffff"; // On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025
+export const componentAlertAlertsurfacecolorconstant = "#ffffff"; // On marketing offer surfaces this variable is  used.
+export const componentBreadcrumbBreadcrumbtextcoloridle = "#4a5259"; // Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096
+export const componentBreadcrumbBreadcrumbtextcolorhover = "#242629"; // Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100
+export const componentBreakingnewsBreakingnewstoptitletextcolor = "#1c1c1c";
+export const componentBreakingnewsBreakingnewsbottomtitletextcolor = "#1c1c1c";
+export const componentBreakingnewsBreakingnewstitlesurfacecolor = "#fc8226";
+export const componentBreakingnewsBreakingnewssurfacecolor = "#242629";
+export const componentBreakingnewsBreakingnewstextcontentcolor = "#ffffff";
+export const componentButtonPrimaryButtonprimarylabelcolor = "#ffffff";
+export const componentButtonPrimaryButtonprimaryneutralbgcoloridle = "#242629"; // Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100
+export const componentButtonPrimaryButtonprimaryneutralbgcolorhover = "#4a5259";
+export const componentButtonPrimaryButtonprimarybrandbgcoloridle = "#de0000";
+export const componentButtonPrimaryButtonprimarybrandbgcolorhover = "#b00003";
+export const componentButtonPrimaryButtonprimarysuccesscoloridle = "#17995c";
+export const componentButtonPrimaryButtonprimarysuccesscolorhover = "#006e3d";
+export const componentButtonSecondaryButtonsecondarylabelcolor = "#4a5259";
+export const componentButtonSecondaryButtonsecondarybgcoloridle = "#e8edf0";
+export const componentButtonSecondaryButtonsecondarybgcolorhover = "#cfd4d9";
+export const componentButtonTertiaryButtontertiarylabelcolor = "#4a5259";
+export const componentButtonTertiaryButtontertiarybordercoloridle = "#cfd4d9";
+export const componentButtonTertiaryButtontertiarybordercolorhover = "#4a5259";
+export const componentButtonTertiaryButtontertiarysuccessbgcolorhover =
+  "#cff5e3";
+export const componentButtonTertiaryButtontertiarysuccessbordercolor =
+  "#17995c";
+export const componentButtonGhostButtonghostbgcolorhover = "#cfd4d9";
+export const componentButtonButtonlivetickerloadnewsurfacecolor = "#ffffff";
+export const componentButtonButtonlivetickerloadnewlabelcolor = "#8c9196";
+export const componentCardCardsurfacebgcolor = "#ffffff";
+export const componentChipsChipsbgcoloridle = "#e8edf0";
+export const componentChipsChipsbgcoloractive = "#de0000";
+export const componentChipsChipsbgcolorhover = "#b00003";
+export const componentChipsChipslabelcoloridle = "#242629";
+export const componentChipsChipslabelcolorhover = "#ffffff";
+export const componentDropdownDropdownbgcoloridle = "#ffffff";
+export const componentDropdownDropdownbgcolorhover = "#f2f5f5";
+export const componentEmptiesEmptieslogocolor = "#cfd4d9";
+export const componentEmptiesEmptiesbgcolor = "#f2f5f5";
+export const componentFoldoutFoldoutlabelcoloridle = "#4a5259";
+export const componentFoldoutFoldoutlabelcoloractive = "#de0000";
+export const componentGalleryAppimagelightboxgallerybgcolor = "#000000";
+export const componentHeyHeydrawersurfacecolor = "#f2f5f5";
+export const componentHeyHeyfavinputfieldsurfacecolor = "#e8edf0";
+export const componentHeyHeyiconutilcolor = "#4a5259";
+export const componentHeyHeyseparatorcolor = "#cfd4d9"; // This is the most used color for separators across Bild products.
+export const componentHeyHeytextcolor = "#4a5259";
+export const componentInputfieldInputfieldbordercoloridle = "#cfd4d9";
+export const componentInputfieldInputfieldbordercoloractive = "#4a5259";
+export const componentInputfieldInputfieldbordercolordark = "#8c9196";
+export const componentInputfieldInputfieldbordercolordarkactive = "#242629";
+export const componentInputfieldInputfieldbgcolordarklowcontrast = "#333d40";
+export const componentInputfieldInputfieldbgcolordarkmediumcontrast = "#4a5259";
+export const componentInputfieldInputfieldbgcolordarkhighcontrast = "#e8edf0";
+export const componentKickerStandardKickerbgcoloronsurface = "#de0000";
+export const componentKickerPartnerKickerbzbgcolor = "#e3001c";
+export const componentKickerPartnerKickerfitbookbgcolor = "#ff96b8";
+export const componentKickerPartnerKickerpetbookbgcolor = "#badb91";
+export const componentKickerPartnerKickermyhomebookbgcolor = "#66cccc";
+export const componentKickerPartnerKickertravelbookbgcolor = "#8ff0ed";
+export const componentKickerPartnerKickertechbookbgcolor = "#94e3ff";
+export const componentKickerPartnerKickerkaufberaterbgcolor = "#54476e";
+export const componentKickerPartnerKickercobibgcolor = "#db241c";
+export const componentKickerPartnerKickeraubibgcolor = "#f00000";
+export const componentKickerPartnerKickerspobibgcolor = "#174582";
+export const componentMediaplayerVidplayercontrolsautoplaybuttonbgcolor =
+  "rgba(0, 0, 0, 0.2)";
+export const componentMediaplayerVidplayercontrolbuttonsbghovercolor =
+  "rgba(222, 0, 0, 0.8)"; // This variable is used for hover states of video player control buttons.
+export const componentMediaplayerVidplayercontrolbuttonsbgcolorhover =
+  "rgba(0, 0, 0, 0.2)";
+export const componentMediaplayerVidplayercontrolbuttonsbgcolorpressed =
+  "rgba(0, 0, 0, 0.05)";
+export const componentMediaplayerVidplayeroverlayscrimcolor =
+  "rgba(0, 0, 0, 0.5)";
+export const componentMediaplayerAudioplayerplaybuttonbgcolor =
+  "rgba(255, 255, 255, 0.3)";
+export const componentMediaplayerVidplayertooltipbgcolor = "rgba(0, 0, 0, 0.7)";
+export const componentMediaplayerVidplayerprogressbarpreloadbgcolor =
+  "rgba(255, 255, 255, 0.3)";
+export const componentMediaplayerVidplayerunmutebuttonbgcolor =
+  "rgba(0, 0, 0, 0.2)";
+export const componentMediaplayerVidplayerunmutebuttonbgcolorhover =
+  "rgba(0, 0, 0, 0.35)";
+export const componentMenuMenusurfacecolor = "#ffffff";
+export const componentMenuMenuscrolledsurfacegradientcolor =
+  "rgba(255, 255, 255, 0.95)"; // Used on a thin part at the top of header in navigation menu.
+export const componentMenuMenulinklanesurfacecolor = "#ffffff";
+export const componentMenuMenulinklanelabelcolor = "#4a5259";
+export const componentMenuMenulinklanelabelcoloractive = "#242629";
+export const componentMenuApptopbarsurfacecolor = "#ffffff";
+export const componentMenuApptopbariconcolor = "#4a5259";
+export const componentMenuApptopbartextcolorprimary = "#242629";
+export const componentMenuApptobbartabnavbottomborder = "#e8edf0";
+export const componentMenuApptobbartabnavbottomborderactive = "#de0000";
+export const componentMenuitemMenuitemlabelcolorprimary = "#4a5259";
+export const componentMenuitemMenuitemlabelcolorprimaryactive = "#242629";
+export const componentMenuitemMenuitemlabelcolorsecondary = "#ffffff"; // The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes.
+export const componentMenuitemMenuitembordercoloractive = "#de0000";
+export const componentPartnerlinksPartnerlinksbgcoloridle = "#ffffff"; // !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+export const componentPartnerlinksPartnerlinksbgcoloractive = "#e8edf0"; // !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+export const componentPartnerlinksPartnerlinksbordercoloridle = "#cfd4d9"; // !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+export const componentPartnerlinksPartnerlinksbordercoloractive = "#242629"; // !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+export const componentPartnerlinksPartnerlinkscontainerbordercolor = "#cfd4d9"; // !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+export const componentNewstickerNewstickertimestampcolor = "#8c9196";
+export const componentNewstickerNewstickerbadgeiconscolor = "#8c9196";
+export const componentPaginationPaginationelementcolordefault = "#cfd4d9";
+export const componentPaginationPaginationelementcoloractive = "#de0000";
+export const componentPaginationGallerypaginationelementactiveopacity = 100; // Use this on gallery slider pagination elements. This can also be applied to hover states of those elements.
+export const componentPaginationScrollbartrackbgcolor = "rgba(0, 0, 0, 0.1)"; // Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements.
+export const componentPaginationScrollbarthumbbgcolor = "#8c9196"; // Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space.
+export const componentSelectionSelectionbordercolor = "#4a5259"; // Checkboxes and Radio buttons use this variable for their border.
+export const componentSliderSliderbuttonopacity = 90; // When users hover on gallery slider buttons the opacity changes to 90%.
+export const componentSliderSlidertrackbgcolor = "rgba(255, 255, 255, 0.35)"; // This variable is used on audio player slider bars. It references a pure white with 35% opacity.
+export const componentSocialsharebuttonSocialsharebuttonlabelcolordefault =
+  "#ffffff";
+export const componentSocialsharebuttonSocialsharebuttonlabelcoloractive =
+  "#ffffff";
+export const componentSocialsharebuttonSocialsharebuttonbgcolordefault =
+  "#4a5259";
+export const componentSocialsharebuttonSocialsharebuttonbgcoloractive =
+  "#333d40";
+export const componentSubheaderSubheaderscolor = "#242629";
+export const componentTabTabbgcolorhover = "#e8edf0";
+export const componentTabTablabelcoloractive = "#333d40";
+export const componentTabTablabelcolordefault = "#4a5259";
+export const componentTabAppbottomtabbarbgcolor = "#ffffff";
+export const componentTeaserTeaserhoveropacity = 80; // When users hover over graphical teasers the image reduces opacity to 80%.
+export const componentTeaserTeasertitlebackgroundgradientstart =
+  "rgba(0, 0, 0, 0.7)";
+export const componentTeaserTeasertitlebackgroundgradientstop =
+  "rgba(0, 0, 0, 0)";
+export const componentTextlinkTextlinkcolorprimary = "#242629";
+export const componentTextlinkTextlinkcolorsecondary = "#8c9196";
+export const componentTextlinkTextlinkcolorsecondaryactive = "#242629";
+export const componentDsysdocDsdocspacingitembgcolor = "rgba(222, 0, 0, 0.1)";
+export const componentDsysdocDsdocspacingitembordercolor =
+  "rgba(222, 0, 0, 0.5)";
+export const componentDsysdocDsysdocsLabeltextsurfacecolorprimaryprimitivename =
+  "BILD100"; // This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages.
+export const componentDsysdocDsysdocsLabeltextcolormode = "(Light Mode)"; // This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts.

package/dist/js/semantic/advertorial/color/index.js

@@ -0,0 +1,11 @@
+/**
+ * COLOR - JavaScript Index
+ */
+
+import color_advertorial_dark from './color-advertorial-dark.js';
+import color_advertorial_light from './color-advertorial-light.js';
+
+export {
+  color_advertorial_dark,
+  color_advertorial_light,
+};