@inera/ids-design 5.3.0 → 5.4.0

package/src/themes/1177-pro/1177-pro-tokens.css

@@ -0,0 +1 @@
+@import '../1177/1177-tokens';

package/src/themes/1177-pro/1177-pro-typography.scss

@@ -0,0 +1,10 @@
+:root {
+  --IDS-HEADING-XXL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-XL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-L__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-M__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-S__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-XS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-PAGE-LIST__COLOR: var(--IDS-COLOR-SECONDARY-40);
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+}

package/src/themes/1177-pro/1177-pro.scss

@@ -0,0 +1,162 @@
+@use "../1177/1177" as elva77;
+@use "./1177-pro-typography.scss" as elva77Typography;
+
+:root,
+:host {
+  /* Input */
+  --IDS-INPUT__HEIGHT: 2.25rem;
+  --IDS-INPUT__PADDING: 0 1rem;
+  --IDS-INPUT__ICON-RIGHT: 1rem;
+
+  /* Button */
+  --IDS-BUTTON--SEARCH-M__HEIGHT: 2.25rem;
+  --IDS-BUTTON--SEARCH-M__FONT-SIZE: 1rem;
+  --IDS-BUTTON--SEARCH-M__PADDING: 0.5rem 1.5rem;
+  --IDS-BUTTON--FAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Select */
+  --IDS-SELECT__LINE-HEIGHT: 2.125rem;
+
+  /* Textarea */
+  --IDS-TEXTAREA__PADDING: .5rem .625rem;
+
+  /* Dialog */
+  --IDS-DIALOG__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+
+  /* Description list*/
+  --IDS-DESCRIPTION-LIST__DISPLAY: flex;
+  --IDS-DESCRIPTION-LIST__BORDER: 0;
+  --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
+  --IDS-DESCRIPTION-LIST__PADDING: 0;
+  --IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR: transparent;
+  --IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM: 0.75rem;
+
+  --IDS-DESCRIPTION-LIST--COLUMN__DISPLAY: grid;
+  --IDS-DESCRIPTION-LIST--COLUMN__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+  --IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS: 0.313rem;
+  --IDS-DESCRIPTION-LIST--COLUMN__PADDING: 0.5rem 1rem;
+  --IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM: 0;
+
+  /* Footer old */
+  --footer_background-color: var(--IDS-COLOR-NEUTRAL-100);
+  --footer-content_color: var(--IDS-COLOR-NEUTRAL-20);
+  --footer_box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
+  --footer-headline_color: var(--IDS-COLOR-ACCENT-30);
+  --footer-headline-sub_color: var(--IDS-COLOR-PRIMARY-30);
+  --footer-headline_font-size: 1.5rem;
+  --footer-headline_line-height: 1.875rem;
+  --footer_margin-top: 0;
+  --footer-inner_padding-top: 2.5rem;
+  --footer-inner_padding-bottom: 3.75rem;
+  --footer-sub_background-color: var(--IDS-COLOR-ACCENT-40);
+  --footer-sub_padding-top: 0.625rem;
+  --footer-sub_padding-bottom: 0.625rem;
+  --footer-sub-mobile_background-color: var(--IDS-COLOR-NEUTRAL-100);
+  --footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-40);
+  --footer-headline-pro_font-family: "Inter";
+  --footer-headline-pro_font-size: 1.25rem;
+  --footer-headline-pro_letter-spacing: -0.002rem;
+  --footer-headline-pro_font-weight: 700;
+  --footer-headline-pro_line-height: 1.5rem;
+
+  /* Header old */
+  --header-main_background: var(--IDS-COLOR-NEUTRAL-100);
+  --header-main-mobile_padding: 0;
+  --header-inner_background: var(--IDS-COLOR-NEUTRAL-100);
+  --header-avatar-chevron-icon: var(--IDS-COLOR-ACCENT-40);
+  --header-nav-mobile_background-color: var(--IDS-COLOR-NEUTRAL-100);
+  --header-nav-mobile-menu-items_box-shadow: 0 0.125rem 0.313rem #c5c5c5;
+  --header-nav-item_font-size: 1.125rem;
+  --header-nav-item_color: var(--IDS-COLOR-ACCENT-40);
+  --header-nav-item_padding: 0.125rem 0.625rem;
+  --header-nav-item_border-radius: 1.375rem;
+  --header-nav-item_border: 0.063rem solid var(--IDS-COLOR-NEUTRAL-100);
+  --header-nav-item-link_border-bottom: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --header-nav-item-after_content: none;
+  --header-nav-item-hover_border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --header-nav-item-expanded_background-color: var(--IDS-COLOR-ACCENT-30);
+  --header-nav-item-expanded_border: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+  --header-nav-item-expanded_color: var(--IDS-COLOR-NEUTRAL-100);
+  --header-nav-item-active_background-color: var(--IDS-COLOR-ACCENT-40);
+  --header-nav-item-active_border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --header-nav-item-active_color: var(--IDS-COLOR-NEUTRAL-100);
+  --header-nav-item-content_background: var(--IDS-COLOR-NEUTRAL-99);
+  --header-nav-item-content-before_background: var(--IDS-COLOR-NEUTRAL-100);
+  --header-nav-menu_color: var(--IDS-COLOR-ACCENT-40);
+
+  /* Mobile menu */
+  --IDS-MOBILE-MENU__AVATAR-LINK-COLOR: var(--IDS-COLOR-ACCENT-40);
+  /* Level 1 */
+  --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-ITEM--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM--EXPANDED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+  /* Secondary */
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Level 2 */
+  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* VARIATION 2 - Level 1 */
+  --IDS-MOBILE-MENU-2-ITEM__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: transparent;
+  --IDS-MOBILE-MENU-2-ITEM__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT: 700;
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: transparent;
+  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+
+  /* VARIATION 2 - Level 2 */
+  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: transparent;
+  --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-2-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: transparent;
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+
+  /* VARIATION 2 - Level 3 */
+  --IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR: transparent;
+  --IDS-MOBILE-MENU-2-ITEM--L3__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR: transparent;
+  --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+
+  /* Table */
+  --IDS-TABLE__HEAD-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
+  --IDS-TABLE__CELL-BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+  --IDS-TABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
+}
+
+/* Thematic classes */
+.ids-show-1177-pro {
+  display: block;
+}
+.ids-show-1177-pro-force {
+  display: block !important;
+}
+.ids-show-1177 {
+  display: none;
+}

