From 41aea8fe57f2992201ce56652a7d485522b58d71 Mon Sep 17 00:00:00 2001 From: Bruno Sastre Date: Tue, 19 Aug 2025 21:56:45 -0300 Subject: [PATCH 1/3] `[mercury][dialog]` Updates on header styles - Include mixins for the header button (a mixin for tertiary button, and a mixin for icon-only) - Set a min-block-size on the header and remove the header padding (to prevent excesive height due to header padding + close button padding). - Set padding-block on the header caption (to prevent text overlap with header block borders on excesive large heading captions). --- .../src/components/dialog/_dialog-styles.scss | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/mercury/src/components/dialog/_dialog-styles.scss b/packages/mercury/src/components/dialog/_dialog-styles.scss index 059a9e03b..20c198948 100644 --- a/packages/mercury/src/components/dialog/_dialog-styles.scss +++ b/packages/mercury/src/components/dialog/_dialog-styles.scss @@ -1,3 +1,5 @@ +@use "../../base/button/button-styles" as *; +@use "../../icons/button" as *; @use "../../base/common" as *; @use "../../base/icons" as *; @use "../../base/typography" as *; @@ -42,8 +44,14 @@ } &__header { + /* In the following min-block-size calculation, + var(--font-size-subtitle-xs) and var(--font-size-subtitle-xs) + represent the ::part(caption) font size and line-height, respectively. */ + min-block-size: calc( + var(--mer-spacing--md) * 2 + var(--font-size-subtitle-xs) * + var(--line-height-tight) + ); gap: var(--mer-spacing--sm); - padding-block: var(--mer-spacing--md); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); @@ -51,17 +59,20 @@ &__caption { @include subtitle-semi-bold-xs(); + padding: var(--mer-spacing--md) 0; word-break: break-word; } &__close { - @include icon-size--md(); - --icon-path: var(--icon__system_close_primary--enabled); + --icon-path: var(--icon__system_close_neutral--enabled); + &--before { + @include icon-size--md(); + } &--hover { - --icon-path: var(--icon__system_close_primary--hover); + --icon-path: var(--icon__system_close_neutral--hover); } &--active { - --icon-path: var(--icon__system_close_primary--active); + --icon-path: var(--icon__system_close_neutral--active); } } @@ -162,6 +173,9 @@ #{$close-selector} { @extend %dialog__close; + &::before { + @extend %dialog__close--before; + } &:hover { @extend %dialog__close--hover; } @@ -169,6 +183,8 @@ @extend %dialog__close--active; } } + @include button-tertiary($selector: $close-selector, $add--disabled: true); + @include button-icon-only($selector: $close-selector); #{$content-selector} { @extend %dialog__content; From 98fffb6cc0d30d1eefc542377ddb68caedc98b11 Mon Sep 17 00:00:00 2001 From: Bruno Sastre Date: Tue, 19 Aug 2025 21:57:14 -0300 Subject: [PATCH 2/3] `[mercury][general]` Update focus outline color --- packages/mercury/src/tokens/semantic/_general.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mercury/src/tokens/semantic/_general.scss b/packages/mercury/src/tokens/semantic/_general.scss index 5f35ea3f2..dd8619f2c 100644 --- a/packages/mercury/src/tokens/semantic/_general.scss +++ b/packages/mercury/src/tokens/semantic/_general.scss @@ -81,7 +81,7 @@ // ---------------------- --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; - --focus__outline-color: var(--mer-border-color__primary); + --focus__outline-color: var(--mer-border-color__primary--focused); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); } From 910cb31e59c2cf21bd577657e1549aaf8468101e Mon Sep 17 00:00:00 2001 From: Bruno Sastre Date: Tue, 19 Aug 2025 21:57:41 -0300 Subject: [PATCH 3/3] `[mercury][dialog]` Update dialog bundles tests --- .../bundles/expected-bundle-content/all.json | 29 ++++++++++--------- .../base/base-globant.json | 4 +-- .../expected-bundle-content/base/base.json | 4 +-- .../components/dialog.json | 19 ++++++++---- 4 files changed, 33 insertions(+), 23 deletions(-) diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/all.json b/packages/mercury/src/tests/bundles/expected-bundle-content/all.json index 7fff47150..b081c49df 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/all.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/all.json @@ -18,9 +18,9 @@ ".body-italic-xl, .body-semi-bold-xl, .body-regular-xl { font-size: var(--font-size-body-xl); }", ".body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl { font-weight: var(--font-weight-regular); font-style: italic; }", ".body-italic-xs, .body-semi-bold-xs, .body-regular-xs { font-size: var(--font-size-body-xs); }", - ".body-regular-m, .pill::part(item), .button-tertiary, .dropdown.button-tertiary::part(expandable-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }", + ".body-regular-m, .pill::part(item), .button-tertiary, .dialog::part(close-button), .dropdown.button-tertiary::part(expandable-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }", ".button-icon-and-text, .dropdown.button-with-icon::part(expandable-button) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--mer-spacing--xs); }", - ".button-icon-only, .chat::part(send-button), .chat::part(stop-generating-answer-button), paginator__first-button-selector, paginator__last-button-selector, paginator__next-button-selector, paginator__previous-button-selector { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }", + ".button-icon-only, .chat::part(send-button), .chat::part(stop-generating-answer-button), .dialog::part(close-button), paginator__first-button-selector, paginator__last-button-selector, paginator__next-button-selector, paginator__previous-button-selector { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }", ".button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { --button-background-color: var(--mer-accent__primary); --control__border-color: var(--button-background-color); --button-color: var(--mer-text__on-primary); --button-color--enabled: var( --mer-text__on-primary ); --button-color--active: var(--mer-text__on-primary--active); }", ".button-primary-destructive { --button-background-color: var(--mer-accent__primary--destructive); --button-color: var(--mer-text__on-primary); }", ".button-primary-destructive:active { --button-background-color: var(--mer-accent__primary--destructive-active); --button-color: var(--mer-text__highlighted); }", @@ -30,7 +30,7 @@ ".button-primary-success:hover { --button-background-color: var(--accent-success-hover); --button-color: var(--mer-text__on-primary); }", ".button-primary:active, .dropdown.button-primary::part(expandable-button):active, .segmented-control-filled .segmented-control-item::part(action):active { --button-background-color: var(--mer-accent__primary--active); --button-color: var(--button-color--active); }", ".button-primary:disabled, .button-primary-destructive:disabled, .button-primary-success:disabled, .dropdown.button-primary::part(expandable-button):disabled { --button-background-color: var(--mer-accent__primary--disabled); --button-color: var(--mer-text__on-disabled); }", - ".button-primary:focus-visible, .button-primary-destructive:focus-visible, .button-primary-success:focus-visible, .button-secondary:focus-visible, .button-secondary-destructive:focus-visible, .button-tertiary:focus-visible, .chat::part(send-button):focus-visible, .chat::part(stop-generating-answer-button):focus-visible, .dropdown.button-primary::part(expandable-button):focus-visible, .dropdown.button-secondary::part(expandable-button):focus-visible, .dropdown.button-tertiary::part(expandable-button):focus-visible, .paginator::part(first__button):focus-visible, .paginator::part(last__button):focus-visible, .paginator::part(next__button):focus-visible, .paginator::part(prev__button):focus-visible, .segmented-control-filled .segmented-control-item::part(action):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }", + ".button-primary:focus-visible, .button-primary-destructive:focus-visible, .button-primary-success:focus-visible, .button-secondary:focus-visible, .button-secondary-destructive:focus-visible, .button-tertiary:focus-visible, .chat::part(send-button):focus-visible, .chat::part(stop-generating-answer-button):focus-visible, .dialog::part(close-button):focus-visible, .dropdown.button-primary::part(expandable-button):focus-visible, .dropdown.button-secondary::part(expandable-button):focus-visible, .dropdown.button-tertiary::part(expandable-button):focus-visible, .paginator::part(first__button):focus-visible, .paginator::part(last__button):focus-visible, .paginator::part(next__button):focus-visible, .paginator::part(prev__button):focus-visible, .segmented-control-filled .segmented-control-item::part(action):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }", ".button-primary:hover, .dropdown.button-primary::part(expandable-button):hover, .segmented-control-filled .segmented-control-item::part(action):hover { --button-background-color: var(--mer-accent__primary--hover); --button-color: var(--mer-text__on-primary); }", ".button-secondary, .button-secondary-destructive, .chat::part(send-button), .chat::part(stop-generating-answer-button), .dropdown.button-secondary::part(expandable-button) { --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }", ".button-secondary-destructive { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error); }", @@ -39,11 +39,11 @@ ".button-secondary:active, .chat::part(send-button):active, .chat::part(stop-generating-answer-button):active, .dropdown.button-secondary::part(expandable-button):active { --control__border-color: var(--mer-border-color__primary--active); --button-color: var(--button-color--active); }", ".button-secondary:disabled, .button-secondary-destructive:disabled, .chat::part(send-button):disabled, .chat::part(stop-generating-answer-button):disabled, .dropdown.button-secondary::part(expandable-button):disabled { --button-color: var(--mer-text__on-disabled); }", ".button-secondary:hover, .chat::part(send-button):hover, .chat::part(stop-generating-answer-button):hover, .dropdown.button-secondary::part(expandable-button):hover { --button-color: var(--mer-text__primary--hover); }", - ".button-tertiary, .dropdown.button-tertiary::part(expandable-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }", - ".button-tertiary, .dropdown.button-tertiary::part(expandable-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button), .button-secondary, .button-secondary-destructive, .chat::part(send-button), .chat::part(stop-generating-answer-button), .dropdown.button-secondary::part(expandable-button), .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }", - ".button-tertiary:active, .dropdown.button-tertiary::part(expandable-button):active, .paginator::part(first__button):active, .paginator::part(last__button):active, .paginator::part(next__button):active, .paginator::part(prev__button):active { --button-color: var(--mer-text__primary--active); }", - ".button-tertiary:disabled, .dropdown.button-tertiary::part(expandable-button):disabled, .paginator::part(first__button):disabled, .paginator::part(last__button):disabled, .paginator::part(next__button):disabled, .paginator::part(prev__button):disabled { --button-color: var(--mer-text__on-disabled); }", - ".button-tertiary:hover, .dropdown.button-tertiary::part(expandable-button):hover, .paginator::part(first__button):hover, .paginator::part(last__button):hover, .paginator::part(next__button):hover, .paginator::part(prev__button):hover { --button-color: var(--mer-text__primary--hover); }", + ".button-tertiary, .dialog::part(close-button), .dropdown.button-tertiary::part(expandable-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }", + ".button-tertiary, .dialog::part(close-button), .dropdown.button-tertiary::part(expandable-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button), .button-secondary, .button-secondary-destructive, .chat::part(send-button), .chat::part(stop-generating-answer-button), .dropdown.button-secondary::part(expandable-button), .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }", + ".button-tertiary:active, .dialog::part(close-button):active, .dropdown.button-tertiary::part(expandable-button):active, .paginator::part(first__button):active, .paginator::part(last__button):active, .paginator::part(next__button):active, .paginator::part(prev__button):active { --button-color: var(--mer-text__primary--active); }", + ".button-tertiary:disabled, .dialog::part(close-button):disabled, .dropdown.button-tertiary::part(expandable-button):disabled, .paginator::part(first__button):disabled, .paginator::part(last__button):disabled, .paginator::part(next__button):disabled, .paginator::part(prev__button):disabled { --button-color: var(--mer-text__on-disabled); }", + ".button-tertiary:hover, .dialog::part(close-button):hover, .dropdown.button-tertiary::part(expandable-button):hover, .paginator::part(first__button):hover, .paginator::part(last__button):hover, .paginator::part(next__button):hover, .paginator::part(prev__button):hover { --button-color: var(--mer-text__primary--hover); }", ".buttons-spacer { display: flex; gap: var(--mer-spacing--xs); }", ".ch-sidebar--collapsed.sidebar-with-motion { inline-size: var(--ch-sidebar-inline-size--collapsed) !important; }", ".chat { --button-block-size: 31px; --button-margin-block: 16px; --font-weight-regular: 100; --line-height-tight: 1.4; }", @@ -134,13 +134,14 @@ ".control-header-with-border { border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01); }", ".dialog { --ch-dialog-max-block-size: 600px; --ch-dialog-max-inline-size: 800px; --ch-dialog-min-block-size: 200px; --ch-dialog-min-inline-size: 300px; --dialog-background-color: var( --elevation-background-color, var(--mer-surface__elevation--01) ); --dialog-border-color: var( --elevation-border-color, var(--mer-border-color__on-elevation--01) ); }", ".dialog.ch-dialog--modal { background-color: color-mix(in srgb, var(--mer-color__neutral-gray--900) 71%, transparent 30%); backdrop-filter: blur(15px); z-index: 108; }", - ".dialog::part(caption) { word-break: break-word; }", + ".dialog::part(caption) { padding: var(--mer-spacing--md) 0; word-break: break-word; }", ".dialog::part(caption), .subtitle-semi-bold-xs, .list-box::part(group__caption), .list-box::part(group__action), .accordion-filled::part(header), .accordion-filled-header::part(header), .accordion-outlined::part(header), .subtitle-regular-xs { font-size: var(--font-size-subtitle-xs); line-height: var(--line-height-tight); }", ".dialog::part(caption), .subtitle-semi-bold-xs, .list-box::part(group__caption), .list-box::part(group__action), .accordion-filled::part(header), .accordion-filled-header::part(header), .accordion-outlined::part(header), .subtitle-semi-bold-s, .subtitle-semi-bold-m, .subtitle-semi-bold-l { font-weight: var(--font-weight-semi-bold); }", ".dialog::part(caption), .subtitle-semi-bold-xs, .list-box::part(group__caption), .list-box::part(group__action), .accordion-filled::part(header), .accordion-filled-header::part(header), .accordion-outlined::part(header), .subtitle-semi-bold-s, .subtitle-semi-bold-m, .subtitle-semi-bold-l, .subtitle-regular-xs, .subtitle-regular-s, .subtitle-regular-m, .subtitle-regular-l { font-family: var(--font-family-header); }", - ".dialog::part(close-button) { content: \"\"; display: block; inline-size: var(--mer-icon__box--md); block-size: var(--mer-icon__box--md); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); --icon-path: var(--icon__system_close_primary--enabled); }", - ".dialog::part(close-button):active { --icon-path: var(--icon__system_close_primary--active); }", - ".dialog::part(close-button):hover { --icon-path: var(--icon__system_close_primary--hover); }", + ".dialog::part(close-button) { --icon-path: var(--icon__system_close_neutral--enabled); }", + ".dialog::part(close-button)::before { content: \"\"; display: block; inline-size: var(--mer-icon__box--md); block-size: var(--mer-icon__box--md); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); }", + ".dialog::part(close-button):active { --icon-path: var(--icon__system_close_neutral--active); }", + ".dialog::part(close-button):hover { --icon-path: var(--icon__system_close_neutral--hover); }", ".dialog::part(content) { overflow: auto; }", ".dialog::part(dialog) { --dialog-border-radius: var(--mer-border__width--lg); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--sm); --spacing-body-inline-end: var(--mer-spacing--sm); border-radius: var(--dialog-border-radius); border: var(--mer-border__width--sm) solid var(--dialog-border-color); background-color: var(--dialog-background-color); box-shadow: var(--mer-box-shadow--01); }", ".dialog::part(edge) { border-color: rgba(0, 0, 0, 0); transition: var(--mer-timing--fast) border-color; }", @@ -151,7 +152,7 @@ ".dialog::part(edge-inline-start) { border-inline-start-width: var(--mer-border__width--lg); border-inline-start-style: solid; }", ".dialog::part(footer) { border-block-start: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01); }", ".dialog::part(footer) { padding-block: var(--mer-spacing--xs); padding-inline: var(--mer-spacing--sm); }", - ".dialog::part(header) { gap: var(--mer-spacing--sm); padding-block: var(--mer-spacing--md); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); }", + ".dialog::part(header) { min-block-size: calc(var(--mer-spacing--md)*2 + var(--font-size-subtitle-xs)*var(--line-height-tight)); gap: var(--mer-spacing--sm); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); }", ".dropdown .dropdown-separator { margin-block: var(--spacing--s); }", ".dropdown .header-slot, .dropdown .footer-slot { padding-block: var(--item__padding-block); padding-inline: var(--item__padding-inline); }", ".dropdown { display: contents !important; }", @@ -488,7 +489,7 @@ ":host(.ch-scrollable)::-webkit-scrollbar-corner, .ch-scrollable::-webkit-scrollbar-corner, .scrollable::-webkit-scrollbar-corner { background: var(--scrollbar-corner__bg); }", ":host(.ch-scrollable)::-webkit-scrollbar-thumb, .ch-scrollable::-webkit-scrollbar-thumb, .scrollable::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb__bg-color); border-radius: var(--scrollbar-thumb__border-radius); }", ":host(.ch-scrollable)::-webkit-scrollbar-track, .ch-scrollable::-webkit-scrollbar-track, .scrollable::-webkit-scrollbar-track { background-color: var(--scrollbar-track__bg-color); border-radius: var(--scrollbar-track__border-radius); }", - ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, \"); --window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); --window__border-radius: var(--mer-border__radius--sm); --window__padding: var(--mer-spacing--xs); --window__bg-color: var(--mer-surface__elevation--01); --window__gap: var(--mer-spacing--xs); --window__box-shadow: var(--mer-box-shadow--01); --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; --focus__outline-color: var(--mer-border-color__primary); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); --control__block-size: 32px; --control__bg-color: var(--control__bg-color--enabled); --control__border-color: var(--control__border-color--enabled); --control__color: var(--control__color--enabled); --control__bg-color--enabled: transparent; --control__border-color--enabled: var(--mer-color__neutral-gray--500); --control__color--enabled: var(--mer-text__neutral); --control__border-color--hover: var(--mer-border-color__neutral--hover); --control__background-color--disabled: var(--mer-accent__primary--disabled); --control__border-color--disabled: var(--control__background-color--disabled); --control__color--disabled: var(--mer-text__on-disabled); --control__border-color--error: var(--mer-border-color__error); --control__border-width: var(--mer-border__width--sm); --control__border-style: solid; --control__border-radius: var(--mer-border__radius--sm); --control__padding-block: calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--font-size-body-m) * var(--line-height-tight) ) / 2 ); --control__padding-inline: var(--mer-spacing--xs); --control__icon-gap: var(--mer-spacing--xs); --control-placeholder__color: var(--mer-color__neutral-gray--400); --control-placeholder__color--disabled: var( --mer-form-input__color--disabled ); --control-placeholder__font-style: italic; --control-tiny__size: var(--mer-spacing--md); --control-tiny__border-width: 1.2px; --control-tiny__border-style: solid; --control-tiny__border-radius-sm: 1px; --control-tiny__border-radius-rounded: 50%; --control-tiny-option__color: var(--control__border-color); --label__border-width: 1.2px; --label__border-style: solid; --label__border-radius: var(--mer-border__radius--2xs); --label__gap--inline: var(--mer-spacing--xs); --label__gap--block: var(--mer-spacing--xs); --label__color: var(--label__color--enabled); --label__color--enabled: var(--mer-text__neutral); --label__color--hover: var(--mer-text__highlighted); --label__color--disabled: var(--mer-text__primary--disabled); --label__color--error: var(--mer-text__neutral); --controls__container-row-gap: var(--mer-spacing--md); --controls__group-gap--block: var(--mer-spacing--sm); --controls__group-gap--inline: var(--mer-spacing--md); --field-group__row-gap: var(--mer-spacing--md); --field-group__column-gap: var(--mer-spacing--lg); --field__row-gap: var(--mer-spacing--xs); --field__column-gap: var(--mer-spacing--md); --field-inline-label__margin-block-start: 6px; --mer-accent__primary: var(--mer-color__primary--200); --mer-accent__primary--hover: var(--mer-color__primary--400); --mer-accent__primary--active: var(--mer-color__primary--600); --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); --mer-accent__primary--destructive: var(--mer-color__message-red--600); --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); --mer-accent__primary--destructive-active: var( --mer-color__message-red--1000 ); --accent-success-lighter: var(--color-green-300); --accent-success-light: var(--color-green-500); --accent-success-enabled: var(--color-green-600); --accent-success-hover: var(--color-green-800); --accent-success-active: var(--color-green-1000); --mer-border-color__primary: var(--mer-accent__primary); --mer-border-color__primary--hover: var(--mer-accent__primary--hover); --mer-border-color__primary--active: var(--mer-accent__primary--active); --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); --mer-border-color__dim: var(--mer-color__neutral-gray--550); --mer-border-color__error: var(--mer-color__message-red--600); --mer-border-color__error--hover: var( --mer-accent__primary--destructive-hover ); --mer-border-color__error--active: var( --mer-accent__primary--destructive-active ); --mer-border-color__warning: var(--mer-color__message-yellow--100); --mer-border-color__success: var(--mer-color__message-green--100); --mer-border-color__neutral: var(--mer-color__neutral-gray--400); --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); --mer-heading__gray--light: var(--mer-color__neutral-gray--200); --mer-header__background-color: var(--mer-color__neutral-gray--700); --mer-icon__on-surface: var(--mer-color__neutral-gray--200); --mer-icon__on-primary: var(--mer-color__neutral-gray--900); --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); --mer-icon__on-message: var(--mer-color__neutral-gray--700); --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); --mer-icon__primary: var(--mer-accent__primary); --mer-icon__primary--hover: var(--mer-accent__primary--hover); --mer-icon__primary--active: var(--mer-accent__primary--active); --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); --mer-icon__error: var(--mer-color__message-red--600); --mer-icon__warning: var(--mer-color__message-yellow--100); --mer-icon__success: var(--mer-color__message-green--100); --mer-icon__neutral: var(--mer-color__neutral-gray--300); --mer-icon__highlighted: var(--mer-color__neutral-gray--100); --mer-icon__bright: var(--mer-color__neutral-gray--300); --item__bg-color: var(--item__bg-color--enabled); --item__border-color: var(--item__border-color--enabled); --item__color: var(--item__color--enabled); --item__bg-color--enabled: transparent; --item__border-color--enabled: transparent; --item__color--enabled: var(--mer-text__on-elevation); --item__bg-color--hover: var(--mer-color__tinted-primary--5); --item__border-color--hover: transparent; --item__color--hover: var(--mer-color__neutral-gray--100); --item__bg-color--selected: var(--mer-color__tinted-primary--10); --item__border-color--selected: var(--mer-color__tinted-primary--30); --item__color--selected: var(--mer-color__neutral-gray--100); --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); --item__color--selected-hover: var(--mer-color__neutral-gray--100); --item__bg-color--disabled: transparent; --item__border-color--disabled: transparent; --item__color--disabled: var(--mer-text__primary--disabled); --item__border-width: var(--mer-border__width--sm); --item__border-style: solid; --item__border-radius: var(--mer-border__radius--sm); --item__padding-block: var(--mer-spacing--2xs); --item__padding-inline: var(--mer-spacing--xs); --item__height--regular: var(--mer-spacing--xl); --item__height--large: 36px; --item__gap--regular: var(--mer-spacing--xs); --items-container__border-width: var(--mer-border__width--sm); --items-container__border-style: solid; --items-container__bg-color: var(--mer-surface__elevation--01); --items-container__border-color: var(--mer-border-color__on-surface); --items-container__padding-block: var(--mer-spacing--xs); --items-container__padding-inline: var(--mer-spacing--xs); --items-container__border-radius: var(--mer-border__radius--sm); --items-container__box-shadow: var(--mer-box-shadow--01); --items-container__gap: var(--mer-spacing--2xs); --items-container__gap--small: var(--mer-spacing--2xs); --items-container__max-block-size: 300px; --items-container-separator__block-size: var(--mer-border__width--sm); --items-container-separator__inline-size: 100%; --items-container-separator__bg-color: var(--items-container__border-color); --grid-cell__border-color: var(--mer-border-color__on-elevation--01); --grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color); --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); --grid-cell__padding-block: var(--mer-spacing--xs); --grid-cell__padding-inline: var(--mer-spacing--sm); --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); --tab-caption__color: var(--tab-caption__color--enabled); --tab-caption__border-color: transparent; --tab-caption__border-style: solid; --tab-caption__border-width: var(--mer-border__width--sm); --tab-caption__bg-color--enabled: transparent; --tab-caption__border-color--enabled: transparent; --tab-caption__color--enabled: var(--mer-text__neutral); --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); --tab-caption__bg-color--selected-inline: transparent; --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); --tab-caption__border-color--selected-inline: var(--mer-accent__primary); --tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 ); --tab-caption__color--selected: var(--mer-text__highlighted); --tab-caption__bg-color--disabled: transparent; --tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 ); --tab-caption__color--disabled: var(--mer-text__primary--disabled); --tab-caption__padding-block: var(--mer-spacing--xs); --tab-caption__padding-inline: var(--mer-spacing--sm); --tab-caption__gap: var(--mer-spacing--xs); --mer-surface: var(--mer-color__neutral-gray--900); --mer-color__surface: var( --mer-surface ); --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); --mer-box-shadow--01: 0px 4px 20px 0px #00000040; --mer-text__on-surface: var(--mer-color__neutral-gray--200); --mer-text__on-primary: var(--mer-color__neutral-gray--900); --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); --mer-text__on-disabled: var(--mer-color__neutral-gray--450); --mer-text__on-message: var(--mer-color__neutral-gray--700); --mer-text__on-elevation: var(--mer-color__neutral-gray--300); --mer-text__primary: var(--mer-accent__primary); --mer-text__primary--hover: var(--mer-accent__primary--hover); --mer-text__primary--active: var(--mer-accent__primary--active); --mer-text__primary--disabled: var(--mer-accent__primary--disabled); --mer-text__neutral: var(--mer-color__neutral-gray--300); --mer-text__highlighted: var(--mer-color__neutral-gray--100); --mer-text__success: var(--mer-color__message-green--100); --mer-text__error: var(--mer-color__message-red--600); --mer-text__warning: var(--mer-color__message-yellow--100); --mer-text__complementary: var(--mer-color__neutral-gray--450); --mer-text__bright: var( --mer-color__neutral-gray--100 ); --font-family-header: Inter, Helvetica, Arial, sans-serif; --font-family-body: Inter, Helvetica, Arial, sans-serif; --font-family-code: monospace; --font-size-header-h1: 40px; --font-size-header-h2: 32px; --font-size-header-h3: 28px; --font-size-header-h4: 24px; --font-size-header-h5: 20px; --font-size-header-h6: 18px; --font-size-subtitle-l: 20px; --font-size-subtitle-m: 18px; --font-size-subtitle-s: 16px; --font-size-subtitle-xs: 14px; --font-size-body-xl: 18px; --font-size-body-l: 16px; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-body-xs: 11px; --font-size-tiny-l: 12px; --font-size-tiny-m: 11px; --font-size-tiny-s: 10px; --font-size-tiny-xs: 8px; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-regular: 400; --line-height-tight: 1.2; --line-height-regular: 1.3; --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; --mer-font-family--code: monospace; --mer-font__weight--extra-bold: 800; --mer-font__weight--bold: 700; --mer-font__weight--semi-bold: 600; --mer-font__weight--medium: 500; --mer-font__weight--regular: 400; --mer-font__weight--light: 300; --mer-font__size--4xs: 11px; --mer-font__size--3xs: 12px; --mer-font__size--2xs: 13px; --mer-font__size--xs: 14px; --mer-font__size--sm: 16px; --mer-font__size--md: 20px; --mer-font__size--lg: 24px; --mer-font__size--xl: 36px; --mer-font__size--2xl: 40px; --mer-line-height--tight: 1.3; --mer-line-height--regular: 1.4; --mer-line-height--spaced: 1.5; --mer-spacing--3xs: 2px; --mer-spacing--2xs: 4px; --mer-spacing--xs: 8px; --mer-spacing--sm: 12px; --mer-spacing--md: 16px; --mer-spacing--lg: 24px; --mer-spacing--xl: 32px; --mer-spacing--2xl: 40px; --mer-spacing--3xl: 48px; --mer-spacing--4xl: 64px; --mer-timing--super-fast: 100ms; --mer-timing--fast: 200ms; --mer-timing--regular: 500ms; --mer-timing--slow: 1000ms; }", + ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, \"); --window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); --window__border-radius: var(--mer-border__radius--sm); --window__padding: var(--mer-spacing--xs); --window__bg-color: var(--mer-surface__elevation--01); --window__gap: var(--mer-spacing--xs); --window__box-shadow: var(--mer-box-shadow--01); --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; --focus__outline-color: var(--mer-border-color__primary--focused); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); --control__block-size: 32px; --control__bg-color: var(--control__bg-color--enabled); --control__border-color: var(--control__border-color--enabled); --control__color: var(--control__color--enabled); --control__bg-color--enabled: transparent; --control__border-color--enabled: var(--mer-color__neutral-gray--500); --control__color--enabled: var(--mer-text__neutral); --control__border-color--hover: var(--mer-border-color__neutral--hover); --control__background-color--disabled: var(--mer-accent__primary--disabled); --control__border-color--disabled: var(--control__background-color--disabled); --control__color--disabled: var(--mer-text__on-disabled); --control__border-color--error: var(--mer-border-color__error); --control__border-width: var(--mer-border__width--sm); --control__border-style: solid; --control__border-radius: var(--mer-border__radius--sm); --control__padding-block: calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--font-size-body-m) * var(--line-height-tight) ) / 2 ); --control__padding-inline: var(--mer-spacing--xs); --control__icon-gap: var(--mer-spacing--xs); --control-placeholder__color: var(--mer-color__neutral-gray--400); --control-placeholder__color--disabled: var( --mer-form-input__color--disabled ); --control-placeholder__font-style: italic; --control-tiny__size: var(--mer-spacing--md); --control-tiny__border-width: 1.2px; --control-tiny__border-style: solid; --control-tiny__border-radius-sm: 1px; --control-tiny__border-radius-rounded: 50%; --control-tiny-option__color: var(--control__border-color); --label__border-width: 1.2px; --label__border-style: solid; --label__border-radius: var(--mer-border__radius--2xs); --label__gap--inline: var(--mer-spacing--xs); --label__gap--block: var(--mer-spacing--xs); --label__color: var(--label__color--enabled); --label__color--enabled: var(--mer-text__neutral); --label__color--hover: var(--mer-text__highlighted); --label__color--disabled: var(--mer-text__primary--disabled); --label__color--error: var(--mer-text__neutral); --controls__container-row-gap: var(--mer-spacing--md); --controls__group-gap--block: var(--mer-spacing--sm); --controls__group-gap--inline: var(--mer-spacing--md); --field-group__row-gap: var(--mer-spacing--md); --field-group__column-gap: var(--mer-spacing--lg); --field__row-gap: var(--mer-spacing--xs); --field__column-gap: var(--mer-spacing--md); --field-inline-label__margin-block-start: 6px; --mer-accent__primary: var(--mer-color__primary--200); --mer-accent__primary--hover: var(--mer-color__primary--400); --mer-accent__primary--active: var(--mer-color__primary--600); --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); --mer-accent__primary--destructive: var(--mer-color__message-red--600); --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); --mer-accent__primary--destructive-active: var( --mer-color__message-red--1000 ); --accent-success-lighter: var(--color-green-300); --accent-success-light: var(--color-green-500); --accent-success-enabled: var(--color-green-600); --accent-success-hover: var(--color-green-800); --accent-success-active: var(--color-green-1000); --mer-border-color__primary: var(--mer-accent__primary); --mer-border-color__primary--hover: var(--mer-accent__primary--hover); --mer-border-color__primary--active: var(--mer-accent__primary--active); --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); --mer-border-color__dim: var(--mer-color__neutral-gray--550); --mer-border-color__error: var(--mer-color__message-red--600); --mer-border-color__error--hover: var( --mer-accent__primary--destructive-hover ); --mer-border-color__error--active: var( --mer-accent__primary--destructive-active ); --mer-border-color__warning: var(--mer-color__message-yellow--100); --mer-border-color__success: var(--mer-color__message-green--100); --mer-border-color__neutral: var(--mer-color__neutral-gray--400); --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); --mer-heading__gray--light: var(--mer-color__neutral-gray--200); --mer-header__background-color: var(--mer-color__neutral-gray--700); --mer-icon__on-surface: var(--mer-color__neutral-gray--200); --mer-icon__on-primary: var(--mer-color__neutral-gray--900); --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); --mer-icon__on-message: var(--mer-color__neutral-gray--700); --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); --mer-icon__primary: var(--mer-accent__primary); --mer-icon__primary--hover: var(--mer-accent__primary--hover); --mer-icon__primary--active: var(--mer-accent__primary--active); --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); --mer-icon__error: var(--mer-color__message-red--600); --mer-icon__warning: var(--mer-color__message-yellow--100); --mer-icon__success: var(--mer-color__message-green--100); --mer-icon__neutral: var(--mer-color__neutral-gray--300); --mer-icon__highlighted: var(--mer-color__neutral-gray--100); --mer-icon__bright: var(--mer-color__neutral-gray--300); --item__bg-color: var(--item__bg-color--enabled); --item__border-color: var(--item__border-color--enabled); --item__color: var(--item__color--enabled); --item__bg-color--enabled: transparent; --item__border-color--enabled: transparent; --item__color--enabled: var(--mer-text__on-elevation); --item__bg-color--hover: var(--mer-color__tinted-primary--5); --item__border-color--hover: transparent; --item__color--hover: var(--mer-color__neutral-gray--100); --item__bg-color--selected: var(--mer-color__tinted-primary--10); --item__border-color--selected: var(--mer-color__tinted-primary--30); --item__color--selected: var(--mer-color__neutral-gray--100); --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); --item__color--selected-hover: var(--mer-color__neutral-gray--100); --item__bg-color--disabled: transparent; --item__border-color--disabled: transparent; --item__color--disabled: var(--mer-text__primary--disabled); --item__border-width: var(--mer-border__width--sm); --item__border-style: solid; --item__border-radius: var(--mer-border__radius--sm); --item__padding-block: var(--mer-spacing--2xs); --item__padding-inline: var(--mer-spacing--xs); --item__height--regular: var(--mer-spacing--xl); --item__height--large: 36px; --item__gap--regular: var(--mer-spacing--xs); --items-container__border-width: var(--mer-border__width--sm); --items-container__border-style: solid; --items-container__bg-color: var(--mer-surface__elevation--01); --items-container__border-color: var(--mer-border-color__on-surface); --items-container__padding-block: var(--mer-spacing--xs); --items-container__padding-inline: var(--mer-spacing--xs); --items-container__border-radius: var(--mer-border__radius--sm); --items-container__box-shadow: var(--mer-box-shadow--01); --items-container__gap: var(--mer-spacing--2xs); --items-container__gap--small: var(--mer-spacing--2xs); --items-container__max-block-size: 300px; --items-container-separator__block-size: var(--mer-border__width--sm); --items-container-separator__inline-size: 100%; --items-container-separator__bg-color: var(--items-container__border-color); --grid-cell__border-color: var(--mer-border-color__on-elevation--01); --grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color); --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); --grid-cell__padding-block: var(--mer-spacing--xs); --grid-cell__padding-inline: var(--mer-spacing--sm); --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); --tab-caption__color: var(--tab-caption__color--enabled); --tab-caption__border-color: transparent; --tab-caption__border-style: solid; --tab-caption__border-width: var(--mer-border__width--sm); --tab-caption__bg-color--enabled: transparent; --tab-caption__border-color--enabled: transparent; --tab-caption__color--enabled: var(--mer-text__neutral); --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); --tab-caption__bg-color--selected-inline: transparent; --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); --tab-caption__border-color--selected-inline: var(--mer-accent__primary); --tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 ); --tab-caption__color--selected: var(--mer-text__highlighted); --tab-caption__bg-color--disabled: transparent; --tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 ); --tab-caption__color--disabled: var(--mer-text__primary--disabled); --tab-caption__padding-block: var(--mer-spacing--xs); --tab-caption__padding-inline: var(--mer-spacing--sm); --tab-caption__gap: var(--mer-spacing--xs); --mer-surface: var(--mer-color__neutral-gray--900); --mer-color__surface: var( --mer-surface ); --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); --mer-box-shadow--01: 0px 4px 20px 0px #00000040; --mer-text__on-surface: var(--mer-color__neutral-gray--200); --mer-text__on-primary: var(--mer-color__neutral-gray--900); --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); --mer-text__on-disabled: var(--mer-color__neutral-gray--450); --mer-text__on-message: var(--mer-color__neutral-gray--700); --mer-text__on-elevation: var(--mer-color__neutral-gray--300); --mer-text__primary: var(--mer-accent__primary); --mer-text__primary--hover: var(--mer-accent__primary--hover); --mer-text__primary--active: var(--mer-accent__primary--active); --mer-text__primary--disabled: var(--mer-accent__primary--disabled); --mer-text__neutral: var(--mer-color__neutral-gray--300); --mer-text__highlighted: var(--mer-color__neutral-gray--100); --mer-text__success: var(--mer-color__message-green--100); --mer-text__error: var(--mer-color__message-red--600); --mer-text__warning: var(--mer-color__message-yellow--100); --mer-text__complementary: var(--mer-color__neutral-gray--450); --mer-text__bright: var( --mer-color__neutral-gray--100 ); --font-family-header: Inter, Helvetica, Arial, sans-serif; --font-family-body: Inter, Helvetica, Arial, sans-serif; --font-family-code: monospace; --font-size-header-h1: 40px; --font-size-header-h2: 32px; --font-size-header-h3: 28px; --font-size-header-h4: 24px; --font-size-header-h5: 20px; --font-size-header-h6: 18px; --font-size-subtitle-l: 20px; --font-size-subtitle-m: 18px; --font-size-subtitle-s: 16px; --font-size-subtitle-xs: 14px; --font-size-body-xl: 18px; --font-size-body-l: 16px; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-body-xs: 11px; --font-size-tiny-l: 12px; --font-size-tiny-m: 11px; --font-size-tiny-s: 10px; --font-size-tiny-xs: 8px; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-regular: 400; --line-height-tight: 1.2; --line-height-regular: 1.3; --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; --mer-font-family--code: monospace; --mer-font__weight--extra-bold: 800; --mer-font__weight--bold: 700; --mer-font__weight--semi-bold: 600; --mer-font__weight--medium: 500; --mer-font__weight--regular: 400; --mer-font__weight--light: 300; --mer-font__size--4xs: 11px; --mer-font__size--3xs: 12px; --mer-font__size--2xs: 13px; --mer-font__size--xs: 14px; --mer-font__size--sm: 16px; --mer-font__size--md: 20px; --mer-font__size--lg: 24px; --mer-font__size--xl: 36px; --mer-font__size--2xl: 40px; --mer-line-height--tight: 1.3; --mer-line-height--regular: 1.4; --mer-line-height--spaced: 1.5; --mer-spacing--3xs: 2px; --mer-spacing--2xs: 4px; --mer-spacing--xs: 8px; --mer-spacing--sm: 12px; --mer-spacing--md: 16px; --mer-spacing--lg: 24px; --mer-spacing--xl: 32px; --mer-spacing--2xl: 40px; --mer-spacing--3xl: 48px; --mer-spacing--4xl: 64px; --mer-timing--super-fast: 100ms; --mer-timing--fast: 200ms; --mer-timing--regular: 500ms; --mer-timing--slow: 1000ms; }", ":root { --mer-color__gradient-angle: 225deg; --mer-color__gradient-opacity--low: 0.7; --mer-color__gradient-opacity--medium: 0.9; --mer-color__gradient-opacity--high: 1; --mer-color__gradient--01: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--02: linear-gradient( var(--mer-color__gradient-angle), rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--03: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--04: linear-gradient( var(--mer-color__gradient-angle), rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--05: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--06: linear-gradient( var(--mer-color__gradient-angle), rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--07: linear-gradient( var(--mer-color__gradient-angle), rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--08: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--09: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--10: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% ); --mer-color__gradient--11: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--12: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--13: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% ); }", ":root.dark { --icon__bpm_arrows_error-actionable--enabled: url(\"./assets/icons/bpm/dark/arrows.svg#error-actionable--enabled\"); --icon__bpm_arrows_error-actionable--hover: url(\"./assets/icons/bpm/dark/arrows.svg#error-actionable--hover\"); --icon__bpm_arrows_error-actionable--active: url(\"./assets/icons/bpm/dark/arrows.svg#error-actionable--active\"); --icon__bpm_arrows_error-actionable--disabled: url(\"./assets/icons/bpm/dark/arrows.svg#error-actionable--disabled\"); --icon__bpm_arrows_neutral--enabled: url(\"./assets/icons/bpm/dark/arrows.svg#neutral--enabled\"); --icon__bpm_arrows_neutral--hover: url(\"./assets/icons/bpm/dark/arrows.svg#neutral--hover\"); --icon__bpm_arrows_neutral--active: url(\"./assets/icons/bpm/dark/arrows.svg#neutral--active\"); --icon__bpm_arrows_neutral--disabled: url(\"./assets/icons/bpm/dark/arrows.svg#neutral--disabled\"); --icon__bpm_cancel-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/cancel-2.svg#error-actionable--enabled\"); --icon__bpm_cancel-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/cancel-2.svg#error-actionable--hover\"); --icon__bpm_cancel-2_error-actionable--active: url(\"./assets/icons/bpm/dark/cancel-2.svg#error-actionable--active\"); --icon__bpm_cancel-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/cancel-2.svg#error-actionable--disabled\"); --icon__bpm_cancel-2_neutral--enabled: url(\"./assets/icons/bpm/dark/cancel-2.svg#neutral--enabled\"); --icon__bpm_cancel-2_neutral--hover: url(\"./assets/icons/bpm/dark/cancel-2.svg#neutral--hover\"); --icon__bpm_cancel-2_neutral--active: url(\"./assets/icons/bpm/dark/cancel-2.svg#neutral--active\"); --icon__bpm_cancel-2_neutral--disabled: url(\"./assets/icons/bpm/dark/cancel-2.svg#neutral--disabled\"); --icon__bpm_cancel-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/cancel-4.svg#error-actionable--enabled\"); --icon__bpm_cancel-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/cancel-4.svg#error-actionable--hover\"); --icon__bpm_cancel-4_error-actionable--active: url(\"./assets/icons/bpm/dark/cancel-4.svg#error-actionable--active\"); --icon__bpm_cancel-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/cancel-4.svg#error-actionable--disabled\"); --icon__bpm_cancel-4_neutral--enabled: url(\"./assets/icons/bpm/dark/cancel-4.svg#neutral--enabled\"); --icon__bpm_cancel-4_neutral--hover: url(\"./assets/icons/bpm/dark/cancel-4.svg#neutral--hover\"); --icon__bpm_cancel-4_neutral--active: url(\"./assets/icons/bpm/dark/cancel-4.svg#neutral--active\"); --icon__bpm_cancel-4_neutral--disabled: url(\"./assets/icons/bpm/dark/cancel-4.svg#neutral--disabled\"); --icon__bpm_compensation-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/compensation-1.svg#error-actionable--enabled\"); --icon__bpm_compensation-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/compensation-1.svg#error-actionable--hover\"); --icon__bpm_compensation-1_error-actionable--active: url(\"./assets/icons/bpm/dark/compensation-1.svg#error-actionable--active\"); --icon__bpm_compensation-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/compensation-1.svg#error-actionable--disabled\"); --icon__bpm_compensation-1_neutral--enabled: url(\"./assets/icons/bpm/dark/compensation-1.svg#neutral--enabled\"); --icon__bpm_compensation-1_neutral--hover: url(\"./assets/icons/bpm/dark/compensation-1.svg#neutral--hover\"); --icon__bpm_compensation-1_neutral--active: url(\"./assets/icons/bpm/dark/compensation-1.svg#neutral--active\"); --icon__bpm_compensation-1_neutral--disabled: url(\"./assets/icons/bpm/dark/compensation-1.svg#neutral--disabled\"); --icon__bpm_compensation-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/compensation-2.svg#error-actionable--enabled\"); --icon__bpm_compensation-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/compensation-2.svg#error-actionable--hover\"); --icon__bpm_compensation-2_error-actionable--active: url(\"./assets/icons/bpm/dark/compensation-2.svg#error-actionable--active\"); --icon__bpm_compensation-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/compensation-2.svg#error-actionable--disabled\"); --icon__bpm_compensation-2_neutral--enabled: url(\"./assets/icons/bpm/dark/compensation-2.svg#neutral--enabled\"); --icon__bpm_compensation-2_neutral--hover: url(\"./assets/icons/bpm/dark/compensation-2.svg#neutral--hover\"); --icon__bpm_compensation-2_neutral--active: url(\"./assets/icons/bpm/dark/compensation-2.svg#neutral--active\"); --icon__bpm_compensation-2_neutral--disabled: url(\"./assets/icons/bpm/dark/compensation-2.svg#neutral--disabled\"); --icon__bpm_compensation-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/compensation-3.svg#error-actionable--enabled\"); --icon__bpm_compensation-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/compensation-3.svg#error-actionable--hover\"); --icon__bpm_compensation-3_error-actionable--active: url(\"./assets/icons/bpm/dark/compensation-3.svg#error-actionable--active\"); --icon__bpm_compensation-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/compensation-3.svg#error-actionable--disabled\"); --icon__bpm_compensation-3_neutral--enabled: url(\"./assets/icons/bpm/dark/compensation-3.svg#neutral--enabled\"); --icon__bpm_compensation-3_neutral--hover: url(\"./assets/icons/bpm/dark/compensation-3.svg#neutral--hover\"); --icon__bpm_compensation-3_neutral--active: url(\"./assets/icons/bpm/dark/compensation-3.svg#neutral--active\"); --icon__bpm_compensation-3_neutral--disabled: url(\"./assets/icons/bpm/dark/compensation-3.svg#neutral--disabled\"); --icon__bpm_compensation-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/compensation-4.svg#error-actionable--enabled\"); --icon__bpm_compensation-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/compensation-4.svg#error-actionable--hover\"); --icon__bpm_compensation-4_error-actionable--active: url(\"./assets/icons/bpm/dark/compensation-4.svg#error-actionable--active\"); --icon__bpm_compensation-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/compensation-4.svg#error-actionable--disabled\"); --icon__bpm_compensation-4_neutral--enabled: url(\"./assets/icons/bpm/dark/compensation-4.svg#neutral--enabled\"); --icon__bpm_compensation-4_neutral--hover: url(\"./assets/icons/bpm/dark/compensation-4.svg#neutral--hover\"); --icon__bpm_compensation-4_neutral--active: url(\"./assets/icons/bpm/dark/compensation-4.svg#neutral--active\"); --icon__bpm_compensation-4_neutral--disabled: url(\"./assets/icons/bpm/dark/compensation-4.svg#neutral--disabled\"); --icon__bpm_conditional_error-actionable--enabled: url(\"./assets/icons/bpm/dark/conditional.svg#error-actionable--enabled\"); --icon__bpm_conditional_error-actionable--hover: url(\"./assets/icons/bpm/dark/conditional.svg#error-actionable--hover\"); --icon__bpm_conditional_error-actionable--active: url(\"./assets/icons/bpm/dark/conditional.svg#error-actionable--active\"); --icon__bpm_conditional_error-actionable--disabled: url(\"./assets/icons/bpm/dark/conditional.svg#error-actionable--disabled\"); --icon__bpm_conditional_neutral--enabled: url(\"./assets/icons/bpm/dark/conditional.svg#neutral--enabled\"); --icon__bpm_conditional_neutral--hover: url(\"./assets/icons/bpm/dark/conditional.svg#neutral--hover\"); --icon__bpm_conditional_neutral--active: url(\"./assets/icons/bpm/dark/conditional.svg#neutral--active\"); --icon__bpm_conditional_neutral--disabled: url(\"./assets/icons/bpm/dark/conditional.svg#neutral--disabled\"); --icon__bpm_conditional-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/conditional-1.svg#error-actionable--enabled\"); --icon__bpm_conditional-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/conditional-1.svg#error-actionable--hover\"); --icon__bpm_conditional-1_error-actionable--active: url(\"./assets/icons/bpm/dark/conditional-1.svg#error-actionable--active\"); --icon__bpm_conditional-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/conditional-1.svg#error-actionable--disabled\"); --icon__bpm_conditional-1_neutral--enabled: url(\"./assets/icons/bpm/dark/conditional-1.svg#neutral--enabled\"); --icon__bpm_conditional-1_neutral--hover: url(\"./assets/icons/bpm/dark/conditional-1.svg#neutral--hover\"); --icon__bpm_conditional-1_neutral--active: url(\"./assets/icons/bpm/dark/conditional-1.svg#neutral--active\"); --icon__bpm_conditional-1_neutral--disabled: url(\"./assets/icons/bpm/dark/conditional-1.svg#neutral--disabled\"); --icon__bpm_conditional-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/conditional-2.svg#error-actionable--enabled\"); --icon__bpm_conditional-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/conditional-2.svg#error-actionable--hover\"); --icon__bpm_conditional-2_error-actionable--active: url(\"./assets/icons/bpm/dark/conditional-2.svg#error-actionable--active\"); --icon__bpm_conditional-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/conditional-2.svg#error-actionable--disabled\"); --icon__bpm_conditional-2_neutral--enabled: url(\"./assets/icons/bpm/dark/conditional-2.svg#neutral--enabled\"); --icon__bpm_conditional-2_neutral--hover: url(\"./assets/icons/bpm/dark/conditional-2.svg#neutral--hover\"); --icon__bpm_conditional-2_neutral--active: url(\"./assets/icons/bpm/dark/conditional-2.svg#neutral--active\"); --icon__bpm_conditional-2_neutral--disabled: url(\"./assets/icons/bpm/dark/conditional-2.svg#neutral--disabled\"); --icon__bpm_conditional-5_error-actionable--enabled: url(\"./assets/icons/bpm/dark/conditional-5.svg#error-actionable--enabled\"); --icon__bpm_conditional-5_error-actionable--hover: url(\"./assets/icons/bpm/dark/conditional-5.svg#error-actionable--hover\"); --icon__bpm_conditional-5_error-actionable--active: url(\"./assets/icons/bpm/dark/conditional-5.svg#error-actionable--active\"); --icon__bpm_conditional-5_error-actionable--disabled: url(\"./assets/icons/bpm/dark/conditional-5.svg#error-actionable--disabled\"); --icon__bpm_conditional-5_neutral--enabled: url(\"./assets/icons/bpm/dark/conditional-5.svg#neutral--enabled\"); --icon__bpm_conditional-5_neutral--hover: url(\"./assets/icons/bpm/dark/conditional-5.svg#neutral--hover\"); --icon__bpm_conditional-5_neutral--active: url(\"./assets/icons/bpm/dark/conditional-5.svg#neutral--active\"); --icon__bpm_conditional-5_neutral--disabled: url(\"./assets/icons/bpm/dark/conditional-5.svg#neutral--disabled\"); --icon__bpm_conditional-6_error-actionable--enabled: url(\"./assets/icons/bpm/dark/conditional-6.svg#error-actionable--enabled\"); --icon__bpm_conditional-6_error-actionable--hover: url(\"./assets/icons/bpm/dark/conditional-6.svg#error-actionable--hover\"); --icon__bpm_conditional-6_error-actionable--active: url(\"./assets/icons/bpm/dark/conditional-6.svg#error-actionable--active\"); --icon__bpm_conditional-6_error-actionable--disabled: url(\"./assets/icons/bpm/dark/conditional-6.svg#error-actionable--disabled\"); --icon__bpm_conditional-6_neutral--enabled: url(\"./assets/icons/bpm/dark/conditional-6.svg#neutral--enabled\"); --icon__bpm_conditional-6_neutral--hover: url(\"./assets/icons/bpm/dark/conditional-6.svg#neutral--hover\"); --icon__bpm_conditional-6_neutral--active: url(\"./assets/icons/bpm/dark/conditional-6.svg#neutral--active\"); --icon__bpm_conditional-6_neutral--disabled: url(\"./assets/icons/bpm/dark/conditional-6.svg#neutral--disabled\"); --icon__bpm_delete_error-actionable--enabled: url(\"./assets/icons/bpm/dark/delete.svg#error-actionable--enabled\"); --icon__bpm_delete_error-actionable--hover: url(\"./assets/icons/bpm/dark/delete.svg#error-actionable--hover\"); --icon__bpm_delete_error-actionable--active: url(\"./assets/icons/bpm/dark/delete.svg#error-actionable--active\"); --icon__bpm_delete_error-actionable--disabled: url(\"./assets/icons/bpm/dark/delete.svg#error-actionable--disabled\"); --icon__bpm_delete_neutral--enabled: url(\"./assets/icons/bpm/dark/delete.svg#neutral--enabled\"); --icon__bpm_delete_neutral--hover: url(\"./assets/icons/bpm/dark/delete.svg#neutral--hover\"); --icon__bpm_delete_neutral--active: url(\"./assets/icons/bpm/dark/delete.svg#neutral--active\"); --icon__bpm_delete_neutral--disabled: url(\"./assets/icons/bpm/dark/delete.svg#neutral--disabled\"); --icon__bpm_embedded-subprocess_error-actionable--enabled: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#error-actionable--enabled\"); --icon__bpm_embedded-subprocess_error-actionable--hover: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#error-actionable--hover\"); --icon__bpm_embedded-subprocess_error-actionable--active: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#error-actionable--active\"); --icon__bpm_embedded-subprocess_error-actionable--disabled: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#error-actionable--disabled\"); --icon__bpm_embedded-subprocess_neutral--enabled: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#neutral--enabled\"); --icon__bpm_embedded-subprocess_neutral--hover: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#neutral--hover\"); --icon__bpm_embedded-subprocess_neutral--active: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#neutral--active\"); --icon__bpm_embedded-subprocess_neutral--disabled: url(\"./assets/icons/bpm/dark/embedded-subprocess.svg#neutral--disabled\"); --icon__bpm_error-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/error-1.svg#error-actionable--enabled\"); --icon__bpm_error-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/error-1.svg#error-actionable--hover\"); --icon__bpm_error-1_error-actionable--active: url(\"./assets/icons/bpm/dark/error-1.svg#error-actionable--active\"); --icon__bpm_error-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/error-1.svg#error-actionable--disabled\"); --icon__bpm_error-1_neutral--enabled: url(\"./assets/icons/bpm/dark/error-1.svg#neutral--enabled\"); --icon__bpm_error-1_neutral--hover: url(\"./assets/icons/bpm/dark/error-1.svg#neutral--hover\"); --icon__bpm_error-1_neutral--active: url(\"./assets/icons/bpm/dark/error-1.svg#neutral--active\"); --icon__bpm_error-1_neutral--disabled: url(\"./assets/icons/bpm/dark/error-1.svg#neutral--disabled\"); --icon__bpm_error-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/error-2.svg#error-actionable--enabled\"); --icon__bpm_error-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/error-2.svg#error-actionable--hover\"); --icon__bpm_error-2_error-actionable--active: url(\"./assets/icons/bpm/dark/error-2.svg#error-actionable--active\"); --icon__bpm_error-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/error-2.svg#error-actionable--disabled\"); --icon__bpm_error-2_neutral--enabled: url(\"./assets/icons/bpm/dark/error-2.svg#neutral--enabled\"); --icon__bpm_error-2_neutral--hover: url(\"./assets/icons/bpm/dark/error-2.svg#neutral--hover\"); --icon__bpm_error-2_neutral--active: url(\"./assets/icons/bpm/dark/error-2.svg#neutral--active\"); --icon__bpm_error-2_neutral--disabled: url(\"./assets/icons/bpm/dark/error-2.svg#neutral--disabled\"); --icon__bpm_escalation-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/escalation-1.svg#error-actionable--enabled\"); --icon__bpm_escalation-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/escalation-1.svg#error-actionable--hover\"); --icon__bpm_escalation-1_error-actionable--active: url(\"./assets/icons/bpm/dark/escalation-1.svg#error-actionable--active\"); --icon__bpm_escalation-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/escalation-1.svg#error-actionable--disabled\"); --icon__bpm_escalation-1_neutral--enabled: url(\"./assets/icons/bpm/dark/escalation-1.svg#neutral--enabled\"); --icon__bpm_escalation-1_neutral--hover: url(\"./assets/icons/bpm/dark/escalation-1.svg#neutral--hover\"); --icon__bpm_escalation-1_neutral--active: url(\"./assets/icons/bpm/dark/escalation-1.svg#neutral--active\"); --icon__bpm_escalation-1_neutral--disabled: url(\"./assets/icons/bpm/dark/escalation-1.svg#neutral--disabled\"); --icon__bpm_escalation-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/escalation-2.svg#error-actionable--enabled\"); --icon__bpm_escalation-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/escalation-2.svg#error-actionable--hover\"); --icon__bpm_escalation-2_error-actionable--active: url(\"./assets/icons/bpm/dark/escalation-2.svg#error-actionable--active\"); --icon__bpm_escalation-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/escalation-2.svg#error-actionable--disabled\"); --icon__bpm_escalation-2_neutral--enabled: url(\"./assets/icons/bpm/dark/escalation-2.svg#neutral--enabled\"); --icon__bpm_escalation-2_neutral--hover: url(\"./assets/icons/bpm/dark/escalation-2.svg#neutral--hover\"); --icon__bpm_escalation-2_neutral--active: url(\"./assets/icons/bpm/dark/escalation-2.svg#neutral--active\"); --icon__bpm_escalation-2_neutral--disabled: url(\"./assets/icons/bpm/dark/escalation-2.svg#neutral--disabled\"); --icon__bpm_escalation-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/escalation-3.svg#error-actionable--enabled\"); --icon__bpm_escalation-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/escalation-3.svg#error-actionable--hover\"); --icon__bpm_escalation-3_error-actionable--active: url(\"./assets/icons/bpm/dark/escalation-3.svg#error-actionable--active\"); --icon__bpm_escalation-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/escalation-3.svg#error-actionable--disabled\"); --icon__bpm_escalation-3_neutral--enabled: url(\"./assets/icons/bpm/dark/escalation-3.svg#neutral--enabled\"); --icon__bpm_escalation-3_neutral--hover: url(\"./assets/icons/bpm/dark/escalation-3.svg#neutral--hover\"); --icon__bpm_escalation-3_neutral--active: url(\"./assets/icons/bpm/dark/escalation-3.svg#neutral--active\"); --icon__bpm_escalation-3_neutral--disabled: url(\"./assets/icons/bpm/dark/escalation-3.svg#neutral--disabled\"); --icon__bpm_escalation-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/escalation-4.svg#error-actionable--enabled\"); --icon__bpm_escalation-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/escalation-4.svg#error-actionable--hover\"); --icon__bpm_escalation-4_error-actionable--active: url(\"./assets/icons/bpm/dark/escalation-4.svg#error-actionable--active\"); --icon__bpm_escalation-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/escalation-4.svg#error-actionable--disabled\"); --icon__bpm_escalation-4_neutral--enabled: url(\"./assets/icons/bpm/dark/escalation-4.svg#neutral--enabled\"); --icon__bpm_escalation-4_neutral--hover: url(\"./assets/icons/bpm/dark/escalation-4.svg#neutral--hover\"); --icon__bpm_escalation-4_neutral--active: url(\"./assets/icons/bpm/dark/escalation-4.svg#neutral--active\"); --icon__bpm_escalation-4_neutral--disabled: url(\"./assets/icons/bpm/dark/escalation-4.svg#neutral--disabled\"); --icon__bpm_escalation-5_error-actionable--enabled: url(\"./assets/icons/bpm/dark/escalation-5.svg#error-actionable--enabled\"); --icon__bpm_escalation-5_error-actionable--hover: url(\"./assets/icons/bpm/dark/escalation-5.svg#error-actionable--hover\"); --icon__bpm_escalation-5_error-actionable--active: url(\"./assets/icons/bpm/dark/escalation-5.svg#error-actionable--active\"); --icon__bpm_escalation-5_error-actionable--disabled: url(\"./assets/icons/bpm/dark/escalation-5.svg#error-actionable--disabled\"); --icon__bpm_escalation-5_neutral--enabled: url(\"./assets/icons/bpm/dark/escalation-5.svg#neutral--enabled\"); --icon__bpm_escalation-5_neutral--hover: url(\"./assets/icons/bpm/dark/escalation-5.svg#neutral--hover\"); --icon__bpm_escalation-5_neutral--active: url(\"./assets/icons/bpm/dark/escalation-5.svg#neutral--active\"); --icon__bpm_escalation-5_neutral--disabled: url(\"./assets/icons/bpm/dark/escalation-5.svg#neutral--disabled\"); --icon__bpm_escalation-6_error-actionable--enabled: url(\"./assets/icons/bpm/dark/escalation-6.svg#error-actionable--enabled\"); --icon__bpm_escalation-6_error-actionable--hover: url(\"./assets/icons/bpm/dark/escalation-6.svg#error-actionable--hover\"); --icon__bpm_escalation-6_error-actionable--active: url(\"./assets/icons/bpm/dark/escalation-6.svg#error-actionable--active\"); --icon__bpm_escalation-6_error-actionable--disabled: url(\"./assets/icons/bpm/dark/escalation-6.svg#error-actionable--disabled\"); --icon__bpm_escalation-6_neutral--enabled: url(\"./assets/icons/bpm/dark/escalation-6.svg#neutral--enabled\"); --icon__bpm_escalation-6_neutral--hover: url(\"./assets/icons/bpm/dark/escalation-6.svg#neutral--hover\"); --icon__bpm_escalation-6_neutral--active: url(\"./assets/icons/bpm/dark/escalation-6.svg#neutral--active\"); --icon__bpm_escalation-6_neutral--disabled: url(\"./assets/icons/bpm/dark/escalation-6.svg#neutral--disabled\"); --icon__bpm_exclusive_error-actionable--enabled: url(\"./assets/icons/bpm/dark/exclusive.svg#error-actionable--enabled\"); --icon__bpm_exclusive_error-actionable--hover: url(\"./assets/icons/bpm/dark/exclusive.svg#error-actionable--hover\"); --icon__bpm_exclusive_error-actionable--active: url(\"./assets/icons/bpm/dark/exclusive.svg#error-actionable--active\"); --icon__bpm_exclusive_error-actionable--disabled: url(\"./assets/icons/bpm/dark/exclusive.svg#error-actionable--disabled\"); --icon__bpm_exclusive_neutral--enabled: url(\"./assets/icons/bpm/dark/exclusive.svg#neutral--enabled\"); --icon__bpm_exclusive_neutral--hover: url(\"./assets/icons/bpm/dark/exclusive.svg#neutral--hover\"); --icon__bpm_exclusive_neutral--active: url(\"./assets/icons/bpm/dark/exclusive.svg#neutral--active\"); --icon__bpm_exclusive_neutral--disabled: url(\"./assets/icons/bpm/dark/exclusive.svg#neutral--disabled\"); --icon__bpm_inclusive_error-actionable--enabled: url(\"./assets/icons/bpm/dark/inclusive.svg#error-actionable--enabled\"); --icon__bpm_inclusive_error-actionable--hover: url(\"./assets/icons/bpm/dark/inclusive.svg#error-actionable--hover\"); --icon__bpm_inclusive_error-actionable--active: url(\"./assets/icons/bpm/dark/inclusive.svg#error-actionable--active\"); --icon__bpm_inclusive_error-actionable--disabled: url(\"./assets/icons/bpm/dark/inclusive.svg#error-actionable--disabled\"); --icon__bpm_inclusive_neutral--enabled: url(\"./assets/icons/bpm/dark/inclusive.svg#neutral--enabled\"); --icon__bpm_inclusive_neutral--hover: url(\"./assets/icons/bpm/dark/inclusive.svg#neutral--hover\"); --icon__bpm_inclusive_neutral--active: url(\"./assets/icons/bpm/dark/inclusive.svg#neutral--active\"); --icon__bpm_inclusive_neutral--disabled: url(\"./assets/icons/bpm/dark/inclusive.svg#neutral--disabled\"); --icon__bpm_link-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/link-3.svg#error-actionable--enabled\"); --icon__bpm_link-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/link-3.svg#error-actionable--hover\"); --icon__bpm_link-3_error-actionable--active: url(\"./assets/icons/bpm/dark/link-3.svg#error-actionable--active\"); --icon__bpm_link-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/link-3.svg#error-actionable--disabled\"); --icon__bpm_link-3_neutral--enabled: url(\"./assets/icons/bpm/dark/link-3.svg#neutral--enabled\"); --icon__bpm_link-3_neutral--hover: url(\"./assets/icons/bpm/dark/link-3.svg#neutral--hover\"); --icon__bpm_link-3_neutral--active: url(\"./assets/icons/bpm/dark/link-3.svg#neutral--active\"); --icon__bpm_link-3_neutral--disabled: url(\"./assets/icons/bpm/dark/link-3.svg#neutral--disabled\"); --icon__bpm_link-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/link-4.svg#error-actionable--enabled\"); --icon__bpm_link-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/link-4.svg#error-actionable--hover\"); --icon__bpm_link-4_error-actionable--active: url(\"./assets/icons/bpm/dark/link-4.svg#error-actionable--active\"); --icon__bpm_link-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/link-4.svg#error-actionable--disabled\"); --icon__bpm_link-4_neutral--enabled: url(\"./assets/icons/bpm/dark/link-4.svg#neutral--enabled\"); --icon__bpm_link-4_neutral--hover: url(\"./assets/icons/bpm/dark/link-4.svg#neutral--hover\"); --icon__bpm_link-4_neutral--active: url(\"./assets/icons/bpm/dark/link-4.svg#neutral--active\"); --icon__bpm_link-4_neutral--disabled: url(\"./assets/icons/bpm/dark/link-4.svg#neutral--disabled\"); --icon__bpm_message-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/message-1.svg#error-actionable--enabled\"); --icon__bpm_message-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/message-1.svg#error-actionable--hover\"); --icon__bpm_message-1_error-actionable--active: url(\"./assets/icons/bpm/dark/message-1.svg#error-actionable--active\"); --icon__bpm_message-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/message-1.svg#error-actionable--disabled\"); --icon__bpm_message-1_neutral--enabled: url(\"./assets/icons/bpm/dark/message-1.svg#neutral--enabled\"); --icon__bpm_message-1_neutral--hover: url(\"./assets/icons/bpm/dark/message-1.svg#neutral--hover\"); --icon__bpm_message-1_neutral--active: url(\"./assets/icons/bpm/dark/message-1.svg#neutral--active\"); --icon__bpm_message-1_neutral--disabled: url(\"./assets/icons/bpm/dark/message-1.svg#neutral--disabled\"); --icon__bpm_message-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/message-2.svg#error-actionable--enabled\"); --icon__bpm_message-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/message-2.svg#error-actionable--hover\"); --icon__bpm_message-2_error-actionable--active: url(\"./assets/icons/bpm/dark/message-2.svg#error-actionable--active\"); --icon__bpm_message-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/message-2.svg#error-actionable--disabled\"); --icon__bpm_message-2_neutral--enabled: url(\"./assets/icons/bpm/dark/message-2.svg#neutral--enabled\"); --icon__bpm_message-2_neutral--hover: url(\"./assets/icons/bpm/dark/message-2.svg#neutral--hover\"); --icon__bpm_message-2_neutral--active: url(\"./assets/icons/bpm/dark/message-2.svg#neutral--active\"); --icon__bpm_message-2_neutral--disabled: url(\"./assets/icons/bpm/dark/message-2.svg#neutral--disabled\"); --icon__bpm_message-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/message-3.svg#error-actionable--enabled\"); --icon__bpm_message-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/message-3.svg#error-actionable--hover\"); --icon__bpm_message-3_error-actionable--active: url(\"./assets/icons/bpm/dark/message-3.svg#error-actionable--active\"); --icon__bpm_message-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/message-3.svg#error-actionable--disabled\"); --icon__bpm_message-3_neutral--enabled: url(\"./assets/icons/bpm/dark/message-3.svg#neutral--enabled\"); --icon__bpm_message-3_neutral--hover: url(\"./assets/icons/bpm/dark/message-3.svg#neutral--hover\"); --icon__bpm_message-3_neutral--active: url(\"./assets/icons/bpm/dark/message-3.svg#neutral--active\"); --icon__bpm_message-3_neutral--disabled: url(\"./assets/icons/bpm/dark/message-3.svg#neutral--disabled\"); --icon__bpm_message-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/message-4.svg#error-actionable--enabled\"); --icon__bpm_message-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/message-4.svg#error-actionable--hover\"); --icon__bpm_message-4_error-actionable--active: url(\"./assets/icons/bpm/dark/message-4.svg#error-actionable--active\"); --icon__bpm_message-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/message-4.svg#error-actionable--disabled\"); --icon__bpm_message-4_neutral--enabled: url(\"./assets/icons/bpm/dark/message-4.svg#neutral--enabled\"); --icon__bpm_message-4_neutral--hover: url(\"./assets/icons/bpm/dark/message-4.svg#neutral--hover\"); --icon__bpm_message-4_neutral--active: url(\"./assets/icons/bpm/dark/message-4.svg#neutral--active\"); --icon__bpm_message-4_neutral--disabled: url(\"./assets/icons/bpm/dark/message-4.svg#neutral--disabled\"); --icon__bpm_message-5_error-actionable--enabled: url(\"./assets/icons/bpm/dark/message-5.svg#error-actionable--enabled\"); --icon__bpm_message-5_error-actionable--hover: url(\"./assets/icons/bpm/dark/message-5.svg#error-actionable--hover\"); --icon__bpm_message-5_error-actionable--active: url(\"./assets/icons/bpm/dark/message-5.svg#error-actionable--active\"); --icon__bpm_message-5_error-actionable--disabled: url(\"./assets/icons/bpm/dark/message-5.svg#error-actionable--disabled\"); --icon__bpm_message-5_neutral--enabled: url(\"./assets/icons/bpm/dark/message-5.svg#neutral--enabled\"); --icon__bpm_message-5_neutral--hover: url(\"./assets/icons/bpm/dark/message-5.svg#neutral--hover\"); --icon__bpm_message-5_neutral--active: url(\"./assets/icons/bpm/dark/message-5.svg#neutral--active\"); --icon__bpm_message-5_neutral--disabled: url(\"./assets/icons/bpm/dark/message-5.svg#neutral--disabled\"); --icon__bpm_message-6_error-actionable--enabled: url(\"./assets/icons/bpm/dark/message-6.svg#error-actionable--enabled\"); --icon__bpm_message-6_error-actionable--hover: url(\"./assets/icons/bpm/dark/message-6.svg#error-actionable--hover\"); --icon__bpm_message-6_error-actionable--active: url(\"./assets/icons/bpm/dark/message-6.svg#error-actionable--active\"); --icon__bpm_message-6_error-actionable--disabled: url(\"./assets/icons/bpm/dark/message-6.svg#error-actionable--disabled\"); --icon__bpm_message-6_neutral--enabled: url(\"./assets/icons/bpm/dark/message-6.svg#neutral--enabled\"); --icon__bpm_message-6_neutral--hover: url(\"./assets/icons/bpm/dark/message-6.svg#neutral--hover\"); --icon__bpm_message-6_neutral--active: url(\"./assets/icons/bpm/dark/message-6.svg#neutral--active\"); --icon__bpm_message-6_neutral--disabled: url(\"./assets/icons/bpm/dark/message-6.svg#neutral--disabled\"); --icon__bpm_multiple-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/multiple-1.svg#error-actionable--enabled\"); --icon__bpm_multiple-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/multiple-1.svg#error-actionable--hover\"); --icon__bpm_multiple-1_error-actionable--active: url(\"./assets/icons/bpm/dark/multiple-1.svg#error-actionable--active\"); --icon__bpm_multiple-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/multiple-1.svg#error-actionable--disabled\"); --icon__bpm_multiple-1_neutral--enabled: url(\"./assets/icons/bpm/dark/multiple-1.svg#neutral--enabled\"); --icon__bpm_multiple-1_neutral--hover: url(\"./assets/icons/bpm/dark/multiple-1.svg#neutral--hover\"); --icon__bpm_multiple-1_neutral--active: url(\"./assets/icons/bpm/dark/multiple-1.svg#neutral--active\"); --icon__bpm_multiple-1_neutral--disabled: url(\"./assets/icons/bpm/dark/multiple-1.svg#neutral--disabled\"); --icon__bpm_multiple-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/multiple-2.svg#error-actionable--enabled\"); --icon__bpm_multiple-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/multiple-2.svg#error-actionable--hover\"); --icon__bpm_multiple-2_error-actionable--active: url(\"./assets/icons/bpm/dark/multiple-2.svg#error-actionable--active\"); --icon__bpm_multiple-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/multiple-2.svg#error-actionable--disabled\"); --icon__bpm_multiple-2_neutral--enabled: url(\"./assets/icons/bpm/dark/multiple-2.svg#neutral--enabled\"); --icon__bpm_multiple-2_neutral--hover: url(\"./assets/icons/bpm/dark/multiple-2.svg#neutral--hover\"); --icon__bpm_multiple-2_neutral--active: url(\"./assets/icons/bpm/dark/multiple-2.svg#neutral--active\"); --icon__bpm_multiple-2_neutral--disabled: url(\"./assets/icons/bpm/dark/multiple-2.svg#neutral--disabled\"); --icon__bpm_multiple-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/multiple-3.svg#error-actionable--enabled\"); --icon__bpm_multiple-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/multiple-3.svg#error-actionable--hover\"); --icon__bpm_multiple-3_error-actionable--active: url(\"./assets/icons/bpm/dark/multiple-3.svg#error-actionable--active\"); --icon__bpm_multiple-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/multiple-3.svg#error-actionable--disabled\"); --icon__bpm_multiple-3_neutral--enabled: url(\"./assets/icons/bpm/dark/multiple-3.svg#neutral--enabled\"); --icon__bpm_multiple-3_neutral--hover: url(\"./assets/icons/bpm/dark/multiple-3.svg#neutral--hover\"); --icon__bpm_multiple-3_neutral--active: url(\"./assets/icons/bpm/dark/multiple-3.svg#neutral--active\"); --icon__bpm_multiple-3_neutral--disabled: url(\"./assets/icons/bpm/dark/multiple-3.svg#neutral--disabled\"); --icon__bpm_multiple-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/multiple-4.svg#error-actionable--enabled\"); --icon__bpm_multiple-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/multiple-4.svg#error-actionable--hover\"); --icon__bpm_multiple-4_error-actionable--active: url(\"./assets/icons/bpm/dark/multiple-4.svg#error-actionable--active\"); --icon__bpm_multiple-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/multiple-4.svg#error-actionable--disabled\"); --icon__bpm_multiple-4_neutral--enabled: url(\"./assets/icons/bpm/dark/multiple-4.svg#neutral--enabled\"); --icon__bpm_multiple-4_neutral--hover: url(\"./assets/icons/bpm/dark/multiple-4.svg#neutral--hover\"); --icon__bpm_multiple-4_neutral--active: url(\"./assets/icons/bpm/dark/multiple-4.svg#neutral--active\"); --icon__bpm_multiple-4_neutral--disabled: url(\"./assets/icons/bpm/dark/multiple-4.svg#neutral--disabled\"); --icon__bpm_multiple-5_error-actionable--enabled: url(\"./assets/icons/bpm/dark/multiple-5.svg#error-actionable--enabled\"); --icon__bpm_multiple-5_error-actionable--hover: url(\"./assets/icons/bpm/dark/multiple-5.svg#error-actionable--hover\"); --icon__bpm_multiple-5_error-actionable--active: url(\"./assets/icons/bpm/dark/multiple-5.svg#error-actionable--active\"); --icon__bpm_multiple-5_error-actionable--disabled: url(\"./assets/icons/bpm/dark/multiple-5.svg#error-actionable--disabled\"); --icon__bpm_multiple-5_neutral--enabled: url(\"./assets/icons/bpm/dark/multiple-5.svg#neutral--enabled\"); --icon__bpm_multiple-5_neutral--hover: url(\"./assets/icons/bpm/dark/multiple-5.svg#neutral--hover\"); --icon__bpm_multiple-5_neutral--active: url(\"./assets/icons/bpm/dark/multiple-5.svg#neutral--active\"); --icon__bpm_multiple-5_neutral--disabled: url(\"./assets/icons/bpm/dark/multiple-5.svg#neutral--disabled\"); --icon__bpm_multiple-6_error-actionable--enabled: url(\"./assets/icons/bpm/dark/multiple-6.svg#error-actionable--enabled\"); --icon__bpm_multiple-6_error-actionable--hover: url(\"./assets/icons/bpm/dark/multiple-6.svg#error-actionable--hover\"); --icon__bpm_multiple-6_error-actionable--active: url(\"./assets/icons/bpm/dark/multiple-6.svg#error-actionable--active\"); --icon__bpm_multiple-6_error-actionable--disabled: url(\"./assets/icons/bpm/dark/multiple-6.svg#error-actionable--disabled\"); --icon__bpm_multiple-6_neutral--enabled: url(\"./assets/icons/bpm/dark/multiple-6.svg#neutral--enabled\"); --icon__bpm_multiple-6_neutral--hover: url(\"./assets/icons/bpm/dark/multiple-6.svg#neutral--hover\"); --icon__bpm_multiple-6_neutral--active: url(\"./assets/icons/bpm/dark/multiple-6.svg#neutral--active\"); --icon__bpm_multiple-6_neutral--disabled: url(\"./assets/icons/bpm/dark/multiple-6.svg#neutral--disabled\"); --icon__bpm_none-task_error-actionable--enabled: url(\"./assets/icons/bpm/dark/none-task.svg#error-actionable--enabled\"); --icon__bpm_none-task_error-actionable--hover: url(\"./assets/icons/bpm/dark/none-task.svg#error-actionable--hover\"); --icon__bpm_none-task_error-actionable--active: url(\"./assets/icons/bpm/dark/none-task.svg#error-actionable--active\"); --icon__bpm_none-task_error-actionable--disabled: url(\"./assets/icons/bpm/dark/none-task.svg#error-actionable--disabled\"); --icon__bpm_none-task_neutral--enabled: url(\"./assets/icons/bpm/dark/none-task.svg#neutral--enabled\"); --icon__bpm_none-task_neutral--hover: url(\"./assets/icons/bpm/dark/none-task.svg#neutral--hover\"); --icon__bpm_none-task_neutral--active: url(\"./assets/icons/bpm/dark/none-task.svg#neutral--active\"); --icon__bpm_none-task_neutral--disabled: url(\"./assets/icons/bpm/dark/none-task.svg#neutral--disabled\"); --icon__bpm_oval_error-actionable--enabled: url(\"./assets/icons/bpm/dark/oval.svg#error-actionable--enabled\"); --icon__bpm_oval_error-actionable--hover: url(\"./assets/icons/bpm/dark/oval.svg#error-actionable--hover\"); --icon__bpm_oval_error-actionable--active: url(\"./assets/icons/bpm/dark/oval.svg#error-actionable--active\"); --icon__bpm_oval_error-actionable--disabled: url(\"./assets/icons/bpm/dark/oval.svg#error-actionable--disabled\"); --icon__bpm_oval_neutral--enabled: url(\"./assets/icons/bpm/dark/oval.svg#neutral--enabled\"); --icon__bpm_oval_neutral--hover: url(\"./assets/icons/bpm/dark/oval.svg#neutral--hover\"); --icon__bpm_oval_neutral--active: url(\"./assets/icons/bpm/dark/oval.svg#neutral--active\"); --icon__bpm_oval_neutral--disabled: url(\"./assets/icons/bpm/dark/oval.svg#neutral--disabled\"); --icon__bpm_oval-doble_error-actionable--enabled: url(\"./assets/icons/bpm/dark/oval-doble.svg#error-actionable--enabled\"); --icon__bpm_oval-doble_error-actionable--hover: url(\"./assets/icons/bpm/dark/oval-doble.svg#error-actionable--hover\"); --icon__bpm_oval-doble_error-actionable--active: url(\"./assets/icons/bpm/dark/oval-doble.svg#error-actionable--active\"); --icon__bpm_oval-doble_error-actionable--disabled: url(\"./assets/icons/bpm/dark/oval-doble.svg#error-actionable--disabled\"); --icon__bpm_oval-doble_neutral--enabled: url(\"./assets/icons/bpm/dark/oval-doble.svg#neutral--enabled\"); --icon__bpm_oval-doble_neutral--hover: url(\"./assets/icons/bpm/dark/oval-doble.svg#neutral--hover\"); --icon__bpm_oval-doble_neutral--active: url(\"./assets/icons/bpm/dark/oval-doble.svg#neutral--active\"); --icon__bpm_oval-doble_neutral--disabled: url(\"./assets/icons/bpm/dark/oval-doble.svg#neutral--disabled\"); --icon__bpm_paralell-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/paralell-1.svg#error-actionable--enabled\"); --icon__bpm_paralell-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/paralell-1.svg#error-actionable--hover\"); --icon__bpm_paralell-1_error-actionable--active: url(\"./assets/icons/bpm/dark/paralell-1.svg#error-actionable--active\"); --icon__bpm_paralell-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/paralell-1.svg#error-actionable--disabled\"); --icon__bpm_paralell-1_neutral--enabled: url(\"./assets/icons/bpm/dark/paralell-1.svg#neutral--enabled\"); --icon__bpm_paralell-1_neutral--hover: url(\"./assets/icons/bpm/dark/paralell-1.svg#neutral--hover\"); --icon__bpm_paralell-1_neutral--active: url(\"./assets/icons/bpm/dark/paralell-1.svg#neutral--active\"); --icon__bpm_paralell-1_neutral--disabled: url(\"./assets/icons/bpm/dark/paralell-1.svg#neutral--disabled\"); --icon__bpm_paralell-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/paralell-2.svg#error-actionable--enabled\"); --icon__bpm_paralell-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/paralell-2.svg#error-actionable--hover\"); --icon__bpm_paralell-2_error-actionable--active: url(\"./assets/icons/bpm/dark/paralell-2.svg#error-actionable--active\"); --icon__bpm_paralell-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/paralell-2.svg#error-actionable--disabled\"); --icon__bpm_paralell-2_neutral--enabled: url(\"./assets/icons/bpm/dark/paralell-2.svg#neutral--enabled\"); --icon__bpm_paralell-2_neutral--hover: url(\"./assets/icons/bpm/dark/paralell-2.svg#neutral--hover\"); --icon__bpm_paralell-2_neutral--active: url(\"./assets/icons/bpm/dark/paralell-2.svg#neutral--active\"); --icon__bpm_paralell-2_neutral--disabled: url(\"./assets/icons/bpm/dark/paralell-2.svg#neutral--disabled\"); --icon__bpm_paralell-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/paralell-3.svg#error-actionable--enabled\"); --icon__bpm_paralell-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/paralell-3.svg#error-actionable--hover\"); --icon__bpm_paralell-3_error-actionable--active: url(\"./assets/icons/bpm/dark/paralell-3.svg#error-actionable--active\"); --icon__bpm_paralell-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/paralell-3.svg#error-actionable--disabled\"); --icon__bpm_paralell-3_neutral--enabled: url(\"./assets/icons/bpm/dark/paralell-3.svg#neutral--enabled\"); --icon__bpm_paralell-3_neutral--hover: url(\"./assets/icons/bpm/dark/paralell-3.svg#neutral--hover\"); --icon__bpm_paralell-3_neutral--active: url(\"./assets/icons/bpm/dark/paralell-3.svg#neutral--active\"); --icon__bpm_paralell-3_neutral--disabled: url(\"./assets/icons/bpm/dark/paralell-3.svg#neutral--disabled\"); --icon__bpm_paralell-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/paralell-4.svg#error-actionable--enabled\"); --icon__bpm_paralell-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/paralell-4.svg#error-actionable--hover\"); --icon__bpm_paralell-4_error-actionable--active: url(\"./assets/icons/bpm/dark/paralell-4.svg#error-actionable--active\"); --icon__bpm_paralell-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/paralell-4.svg#error-actionable--disabled\"); --icon__bpm_paralell-4_neutral--enabled: url(\"./assets/icons/bpm/dark/paralell-4.svg#neutral--enabled\"); --icon__bpm_paralell-4_neutral--hover: url(\"./assets/icons/bpm/dark/paralell-4.svg#neutral--hover\"); --icon__bpm_paralell-4_neutral--active: url(\"./assets/icons/bpm/dark/paralell-4.svg#neutral--active\"); --icon__bpm_paralell-4_neutral--disabled: url(\"./assets/icons/bpm/dark/paralell-4.svg#neutral--disabled\"); --icon__bpm_person_error-actionable--enabled: url(\"./assets/icons/bpm/dark/person.svg#error-actionable--enabled\"); --icon__bpm_person_error-actionable--hover: url(\"./assets/icons/bpm/dark/person.svg#error-actionable--hover\"); --icon__bpm_person_error-actionable--active: url(\"./assets/icons/bpm/dark/person.svg#error-actionable--active\"); --icon__bpm_person_error-actionable--disabled: url(\"./assets/icons/bpm/dark/person.svg#error-actionable--disabled\"); --icon__bpm_person_neutral--enabled: url(\"./assets/icons/bpm/dark/person.svg#neutral--enabled\"); --icon__bpm_person_neutral--hover: url(\"./assets/icons/bpm/dark/person.svg#neutral--hover\"); --icon__bpm_person_neutral--active: url(\"./assets/icons/bpm/dark/person.svg#neutral--active\"); --icon__bpm_person_neutral--disabled: url(\"./assets/icons/bpm/dark/person.svg#neutral--disabled\"); --icon__bpm_pool_error-actionable--enabled: url(\"./assets/icons/bpm/dark/pool.svg#error-actionable--enabled\"); --icon__bpm_pool_error-actionable--hover: url(\"./assets/icons/bpm/dark/pool.svg#error-actionable--hover\"); --icon__bpm_pool_error-actionable--active: url(\"./assets/icons/bpm/dark/pool.svg#error-actionable--active\"); --icon__bpm_pool_error-actionable--disabled: url(\"./assets/icons/bpm/dark/pool.svg#error-actionable--disabled\"); --icon__bpm_pool_neutral--enabled: url(\"./assets/icons/bpm/dark/pool.svg#neutral--enabled\"); --icon__bpm_pool_neutral--hover: url(\"./assets/icons/bpm/dark/pool.svg#neutral--hover\"); --icon__bpm_pool_neutral--active: url(\"./assets/icons/bpm/dark/pool.svg#neutral--active\"); --icon__bpm_pool_neutral--disabled: url(\"./assets/icons/bpm/dark/pool.svg#neutral--disabled\"); --icon__bpm_signal-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/signal-1.svg#error-actionable--enabled\"); --icon__bpm_signal-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/signal-1.svg#error-actionable--hover\"); --icon__bpm_signal-1_error-actionable--active: url(\"./assets/icons/bpm/dark/signal-1.svg#error-actionable--active\"); --icon__bpm_signal-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/signal-1.svg#error-actionable--disabled\"); --icon__bpm_signal-1_neutral--enabled: url(\"./assets/icons/bpm/dark/signal-1.svg#neutral--enabled\"); --icon__bpm_signal-1_neutral--hover: url(\"./assets/icons/bpm/dark/signal-1.svg#neutral--hover\"); --icon__bpm_signal-1_neutral--active: url(\"./assets/icons/bpm/dark/signal-1.svg#neutral--active\"); --icon__bpm_signal-1_neutral--disabled: url(\"./assets/icons/bpm/dark/signal-1.svg#neutral--disabled\"); --icon__bpm_signal-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/signal-2.svg#error-actionable--enabled\"); --icon__bpm_signal-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/signal-2.svg#error-actionable--hover\"); --icon__bpm_signal-2_error-actionable--active: url(\"./assets/icons/bpm/dark/signal-2.svg#error-actionable--active\"); --icon__bpm_signal-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/signal-2.svg#error-actionable--disabled\"); --icon__bpm_signal-2_neutral--enabled: url(\"./assets/icons/bpm/dark/signal-2.svg#neutral--enabled\"); --icon__bpm_signal-2_neutral--hover: url(\"./assets/icons/bpm/dark/signal-2.svg#neutral--hover\"); --icon__bpm_signal-2_neutral--active: url(\"./assets/icons/bpm/dark/signal-2.svg#neutral--active\"); --icon__bpm_signal-2_neutral--disabled: url(\"./assets/icons/bpm/dark/signal-2.svg#neutral--disabled\"); --icon__bpm_signal-3_error-actionable--enabled: url(\"./assets/icons/bpm/dark/signal-3.svg#error-actionable--enabled\"); --icon__bpm_signal-3_error-actionable--hover: url(\"./assets/icons/bpm/dark/signal-3.svg#error-actionable--hover\"); --icon__bpm_signal-3_error-actionable--active: url(\"./assets/icons/bpm/dark/signal-3.svg#error-actionable--active\"); --icon__bpm_signal-3_error-actionable--disabled: url(\"./assets/icons/bpm/dark/signal-3.svg#error-actionable--disabled\"); --icon__bpm_signal-3_neutral--enabled: url(\"./assets/icons/bpm/dark/signal-3.svg#neutral--enabled\"); --icon__bpm_signal-3_neutral--hover: url(\"./assets/icons/bpm/dark/signal-3.svg#neutral--hover\"); --icon__bpm_signal-3_neutral--active: url(\"./assets/icons/bpm/dark/signal-3.svg#neutral--active\"); --icon__bpm_signal-3_neutral--disabled: url(\"./assets/icons/bpm/dark/signal-3.svg#neutral--disabled\"); --icon__bpm_signal-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/signal-4.svg#error-actionable--enabled\"); --icon__bpm_signal-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/signal-4.svg#error-actionable--hover\"); --icon__bpm_signal-4_error-actionable--active: url(\"./assets/icons/bpm/dark/signal-4.svg#error-actionable--active\"); --icon__bpm_signal-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/signal-4.svg#error-actionable--disabled\"); --icon__bpm_signal-4_neutral--enabled: url(\"./assets/icons/bpm/dark/signal-4.svg#neutral--enabled\"); --icon__bpm_signal-4_neutral--hover: url(\"./assets/icons/bpm/dark/signal-4.svg#neutral--hover\"); --icon__bpm_signal-4_neutral--active: url(\"./assets/icons/bpm/dark/signal-4.svg#neutral--active\"); --icon__bpm_signal-4_neutral--disabled: url(\"./assets/icons/bpm/dark/signal-4.svg#neutral--disabled\"); --icon__bpm_signal-5_error-actionable--enabled: url(\"./assets/icons/bpm/dark/signal-5.svg#error-actionable--enabled\"); --icon__bpm_signal-5_error-actionable--hover: url(\"./assets/icons/bpm/dark/signal-5.svg#error-actionable--hover\"); --icon__bpm_signal-5_error-actionable--active: url(\"./assets/icons/bpm/dark/signal-5.svg#error-actionable--active\"); --icon__bpm_signal-5_error-actionable--disabled: url(\"./assets/icons/bpm/dark/signal-5.svg#error-actionable--disabled\"); --icon__bpm_signal-5_neutral--enabled: url(\"./assets/icons/bpm/dark/signal-5.svg#neutral--enabled\"); --icon__bpm_signal-5_neutral--hover: url(\"./assets/icons/bpm/dark/signal-5.svg#neutral--hover\"); --icon__bpm_signal-5_neutral--active: url(\"./assets/icons/bpm/dark/signal-5.svg#neutral--active\"); --icon__bpm_signal-5_neutral--disabled: url(\"./assets/icons/bpm/dark/signal-5.svg#neutral--disabled\"); --icon__bpm_signal-6_error-actionable--enabled: url(\"./assets/icons/bpm/dark/signal-6.svg#error-actionable--enabled\"); --icon__bpm_signal-6_error-actionable--hover: url(\"./assets/icons/bpm/dark/signal-6.svg#error-actionable--hover\"); --icon__bpm_signal-6_error-actionable--active: url(\"./assets/icons/bpm/dark/signal-6.svg#error-actionable--active\"); --icon__bpm_signal-6_error-actionable--disabled: url(\"./assets/icons/bpm/dark/signal-6.svg#error-actionable--disabled\"); --icon__bpm_signal-6_neutral--enabled: url(\"./assets/icons/bpm/dark/signal-6.svg#neutral--enabled\"); --icon__bpm_signal-6_neutral--hover: url(\"./assets/icons/bpm/dark/signal-6.svg#neutral--hover\"); --icon__bpm_signal-6_neutral--active: url(\"./assets/icons/bpm/dark/signal-6.svg#neutral--active\"); --icon__bpm_signal-6_neutral--disabled: url(\"./assets/icons/bpm/dark/signal-6.svg#neutral--disabled\"); --icon__bpm_subprocess_error-actionable--enabled: url(\"./assets/icons/bpm/dark/subprocess.svg#error-actionable--enabled\"); --icon__bpm_subprocess_error-actionable--hover: url(\"./assets/icons/bpm/dark/subprocess.svg#error-actionable--hover\"); --icon__bpm_subprocess_error-actionable--active: url(\"./assets/icons/bpm/dark/subprocess.svg#error-actionable--active\"); --icon__bpm_subprocess_error-actionable--disabled: url(\"./assets/icons/bpm/dark/subprocess.svg#error-actionable--disabled\"); --icon__bpm_subprocess_neutral--enabled: url(\"./assets/icons/bpm/dark/subprocess.svg#neutral--enabled\"); --icon__bpm_subprocess_neutral--hover: url(\"./assets/icons/bpm/dark/subprocess.svg#neutral--hover\"); --icon__bpm_subprocess_neutral--active: url(\"./assets/icons/bpm/dark/subprocess.svg#neutral--active\"); --icon__bpm_subprocess_neutral--disabled: url(\"./assets/icons/bpm/dark/subprocess.svg#neutral--disabled\"); --icon__bpm_tasks_error-actionable--enabled: url(\"./assets/icons/bpm/dark/tasks.svg#error-actionable--enabled\"); --icon__bpm_tasks_error-actionable--hover: url(\"./assets/icons/bpm/dark/tasks.svg#error-actionable--hover\"); --icon__bpm_tasks_error-actionable--active: url(\"./assets/icons/bpm/dark/tasks.svg#error-actionable--active\"); --icon__bpm_tasks_error-actionable--disabled: url(\"./assets/icons/bpm/dark/tasks.svg#error-actionable--disabled\"); --icon__bpm_tasks_neutral--enabled: url(\"./assets/icons/bpm/dark/tasks.svg#neutral--enabled\"); --icon__bpm_tasks_neutral--hover: url(\"./assets/icons/bpm/dark/tasks.svg#neutral--hover\"); --icon__bpm_tasks_neutral--active: url(\"./assets/icons/bpm/dark/tasks.svg#neutral--active\"); --icon__bpm_tasks_neutral--disabled: url(\"./assets/icons/bpm/dark/tasks.svg#neutral--disabled\"); --icon__bpm_terminale-4_error-actionable--enabled: url(\"./assets/icons/bpm/dark/terminale-4.svg#error-actionable--enabled\"); --icon__bpm_terminale-4_error-actionable--hover: url(\"./assets/icons/bpm/dark/terminale-4.svg#error-actionable--hover\"); --icon__bpm_terminale-4_error-actionable--active: url(\"./assets/icons/bpm/dark/terminale-4.svg#error-actionable--active\"); --icon__bpm_terminale-4_error-actionable--disabled: url(\"./assets/icons/bpm/dark/terminale-4.svg#error-actionable--disabled\"); --icon__bpm_terminale-4_neutral--enabled: url(\"./assets/icons/bpm/dark/terminale-4.svg#neutral--enabled\"); --icon__bpm_terminale-4_neutral--hover: url(\"./assets/icons/bpm/dark/terminale-4.svg#neutral--hover\"); --icon__bpm_terminale-4_neutral--active: url(\"./assets/icons/bpm/dark/terminale-4.svg#neutral--active\"); --icon__bpm_terminale-4_neutral--disabled: url(\"./assets/icons/bpm/dark/terminale-4.svg#neutral--disabled\"); --icon__bpm_text-anotation_error-actionable--enabled: url(\"./assets/icons/bpm/dark/text-anotation.svg#error-actionable--enabled\"); --icon__bpm_text-anotation_error-actionable--hover: url(\"./assets/icons/bpm/dark/text-anotation.svg#error-actionable--hover\"); --icon__bpm_text-anotation_error-actionable--active: url(\"./assets/icons/bpm/dark/text-anotation.svg#error-actionable--active\"); --icon__bpm_text-anotation_error-actionable--disabled: url(\"./assets/icons/bpm/dark/text-anotation.svg#error-actionable--disabled\"); --icon__bpm_text-anotation_neutral--enabled: url(\"./assets/icons/bpm/dark/text-anotation.svg#neutral--enabled\"); --icon__bpm_text-anotation_neutral--hover: url(\"./assets/icons/bpm/dark/text-anotation.svg#neutral--hover\"); --icon__bpm_text-anotation_neutral--active: url(\"./assets/icons/bpm/dark/text-anotation.svg#neutral--active\"); --icon__bpm_text-anotation_neutral--disabled: url(\"./assets/icons/bpm/dark/text-anotation.svg#neutral--disabled\"); --icon__bpm_timer-1_error-actionable--enabled: url(\"./assets/icons/bpm/dark/timer-1.svg#error-actionable--enabled\"); --icon__bpm_timer-1_error-actionable--hover: url(\"./assets/icons/bpm/dark/timer-1.svg#error-actionable--hover\"); --icon__bpm_timer-1_error-actionable--active: url(\"./assets/icons/bpm/dark/timer-1.svg#error-actionable--active\"); --icon__bpm_timer-1_error-actionable--disabled: url(\"./assets/icons/bpm/dark/timer-1.svg#error-actionable--disabled\"); --icon__bpm_timer-1_neutral--enabled: url(\"./assets/icons/bpm/dark/timer-1.svg#neutral--enabled\"); --icon__bpm_timer-1_neutral--hover: url(\"./assets/icons/bpm/dark/timer-1.svg#neutral--hover\"); --icon__bpm_timer-1_neutral--active: url(\"./assets/icons/bpm/dark/timer-1.svg#neutral--active\"); --icon__bpm_timer-1_neutral--disabled: url(\"./assets/icons/bpm/dark/timer-1.svg#neutral--disabled\"); --icon__bpm_timer-2_error-actionable--enabled: url(\"./assets/icons/bpm/dark/timer-2.svg#error-actionable--enabled\"); --icon__bpm_timer-2_error-actionable--hover: url(\"./assets/icons/bpm/dark/timer-2.svg#error-actionable--hover\"); --icon__bpm_timer-2_error-actionable--active: url(\"./assets/icons/bpm/dark/timer-2.svg#error-actionable--active\"); --icon__bpm_timer-2_error-actionable--disabled: url(\"./assets/icons/bpm/dark/timer-2.svg#error-actionable--disabled\"); --icon__bpm_timer-2_neutral--enabled: url(\"./assets/icons/bpm/dark/timer-2.svg#neutral--enabled\"); --icon__bpm_timer-2_neutral--hover: url(\"./assets/icons/bpm/dark/timer-2.svg#neutral--hover\"); --icon__bpm_timer-2_neutral--active: url(\"./assets/icons/bpm/dark/timer-2.svg#neutral--active\"); --icon__bpm_timer-2_neutral--disabled: url(\"./assets/icons/bpm/dark/timer-2.svg#neutral--disabled\"); --icon__bpm_timer-5_error-actionable--enabled: url(\"./assets/icons/bpm/dark/timer-5.svg#error-actionable--enabled\"); --icon__bpm_timer-5_error-actionable--hover: url(\"./assets/icons/bpm/dark/timer-5.svg#error-actionable--hover\"); --icon__bpm_timer-5_error-actionable--active: url(\"./assets/icons/bpm/dark/timer-5.svg#error-actionable--active\"); --icon__bpm_timer-5_error-actionable--disabled: url(\"./assets/icons/bpm/dark/timer-5.svg#error-actionable--disabled\"); --icon__bpm_timer-5_neutral--enabled: url(\"./assets/icons/bpm/dark/timer-5.svg#neutral--enabled\"); --icon__bpm_timer-5_neutral--hover: url(\"./assets/icons/bpm/dark/timer-5.svg#neutral--hover\"); --icon__bpm_timer-5_neutral--active: url(\"./assets/icons/bpm/dark/timer-5.svg#neutral--active\"); --icon__bpm_timer-5_neutral--disabled: url(\"./assets/icons/bpm/dark/timer-5.svg#neutral--disabled\"); --icon__bpm_timer-6_error-actionable--enabled: url(\"./assets/icons/bpm/dark/timer-6.svg#error-actionable--enabled\"); --icon__bpm_timer-6_error-actionable--hover: url(\"./assets/icons/bpm/dark/timer-6.svg#error-actionable--hover\"); --icon__bpm_timer-6_error-actionable--active: url(\"./assets/icons/bpm/dark/timer-6.svg#error-actionable--active\"); --icon__bpm_timer-6_error-actionable--disabled: url(\"./assets/icons/bpm/dark/timer-6.svg#error-actionable--disabled\"); --icon__bpm_timer-6_neutral--enabled: url(\"./assets/icons/bpm/dark/timer-6.svg#neutral--enabled\"); --icon__bpm_timer-6_neutral--hover: url(\"./assets/icons/bpm/dark/timer-6.svg#neutral--hover\"); --icon__bpm_timer-6_neutral--active: url(\"./assets/icons/bpm/dark/timer-6.svg#neutral--active\"); --icon__bpm_timer-6_neutral--disabled: url(\"./assets/icons/bpm/dark/timer-6.svg#neutral--disabled\"); }", ":root.dark { --icon__controls_action-group--enabled: url(\"./assets/icons/controls/dark/action-group.svg#enabled\"); --icon__controls_action-group--hover: url(\"./assets/icons/controls/dark/action-group.svg#hover\"); --icon__controls_action-group--active: url(\"./assets/icons/controls/dark/action-group.svg#active\"); --icon__controls_action-group--disabled: url(\"./assets/icons/controls/dark/action-group.svg#disabled\"); --icon__controls_action-group-item--enabled: url(\"./assets/icons/controls/dark/action-group-item.svg#enabled\"); --icon__controls_action-group-item--hover: url(\"./assets/icons/controls/dark/action-group-item.svg#hover\"); --icon__controls_action-group-item--active: url(\"./assets/icons/controls/dark/action-group-item.svg#active\"); --icon__controls_action-group-item--disabled: url(\"./assets/icons/controls/dark/action-group-item.svg#disabled\"); --icon__controls_button--enabled: url(\"./assets/icons/controls/dark/button.svg#enabled\"); --icon__controls_button--hover: url(\"./assets/icons/controls/dark/button.svg#hover\"); --icon__controls_button--active: url(\"./assets/icons/controls/dark/button.svg#active\"); --icon__controls_button--disabled: url(\"./assets/icons/controls/dark/button.svg#disabled\"); --icon__controls_button-group--enabled: url(\"./assets/icons/controls/dark/button-group.svg#enabled\"); --icon__controls_button-group--hover: url(\"./assets/icons/controls/dark/button-group.svg#hover\"); --icon__controls_button-group--active: url(\"./assets/icons/controls/dark/button-group.svg#active\"); --icon__controls_button-group--disabled: url(\"./assets/icons/controls/dark/button-group.svg#disabled\"); --icon__controls_call-target--enabled: url(\"./assets/icons/controls/dark/call-target.svg#enabled\"); --icon__controls_call-target--hover: url(\"./assets/icons/controls/dark/call-target.svg#hover\"); --icon__controls_call-target--active: url(\"./assets/icons/controls/dark/call-target.svg#active\"); --icon__controls_call-target--disabled: url(\"./assets/icons/controls/dark/call-target.svg#disabled\"); --icon__controls_canva--enabled: url(\"./assets/icons/controls/dark/canva.svg#enabled\"); --icon__controls_canva--hover: url(\"./assets/icons/controls/dark/canva.svg#hover\"); --icon__controls_canva--active: url(\"./assets/icons/controls/dark/canva.svg#active\"); --icon__controls_canva--disabled: url(\"./assets/icons/controls/dark/canva.svg#disabled\"); --icon__controls_class-html--enabled: url(\"./assets/icons/controls/dark/class-html.svg#enabled\"); --icon__controls_class-html--hover: url(\"./assets/icons/controls/dark/class-html.svg#hover\"); --icon__controls_class-html--active: url(\"./assets/icons/controls/dark/class-html.svg#active\"); --icon__controls_class-html--disabled: url(\"./assets/icons/controls/dark/class-html.svg#disabled\"); --icon__controls_component--enabled: url(\"./assets/icons/controls/dark/component.svg#enabled\"); --icon__controls_component--hover: url(\"./assets/icons/controls/dark/component.svg#hover\"); --icon__controls_component--active: url(\"./assets/icons/controls/dark/component.svg#active\"); --icon__controls_component--disabled: url(\"./assets/icons/controls/dark/component.svg#disabled\"); --icon__controls_default--enabled: url(\"./assets/icons/controls/dark/default.svg#enabled\"); --icon__controls_default--hover: url(\"./assets/icons/controls/dark/default.svg#hover\"); --icon__controls_default--active: url(\"./assets/icons/controls/dark/default.svg#active\"); --icon__controls_default--disabled: url(\"./assets/icons/controls/dark/default.svg#disabled\"); --icon__controls_embedded-page--enabled: url(\"./assets/icons/controls/dark/embedded-page.svg#enabled\"); --icon__controls_embedded-page--hover: url(\"./assets/icons/controls/dark/embedded-page.svg#hover\"); --icon__controls_embedded-page--active: url(\"./assets/icons/controls/dark/embedded-page.svg#active\"); --icon__controls_embedded-page--disabled: url(\"./assets/icons/controls/dark/embedded-page.svg#disabled\"); --icon__controls_error-viewer--enabled: url(\"./assets/icons/controls/dark/error-viewer.svg#enabled\"); --icon__controls_error-viewer--hover: url(\"./assets/icons/controls/dark/error-viewer.svg#hover\"); --icon__controls_error-viewer--active: url(\"./assets/icons/controls/dark/error-viewer.svg#active\"); --icon__controls_error-viewer--disabled: url(\"./assets/icons/controls/dark/error-viewer.svg#disabled\"); --icon__controls_file-upload--enabled: url(\"./assets/icons/controls/dark/file-upload.svg#enabled\"); --icon__controls_file-upload--hover: url(\"./assets/icons/controls/dark/file-upload.svg#hover\"); --icon__controls_file-upload--active: url(\"./assets/icons/controls/dark/file-upload.svg#active\"); --icon__controls_file-upload--disabled: url(\"./assets/icons/controls/dark/file-upload.svg#disabled\"); --icon__controls_flex--enabled: url(\"./assets/icons/controls/dark/flex.svg#enabled\"); --icon__controls_flex--hover: url(\"./assets/icons/controls/dark/flex.svg#hover\"); --icon__controls_flex--active: url(\"./assets/icons/controls/dark/flex.svg#active\"); --icon__controls_flex--disabled: url(\"./assets/icons/controls/dark/flex.svg#disabled\"); --icon__controls_font--enabled: url(\"./assets/icons/controls/dark/font.svg#enabled\"); --icon__controls_font--hover: url(\"./assets/icons/controls/dark/font.svg#hover\"); --icon__controls_font--active: url(\"./assets/icons/controls/dark/font.svg#active\"); --icon__controls_font--disabled: url(\"./assets/icons/controls/dark/font.svg#disabled\"); --icon__controls_free-style-grid--enabled: url(\"./assets/icons/controls/dark/free-style-grid.svg#enabled\"); --icon__controls_free-style-grid--hover: url(\"./assets/icons/controls/dark/free-style-grid.svg#hover\"); --icon__controls_free-style-grid--active: url(\"./assets/icons/controls/dark/free-style-grid.svg#active\"); --icon__controls_free-style-grid--disabled: url(\"./assets/icons/controls/dark/free-style-grid.svg#disabled\"); --icon__controls_google-analytics--enabled: url(\"./assets/icons/controls/dark/google-analytics.svg#enabled\"); --icon__controls_google-analytics--hover: url(\"./assets/icons/controls/dark/google-analytics.svg#hover\"); --icon__controls_google-analytics--active: url(\"./assets/icons/controls/dark/google-analytics.svg#active\"); --icon__controls_google-analytics--disabled: url(\"./assets/icons/controls/dark/google-analytics.svg#disabled\"); --icon__controls_google-annotated-tmeline--enabled: url(\"./assets/icons/controls/dark/google-annotated-tmeline.svg#enabled\"); --icon__controls_google-annotated-tmeline--hover: url(\"./assets/icons/controls/dark/google-annotated-tmeline.svg#hover\"); --icon__controls_google-annotated-tmeline--active: url(\"./assets/icons/controls/dark/google-annotated-tmeline.svg#active\"); --icon__controls_google-annotated-tmeline--disabled: url(\"./assets/icons/controls/dark/google-annotated-tmeline.svg#disabled\"); --icon__controls_google-charts--enabled: url(\"./assets/icons/controls/dark/google-charts.svg#enabled\"); --icon__controls_google-charts--hover: url(\"./assets/icons/controls/dark/google-charts.svg#hover\"); --icon__controls_google-charts--active: url(\"./assets/icons/controls/dark/google-charts.svg#active\"); --icon__controls_google-charts--disabled: url(\"./assets/icons/controls/dark/google-charts.svg#disabled\"); --icon__controls_google-geomap--enabled: url(\"./assets/icons/controls/dark/google-geomap.svg#enabled\"); --icon__controls_google-geomap--hover: url(\"./assets/icons/controls/dark/google-geomap.svg#hover\"); --icon__controls_google-geomap--active: url(\"./assets/icons/controls/dark/google-geomap.svg#active\"); --icon__controls_google-geomap--disabled: url(\"./assets/icons/controls/dark/google-geomap.svg#disabled\"); --icon__controls_grid--enabled: url(\"./assets/icons/controls/dark/grid.svg#enabled\"); --icon__controls_grid--hover: url(\"./assets/icons/controls/dark/grid.svg#hover\"); --icon__controls_grid--active: url(\"./assets/icons/controls/dark/grid.svg#active\"); --icon__controls_grid--disabled: url(\"./assets/icons/controls/dark/grid.svg#disabled\"); --icon__controls_group--enabled: url(\"./assets/icons/controls/dark/group.svg#enabled\"); --icon__controls_group--hover: url(\"./assets/icons/controls/dark/group.svg#hover\"); --icon__controls_group--active: url(\"./assets/icons/controls/dark/group.svg#active\"); --icon__controls_group--disabled: url(\"./assets/icons/controls/dark/group.svg#disabled\"); --icon__controls_gx-scheduler--enabled: url(\"./assets/icons/controls/dark/gx-scheduler.svg#enabled\"); --icon__controls_gx-scheduler--hover: url(\"./assets/icons/controls/dark/gx-scheduler.svg#hover\"); --icon__controls_gx-scheduler--active: url(\"./assets/icons/controls/dark/gx-scheduler.svg#active\"); --icon__controls_gx-scheduler--disabled: url(\"./assets/icons/controls/dark/gx-scheduler.svg#disabled\"); --icon__controls_history-manager--enabled: url(\"./assets/icons/controls/dark/history-manager.svg#enabled\"); --icon__controls_history-manager--hover: url(\"./assets/icons/controls/dark/history-manager.svg#hover\"); --icon__controls_history-manager--active: url(\"./assets/icons/controls/dark/history-manager.svg#active\"); --icon__controls_history-manager--disabled: url(\"./assets/icons/controls/dark/history-manager.svg#disabled\"); --icon__controls_horizontal-line--enabled: url(\"./assets/icons/controls/dark/horizontal-line.svg#enabled\"); --icon__controls_horizontal-line--hover: url(\"./assets/icons/controls/dark/horizontal-line.svg#hover\"); --icon__controls_horizontal-line--active: url(\"./assets/icons/controls/dark/horizontal-line.svg#active\"); --icon__controls_horizontal-line--disabled: url(\"./assets/icons/controls/dark/horizontal-line.svg#disabled\"); --icon__controls_html--enabled: url(\"./assets/icons/controls/dark/html.svg#enabled\"); --icon__controls_html--hover: url(\"./assets/icons/controls/dark/html.svg#hover\"); --icon__controls_html--active: url(\"./assets/icons/controls/dark/html.svg#active\"); --icon__controls_html--disabled: url(\"./assets/icons/controls/dark/html.svg#disabled\"); --icon__controls_hyperlink--enabled: url(\"./assets/icons/controls/dark/hyperlink.svg#enabled\"); --icon__controls_hyperlink--hover: url(\"./assets/icons/controls/dark/hyperlink.svg#hover\"); --icon__controls_hyperlink--active: url(\"./assets/icons/controls/dark/hyperlink.svg#active\"); --icon__controls_hyperlink--disabled: url(\"./assets/icons/controls/dark/hyperlink.svg#disabled\"); --icon__controls_id-html--enabled: url(\"./assets/icons/controls/dark/id-html.svg#enabled\"); --icon__controls_id-html--hover: url(\"./assets/icons/controls/dark/id-html.svg#hover\"); --icon__controls_id-html--active: url(\"./assets/icons/controls/dark/id-html.svg#active\"); --icon__controls_id-html--disabled: url(\"./assets/icons/controls/dark/id-html.svg#disabled\"); --icon__controls_media-player--enabled: url(\"./assets/icons/controls/dark/media-player.svg#enabled\"); --icon__controls_media-player--hover: url(\"./assets/icons/controls/dark/media-player.svg#hover\"); --icon__controls_media-player--active: url(\"./assets/icons/controls/dark/media-player.svg#active\"); --icon__controls_media-player--disabled: url(\"./assets/icons/controls/dark/media-player.svg#disabled\"); --icon__controls_messages--enabled: url(\"./assets/icons/controls/dark/messages.svg#enabled\"); --icon__controls_messages--hover: url(\"./assets/icons/controls/dark/messages.svg#hover\"); --icon__controls_messages--active: url(\"./assets/icons/controls/dark/messages.svg#active\"); --icon__controls_messages--disabled: url(\"./assets/icons/controls/dark/messages.svg#disabled\"); --icon__controls_pop-up--enabled: url(\"./assets/icons/controls/dark/pop-up.svg#enabled\"); --icon__controls_pop-up--hover: url(\"./assets/icons/controls/dark/pop-up.svg#hover\"); --icon__controls_pop-up--active: url(\"./assets/icons/controls/dark/pop-up.svg#active\"); --icon__controls_pop-up--disabled: url(\"./assets/icons/controls/dark/pop-up.svg#disabled\"); --icon__controls_section--enabled: url(\"./assets/icons/controls/dark/section.svg#enabled\"); --icon__controls_section--hover: url(\"./assets/icons/controls/dark/section.svg#hover\"); --icon__controls_section--active: url(\"./assets/icons/controls/dark/section.svg#active\"); --icon__controls_section--disabled: url(\"./assets/icons/controls/dark/section.svg#disabled\"); --icon__controls_smart-table--enabled: url(\"./assets/icons/controls/dark/smart-table.svg#enabled\"); --icon__controls_smart-table--hover: url(\"./assets/icons/controls/dark/smart-table.svg#hover\"); --icon__controls_smart-table--active: url(\"./assets/icons/controls/dark/smart-table.svg#active\"); --icon__controls_smart-table--disabled: url(\"./assets/icons/controls/dark/smart-table.svg#disabled\"); --icon__controls_snippet--enabled: url(\"./assets/icons/controls/dark/snippet.svg#enabled\"); --icon__controls_snippet--hover: url(\"./assets/icons/controls/dark/snippet.svg#hover\"); --icon__controls_snippet--active: url(\"./assets/icons/controls/dark/snippet.svg#active\"); --icon__controls_snippet--disabled: url(\"./assets/icons/controls/dark/snippet.svg#disabled\"); --icon__controls_tab--enabled: url(\"./assets/icons/controls/dark/tab.svg#enabled\"); --icon__controls_tab--hover: url(\"./assets/icons/controls/dark/tab.svg#hover\"); --icon__controls_tab--active: url(\"./assets/icons/controls/dark/tab.svg#active\"); --icon__controls_tab--disabled: url(\"./assets/icons/controls/dark/tab.svg#disabled\"); --icon__controls_tab-page--enabled: url(\"./assets/icons/controls/dark/tab-page.svg#enabled\"); --icon__controls_tab-page--hover: url(\"./assets/icons/controls/dark/tab-page.svg#hover\"); --icon__controls_tab-page--active: url(\"./assets/icons/controls/dark/tab-page.svg#active\"); --icon__controls_tab-page--disabled: url(\"./assets/icons/controls/dark/tab-page.svg#disabled\"); --icon__controls_table--enabled: url(\"./assets/icons/controls/dark/table.svg#enabled\"); --icon__controls_table--hover: url(\"./assets/icons/controls/dark/table.svg#hover\"); --icon__controls_table--active: url(\"./assets/icons/controls/dark/table.svg#active\"); --icon__controls_table--disabled: url(\"./assets/icons/controls/dark/table.svg#disabled\"); --icon__controls_table-cell--enabled: url(\"./assets/icons/controls/dark/table-cell.svg#enabled\"); --icon__controls_table-cell--hover: url(\"./assets/icons/controls/dark/table-cell.svg#hover\"); --icon__controls_table-cell--active: url(\"./assets/icons/controls/dark/table-cell.svg#active\"); --icon__controls_table-cell--disabled: url(\"./assets/icons/controls/dark/table-cell.svg#disabled\"); --icon__controls_table-column--enabled: url(\"./assets/icons/controls/dark/table-column.svg#enabled\"); --icon__controls_table-column--hover: url(\"./assets/icons/controls/dark/table-column.svg#hover\"); --icon__controls_table-column--active: url(\"./assets/icons/controls/dark/table-column.svg#active\"); --icon__controls_table-column--disabled: url(\"./assets/icons/controls/dark/table-column.svg#disabled\"); --icon__controls_table-row--enabled: url(\"./assets/icons/controls/dark/table-row.svg#enabled\"); --icon__controls_table-row--hover: url(\"./assets/icons/controls/dark/table-row.svg#hover\"); --icon__controls_table-row--active: url(\"./assets/icons/controls/dark/table-row.svg#active\"); --icon__controls_table-row--disabled: url(\"./assets/icons/controls/dark/table-row.svg#disabled\"); --icon__controls_tag-html--enabled: url(\"./assets/icons/controls/dark/tag-html.svg#enabled\"); --icon__controls_tag-html--hover: url(\"./assets/icons/controls/dark/tag-html.svg#hover\"); --icon__controls_tag-html--active: url(\"./assets/icons/controls/dark/tag-html.svg#active\"); --icon__controls_tag-html--disabled: url(\"./assets/icons/controls/dark/tag-html.svg#disabled\"); --icon__controls_text-block--enabled: url(\"./assets/icons/controls/dark/text-block.svg#enabled\"); --icon__controls_text-block--hover: url(\"./assets/icons/controls/dark/text-block.svg#hover\"); --icon__controls_text-block--active: url(\"./assets/icons/controls/dark/text-block.svg#active\"); --icon__controls_text-block--disabled: url(\"./assets/icons/controls/dark/text-block.svg#disabled\"); --icon__controls_treeview--enabled: url(\"./assets/icons/controls/dark/treeview.svg#enabled\"); --icon__controls_treeview--hover: url(\"./assets/icons/controls/dark/treeview.svg#hover\"); --icon__controls_treeview--active: url(\"./assets/icons/controls/dark/treeview.svg#active\"); --icon__controls_treeview--disabled: url(\"./assets/icons/controls/dark/treeview.svg#disabled\"); --icon__controls_variable--enabled: url(\"./assets/icons/controls/dark/variable.svg#enabled\"); --icon__controls_variable--hover: url(\"./assets/icons/controls/dark/variable.svg#hover\"); --icon__controls_variable--active: url(\"./assets/icons/controls/dark/variable.svg#active\"); --icon__controls_variable--disabled: url(\"./assets/icons/controls/dark/variable.svg#disabled\"); }", diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/base/base-globant.json b/packages/mercury/src/tests/bundles/expected-bundle-content/base/base-globant.json index 80fc1aa14..adc8cf6a6 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/base/base-globant.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/base/base-globant.json @@ -1,5 +1,5 @@ [ - ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, \"); --window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); --window__border-radius: var(--mer-border__radius--sm); --window__padding: var(--mer-spacing--xs); --window__bg-color: var(--mer-surface__elevation--01); --window__gap: var(--mer-spacing--xs); --window__box-shadow: var(--mer-box-shadow--01); --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; --focus__outline-color: var(--mer-border-color__primary); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); --control__block-size: 32px; --control__bg-color: var(--control__bg-color--enabled); --control__border-color: var(--control__border-color--enabled); --control__color: var(--control__color--enabled); --control__bg-color--enabled: transparent; --control__border-color--enabled: var(--mer-color__neutral-gray--500); --control__color--enabled: var(--mer-text__neutral); --control__border-color--hover: var(--mer-border-color__neutral--hover); --control__background-color--disabled: var(--mer-accent__primary--disabled); --control__border-color--disabled: var(--control__background-color--disabled); --control__color--disabled: var(--mer-text__on-disabled); --control__border-color--error: var(--mer-border-color__error); --control__border-width: var(--mer-border__width--sm); --control__border-style: solid; --control__border-radius: var(--mer-border__radius--sm); --control__padding-block: calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--font-size-body-m) * var(--line-height-tight) ) / 2 ); --control__padding-inline: var(--mer-spacing--xs); --control__icon-gap: var(--mer-spacing--xs); --control-placeholder__color: var(--mer-color__neutral-gray--400); --control-placeholder__color--disabled: var( --mer-form-input__color--disabled ); --control-placeholder__font-style: italic; --control-tiny__size: var(--mer-spacing--md); --control-tiny__border-width: 1.2px; --control-tiny__border-style: solid; --control-tiny__border-radius-sm: 1px; --control-tiny__border-radius-rounded: 50%; --control-tiny-option__color: var(--control__border-color); --label__border-width: 1.2px; --label__border-style: solid; --label__border-radius: var(--mer-border__radius--2xs); --label__gap--inline: var(--mer-spacing--xs); --label__gap--block: var(--mer-spacing--xs); --label__color: var(--label__color--enabled); --label__color--enabled: var(--mer-text__neutral); --label__color--hover: var(--mer-text__highlighted); --label__color--disabled: var(--mer-text__primary--disabled); --label__color--error: var(--mer-text__neutral); --controls__container-row-gap: var(--mer-spacing--md); --controls__group-gap--block: var(--mer-spacing--sm); --controls__group-gap--inline: var(--mer-spacing--md); --field-group__row-gap: var(--mer-spacing--md); --field-group__column-gap: var(--mer-spacing--lg); --field__row-gap: var(--mer-spacing--xs); --field__column-gap: var(--mer-spacing--md); --field-inline-label__margin-block-start: 6px; --mer-accent__primary: var(--mer-color__primary--200); --mer-accent__primary--hover: var(--mer-color__primary--400); --mer-accent__primary--active: var(--mer-color__primary--600); --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); --mer-accent__primary--destructive: var(--mer-color__message-red--600); --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); --mer-accent__primary--destructive-active: var( --mer-color__message-red--1000 ); --accent-success-lighter: var(--color-green-300); --accent-success-light: var(--color-green-500); --accent-success-enabled: var(--color-green-600); --accent-success-hover: var(--color-green-800); --accent-success-active: var(--color-green-1000); --mer-border-color__primary: var(--mer-accent__primary); --mer-border-color__primary--hover: var(--mer-accent__primary--hover); --mer-border-color__primary--active: var(--mer-accent__primary--active); --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); --mer-border-color__dim: var(--mer-color__neutral-gray--550); --mer-border-color__error: var(--mer-color__message-red--600); --mer-border-color__error--hover: var( --mer-accent__primary--destructive-hover ); --mer-border-color__error--active: var( --mer-accent__primary--destructive-active ); --mer-border-color__warning: var(--mer-color__message-yellow--100); --mer-border-color__success: var(--mer-color__message-green--100); --mer-border-color__neutral: var(--mer-color__neutral-gray--400); --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); --mer-heading__gray--light: var(--mer-color__neutral-gray--200); --mer-header__background-color: var(--mer-color__neutral-gray--700); --mer-icon__on-surface: var(--mer-color__neutral-gray--200); --mer-icon__on-primary: var(--mer-color__neutral-gray--900); --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); --mer-icon__on-message: var(--mer-color__neutral-gray--700); --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); --mer-icon__primary: var(--mer-accent__primary); --mer-icon__primary--hover: var(--mer-accent__primary--hover); --mer-icon__primary--active: var(--mer-accent__primary--active); --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); --mer-icon__error: var(--mer-color__message-red--600); --mer-icon__warning: var(--mer-color__message-yellow--100); --mer-icon__success: var(--mer-color__message-green--100); --mer-icon__neutral: var(--mer-color__neutral-gray--300); --mer-icon__highlighted: var(--mer-color__neutral-gray--100); --mer-icon__bright: var(--mer-color__neutral-gray--300); --item__bg-color: var(--item__bg-color--enabled); --item__border-color: var(--item__border-color--enabled); --item__color: var(--item__color--enabled); --item__bg-color--enabled: transparent; --item__border-color--enabled: transparent; --item__color--enabled: var(--mer-text__on-elevation); --item__bg-color--hover: var(--mer-color__tinted-primary--5); --item__border-color--hover: transparent; --item__color--hover: var(--mer-color__neutral-gray--100); --item__bg-color--selected: var(--mer-color__tinted-primary--10); --item__border-color--selected: var(--mer-color__tinted-primary--30); --item__color--selected: var(--mer-color__neutral-gray--100); --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); --item__color--selected-hover: var(--mer-color__neutral-gray--100); --item__bg-color--disabled: transparent; --item__border-color--disabled: transparent; --item__color--disabled: var(--mer-text__primary--disabled); --item__border-width: var(--mer-border__width--sm); --item__border-style: solid; --item__border-radius: var(--mer-border__radius--sm); --item__padding-block: var(--mer-spacing--2xs); --item__padding-inline: var(--mer-spacing--xs); --item__height--regular: var(--mer-spacing--xl); --item__height--large: 36px; --item__gap--regular: var(--mer-spacing--xs); --items-container__border-width: var(--mer-border__width--sm); --items-container__border-style: solid; --items-container__bg-color: var(--mer-surface__elevation--01); --items-container__border-color: var(--mer-border-color__on-surface); --items-container__padding-block: var(--mer-spacing--xs); --items-container__padding-inline: var(--mer-spacing--xs); --items-container__border-radius: var(--mer-border__radius--sm); --items-container__box-shadow: var(--mer-box-shadow--01); --items-container__gap: var(--mer-spacing--2xs); --items-container__gap--small: var(--mer-spacing--2xs); --items-container__max-block-size: 300px; --items-container-separator__block-size: var(--mer-border__width--sm); --items-container-separator__inline-size: 100%; --items-container-separator__bg-color: var(--items-container__border-color); --grid-cell__border-color: var(--mer-border-color__on-elevation--01); --grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color); --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); --grid-cell__padding-block: var(--mer-spacing--xs); --grid-cell__padding-inline: var(--mer-spacing--sm); --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); --tab-caption__color: var(--tab-caption__color--enabled); --tab-caption__border-color: transparent; --tab-caption__border-style: solid; --tab-caption__border-width: var(--mer-border__width--sm); --tab-caption__bg-color--enabled: transparent; --tab-caption__border-color--enabled: transparent; --tab-caption__color--enabled: var(--mer-text__neutral); --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); --tab-caption__bg-color--selected-inline: transparent; --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); --tab-caption__border-color--selected-inline: var(--mer-accent__primary); --tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 ); --tab-caption__color--selected: var(--mer-text__highlighted); --tab-caption__bg-color--disabled: transparent; --tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 ); --tab-caption__color--disabled: var(--mer-text__primary--disabled); --tab-caption__padding-block: var(--mer-spacing--xs); --tab-caption__padding-inline: var(--mer-spacing--sm); --tab-caption__gap: var(--mer-spacing--xs); --mer-surface: var(--mer-color__neutral-gray--900); --mer-color__surface: var( --mer-surface ); --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); --mer-box-shadow--01: 0px 4px 20px 0px #00000040; --mer-text__on-surface: var(--mer-color__neutral-gray--200); --mer-text__on-primary: var(--mer-color__neutral-gray--900); --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); --mer-text__on-disabled: var(--mer-color__neutral-gray--450); --mer-text__on-message: var(--mer-color__neutral-gray--700); --mer-text__on-elevation: var(--mer-color__neutral-gray--300); --mer-text__primary: var(--mer-accent__primary); --mer-text__primary--hover: var(--mer-accent__primary--hover); --mer-text__primary--active: var(--mer-accent__primary--active); --mer-text__primary--disabled: var(--mer-accent__primary--disabled); --mer-text__neutral: var(--mer-color__neutral-gray--300); --mer-text__highlighted: var(--mer-color__neutral-gray--100); --mer-text__success: var(--mer-color__message-green--100); --mer-text__error: var(--mer-color__message-red--600); --mer-text__warning: var(--mer-color__message-yellow--100); --mer-text__complementary: var(--mer-color__neutral-gray--450); --mer-text__bright: var( --mer-color__neutral-gray--100 ); --font-family-header: Inter, Helvetica, Arial, sans-serif; --font-family-body: Inter, Helvetica, Arial, sans-serif; --font-family-code: monospace; --font-size-header-h1: 40px; --font-size-header-h2: 32px; --font-size-header-h3: 28px; --font-size-header-h4: 24px; --font-size-header-h5: 20px; --font-size-header-h6: 18px; --font-size-subtitle-l: 20px; --font-size-subtitle-m: 18px; --font-size-subtitle-s: 16px; --font-size-subtitle-xs: 14px; --font-size-body-xl: 18px; --font-size-body-l: 16px; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-body-xs: 11px; --font-size-tiny-l: 12px; --font-size-tiny-m: 11px; --font-size-tiny-s: 10px; --font-size-tiny-xs: 8px; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-regular: 400; --line-height-tight: 1.2; --line-height-regular: 1.3; --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; --mer-font-family--code: monospace; --mer-font__weight--extra-bold: 800; --mer-font__weight--bold: 700; --mer-font__weight--semi-bold: 600; --mer-font__weight--medium: 500; --mer-font__weight--regular: 400; --mer-font__weight--light: 300; --mer-font__size--4xs: 11px; --mer-font__size--3xs: 12px; --mer-font__size--2xs: 13px; --mer-font__size--xs: 14px; --mer-font__size--sm: 16px; --mer-font__size--md: 20px; --mer-font__size--lg: 24px; --mer-font__size--xl: 36px; --mer-font__size--2xl: 40px; --mer-line-height--tight: 1.3; --mer-line-height--regular: 1.4; --mer-line-height--spaced: 1.5; --mer-spacing--3xs: 2px; --mer-spacing--2xs: 4px; --mer-spacing--xs: 8px; --mer-spacing--sm: 12px; --mer-spacing--md: 16px; --mer-spacing--lg: 24px; --mer-spacing--xl: 32px; --mer-spacing--2xl: 40px; --mer-spacing--3xl: 48px; --mer-spacing--4xl: 64px; --mer-timing--super-fast: 100ms; --mer-timing--fast: 200ms; --mer-timing--regular: 500ms; --mer-timing--slow: 1000ms; }", + ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, \"); --window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); --window__border-radius: var(--mer-border__radius--sm); --window__padding: var(--mer-spacing--xs); --window__bg-color: var(--mer-surface__elevation--01); --window__gap: var(--mer-spacing--xs); --window__box-shadow: var(--mer-box-shadow--01); --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; --focus__outline-color: var(--mer-border-color__primary--focused); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); --control__block-size: 32px; --control__bg-color: var(--control__bg-color--enabled); --control__border-color: var(--control__border-color--enabled); --control__color: var(--control__color--enabled); --control__bg-color--enabled: transparent; --control__border-color--enabled: var(--mer-color__neutral-gray--500); --control__color--enabled: var(--mer-text__neutral); --control__border-color--hover: var(--mer-border-color__neutral--hover); --control__background-color--disabled: var(--mer-accent__primary--disabled); --control__border-color--disabled: var(--control__background-color--disabled); --control__color--disabled: var(--mer-text__on-disabled); --control__border-color--error: var(--mer-border-color__error); --control__border-width: var(--mer-border__width--sm); --control__border-style: solid; --control__border-radius: var(--mer-border__radius--sm); --control__padding-block: calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--font-size-body-m) * var(--line-height-tight) ) / 2 ); --control__padding-inline: var(--mer-spacing--xs); --control__icon-gap: var(--mer-spacing--xs); --control-placeholder__color: var(--mer-color__neutral-gray--400); --control-placeholder__color--disabled: var( --mer-form-input__color--disabled ); --control-placeholder__font-style: italic; --control-tiny__size: var(--mer-spacing--md); --control-tiny__border-width: 1.2px; --control-tiny__border-style: solid; --control-tiny__border-radius-sm: 1px; --control-tiny__border-radius-rounded: 50%; --control-tiny-option__color: var(--control__border-color); --label__border-width: 1.2px; --label__border-style: solid; --label__border-radius: var(--mer-border__radius--2xs); --label__gap--inline: var(--mer-spacing--xs); --label__gap--block: var(--mer-spacing--xs); --label__color: var(--label__color--enabled); --label__color--enabled: var(--mer-text__neutral); --label__color--hover: var(--mer-text__highlighted); --label__color--disabled: var(--mer-text__primary--disabled); --label__color--error: var(--mer-text__neutral); --controls__container-row-gap: var(--mer-spacing--md); --controls__group-gap--block: var(--mer-spacing--sm); --controls__group-gap--inline: var(--mer-spacing--md); --field-group__row-gap: var(--mer-spacing--md); --field-group__column-gap: var(--mer-spacing--lg); --field__row-gap: var(--mer-spacing--xs); --field__column-gap: var(--mer-spacing--md); --field-inline-label__margin-block-start: 6px; --mer-accent__primary: var(--mer-color__primary--200); --mer-accent__primary--hover: var(--mer-color__primary--400); --mer-accent__primary--active: var(--mer-color__primary--600); --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); --mer-accent__primary--destructive: var(--mer-color__message-red--600); --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); --mer-accent__primary--destructive-active: var( --mer-color__message-red--1000 ); --accent-success-lighter: var(--color-green-300); --accent-success-light: var(--color-green-500); --accent-success-enabled: var(--color-green-600); --accent-success-hover: var(--color-green-800); --accent-success-active: var(--color-green-1000); --mer-border-color__primary: var(--mer-accent__primary); --mer-border-color__primary--hover: var(--mer-accent__primary--hover); --mer-border-color__primary--active: var(--mer-accent__primary--active); --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); --mer-border-color__dim: var(--mer-color__neutral-gray--550); --mer-border-color__error: var(--mer-color__message-red--600); --mer-border-color__error--hover: var( --mer-accent__primary--destructive-hover ); --mer-border-color__error--active: var( --mer-accent__primary--destructive-active ); --mer-border-color__warning: var(--mer-color__message-yellow--100); --mer-border-color__success: var(--mer-color__message-green--100); --mer-border-color__neutral: var(--mer-color__neutral-gray--400); --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); --mer-heading__gray--light: var(--mer-color__neutral-gray--200); --mer-header__background-color: var(--mer-color__neutral-gray--700); --mer-icon__on-surface: var(--mer-color__neutral-gray--200); --mer-icon__on-primary: var(--mer-color__neutral-gray--900); --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); --mer-icon__on-message: var(--mer-color__neutral-gray--700); --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); --mer-icon__primary: var(--mer-accent__primary); --mer-icon__primary--hover: var(--mer-accent__primary--hover); --mer-icon__primary--active: var(--mer-accent__primary--active); --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); --mer-icon__error: var(--mer-color__message-red--600); --mer-icon__warning: var(--mer-color__message-yellow--100); --mer-icon__success: var(--mer-color__message-green--100); --mer-icon__neutral: var(--mer-color__neutral-gray--300); --mer-icon__highlighted: var(--mer-color__neutral-gray--100); --mer-icon__bright: var(--mer-color__neutral-gray--300); --item__bg-color: var(--item__bg-color--enabled); --item__border-color: var(--item__border-color--enabled); --item__color: var(--item__color--enabled); --item__bg-color--enabled: transparent; --item__border-color--enabled: transparent; --item__color--enabled: var(--mer-text__on-elevation); --item__bg-color--hover: var(--mer-color__tinted-primary--5); --item__border-color--hover: transparent; --item__color--hover: var(--mer-color__neutral-gray--100); --item__bg-color--selected: var(--mer-color__tinted-primary--10); --item__border-color--selected: var(--mer-color__tinted-primary--30); --item__color--selected: var(--mer-color__neutral-gray--100); --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); --item__color--selected-hover: var(--mer-color__neutral-gray--100); --item__bg-color--disabled: transparent; --item__border-color--disabled: transparent; --item__color--disabled: var(--mer-text__primary--disabled); --item__border-width: var(--mer-border__width--sm); --item__border-style: solid; --item__border-radius: var(--mer-border__radius--sm); --item__padding-block: var(--mer-spacing--2xs); --item__padding-inline: var(--mer-spacing--xs); --item__height--regular: var(--mer-spacing--xl); --item__height--large: 36px; --item__gap--regular: var(--mer-spacing--xs); --items-container__border-width: var(--mer-border__width--sm); --items-container__border-style: solid; --items-container__bg-color: var(--mer-surface__elevation--01); --items-container__border-color: var(--mer-border-color__on-surface); --items-container__padding-block: var(--mer-spacing--xs); --items-container__padding-inline: var(--mer-spacing--xs); --items-container__border-radius: var(--mer-border__radius--sm); --items-container__box-shadow: var(--mer-box-shadow--01); --items-container__gap: var(--mer-spacing--2xs); --items-container__gap--small: var(--mer-spacing--2xs); --items-container__max-block-size: 300px; --items-container-separator__block-size: var(--mer-border__width--sm); --items-container-separator__inline-size: 100%; --items-container-separator__bg-color: var(--items-container__border-color); --grid-cell__border-color: var(--mer-border-color__on-elevation--01); --grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color); --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); --grid-cell__padding-block: var(--mer-spacing--xs); --grid-cell__padding-inline: var(--mer-spacing--sm); --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); --tab-caption__color: var(--tab-caption__color--enabled); --tab-caption__border-color: transparent; --tab-caption__border-style: solid; --tab-caption__border-width: var(--mer-border__width--sm); --tab-caption__bg-color--enabled: transparent; --tab-caption__border-color--enabled: transparent; --tab-caption__color--enabled: var(--mer-text__neutral); --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); --tab-caption__bg-color--selected-inline: transparent; --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); --tab-caption__border-color--selected-inline: var(--mer-accent__primary); --tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 ); --tab-caption__color--selected: var(--mer-text__highlighted); --tab-caption__bg-color--disabled: transparent; --tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 ); --tab-caption__color--disabled: var(--mer-text__primary--disabled); --tab-caption__padding-block: var(--mer-spacing--xs); --tab-caption__padding-inline: var(--mer-spacing--sm); --tab-caption__gap: var(--mer-spacing--xs); --mer-surface: var(--mer-color__neutral-gray--900); --mer-color__surface: var( --mer-surface ); --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); --mer-box-shadow--01: 0px 4px 20px 0px #00000040; --mer-text__on-surface: var(--mer-color__neutral-gray--200); --mer-text__on-primary: var(--mer-color__neutral-gray--900); --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); --mer-text__on-disabled: var(--mer-color__neutral-gray--450); --mer-text__on-message: var(--mer-color__neutral-gray--700); --mer-text__on-elevation: var(--mer-color__neutral-gray--300); --mer-text__primary: var(--mer-accent__primary); --mer-text__primary--hover: var(--mer-accent__primary--hover); --mer-text__primary--active: var(--mer-accent__primary--active); --mer-text__primary--disabled: var(--mer-accent__primary--disabled); --mer-text__neutral: var(--mer-color__neutral-gray--300); --mer-text__highlighted: var(--mer-color__neutral-gray--100); --mer-text__success: var(--mer-color__message-green--100); --mer-text__error: var(--mer-color__message-red--600); --mer-text__warning: var(--mer-color__message-yellow--100); --mer-text__complementary: var(--mer-color__neutral-gray--450); --mer-text__bright: var( --mer-color__neutral-gray--100 ); --font-family-header: Inter, Helvetica, Arial, sans-serif; --font-family-body: Inter, Helvetica, Arial, sans-serif; --font-family-code: monospace; --font-size-header-h1: 40px; --font-size-header-h2: 32px; --font-size-header-h3: 28px; --font-size-header-h4: 24px; --font-size-header-h5: 20px; --font-size-header-h6: 18px; --font-size-subtitle-l: 20px; --font-size-subtitle-m: 18px; --font-size-subtitle-s: 16px; --font-size-subtitle-xs: 14px; --font-size-body-xl: 18px; --font-size-body-l: 16px; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-body-xs: 11px; --font-size-tiny-l: 12px; --font-size-tiny-m: 11px; --font-size-tiny-s: 10px; --font-size-tiny-xs: 8px; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-regular: 400; --line-height-tight: 1.2; --line-height-regular: 1.3; --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; --mer-font-family--code: monospace; --mer-font__weight--extra-bold: 800; --mer-font__weight--bold: 700; --mer-font__weight--semi-bold: 600; --mer-font__weight--medium: 500; --mer-font__weight--regular: 400; --mer-font__weight--light: 300; --mer-font__size--4xs: 11px; --mer-font__size--3xs: 12px; --mer-font__size--2xs: 13px; --mer-font__size--xs: 14px; --mer-font__size--sm: 16px; --mer-font__size--md: 20px; --mer-font__size--lg: 24px; --mer-font__size--xl: 36px; --mer-font__size--2xl: 40px; --mer-line-height--tight: 1.3; --mer-line-height--regular: 1.4; --mer-line-height--spaced: 1.5; --mer-spacing--3xs: 2px; --mer-spacing--2xs: 4px; --mer-spacing--xs: 8px; --mer-spacing--sm: 12px; --mer-spacing--md: 16px; --mer-spacing--lg: 24px; --mer-spacing--xl: 32px; --mer-spacing--2xl: 40px; --mer-spacing--3xl: 48px; --mer-spacing--4xl: 64px; --mer-timing--super-fast: 100ms; --mer-timing--fast: 200ms; --mer-timing--regular: 500ms; --mer-timing--slow: 1000ms; }", ":root { --mer-color__gradient-angle: 225deg; --mer-color__gradient-opacity--low: 0.7; --mer-color__gradient-opacity--medium: 0.9; --mer-color__gradient-opacity--high: 1; --mer-color__gradient--01: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--02: linear-gradient( var(--mer-color__gradient-angle), rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--03: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--04: linear-gradient( var(--mer-color__gradient-angle), rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--05: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--06: linear-gradient( var(--mer-color__gradient-angle), rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--07: linear-gradient( var(--mer-color__gradient-angle), rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--08: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--09: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--10: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% ); --mer-color__gradient--11: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--12: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--13: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% ); }", ":root.dark { color-scheme: dark; --mer-color__primary--200: #bfd732; --mer-color__primary--300: #b4cc28; --mer-color__primary--400: #96aa22; --mer-color__primary--600: #697718; --mer-color__neutral-gray--100: #ededed; --mer-color__neutral-gray--200: #dfdfdf; --mer-color__neutral-gray--300: #cdcdcd; --mer-color__neutral-gray--400: #a9a9a9; --mer-color__neutral-gray--450: #8c8c8c; --mer-color__neutral-gray--500: #686868; --mer-color__neutral-gray--550: #575757; --mer-color__neutral-gray--600: #464646; --mer-color__neutral-gray--650: #3b3b3b; --mer-color__neutral-gray--700: #303030; --mer-color__neutral-gray--800: #212121; --mer-color__neutral-gray--900: #171717; --mer-color__neutral-gray--1000: #000000; --mer-color__tinted-yellow--5: #282a2d; --mer-color__tinted-yellow--60: #ad8a53; --mer-color__tinted-red--5: #29252f; --mer-color__tinted-red--60: #aa5962; --mer-color__tinted-green--5: #1c2830; --mer-color__tinted-green--60: #317571; --mer-color__tinted-primary--5: #202118; --mer-color__tinted-primary--8: #242619; --mer-color__tinted-primary--10: #282a1a; --mer-color__tinted-primary--20: #383d1c; --mer-color__tinted-primary--30: #49501f; --mer-color__tinted-primary--50: #6a7624; --mer-color__message-green--100: #b1e1b6; --mer-color__message-green--200: #9ccba1; --mer-color__message-yellow--100: #dfa135; --mer-color__message-yellow--200: #dfa135; --mer-color__message-red--100: #fcf4f4; --mer-color__message-red--200: #f8dfe0; --mer-color__message-red--300: #f4cdcf; --mer-color__message-red--400: #eda4a7; --mer-color__message-red--500: #e98b8f; --mer-color__message-red--600: #e35861; --mer-color__message-red--700: #d54b54; --mer-color__message-red--800: #a63a41; --mer-color__message-red--900: #883035; --mer-color__message-red--1000: #6d272b; --mer-color__chat-message--user: #2e340a; --mer-color__chat-message--error: #2d1012; --mer-color__chat-message--warning: #382606; --mer-color__chat-message--success: #112d29; --mer-color__chat-awaiting-dot-1: #ecd604; --mer-color__chat-awaiting-dot-2: #bfd732; --mer-color__chat-awaiting-dot-3: #65f4c7; --mer-color__chat-avatar-circle-from: #ecd604; --mer-color__chat-avatar-circle-to: #65f4c7; --color-green-100: #eef5f4; --color-green-200: #ddebe9; --color-green-300: #cae0dd; --color-green-400: #b4d5d0; --color-green-500: #9cc9c2; --color-green-600: #3fa89b; --color-green-700: #389287; --color-green-800: #318278; --color-green-900: #286a62; --color-green-1000: #1c4b45; }", ":root.light { color-scheme: light; --mer-color__primary--200: #005ac1; --mer-color__primary--300: #5498e8; --mer-color__primary--400: #437dc0; --mer-color__primary--600: #335884; --mer-color__neutral-gray--100: #4a5870; --mer-color__neutral-gray--200: #49566d; --mer-color__neutral-gray--300: #56677a; --mer-color__neutral-gray--400: #56677a; --mer-color__neutral-gray--450: #56677a; --mer-color__neutral-gray--500: #828b96; --mer-color__neutral-gray--550: #9da9b6; --mer-color__neutral-gray--600: #aeb9c6; --mer-color__neutral-gray--650: #c6d1dd; --mer-color__neutral-gray--700: #e1ecf9; --mer-color__neutral-gray--800: #fafbfd; --mer-color__neutral-gray--900: #f0f4fa; --mer-color__neutral-gray--1000: #ffffff; --mer-color__tinted-yellow--5: #faf9f6; --mer-color__tinted-yellow--60: #fafbfd; --mer-color__tinted-red--5: #faf5f7; --mer-color__tinted-red--60: #fbb2b7; --mer-color__tinted-green--5: #f2f7f8; --mer-color__tinted-green--60: #94cac4; --mer-color__tinted-primary--5: #f3f6fd; --mer-color__tinted-primary--8: #eff5fd; --mer-color__tinted-primary--10: #ecf3fd; --mer-color__tinted-primary--20: #deebfe; --mer-color__tinted-primary--30: #cfe3fe; --mer-color__tinted-primary--50: #b1d2fe; --mer-color__message-green--100: #208e80; --mer-color__message-green--200: #208e80; --mer-color__message-yellow--100: #dfa135; --mer-color__message-yellow--200: #dfa135; --mer-color__message-red--100: #6d272b; --mer-color__message-red--200: #883035; --mer-color__message-red--300: #a63a41; --mer-color__message-red--400: #d54b54; --mer-color__message-red--500: #e35861; --mer-color__message-red--600: #e98b8f; --mer-color__message-red--700: #eda4a7; --mer-color__message-red--800: #f4cdcf; --mer-color__message-red--900: #f8dfe0; --mer-color__message-red--1000: #fcf4f4; --mer-color__chat-message--user: #deeab0; --mer-color__chat-message--error: #f4cdcf; --mer-color__chat-message--warning: #fffbf6; --mer-color__chat-message--success: #cae0dd; --mer-color__chat-awaiting-dot-1: #ecd604; --mer-color__chat-awaiting-dot-2: #bfd732; --mer-color__chat-awaiting-dot-3: #65f4c7; --mer-color__chat-avatar-circle-from: #ecd604; --mer-color__chat-avatar-circle-to: #65f4c7; }", @@ -77,4 +77,4 @@ "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}", "body { display: grid; grid-template-rows: 1fr; min-block-size: 100dvh; margin: 0px; background-color: var(--mer-surface); color: var(--mer-text__on-surface); font-family: var(--font-family-body); font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }", "input, select, textarea { padding: 0px; margin: 0px; background-color: unset; border: unset; color: unset; font: unset; outline: unset; }" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/base/base.json b/packages/mercury/src/tests/bundles/expected-bundle-content/base/base.json index 58e3e53b0..f8b23714e 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/base/base.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/base/base.json @@ -1,5 +1,5 @@ [ - ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, \"); --window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); --window__border-radius: var(--mer-border__radius--sm); --window__padding: var(--mer-spacing--xs); --window__bg-color: var(--mer-surface__elevation--01); --window__gap: var(--mer-spacing--xs); --window__box-shadow: var(--mer-box-shadow--01); --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; --focus__outline-color: var(--mer-border-color__primary); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); --control__block-size: 32px; --control__bg-color: var(--control__bg-color--enabled); --control__border-color: var(--control__border-color--enabled); --control__color: var(--control__color--enabled); --control__bg-color--enabled: transparent; --control__border-color--enabled: var(--mer-color__neutral-gray--500); --control__color--enabled: var(--mer-text__neutral); --control__border-color--hover: var(--mer-border-color__neutral--hover); --control__background-color--disabled: var(--mer-accent__primary--disabled); --control__border-color--disabled: var(--control__background-color--disabled); --control__color--disabled: var(--mer-text__on-disabled); --control__border-color--error: var(--mer-border-color__error); --control__border-width: var(--mer-border__width--sm); --control__border-style: solid; --control__border-radius: var(--mer-border__radius--sm); --control__padding-block: calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--font-size-body-m) * var(--line-height-tight) ) / 2 ); --control__padding-inline: var(--mer-spacing--xs); --control__icon-gap: var(--mer-spacing--xs); --control-placeholder__color: var(--mer-color__neutral-gray--400); --control-placeholder__color--disabled: var( --mer-form-input__color--disabled ); --control-placeholder__font-style: italic; --control-tiny__size: var(--mer-spacing--md); --control-tiny__border-width: 1.2px; --control-tiny__border-style: solid; --control-tiny__border-radius-sm: 1px; --control-tiny__border-radius-rounded: 50%; --control-tiny-option__color: var(--control__border-color); --label__border-width: 1.2px; --label__border-style: solid; --label__border-radius: var(--mer-border__radius--2xs); --label__gap--inline: var(--mer-spacing--xs); --label__gap--block: var(--mer-spacing--xs); --label__color: var(--label__color--enabled); --label__color--enabled: var(--mer-text__neutral); --label__color--hover: var(--mer-text__highlighted); --label__color--disabled: var(--mer-text__primary--disabled); --label__color--error: var(--mer-text__neutral); --controls__container-row-gap: var(--mer-spacing--md); --controls__group-gap--block: var(--mer-spacing--sm); --controls__group-gap--inline: var(--mer-spacing--md); --field-group__row-gap: var(--mer-spacing--md); --field-group__column-gap: var(--mer-spacing--lg); --field__row-gap: var(--mer-spacing--xs); --field__column-gap: var(--mer-spacing--md); --field-inline-label__margin-block-start: 6px; --mer-accent__primary: var(--mer-color__primary--200); --mer-accent__primary--hover: var(--mer-color__primary--400); --mer-accent__primary--active: var(--mer-color__primary--600); --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); --mer-accent__primary--destructive: var(--mer-color__message-red--600); --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); --mer-accent__primary--destructive-active: var( --mer-color__message-red--1000 ); --accent-success-lighter: var(--color-green-300); --accent-success-light: var(--color-green-500); --accent-success-enabled: var(--color-green-600); --accent-success-hover: var(--color-green-800); --accent-success-active: var(--color-green-1000); --mer-border-color__primary: var(--mer-accent__primary); --mer-border-color__primary--hover: var(--mer-accent__primary--hover); --mer-border-color__primary--active: var(--mer-accent__primary--active); --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); --mer-border-color__dim: var(--mer-color__neutral-gray--550); --mer-border-color__error: var(--mer-color__message-red--600); --mer-border-color__error--hover: var( --mer-accent__primary--destructive-hover ); --mer-border-color__error--active: var( --mer-accent__primary--destructive-active ); --mer-border-color__warning: var(--mer-color__message-yellow--100); --mer-border-color__success: var(--mer-color__message-green--100); --mer-border-color__neutral: var(--mer-color__neutral-gray--400); --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); --mer-heading__gray--light: var(--mer-color__neutral-gray--200); --mer-header__background-color: var(--mer-color__neutral-gray--700); --mer-icon__on-surface: var(--mer-color__neutral-gray--200); --mer-icon__on-primary: var(--mer-color__neutral-gray--900); --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); --mer-icon__on-message: var(--mer-color__neutral-gray--700); --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); --mer-icon__primary: var(--mer-accent__primary); --mer-icon__primary--hover: var(--mer-accent__primary--hover); --mer-icon__primary--active: var(--mer-accent__primary--active); --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); --mer-icon__error: var(--mer-color__message-red--600); --mer-icon__warning: var(--mer-color__message-yellow--100); --mer-icon__success: var(--mer-color__message-green--100); --mer-icon__neutral: var(--mer-color__neutral-gray--300); --mer-icon__highlighted: var(--mer-color__neutral-gray--100); --mer-icon__bright: var(--mer-color__neutral-gray--300); --item__bg-color: var(--item__bg-color--enabled); --item__border-color: var(--item__border-color--enabled); --item__color: var(--item__color--enabled); --item__bg-color--enabled: transparent; --item__border-color--enabled: transparent; --item__color--enabled: var(--mer-text__on-elevation); --item__bg-color--hover: var(--mer-color__tinted-primary--5); --item__border-color--hover: transparent; --item__color--hover: var(--mer-color__neutral-gray--100); --item__bg-color--selected: var(--mer-color__tinted-primary--10); --item__border-color--selected: var(--mer-color__tinted-primary--30); --item__color--selected: var(--mer-color__neutral-gray--100); --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); --item__color--selected-hover: var(--mer-color__neutral-gray--100); --item__bg-color--disabled: transparent; --item__border-color--disabled: transparent; --item__color--disabled: var(--mer-text__primary--disabled); --item__border-width: var(--mer-border__width--sm); --item__border-style: solid; --item__border-radius: var(--mer-border__radius--sm); --item__padding-block: var(--mer-spacing--2xs); --item__padding-inline: var(--mer-spacing--xs); --item__height--regular: var(--mer-spacing--xl); --item__height--large: 36px; --item__gap--regular: var(--mer-spacing--xs); --items-container__border-width: var(--mer-border__width--sm); --items-container__border-style: solid; --items-container__bg-color: var(--mer-surface__elevation--01); --items-container__border-color: var(--mer-border-color__on-surface); --items-container__padding-block: var(--mer-spacing--xs); --items-container__padding-inline: var(--mer-spacing--xs); --items-container__border-radius: var(--mer-border__radius--sm); --items-container__box-shadow: var(--mer-box-shadow--01); --items-container__gap: var(--mer-spacing--2xs); --items-container__gap--small: var(--mer-spacing--2xs); --items-container__max-block-size: 300px; --items-container-separator__block-size: var(--mer-border__width--sm); --items-container-separator__inline-size: 100%; --items-container-separator__bg-color: var(--items-container__border-color); --grid-cell__border-color: var(--mer-border-color__on-elevation--01); --grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color); --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); --grid-cell__padding-block: var(--mer-spacing--xs); --grid-cell__padding-inline: var(--mer-spacing--sm); --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); --tab-caption__color: var(--tab-caption__color--enabled); --tab-caption__border-color: transparent; --tab-caption__border-style: solid; --tab-caption__border-width: var(--mer-border__width--sm); --tab-caption__bg-color--enabled: transparent; --tab-caption__border-color--enabled: transparent; --tab-caption__color--enabled: var(--mer-text__neutral); --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); --tab-caption__bg-color--selected-inline: transparent; --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); --tab-caption__border-color--selected-inline: var(--mer-accent__primary); --tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 ); --tab-caption__color--selected: var(--mer-text__highlighted); --tab-caption__bg-color--disabled: transparent; --tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 ); --tab-caption__color--disabled: var(--mer-text__primary--disabled); --tab-caption__padding-block: var(--mer-spacing--xs); --tab-caption__padding-inline: var(--mer-spacing--sm); --tab-caption__gap: var(--mer-spacing--xs); --mer-surface: var(--mer-color__neutral-gray--900); --mer-color__surface: var( --mer-surface ); --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); --mer-box-shadow--01: 0px 4px 20px 0px #00000040; --mer-text__on-surface: var(--mer-color__neutral-gray--200); --mer-text__on-primary: var(--mer-color__neutral-gray--900); --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); --mer-text__on-disabled: var(--mer-color__neutral-gray--450); --mer-text__on-message: var(--mer-color__neutral-gray--700); --mer-text__on-elevation: var(--mer-color__neutral-gray--300); --mer-text__primary: var(--mer-accent__primary); --mer-text__primary--hover: var(--mer-accent__primary--hover); --mer-text__primary--active: var(--mer-accent__primary--active); --mer-text__primary--disabled: var(--mer-accent__primary--disabled); --mer-text__neutral: var(--mer-color__neutral-gray--300); --mer-text__highlighted: var(--mer-color__neutral-gray--100); --mer-text__success: var(--mer-color__message-green--100); --mer-text__error: var(--mer-color__message-red--600); --mer-text__warning: var(--mer-color__message-yellow--100); --mer-text__complementary: var(--mer-color__neutral-gray--450); --mer-text__bright: var( --mer-color__neutral-gray--100 ); --font-family-header: Inter, Helvetica, Arial, sans-serif; --font-family-body: Inter, Helvetica, Arial, sans-serif; --font-family-code: monospace; --font-size-header-h1: 40px; --font-size-header-h2: 32px; --font-size-header-h3: 28px; --font-size-header-h4: 24px; --font-size-header-h5: 20px; --font-size-header-h6: 18px; --font-size-subtitle-l: 20px; --font-size-subtitle-m: 18px; --font-size-subtitle-s: 16px; --font-size-subtitle-xs: 14px; --font-size-body-xl: 18px; --font-size-body-l: 16px; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-body-xs: 11px; --font-size-tiny-l: 12px; --font-size-tiny-m: 11px; --font-size-tiny-s: 10px; --font-size-tiny-xs: 8px; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-regular: 400; --line-height-tight: 1.2; --line-height-regular: 1.3; --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; --mer-font-family--code: monospace; --mer-font__weight--extra-bold: 800; --mer-font__weight--bold: 700; --mer-font__weight--semi-bold: 600; --mer-font__weight--medium: 500; --mer-font__weight--regular: 400; --mer-font__weight--light: 300; --mer-font__size--4xs: 11px; --mer-font__size--3xs: 12px; --mer-font__size--2xs: 13px; --mer-font__size--xs: 14px; --mer-font__size--sm: 16px; --mer-font__size--md: 20px; --mer-font__size--lg: 24px; --mer-font__size--xl: 36px; --mer-font__size--2xl: 40px; --mer-line-height--tight: 1.3; --mer-line-height--regular: 1.4; --mer-line-height--spaced: 1.5; --mer-spacing--3xs: 2px; --mer-spacing--2xs: 4px; --mer-spacing--xs: 8px; --mer-spacing--sm: 12px; --mer-spacing--md: 16px; --mer-spacing--lg: 24px; --mer-spacing--xl: 32px; --mer-spacing--2xl: 40px; --mer-spacing--3xl: 48px; --mer-spacing--4xl: 64px; --mer-timing--super-fast: 100ms; --mer-timing--fast: 200ms; --mer-timing--regular: 500ms; --mer-timing--slow: 1000ms; }", + ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, \"); --window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); --window__border-radius: var(--mer-border__radius--sm); --window__padding: var(--mer-spacing--xs); --window__bg-color: var(--mer-surface__elevation--01); --window__gap: var(--mer-spacing--xs); --window__box-shadow: var(--mer-box-shadow--01); --focus__outline-width: var(--mer-border__width--sm); --focus__outline-style: solid; --focus__outline-color: var(--mer-border-color__primary--focused); --focus__outline-offset: calc(var(--mer-system__border-width) * -1); --borders-un-border-color__focused: var(--focus__outline-color); --control__block-size: 32px; --control__bg-color: var(--control__bg-color--enabled); --control__border-color: var(--control__border-color--enabled); --control__color: var(--control__color--enabled); --control__bg-color--enabled: transparent; --control__border-color--enabled: var(--mer-color__neutral-gray--500); --control__color--enabled: var(--mer-text__neutral); --control__border-color--hover: var(--mer-border-color__neutral--hover); --control__background-color--disabled: var(--mer-accent__primary--disabled); --control__border-color--disabled: var(--control__background-color--disabled); --control__color--disabled: var(--mer-text__on-disabled); --control__border-color--error: var(--mer-border-color__error); --control__border-width: var(--mer-border__width--sm); --control__border-style: solid; --control__border-radius: var(--mer-border__radius--sm); --control__padding-block: calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--font-size-body-m) * var(--line-height-tight) ) / 2 ); --control__padding-inline: var(--mer-spacing--xs); --control__icon-gap: var(--mer-spacing--xs); --control-placeholder__color: var(--mer-color__neutral-gray--400); --control-placeholder__color--disabled: var( --mer-form-input__color--disabled ); --control-placeholder__font-style: italic; --control-tiny__size: var(--mer-spacing--md); --control-tiny__border-width: 1.2px; --control-tiny__border-style: solid; --control-tiny__border-radius-sm: 1px; --control-tiny__border-radius-rounded: 50%; --control-tiny-option__color: var(--control__border-color); --label__border-width: 1.2px; --label__border-style: solid; --label__border-radius: var(--mer-border__radius--2xs); --label__gap--inline: var(--mer-spacing--xs); --label__gap--block: var(--mer-spacing--xs); --label__color: var(--label__color--enabled); --label__color--enabled: var(--mer-text__neutral); --label__color--hover: var(--mer-text__highlighted); --label__color--disabled: var(--mer-text__primary--disabled); --label__color--error: var(--mer-text__neutral); --controls__container-row-gap: var(--mer-spacing--md); --controls__group-gap--block: var(--mer-spacing--sm); --controls__group-gap--inline: var(--mer-spacing--md); --field-group__row-gap: var(--mer-spacing--md); --field-group__column-gap: var(--mer-spacing--lg); --field__row-gap: var(--mer-spacing--xs); --field__column-gap: var(--mer-spacing--md); --field-inline-label__margin-block-start: 6px; --mer-accent__primary: var(--mer-color__primary--200); --mer-accent__primary--hover: var(--mer-color__primary--400); --mer-accent__primary--active: var(--mer-color__primary--600); --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); --mer-accent__primary--destructive: var(--mer-color__message-red--600); --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); --mer-accent__primary--destructive-active: var( --mer-color__message-red--1000 ); --accent-success-lighter: var(--color-green-300); --accent-success-light: var(--color-green-500); --accent-success-enabled: var(--color-green-600); --accent-success-hover: var(--color-green-800); --accent-success-active: var(--color-green-1000); --mer-border-color__primary: var(--mer-accent__primary); --mer-border-color__primary--hover: var(--mer-accent__primary--hover); --mer-border-color__primary--active: var(--mer-accent__primary--active); --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); --mer-border-color__dim: var(--mer-color__neutral-gray--550); --mer-border-color__error: var(--mer-color__message-red--600); --mer-border-color__error--hover: var( --mer-accent__primary--destructive-hover ); --mer-border-color__error--active: var( --mer-accent__primary--destructive-active ); --mer-border-color__warning: var(--mer-color__message-yellow--100); --mer-border-color__success: var(--mer-color__message-green--100); --mer-border-color__neutral: var(--mer-color__neutral-gray--400); --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); --mer-heading__gray--light: var(--mer-color__neutral-gray--200); --mer-header__background-color: var(--mer-color__neutral-gray--700); --mer-icon__on-surface: var(--mer-color__neutral-gray--200); --mer-icon__on-primary: var(--mer-color__neutral-gray--900); --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); --mer-icon__on-message: var(--mer-color__neutral-gray--700); --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); --mer-icon__primary: var(--mer-accent__primary); --mer-icon__primary--hover: var(--mer-accent__primary--hover); --mer-icon__primary--active: var(--mer-accent__primary--active); --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); --mer-icon__error: var(--mer-color__message-red--600); --mer-icon__warning: var(--mer-color__message-yellow--100); --mer-icon__success: var(--mer-color__message-green--100); --mer-icon__neutral: var(--mer-color__neutral-gray--300); --mer-icon__highlighted: var(--mer-color__neutral-gray--100); --mer-icon__bright: var(--mer-color__neutral-gray--300); --item__bg-color: var(--item__bg-color--enabled); --item__border-color: var(--item__border-color--enabled); --item__color: var(--item__color--enabled); --item__bg-color--enabled: transparent; --item__border-color--enabled: transparent; --item__color--enabled: var(--mer-text__on-elevation); --item__bg-color--hover: var(--mer-color__tinted-primary--5); --item__border-color--hover: transparent; --item__color--hover: var(--mer-color__neutral-gray--100); --item__bg-color--selected: var(--mer-color__tinted-primary--10); --item__border-color--selected: var(--mer-color__tinted-primary--30); --item__color--selected: var(--mer-color__neutral-gray--100); --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); --item__color--selected-hover: var(--mer-color__neutral-gray--100); --item__bg-color--disabled: transparent; --item__border-color--disabled: transparent; --item__color--disabled: var(--mer-text__primary--disabled); --item__border-width: var(--mer-border__width--sm); --item__border-style: solid; --item__border-radius: var(--mer-border__radius--sm); --item__padding-block: var(--mer-spacing--2xs); --item__padding-inline: var(--mer-spacing--xs); --item__height--regular: var(--mer-spacing--xl); --item__height--large: 36px; --item__gap--regular: var(--mer-spacing--xs); --items-container__border-width: var(--mer-border__width--sm); --items-container__border-style: solid; --items-container__bg-color: var(--mer-surface__elevation--01); --items-container__border-color: var(--mer-border-color__on-surface); --items-container__padding-block: var(--mer-spacing--xs); --items-container__padding-inline: var(--mer-spacing--xs); --items-container__border-radius: var(--mer-border__radius--sm); --items-container__box-shadow: var(--mer-box-shadow--01); --items-container__gap: var(--mer-spacing--2xs); --items-container__gap--small: var(--mer-spacing--2xs); --items-container__max-block-size: 300px; --items-container-separator__block-size: var(--mer-border__width--sm); --items-container-separator__inline-size: 100%; --items-container-separator__bg-color: var(--items-container__border-color); --grid-cell__border-color: var(--mer-border-color__on-elevation--01); --grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color); --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); --grid-cell__padding-block: var(--mer-spacing--xs); --grid-cell__padding-inline: var(--mer-spacing--sm); --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); --tab-caption__color: var(--tab-caption__color--enabled); --tab-caption__border-color: transparent; --tab-caption__border-style: solid; --tab-caption__border-width: var(--mer-border__width--sm); --tab-caption__bg-color--enabled: transparent; --tab-caption__border-color--enabled: transparent; --tab-caption__color--enabled: var(--mer-text__neutral); --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); --tab-caption__bg-color--selected-inline: transparent; --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); --tab-caption__border-color--selected-inline: var(--mer-accent__primary); --tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 ); --tab-caption__color--selected: var(--mer-text__highlighted); --tab-caption__bg-color--disabled: transparent; --tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 ); --tab-caption__color--disabled: var(--mer-text__primary--disabled); --tab-caption__padding-block: var(--mer-spacing--xs); --tab-caption__padding-inline: var(--mer-spacing--sm); --tab-caption__gap: var(--mer-spacing--xs); --mer-surface: var(--mer-color__neutral-gray--900); --mer-color__surface: var( --mer-surface ); --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); --mer-box-shadow--01: 0px 4px 20px 0px #00000040; --mer-text__on-surface: var(--mer-color__neutral-gray--200); --mer-text__on-primary: var(--mer-color__neutral-gray--900); --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); --mer-text__on-disabled: var(--mer-color__neutral-gray--450); --mer-text__on-message: var(--mer-color__neutral-gray--700); --mer-text__on-elevation: var(--mer-color__neutral-gray--300); --mer-text__primary: var(--mer-accent__primary); --mer-text__primary--hover: var(--mer-accent__primary--hover); --mer-text__primary--active: var(--mer-accent__primary--active); --mer-text__primary--disabled: var(--mer-accent__primary--disabled); --mer-text__neutral: var(--mer-color__neutral-gray--300); --mer-text__highlighted: var(--mer-color__neutral-gray--100); --mer-text__success: var(--mer-color__message-green--100); --mer-text__error: var(--mer-color__message-red--600); --mer-text__warning: var(--mer-color__message-yellow--100); --mer-text__complementary: var(--mer-color__neutral-gray--450); --mer-text__bright: var( --mer-color__neutral-gray--100 ); --font-family-header: Inter, Helvetica, Arial, sans-serif; --font-family-body: Inter, Helvetica, Arial, sans-serif; --font-family-code: monospace; --font-size-header-h1: 40px; --font-size-header-h2: 32px; --font-size-header-h3: 28px; --font-size-header-h4: 24px; --font-size-header-h5: 20px; --font-size-header-h6: 18px; --font-size-subtitle-l: 20px; --font-size-subtitle-m: 18px; --font-size-subtitle-s: 16px; --font-size-subtitle-xs: 14px; --font-size-body-xl: 18px; --font-size-body-l: 16px; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-body-xs: 11px; --font-size-tiny-l: 12px; --font-size-tiny-m: 11px; --font-size-tiny-s: 10px; --font-size-tiny-xs: 8px; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-regular: 400; --line-height-tight: 1.2; --line-height-regular: 1.3; --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; --mer-font-family--code: monospace; --mer-font__weight--extra-bold: 800; --mer-font__weight--bold: 700; --mer-font__weight--semi-bold: 600; --mer-font__weight--medium: 500; --mer-font__weight--regular: 400; --mer-font__weight--light: 300; --mer-font__size--4xs: 11px; --mer-font__size--3xs: 12px; --mer-font__size--2xs: 13px; --mer-font__size--xs: 14px; --mer-font__size--sm: 16px; --mer-font__size--md: 20px; --mer-font__size--lg: 24px; --mer-font__size--xl: 36px; --mer-font__size--2xl: 40px; --mer-line-height--tight: 1.3; --mer-line-height--regular: 1.4; --mer-line-height--spaced: 1.5; --mer-spacing--3xs: 2px; --mer-spacing--2xs: 4px; --mer-spacing--xs: 8px; --mer-spacing--sm: 12px; --mer-spacing--md: 16px; --mer-spacing--lg: 24px; --mer-spacing--xl: 32px; --mer-spacing--2xl: 40px; --mer-spacing--3xl: 48px; --mer-spacing--4xl: 64px; --mer-timing--super-fast: 100ms; --mer-timing--fast: 200ms; --mer-timing--regular: 500ms; --mer-timing--slow: 1000ms; }", ":root { --mer-color__gradient-angle: 225deg; --mer-color__gradient-opacity--low: 0.7; --mer-color__gradient-opacity--medium: 0.9; --mer-color__gradient-opacity--high: 1; --mer-color__gradient--01: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--02: linear-gradient( var(--mer-color__gradient-angle), rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--03: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--04: linear-gradient( var(--mer-color__gradient-angle), rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--05: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--06: linear-gradient( var(--mer-color__gradient-angle), rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--07: linear-gradient( var(--mer-color__gradient-angle), rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--08: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--09: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--10: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% ); --mer-color__gradient--11: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% ); --mer-color__gradient--12: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% ); --mer-color__gradient--13: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% ); }", ":root.dark { color-scheme: dark; --mer-color__primary--200: #5ba7ff; --mer-color__primary--300: #5498e8; --mer-color__primary--400: #437dc0; --mer-color__primary--600: #335884; --mer-color__neutral-gray--100: #e1ecf9; --mer-color__neutral-gray--200: #d2ddeb; --mer-color__neutral-gray--300: #c0ccd9; --mer-color__neutral-gray--400: #9da9b6; --mer-color__neutral-gray--450: #828b96; --mer-color__neutral-gray--500: #56677a; --mer-color__neutral-gray--550: #485665; --mer-color__neutral-gray--600: #394552; --mer-color__neutral-gray--650: #2d3a48; --mer-color__neutral-gray--700: #242d3c; --mer-color__neutral-gray--800: #181f2a; --mer-color__neutral-gray--900: #11151c; --mer-color__neutral-gray--1000: #1f2225; --mer-color__tinted-yellow--5: #282a2d; --mer-color__tinted-yellow--60: #ad8a53; --mer-color__tinted-red--5: #29252f; --mer-color__tinted-red--60: #aa5962; --mer-color__tinted-green--5: #1c2830; --mer-color__tinted-green--60: #317571; --mer-color__tinted-primary--5: #1d2838; --mer-color__tinted-primary--8: #1f2c3f; --mer-color__tinted-primary--10: #1f2e43; --mer-color__tinted-primary--20: #293d5c; --mer-color__tinted-primary--30: #2e4e72; --mer-color__tinted-primary--50: #3c689c; --mer-color__message-green--100: #3fa89b; --mer-color__message-green--200: #3fa89b; --mer-color__message-yellow--100: #f9bd56; --mer-color__message-yellow--200: #f9bd56; --mer-color__message-red--100: #fcf4f4; --mer-color__message-red--200: #f8dfe0; --mer-color__message-red--300: #f4cdcf; --mer-color__message-red--400: #eda4a7; --mer-color__message-red--500: #e98b8f; --mer-color__message-red--600: #e35861; --mer-color__message-red--700: #d54b54; --mer-color__message-red--800: #a63a41; --mer-color__message-red--900: #883035; --mer-color__message-red--1000: #6d272b; --mer-color__chat-message--user: #22334a; --mer-color__chat-message--error: #2d1012; --mer-color__chat-message--warning: #382606; --mer-color__chat-message--success: #112d29; --mer-color__chat-awaiting-dot-1: #5ba7ff; --mer-color__chat-awaiting-dot-2: #00ccff; --mer-color__chat-awaiting-dot-3: #cf7aff; --mer-color__chat-avatar-circle-from: #00ccff; --mer-color__chat-avatar-circle-to: #cf7aff; --color-green-100: #eef5f4; --color-green-200: #ddebe9; --color-green-300: #cae0dd; --color-green-400: #b4d5d0; --color-green-500: #9cc9c2; --color-green-600: #3fa89b; --color-green-700: #389287; --color-green-800: #318278; --color-green-900: #286a62; --color-green-1000: #1c4b45; }", ":root.light { color-scheme: light; --mer-color__primary--200: #005ac1; --mer-color__primary--300: #5498e8; --mer-color__primary--400: #437dc0; --mer-color__primary--600: #335884; --mer-color__neutral-gray--100: #4a5870; --mer-color__neutral-gray--200: #49566d; --mer-color__neutral-gray--300: #56677a; --mer-color__neutral-gray--400: #56677a; --mer-color__neutral-gray--450: #56677a; --mer-color__neutral-gray--500: #828b96; --mer-color__neutral-gray--550: #9da9b6; --mer-color__neutral-gray--600: #aeb9c6; --mer-color__neutral-gray--650: #c6d1dd; --mer-color__neutral-gray--700: #e1ecf9; --mer-color__neutral-gray--800: #fafbfd; --mer-color__neutral-gray--900: #f0f4fa; --mer-color__neutral-gray--1000: #ffffff; --mer-color__tinted-yellow--5: #faf9f6; --mer-color__tinted-yellow--60: #fafbfd; --mer-color__tinted-red--5: #faf5f7; --mer-color__tinted-red--60: #fbb2b7; --mer-color__tinted-green--5: #f2f7f8; --mer-color__tinted-green--60: #94cac4; --mer-color__tinted-primary--5: #f3f6fd; --mer-color__tinted-primary--8: #eff5fd; --mer-color__tinted-primary--10: #ecf3fd; --mer-color__tinted-primary--20: #deebfe; --mer-color__tinted-primary--30: #cfe3fe; --mer-color__tinted-primary--50: #b1d2fe; --mer-color__message-green--100: #208e80; --mer-color__message-green--200: #208e80; --mer-color__message-yellow--100: #dfa135; --mer-color__message-yellow--200: #dfa135; --mer-color__message-red--100: #6d272b; --mer-color__message-red--200: #883035; --mer-color__message-red--300: #a63a41; --mer-color__message-red--400: #d54b54; --mer-color__message-red--500: #e35861; --mer-color__message-red--600: #e98b8f; --mer-color__message-red--700: #eda4a7; --mer-color__message-red--800: #f4cdcf; --mer-color__message-red--900: #f8dfe0; --mer-color__message-red--1000: #fcf4f4; --mer-color__chat-message--user: #b0cfff; --mer-color__chat-message--error: #f4cdcf; --mer-color__chat-message--warning: #fffbf6; --mer-color__chat-message--success: #cae0dd; --mer-color__chat-awaiting-dot-1: #5ba7ff; --mer-color__chat-awaiting-dot-2: #00ccff; --mer-color__chat-awaiting-dot-3: #cf7aff; --mer-color__chat-avatar-circle-from: #00ccff; --mer-color__chat-avatar-circle-to: #cf7aff; --color-green-100: #eef5f4; --color-green-200: #ddebe9; --color-green-300: #cae0dd; --color-green-400: #b4d5d0; --color-green-500: #9cc9c2; --color-green-600: #3fa89b; --color-green-700: #389287; --color-green-800: #318278; --color-green-900: #286a62; --color-green-1000: #1c4b45; }", @@ -77,4 +77,4 @@ "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}", "body { display: grid; grid-template-rows: 1fr; min-block-size: 100dvh; margin: 0px; background-color: var(--mer-surface); color: var(--mer-text__on-surface); font-family: var(--font-family-body); font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }", "input, select, textarea { padding: 0px; margin: 0px; background-color: unset; border: unset; color: unset; font: unset; outline: unset; }" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/dialog.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/dialog.json index f4f5328a7..3b059ca04 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/dialog.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/dialog.json @@ -8,10 +8,19 @@ ".dialog::part(caption) { font-family: var(--font-family-header); }", ".dialog::part(caption) { font-size: var(--font-size-subtitle-xs); line-height: var(--line-height-tight); }", ".dialog::part(caption) { font-weight: var(--font-weight-semi-bold); }", - ".dialog::part(caption) { word-break: break-word; }", - ".dialog::part(close-button) { content: \"\"; display: block; inline-size: var(--mer-icon__box--md); block-size: var(--mer-icon__box--md); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); --icon-path: var(--icon__system_close_primary--enabled); }", - ".dialog::part(close-button):active { --icon-path: var(--icon__system_close_primary--active); }", - ".dialog::part(close-button):hover { --icon-path: var(--icon__system_close_primary--hover); }", + ".dialog::part(caption) { padding: var(--mer-spacing--md) 0; word-break: break-word; }", + ".dialog::part(close-button) { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }", + ".dialog::part(close-button) { --icon-path: var(--icon__system_close_neutral--enabled); }", + ".dialog::part(close-button) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }", + ".dialog::part(close-button) { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }", + ".dialog::part(close-button) { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }", + ".dialog::part(close-button)::before { content: \"\"; display: block; inline-size: var(--mer-icon__box--md); block-size: var(--mer-icon__box--md); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); }", + ".dialog::part(close-button):active { --button-color: var(--mer-text__primary--active); }", + ".dialog::part(close-button):active { --icon-path: var(--icon__system_close_neutral--active); }", + ".dialog::part(close-button):disabled { --button-color: var(--mer-text__on-disabled); }", + ".dialog::part(close-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }", + ".dialog::part(close-button):hover { --button-color: var(--mer-text__primary--hover); }", + ".dialog::part(close-button):hover { --icon-path: var(--icon__system_close_neutral--hover); }", ".dialog::part(content) { overflow: auto; }", ".dialog::part(dialog) { --dialog-border-radius: var(--mer-border__width--lg); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--sm); --spacing-body-inline-end: var(--mer-spacing--sm); border-radius: var(--dialog-border-radius); border: var(--mer-border__width--sm) solid var(--dialog-border-color); background-color: var(--dialog-background-color); box-shadow: var(--mer-box-shadow--01); }", ".dialog::part(edge) { border-color: rgba(0, 0, 0, 0); transition: var(--mer-timing--fast) border-color; }", @@ -22,6 +31,6 @@ ".dialog::part(edge-inline-start) { border-inline-start-width: var(--mer-border__width--lg); border-inline-start-style: solid; }", ".dialog::part(footer) { border-block-start: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01); }", ".dialog::part(footer) { padding-block: var(--mer-spacing--xs); padding-inline: var(--mer-spacing--sm); }", - ".dialog::part(header) { gap: var(--mer-spacing--sm); padding-block: var(--mer-spacing--md); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); }", + ".dialog::part(header) { min-block-size: calc(var(--mer-spacing--md)*2 + var(--font-size-subtitle-xs)*var(--line-height-tight)); gap: var(--mer-spacing--sm); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" ] \ No newline at end of file