carbon-react 157.8.0 → 157.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/esm/components/tokens-wrapper/__internal__/static-tokens/index.d.ts +2 -0
  2. package/esm/components/tokens-wrapper/__internal__/static-tokens/index.js +1 -0
  3. package/esm/components/tokens-wrapper/index.d.ts +2 -0
  4. package/esm/components/tokens-wrapper/index.js +1 -0
  5. package/esm/components/tokens-wrapper/tokens-wrapper.component.d.ts +7 -0
  6. package/esm/components/tokens-wrapper/tokens-wrapper.component.js +1 -0
  7. package/lib/components/tokens-wrapper/__internal__/static-tokens/index.d.ts +2 -0
  8. package/lib/components/tokens-wrapper/__internal__/static-tokens/index.js +1 -0
  9. package/lib/components/tokens-wrapper/__internal__/static-tokens/package.json +6 -0
  10. package/lib/components/tokens-wrapper/index.d.ts +2 -0
  11. package/lib/components/tokens-wrapper/index.js +1 -0
  12. package/lib/components/tokens-wrapper/package.json +6 -0
  13. package/lib/components/tokens-wrapper/tokens-wrapper.component.d.ts +7 -0
  14. package/lib/components/tokens-wrapper/tokens-wrapper.component.js +1 -0
  15. package/package.json +18 -14