package/src/themes/inera/inera-tokens.css

@@ -0,0 +1,53 @@
+:root, :host {
+  /* Primary colors */
+  --IDS-COLOR-PRIMARY-30: #7e2a4c;
+  --IDS-COLOR-ON-PRIMARY-30: #FFF;
+  --IDS-COLOR-PRIMARY-40: #A33662;
+  --IDS-COLOR-ON-PRIMARY-40: #FFF;
+  --IDS-COLOR-PRIMARY-50: #C03F73;
+  --IDS-COLOR-ON-PRIMARY-50: #FFF;
+  /* Secondary colors */
+  --IDS-COLOR-SECONDARY-40: #E7DAC5;
+  --IDS-COLOR-ON-SECONDARY-40: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-SECONDARY-90: #F6F1E9;
+  --IDS-COLOR-ON-SECONDARY-90: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-SECONDARY-95: #F9F6F1;
+  --IDS-COLOR-ON-SECONDARY-95: var(--IDS-COLOR-NEUTRAL-20);
+  /* Accent colors */
+  --IDS-COLOR-ACCENT-30: #305A47;
+  --IDS-COLOR-ON-ACCENT-30: #FFF;
+  --IDS-COLOR-ACCENT-40: #40775E;
+  --IDS-COLOR-ON-ACCENT-40: #FFF;
+  --IDS-COLOR-ACCENT-90: #AFD4C4;
+  --IDS-COLOR-ON-ACCENT-90: var(--IDS-COLOR-NEUTRAL-20);
+  /* Graphic colors */
+  --IDS-COLOR-GRAPHIC: #FF9517;
+  /* Alternative colors */
+  --IDS-COLOR-ALTERNATIVE: #0CB0C6;
+  /* Neutral colors */
+  --IDS-COLOR-NEUTRAL-20: #353636;
+  --IDS-COLOR-ON-NEUTRAL-20: #FFF;
+  --IDS-COLOR-NEUTRAL-40: #727373;
+  --IDS-COLOR-ON-NEUTRAL-40: #FFF;
+  --IDS-COLOR-NEUTRAL-90: #CCCCCC;
+  --IDS-COLOR-ON-NEUTRAL-90: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-NEUTRAL-99: #F0F0F0;
+  --IDS-COLOR-ON-NEUTRAL-99: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-NEUTRAL-100: #fff;
+  /* Background colors */
+  --IDS-COLOR-BACKGROUND: #fff;
+  --IDS-COLOR-ON-BACKGROUND: var(--IDS-COLOR-NEUTRAL-20);
+  /* Status colors */
+  --IDS-COLOR-SUCCESS-40: #277637;
+  --IDS-COLOR-ON-SUCCESS-40: #FFF;
+  --IDS-COLOR-SUCCESS-99: #E7F7EA;
+  --IDS-COLOR-ON-SUCCESS-99: var(--IDS-COLOR-NEUTRAL-20);;
+  --IDS-COLOR-ATTENTION-40: #FFD748;
+  --IDS-COLOR-ON-ATTENTION-40: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-ATTENTION-95: #FFF7D9;
+  --IDS-COLOR-ON-ATTENTION-95: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-ERROR-40: #DB0F00;
+  --IDS-COLOR-ON-ERROR-40: #FFF;
+  --IDS-COLOR-ERROR-99: #FFDAD7;
+  --IDS-COLOR-ON-ERROR-99: var(--IDS-COLOR-NEUTRAL-20);
+}

