npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.5 → 3.0.0-canary.6 - Mend

@ukic/canary-web-components 3.0.0-canary.5 → 3.0.0-canary.6

Files changed (514) hide show

package/dist/components/ic-tree-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tree-view.js","mappings":"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","names":[],"sources":["src/components/ic-tree-view/ic-tree-view.css?tag=ic-tree-view&encapsulation=shadow","src/components/ic-tree-view/ic-tree-view.tsx"],"sourcesContent":["/*\n @prop --tree-view-width: Width of the tree view\n/\n\n:host {\n display: block;\n width: var(--tree-view-width, 100%);\n background-color: var(--ic-tree-view-background);\n}\n\n:host .heading-area-container {\n border-bottom: var(--ic-space-1px) solid var(--ic-tree-view-divider);\n display: flex;\n align-items: center;\n height: calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px));\n padding: 0 var(--ic-space-xs);\n\n --ic-typography-color: var(--ic-tree-view-text);\n}\n\n:host(.ic-tree-view-small) .heading-area-container {\n height: calc(var(--ic-space-xl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-large) .heading-area-container {\n height: calc(var(--ic-space-xxl) - var(--ic-space-1px));\n}\n\n.icon-container {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin: 0 var(--ic-space-xs) 0 0;\n}\n\n:host(.ic-tree-view-small) .icon-container {\n margin: 0 var(--ic-space-xxs) 0 0;\n}\n\n.ic-text-overflow {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.ic-tooltip-overflow {\n overflow: hidden;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-tree-view-icon);\n}\n\n/* High Contrast /\n@media (forced-colors: active) {\n ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Host,\n Watch,\n State,\n Listen,\n forceUpdate,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n isPropDefined,\n isSlotUsed,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\n\nlet treeViewIds = 0;\n\n/\n * @slot heading - Content is set as the tree view heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-tree-view\",\n styleUrl: \"ic-tree-view.css\",\n shadow: true,\n})\nexport class TreeView {\n private treeViewId = `ic-tree-view-${treeViewIds++}`;\n private treeItemTag = \"IC-TREE-ITEM\";\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTreeViewElement;\n\n @State() treeItems: HTMLIcTreeItemElement[];\n\n /\n If `true`, tree items will have inset focus.\n /\n @Prop() focusInset?: boolean = false;\n @Watch(\"focusInset\")\n watchFocusInsetHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.focusInset = this.focusInset;\n });\n }\n\n /\n The heading of the tree view.\n /\n @Prop() heading?: string = \"\";\n\n /\n The size of the tree view.\n /\n @Prop() size?: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.size = this.size;\n });\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.theme = this.theme;\n });\n }\n\n disconnectedCallback(): void {\n this.el?.removeEventListener(\"slotchange\", this.setTreeItems);\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.setTreeItems();\n\n this.watchSizeHandler();\n this.watchFocusInsetHandler();\n this.watchThemeHandler();\n\n setTimeout(() => {\n this.truncateTreeViewHeading();\n }, 100);\n\n this.addSlotChangeListener();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icTreeItemSelected\")\n handleTreeItemSelected(event: CustomEvent): void {\n this.treeItems.forEach((treeItem) => {\n if (treeItem.selected && treeItem.id !== event.detail.id) {\n treeItem.selected = false;\n }\n });\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const focussedChild = this.treeItems.indexOf(\n this.treeItems.filter((el) => el === document.activeElement)[0]\n );\n const expanded = this.treeItems[focussedChild]?.expanded;\n switch (event.key) {\n case \"ArrowDown\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, true)\n ].setFocus();\n if (focussedChild !== this.treeItems.length - 1) {\n event.preventDefault();\n }\n break;\n case \"ArrowUp\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, false)\n ].setFocus();\n if (focussedChild !== 0) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (this.treeItems[focussedChild].isParent && !expanded) {\n this.treeItems[focussedChild].expanded = true;\n this.treeItems[focussedChild].hasParentExpanded = true;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (this.treeItems[focussedChild].isParent && expanded) {\n (\n this.treeItems[focussedChild].children[0] as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (this.treeItems[focussedChild].isParent && expanded) {\n this.treeItems[focussedChild].expanded = false;\n this.treeItems[focussedChild].hasParentExpanded = false;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (\n this.treeItems[focussedChild].parentElement.tagName ===\n this.treeItemTag\n ) {\n (\n this.treeItems[focussedChild].parentElement as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numItems = this.treeItems.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = 0;\n } else if (nextItem > numItems) {\n nextItem = numItems;\n }\n\n const maxAttempts = numItems + 1;\n let attempts = 0;\n\n while (attempts < maxAttempts) {\n if (nextItem < 0 \|\| nextItem > numItems) {\n return currentItem;\n }\n\n if (\n !this.treeItems[nextItem].disabled &&\n (this.treeItems[nextItem].parentElement.tagName !== this.treeItemTag \|\|\n (this.treeItems[nextItem].parentElement as HTMLIcTreeItemElement)\n .expanded)\n ) {\n return nextItem;\n }\n\n if (nextItem === numItems && this.treeItems[nextItem].disabled) {\n return currentItem;\n }\n\n nextItem = movingDown ? nextItem + 1 : nextItem - 1;\n attempts++;\n }\n\n return currentItem;\n };\n\n private linkTreeItems = () => {\n this.treeItems.forEach((treeItem) => {\n treeItem.setAttribute(\"context-id\", this.treeViewId);\n });\n };\n\n private setTreeItems = () => {\n this.treeItems = this.getAllTreeItems(this.el as HTMLElement);\n\n this.linkTreeItems();\n };\n\n private getAllTreeItems(element: HTMLElement): HTMLIcTreeItemElement[] {\n const treeItems: HTMLIcTreeItemElement[] = [];\n\n const collectTreeItems = (el: HTMLElement) => {\n Array.from(el.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n treeItems.push(child as HTMLIcTreeItemElement);\n }\n\n collectTreeItems(child as HTMLElement);\n });\n };\n\n collectTreeItems(element);\n return treeItems;\n }\n\n private addSlotChangeListener = () => {\n this.el.addEventListener(\"slotchange\", this.setTreeItems);\n };\n\n private truncateTreeViewHeading = () => {\n const typographyEl: HTMLIcTypographyElement =\n this.el.shadowRoot.querySelector(\".tree-view-header\");\n const tooltip = typographyEl?.closest(\"ic-tooltip\");\n const headingContainer: HTMLElement = this.el.shadowRoot.querySelector(\n \".heading-area-container\"\n );\n\n if (typographyEl?.scrollHeight > headingContainer?.clientHeight) {\n typographyEl.classList.add(\"ic-text-overflow\");\n\n if (!tooltip) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent);\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n tooltipEl.setAttribute(\"placement\", \"right\");\n headingContainer.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n }\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"icon\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n private isHeadingDefined = () =>\n isPropDefined(this.heading) && this.heading !== null;\n\n private hasHeadingAreaContent = (): boolean => {\n return (\n isSlotUsed(this.el, \"heading\") \|\|\n this.isHeadingDefined() \|\|\n isSlotUsed(this.el, \"icon\")\n );\n };\n\n render() {\n const { heading, size, theme } = this;\n\n return (\n <Host\n context-id={this.treeViewId}\n class={{\n [`ic-tree-view-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onKeyDown={this.handleKeyDown}\n aria-label={this.isHeadingDefined() ? heading : null}\n >\n {this.hasHeadingAreaContent() && (\n <div class=\"heading-area-container\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"tree-view-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n heading\n )}\n </ic-typography>\n </div>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tree-view.js","mappings":"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","names":[],"sources":["src/components/ic-tree-view/ic-tree-view.css?tag=ic-tree-view&encapsulation=shadow","src/components/ic-tree-view/ic-tree-view.tsx"],"sourcesContent":["/*\n @prop --tree-view-width: Width of the tree view\n/\n\n:host {\n display: block;\n width: var(--tree-view-width, 100%);\n background-color: var(--ic-tree-view-background);\n}\n\n:host .heading-area-container {\n border-bottom: var(--ic-space-1px) solid var(--ic-tree-view-divider);\n display: flex;\n align-items: center;\n min-height: calc(\n var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px)\n );\n padding: 0 var(--ic-space-xs);\n\n --ic-typography-color: var(--ic-tree-view-text);\n}\n\n:host(.ic-tree-view-small) .heading-area-container {\n min-height: calc(var(--ic-space-xl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-large) .heading-area-container {\n min-height: calc(var(--ic-space-xxl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-truncate) .heading-area-container {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-truncate.ic-tree-view-small) .heading-area-container {\n height: calc(var(--ic-space-xl) - var(--ic-space-1px));\n}\n\n:host(.ic-tree-view-truncate.ic-tree-view-large) .heading-area-container {\n height: calc(var(--ic-space-xxl) - var(--ic-space-1px));\n}\n\n.icon-container {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin: 0 var(--ic-space-xs) 0 0;\n}\n\n:host(.ic-tree-view-small) .icon-container {\n margin: 0 var(--ic-space-xxs) 0 0;\n}\n\n.ic-text-overflow {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.ic-tooltip-overflow {\n overflow: hidden;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-tree-view-icon);\n}\n\n/* High Contrast /\n@media (forced-colors: active) {\n ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Host,\n Watch,\n State,\n Listen,\n forceUpdate,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n isPropDefined,\n isSlotUsed,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\n\nlet treeViewIds = 0;\n\n/\n * @slot heading - Content is set as the tree view heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-tree-view\",\n styleUrl: \"ic-tree-view.css\",\n shadow: true,\n})\nexport class TreeView {\n private treeViewId = `ic-tree-view-${treeViewIds++}`;\n private treeItemTag = \"IC-TREE-ITEM\";\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTreeViewElement;\n\n @State() treeItems: HTMLIcTreeItemElement[];\n\n /\n If `true`, tree items will have inset focus.\n /\n @Prop() focusInset?: boolean = false;\n @Watch(\"focusInset\")\n watchFocusInsetHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.focusInset = this.focusInset;\n });\n }\n\n /\n The heading of the tree view.\n /\n @Prop() heading?: string = \"\";\n\n /\n The size of the tree view.\n /\n @Prop() size?: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.size = this.size;\n });\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.theme = this.theme;\n });\n }\n\n /\n If `true`, the tree view heading will be truncated instead of text wrapping.\n /\n @Prop() truncateHeading?: boolean = false;\n\n /\n If `true`, tree items will be truncated, unless they are individually overridden.\n */\n @Prop() truncateTreeItems?: boolean = false;\n @Watch(\"truncateTreeItems\")\n watchTruncateTreeItemsHandler() {\n this.treeItems.forEach((treeItem) => {\n if (treeItem.truncateTreeItem === undefined) {\n treeItem.truncateTreeItem = this.truncateTreeItems;\n }\n });\n }\n\n disconnectedCallback(): void {\n this.el?.removeEventListener(\"slotchange\", this.setTreeItems);\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.setTreeItems();\n\n this.watchSizeHandler();\n this.watchFocusInsetHandler();\n this.watchThemeHandler();\n this.watchTruncateTreeItemsHandler();\n\n setTimeout(() => {\n this.truncateHeading && this.truncateTreeViewHeading();\n }, 100);\n\n this.addSlotChangeListener();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icTreeItemSelected\")\n handleTreeItemSelected(event: CustomEvent): void {\n this.treeItems.forEach((treeItem) => {\n if (treeItem.selected && treeItem.id !== event.detail.id) {\n treeItem.selected = false;\n }\n });\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const focussedChild = this.treeItems.indexOf(\n this.treeItems.filter((el) => el === document.activeElement)[0]\n );\n const expanded = this.treeItems[focussedChild]?.expanded;\n switch (event.key) {\n case \"ArrowDown\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, true)\n ].setFocus();\n if (focussedChild !== this.treeItems.length - 1) {\n event.preventDefault();\n }\n break;\n case \"ArrowUp\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, false)\n ].setFocus();\n if (focussedChild !== 0) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (this.treeItems[focussedChild].isParent && !expanded) {\n this.treeItems[focussedChild].expanded = true;\n this.treeItems[focussedChild].hasParentExpanded = true;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (this.treeItems[focussedChild].isParent && expanded) {\n (\n this.treeItems[focussedChild].children[0] as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (this.treeItems[focussedChild].isParent && expanded) {\n this.treeItems[focussedChild].expanded = false;\n this.treeItems[focussedChild].hasParentExpanded = false;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (\n this.treeItems[focussedChild].parentElement.tagName ===\n this.treeItemTag\n ) {\n (\n this.treeItems[focussedChild].parentElement as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numItems = this.treeItems.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = 0;\n } else if (nextItem > numItems) {\n nextItem = numItems;\n }\n\n const maxAttempts = numItems + 1;\n let attempts = 0;\n\n while (attempts < maxAttempts) {\n if (nextItem < 0 \|\| nextItem > numItems) {\n return currentItem;\n }\n\n if (\n !this.treeItems[nextItem].disabled &&\n (this.treeItems[nextItem].parentElement.tagName !== this.treeItemTag \|\|\n (this.treeItems[nextItem].parentElement as HTMLIcTreeItemElement)\n .expanded)\n ) {\n return nextItem;\n }\n\n if (nextItem === numItems && this.treeItems[nextItem].disabled) {\n return currentItem;\n }\n\n nextItem = movingDown ? nextItem + 1 : nextItem - 1;\n attempts++;\n }\n\n return currentItem;\n };\n\n private linkTreeItems = () => {\n this.treeItems.forEach((treeItem) => {\n treeItem.setAttribute(\"context-id\", this.treeViewId);\n });\n };\n\n private setTreeItems = () => {\n this.treeItems = this.getAllTreeItems(this.el as HTMLElement);\n\n this.linkTreeItems();\n };\n\n private getAllTreeItems(element: HTMLElement): HTMLIcTreeItemElement[] {\n const treeItems: HTMLIcTreeItemElement[] = [];\n\n const collectTreeItems = (el: HTMLElement) => {\n Array.from(el.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n treeItems.push(child as HTMLIcTreeItemElement);\n }\n\n collectTreeItems(child as HTMLElement);\n });\n };\n\n collectTreeItems(element);\n return treeItems;\n }\n\n private addSlotChangeListener = () => {\n this.el.addEventListener(\"slotchange\", this.setTreeItems);\n };\n\n private truncateTreeViewHeading = () => {\n const typographyEl: HTMLIcTypographyElement =\n this.el.shadowRoot.querySelector(\".tree-view-header\");\n const tooltip = typographyEl?.closest(\"ic-tooltip\");\n const headingContainer: HTMLElement = this.el.shadowRoot.querySelector(\n \".heading-area-container\"\n );\n\n if (typographyEl?.scrollHeight > headingContainer?.clientHeight) {\n typographyEl.classList.add(\"ic-text-overflow\");\n\n if (!tooltip) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent);\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n tooltipEl.setAttribute(\"placement\", \"right\");\n headingContainer.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n }\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"icon\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n private isHeadingDefined = () =>\n isPropDefined(this.heading) && this.heading !== null;\n\n private hasHeadingAreaContent = (): boolean => {\n return (\n isSlotUsed(this.el, \"heading\") \|\|\n this.isHeadingDefined() \|\|\n isSlotUsed(this.el, \"icon\")\n );\n };\n\n render() {\n const { heading, size, theme } = this;\n\n return (\n <Host\n context-id={this.treeViewId}\n class={{\n [`ic-tree-view-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-view-truncate\": this.truncateHeading,\n }}\n onKeyDown={this.handleKeyDown}\n aria-label={this.isHeadingDefined() ? heading : null}\n >\n {this.hasHeadingAreaContent() && (\n <div class=\"heading-area-container\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"tree-view-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n heading\n )}\n </ic-typography>\n </div>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/core/core.css CHANGED Viewed

@@ -449,7 +449,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-text-disabled-light
   );--ic-toggle-button-selected-icon-disabled-monochrome:var(
     --ic-color-icon-disabled-mid
-  );--ic-top-navigation-background:var(--ic-theme-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed);--ic-top-navigation-icon-pressed-background:var(
+  );--ic-top-navigation-background:var(--ic-brand-color-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed);--ic-top-navigation-icon-pressed-background:var(
     --ic-action-default-bg-pressed
   );--ic-top-navigation-nav-group-link:var(--ic-color-hyperlink-default);--ic-top-navigation-nav-item:var(--ic-color-text-primary);--ic-top-navigation-nav-item-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-nav-group-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-nav-item-pressed:var(--ic-action-dark-bg-pressed);--ic-top-navigation-nav-group-pressed:var(--ic-action-dark-bg-pressed);--ic-top-navigation-nav-item-banner:var(--ic-action-default);--ic-top-navigation-nav-group-chevron:var(--ic-color-icon-neutral);--ic-top-navigation-link:var(--ic-color-brand-text);--ic-top-navigation-status-tag:var(--ic-color-background-primary);--ic-top-navigation-status-tag-text:var(--ic-color-text-primary);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-lighten-20);--ic-top-navigation-logo:var(--ic-color-icon-brand);--ic-top-navigation-icon:var(--ic-color-icon-brand);--ic-top-navigation-theme:var(--ic-color-icon-brand);--ic-top-navigation-disabled:var(--ic-color-text-disabled-default);--ic-top-navigation-enabled:var(--ic-color-brand-text);--ic-top-navigation-menu-background:var(--ic-color-background-secondary);--ic-top-navigation-menu-border:var(--ic-color-border-neutral-default);--ic-top-navigation-selected:var(--ic-color-icon-brand);--ic-top-navigation-search-placeholder-text:var(
     --ic-atoms-input-text-field-content-placeholder
@@ -601,7 +601,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
       --ic-atoms-option-bar-background-dark
     );--ic-atoms-option-bar-divider:var(--ic-atoms-option-bar-divider-dark);--ic-atoms-status-icon-success:var(--ic-atoms-status-icon-success-dark);--ic-atoms-status-icon-warning:var(--ic-atoms-status-icon-warning-dark);--ic-atoms-status-icon-error:var(--ic-atoms-status-icon-error-dark);--ic-atoms-status-icon-neutral:var(--ic-atoms-status-icon-neutral-dark);--ic-atoms-status-icon-info:var(--ic-atoms-status-icon-info-dark);--ic-atoms-dropdown-list-border:var(--ic-atoms-dropdown-list-border-dark);--ic-atoms-input-divider:var(--ic-atoms-input-divider-dark);--ic-atoms-input-autocomplete-field-border:var(
       --ic-atoms-input-autocomplete-field-border-dark
-    );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-inverted);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
+    );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-neutral);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
       --ic-color-background-active-hover-dark
     );--ic-button-primary-background-pressed:var(
       --ic-color-background-active-pressed-dark
@@ -941,7 +941,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
       --ic-color-text-disabled-light
     );--ic-toggle-button-selected-icon-disabled-monochrome:var(
       --ic-color-icon-disabled-mid
-    );--ic-top-navigation-background:var(--ic-theme-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(
+    );--ic-top-navigation-background:var(--ic-brand-color-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(
       --ic-action-default-bg-hover
     );--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed-dark);--ic-top-navigation-icon-pressed-background:var(
       --ic-action-default-bg-pressed
@@ -1089,7 +1089,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-atoms-group-label-background-dark
   );--ic-atoms-list-item-background:var(--ic-atoms-list-item-background-dark);--ic-atoms-loading-text:var(--ic-atoms-loading-text-dark);--ic-atoms-loading-error-text:var(--ic-atoms-loading-error-text-dark);--ic-atoms-loading-error-icon:var(--ic-atoms-loading-error-icon-dark);--ic-atoms-list-item-text:var(--ic-atoms-list-item-text-dark);--ic-atoms-list-item-divider:var(--ic-atoms-list-item-divider-dark);--ic-atoms-option-bar-text:var(--ic-atoms-option-bar-text-dark);--ic-atoms-option-bar-background:var(--ic-atoms-option-bar-background-dark);--ic-atoms-option-bar-divider:var(--ic-atoms-option-bar-divider-dark);--ic-atoms-status-icon-success:var(--ic-atoms-status-icon-success-dark);--ic-atoms-status-icon-warning:var(--ic-atoms-status-icon-warning-dark);--ic-atoms-status-icon-error:var(--ic-atoms-status-icon-error-dark);--ic-atoms-status-icon-neutral:var(--ic-atoms-status-icon-neutral-dark);--ic-atoms-status-icon-info:var(--ic-atoms-status-icon-info-dark);--ic-atoms-dropdown-list-border:var(--ic-atoms-dropdown-list-border-dark);--ic-atoms-input-divider:var(--ic-atoms-input-divider-dark);--ic-atoms-input-autocomplete-field-border:var(
     --ic-atoms-input-autocomplete-field-border-dark
-  );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-inverted);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
+  );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-neutral);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
     --ic-color-background-active-hover-dark
   );--ic-button-primary-background-pressed:var(
     --ic-color-background-active-pressed-dark
@@ -1365,11 +1365,11 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-text-disabled-light
   );--ic-toggle-button-selected-icon-disabled-monochrome:var(
     --ic-color-icon-disabled-mid
-  );--ic-top-navigation-background:var(--ic-theme-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed-dark);--ic-top-navigation-icon-pressed-background:var(
+  );--ic-top-navigation-background:var(--ic-brand-color-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed-dark);--ic-top-navigation-icon-pressed-background:var(
     --ic-action-default-bg-pressed
   );--ic-top-navigation-nav-group-link:var(--ic-color-hyperlink-default);--ic-top-navigation-nav-item:var(--ic-color-text-primary);--ic-top-navigation-nav-item-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-nav-group-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-nav-item-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-nav-group-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-nav-item-banner:var(--ic-action-default);--ic-top-navigation-nav-group-chevron:var(--ic-color-icon-brand);--ic-top-navigation-link:var(--ic-color-brand-text);--ic-top-navigation-status-tag:var(--ic-color-background-primary-light);--ic-top-navigation-status-tag-text:var(--ic-color-text-inverse);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-lighten-20);--ic-top-navigation-logo:var(--ic-color-icon-brand);--ic-top-navigation-icon:var(--ic-color-icon-brand);--ic-top-navigation-theme:var(--ic-color-icon-brand);--ic-top-navigation-disabled:var(--ic-color-text-disabled-dark);--ic-top-navigation-enabled:var(--ic-color-brand-text);--ic-top-navigation-menu-background:var(--ic-color-background-primary);--ic-top-navigation-menu-border:var(--ic-color-border-neutral-default);--ic-top-navigation-selected:var(--ic-color-icon-brand);--ic-top-navigation-search-placeholder-text:var(
     --ic-atoms-input-text-field-content-placeholder
-  );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-dark);--ic-tree-view-icon-disabled:var(--ic-color-icon-pressed);--ic-tree-view-icon:var(--ic-color-icon-inverted);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled);--ic-tree-view-divider:var(--ic-state-layer-neutral-light);--ic-tree-view-hover:var(--ic-action-light-bg-hover);--ic-tree-view-pressed:var(--ic-action-light-bg-pressed);--ic-tree-view-selected:var(--ic-action-dark-selected)}:root{--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-750:#3b3e45;--ic-architectural-800:#2c2f34;--ic-architectural-850:#232629;--ic-architectural-900:#17191c;--ic-architectural-950:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-architectural-700-state-layer-10:rgb(65 70 77 / 10%);--ic-architectural-700-state-layer-20:rgb(65 70 77 / 20%);--ic-architectural-700-state-layer-24:rgb(65 70 77 / 24%);--ic-architectural-700-state-layer-34:rgb(65 70 77 / 34%);--ic-architectural-white-state-layer-10:rgb(255 255 255 / 10%);--ic-architectural-white-state-layer-20:rgb(255 255 255 / 20%);--ic-architectural-white-state-layer-24:rgb(255 255 255 / 24%);--ic-architectural-white-state-layer-25:rgb(255 255 255 / 25%);--ic-architectural-white-state-layer-30:rgb(255 255 255 / 30%);--ic-architectural-white-state-layer-34:rgb(255 255 255 / 34%);--ic-architectural-white-state-layer-40:rgb(255 255 255 / 40%);--ic-architectural-white-state-layer-50:rgb(255 255 255 / 50%);--ic-architectural-black-state-layer-10:rgb(0 0 0 / 10%);--ic-architectural-black-state-layer-20:rgb(0 0 0 / 20%);--ic-architectural-black-state-layer-25:rgb(0 0 0 / 25%);--ic-architectural-black-state-layer-30:rgb(0 0 0 / 30%);--ic-architectural-black-state-layer-40:rgb(0 0 0 / 40%);--ic-architectural-black-state-layer-50:rgb(0 0 0 / 50%);--ic-blue-0:#e1f0fc;--ic-blue-50:#c3e1f9;--ic-blue-100:#98c9f5;--ic-blue-200:#77b4f0;--ic-blue-300:#5da0ea;--ic-blue-400:#488fe3;--ic-blue-500:#377fdb;--ic-blue-600:#2a71d2;--ic-blue-700:#2064c8;--ic-blue-800:#1759bc;--ic-blue-900:#124db3;--ic-blue-1000:#0e43a8;--ic-blue-1100:#0b399c;--ic-blue-1200:#09308e;--ic-blue-1300:#07277e;--ic-blue-1400:#1b3c79;--ic-blue-1500:#122e63;--ic-blue-1600:#041144;--ic-blue-1700:#020b2e;--ic-blue-800-state-layer-10:rgb(23 89 188 / 10%);--ic-blue-800-state-layer-20:rgb(23 89 188 / 20%);--ic-blue-800-state-layer-24:rgb(23 89 188 / 24%);--ic-blue-800-state-layer-30:rgb(23 89 188 / 30%);--ic-blue-800-state-layer-34:rgb(23 89 188 / 34%);--ic-blue-800-state-layer-50:rgb(23 89 188 / 50%);--ic-red-0:#ffe4e3;--ic-red-50:#fec9c8;--ic-red-100:#fca19e;--ic-red-200:#f9837d;--ic-red-300:#f66d63;--ic-red-400:#f15b4e;--ic-red-500:#ec4e3d;--ic-red-600:#e54330;--ic-red-700:#dd3b25;--ic-red-800:#d4351c;--ic-red-900:#c92c16;--ic-red-1000:#bc2411;--ic-red-1100:#ad1e0e;--ic-red-1300:#8b1209;--ic-red-1500:#610a05;--ic-red-1700:#330403;--ic-green-0:#e8fef3;--ic-green-50:#d1fde7;--ic-green-100:#b2fad6;--ic-green-200:#97f6c8;--ic-green-300:#81f2bb;--ic-green-400:#6dedaf;--ic-green-500:#5ce7a3;--ic-green-600:#4cdf98;--ic-green-700:#3ed78d;--ic-green-800:#31cd83;--ic-green-900:#26c278;--ic-green-1000:#1bb56c;--ic-green-1100:#12a661;--ic-green-1200:#0b9655;--ic-green-1300:#058449;--ic-green-1400:#00703c;--ic-green-1600:#0e462b;--ic-green-1700:#0e3020;--ic-yellow-0:#fffbd8;--ic-yellow-50:#fff7b0;--ic-yellow-100:#ffed83;--ic-yellow-200:#ffe058;--ic-yellow-300:#ffd12e;--ic-yellow-400:#ffc107;--ic-yellow-500:#f8ae10;--ic-yellow-600:#f09d19;--ic-yellow-700:#e78f22;--ic-yellow-800:#dc832a;--ic-yellow-900:#d07932;--ic-yellow-1000:#c26f38;--ic-yellow-1100:#b3673c;--ic-yellow-1200:#a25e3f;--ic-yellow-1300:#8f553e;--ic-yellow-1400:#7a4c3c;--ic-yellow-1700:#342521;--ic-purple-0:#f9f2ff;--ic-purple-50:#efdbff;--ic-purple-100:#e4c5ff;--ic-purple-200:#d5a2fe;--ic-purple-300:#c988fd;--ic-purple-400:#bf74fc;--ic-purple-500:#b764fb;--ic-purple-600:#b057f9;--ic-purple-700:#ab4df7;--ic-purple-800:#a645f5;--ic-purple-900:#a13ef2;--ic-purple-1000:#9c38ee;--ic-purple-1100:#9733e8;--ic-purple-1200:#902fe0;--ic-purple-1300:#882ad5;--ic-purple-1400:#7c25c2;--ic-purple-1800:#350f54;--ic-light-blue-0:#f7faff;--ic-light-blue-100:#e3ecfd;--ic-light-blue-600:#769ee7;--ic-light-blue-1000:#3d6abe;--ic-light-blue-1400:#1b3c79;--ic-dark-blue-0:#eff3fa;--ic-dark-blue-20:#cdd5e3;--ic-dark-blue-40:#abb6ce;--ic-dark-blue-60:#8997b7;--ic-dark-blue-80:#6678a0;--ic-dark-blue-100:#445a8b;--ic-dark-blue-500:#192b50;--ic-dark-blue-700:#0c213a;--ic-dark-blue-800:#0e1c30;--ic-dark-blue-900:#0a1321;--ic-color-classification-blue:#2b71c7;--ic-color-classification-yellow:#f39c2c;--ic-color-classification-red:#a00;--ic-color-classification-grey:#616161;--ic-classification-not-set:var(--ic-color-classification-grey);--ic-classification-official:var(--ic-color-classification-blue);--ic-classification-official-sensitive:var(--ic-color-classification-blue);--ic-classification-secret:var(--ic-color-classification-yellow);--ic-classification-top-secret:var(--ic-color-classification-red);--ic-brand-blue-primary:#1b3c79;--ic-brand-darken-20:var(--ic-architectural-black-state-layer-20);--ic-brand-darken-30:var(--ic-architectural-black-state-layer-30);--ic-brand-darken-40:var(--ic-architectural-black-state-layer-40);--ic-brand-lighten-20:var(--ic-architectural-white-state-layer-20);--ic-brand-lighten-40:var(--ic-architectural-white-state-layer-40);--ic-color-link-default:#1759bc;--ic-color-link-hover:#7c2855;--ic-color-link-visited:#330072;--ic-color-link-visited-contrast:#b0b0b0;--ic-color-hyperlink-default-light:var(--ic-blue-800);--ic-color-hyperlink-default-dark:var(--ic-blue-300);--ic-color-hyperlink-visited-light:var(--ic-color-link-visited);--ic-color-hyperlink-visited-dark:var(--ic-purple-300);--ic-color-hyperlink-visited-monochrome-light:var(
+  );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-dark);--ic-tree-view-icon-disabled:var(--ic-color-icon-pressed);--ic-tree-view-icon:var(--ic-color-icon-inverted);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled);--ic-tree-view-divider:var(--ic-state-layer-neutral-light);--ic-tree-view-hover:var(--ic-action-light-bg-hover);--ic-tree-view-pressed:var(--ic-action-light-bg-pressed);--ic-tree-view-selected:var(--ic-action-dark-selected)}:root{--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-750:#3b3e45;--ic-architectural-800:#2c2f34;--ic-architectural-850:#232629;--ic-architectural-900:#17191c;--ic-architectural-950:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-architectural-700-state-layer-10:rgb(65 70 77 / 10%);--ic-architectural-700-state-layer-20:rgb(65 70 77 / 20%);--ic-architectural-700-state-layer-24:rgb(65 70 77 / 24%);--ic-architectural-700-state-layer-34:rgb(65 70 77 / 34%);--ic-architectural-white-state-layer-10:rgb(255 255 255 / 10%);--ic-architectural-white-state-layer-20:rgb(255 255 255 / 20%);--ic-architectural-white-state-layer-24:rgb(255 255 255 / 24%);--ic-architectural-white-state-layer-25:rgb(255 255 255 / 25%);--ic-architectural-white-state-layer-30:rgb(255 255 255 / 30%);--ic-architectural-white-state-layer-34:rgb(255 255 255 / 34%);--ic-architectural-white-state-layer-40:rgb(255 255 255 / 40%);--ic-architectural-white-state-layer-50:rgb(255 255 255 / 50%);--ic-architectural-black-state-layer-10:rgb(0 0 0 / 10%);--ic-architectural-black-state-layer-20:rgb(0 0 0 / 20%);--ic-architectural-black-state-layer-25:rgb(0 0 0 / 25%);--ic-architectural-black-state-layer-30:rgb(0 0 0 / 30%);--ic-architectural-black-state-layer-40:rgb(0 0 0 / 40%);--ic-architectural-black-state-layer-50:rgb(0 0 0 / 50%);--ic-blue-0:#e1f0fc;--ic-blue-50:#c3e1f9;--ic-blue-100:#98c9f5;--ic-blue-200:#77b4f0;--ic-blue-300:#5da0ea;--ic-blue-400:#488fe3;--ic-blue-500:#377fdb;--ic-blue-600:#2a71d2;--ic-blue-700:#2064c8;--ic-blue-800:#1759bc;--ic-blue-900:#124db3;--ic-blue-1000:#0e43a8;--ic-blue-1100:#0b399c;--ic-blue-1200:#09308e;--ic-blue-1300:#07277e;--ic-blue-1400:#1b3c79;--ic-blue-1500:#122e63;--ic-blue-1600:#041144;--ic-blue-1700:#020b2e;--ic-blue-800-state-layer-10:rgb(23 89 188 / 10%);--ic-blue-800-state-layer-20:rgb(23 89 188 / 20%);--ic-blue-800-state-layer-24:rgb(23 89 188 / 24%);--ic-blue-800-state-layer-30:rgb(23 89 188 / 30%);--ic-blue-800-state-layer-34:rgb(23 89 188 / 34%);--ic-blue-800-state-layer-50:rgb(23 89 188 / 50%);--ic-red-0:#ffe4e3;--ic-red-50:#fec9c8;--ic-red-100:#fca19e;--ic-red-200:#f9837d;--ic-red-300:#f66d63;--ic-red-400:#f15b4e;--ic-red-500:#ec4e3d;--ic-red-600:#e54330;--ic-red-700:#dd3b25;--ic-red-800:#d4351c;--ic-red-900:#c92c16;--ic-red-1000:#bc2411;--ic-red-1100:#ad1e0e;--ic-red-1300:#8b1209;--ic-red-1500:#610a05;--ic-red-1700:#330403;--ic-green-0:#e8fef3;--ic-green-50:#d1fde7;--ic-green-100:#b2fad6;--ic-green-200:#97f6c8;--ic-green-300:#81f2bb;--ic-green-400:#6dedaf;--ic-green-500:#5ce7a3;--ic-green-600:#4cdf98;--ic-green-700:#3ed78d;--ic-green-800:#31cd83;--ic-green-900:#26c278;--ic-green-1000:#1bb56c;--ic-green-1100:#12a661;--ic-green-1200:#0b9655;--ic-green-1300:#058449;--ic-green-1400:#00703c;--ic-green-1600:#0e462b;--ic-green-1700:#0e3020;--ic-yellow-0:#fffbd8;--ic-yellow-50:#fff7b0;--ic-yellow-100:#ffed83;--ic-yellow-200:#ffe058;--ic-yellow-300:#ffd12e;--ic-yellow-400:#ffc107;--ic-yellow-500:#f8ae10;--ic-yellow-600:#f09d19;--ic-yellow-700:#e78f22;--ic-yellow-800:#dc832a;--ic-yellow-900:#d07932;--ic-yellow-1000:#c26f38;--ic-yellow-1100:#b3673c;--ic-yellow-1200:#a25e3f;--ic-yellow-1300:#8f553e;--ic-yellow-1400:#7a4c3c;--ic-yellow-1700:#342521;--ic-purple-0:#f9f2ff;--ic-purple-50:#efdbff;--ic-purple-100:#e4c5ff;--ic-purple-200:#d5a2fe;--ic-purple-300:#c988fd;--ic-purple-400:#bf74fc;--ic-purple-500:#b764fb;--ic-purple-600:#b057f9;--ic-purple-700:#ab4df7;--ic-purple-800:#a645f5;--ic-purple-900:#a13ef2;--ic-purple-1000:#9c38ee;--ic-purple-1100:#9733e8;--ic-purple-1200:#902fe0;--ic-purple-1300:#882ad5;--ic-purple-1400:#7c25c2;--ic-purple-1800:#350f54;--ic-light-blue-0:#f7faff;--ic-light-blue-100:#e3ecfd;--ic-light-blue-600:#769ee7;--ic-light-blue-1000:#3d6abe;--ic-light-blue-1400:#1b3c79;--ic-dark-blue-0:#eff3fa;--ic-dark-blue-20:#cdd5e3;--ic-dark-blue-40:#abb6ce;--ic-dark-blue-60:#8997b7;--ic-dark-blue-80:#6678a0;--ic-dark-blue-100:#445a8b;--ic-dark-blue-500:#192b50;--ic-dark-blue-700:#0c213a;--ic-dark-blue-800:#0e1c30;--ic-dark-blue-900:#0a1321;--ic-color-classification-blue:#2b71c7;--ic-color-classification-yellow:#f39c2c;--ic-color-classification-red:#a00;--ic-color-classification-grey:#616161;--ic-classification-not-set:var(--ic-color-classification-grey);--ic-classification-official:var(--ic-color-classification-blue);--ic-classification-official-sensitive:var(--ic-color-classification-blue);--ic-classification-secret:var(--ic-color-classification-yellow);--ic-classification-top-secret:var(--ic-color-classification-red);--ic-color-link-default:#1759bc;--ic-color-link-hover:#7c2855;--ic-color-link-visited:#330072;--ic-color-link-visited-contrast:#b0b0b0;--ic-color-hyperlink-default-light:var(--ic-blue-800);--ic-color-hyperlink-default-dark:var(--ic-blue-300);--ic-color-hyperlink-visited-light:var(--ic-color-link-visited);--ic-color-hyperlink-visited-dark:var(--ic-purple-300);--ic-color-hyperlink-visited-monochrome-light:var(
     --ic-color-text-secondary-light
   );--ic-color-hyperlink-visited-monochrome-dark:var(
     --ic-color-link-visited-contrast
@@ -1395,51 +1395,71 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
   );--ic-status-error-pressed:rgb(
     calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
       calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
-  );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-white);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-white);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverse-light:var(--ic-color-text-primary-dark);--ic-color-text-inverse-dark:var(--ic-color-text-primary-light);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-default:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-300);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-800);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-600);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-300);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-700);--ic-color-background-solid:var(--ic-architectural-white);--ic-color-background-solid-disabled:var(--ic-architectural-100);--ic-color-background-solid-hover:var(--ic-blue-50);--ic-color-background-solid-pressed:var(--ic-blue-100);--ic-color-background-solid-mono:var(--ic-architectural-black);--ic-color-background-solid-mono-disabled:var(--ic-architectural-100);--ic-color-background-solid-mono-hover:var(--ic-architectural-800);--ic-color-background-solid-mono-pressed:var(--ic-architectural-600);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-700);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-800);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-success-light:var(--ic-green-1400);--ic-color-border-success-dark:var(--ic-green-300);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-400);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-600);--ic-color-border-warning-light:var(--ic-yellow-900);--ic-color-border-warning-dark:var(--ic-yellow-300);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-400);--ic-color-border-warning-pressed-light:var(--ic-yellow-1300);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-light:var(--ic-red-800);--ic-color-border-error-dark:var(--ic-red-300);--ic-color-border-error-hover-light:var(--ic-red-1100);--ic-color-border-error-hover-dark:var(--ic-red-400);--ic-color-border-error-pressed-light:var(--ic-red-1300);--ic-color-border-error-pressed-dark:var(--ic-red-700);--ic-color-border-action-light:var(--ic-blue-800);--ic-color-border-action-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-300);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-700);--ic-action-light:var(--ic-architectural-white);--ic-action-light-hover:var(--ic-architectural-200);--ic-action-light-pressed:var(--ic-architectural-300);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-light-selected:var(--ic-blue-800-state-layer-10);--ic-action-dark:var(--ic-architectural-950);--ic-action-dark-hover:var(--ic-architectural-800);--ic-action-dark-pressed:var(--ic-architectural-700);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-dark-selected:var(--ic-blue-900);--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
-    var(--ic-theme-primary-r) var(--ic-theme-primary-g)
-      var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
-  );--ic-theme-secondary:rgb(
-    calc(var(--ic-theme-primary-r) * 0.8) calc(var(--ic-theme-primary-g) * 0.8)
-      calc(var(--ic-theme-primary-b) * 0.8) / var(--ic-theme-primary-a)
-  );--ic-theme-tertiary:rgb(
-    calc(var(--ic-theme-primary-r) * 0.6) calc(var(--ic-theme-primary-g) * 0.6)
-      calc(var(--ic-theme-primary-b) * 0.6) / var(--ic-theme-primary-a)
-  );--ic-theme-secondary-light:rgb(
-    calc(var(--ic-theme-primary-r) + ((255 - var(--ic-theme-primary-r)) * 0.2))
+  );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-white);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-white);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverse-light:var(--ic-color-text-primary-dark);--ic-color-text-inverse-dark:var(--ic-color-text-primary-light);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-default:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-300);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-800);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-600);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-300);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-700);--ic-color-background-solid:var(--ic-architectural-white);--ic-color-background-solid-disabled:var(--ic-architectural-100);--ic-color-background-solid-hover:var(--ic-blue-50);--ic-color-background-solid-pressed:var(--ic-blue-100);--ic-color-background-solid-mono:var(--ic-architectural-black);--ic-color-background-solid-mono-disabled:var(--ic-architectural-100);--ic-color-background-solid-mono-hover:var(--ic-architectural-800);--ic-color-background-solid-mono-pressed:var(--ic-architectural-600);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-700);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-800);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-success-light:var(--ic-green-1400);--ic-color-border-success-dark:var(--ic-green-300);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-400);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-600);--ic-color-border-warning-light:var(--ic-yellow-900);--ic-color-border-warning-dark:var(--ic-yellow-300);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-400);--ic-color-border-warning-pressed-light:var(--ic-yellow-1300);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-light:var(--ic-red-800);--ic-color-border-error-dark:var(--ic-red-300);--ic-color-border-error-hover-light:var(--ic-red-1100);--ic-color-border-error-hover-dark:var(--ic-red-400);--ic-color-border-error-pressed-light:var(--ic-red-1300);--ic-color-border-error-pressed-dark:var(--ic-red-700);--ic-color-border-action-light:var(--ic-blue-800);--ic-color-border-action-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-300);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-700);--ic-action-light:var(--ic-architectural-white);--ic-action-light-hover:var(--ic-architectural-200);--ic-action-light-pressed:var(--ic-architectural-300);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-light-selected:var(--ic-blue-800-state-layer-10);--ic-action-dark:var(--ic-architectural-950);--ic-action-dark-hover:var(--ic-architectural-800);--ic-action-dark-pressed:var(--ic-architectural-700);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-dark-selected:var(--ic-blue-900);--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-brand-blue-primary:#1b3c79;--ic-brand-blue-primary-r:27;--ic-brand-blue-primary-g:60;--ic-brand-blue-primary-b:121;--ic-brand-blue-primary-a:1;--ic-brand-darken-20:var(--ic-architectural-black-state-layer-20);--ic-brand-darken-30:var(--ic-architectural-black-state-layer-30);--ic-brand-darken-40:var(--ic-architectural-black-state-layer-40);--ic-brand-lighten-20:var(--ic-architectural-white-state-layer-20);--ic-brand-lighten-40:var(--ic-architectural-white-state-layer-40);--ic-brand-color-primary-r:var(--ic-brand-blue-primary-r);--ic-brand-color-primary-g:var(--ic-brand-blue-primary-g);--ic-brand-color-primary-b:var(--ic-brand-blue-primary-b);--ic-brand-color-primary-a:var(--ic-brand-blue-primary-a);--ic-brand-color-primary:rgb(
+    var(--ic-brand-color-primary-r) var(--ic-brand-color-primary-g)
+      var(--ic-brand-color-primary-b) / var(--ic-brand-color-primary-a)
+  );--ic-brand-color-secondary:rgb(
+    calc(var(--ic-brand-color-primary-r) * 0.8)
+      calc(var(--ic-brand-color-primary-g) * 0.8)
+      calc(var(--ic-brand-color-primary-b) * 0.8) /
+      var(--ic-brand-color-primary-a)
+  );--ic-brand-color-tertiary:rgb(
+    calc(var(--ic-brand-color-primary-r) * 0.6)
+      calc(var(--ic-brand-color-primary-g) * 0.6)
+      calc(var(--ic-brand-color-primary-b) * 0.6) /
+      var(--ic-brand-color-primary-a)
+  );--ic-brand-color-secondary-light:rgb(
+    calc(
+        var(--ic-brand-color-primary-r) +
+          ((255 - var(--ic-brand-color-primary-r)) * 0.2)
+      )
       calc(
-        var(--ic-theme-primary-g) + ((255 - var(--ic-theme-primary-g)) * 0.2)
+        var(--ic-brand-color-primary-g) +
+          ((255 - var(--ic-brand-color-primary-g)) * 0.2)
       )
       calc(
-        var(--ic-theme-primary-b) + ((255 - var(--ic-theme-primary-b)) * 0.2)
-      ) / var(--ic-theme-primary-a)
-  );--ic-theme-tertiary-light:rgb(
-    calc(var(--ic-theme-primary-r) + ((255 - var(--ic-theme-primary-r)) * 0.4))
+        var(--ic-brand-color-primary-b) +
+          ((255 - var(--ic-brand-color-primary-b)) * 0.2)
+      ) / var(--ic-brand-color-primary-a)
+  );--ic-brand-color-tertiary-light:rgb(
+    calc(
+        var(--ic-brand-color-primary-r) +
+          ((255 - var(--ic-brand-color-primary-r)) * 0.4)
+      )
       calc(
-        var(--ic-theme-primary-g) + ((255 - var(--ic-theme-primary-g)) * 0.4)
+        var(--ic-brand-color-primary-g) +
+          ((255 - var(--ic-brand-color-primary-g)) * 0.4)
       )
       calc(
-        var(--ic-theme-primary-b) + ((255 - var(--ic-theme-primary-b)) * 0.4)
-      ) / var(--ic-theme-primary-a)
-  );--ic-theme-dark-mode-threshold:133.3505;--ic-theme-primary-r-calc:calc(var(--ic-theme-primary-r) * 299);--ic-theme-primary-g-calc:calc(var(--ic-theme-primary-g) * 587);--ic-theme-primary-b-calc:calc(var(--ic-theme-primary-b) * 114);--ic-theme-primary-sum-calc:calc(
-    var(--ic-theme-primary-r-calc) + var(--ic-theme-primary-g-calc) +
-      var(--ic-theme-primary-b-calc)
-  );--ic-theme-primary-divide-calc:calc(var(--ic-theme-primary-sum-calc) / 1000);--ic-theme-primary-subtract-calc:calc(
-    var(--ic-theme-primary-divide-calc) - var(--ic-theme-dark-mode-threshold)
-  );--ic-theme-primary-calc:calc(var(--ic-theme-primary-subtract-calc) * -10000);--ic-theme-calc:max(0, var(--ic-theme-primary-calc));--ic-theme-text:rgb(
-    min(255, calc(var(--ic-theme-calc) + 11))
-      min(255, calc(var(--ic-theme-calc) + 12))
-      min(255, calc(var(--ic-theme-calc) + 12)) / var(--ic-theme-primary-a)
-  );--ic-theme-hover:rgb(
-    min(255, calc(var(--ic-theme-calc) + 65))
-      min(255, calc(var(--ic-theme-calc) + 70))
-      min(255, calc(var(--ic-theme-calc) + 77)) / 10%
-  );--ic-theme-active:rgb(
-    min(255, calc(var(--ic-theme-calc) + 65))
-      min(255, calc(var(--ic-theme-calc) + 70))
-      min(255, calc(var(--ic-theme-calc) + 77)) / 20%
+        var(--ic-brand-color-primary-b) +
+          ((255 - var(--ic-brand-color-primary-b)) * 0.4)
+      ) / var(--ic-brand-color-primary-a)
+  );--ic-brand-dark-mode-threshold:133.3505;--ic-brand-color-primary-r-calc:calc(var(--ic-brand-color-primary-r) * 299);--ic-brand-color-primary-g-calc:calc(var(--ic-brand-color-primary-g) * 587);--ic-brand-color-primary-b-calc:calc(var(--ic-brand-color-primary-b) * 114);--ic-brand-color-primary-sum-calc:calc(
+    var(--ic-brand-color-primary-r-calc) + var(--ic-brand-color-primary-g-calc) +
+      var(--ic-brand-color-primary-b-calc)
+  );--ic-brand-color-primary-divide-calc:calc(
+    var(--ic-brand-color-primary-sum-calc) / 1000
+  );--ic-brand-color-primary-subtract-calc:calc(
+    var(--ic-brand-color-primary-divide-calc) -
+      var(--ic-brand-dark-mode-threshold)
+  );--ic-brand-color-primary-calc:calc(
+    var(--ic-brand-color-primary-subtract-calc) * -10000
+  );--ic-brand-calc:max(0, var(--ic-brand-color-primary-calc));--ic-brand-text-color:rgb(
+    min(255, calc(var(--ic-brand-calc) + 11))
+      min(255, calc(var(--ic-brand-calc) + 12))
+      min(255, calc(var(--ic-brand-calc) + 12)) /
+      var(--ic-brand-color-primary-a)
+  );--ic-brand-hover:rgb(
+    min(255, calc(var(--ic-brand-calc) + 65))
+      min(255, calc(var(--ic-brand-calc) + 70))
+      min(255, calc(var(--ic-brand-calc) + 77)) / 10%
+  );--ic-brand-active:rgb(
+    min(255, calc(var(--ic-brand-calc) + 65))
+      min(255, calc(var(--ic-brand-calc) + 70))
+      min(255, calc(var(--ic-brand-calc) + 77)) / 20%
   );--ic-table-row-selected:#c7d7ef;--ic-color-icon-brand:var(--ic-architectural-white);--ic-color-icon-neutral:var(--ic-architectural-950);--ic-color-icon-inverted:var(--ic-architectural-white);--ic-color-icon-hover-light:var(--ic-architectural-200);--ic-color-icon-hover-dark:var(--ic-architectural-800);--ic-color-icon-pressed-light:var(--ic-architectural-300);--ic-color-icon-pressed-dark:var(--ic-architectural-700);--ic-color-icon-disabled-mid:var(--ic-architectural-200);--ic-color-icon-disabled-light:var(--ic-architectural-300);--ic-color-icon-disabled-dark:var(--ic-architectural-500);--ic-color-icon-grey-default:var(--ic-architectural-400);--ic-color-icon-grey-lighter:var(--ic-architectural-100);--ic-color-icon-grey-light:var(--ic-architectural-200);--ic-color-icon-grey-dark:var(--ic-architectural-500);--ic-color-icon-grey-darker:var(--ic-architectural-700);--ic-color-icon-action-default-light:var(--ic-blue-800);--ic-color-icon-action-default-dark:var(--ic-blue-400);--ic-color-icon-action-hover:var(--ic-blue-1100);--ic-color-icon-action-hover-dark:var(--ic-blue-200);--ic-color-icon-action-pressed:var(--ic-blue-1300);--ic-color-icon-action-pressed-dark:var(--ic-blue-100);--ic-color-icon-error-light:var(--ic-red-300);--ic-color-icon-error-dark:var(--ic-red-800);--ic-color-icon-action-dark:var(--ic-architectural-white);--ic-state-layer-primary:var(--ic-brand-blue-primary);--ic-state-layer-secondary-default:var(--ic-blue-50);--ic-state-layer-secondary-light:var(--ic-blue-0);--ic-state-layer-secondary-dark:var(--ic-blue-100);--ic-state-layer-neutral-default:var(--ic-architectural-200);--ic-state-layer-neutral-light:var(--ic-architectural-100);--ic-state-layer-neutral-dark:var(--ic-architectural-400);--ic-state-layer-neutral-darker:var(--ic-architectural-600);--ic-state-layer-darken-10:var(--ic-architectural-black-state-layer-10);--ic-state-layer-darken-20:var(--ic-architectural-black-state-layer-20);--ic-state-layer-darken-25:var(--ic-architectural-black-state-layer-25);--ic-state-layer-darken-30:var(--ic-architectural-black-state-layer-30);--ic-state-layer-darken-40:var(--ic-architectural-black-state-layer-40);--ic-state-layer-darken-50:var(--ic-architectural-black-state-layer-50);--ic-state-layer-lighten-10:var(--ic-architectural-white-state-layer-10);--ic-state-layer-lighten-20:var(--ic-architectural-white-state-layer-20);--ic-state-layer-lighten-25:var(--ic-architectural-white-state-layer-25);--ic-state-layer-lighten-40:var(--ic-architectural-white-state-layer-40);--ic-state-layer-lighten-50:var(--ic-architectural-white-state-layer-50);--ic-surface-brand:var(--ic-architectural-white);--ic-surface-primary:var(--ic-architectural-white);--ic-surface-secondary:var(--ic-architectural-white);--ic-surface-inverted:var(--ic-architectural-white);--ic-surface-disabled:var(--ic-architectural-white);--ic-classification-banner-text:var(--ic-color-text-primary-light);--ic-classification-banner-text-inverted:var(--ic-color-text-inverse-light);--ic-classification-banner-not-set:var(--ic-classification-not-set);--ic-classification-banner-official:var(--ic-classification-official);--ic-classification-banner-official-sensitive:var(
     --ic-classification-official