package/esm/components/tokens-wrapper/__internal__/static-tokens/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "\n --global-borderwidth-none: 0;\n --global-borderwidth-xs: 1px;\n --global-borderwidth-s: 2px;\n --global-borderwidth-m: 3px;\n --global-borderwidth-l: 4px;\n --global-borderwidth-xl: 6px;\n --global-borderwidth-xxl: 8px;\n --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-icon-s: 20px sage-icons;\n --global-font-fluid-comp-icon-m: 20px sage-icons;\n --global-font-fluid-comp-icon-l: 20px sage-icons;\n --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-icon-s: 20px sage-icons;\n --global-font-static-comp-icon-m: 20px sage-icons;\n --global-font-static-comp-icon-l: 20px sage-icons;\n --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n --global-modifier-button-active: 0.30;\n --global-modifier-button-active-alt: 0.15;\n --global-modifier-button-hover: 0.15;\n --global-modifier-button-hover-alt: 0.10;\n --global-modifier-input-disabled-fg: 0.3;\n --global-modifier-input-disabled-bg: 0.05;\n --global-radius-none: 0;\n --global-radius-container3xs: 1px;\n --global-radius-container2xs: 2px;\n --global-radius-container-xs: 4px;\n --global-radius-container-s: 6px;\n --global-radius-container-m: 8px;\n --global-radius-container-l: 16px;\n --global-radius-container-xl: 24px;\n --global-radius-container2xl: 32px;\n --global-radius-container3xl: 40px;\n --global-radius-container4xl: 80px;\n --global-radius-container-circle: 999px;\n --global-radius-action2xs: 1px;\n --global-radius-action-xs: 2px;\n --global-radius-action-s: 4px;\n --global-radius-action-m: 8px;\n --global-radius-action-l: 16px;\n --global-radius-action-xl: 20px;\n --global-radius-action2xl: 24px;\n --global-radius-action-circle: 999px;\n --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n --global-size-none: 0px;\n --global-size6xs: 2px;\n --global-size5xs: 4px;\n --global-size4xs: 8px;\n --global-size3xs: 16px;\n --global-size2xs: 20px;\n --global-size-xs: 24px;\n --global-size-s: 32px;\n --global-size-m: 40px;\n --global-size-l: 48px;\n --global-size-xl: 56px;\n --global-size2xl: 64px;\n --global-size3xl: 72px;\n --global-size4xl: 80px;\n --global-space-none: 0px;\n --global-space-layout3xs: 8px;\n --global-space-layout2xs: 16px;\n --global-space-layout-xs: 24px;\n --global-space-layout-s: 32px;\n --global-space-layout-m: 40px;\n --global-space-layout-l: 48px;\n --global-space-layout-xl: 56px;\n --global-space-layout2xl: 64px;\n --global-space-layout3xl: 72px;\n --global-space-layout4xl: 80px;\n --global-space-comp2xs: 2px;\n --global-space-comp-xs: 4px;\n --global-space-comp-s: 8px;\n --global-space-comp-m: 12px;\n --global-space-comp-l: 16px;\n --global-space-comp-xl: 24px;\n --global-space-comp2xl: 32px;\n --mode-color-none: #fff0;\n --mode-color-ai-stop1: #13a038;\n --mode-color-ai-stop2: #149197;\n --mode-color-ai-stop3: #a87cfb;\n --mode-color-ai-alt-stop1: #00d639;\n --mode-color-ai-alt-stop2: #00d6de;\n --mode-color-ai-alt-stop3: #9d60ff;\n --mode-color-brand-default: #000000;\n --mode-color-brand-default-alt: #000000;\n --mode-color-brand-with-default-alt: #FFFFFF;\n --mode-color-brand-inverse-default: #00d639;\n --mode-color-brand-inverse-default-alt: #FFFFFF;\n --mode-color-brand-inverse-with-default-alt: #000000;\n --mode-color-brand-copilot-default: #000000;\n --mode-color-brand-copilot-monochrome: #000000;\n --mode-color-brand-copilot-with-default: #00d639;\n --mode-color-brand-copilot-inverse-default: #FFFFFF;\n --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n --mode-color-brand-copilot-inverse-with-default: #00d639;\n --mode-color-colorcode-blue-deep: #0071c3;\n --mode-color-colorcode-blue-muted: #e4eeff;\n --mode-color-colorcode-teal-deep: #007C7B;\n --mode-color-colorcode-teal-muted: #C8F5F5;\n --mode-color-colorcode-green-deep: #00811F;\n --mode-color-colorcode-green-muted: #D1F6D6;\n --mode-color-colorcode-lime-deep: #627600;\n --mode-color-colorcode-lime-muted: #e8f1d4;\n --mode-color-colorcode-orange-deep: #d64309;\n --mode-color-colorcode-orange-muted: #ffeaca;\n --mode-color-colorcode-red-deep: #db004e;\n --mode-color-colorcode-red-muted: #ffe8ea;\n --mode-color-colorcode-pink-deep: #c72699;\n --mode-color-colorcode-pink-muted: #fee8f5;\n --mode-color-colorcode-purple-deep: #8f4bd7;\n --mode-color-colorcode-purple-muted: #F3EBFE;\n --mode-color-colorcode-slate-deep: #527386;\n --mode-color-colorcode-slate-muted: #e4eff5;\n --mode-color-colorcode-gray-deep: #6f6f6f;\n --mode-color-colorcode-gray-muted: #eeeeee;\n --mode-color-generic-bg-nought: #FFFFFF;\n --mode-color-generic-bg-faint: #0000000a;\n --mode-color-generic-bg-delicate: #00000014;\n --mode-color-generic-bg-soft: #0000001e;\n --mode-color-generic-bg-moderate: #00000029;\n --mode-color-generic-bg-firm: #0000003d;\n --mode-color-generic-bg-harsh: #00000052;\n --mode-color-generic-bg-severe: #0006;\n --mode-color-generic-bg-extreme: #000000;\n --mode-color-generic-bg-inverse-nought: #000000;\n --mode-color-generic-bg-inverse-faint: #ffffff0a;\n --mode-color-generic-bg-inverse-delicate: #ffffff14;\n --mode-color-generic-bg-inverse-soft: #ffffff1e;\n --mode-color-generic-bg-inverse-moderate: #ffffff29;\n --mode-color-generic-bg-inverse-firm: #ffffff3d;\n --mode-color-generic-bg-inverse-harsh: #ffffff52;\n --mode-color-generic-bg-inverse-severe: #fff6;\n --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-extreme: #000000;\n --mode-color-generic-txt-severe: #000000f2;\n --mode-color-generic-txt-moderate: #000000a6;\n --mode-color-generic-txt-soft: #0000008c;\n --mode-color-generic-txt-delicate: #0000006b;\n --mode-color-generic-txt-faint: #0000004d;\n --mode-color-generic-txt-nought: #FFFFFF;\n --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-inverse-severe: #fffffff2;\n --mode-color-generic-txt-inverse-moderate: #ffffffab;\n --mode-color-generic-txt-inverse-soft: #ffffff8c;\n --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n --mode-color-generic-txt-inverse-faint: #ffffff4d;\n --mode-color-generic-txt-inverse-nought: #000000;\n --mode-color-generic-fg-nought: #FFFFFF;\n --mode-color-generic-fg-delicate: #eeeeee;\n --mode-color-generic-fg-soft: #a0a0a0;\n --mode-color-generic-fg-moderate: #8b8b8b;\n --mode-color-generic-fg-firm: #7c7c7c;\n --mode-color-generic-fg-extreme: #000000;\n --mode-color-generic-fg-inverse-nought: #000000;\n --mode-color-generic-fg-inverse-delicate: #181818;\n --mode-color-generic-fg-inverse-soft: #505050;\n --mode-color-generic-fg-inverse-moderate: #616161;\n --mode-color-generic-fg-inverse-firm: #6f6f6f;\n --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n --mode-color-generic-surface-nought: #FFFFFF;\n --mode-color-generic-surface-faint: #f4f4f4;\n --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-action-ai-active-stop1: #13a03826;\n --mode-color-action-ai-active-stop2: #14919726;\n --mode-color-action-ai-active-stop3: #a87cfb26;\n --mode-color-action-ai-hover-stop1: #13a03814;\n --mode-color-action-ai-hover-stop2: #14919714;\n --mode-color-action-ai-hover-stop3: #a87cfb14;\n --mode-color-action-danger-active: #a30037;\n --mode-color-action-danger-default: #db004e;\n --mode-color-action-danger-default-alt: #c40044;\n --mode-color-action-danger-hover: #c40044;\n --mode-color-action-danger-hover-alt: #db004e26;\n --mode-color-action-danger-hover-alt2: #a30037;\n --mode-color-action-danger-with-active: #FFFFFF;\n --mode-color-action-danger-with-default: #FFFFFF;\n --mode-color-action-danger-inverse-active: #ff728d;\n --mode-color-action-danger-inverse-default: #f50059;\n --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n --mode-color-action-danger-inverse-hover: #ff3e6a;\n --mode-color-action-danger-inverse-hover-alt: #f5005926;\n --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n --mode-color-action-danger-inverse-with-active: #000000;\n --mode-color-action-danger-inverse-with-default: #000000;\n --mode-color-action-data-entry-default: #FFFFFF;\n --mode-color-action-data-entry-with-active: #000000;\n --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n --mode-color-action-data-entry-with-hover: #000000;\n --mode-color-action-data-entry-hover-alt: #0000001a;\n --mode-color-action-data-entry-with-default: #7c7c7c;\n --mode-color-action-data-entry-default-alt: #f4f9fc;\n --mode-color-action-data-entry-txt: #000000f2;\n --mode-color-action-data-entry-txt-alt: #0000008c;\n --mode-color-action-data-entry-inverse-default: #000000;\n --mode-color-action-data-entry-inverse-with-default: #6f6f6f;\n --mode-color-action-data-entry-inverse-txt: #fffffff2;\n --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n --mode-color-action-focus-default: #000000;\n --mode-color-action-focus-txt: #000000;\n --mode-color-action-focus-with-default: #FFB500;\n --mode-color-action-focus-with-default-alt: #ffd274;\n --mode-color-action-focus-inverse-default: #FFB500;\n --mode-color-action-focus-inverse-txt: #FFFFFF;\n --mode-color-action-focus-inverse-with-default: #000000;\n --mode-color-action-focus-inverse-with-default-alt: #885e00;\n --mode-color-action-inactive-default: #0000004d;\n --mode-color-action-inactive-mask: #0006;\n --mode-color-action-inactive-default-alt: #eeeeee;\n --mode-color-action-inactive-txt: #0000006b;\n --mode-color-action-inactive-txt-alt: #FFFFFF;\n --mode-color-action-inactive-icon: #0000006b;\n --mode-color-action-inactive-icon-alt: #0000008c;\n --mode-color-action-inactive-inverse-default: #ffffff4d;\n --mode-color-action-inactive-inverse-txt: #ffffff6b;\n --mode-color-action-inactive-inverse-txt-alt: #000000;\n --mode-color-action-grayscale-active: #000000;\n --mode-color-action-grayscale-active-alt: #00000026;\n --mode-color-action-grayscale-default: #000000e6;\n --mode-color-action-grayscale-default-alt: #000000ab;\n --mode-color-action-grayscale-hover-alt: #0000001a;\n --mode-color-action-grayscale-hover: #00000026;\n --mode-color-action-grayscale-with-active: #FFFFFF;\n --mode-color-action-grayscale-with-active-alt: #000000;\n --mode-color-action-grayscale-with-default: #FFFFFF;\n --mode-color-action-grayscale-with-hover: #000000;\n --mode-color-action-grayscale-inverse-active: #FFFFFF;\n --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n --mode-color-action-grayscale-inverse-default: #ffffffe6;\n --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n --mode-color-action-grayscale-inverse-hover: #ffffff26;\n --mode-color-action-grayscale-inverse-with-active: #000000;\n --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n --mode-color-action-grayscale-inverse-with-default: #000000;\n --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n --mode-color-action-nav-active: #00000026;\n --mode-color-action-nav-default: #FFFFFF;\n --mode-color-action-nav-default-alt: #f8f8f8;\n --mode-color-action-nav-hover: #0000001a;\n --mode-color-action-nav-with-active: #000000;\n --mode-color-action-nav-with-default: #000000f2;\n --mode-color-action-nav-with-hover: #000000;\n --mode-color-action-nav-inverse-active: #ffffff26;\n --mode-color-action-nav-inverse-default: #000000;\n --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n --mode-color-action-nav-inverse-hover: #ffffff1a;\n --mode-color-action-nav-inverse-with-active: #FFFFFF;\n --mode-color-action-nav-inverse-with-default: #fffffff2;\n --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n --mode-color-action-main-active: #005e14;\n --mode-color-action-main-active-alt: #00811f4d;\n --mode-color-action-main-default: #00811f;\n --mode-color-action-main-default-alt: #00811fcc;\n --mode-color-action-main-default-alt2: #007219;\n --mode-color-action-main-default-alt3: #00811f08;\n --mode-color-action-main-hover: #007219;\n --mode-color-action-main-hover-alt: #00811f26;\n --mode-color-action-main-hover-alt2: #005e14;\n --mode-color-action-main-with-active: #FFFFFF;\n --mode-color-action-main-with-default: #FFFFFF;\n --mode-color-action-main-with-hover: #FFFFFF;\n --mode-color-action-main-inverse-active: #8fff98;\n --mode-color-action-main-inverse-active-alt: #00f1424d;\n --mode-color-action-main-inverse-default: #00f142;\n --mode-color-action-main-inverse-default-alt: #00f142cc;\n --mode-color-action-main-inverse-default-alt2: #46fb5e;\n --mode-color-action-main-inverse-default-alt3: #00f14208;\n --mode-color-action-main-inverse-hover: #46fb5e;\n --mode-color-action-main-inverse-hover-alt: #00f14226;\n --mode-color-action-main-inverse-hover-alt2: #8fff98;\n --mode-color-action-main-inverse-with-active: #000000;\n --mode-color-action-main-inverse-with-default: #000000;\n --mode-color-action-main-inverse-with-hover: #000000;\n --mode-color-status-ai-default: #FFFFFF;\n --mode-color-status-ai-default-alt: #000000;\n --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-callout-default-alt: #e0ffe2;\n --mode-color-status-callout-hover-alt: #b7ffbd;\n --mode-color-status-skeleton-stop1: #747474cc;\n --mode-color-status-skeleton-stop2: #7474740a;\n --mode-color-status-warning-default: #d64309;\n --mode-color-status-warning-default-alt: #fff7eb;\n --mode-color-status-warning-hover: #b33400;\n --mode-color-status-warning-hover-alt: #ffeaca;\n --mode-color-status-warning-txt: #b33400;\n --mode-color-status-warning-inverse-default: #e24300;\n --mode-color-status-warning-inverse-default-alt: #1d0300;\n --mode-color-status-warning-inverse-hover: #e5631c;\n --mode-color-status-warning-inverse-hover-alt: #360900;\n --mode-color-status-warning-inverse-txt: #e5631c;\n --mode-color-status-txt-with-default: #FFFFFF;\n --mode-color-status-txt-with-default-alt: #000000f2;\n --mode-color-status-txt-with-hover: #FFFFFF;\n --mode-color-status-txt-with-hover-alt: #000000;\n --mode-color-status-txt-loading: #747474;\n --mode-color-status-txt-inverse-with-default: #000000;\n --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n --mode-color-status-txt-inverse-with-hover: #000000;\n --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n --mode-color-status-custom-blue-default: #0071c3;\n --mode-color-status-custom-blue-default-alt: #f5f8ff;\n --mode-color-status-custom-blue-hover: #0063ad;\n --mode-color-status-custom-blue-hover-alt: #e4eeff;\n --mode-color-status-custom-teal-default: #007C7B;\n --mode-color-status-custom-teal-default-alt: #E8FCFC;\n --mode-color-status-custom-teal-hover: #006D6C;\n --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n --mode-color-status-custom-green-default: #00811F;\n --mode-color-status-custom-green-default-alt: #EEFCEF;\n --mode-color-status-custom-green-hover: #007219;\n --mode-color-status-custom-green-hover-alt: #D1F6D6;\n --mode-color-status-custom-lime-default: #627600;\n --mode-color-status-custom-lime-default-alt: #f6f9f0;\n --mode-color-status-custom-lime-hover: #576900;\n --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n --mode-color-status-custom-orange-default: #d64309;\n --mode-color-status-custom-orange-default-alt: #fff7eb;\n --mode-color-status-custom-orange-hover: #b33400;\n --mode-color-status-custom-orange-hover-alt: #ffeaca;\n --mode-color-status-custom-orange-txt: #b33400;\n --mode-color-status-custom-red-default: #db004e;\n --mode-color-status-custom-red-default-alt: #fff5f6;\n --mode-color-status-custom-red-hover: #c40044;\n --mode-color-status-custom-red-hover-alt: #ffe8ea;\n --mode-color-status-custom-pink-default: #c72699;\n --mode-color-status-custom-pink-default-alt: #fff5fa;\n --mode-color-status-custom-pink-hover: #b02086;\n --mode-color-status-custom-pink-hover-alt: #fee8f5;\n --mode-color-status-custom-purple-default: #8f4bd7;\n --mode-color-status-custom-purple-default-alt: #f9f6ff;\n --mode-color-status-custom-purple-hover: #803ec5;\n --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n --mode-color-status-custom-gray-default: #6f6f6f;\n --mode-color-status-custom-gray-default-alt: #f8f8f8;\n --mode-color-status-custom-gray-hover: #616161;\n --mode-color-status-custom-gray-hover-alt: #eeeeee;\n --mode-color-status-custom-slate-default: #527386;\n --mode-color-status-custom-slate-default-alt: #f4f9fc;\n --mode-color-status-custom-slate-hover: #486576;\n --mode-color-status-custom-slate-hover-alt: #e4eff5;\n --mode-color-status-priority-default: #8f4bd7;\n --mode-color-status-priority-default-alt: #f9f6ff;\n --mode-color-status-priority-hover: #803ec5;\n --mode-color-status-priority-hover-alt: #F3EBFE;\n --mode-color-status-priority-inverse-default: #9463d7;\n --mode-color-status-priority-inverse-default-alt: #10041f;\n --mode-color-status-priority-inverse-hover: #a375dd;\n --mode-color-status-priority-inverse-hover-alt: #220c3a;\n --mode-color-status-inactive-default: #7c7c7c;\n --mode-color-status-inactive-with-default: #0000008c;\n --mode-color-status-inactive-inverse-default: #6f6f6f;\n --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n --mode-color-status-info-default: #0071c3;\n --mode-color-status-info-default-alt: #f5f8ff;\n --mode-color-status-info-hover: #0063ad;\n --mode-color-status-info-hover-alt: #e4eeff;\n --mode-color-status-info-inverse-default: #007fd9;\n --mode-color-status-info-inverse-default-alt: #000b1c;\n --mode-color-status-info-inverse-hover: #008ef4;\n --mode-color-status-info-inverse-hover-alt: #001932;\n --mode-color-status-negative-default: #db004e;\n --mode-color-status-negative-default-alt: #fff5f6;\n --mode-color-status-negative-hover: #c40044;\n --mode-color-status-negative-hover-alt: #ffe8ea;\n --mode-color-status-negative-inverse-default: #f50059;\n --mode-color-status-negative-inverse-default-alt: #1e0005;\n --mode-color-status-negative-inverse-hover: #ff3e6a;\n --mode-color-status-negative-inverse-hover-alt: #3c000f;\n --mode-color-status-neutral-default: #6f6f6f;\n --mode-color-status-neutral-default-alt: #f8f8f8;\n --mode-color-status-neutral-hover: #616161;\n --mode-color-status-neutral-hover-alt: #eeeeee;\n --mode-color-status-neutral-inverse-default: #7c7c7c;\n --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n --mode-color-status-neutral-inverse-hover: #8b8b8b;\n --mode-color-status-neutral-inverse-hover-alt: #181818;\n --mode-color-status-positive-default: #00811F;\n --mode-color-status-positive-default-alt: #EEFCEF;\n --mode-color-status-positive-hover: #007219;\n --mode-color-status-positive-hover-alt: #D1F6D6;\n --mode-color-status-positive-inverse-default: #019127;\n --mode-color-status-positive-inverse-default-alt: #001001;\n --mode-color-status-positive-inverse-hover: #007219;\n --mode-color-status-positive-inverse-hover-alt: #001f03;\n --badge-none: var(--mode-color-none);\n --badge-border-default: var(--mode-color-generic-txt-nought);\n --badge-bg-default: var(--mode-color-status-negative-default);\n --badge-bg-alt: var(--mode-color-status-info-default);\n --badge-label-default: var(--mode-color-generic-txt-nought);\n --badge-label-alt: var(--mode-color-generic-txt-nought);\n --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n --button-none: var(--mode-color-none);\n --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n --button-ai-label-default: var(--mode-color-action-grayscale-default);\n --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-tertiary-bg-default: var(--button-none);\n --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-tertiary-inverse-bg-default: var(--button-none);\n --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n --container-action-border-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --container-action-border-active: var(--mode-color-action-grayscale-active);\n --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n --container-action-border-default: var(--mode-color-generic-fg-firm);\n --container-action-icon-active: var(--mode-color-action-grayscale-active);\n --container-action-icon-default: var(--mode-color-action-grayscale-default);\n --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n --container-action-txt-active: var(--mode-color-action-grayscale-active);\n --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n --container-action-txt-default: var(--mode-color-generic-txt-severe);\n --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n --container-action-target-bg-default: var(--mode-color-status-info-default);\n --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n --container-standard-border-active: var(--mode-color-action-grayscale-active);\n --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n --container-standard-border-default: var(--mode-color-generic-fg-soft);\n --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n --container-standard-icon: var(--mode-color-generic-fg-firm);\n --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n --container-quote-border: var(--mode-color-action-main-default);\n --container-size-bubble-max-w: 600px;\n --container-size-copilot-emptystate-illustration: 200px;\n --container-size-copilot-emptystate-txt-max-w: 600px;\n --container-size-copilot-overlay-max-h: 960px;\n --container-size-dialog-max-ws: 540px;\n --container-size-dialog-max-wm: 850px;\n --container-size-dialog-max-wl: 1080px;\n --container-size-dialog-min-w: 288px;\n --container-size-empty-state-primary-s: 200px;\n --container-size-empty-state-primary-m: 240px;\n --container-size-empty-state-primary-l: 320px;\n --container-size-fluid-items2xs: 80px;\n --container-size-fluid-items-xs: 128px;\n --container-size-fluid-items-s: 160px;\n --container-size-fluid-items-m: 200px;\n --container-size-fluid-items-l: 240px;\n --container-size-fluid-items-xl: 288px;\n --container-size-fluid-items2xl: 320px;\n --container-size-fluid-items3xl: 560px;\n --container-size-fluid-items4xl: 760px;\n --container-size-sidebar-max-ws: 760px;\n --container-size-sidebar-max-wm: 1000px;\n --container-size-sidebar-min-w: 288px;\n --focus-bg: var(--mode-color-action-focus-with-default-alt);\n --focus-borderalt: var(--mode-color-action-focus-default);\n --focus-border: var(--mode-color-action-focus-with-default);\n --focus-label: var(--mode-color-action-focus-txt);\n --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);\n --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-required: var(--mode-color-action-danger-default);\n --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n --input-typical-border-alt: var(--mode-color-action-inactive-default);\n --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n --input-switch-border-active: transparent;\n --input-switch-border-active-disabled: transparent;\n --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-validation-border-error: var(--mode-color-status-negative-default);\n --input-validation-bar-error: var(--mode-color-status-negative-default);\n --input-validation-bar-warn: var(--mode-color-status-warning-default);\n --input-validation-label-error: var(--mode-color-status-negative-default);\n --input-validation-label-success: var(--mode-color-status-positive-default);\n --input-validation-label-warn: var(--mode-color-status-warning-txt);\n --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n --input-size-generic-min-w: 288px;\n --logo-sage-bg-default: var(--mode-color-brand-default);\n --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n --message-none: var(--mode-color-none);\n --message-contextual-bg: var(--mode-color-generic-bg-nought);\n --message-contextual-icon: var(--mode-color-generic-bg-nought);\n --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n --message-contextual-error-icon: var(--mode-color-status-negative-default);\n --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n --message-contextual-info-border-default: var(--mode-color-status-info-default);\n --message-contextual-info-icon: var(--mode-color-status-info-default);\n --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n --message-contextual-success-icon: var(--mode-color-status-positive-default);\n --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n --message-global-info-icon: var(--mode-color-status-info-default);\n --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n --message-global-warning-icon: var(--mode-color-status-warning-default);\n --nav-bg-default: var(--mode-color-generic-bg-nought);\n --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n --nav-leftnav-item-bg-default: var(--mode-color-none);\n --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n --nav-modal-item-bg-default: var(--mode-color-none);\n --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n --nav-topnav-item-bg-default: var(--mode-color-none);\n --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n --page-bg-default: var(--mode-color-generic-surface-nought);\n --page-bg-alt: var(--mode-color-generic-surface-faint);\n --page-txt-alt: var(--mode-color-generic-txt-moderate);\n --page-txt-default: var(--mode-color-generic-txt-severe);\n --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n --popover-bg-active: var(--mode-color-action-grayscale-active);\n --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n --popover-bg-default: var(--mode-color-generic-bg-nought);\n --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --popover-label-active: var(--mode-color-action-grayscale-with-active);\n --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n --popover-label-disabled: var(--mode-color-action-inactive-txt);\n --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n --profile-size-outside-xs: var(--global-size-xs);\n --profile-size-outside-s: var(--global-size-s);\n --profile-size-outside-m: var(--global-size-m);\n --profile-size-outside-ml: 56px;\n --profile-size-outside-l: var(--global-size-4-xl);\n --profile-size-outside-xl: 104px;\n --profile-size-outside-xxl: 128px;\n --profile-size-inside-xs: var(--global-size-3-xs);\n --profile-size-inside-s: var(--global-size-2-xs);\n --profile-size-inside-m: var(--global-size-xs);\n --profile-size-inside-ml: var(--global-size-s);\n --profile-size-inside-l: var(--global-size-l);\n --profile-size-inside-xl: var(--global-size-2-xl);\n --profile-size-inside-xxl: var(--global-size-4-xl);\n --profile-bg-alt: var(--mode-color-generic-txt-severe);\n --profile-bg-def: var(--mode-color-generic-bg-nought);\n --profile-border-default: var(--mode-color-generic-fg-moderate);\n --profile-label-default: var(--mode-color-generic-txt-severe);\n --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n --profile-font-def-s: var(--global-font-static-comp-regular-m);\n --profile-font-def-m: var(--global-font-static-comp-regular-m);\n --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n --profile-font-def-l: var(--global-font-static-comp-regular-l);\n --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n --profile-font-heading-m: var(--global-font-static-subheading-l);\n --profile-font-heading-ml: var(--global-font-static-subheading-l);\n --profile-font-heading-l: var(--global-font-static-subheading-l);\n --profile-font-heading-xl: var(--global-font-static-heading-m);\n --profile-font-heading-xxl: var(--global-font-static-heading-l);\n --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n --progress-none: var(--mode-color-none);\n --progress-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-border-default: var(--mode-color-generic-fg-firm);\n --progress-fg-alt: var(--mode-color-status-positive-default);\n --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n --progress-fg-caution: var(--mode-color-status-warning-default);\n --progress-fg-default: var(--mode-color-action-grayscale-active);\n --progress-fg-error: var(--mode-color-status-negative-default);\n --progress-fg-info: var(--mode-color-status-info-default);\n --progress-label-alt: var(--mode-color-generic-txt-moderate);\n --progress-label-default: var(--mode-color-generic-txt-severe);\n --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);\n --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n --progress-loader-fg-error: var(--mode-color-status-negative-default);\n --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n --pill-generic-none: var(--mode-color-none);\n --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n --pill-error-bg-default: var(--mode-color-status-negative-default);\n --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n --pill-error-border-default: var(--mode-color-status-negative-default);\n --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-priority-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-border-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-info-bg-default: var(--mode-color-status-info-default);\n --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-info-bg-hover: var(--mode-color-status-info-hover);\n --pill-info-border-default: var(--mode-color-status-info-default);\n --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n --pill-readonly-label: var(--mode-color-generic-txt-soft);\n --pill-positive-bg-default: var(--mode-color-status-positive-default);\n --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n --pill-positive-border-default: var(--mode-color-status-positive-default);\n --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-warn-bg-default: var(--mode-color-status-warning-default);\n --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n --pill-warn-border-default: var(--mode-color-status-warning-default);\n --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n --tab-bg-default: var(--mode-color-none);\n --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n --tab-border-active: var(--mode-color-action-grayscale-active);\n --tab-border-default: var(--mode-color-generic-fg-moderate);\n --tab-border-hover: var(--mode-color-generic-fg-firm);\n --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-label-active: var(--mode-color-action-grayscale-active);\n --tab-icon-active: var(--mode-color-action-grayscale-active);\n --tab-label-default: var(--mode-color-action-grayscale-default);\n --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n --tab-validation-border-warning: var(--mode-color-status-warning-default);\n --tab-validation-border-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n --tab-validation-label-error: var(--mode-color-status-negative-default);\n --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n --table-header-subtle-bg-default: var(--mode-color-none);\n --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n --table-row-bg-default: var(--mode-color-generic-bg-nought);\n --table-row-bg-alt: var(--mode-color-generic-bg-faint);\n --table-row-bg-alt2: var(--mode-color-generic-bg-soft);\n --table-row-bg-alt3: var(--mode-color-generic-bg-faint);\n --table-row-bg-selected: var(--mode-color-generic-bg-moderate);\n --table-row-border-default: var(--mode-color-generic-fg-soft);\n --table-row-label-default: var(--mode-color-generic-txt-severe);\n --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n --table-footer-bg-default: var(--mode-color-generic-bg-moderate);\n --table-footer-border-default: var(--mode-color-generic-fg-moderate);\n --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
2
+ export default _default;
package/esm/components/tokens-wrapper/__internal__/static-tokens/index.js ADDED
@@ -0,0 +1 @@
1
+ var e="\n --global-borderwidth-none: 0;\n --global-borderwidth-xs: 1px;\n --global-borderwidth-s: 2px;\n --global-borderwidth-m: 3px;\n --global-borderwidth-l: 4px;\n --global-borderwidth-xl: 6px;\n --global-borderwidth-xxl: 8px;\n --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-icon-s: 20px sage-icons;\n --global-font-fluid-comp-icon-m: 20px sage-icons;\n --global-font-fluid-comp-icon-l: 20px sage-icons;\n --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-icon-s: 20px sage-icons;\n --global-font-static-comp-icon-m: 20px sage-icons;\n --global-font-static-comp-icon-l: 20px sage-icons;\n --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n --global-modifier-button-active: 0.30;\n --global-modifier-button-active-alt: 0.15;\n --global-modifier-button-hover: 0.15;\n --global-modifier-button-hover-alt: 0.10;\n --global-modifier-input-disabled-fg: 0.3;\n --global-modifier-input-disabled-bg: 0.05;\n --global-radius-none: 0;\n --global-radius-container3xs: 1px;\n --global-radius-container2xs: 2px;\n --global-radius-container-xs: 4px;\n --global-radius-container-s: 6px;\n --global-radius-container-m: 8px;\n --global-radius-container-l: 16px;\n --global-radius-container-xl: 24px;\n --global-radius-container2xl: 32px;\n --global-radius-container3xl: 40px;\n --global-radius-container4xl: 80px;\n --global-radius-container-circle: 999px;\n --global-radius-action2xs: 1px;\n --global-radius-action-xs: 2px;\n --global-radius-action-s: 4px;\n --global-radius-action-m: 8px;\n --global-radius-action-l: 16px;\n --global-radius-action-xl: 20px;\n --global-radius-action2xl: 24px;\n --global-radius-action-circle: 999px;\n --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n --global-size-none: 0px;\n --global-size6xs: 2px;\n --global-size5xs: 4px;\n --global-size4xs: 8px;\n --global-size3xs: 16px;\n --global-size2xs: 20px;\n --global-size-xs: 24px;\n --global-size-s: 32px;\n --global-size-m: 40px;\n --global-size-l: 48px;\n --global-size-xl: 56px;\n --global-size2xl: 64px;\n --global-size3xl: 72px;\n --global-size4xl: 80px;\n --global-space-none: 0px;\n --global-space-layout3xs: 8px;\n --global-space-layout2xs: 16px;\n --global-space-layout-xs: 24px;\n --global-space-layout-s: 32px;\n --global-space-layout-m: 40px;\n --global-space-layout-l: 48px;\n --global-space-layout-xl: 56px;\n --global-space-layout2xl: 64px;\n --global-space-layout3xl: 72px;\n --global-space-layout4xl: 80px;\n --global-space-comp2xs: 2px;\n --global-space-comp-xs: 4px;\n --global-space-comp-s: 8px;\n --global-space-comp-m: 12px;\n --global-space-comp-l: 16px;\n --global-space-comp-xl: 24px;\n --global-space-comp2xl: 32px;\n --mode-color-none: #fff0;\n --mode-color-ai-stop1: #13a038;\n --mode-color-ai-stop2: #149197;\n --mode-color-ai-stop3: #a87cfb;\n --mode-color-ai-alt-stop1: #00d639;\n --mode-color-ai-alt-stop2: #00d6de;\n --mode-color-ai-alt-stop3: #9d60ff;\n --mode-color-brand-default: #000000;\n --mode-color-brand-default-alt: #000000;\n --mode-color-brand-with-default-alt: #FFFFFF;\n --mode-color-brand-inverse-default: #00d639;\n --mode-color-brand-inverse-default-alt: #FFFFFF;\n --mode-color-brand-inverse-with-default-alt: #000000;\n --mode-color-brand-copilot-default: #000000;\n --mode-color-brand-copilot-monochrome: #000000;\n --mode-color-brand-copilot-with-default: #00d639;\n --mode-color-brand-copilot-inverse-default: #FFFFFF;\n --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n --mode-color-brand-copilot-inverse-with-default: #00d639;\n --mode-color-colorcode-blue-deep: #0071c3;\n --mode-color-colorcode-blue-muted: #e4eeff;\n --mode-color-colorcode-teal-deep: #007C7B;\n --mode-color-colorcode-teal-muted: #C8F5F5;\n --mode-color-colorcode-green-deep: #00811F;\n --mode-color-colorcode-green-muted: #D1F6D6;\n --mode-color-colorcode-lime-deep: #627600;\n --mode-color-colorcode-lime-muted: #e8f1d4;\n --mode-color-colorcode-orange-deep: #d64309;\n --mode-color-colorcode-orange-muted: #ffeaca;\n --mode-color-colorcode-red-deep: #db004e;\n --mode-color-colorcode-red-muted: #ffe8ea;\n --mode-color-colorcode-pink-deep: #c72699;\n --mode-color-colorcode-pink-muted: #fee8f5;\n --mode-color-colorcode-purple-deep: #8f4bd7;\n --mode-color-colorcode-purple-muted: #F3EBFE;\n --mode-color-colorcode-slate-deep: #527386;\n --mode-color-colorcode-slate-muted: #e4eff5;\n --mode-color-colorcode-gray-deep: #6f6f6f;\n --mode-color-colorcode-gray-muted: #eeeeee;\n --mode-color-generic-bg-nought: #FFFFFF;\n --mode-color-generic-bg-faint: #0000000a;\n --mode-color-generic-bg-delicate: #00000014;\n --mode-color-generic-bg-soft: #0000001e;\n --mode-color-generic-bg-moderate: #00000029;\n --mode-color-generic-bg-firm: #0000003d;\n --mode-color-generic-bg-harsh: #00000052;\n --mode-color-generic-bg-severe: #0006;\n --mode-color-generic-bg-extreme: #000000;\n --mode-color-generic-bg-inverse-nought: #000000;\n --mode-color-generic-bg-inverse-faint: #ffffff0a;\n --mode-color-generic-bg-inverse-delicate: #ffffff14;\n --mode-color-generic-bg-inverse-soft: #ffffff1e;\n --mode-color-generic-bg-inverse-moderate: #ffffff29;\n --mode-color-generic-bg-inverse-firm: #ffffff3d;\n --mode-color-generic-bg-inverse-harsh: #ffffff52;\n --mode-color-generic-bg-inverse-severe: #fff6;\n --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-extreme: #000000;\n --mode-color-generic-txt-severe: #000000f2;\n --mode-color-generic-txt-moderate: #000000a6;\n --mode-color-generic-txt-soft: #0000008c;\n --mode-color-generic-txt-delicate: #0000006b;\n --mode-color-generic-txt-faint: #0000004d;\n --mode-color-generic-txt-nought: #FFFFFF;\n --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-inverse-severe: #fffffff2;\n --mode-color-generic-txt-inverse-moderate: #ffffffab;\n --mode-color-generic-txt-inverse-soft: #ffffff8c;\n --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n --mode-color-generic-txt-inverse-faint: #ffffff4d;\n --mode-color-generic-txt-inverse-nought: #000000;\n --mode-color-generic-fg-nought: #FFFFFF;\n --mode-color-generic-fg-delicate: #eeeeee;\n --mode-color-generic-fg-soft: #a0a0a0;\n --mode-color-generic-fg-moderate: #8b8b8b;\n --mode-color-generic-fg-firm: #7c7c7c;\n --mode-color-generic-fg-extreme: #000000;\n --mode-color-generic-fg-inverse-nought: #000000;\n --mode-color-generic-fg-inverse-delicate: #181818;\n --mode-color-generic-fg-inverse-soft: #505050;\n --mode-color-generic-fg-inverse-moderate: #616161;\n --mode-color-generic-fg-inverse-firm: #6f6f6f;\n --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n --mode-color-generic-surface-nought: #FFFFFF;\n --mode-color-generic-surface-faint: #f4f4f4;\n --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-action-ai-active-stop1: #13a03826;\n --mode-color-action-ai-active-stop2: #14919726;\n --mode-color-action-ai-active-stop3: #a87cfb26;\n --mode-color-action-ai-hover-stop1: #13a03814;\n --mode-color-action-ai-hover-stop2: #14919714;\n --mode-color-action-ai-hover-stop3: #a87cfb14;\n --mode-color-action-danger-active: #a30037;\n --mode-color-action-danger-default: #db004e;\n --mode-color-action-danger-default-alt: #c40044;\n --mode-color-action-danger-hover: #c40044;\n --mode-color-action-danger-hover-alt: #db004e26;\n --mode-color-action-danger-hover-alt2: #a30037;\n --mode-color-action-danger-with-active: #FFFFFF;\n --mode-color-action-danger-with-default: #FFFFFF;\n --mode-color-action-danger-inverse-active: #ff728d;\n --mode-color-action-danger-inverse-default: #f50059;\n --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n --mode-color-action-danger-inverse-hover: #ff3e6a;\n --mode-color-action-danger-inverse-hover-alt: #f5005926;\n --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n --mode-color-action-danger-inverse-with-active: #000000;\n --mode-color-action-danger-inverse-with-default: #000000;\n --mode-color-action-data-entry-default: #FFFFFF;\n --mode-color-action-data-entry-with-active: #000000;\n --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n --mode-color-action-data-entry-with-hover: #000000;\n --mode-color-action-data-entry-hover-alt: #0000001a;\n --mode-color-action-data-entry-with-default: #7c7c7c;\n --mode-color-action-data-entry-default-alt: #f4f9fc;\n --mode-color-action-data-entry-txt: #000000f2;\n --mode-color-action-data-entry-txt-alt: #0000008c;\n --mode-color-action-data-entry-inverse-default: #000000;\n --mode-color-action-data-entry-inverse-with-default: #6f6f6f;\n --mode-color-action-data-entry-inverse-txt: #fffffff2;\n --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n --mode-color-action-focus-default: #000000;\n --mode-color-action-focus-txt: #000000;\n --mode-color-action-focus-with-default: #FFB500;\n --mode-color-action-focus-with-default-alt: #ffd274;\n --mode-color-action-focus-inverse-default: #FFB500;\n --mode-color-action-focus-inverse-txt: #FFFFFF;\n --mode-color-action-focus-inverse-with-default: #000000;\n --mode-color-action-focus-inverse-with-default-alt: #885e00;\n --mode-color-action-inactive-default: #0000004d;\n --mode-color-action-inactive-mask: #0006;\n --mode-color-action-inactive-default-alt: #eeeeee;\n --mode-color-action-inactive-txt: #0000006b;\n --mode-color-action-inactive-txt-alt: #FFFFFF;\n --mode-color-action-inactive-icon: #0000006b;\n --mode-color-action-inactive-icon-alt: #0000008c;\n --mode-color-action-inactive-inverse-default: #ffffff4d;\n --mode-color-action-inactive-inverse-txt: #ffffff6b;\n --mode-color-action-inactive-inverse-txt-alt: #000000;\n --mode-color-action-grayscale-active: #000000;\n --mode-color-action-grayscale-active-alt: #00000026;\n --mode-color-action-grayscale-default: #000000e6;\n --mode-color-action-grayscale-default-alt: #000000ab;\n --mode-color-action-grayscale-hover-alt: #0000001a;\n --mode-color-action-grayscale-hover: #00000026;\n --mode-color-action-grayscale-with-active: #FFFFFF;\n --mode-color-action-grayscale-with-active-alt: #000000;\n --mode-color-action-grayscale-with-default: #FFFFFF;\n --mode-color-action-grayscale-with-hover: #000000;\n --mode-color-action-grayscale-inverse-active: #FFFFFF;\n --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n --mode-color-action-grayscale-inverse-default: #ffffffe6;\n --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n --mode-color-action-grayscale-inverse-hover: #ffffff26;\n --mode-color-action-grayscale-inverse-with-active: #000000;\n --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n --mode-color-action-grayscale-inverse-with-default: #000000;\n --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n --mode-color-action-nav-active: #00000026;\n --mode-color-action-nav-default: #FFFFFF;\n --mode-color-action-nav-default-alt: #f8f8f8;\n --mode-color-action-nav-hover: #0000001a;\n --mode-color-action-nav-with-active: #000000;\n --mode-color-action-nav-with-default: #000000f2;\n --mode-color-action-nav-with-hover: #000000;\n --mode-color-action-nav-inverse-active: #ffffff26;\n --mode-color-action-nav-inverse-default: #000000;\n --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n --mode-color-action-nav-inverse-hover: #ffffff1a;\n --mode-color-action-nav-inverse-with-active: #FFFFFF;\n --mode-color-action-nav-inverse-with-default: #fffffff2;\n --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n --mode-color-action-main-active: #005e14;\n --mode-color-action-main-active-alt: #00811f4d;\n --mode-color-action-main-default: #00811f;\n --mode-color-action-main-default-alt: #00811fcc;\n --mode-color-action-main-default-alt2: #007219;\n --mode-color-action-main-default-alt3: #00811f08;\n --mode-color-action-main-hover: #007219;\n --mode-color-action-main-hover-alt: #00811f26;\n --mode-color-action-main-hover-alt2: #005e14;\n --mode-color-action-main-with-active: #FFFFFF;\n --mode-color-action-main-with-default: #FFFFFF;\n --mode-color-action-main-with-hover: #FFFFFF;\n --mode-color-action-main-inverse-active: #8fff98;\n --mode-color-action-main-inverse-active-alt: #00f1424d;\n --mode-color-action-main-inverse-default: #00f142;\n --mode-color-action-main-inverse-default-alt: #00f142cc;\n --mode-color-action-main-inverse-default-alt2: #46fb5e;\n --mode-color-action-main-inverse-default-alt3: #00f14208;\n --mode-color-action-main-inverse-hover: #46fb5e;\n --mode-color-action-main-inverse-hover-alt: #00f14226;\n --mode-color-action-main-inverse-hover-alt2: #8fff98;\n --mode-color-action-main-inverse-with-active: #000000;\n --mode-color-action-main-inverse-with-default: #000000;\n --mode-color-action-main-inverse-with-hover: #000000;\n --mode-color-status-ai-default: #FFFFFF;\n --mode-color-status-ai-default-alt: #000000;\n --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-callout-default-alt: #e0ffe2;\n --mode-color-status-callout-hover-alt: #b7ffbd;\n --mode-color-status-skeleton-stop1: #747474cc;\n --mode-color-status-skeleton-stop2: #7474740a;\n --mode-color-status-warning-default: #d64309;\n --mode-color-status-warning-default-alt: #fff7eb;\n --mode-color-status-warning-hover: #b33400;\n --mode-color-status-warning-hover-alt: #ffeaca;\n --mode-color-status-warning-txt: #b33400;\n --mode-color-status-warning-inverse-default: #e24300;\n --mode-color-status-warning-inverse-default-alt: #1d0300;\n --mode-color-status-warning-inverse-hover: #e5631c;\n --mode-color-status-warning-inverse-hover-alt: #360900;\n --mode-color-status-warning-inverse-txt: #e5631c;\n --mode-color-status-txt-with-default: #FFFFFF;\n --mode-color-status-txt-with-default-alt: #000000f2;\n --mode-color-status-txt-with-hover: #FFFFFF;\n --mode-color-status-txt-with-hover-alt: #000000;\n --mode-color-status-txt-loading: #747474;\n --mode-color-status-txt-inverse-with-default: #000000;\n --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n --mode-color-status-txt-inverse-with-hover: #000000;\n --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n --mode-color-status-custom-blue-default: #0071c3;\n --mode-color-status-custom-blue-default-alt: #f5f8ff;\n --mode-color-status-custom-blue-hover: #0063ad;\n --mode-color-status-custom-blue-hover-alt: #e4eeff;\n --mode-color-status-custom-teal-default: #007C7B;\n --mode-color-status-custom-teal-default-alt: #E8FCFC;\n --mode-color-status-custom-teal-hover: #006D6C;\n --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n --mode-color-status-custom-green-default: #00811F;\n --mode-color-status-custom-green-default-alt: #EEFCEF;\n --mode-color-status-custom-green-hover: #007219;\n --mode-color-status-custom-green-hover-alt: #D1F6D6;\n --mode-color-status-custom-lime-default: #627600;\n --mode-color-status-custom-lime-default-alt: #f6f9f0;\n --mode-color-status-custom-lime-hover: #576900;\n --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n --mode-color-status-custom-orange-default: #d64309;\n --mode-color-status-custom-orange-default-alt: #fff7eb;\n --mode-color-status-custom-orange-hover: #b33400;\n --mode-color-status-custom-orange-hover-alt: #ffeaca;\n --mode-color-status-custom-orange-txt: #b33400;\n --mode-color-status-custom-red-default: #db004e;\n --mode-color-status-custom-red-default-alt: #fff5f6;\n --mode-color-status-custom-red-hover: #c40044;\n --mode-color-status-custom-red-hover-alt: #ffe8ea;\n --mode-color-status-custom-pink-default: #c72699;\n --mode-color-status-custom-pink-default-alt: #fff5fa;\n --mode-color-status-custom-pink-hover: #b02086;\n --mode-color-status-custom-pink-hover-alt: #fee8f5;\n --mode-color-status-custom-purple-default: #8f4bd7;\n --mode-color-status-custom-purple-default-alt: #f9f6ff;\n --mode-color-status-custom-purple-hover: #803ec5;\n --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n --mode-color-status-custom-gray-default: #6f6f6f;\n --mode-color-status-custom-gray-default-alt: #f8f8f8;\n --mode-color-status-custom-gray-hover: #616161;\n --mode-color-status-custom-gray-hover-alt: #eeeeee;\n --mode-color-status-custom-slate-default: #527386;\n --mode-color-status-custom-slate-default-alt: #f4f9fc;\n --mode-color-status-custom-slate-hover: #486576;\n --mode-color-status-custom-slate-hover-alt: #e4eff5;\n --mode-color-status-priority-default: #8f4bd7;\n --mode-color-status-priority-default-alt: #f9f6ff;\n --mode-color-status-priority-hover: #803ec5;\n --mode-color-status-priority-hover-alt: #F3EBFE;\n --mode-color-status-priority-inverse-default: #9463d7;\n --mode-color-status-priority-inverse-default-alt: #10041f;\n --mode-color-status-priority-inverse-hover: #a375dd;\n --mode-color-status-priority-inverse-hover-alt: #220c3a;\n --mode-color-status-inactive-default: #7c7c7c;\n --mode-color-status-inactive-with-default: #0000008c;\n --mode-color-status-inactive-inverse-default: #6f6f6f;\n --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n --mode-color-status-info-default: #0071c3;\n --mode-color-status-info-default-alt: #f5f8ff;\n --mode-color-status-info-hover: #0063ad;\n --mode-color-status-info-hover-alt: #e4eeff;\n --mode-color-status-info-inverse-default: #007fd9;\n --mode-color-status-info-inverse-default-alt: #000b1c;\n --mode-color-status-info-inverse-hover: #008ef4;\n --mode-color-status-info-inverse-hover-alt: #001932;\n --mode-color-status-negative-default: #db004e;\n --mode-color-status-negative-default-alt: #fff5f6;\n --mode-color-status-negative-hover: #c40044;\n --mode-color-status-negative-hover-alt: #ffe8ea;\n --mode-color-status-negative-inverse-default: #f50059;\n --mode-color-status-negative-inverse-default-alt: #1e0005;\n --mode-color-status-negative-inverse-hover: #ff3e6a;\n --mode-color-status-negative-inverse-hover-alt: #3c000f;\n --mode-color-status-neutral-default: #6f6f6f;\n --mode-color-status-neutral-default-alt: #f8f8f8;\n --mode-color-status-neutral-hover: #616161;\n --mode-color-status-neutral-hover-alt: #eeeeee;\n --mode-color-status-neutral-inverse-default: #7c7c7c;\n --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n --mode-color-status-neutral-inverse-hover: #8b8b8b;\n --mode-color-status-neutral-inverse-hover-alt: #181818;\n --mode-color-status-positive-default: #00811F;\n --mode-color-status-positive-default-alt: #EEFCEF;\n --mode-color-status-positive-hover: #007219;\n --mode-color-status-positive-hover-alt: #D1F6D6;\n --mode-color-status-positive-inverse-default: #019127;\n --mode-color-status-positive-inverse-default-alt: #001001;\n --mode-color-status-positive-inverse-hover: #007219;\n --mode-color-status-positive-inverse-hover-alt: #001f03;\n --badge-none: var(--mode-color-none);\n --badge-border-default: var(--mode-color-generic-txt-nought);\n --badge-bg-default: var(--mode-color-status-negative-default);\n --badge-bg-alt: var(--mode-color-status-info-default);\n --badge-label-default: var(--mode-color-generic-txt-nought);\n --badge-label-alt: var(--mode-color-generic-txt-nought);\n --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n --button-none: var(--mode-color-none);\n --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n --button-ai-label-default: var(--mode-color-action-grayscale-default);\n --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-tertiary-bg-default: var(--button-none);\n --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-tertiary-inverse-bg-default: var(--button-none);\n --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n --container-action-border-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --container-action-border-active: var(--mode-color-action-grayscale-active);\n --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n --container-action-border-default: var(--mode-color-generic-fg-firm);\n --container-action-icon-active: var(--mode-color-action-grayscale-active);\n --container-action-icon-default: var(--mode-color-action-grayscale-default);\n --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n --container-action-txt-active: var(--mode-color-action-grayscale-active);\n --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n --container-action-txt-default: var(--mode-color-generic-txt-severe);\n --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n --container-action-target-bg-default: var(--mode-color-status-info-default);\n --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n --container-standard-border-active: var(--mode-color-action-grayscale-active);\n --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n --container-standard-border-default: var(--mode-color-generic-fg-soft);\n --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n --container-standard-icon: var(--mode-color-generic-fg-firm);\n --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n --container-quote-border: var(--mode-color-action-main-default);\n --container-size-bubble-max-w: 600px;\n --container-size-copilot-emptystate-illustration: 200px;\n --container-size-copilot-emptystate-txt-max-w: 600px;\n --container-size-copilot-overlay-max-h: 960px;\n --container-size-dialog-max-ws: 540px;\n --container-size-dialog-max-wm: 850px;\n --container-size-dialog-max-wl: 1080px;\n --container-size-dialog-min-w: 288px;\n --container-size-empty-state-primary-s: 200px;\n --container-size-empty-state-primary-m: 240px;\n --container-size-empty-state-primary-l: 320px;\n --container-size-fluid-items2xs: 80px;\n --container-size-fluid-items-xs: 128px;\n --container-size-fluid-items-s: 160px;\n --container-size-fluid-items-m: 200px;\n --container-size-fluid-items-l: 240px;\n --container-size-fluid-items-xl: 288px;\n --container-size-fluid-items2xl: 320px;\n --container-size-fluid-items3xl: 560px;\n --container-size-fluid-items4xl: 760px;\n --container-size-sidebar-max-ws: 760px;\n --container-size-sidebar-max-wm: 1000px;\n --container-size-sidebar-min-w: 288px;\n --focus-bg: var(--mode-color-action-focus-with-default-alt);\n --focus-borderalt: var(--mode-color-action-focus-default);\n --focus-border: var(--mode-color-action-focus-with-default);\n --focus-label: var(--mode-color-action-focus-txt);\n --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);\n --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-required: var(--mode-color-action-danger-default);\n --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n --input-typical-border-alt: var(--mode-color-action-inactive-default);\n --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n --input-switch-border-active: transparent;\n --input-switch-border-active-disabled: transparent;\n --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-validation-border-error: var(--mode-color-status-negative-default);\n --input-validation-bar-error: var(--mode-color-status-negative-default);\n --input-validation-bar-warn: var(--mode-color-status-warning-default);\n --input-validation-label-error: var(--mode-color-status-negative-default);\n --input-validation-label-success: var(--mode-color-status-positive-default);\n --input-validation-label-warn: var(--mode-color-status-warning-txt);\n --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n --input-size-generic-min-w: 288px;\n --logo-sage-bg-default: var(--mode-color-brand-default);\n --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n --message-none: var(--mode-color-none);\n --message-contextual-bg: var(--mode-color-generic-bg-nought);\n --message-contextual-icon: var(--mode-color-generic-bg-nought);\n --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n --message-contextual-error-icon: var(--mode-color-status-negative-default);\n --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n --message-contextual-info-border-default: var(--mode-color-status-info-default);\n --message-contextual-info-icon: var(--mode-color-status-info-default);\n --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n --message-contextual-success-icon: var(--mode-color-status-positive-default);\n --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n --message-global-info-icon: var(--mode-color-status-info-default);\n --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n --message-global-warning-icon: var(--mode-color-status-warning-default);\n --nav-bg-default: var(--mode-color-generic-bg-nought);\n --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n --nav-leftnav-item-bg-default: var(--mode-color-none);\n --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n --nav-modal-item-bg-default: var(--mode-color-none);\n --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n --nav-topnav-item-bg-default: var(--mode-color-none);\n --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n --page-bg-default: var(--mode-color-generic-surface-nought);\n --page-bg-alt: var(--mode-color-generic-surface-faint);\n --page-txt-alt: var(--mode-color-generic-txt-moderate);\n --page-txt-default: var(--mode-color-generic-txt-severe);\n --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n --popover-bg-active: var(--mode-color-action-grayscale-active);\n --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n --popover-bg-default: var(--mode-color-generic-bg-nought);\n --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --popover-label-active: var(--mode-color-action-grayscale-with-active);\n --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n --popover-label-disabled: var(--mode-color-action-inactive-txt);\n --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n --profile-size-outside-xs: var(--global-size-xs);\n --profile-size-outside-s: var(--global-size-s);\n --profile-size-outside-m: var(--global-size-m);\n --profile-size-outside-ml: 56px;\n --profile-size-outside-l: var(--global-size-4-xl);\n --profile-size-outside-xl: 104px;\n --profile-size-outside-xxl: 128px;\n --profile-size-inside-xs: var(--global-size-3-xs);\n --profile-size-inside-s: var(--global-size-2-xs);\n --profile-size-inside-m: var(--global-size-xs);\n --profile-size-inside-ml: var(--global-size-s);\n --profile-size-inside-l: var(--global-size-l);\n --profile-size-inside-xl: var(--global-size-2-xl);\n --profile-size-inside-xxl: var(--global-size-4-xl);\n --profile-bg-alt: var(--mode-color-generic-txt-severe);\n --profile-bg-def: var(--mode-color-generic-bg-nought);\n --profile-border-default: var(--mode-color-generic-fg-moderate);\n --profile-label-default: var(--mode-color-generic-txt-severe);\n --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n --profile-font-def-s: var(--global-font-static-comp-regular-m);\n --profile-font-def-m: var(--global-font-static-comp-regular-m);\n --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n --profile-font-def-l: var(--global-font-static-comp-regular-l);\n --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n --profile-font-heading-m: var(--global-font-static-subheading-l);\n --profile-font-heading-ml: var(--global-font-static-subheading-l);\n --profile-font-heading-l: var(--global-font-static-subheading-l);\n --profile-font-heading-xl: var(--global-font-static-heading-m);\n --profile-font-heading-xxl: var(--global-font-static-heading-l);\n --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n --progress-none: var(--mode-color-none);\n --progress-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-border-default: var(--mode-color-generic-fg-firm);\n --progress-fg-alt: var(--mode-color-status-positive-default);\n --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n --progress-fg-caution: var(--mode-color-status-warning-default);\n --progress-fg-default: var(--mode-color-action-grayscale-active);\n --progress-fg-error: var(--mode-color-status-negative-default);\n --progress-fg-info: var(--mode-color-status-info-default);\n --progress-label-alt: var(--mode-color-generic-txt-moderate);\n --progress-label-default: var(--mode-color-generic-txt-severe);\n --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);\n --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n --progress-loader-fg-error: var(--mode-color-status-negative-default);\n --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n --pill-generic-none: var(--mode-color-none);\n --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n --pill-error-bg-default: var(--mode-color-status-negative-default);\n --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n --pill-error-border-default: var(--mode-color-status-negative-default);\n --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-priority-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-border-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-info-bg-default: var(--mode-color-status-info-default);\n --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-info-bg-hover: var(--mode-color-status-info-hover);\n --pill-info-border-default: var(--mode-color-status-info-default);\n --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n --pill-readonly-label: var(--mode-color-generic-txt-soft);\n --pill-positive-bg-default: var(--mode-color-status-positive-default);\n --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n --pill-positive-border-default: var(--mode-color-status-positive-default);\n --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-warn-bg-default: var(--mode-color-status-warning-default);\n --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n --pill-warn-border-default: var(--mode-color-status-warning-default);\n --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n --tab-bg-default: var(--mode-color-none);\n --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n --tab-border-active: var(--mode-color-action-grayscale-active);\n --tab-border-default: var(--mode-color-generic-fg-moderate);\n --tab-border-hover: var(--mode-color-generic-fg-firm);\n --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-label-active: var(--mode-color-action-grayscale-active);\n --tab-icon-active: var(--mode-color-action-grayscale-active);\n --tab-label-default: var(--mode-color-action-grayscale-default);\n --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n --tab-validation-border-warning: var(--mode-color-status-warning-default);\n --tab-validation-border-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n --tab-validation-label-error: var(--mode-color-status-negative-default);\n --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n --table-header-subtle-bg-default: var(--mode-color-none);\n --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n --table-row-bg-default: var(--mode-color-generic-bg-nought);\n --table-row-bg-alt: var(--mode-color-generic-bg-faint);\n --table-row-bg-alt2: var(--mode-color-generic-bg-soft);\n --table-row-bg-alt3: var(--mode-color-generic-bg-faint);\n --table-row-bg-selected: var(--mode-color-generic-bg-moderate);\n --table-row-border-default: var(--mode-color-generic-fg-soft);\n --table-row-label-default: var(--mode-color-generic-txt-severe);\n --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n --table-footer-bg-default: var(--mode-color-generic-bg-moderate);\n --table-footer-border-default: var(--mode-color-generic-fg-moderate);\n --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";export{e as default};
package/esm/components/tokens-wrapper/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { TokenWrapperProps } from "./tokens-wrapper.component";
2
+ export { default } from "./tokens-wrapper.component";
package/esm/components/tokens-wrapper/index.js ADDED
@@ -0,0 +1 @@
1
+ export{TokensWrapper as default}from"./tokens-wrapper.component.js";
package/esm/components/tokens-wrapper/tokens-wrapper.component.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ export interface TokenWrapperProps {
3
+ children: React.ReactNode;
4
+ height?: string;
5
+ }
6
+ export declare const TokensWrapper: ({ children, height, }: TokenWrapperProps) => React.JSX.Element;
7
+ export default TokensWrapper;
package/esm/components/tokens-wrapper/tokens-wrapper.component.js ADDED
@@ -0,0 +1 @@
1
+ import{jsx as e}from"react/jsx-runtime";import"react";import t from"styled-components";import o from"./__internal__/static-tokens/index.js";const r=t.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"sc-b10ea2fd-0"})([""," height:",";"],o,(({height:e})=>e)),n=({children:t,height:o="auto"})=>e(r,{"data-component":"tokens-wrapper","data-role":"tokens-wrapper",height:o,children:t});export{n as TokensWrapper,n as default};
package/lib/components/tokens-wrapper/__internal__/static-tokens/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "\n --global-borderwidth-none: 0;\n --global-borderwidth-xs: 1px;\n --global-borderwidth-s: 2px;\n --global-borderwidth-m: 3px;\n --global-borderwidth-l: 4px;\n --global-borderwidth-xl: 6px;\n --global-borderwidth-xxl: 8px;\n --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-icon-s: 20px sage-icons;\n --global-font-fluid-comp-icon-m: 20px sage-icons;\n --global-font-fluid-comp-icon-l: 20px sage-icons;\n --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-icon-s: 20px sage-icons;\n --global-font-static-comp-icon-m: 20px sage-icons;\n --global-font-static-comp-icon-l: 20px sage-icons;\n --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n --global-modifier-button-active: 0.30;\n --global-modifier-button-active-alt: 0.15;\n --global-modifier-button-hover: 0.15;\n --global-modifier-button-hover-alt: 0.10;\n --global-modifier-input-disabled-fg: 0.3;\n --global-modifier-input-disabled-bg: 0.05;\n --global-radius-none: 0;\n --global-radius-container3xs: 1px;\n --global-radius-container2xs: 2px;\n --global-radius-container-xs: 4px;\n --global-radius-container-s: 6px;\n --global-radius-container-m: 8px;\n --global-radius-container-l: 16px;\n --global-radius-container-xl: 24px;\n --global-radius-container2xl: 32px;\n --global-radius-container3xl: 40px;\n --global-radius-container4xl: 80px;\n --global-radius-container-circle: 999px;\n --global-radius-action2xs: 1px;\n --global-radius-action-xs: 2px;\n --global-radius-action-s: 4px;\n --global-radius-action-m: 8px;\n --global-radius-action-l: 16px;\n --global-radius-action-xl: 20px;\n --global-radius-action2xl: 24px;\n --global-radius-action-circle: 999px;\n --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n --global-size-none: 0px;\n --global-size6xs: 2px;\n --global-size5xs: 4px;\n --global-size4xs: 8px;\n --global-size3xs: 16px;\n --global-size2xs: 20px;\n --global-size-xs: 24px;\n --global-size-s: 32px;\n --global-size-m: 40px;\n --global-size-l: 48px;\n --global-size-xl: 56px;\n --global-size2xl: 64px;\n --global-size3xl: 72px;\n --global-size4xl: 80px;\n --global-space-none: 0px;\n --global-space-layout3xs: 8px;\n --global-space-layout2xs: 16px;\n --global-space-layout-xs: 24px;\n --global-space-layout-s: 32px;\n --global-space-layout-m: 40px;\n --global-space-layout-l: 48px;\n --global-space-layout-xl: 56px;\n --global-space-layout2xl: 64px;\n --global-space-layout3xl: 72px;\n --global-space-layout4xl: 80px;\n --global-space-comp2xs: 2px;\n --global-space-comp-xs: 4px;\n --global-space-comp-s: 8px;\n --global-space-comp-m: 12px;\n --global-space-comp-l: 16px;\n --global-space-comp-xl: 24px;\n --global-space-comp2xl: 32px;\n --mode-color-none: #fff0;\n --mode-color-ai-stop1: #13a038;\n --mode-color-ai-stop2: #149197;\n --mode-color-ai-stop3: #a87cfb;\n --mode-color-ai-alt-stop1: #00d639;\n --mode-color-ai-alt-stop2: #00d6de;\n --mode-color-ai-alt-stop3: #9d60ff;\n --mode-color-brand-default: #000000;\n --mode-color-brand-default-alt: #000000;\n --mode-color-brand-with-default-alt: #FFFFFF;\n --mode-color-brand-inverse-default: #00d639;\n --mode-color-brand-inverse-default-alt: #FFFFFF;\n --mode-color-brand-inverse-with-default-alt: #000000;\n --mode-color-brand-copilot-default: #000000;\n --mode-color-brand-copilot-monochrome: #000000;\n --mode-color-brand-copilot-with-default: #00d639;\n --mode-color-brand-copilot-inverse-default: #FFFFFF;\n --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n --mode-color-brand-copilot-inverse-with-default: #00d639;\n --mode-color-colorcode-blue-deep: #0071c3;\n --mode-color-colorcode-blue-muted: #e4eeff;\n --mode-color-colorcode-teal-deep: #007C7B;\n --mode-color-colorcode-teal-muted: #C8F5F5;\n --mode-color-colorcode-green-deep: #00811F;\n --mode-color-colorcode-green-muted: #D1F6D6;\n --mode-color-colorcode-lime-deep: #627600;\n --mode-color-colorcode-lime-muted: #e8f1d4;\n --mode-color-colorcode-orange-deep: #d64309;\n --mode-color-colorcode-orange-muted: #ffeaca;\n --mode-color-colorcode-red-deep: #db004e;\n --mode-color-colorcode-red-muted: #ffe8ea;\n --mode-color-colorcode-pink-deep: #c72699;\n --mode-color-colorcode-pink-muted: #fee8f5;\n --mode-color-colorcode-purple-deep: #8f4bd7;\n --mode-color-colorcode-purple-muted: #F3EBFE;\n --mode-color-colorcode-slate-deep: #527386;\n --mode-color-colorcode-slate-muted: #e4eff5;\n --mode-color-colorcode-gray-deep: #6f6f6f;\n --mode-color-colorcode-gray-muted: #eeeeee;\n --mode-color-generic-bg-nought: #FFFFFF;\n --mode-color-generic-bg-faint: #0000000a;\n --mode-color-generic-bg-delicate: #00000014;\n --mode-color-generic-bg-soft: #0000001e;\n --mode-color-generic-bg-moderate: #00000029;\n --mode-color-generic-bg-firm: #0000003d;\n --mode-color-generic-bg-harsh: #00000052;\n --mode-color-generic-bg-severe: #0006;\n --mode-color-generic-bg-extreme: #000000;\n --mode-color-generic-bg-inverse-nought: #000000;\n --mode-color-generic-bg-inverse-faint: #ffffff0a;\n --mode-color-generic-bg-inverse-delicate: #ffffff14;\n --mode-color-generic-bg-inverse-soft: #ffffff1e;\n --mode-color-generic-bg-inverse-moderate: #ffffff29;\n --mode-color-generic-bg-inverse-firm: #ffffff3d;\n --mode-color-generic-bg-inverse-harsh: #ffffff52;\n --mode-color-generic-bg-inverse-severe: #fff6;\n --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-extreme: #000000;\n --mode-color-generic-txt-severe: #000000f2;\n --mode-color-generic-txt-moderate: #000000a6;\n --mode-color-generic-txt-soft: #0000008c;\n --mode-color-generic-txt-delicate: #0000006b;\n --mode-color-generic-txt-faint: #0000004d;\n --mode-color-generic-txt-nought: #FFFFFF;\n --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-inverse-severe: #fffffff2;\n --mode-color-generic-txt-inverse-moderate: #ffffffab;\n --mode-color-generic-txt-inverse-soft: #ffffff8c;\n --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n --mode-color-generic-txt-inverse-faint: #ffffff4d;\n --mode-color-generic-txt-inverse-nought: #000000;\n --mode-color-generic-fg-nought: #FFFFFF;\n --mode-color-generic-fg-delicate: #eeeeee;\n --mode-color-generic-fg-soft: #a0a0a0;\n --mode-color-generic-fg-moderate: #8b8b8b;\n --mode-color-generic-fg-firm: #7c7c7c;\n --mode-color-generic-fg-extreme: #000000;\n --mode-color-generic-fg-inverse-nought: #000000;\n --mode-color-generic-fg-inverse-delicate: #181818;\n --mode-color-generic-fg-inverse-soft: #505050;\n --mode-color-generic-fg-inverse-moderate: #616161;\n --mode-color-generic-fg-inverse-firm: #6f6f6f;\n --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n --mode-color-generic-surface-nought: #FFFFFF;\n --mode-color-generic-surface-faint: #f4f4f4;\n --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-action-ai-active-stop1: #13a03826;\n --mode-color-action-ai-active-stop2: #14919726;\n --mode-color-action-ai-active-stop3: #a87cfb26;\n --mode-color-action-ai-hover-stop1: #13a03814;\n --mode-color-action-ai-hover-stop2: #14919714;\n --mode-color-action-ai-hover-stop3: #a87cfb14;\n --mode-color-action-danger-active: #a30037;\n --mode-color-action-danger-default: #db004e;\n --mode-color-action-danger-default-alt: #c40044;\n --mode-color-action-danger-hover: #c40044;\n --mode-color-action-danger-hover-alt: #db004e26;\n --mode-color-action-danger-hover-alt2: #a30037;\n --mode-color-action-danger-with-active: #FFFFFF;\n --mode-color-action-danger-with-default: #FFFFFF;\n --mode-color-action-danger-inverse-active: #ff728d;\n --mode-color-action-danger-inverse-default: #f50059;\n --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n --mode-color-action-danger-inverse-hover: #ff3e6a;\n --mode-color-action-danger-inverse-hover-alt: #f5005926;\n --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n --mode-color-action-danger-inverse-with-active: #000000;\n --mode-color-action-danger-inverse-with-default: #000000;\n --mode-color-action-data-entry-default: #FFFFFF;\n --mode-color-action-data-entry-with-active: #000000;\n --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n --mode-color-action-data-entry-with-hover: #000000;\n --mode-color-action-data-entry-hover-alt: #0000001a;\n --mode-color-action-data-entry-with-default: #7c7c7c;\n --mode-color-action-data-entry-default-alt: #f4f9fc;\n --mode-color-action-data-entry-txt: #000000f2;\n --mode-color-action-data-entry-txt-alt: #0000008c;\n --mode-color-action-data-entry-inverse-default: #000000;\n --mode-color-action-data-entry-inverse-with-default: #6f6f6f;\n --mode-color-action-data-entry-inverse-txt: #fffffff2;\n --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n --mode-color-action-focus-default: #000000;\n --mode-color-action-focus-txt: #000000;\n --mode-color-action-focus-with-default: #FFB500;\n --mode-color-action-focus-with-default-alt: #ffd274;\n --mode-color-action-focus-inverse-default: #FFB500;\n --mode-color-action-focus-inverse-txt: #FFFFFF;\n --mode-color-action-focus-inverse-with-default: #000000;\n --mode-color-action-focus-inverse-with-default-alt: #885e00;\n --mode-color-action-inactive-default: #0000004d;\n --mode-color-action-inactive-mask: #0006;\n --mode-color-action-inactive-default-alt: #eeeeee;\n --mode-color-action-inactive-txt: #0000006b;\n --mode-color-action-inactive-txt-alt: #FFFFFF;\n --mode-color-action-inactive-icon: #0000006b;\n --mode-color-action-inactive-icon-alt: #0000008c;\n --mode-color-action-inactive-inverse-default: #ffffff4d;\n --mode-color-action-inactive-inverse-txt: #ffffff6b;\n --mode-color-action-inactive-inverse-txt-alt: #000000;\n --mode-color-action-grayscale-active: #000000;\n --mode-color-action-grayscale-active-alt: #00000026;\n --mode-color-action-grayscale-default: #000000e6;\n --mode-color-action-grayscale-default-alt: #000000ab;\n --mode-color-action-grayscale-hover-alt: #0000001a;\n --mode-color-action-grayscale-hover: #00000026;\n --mode-color-action-grayscale-with-active: #FFFFFF;\n --mode-color-action-grayscale-with-active-alt: #000000;\n --mode-color-action-grayscale-with-default: #FFFFFF;\n --mode-color-action-grayscale-with-hover: #000000;\n --mode-color-action-grayscale-inverse-active: #FFFFFF;\n --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n --mode-color-action-grayscale-inverse-default: #ffffffe6;\n --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n --mode-color-action-grayscale-inverse-hover: #ffffff26;\n --mode-color-action-grayscale-inverse-with-active: #000000;\n --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n --mode-color-action-grayscale-inverse-with-default: #000000;\n --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n --mode-color-action-nav-active: #00000026;\n --mode-color-action-nav-default: #FFFFFF;\n --mode-color-action-nav-default-alt: #f8f8f8;\n --mode-color-action-nav-hover: #0000001a;\n --mode-color-action-nav-with-active: #000000;\n --mode-color-action-nav-with-default: #000000f2;\n --mode-color-action-nav-with-hover: #000000;\n --mode-color-action-nav-inverse-active: #ffffff26;\n --mode-color-action-nav-inverse-default: #000000;\n --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n --mode-color-action-nav-inverse-hover: #ffffff1a;\n --mode-color-action-nav-inverse-with-active: #FFFFFF;\n --mode-color-action-nav-inverse-with-default: #fffffff2;\n --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n --mode-color-action-main-active: #005e14;\n --mode-color-action-main-active-alt: #00811f4d;\n --mode-color-action-main-default: #00811f;\n --mode-color-action-main-default-alt: #00811fcc;\n --mode-color-action-main-default-alt2: #007219;\n --mode-color-action-main-default-alt3: #00811f08;\n --mode-color-action-main-hover: #007219;\n --mode-color-action-main-hover-alt: #00811f26;\n --mode-color-action-main-hover-alt2: #005e14;\n --mode-color-action-main-with-active: #FFFFFF;\n --mode-color-action-main-with-default: #FFFFFF;\n --mode-color-action-main-with-hover: #FFFFFF;\n --mode-color-action-main-inverse-active: #8fff98;\n --mode-color-action-main-inverse-active-alt: #00f1424d;\n --mode-color-action-main-inverse-default: #00f142;\n --mode-color-action-main-inverse-default-alt: #00f142cc;\n --mode-color-action-main-inverse-default-alt2: #46fb5e;\n --mode-color-action-main-inverse-default-alt3: #00f14208;\n --mode-color-action-main-inverse-hover: #46fb5e;\n --mode-color-action-main-inverse-hover-alt: #00f14226;\n --mode-color-action-main-inverse-hover-alt2: #8fff98;\n --mode-color-action-main-inverse-with-active: #000000;\n --mode-color-action-main-inverse-with-default: #000000;\n --mode-color-action-main-inverse-with-hover: #000000;\n --mode-color-status-ai-default: #FFFFFF;\n --mode-color-status-ai-default-alt: #000000;\n --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-callout-default-alt: #e0ffe2;\n --mode-color-status-callout-hover-alt: #b7ffbd;\n --mode-color-status-skeleton-stop1: #747474cc;\n --mode-color-status-skeleton-stop2: #7474740a;\n --mode-color-status-warning-default: #d64309;\n --mode-color-status-warning-default-alt: #fff7eb;\n --mode-color-status-warning-hover: #b33400;\n --mode-color-status-warning-hover-alt: #ffeaca;\n --mode-color-status-warning-txt: #b33400;\n --mode-color-status-warning-inverse-default: #e24300;\n --mode-color-status-warning-inverse-default-alt: #1d0300;\n --mode-color-status-warning-inverse-hover: #e5631c;\n --mode-color-status-warning-inverse-hover-alt: #360900;\n --mode-color-status-warning-inverse-txt: #e5631c;\n --mode-color-status-txt-with-default: #FFFFFF;\n --mode-color-status-txt-with-default-alt: #000000f2;\n --mode-color-status-txt-with-hover: #FFFFFF;\n --mode-color-status-txt-with-hover-alt: #000000;\n --mode-color-status-txt-loading: #747474;\n --mode-color-status-txt-inverse-with-default: #000000;\n --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n --mode-color-status-txt-inverse-with-hover: #000000;\n --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n --mode-color-status-custom-blue-default: #0071c3;\n --mode-color-status-custom-blue-default-alt: #f5f8ff;\n --mode-color-status-custom-blue-hover: #0063ad;\n --mode-color-status-custom-blue-hover-alt: #e4eeff;\n --mode-color-status-custom-teal-default: #007C7B;\n --mode-color-status-custom-teal-default-alt: #E8FCFC;\n --mode-color-status-custom-teal-hover: #006D6C;\n --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n --mode-color-status-custom-green-default: #00811F;\n --mode-color-status-custom-green-default-alt: #EEFCEF;\n --mode-color-status-custom-green-hover: #007219;\n --mode-color-status-custom-green-hover-alt: #D1F6D6;\n --mode-color-status-custom-lime-default: #627600;\n --mode-color-status-custom-lime-default-alt: #f6f9f0;\n --mode-color-status-custom-lime-hover: #576900;\n --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n --mode-color-status-custom-orange-default: #d64309;\n --mode-color-status-custom-orange-default-alt: #fff7eb;\n --mode-color-status-custom-orange-hover: #b33400;\n --mode-color-status-custom-orange-hover-alt: #ffeaca;\n --mode-color-status-custom-orange-txt: #b33400;\n --mode-color-status-custom-red-default: #db004e;\n --mode-color-status-custom-red-default-alt: #fff5f6;\n --mode-color-status-custom-red-hover: #c40044;\n --mode-color-status-custom-red-hover-alt: #ffe8ea;\n --mode-color-status-custom-pink-default: #c72699;\n --mode-color-status-custom-pink-default-alt: #fff5fa;\n --mode-color-status-custom-pink-hover: #b02086;\n --mode-color-status-custom-pink-hover-alt: #fee8f5;\n --mode-color-status-custom-purple-default: #8f4bd7;\n --mode-color-status-custom-purple-default-alt: #f9f6ff;\n --mode-color-status-custom-purple-hover: #803ec5;\n --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n --mode-color-status-custom-gray-default: #6f6f6f;\n --mode-color-status-custom-gray-default-alt: #f8f8f8;\n --mode-color-status-custom-gray-hover: #616161;\n --mode-color-status-custom-gray-hover-alt: #eeeeee;\n --mode-color-status-custom-slate-default: #527386;\n --mode-color-status-custom-slate-default-alt: #f4f9fc;\n --mode-color-status-custom-slate-hover: #486576;\n --mode-color-status-custom-slate-hover-alt: #e4eff5;\n --mode-color-status-priority-default: #8f4bd7;\n --mode-color-status-priority-default-alt: #f9f6ff;\n --mode-color-status-priority-hover: #803ec5;\n --mode-color-status-priority-hover-alt: #F3EBFE;\n --mode-color-status-priority-inverse-default: #9463d7;\n --mode-color-status-priority-inverse-default-alt: #10041f;\n --mode-color-status-priority-inverse-hover: #a375dd;\n --mode-color-status-priority-inverse-hover-alt: #220c3a;\n --mode-color-status-inactive-default: #7c7c7c;\n --mode-color-status-inactive-with-default: #0000008c;\n --mode-color-status-inactive-inverse-default: #6f6f6f;\n --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n --mode-color-status-info-default: #0071c3;\n --mode-color-status-info-default-alt: #f5f8ff;\n --mode-color-status-info-hover: #0063ad;\n --mode-color-status-info-hover-alt: #e4eeff;\n --mode-color-status-info-inverse-default: #007fd9;\n --mode-color-status-info-inverse-default-alt: #000b1c;\n --mode-color-status-info-inverse-hover: #008ef4;\n --mode-color-status-info-inverse-hover-alt: #001932;\n --mode-color-status-negative-default: #db004e;\n --mode-color-status-negative-default-alt: #fff5f6;\n --mode-color-status-negative-hover: #c40044;\n --mode-color-status-negative-hover-alt: #ffe8ea;\n --mode-color-status-negative-inverse-default: #f50059;\n --mode-color-status-negative-inverse-default-alt: #1e0005;\n --mode-color-status-negative-inverse-hover: #ff3e6a;\n --mode-color-status-negative-inverse-hover-alt: #3c000f;\n --mode-color-status-neutral-default: #6f6f6f;\n --mode-color-status-neutral-default-alt: #f8f8f8;\n --mode-color-status-neutral-hover: #616161;\n --mode-color-status-neutral-hover-alt: #eeeeee;\n --mode-color-status-neutral-inverse-default: #7c7c7c;\n --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n --mode-color-status-neutral-inverse-hover: #8b8b8b;\n --mode-color-status-neutral-inverse-hover-alt: #181818;\n --mode-color-status-positive-default: #00811F;\n --mode-color-status-positive-default-alt: #EEFCEF;\n --mode-color-status-positive-hover: #007219;\n --mode-color-status-positive-hover-alt: #D1F6D6;\n --mode-color-status-positive-inverse-default: #019127;\n --mode-color-status-positive-inverse-default-alt: #001001;\n --mode-color-status-positive-inverse-hover: #007219;\n --mode-color-status-positive-inverse-hover-alt: #001f03;\n --badge-none: var(--mode-color-none);\n --badge-border-default: var(--mode-color-generic-txt-nought);\n --badge-bg-default: var(--mode-color-status-negative-default);\n --badge-bg-alt: var(--mode-color-status-info-default);\n --badge-label-default: var(--mode-color-generic-txt-nought);\n --badge-label-alt: var(--mode-color-generic-txt-nought);\n --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n --button-none: var(--mode-color-none);\n --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n --button-ai-label-default: var(--mode-color-action-grayscale-default);\n --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-tertiary-bg-default: var(--button-none);\n --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-tertiary-inverse-bg-default: var(--button-none);\n --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n --container-action-border-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --container-action-border-active: var(--mode-color-action-grayscale-active);\n --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n --container-action-border-default: var(--mode-color-generic-fg-firm);\n --container-action-icon-active: var(--mode-color-action-grayscale-active);\n --container-action-icon-default: var(--mode-color-action-grayscale-default);\n --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n --container-action-txt-active: var(--mode-color-action-grayscale-active);\n --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n --container-action-txt-default: var(--mode-color-generic-txt-severe);\n --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n --container-action-target-bg-default: var(--mode-color-status-info-default);\n --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n --container-standard-border-active: var(--mode-color-action-grayscale-active);\n --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n --container-standard-border-default: var(--mode-color-generic-fg-soft);\n --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n --container-standard-icon: var(--mode-color-generic-fg-firm);\n --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n --container-quote-border: var(--mode-color-action-main-default);\n --container-size-bubble-max-w: 600px;\n --container-size-copilot-emptystate-illustration: 200px;\n --container-size-copilot-emptystate-txt-max-w: 600px;\n --container-size-copilot-overlay-max-h: 960px;\n --container-size-dialog-max-ws: 540px;\n --container-size-dialog-max-wm: 850px;\n --container-size-dialog-max-wl: 1080px;\n --container-size-dialog-min-w: 288px;\n --container-size-empty-state-primary-s: 200px;\n --container-size-empty-state-primary-m: 240px;\n --container-size-empty-state-primary-l: 320px;\n --container-size-fluid-items2xs: 80px;\n --container-size-fluid-items-xs: 128px;\n --container-size-fluid-items-s: 160px;\n --container-size-fluid-items-m: 200px;\n --container-size-fluid-items-l: 240px;\n --container-size-fluid-items-xl: 288px;\n --container-size-fluid-items2xl: 320px;\n --container-size-fluid-items3xl: 560px;\n --container-size-fluid-items4xl: 760px;\n --container-size-sidebar-max-ws: 760px;\n --container-size-sidebar-max-wm: 1000px;\n --container-size-sidebar-min-w: 288px;\n --focus-bg: var(--mode-color-action-focus-with-default-alt);\n --focus-borderalt: var(--mode-color-action-focus-default);\n --focus-border: var(--mode-color-action-focus-with-default);\n --focus-label: var(--mode-color-action-focus-txt);\n --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);\n --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-required: var(--mode-color-action-danger-default);\n --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n --input-typical-border-alt: var(--mode-color-action-inactive-default);\n --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n --input-switch-border-active: transparent;\n --input-switch-border-active-disabled: transparent;\n --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-validation-border-error: var(--mode-color-status-negative-default);\n --input-validation-bar-error: var(--mode-color-status-negative-default);\n --input-validation-bar-warn: var(--mode-color-status-warning-default);\n --input-validation-label-error: var(--mode-color-status-negative-default);\n --input-validation-label-success: var(--mode-color-status-positive-default);\n --input-validation-label-warn: var(--mode-color-status-warning-txt);\n --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n --input-size-generic-min-w: 288px;\n --logo-sage-bg-default: var(--mode-color-brand-default);\n --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n --message-none: var(--mode-color-none);\n --message-contextual-bg: var(--mode-color-generic-bg-nought);\n --message-contextual-icon: var(--mode-color-generic-bg-nought);\n --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n --message-contextual-error-icon: var(--mode-color-status-negative-default);\n --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n --message-contextual-info-border-default: var(--mode-color-status-info-default);\n --message-contextual-info-icon: var(--mode-color-status-info-default);\n --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n --message-contextual-success-icon: var(--mode-color-status-positive-default);\n --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n --message-global-info-icon: var(--mode-color-status-info-default);\n --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n --message-global-warning-icon: var(--mode-color-status-warning-default);\n --nav-bg-default: var(--mode-color-generic-bg-nought);\n --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n --nav-leftnav-item-bg-default: var(--mode-color-none);\n --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n --nav-modal-item-bg-default: var(--mode-color-none);\n --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n --nav-topnav-item-bg-default: var(--mode-color-none);\n --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n --page-bg-default: var(--mode-color-generic-surface-nought);\n --page-bg-alt: var(--mode-color-generic-surface-faint);\n --page-txt-alt: var(--mode-color-generic-txt-moderate);\n --page-txt-default: var(--mode-color-generic-txt-severe);\n --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n --popover-bg-active: var(--mode-color-action-grayscale-active);\n --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n --popover-bg-default: var(--mode-color-generic-bg-nought);\n --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --popover-label-active: var(--mode-color-action-grayscale-with-active);\n --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n --popover-label-disabled: var(--mode-color-action-inactive-txt);\n --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n --profile-size-outside-xs: var(--global-size-xs);\n --profile-size-outside-s: var(--global-size-s);\n --profile-size-outside-m: var(--global-size-m);\n --profile-size-outside-ml: 56px;\n --profile-size-outside-l: var(--global-size-4-xl);\n --profile-size-outside-xl: 104px;\n --profile-size-outside-xxl: 128px;\n --profile-size-inside-xs: var(--global-size-3-xs);\n --profile-size-inside-s: var(--global-size-2-xs);\n --profile-size-inside-m: var(--global-size-xs);\n --profile-size-inside-ml: var(--global-size-s);\n --profile-size-inside-l: var(--global-size-l);\n --profile-size-inside-xl: var(--global-size-2-xl);\n --profile-size-inside-xxl: var(--global-size-4-xl);\n --profile-bg-alt: var(--mode-color-generic-txt-severe);\n --profile-bg-def: var(--mode-color-generic-bg-nought);\n --profile-border-default: var(--mode-color-generic-fg-moderate);\n --profile-label-default: var(--mode-color-generic-txt-severe);\n --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n --profile-font-def-s: var(--global-font-static-comp-regular-m);\n --profile-font-def-m: var(--global-font-static-comp-regular-m);\n --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n --profile-font-def-l: var(--global-font-static-comp-regular-l);\n --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n --profile-font-heading-m: var(--global-font-static-subheading-l);\n --profile-font-heading-ml: var(--global-font-static-subheading-l);\n --profile-font-heading-l: var(--global-font-static-subheading-l);\n --profile-font-heading-xl: var(--global-font-static-heading-m);\n --profile-font-heading-xxl: var(--global-font-static-heading-l);\n --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n --progress-none: var(--mode-color-none);\n --progress-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-border-default: var(--mode-color-generic-fg-firm);\n --progress-fg-alt: var(--mode-color-status-positive-default);\n --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n --progress-fg-caution: var(--mode-color-status-warning-default);\n --progress-fg-default: var(--mode-color-action-grayscale-active);\n --progress-fg-error: var(--mode-color-status-negative-default);\n --progress-fg-info: var(--mode-color-status-info-default);\n --progress-label-alt: var(--mode-color-generic-txt-moderate);\n --progress-label-default: var(--mode-color-generic-txt-severe);\n --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);\n --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n --progress-loader-fg-error: var(--mode-color-status-negative-default);\n --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n --pill-generic-none: var(--mode-color-none);\n --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n --pill-error-bg-default: var(--mode-color-status-negative-default);\n --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n --pill-error-border-default: var(--mode-color-status-negative-default);\n --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-priority-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-border-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-info-bg-default: var(--mode-color-status-info-default);\n --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-info-bg-hover: var(--mode-color-status-info-hover);\n --pill-info-border-default: var(--mode-color-status-info-default);\n --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n --pill-readonly-label: var(--mode-color-generic-txt-soft);\n --pill-positive-bg-default: var(--mode-color-status-positive-default);\n --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n --pill-positive-border-default: var(--mode-color-status-positive-default);\n --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-warn-bg-default: var(--mode-color-status-warning-default);\n --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n --pill-warn-border-default: var(--mode-color-status-warning-default);\n --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n --tab-bg-default: var(--mode-color-none);\n --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n --tab-border-active: var(--mode-color-action-grayscale-active);\n --tab-border-default: var(--mode-color-generic-fg-moderate);\n --tab-border-hover: var(--mode-color-generic-fg-firm);\n --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-label-active: var(--mode-color-action-grayscale-active);\n --tab-icon-active: var(--mode-color-action-grayscale-active);\n --tab-label-default: var(--mode-color-action-grayscale-default);\n --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n --tab-validation-border-warning: var(--mode-color-status-warning-default);\n --tab-validation-border-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n --tab-validation-label-error: var(--mode-color-status-negative-default);\n --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n --table-header-subtle-bg-default: var(--mode-color-none);\n --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n --table-row-bg-default: var(--mode-color-generic-bg-nought);\n --table-row-bg-alt: var(--mode-color-generic-bg-faint);\n --table-row-bg-alt2: var(--mode-color-generic-bg-soft);\n --table-row-bg-alt3: var(--mode-color-generic-bg-faint);\n --table-row-bg-selected: var(--mode-color-generic-bg-moderate);\n --table-row-border-default: var(--mode-color-generic-fg-soft);\n --table-row-label-default: var(--mode-color-generic-txt-severe);\n --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n --table-footer-bg-default: var(--mode-color-generic-bg-moderate);\n --table-footer-border-default: var(--mode-color-generic-fg-moderate);\n --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
2
+ export default _default;
package/lib/components/tokens-wrapper/__internal__/static-tokens/index.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default="\n --global-borderwidth-none: 0;\n --global-borderwidth-xs: 1px;\n --global-borderwidth-s: 2px;\n --global-borderwidth-m: 3px;\n --global-borderwidth-l: 4px;\n --global-borderwidth-xl: 6px;\n --global-borderwidth-xxl: 8px;\n --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-icon-s: 20px sage-icons;\n --global-font-fluid-comp-icon-m: 20px sage-icons;\n --global-font-fluid-comp-icon-l: 20px sage-icons;\n --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-icon-s: 20px sage-icons;\n --global-font-static-comp-icon-m: 20px sage-icons;\n --global-font-static-comp-icon-l: 20px sage-icons;\n --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n --global-modifier-button-active: 0.30;\n --global-modifier-button-active-alt: 0.15;\n --global-modifier-button-hover: 0.15;\n --global-modifier-button-hover-alt: 0.10;\n --global-modifier-input-disabled-fg: 0.3;\n --global-modifier-input-disabled-bg: 0.05;\n --global-radius-none: 0;\n --global-radius-container3xs: 1px;\n --global-radius-container2xs: 2px;\n --global-radius-container-xs: 4px;\n --global-radius-container-s: 6px;\n --global-radius-container-m: 8px;\n --global-radius-container-l: 16px;\n --global-radius-container-xl: 24px;\n --global-radius-container2xl: 32px;\n --global-radius-container3xl: 40px;\n --global-radius-container4xl: 80px;\n --global-radius-container-circle: 999px;\n --global-radius-action2xs: 1px;\n --global-radius-action-xs: 2px;\n --global-radius-action-s: 4px;\n --global-radius-action-m: 8px;\n --global-radius-action-l: 16px;\n --global-radius-action-xl: 20px;\n --global-radius-action2xl: 24px;\n --global-radius-action-circle: 999px;\n --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n --global-size-none: 0px;\n --global-size6xs: 2px;\n --global-size5xs: 4px;\n --global-size4xs: 8px;\n --global-size3xs: 16px;\n --global-size2xs: 20px;\n --global-size-xs: 24px;\n --global-size-s: 32px;\n --global-size-m: 40px;\n --global-size-l: 48px;\n --global-size-xl: 56px;\n --global-size2xl: 64px;\n --global-size3xl: 72px;\n --global-size4xl: 80px;\n --global-space-none: 0px;\n --global-space-layout3xs: 8px;\n --global-space-layout2xs: 16px;\n --global-space-layout-xs: 24px;\n --global-space-layout-s: 32px;\n --global-space-layout-m: 40px;\n --global-space-layout-l: 48px;\n --global-space-layout-xl: 56px;\n --global-space-layout2xl: 64px;\n --global-space-layout3xl: 72px;\n --global-space-layout4xl: 80px;\n --global-space-comp2xs: 2px;\n --global-space-comp-xs: 4px;\n --global-space-comp-s: 8px;\n --global-space-comp-m: 12px;\n --global-space-comp-l: 16px;\n --global-space-comp-xl: 24px;\n --global-space-comp2xl: 32px;\n --mode-color-none: #fff0;\n --mode-color-ai-stop1: #13a038;\n --mode-color-ai-stop2: #149197;\n --mode-color-ai-stop3: #a87cfb;\n --mode-color-ai-alt-stop1: #00d639;\n --mode-color-ai-alt-stop2: #00d6de;\n --mode-color-ai-alt-stop3: #9d60ff;\n --mode-color-brand-default: #000000;\n --mode-color-brand-default-alt: #000000;\n --mode-color-brand-with-default-alt: #FFFFFF;\n --mode-color-brand-inverse-default: #00d639;\n --mode-color-brand-inverse-default-alt: #FFFFFF;\n --mode-color-brand-inverse-with-default-alt: #000000;\n --mode-color-brand-copilot-default: #000000;\n --mode-color-brand-copilot-monochrome: #000000;\n --mode-color-brand-copilot-with-default: #00d639;\n --mode-color-brand-copilot-inverse-default: #FFFFFF;\n --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n --mode-color-brand-copilot-inverse-with-default: #00d639;\n --mode-color-colorcode-blue-deep: #0071c3;\n --mode-color-colorcode-blue-muted: #e4eeff;\n --mode-color-colorcode-teal-deep: #007C7B;\n --mode-color-colorcode-teal-muted: #C8F5F5;\n --mode-color-colorcode-green-deep: #00811F;\n --mode-color-colorcode-green-muted: #D1F6D6;\n --mode-color-colorcode-lime-deep: #627600;\n --mode-color-colorcode-lime-muted: #e8f1d4;\n --mode-color-colorcode-orange-deep: #d64309;\n --mode-color-colorcode-orange-muted: #ffeaca;\n --mode-color-colorcode-red-deep: #db004e;\n --mode-color-colorcode-red-muted: #ffe8ea;\n --mode-color-colorcode-pink-deep: #c72699;\n --mode-color-colorcode-pink-muted: #fee8f5;\n --mode-color-colorcode-purple-deep: #8f4bd7;\n --mode-color-colorcode-purple-muted: #F3EBFE;\n --mode-color-colorcode-slate-deep: #527386;\n --mode-color-colorcode-slate-muted: #e4eff5;\n --mode-color-colorcode-gray-deep: #6f6f6f;\n --mode-color-colorcode-gray-muted: #eeeeee;\n --mode-color-generic-bg-nought: #FFFFFF;\n --mode-color-generic-bg-faint: #0000000a;\n --mode-color-generic-bg-delicate: #00000014;\n --mode-color-generic-bg-soft: #0000001e;\n --mode-color-generic-bg-moderate: #00000029;\n --mode-color-generic-bg-firm: #0000003d;\n --mode-color-generic-bg-harsh: #00000052;\n --mode-color-generic-bg-severe: #0006;\n --mode-color-generic-bg-extreme: #000000;\n --mode-color-generic-bg-inverse-nought: #000000;\n --mode-color-generic-bg-inverse-faint: #ffffff0a;\n --mode-color-generic-bg-inverse-delicate: #ffffff14;\n --mode-color-generic-bg-inverse-soft: #ffffff1e;\n --mode-color-generic-bg-inverse-moderate: #ffffff29;\n --mode-color-generic-bg-inverse-firm: #ffffff3d;\n --mode-color-generic-bg-inverse-harsh: #ffffff52;\n --mode-color-generic-bg-inverse-severe: #fff6;\n --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-extreme: #000000;\n --mode-color-generic-txt-severe: #000000f2;\n --mode-color-generic-txt-moderate: #000000a6;\n --mode-color-generic-txt-soft: #0000008c;\n --mode-color-generic-txt-delicate: #0000006b;\n --mode-color-generic-txt-faint: #0000004d;\n --mode-color-generic-txt-nought: #FFFFFF;\n --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-inverse-severe: #fffffff2;\n --mode-color-generic-txt-inverse-moderate: #ffffffab;\n --mode-color-generic-txt-inverse-soft: #ffffff8c;\n --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n --mode-color-generic-txt-inverse-faint: #ffffff4d;\n --mode-color-generic-txt-inverse-nought: #000000;\n --mode-color-generic-fg-nought: #FFFFFF;\n --mode-color-generic-fg-delicate: #eeeeee;\n --mode-color-generic-fg-soft: #a0a0a0;\n --mode-color-generic-fg-moderate: #8b8b8b;\n --mode-color-generic-fg-firm: #7c7c7c;\n --mode-color-generic-fg-extreme: #000000;\n --mode-color-generic-fg-inverse-nought: #000000;\n --mode-color-generic-fg-inverse-delicate: #181818;\n --mode-color-generic-fg-inverse-soft: #505050;\n --mode-color-generic-fg-inverse-moderate: #616161;\n --mode-color-generic-fg-inverse-firm: #6f6f6f;\n --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n --mode-color-generic-surface-nought: #FFFFFF;\n --mode-color-generic-surface-faint: #f4f4f4;\n --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-action-ai-active-stop1: #13a03826;\n --mode-color-action-ai-active-stop2: #14919726;\n --mode-color-action-ai-active-stop3: #a87cfb26;\n --mode-color-action-ai-hover-stop1: #13a03814;\n --mode-color-action-ai-hover-stop2: #14919714;\n --mode-color-action-ai-hover-stop3: #a87cfb14;\n --mode-color-action-danger-active: #a30037;\n --mode-color-action-danger-default: #db004e;\n --mode-color-action-danger-default-alt: #c40044;\n --mode-color-action-danger-hover: #c40044;\n --mode-color-action-danger-hover-alt: #db004e26;\n --mode-color-action-danger-hover-alt2: #a30037;\n --mode-color-action-danger-with-active: #FFFFFF;\n --mode-color-action-danger-with-default: #FFFFFF;\n --mode-color-action-danger-inverse-active: #ff728d;\n --mode-color-action-danger-inverse-default: #f50059;\n --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n --mode-color-action-danger-inverse-hover: #ff3e6a;\n --mode-color-action-danger-inverse-hover-alt: #f5005926;\n --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n --mode-color-action-danger-inverse-with-active: #000000;\n --mode-color-action-danger-inverse-with-default: #000000;\n --mode-color-action-data-entry-default: #FFFFFF;\n --mode-color-action-data-entry-with-active: #000000;\n --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n --mode-color-action-data-entry-with-hover: #000000;\n --mode-color-action-data-entry-hover-alt: #0000001a;\n --mode-color-action-data-entry-with-default: #7c7c7c;\n --mode-color-action-data-entry-default-alt: #f4f9fc;\n --mode-color-action-data-entry-txt: #000000f2;\n --mode-color-action-data-entry-txt-alt: #0000008c;\n --mode-color-action-data-entry-inverse-default: #000000;\n --mode-color-action-data-entry-inverse-with-default: #6f6f6f;\n --mode-color-action-data-entry-inverse-txt: #fffffff2;\n --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n --mode-color-action-focus-default: #000000;\n --mode-color-action-focus-txt: #000000;\n --mode-color-action-focus-with-default: #FFB500;\n --mode-color-action-focus-with-default-alt: #ffd274;\n --mode-color-action-focus-inverse-default: #FFB500;\n --mode-color-action-focus-inverse-txt: #FFFFFF;\n --mode-color-action-focus-inverse-with-default: #000000;\n --mode-color-action-focus-inverse-with-default-alt: #885e00;\n --mode-color-action-inactive-default: #0000004d;\n --mode-color-action-inactive-mask: #0006;\n --mode-color-action-inactive-default-alt: #eeeeee;\n --mode-color-action-inactive-txt: #0000006b;\n --mode-color-action-inactive-txt-alt: #FFFFFF;\n --mode-color-action-inactive-icon: #0000006b;\n --mode-color-action-inactive-icon-alt: #0000008c;\n --mode-color-action-inactive-inverse-default: #ffffff4d;\n --mode-color-action-inactive-inverse-txt: #ffffff6b;\n --mode-color-action-inactive-inverse-txt-alt: #000000;\n --mode-color-action-grayscale-active: #000000;\n --mode-color-action-grayscale-active-alt: #00000026;\n --mode-color-action-grayscale-default: #000000e6;\n --mode-color-action-grayscale-default-alt: #000000ab;\n --mode-color-action-grayscale-hover-alt: #0000001a;\n --mode-color-action-grayscale-hover: #00000026;\n --mode-color-action-grayscale-with-active: #FFFFFF;\n --mode-color-action-grayscale-with-active-alt: #000000;\n --mode-color-action-grayscale-with-default: #FFFFFF;\n --mode-color-action-grayscale-with-hover: #000000;\n --mode-color-action-grayscale-inverse-active: #FFFFFF;\n --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n --mode-color-action-grayscale-inverse-default: #ffffffe6;\n --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n --mode-color-action-grayscale-inverse-hover: #ffffff26;\n --mode-color-action-grayscale-inverse-with-active: #000000;\n --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n --mode-color-action-grayscale-inverse-with-default: #000000;\n --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n --mode-color-action-nav-active: #00000026;\n --mode-color-action-nav-default: #FFFFFF;\n --mode-color-action-nav-default-alt: #f8f8f8;\n --mode-color-action-nav-hover: #0000001a;\n --mode-color-action-nav-with-active: #000000;\n --mode-color-action-nav-with-default: #000000f2;\n --mode-color-action-nav-with-hover: #000000;\n --mode-color-action-nav-inverse-active: #ffffff26;\n --mode-color-action-nav-inverse-default: #000000;\n --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n --mode-color-action-nav-inverse-hover: #ffffff1a;\n --mode-color-action-nav-inverse-with-active: #FFFFFF;\n --mode-color-action-nav-inverse-with-default: #fffffff2;\n --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n --mode-color-action-main-active: #005e14;\n --mode-color-action-main-active-alt: #00811f4d;\n --mode-color-action-main-default: #00811f;\n --mode-color-action-main-default-alt: #00811fcc;\n --mode-color-action-main-default-alt2: #007219;\n --mode-color-action-main-default-alt3: #00811f08;\n --mode-color-action-main-hover: #007219;\n --mode-color-action-main-hover-alt: #00811f26;\n --mode-color-action-main-hover-alt2: #005e14;\n --mode-color-action-main-with-active: #FFFFFF;\n --mode-color-action-main-with-default: #FFFFFF;\n --mode-color-action-main-with-hover: #FFFFFF;\n --mode-color-action-main-inverse-active: #8fff98;\n --mode-color-action-main-inverse-active-alt: #00f1424d;\n --mode-color-action-main-inverse-default: #00f142;\n --mode-color-action-main-inverse-default-alt: #00f142cc;\n --mode-color-action-main-inverse-default-alt2: #46fb5e;\n --mode-color-action-main-inverse-default-alt3: #00f14208;\n --mode-color-action-main-inverse-hover: #46fb5e;\n --mode-color-action-main-inverse-hover-alt: #00f14226;\n --mode-color-action-main-inverse-hover-alt2: #8fff98;\n --mode-color-action-main-inverse-with-active: #000000;\n --mode-color-action-main-inverse-with-default: #000000;\n --mode-color-action-main-inverse-with-hover: #000000;\n --mode-color-status-ai-default: #FFFFFF;\n --mode-color-status-ai-default-alt: #000000;\n --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-callout-default-alt: #e0ffe2;\n --mode-color-status-callout-hover-alt: #b7ffbd;\n --mode-color-status-skeleton-stop1: #747474cc;\n --mode-color-status-skeleton-stop2: #7474740a;\n --mode-color-status-warning-default: #d64309;\n --mode-color-status-warning-default-alt: #fff7eb;\n --mode-color-status-warning-hover: #b33400;\n --mode-color-status-warning-hover-alt: #ffeaca;\n --mode-color-status-warning-txt: #b33400;\n --mode-color-status-warning-inverse-default: #e24300;\n --mode-color-status-warning-inverse-default-alt: #1d0300;\n --mode-color-status-warning-inverse-hover: #e5631c;\n --mode-color-status-warning-inverse-hover-alt: #360900;\n --mode-color-status-warning-inverse-txt: #e5631c;\n --mode-color-status-txt-with-default: #FFFFFF;\n --mode-color-status-txt-with-default-alt: #000000f2;\n --mode-color-status-txt-with-hover: #FFFFFF;\n --mode-color-status-txt-with-hover-alt: #000000;\n --mode-color-status-txt-loading: #747474;\n --mode-color-status-txt-inverse-with-default: #000000;\n --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n --mode-color-status-txt-inverse-with-hover: #000000;\n --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n --mode-color-status-custom-blue-default: #0071c3;\n --mode-color-status-custom-blue-default-alt: #f5f8ff;\n --mode-color-status-custom-blue-hover: #0063ad;\n --mode-color-status-custom-blue-hover-alt: #e4eeff;\n --mode-color-status-custom-teal-default: #007C7B;\n --mode-color-status-custom-teal-default-alt: #E8FCFC;\n --mode-color-status-custom-teal-hover: #006D6C;\n --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n --mode-color-status-custom-green-default: #00811F;\n --mode-color-status-custom-green-default-alt: #EEFCEF;\n --mode-color-status-custom-green-hover: #007219;\n --mode-color-status-custom-green-hover-alt: #D1F6D6;\n --mode-color-status-custom-lime-default: #627600;\n --mode-color-status-custom-lime-default-alt: #f6f9f0;\n --mode-color-status-custom-lime-hover: #576900;\n --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n --mode-color-status-custom-orange-default: #d64309;\n --mode-color-status-custom-orange-default-alt: #fff7eb;\n --mode-color-status-custom-orange-hover: #b33400;\n --mode-color-status-custom-orange-hover-alt: #ffeaca;\n --mode-color-status-custom-orange-txt: #b33400;\n --mode-color-status-custom-red-default: #db004e;\n --mode-color-status-custom-red-default-alt: #fff5f6;\n --mode-color-status-custom-red-hover: #c40044;\n --mode-color-status-custom-red-hover-alt: #ffe8ea;\n --mode-color-status-custom-pink-default: #c72699;\n --mode-color-status-custom-pink-default-alt: #fff5fa;\n --mode-color-status-custom-pink-hover: #b02086;\n --mode-color-status-custom-pink-hover-alt: #fee8f5;\n --mode-color-status-custom-purple-default: #8f4bd7;\n --mode-color-status-custom-purple-default-alt: #f9f6ff;\n --mode-color-status-custom-purple-hover: #803ec5;\n --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n --mode-color-status-custom-gray-default: #6f6f6f;\n --mode-color-status-custom-gray-default-alt: #f8f8f8;\n --mode-color-status-custom-gray-hover: #616161;\n --mode-color-status-custom-gray-hover-alt: #eeeeee;\n --mode-color-status-custom-slate-default: #527386;\n --mode-color-status-custom-slate-default-alt: #f4f9fc;\n --mode-color-status-custom-slate-hover: #486576;\n --mode-color-status-custom-slate-hover-alt: #e4eff5;\n --mode-color-status-priority-default: #8f4bd7;\n --mode-color-status-priority-default-alt: #f9f6ff;\n --mode-color-status-priority-hover: #803ec5;\n --mode-color-status-priority-hover-alt: #F3EBFE;\n --mode-color-status-priority-inverse-default: #9463d7;\n --mode-color-status-priority-inverse-default-alt: #10041f;\n --mode-color-status-priority-inverse-hover: #a375dd;\n --mode-color-status-priority-inverse-hover-alt: #220c3a;\n --mode-color-status-inactive-default: #7c7c7c;\n --mode-color-status-inactive-with-default: #0000008c;\n --mode-color-status-inactive-inverse-default: #6f6f6f;\n --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n --mode-color-status-info-default: #0071c3;\n --mode-color-status-info-default-alt: #f5f8ff;\n --mode-color-status-info-hover: #0063ad;\n --mode-color-status-info-hover-alt: #e4eeff;\n --mode-color-status-info-inverse-default: #007fd9;\n --mode-color-status-info-inverse-default-alt: #000b1c;\n --mode-color-status-info-inverse-hover: #008ef4;\n --mode-color-status-info-inverse-hover-alt: #001932;\n --mode-color-status-negative-default: #db004e;\n --mode-color-status-negative-default-alt: #fff5f6;\n --mode-color-status-negative-hover: #c40044;\n --mode-color-status-negative-hover-alt: #ffe8ea;\n --mode-color-status-negative-inverse-default: #f50059;\n --mode-color-status-negative-inverse-default-alt: #1e0005;\n --mode-color-status-negative-inverse-hover: #ff3e6a;\n --mode-color-status-negative-inverse-hover-alt: #3c000f;\n --mode-color-status-neutral-default: #6f6f6f;\n --mode-color-status-neutral-default-alt: #f8f8f8;\n --mode-color-status-neutral-hover: #616161;\n --mode-color-status-neutral-hover-alt: #eeeeee;\n --mode-color-status-neutral-inverse-default: #7c7c7c;\n --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n --mode-color-status-neutral-inverse-hover: #8b8b8b;\n --mode-color-status-neutral-inverse-hover-alt: #181818;\n --mode-color-status-positive-default: #00811F;\n --mode-color-status-positive-default-alt: #EEFCEF;\n --mode-color-status-positive-hover: #007219;\n --mode-color-status-positive-hover-alt: #D1F6D6;\n --mode-color-status-positive-inverse-default: #019127;\n --mode-color-status-positive-inverse-default-alt: #001001;\n --mode-color-status-positive-inverse-hover: #007219;\n --mode-color-status-positive-inverse-hover-alt: #001f03;\n --badge-none: var(--mode-color-none);\n --badge-border-default: var(--mode-color-generic-txt-nought);\n --badge-bg-default: var(--mode-color-status-negative-default);\n --badge-bg-alt: var(--mode-color-status-info-default);\n --badge-label-default: var(--mode-color-generic-txt-nought);\n --badge-label-alt: var(--mode-color-generic-txt-nought);\n --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n --button-none: var(--mode-color-none);\n --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n --button-ai-label-default: var(--mode-color-action-grayscale-default);\n --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-tertiary-bg-default: var(--button-none);\n --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-tertiary-inverse-bg-default: var(--button-none);\n --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n --container-action-border-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --container-action-border-active: var(--mode-color-action-grayscale-active);\n --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n --container-action-border-default: var(--mode-color-generic-fg-firm);\n --container-action-icon-active: var(--mode-color-action-grayscale-active);\n --container-action-icon-default: var(--mode-color-action-grayscale-default);\n --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n --container-action-txt-active: var(--mode-color-action-grayscale-active);\n --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n --container-action-txt-default: var(--mode-color-generic-txt-severe);\n --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n --container-action-target-bg-default: var(--mode-color-status-info-default);\n --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n --container-standard-border-active: var(--mode-color-action-grayscale-active);\n --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n --container-standard-border-default: var(--mode-color-generic-fg-soft);\n --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n --container-standard-icon: var(--mode-color-generic-fg-firm);\n --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n --container-quote-border: var(--mode-color-action-main-default);\n --container-size-bubble-max-w: 600px;\n --container-size-copilot-emptystate-illustration: 200px;\n --container-size-copilot-emptystate-txt-max-w: 600px;\n --container-size-copilot-overlay-max-h: 960px;\n --container-size-dialog-max-ws: 540px;\n --container-size-dialog-max-wm: 850px;\n --container-size-dialog-max-wl: 1080px;\n --container-size-dialog-min-w: 288px;\n --container-size-empty-state-primary-s: 200px;\n --container-size-empty-state-primary-m: 240px;\n --container-size-empty-state-primary-l: 320px;\n --container-size-fluid-items2xs: 80px;\n --container-size-fluid-items-xs: 128px;\n --container-size-fluid-items-s: 160px;\n --container-size-fluid-items-m: 200px;\n --container-size-fluid-items-l: 240px;\n --container-size-fluid-items-xl: 288px;\n --container-size-fluid-items2xl: 320px;\n --container-size-fluid-items3xl: 560px;\n --container-size-fluid-items4xl: 760px;\n --container-size-sidebar-max-ws: 760px;\n --container-size-sidebar-max-wm: 1000px;\n --container-size-sidebar-min-w: 288px;\n --focus-bg: var(--mode-color-action-focus-with-default-alt);\n --focus-borderalt: var(--mode-color-action-focus-default);\n --focus-border: var(--mode-color-action-focus-with-default);\n --focus-label: var(--mode-color-action-focus-txt);\n --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);\n --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-required: var(--mode-color-action-danger-default);\n --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n --input-typical-border-alt: var(--mode-color-action-inactive-default);\n --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n --input-switch-border-active: transparent;\n --input-switch-border-active-disabled: transparent;\n --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-validation-border-error: var(--mode-color-status-negative-default);\n --input-validation-bar-error: var(--mode-color-status-negative-default);\n --input-validation-bar-warn: var(--mode-color-status-warning-default);\n --input-validation-label-error: var(--mode-color-status-negative-default);\n --input-validation-label-success: var(--mode-color-status-positive-default);\n --input-validation-label-warn: var(--mode-color-status-warning-txt);\n --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n --input-size-generic-min-w: 288px;\n --logo-sage-bg-default: var(--mode-color-brand-default);\n --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n --message-none: var(--mode-color-none);\n --message-contextual-bg: var(--mode-color-generic-bg-nought);\n --message-contextual-icon: var(--mode-color-generic-bg-nought);\n --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n --message-contextual-error-icon: var(--mode-color-status-negative-default);\n --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n --message-contextual-info-border-default: var(--mode-color-status-info-default);\n --message-contextual-info-icon: var(--mode-color-status-info-default);\n --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n --message-contextual-success-icon: var(--mode-color-status-positive-default);\n --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n --message-global-info-icon: var(--mode-color-status-info-default);\n --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n --message-global-warning-icon: var(--mode-color-status-warning-default);\n --nav-bg-default: var(--mode-color-generic-bg-nought);\n --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n --nav-leftnav-item-bg-default: var(--mode-color-none);\n --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n --nav-modal-item-bg-default: var(--mode-color-none);\n --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n --nav-topnav-item-bg-default: var(--mode-color-none);\n --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n --page-bg-default: var(--mode-color-generic-surface-nought);\n --page-bg-alt: var(--mode-color-generic-surface-faint);\n --page-txt-alt: var(--mode-color-generic-txt-moderate);\n --page-txt-default: var(--mode-color-generic-txt-severe);\n --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n --popover-bg-active: var(--mode-color-action-grayscale-active);\n --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n --popover-bg-default: var(--mode-color-generic-bg-nought);\n --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --popover-label-active: var(--mode-color-action-grayscale-with-active);\n --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n --popover-label-disabled: var(--mode-color-action-inactive-txt);\n --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n --profile-size-outside-xs: var(--global-size-xs);\n --profile-size-outside-s: var(--global-size-s);\n --profile-size-outside-m: var(--global-size-m);\n --profile-size-outside-ml: 56px;\n --profile-size-outside-l: var(--global-size-4-xl);\n --profile-size-outside-xl: 104px;\n --profile-size-outside-xxl: 128px;\n --profile-size-inside-xs: var(--global-size-3-xs);\n --profile-size-inside-s: var(--global-size-2-xs);\n --profile-size-inside-m: var(--global-size-xs);\n --profile-size-inside-ml: var(--global-size-s);\n --profile-size-inside-l: var(--global-size-l);\n --profile-size-inside-xl: var(--global-size-2-xl);\n --profile-size-inside-xxl: var(--global-size-4-xl);\n --profile-bg-alt: var(--mode-color-generic-txt-severe);\n --profile-bg-def: var(--mode-color-generic-bg-nought);\n --profile-border-default: var(--mode-color-generic-fg-moderate);\n --profile-label-default: var(--mode-color-generic-txt-severe);\n --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n --profile-font-def-s: var(--global-font-static-comp-regular-m);\n --profile-font-def-m: var(--global-font-static-comp-regular-m);\n --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n --profile-font-def-l: var(--global-font-static-comp-regular-l);\n --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n --profile-font-heading-m: var(--global-font-static-subheading-l);\n --profile-font-heading-ml: var(--global-font-static-subheading-l);\n --profile-font-heading-l: var(--global-font-static-subheading-l);\n --profile-font-heading-xl: var(--global-font-static-heading-m);\n --profile-font-heading-xxl: var(--global-font-static-heading-l);\n --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n --progress-none: var(--mode-color-none);\n --progress-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-border-default: var(--mode-color-generic-fg-firm);\n --progress-fg-alt: var(--mode-color-status-positive-default);\n --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n --progress-fg-caution: var(--mode-color-status-warning-default);\n --progress-fg-default: var(--mode-color-action-grayscale-active);\n --progress-fg-error: var(--mode-color-status-negative-default);\n --progress-fg-info: var(--mode-color-status-info-default);\n --progress-label-alt: var(--mode-color-generic-txt-moderate);\n --progress-label-default: var(--mode-color-generic-txt-severe);\n --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);\n --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n --progress-loader-fg-error: var(--mode-color-status-negative-default);\n --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n --pill-generic-none: var(--mode-color-none);\n --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n --pill-error-bg-default: var(--mode-color-status-negative-default);\n --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n --pill-error-border-default: var(--mode-color-status-negative-default);\n --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-priority-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-border-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-info-bg-default: var(--mode-color-status-info-default);\n --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-info-bg-hover: var(--mode-color-status-info-hover);\n --pill-info-border-default: var(--mode-color-status-info-default);\n --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n --pill-readonly-label: var(--mode-color-generic-txt-soft);\n --pill-positive-bg-default: var(--mode-color-status-positive-default);\n --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n --pill-positive-border-default: var(--mode-color-status-positive-default);\n --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-warn-bg-default: var(--mode-color-status-warning-default);\n --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n --pill-warn-border-default: var(--mode-color-status-warning-default);\n --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n --tab-bg-default: var(--mode-color-none);\n --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n --tab-border-active: var(--mode-color-action-grayscale-active);\n --tab-border-default: var(--mode-color-generic-fg-moderate);\n --tab-border-hover: var(--mode-color-generic-fg-firm);\n --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-label-active: var(--mode-color-action-grayscale-active);\n --tab-icon-active: var(--mode-color-action-grayscale-active);\n --tab-label-default: var(--mode-color-action-grayscale-default);\n --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n --tab-validation-border-warning: var(--mode-color-status-warning-default);\n --tab-validation-border-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n --tab-validation-label-error: var(--mode-color-status-negative-default);\n --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n --table-header-subtle-bg-default: var(--mode-color-none);\n --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n --table-row-bg-default: var(--mode-color-generic-bg-nought);\n --table-row-bg-alt: var(--mode-color-generic-bg-faint);\n --table-row-bg-alt2: var(--mode-color-generic-bg-soft);\n --table-row-bg-alt3: var(--mode-color-generic-bg-faint);\n --table-row-bg-selected: var(--mode-color-generic-bg-moderate);\n --table-row-border-default: var(--mode-color-generic-fg-soft);\n --table-row-label-default: var(--mode-color-generic-txt-severe);\n --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n --table-footer-bg-default: var(--mode-color-generic-bg-moderate);\n --table-footer-border-default: var(--mode-color-generic-fg-moderate);\n --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
package/lib/components/tokens-wrapper/__internal__/static-tokens/package.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "main": "./index.js",
4
+ "module": "../../../esm/components/tokens-wrapper/__internal__/static-tokens/index.js",
5
+ "types": "./index.d.ts"
6
+ }
package/lib/components/tokens-wrapper/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { TokenWrapperProps } from "./tokens-wrapper.component";
2
+ export { default } from "./tokens-wrapper.component";
package/lib/components/tokens-wrapper/index.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./tokens-wrapper.component.js");exports.default=e.TokensWrapper;
package/lib/components/tokens-wrapper/package.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "main": "./index.js",
4
+ "module": "../../../esm/components/tokens-wrapper/index.js",
5
+ "types": "./index.d.ts"
6
+ }
package/lib/components/tokens-wrapper/tokens-wrapper.component.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ export interface TokenWrapperProps {
3
+ children: React.ReactNode;
4
+ height?: string;
5
+ }
6
+ export declare const TokensWrapper: ({ children, height, }: TokenWrapperProps) => React.JSX.Element;
7
+ export default TokensWrapper;
package/lib/components/tokens-wrapper/tokens-wrapper.component.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("styled-components"),r=require("./__internal__/static-tokens/index.js");function n(e){return e&&e.__esModule?e:{default:e}}const o=n(t).default.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"sc-b10ea2fd-0"})([""," height:",";"],r.default,(({height:e})=>e)),a=({children:t,height:r="auto"})=>e.jsx(o,{"data-component":"tokens-wrapper","data-role":"tokens-wrapper",height:r,children:t});exports.TokensWrapper=a,exports.default=a;
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "157.8.0",
3
+ "version": "157.9.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
7
7
  "esm"