package/src/themes/inera/inera-typography.scss

@@ -0,0 +1,95 @@
+@use "../reset.scss";
+@use "../../global/global.scss";
+@use "./inera-tokens";
+
+:root,
+:host {
+  /* Font families */
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Poppins";
+
+  --IDS-HEADING-XXL__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
+  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
+  --IDS-HEADING-XXL__FONT-WEIGHT: 600;
+  --IDS-HEADING-XXL__LETTER-SPACING: inherit;
+  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
+
+  --IDS-HEADING-XL__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
+  --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
+  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
+  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
+  --IDS-HEADING-XL__FONT-WEIGHT: 600;
+  --IDS-HEADING-XL__LETTER-SPACING: inherit;
+  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
+
+  --IDS-HEADING-L__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
+  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
+  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
+  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-HEADING-L__FONT-WEIGHT: 600;
+  --IDS-HEADING-L__LETTER-SPACING: inherit;
+  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
+
+  --IDS-HEADING-M__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
+  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
+  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
+  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
+  --IDS-HEADING-M__FONT-WEIGHT: 600;
+  --IDS-HEADING-M__LETTER-SPACING: inherit;
+  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
+
+  --IDS-HEADING-S__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
+  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
+  --IDS-HEADING-S__FONT-WEIGHT: 600;
+  --IDS-HEADING-S__LETTER-SPACING: inherit;
+  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
+
+  --IDS-HEADING-XS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XS__FONT-SIZE: 1rem;
+  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
+  --IDS-HEADING-XS__FONT-WEIGHT: 600;
+  --IDS-HEADING-XS__LETTER-SPACING: inherit;
+
+  --IDS-ANCHOR__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ANCHOR__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+
+  --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
+  --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
+  --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
+  --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
+
+  --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-BODY__FONT-SIZE: 1rem;
+  --IDS-BODY__LINE-HEIGHT: 1.625rem;
+  --IDS-BODY--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+
+  --IDS-PAGE-LIST__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-PAGE-LIST__FONT-SIZE: 1.125rem;
+  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
+  --IDS-PAGE-LIST__LETTER-SPACING: 0;
+
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
+}