-  );--ic-classification-banner-secret:var(--ic-classification-secret);--ic-classification-banner-top-secret:var(--ic-classification-top-secret);--ic-footer-background:var(--ic-theme-secondary);--ic-footer-text:var(--ic-color-brand-text);--ic-footer-link:var(--ic-color-hyperlink-brand);--ic-footer-icon:var(--ic-color-icon-brand);--ic-footer-chevron-icon:var(--ic-color-icon-brand);--ic-footer-logo:var(--ic-color-icon-brand);--ic-footer-bottom-background:var(--ic-theme-tertiary);--ic-footer-keyline:var(--ic-color-keyline-lighten);--ic-footer-hover:var(--ic-action-light-bg-hover);--ic-footer-pressed:var(--ic-action-light-bg-pressed);--ic-hero-background:var(--ic-theme-tertiary);--ic-hero-heading:var(--ic-color-brand-text);--ic-hero-secondary-heading:var(--ic-color-brand-text);--ic-hero-body:var(--ic-color-brand-text);--ic-hero-keyline:var(--ic-color-keyline-lighten);--ic-side-navigation-background:var(--ic-theme-primary);--ic-side-navigation-icon:var(--ic-color-icon-brand);--ic-side-navigation-icon-disabled:var(--ic-color-icon-grey-light);--ic-side-navigation-status-tag-text:var(--ic-color-text-primary-light);--ic-side-navigation-logo:var(--ic-color-icon-brand);--ic-side-navigation-keyline:var(--ic-state-layer-lighten-20);--ic-side-navigation-icon-and-label:var(--ic-color-brand-text);--ic-side-navigation-theme:var(--ic-color-background-primary-light);--ic-side-navigation-hover:var(--ic-theme-hover);--ic-side-navigation-pressed:var(--ic-theme-active);--ic-side-navigation-icon-label:var(--ic-color-icon-brand);--ic-side-navigation-text:var(--ic-theme-text);--ic-side-navigation-status-tag:var(--ic-color-background-primary-light);--ic-side-navigation-focussed:var(--ic-color-background-primary-light);--ic-side-navigation-focussed-text:var(--ic-color-text-primary-light);--ic-side-navigation-focussed-icon:var(--ic-color-text-primary-light);--ic-side-navigation-selection-indicator:var(--ic-color-icon-brand);--ic-side-navigation-selection-indicator-disabled:var(
+  );--ic-classification-banner-secret:var(--ic-classification-secret);--ic-classification-banner-top-secret:var(--ic-classification-top-secret);--ic-footer-background:var(--ic-brand-color-secondary);--ic-footer-text:var(--ic-color-brand-text);--ic-footer-link:var(--ic-color-hyperlink-brand);--ic-footer-icon:var(--ic-color-icon-brand);--ic-footer-chevron-icon:var(--ic-color-icon-brand);--ic-footer-logo:var(--ic-color-icon-brand);--ic-footer-bottom-background:var(--ic-brand-color-tertiary);--ic-footer-keyline:var(--ic-color-keyline-lighten);--ic-footer-hover:var(--ic-action-light-bg-hover);--ic-footer-pressed:var(--ic-action-light-bg-pressed);--ic-hero-background:var(--ic-brand-color-tertiary);--ic-hero-heading:var(--ic-color-brand-text);--ic-hero-secondary-heading:var(--ic-color-brand-text);--ic-hero-body:var(--ic-color-brand-text);--ic-hero-keyline:var(--ic-color-keyline-lighten);--ic-side-navigation-background:var(--ic-brand-color-primary);--ic-side-navigation-icon:var(--ic-color-icon-brand);--ic-side-navigation-icon-disabled:var(--ic-color-icon-grey-light);--ic-side-navigation-status-tag-text:var(--ic-color-text-primary-light);--ic-side-navigation-logo:var(--ic-color-icon-brand);--ic-side-navigation-keyline:var(--ic-state-layer-lighten-20);--ic-side-navigation-icon-and-label:var(--ic-color-brand-text);--ic-side-navigation-theme:var(--ic-color-background-primary-light);--ic-side-navigation-hover:var(--ic-brand-hover);--ic-side-navigation-pressed:var(--ic-brand-active);--ic-side-navigation-icon-label:var(--ic-color-icon-brand);--ic-side-navigation-text:var(--ic-brand-text-color);--ic-side-navigation-status-tag:var(--ic-color-background-primary-light);--ic-side-navigation-focussed:var(--ic-color-background-primary-light);--ic-side-navigation-focussed-text:var(--ic-color-text-primary-light);--ic-side-navigation-focussed-icon:var(--ic-color-text-primary-light);--ic-side-navigation-selection-indicator:var(--ic-color-icon-brand);--ic-side-navigation-selection-indicator-disabled:var(
     --ic-color-icon-disabled-light
   );--ic-toast-background:var(--ic-color-background-primary-dark);--ic-toast-status-success:var(--ic-status-success-contrast);--ic-toast-status-error:var(--ic-status-error-contrast);--ic-toast-status-warning:var(--ic-status-warning-contrast);--ic-toast-status-info:var(--ic-status-info-contrast);--ic-toast-status-neutral:var(--ic-status-unknown-contrast);--ic-toast-icon-success:var(--ic-status-success-contrast);--ic-toast-icon-error:var(--ic-status-error-contrast);--ic-toast-icon-warning:var(--ic-status-warning-contrast);--ic-toast-icon-info:var(--ic-status-info-contrast);--ic-toast-icon-neutral:var(--ic-status-unknown-contrast);--ic-toast-title:var(--ic-color-text-inverse-light);--ic-toast-description:var(--ic-color-text-inverse-light);--ic-toast-dismiss-button:var(--ic-color-icon-inverted);--ic-atoms-input-field-background-light:var(
     --ic-color-background-primary-light