8
8
  ],
9
9
  "scripts": {
10
- "start": "node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
11
- "start:strict-mode": "node ./scripts/check_node_version.mjs && dotenvx run --env ENABLE_REACT_STRICT_MODE=true -- storybook dev -p 9001 -c .storybook",
12
- "test": "jest --config=./jest.config.ts",
10
+ "start": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
11
+ "start:strict-mode": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run --env ENABLE_REACT_STRICT_MODE=true -- storybook dev -p 9001 -c .storybook",
12
+ "test": "npm run generate-tokens:dev && jest --config=./jest.config.ts",
13
13
  "test-update": "jest --config=./jest.config.ts --updateSnapshot",
14
14
  "test-storybook": "test-storybook --url http://127.0.0.1:9001",
15
15
  "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
16
- "lint": "eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
16
+ "lint": "npm run generate-tokens:dev && eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
17
17
  "precompile": "npm run type-check && npm run build",
18
18
  "prepublishOnly": "npm run precompile",
19
- "build-storybook": "dotenvx run -- storybook build -c .storybook",
20
- "build-storybook:prod": "dotenvx run -f .env.production -- storybook build -c .storybook",
19
+ "build-storybook": "npm run generate-tokens:dev && dotenvx run -- storybook build -c .storybook",
20
+ "build-storybook:prod": "npm run generate-tokens && dotenvx run -f .env.production -- storybook build -c .storybook",
21
21
  "start:static": "npx http-server -p 9001 ./storybook-static",
22
22
  "clean-lib": "rimraf ./lib && rimraf ./esm",
23
23
  "generate-metadata": "node ./scripts/generate_metadata/index.mjs",
@@ -25,16 +25,18 @@
25
25
  "type-check:watch": "tsc --noEmit --watch",
26
26
  "build:types": "tsc -p tsconfig-build.json --outDir ./lib && tsc -p tsconfig-build.json --outDir ./esm",
27
27
  "prepare": "husky install",
28
- "test:ct": "playwright test -c playwright-ct.config.ts",
29
- "test:ct:ui": "playwright test --ui -c playwright-ct.config.ts",
30
- "test:ct:report": "npx playwright show-report",
28
+ "test:ct": "npm run generate-tokens:dev && playwright test -c playwright-ct.config.ts",
29
+ "test:ct:ui": "npm run generate-tokens:dev && npm run generate-tokens:dev && playwright test --ui -c playwright-ct.config.ts",
30
+ "test:ct:report": "npm run generate-tokens:dev && npx playwright show-report",
31
31
  "clear-playwright-cache": "rimraf ./playwright/.cache",
32
32
  "clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
33
- "test:ct:coverage": "npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
33
+ "test:ct:coverage": "npm run generate-tokens:dev && npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
34
34
  "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
35
- "build": "npm run clean-lib && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
35
+ "build": "npm run clean-lib && npm run generate-tokens && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
36
36
  "build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
37
- "build:move-svg": "node ./scripts/copy_svg/index.js"
37
+ "build:move-svg": "node ./scripts/copy_svg/index.js",
38
+ "generate-tokens": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs",
39
+ "generate-tokens:dev": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs --include-dark"
38
40
  },
39
41
  "repository": {
40
42
  "type": "git",
@@ -48,6 +50,7 @@
48
50
  "homepage": "https://carbon.sage.com",
49
51
  "peerDependencies": {
50
52
  "@sage/design-tokens": "^4.17.0",
53
+ "@sage/design-tokens-fusion": "npm:@sage/design-tokens@^17.1.1",
51
54
  "react": "^17.0.2 || ^18.0.0",
52
55
  "react-dom": "^17.0.2 || ^18.0.0",
53
56
  "styled-components": "^5.3.11"
@@ -73,7 +76,8 @@
73
76
  "@rollup/plugin-node-resolve": "^16.0.0",
74
77
  "@rollup/plugin-terser": "^0.4.4",
75
78
  "@rollup/plugin-url": "^8.0.2",
76
- "@sage/design-tokens": "~4.29.0",
79
+ "@sage/design-tokens": "^4.17.0",
80
+ "@sage/design-tokens-fusion": "npm:@sage/design-tokens@^17.1.1",
77
81
  "@semantic-release/changelog": "^6.0.3",
78
82
  "@semantic-release/exec": "^6.0.3",
79
83
  "@semantic-release/git": "^10.0.1",