diff --git a/packages/documentation/docs/migration/uxt-ix-css.css b/packages/documentation/docs/migration/uxt-ix-css.css new file mode 100644 index 0000000000..406b077dc1 --- /dev/null +++ b/packages/documentation/docs/migration/uxt-ix-css.css @@ -0,0 +1 @@ +.uxt.uxt-defaults.ix .breadcrumb .breadcrumb__item>*,.mdsp.mdsp-defaults.ix .breadcrumb .breadcrumb__item>*{font-weight:bold}.uxt.uxt-defaults.ix .breadcrumb .breadcrumb__item:not(:last-child)::after,.mdsp.mdsp-defaults.ix .breadcrumb .breadcrumb__item:not(:last-child)::after{color:rgba(var(--color-font), 0.6);font-size:16px}.uxt.uxt-defaults.ix .breadcrumb.breadcrumb--centered,.mdsp.mdsp-defaults.ix .breadcrumb.breadcrumb--centered{gap:4px}.uxt.uxt-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child)::before,.mdsp.mdsp-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child)::before{color:rgba(var(--color-font), 0.6);font-size:16px}.uxt.uxt-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child):after,.mdsp.mdsp-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child):after{content:""}.uxt.uxt-defaults.ix .buttonSplitWrapper .buttonSplit,.mdsp.mdsp-defaults.ix .buttonSplitWrapper .buttonSplit{background-color:rgba(var(--color-base950), 1);box-shadow:0 4px 10px 0px rgba(var(--color-base000), 0.2)}.uxt.uxt-defaults.ix .buttonSplitWrapper .buttonSplit .button--split,.mdsp.mdsp-defaults.ix .buttonSplitWrapper .buttonSplit .button--split{color:rgba(var(--color-font), 1);font-weight:normal;background-color:unset}.uxt.uxt-defaults.ix .buttonSplitWrapper .buttonSplit .button--split:hover,.mdsp.mdsp-defaults.ix .buttonSplitWrapper .buttonSplit .button--split:hover{background-color:rgba(var(--color-base800), 1)}.uxt.uxt-defaults.ix .buttonGroup .button--secondary:hover,.mdsp.mdsp-defaults.ix .buttonGroup .button--secondary:hover{border-color:rgba(var(--color-button-secondary-border-hover));color:rgba(var(--color-button-secondary-color-hover), 1);background-color:rgb(var(--color-button-secondary-background-hover))}.uxt.uxt-defaults.ix .buttonGroup .button--secondary:active,.mdsp.mdsp-defaults.ix .buttonGroup .button--secondary:active{background-color:rgb(var(--color-button-secondary-background-active))}.uxt.uxt-defaults.ix .buttonGroup .button:first-child,.mdsp.mdsp-defaults.ix .buttonGroup .button:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.uxt.uxt-defaults.ix .buttonGroup .button:last-child,.mdsp.mdsp-defaults.ix .buttonGroup .button:last-child{border-bottom-right-radius:0;border-top-right-radius:0}.uxt.uxt-defaults.ix a.button,.uxt.uxt-defaults.ix .button,.mdsp.mdsp-defaults.ix a.button,.mdsp.mdsp-defaults.ix .button{border-radius:0;font-weight:bold}.uxt.uxt-defaults.ix a.button--primary[type=submit]:hover,.uxt.uxt-defaults.ix a.button--primary:hover,.uxt.uxt-defaults.ix .button--primary[type=submit]:hover,.uxt.uxt-defaults.ix .button--primary:hover,.mdsp.mdsp-defaults.ix a.button--primary[type=submit]:hover,.mdsp.mdsp-defaults.ix a.button--primary:hover,.mdsp.mdsp-defaults.ix .button--primary[type=submit]:hover,.mdsp.mdsp-defaults.ix .button--primary:hover{background-color:rgba(var(--color-primary-dark), 1)}.uxt.uxt-defaults.ix a.button--primary[type=submit]:active,.uxt.uxt-defaults.ix a.button--primary:active,.uxt.uxt-defaults.ix .button--primary[type=submit]:active,.uxt.uxt-defaults.ix .button--primary:active,.mdsp.mdsp-defaults.ix a.button--primary[type=submit]:active,.mdsp.mdsp-defaults.ix a.button--primary:active,.mdsp.mdsp-defaults.ix .button--primary[type=submit]:active,.mdsp.mdsp-defaults.ix .button--primary:active{background-color:rgba(var(--color-button-primary-background-active), 1)}.uxt.uxt-defaults.ix a.button--primary[type=submit].is-disabled,.uxt.uxt-defaults.ix a.button--primary.is-disabled,.uxt.uxt-defaults.ix .button--primary[type=submit].is-disabled,.uxt.uxt-defaults.ix .button--primary.is-disabled,.mdsp.mdsp-defaults.ix a.button--primary[type=submit].is-disabled,.mdsp.mdsp-defaults.ix a.button--primary.is-disabled,.mdsp.mdsp-defaults.ix .button--primary[type=submit].is-disabled,.mdsp.mdsp-defaults.ix .button--primary.is-disabled{background-color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button--primary[type=submit].is-disabled:hover,.uxt.uxt-defaults.ix a.button--primary.is-disabled:hover,.uxt.uxt-defaults.ix .button--primary[type=submit].is-disabled:hover,.uxt.uxt-defaults.ix .button--primary.is-disabled:hover,.mdsp.mdsp-defaults.ix a.button--primary[type=submit].is-disabled:hover,.mdsp.mdsp-defaults.ix a.button--primary.is-disabled:hover,.mdsp.mdsp-defaults.ix .button--primary[type=submit].is-disabled:hover,.mdsp.mdsp-defaults.ix .button--primary.is-disabled:hover{background-color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button.button--secondary,.uxt.uxt-defaults.ix .button.button--secondary,.mdsp.mdsp-defaults.ix a.button.button--secondary,.mdsp.mdsp-defaults.ix .button.button--secondary{background-color:rgba(var(--color-button-secondary-background), 1);border-color:rgba(var(--color-primary), 1)}.uxt.uxt-defaults.ix a.button.button--secondary:hover,.uxt.uxt-defaults.ix .button.button--secondary:hover,.mdsp.mdsp-defaults.ix a.button.button--secondary:hover,.mdsp.mdsp-defaults.ix .button.button--secondary:hover{border-color:rgba(var(--color-button-secondary-border-hover));color:rgba(var(--color-button-secondary-color-hover), 1);background-color:rgb(var(--color-button-secondary-background-hover))}.uxt.uxt-defaults.ix a.button.button--secondary:active,.uxt.uxt-defaults.ix .button.button--secondary:active,.mdsp.mdsp-defaults.ix a.button.button--secondary:active,.mdsp.mdsp-defaults.ix .button.button--secondary:active{background-color:rgb(var(--color-button-secondary-background-active))}.uxt.uxt-defaults.ix a.button.button--secondary.is-disabled,.uxt.uxt-defaults.ix .button.button--secondary.is-disabled,.mdsp.mdsp-defaults.ix a.button.button--secondary.is-disabled,.mdsp.mdsp-defaults.ix .button.button--secondary.is-disabled{border-color:rgba(var(--color-button-primary-background-disabled));color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button.button--secondary.is-disabled:hover,.uxt.uxt-defaults.ix .button.button--secondary.is-disabled:hover,.mdsp.mdsp-defaults.ix a.button.button--secondary.is-disabled:hover,.mdsp.mdsp-defaults.ix .button.button--secondary.is-disabled:hover{border-color:rgba(var(--color-button-primary-background-disabled));color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button.button--secondary.is-dangerButton:hover,.uxt.uxt-defaults.ix .button.button--secondary.is-dangerButton:hover,.mdsp.mdsp-defaults.ix a.button.button--secondary.is-dangerButton:hover,.mdsp.mdsp-defaults.ix .button.button--secondary.is-dangerButton:hover{border-color:rgba(var(--color-dangerPrimary), 1);color:rgba(var(--color-font-contrast), 1)}.uxt.uxt-defaults.ix a.button--ghost.is-disabled,.uxt.uxt-defaults.ix .button--ghost.is-disabled,.mdsp.mdsp-defaults.ix a.button--ghost.is-disabled,.mdsp.mdsp-defaults.ix .button--ghost.is-disabled{color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button--ghost.is-dangerButton:hover,.uxt.uxt-defaults.ix .button--ghost.is-dangerButton:hover,.mdsp.mdsp-defaults.ix a.button--ghost.is-dangerButton:hover,.mdsp.mdsp-defaults.ix .button--ghost.is-dangerButton:hover{border-color:rgba(var(--color-dangerPrimary), 1);color:rgba(var(--color-font-contrast), 1)}.uxt.uxt-defaults.ix a.button--primaryContentAction:not(.is-disabled):hover,.uxt.uxt-defaults.ix .button--primaryContentAction:not(.is-disabled):hover,.mdsp.mdsp-defaults.ix a.button--primaryContentAction:not(.is-disabled):hover,.mdsp.mdsp-defaults.ix .button--primaryContentAction:not(.is-disabled):hover{color:rgba(var(--color-primary-dark), 1)}.uxt.uxt-defaults.ix a.button--primaryContentAction:not(.is-disabled):active,.uxt.uxt-defaults.ix .button--primaryContentAction:not(.is-disabled):active,.mdsp.mdsp-defaults.ix a.button--primaryContentAction:not(.is-disabled):active,.mdsp.mdsp-defaults.ix .button--primaryContentAction:not(.is-disabled):active{color:rgba(var(--color-button-primary-background-active), 1)}.uxt.uxt-defaults.ix .card,.mdsp.mdsp-defaults.ix .card{background-color:rgba(0,0,0,0);border-color:rgba(var(--color-card-border))}.uxt.uxt-defaults.ix .card:hover,.mdsp.mdsp-defaults.ix .card:hover{background-color:rgba(var(--color-card-background-hover))}.uxt.uxt-defaults.ix .card:hover::after,.mdsp.mdsp-defaults.ix .card:hover::after{display:none}.uxt.uxt-defaults.ix .card:active,.mdsp.mdsp-defaults.ix .card:active{background-color:rgba(var(--color-card-background-active))}.uxt.uxt-defaults.ix .card .card__title>a,.mdsp.mdsp-defaults.ix .card .card__title>a{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .card .card__header .card__title a:focus:before,.mdsp.mdsp-defaults.ix .card .card__header .card__title a:focus:before{outline:unset}.uxt.uxt-defaults.ix .card::after,.mdsp.mdsp-defaults.ix .card::after{display:none}.uxt.uxt-defaults.ix .card--filled,.mdsp.mdsp-defaults.ix .card--filled{background-color:rgba(var(--color-card-list-background));border:unset;border-radius:4px}.uxt.uxt-defaults.ix .card--filled:hover,.mdsp.mdsp-defaults.ix .card--filled:hover{background-color:rgba(var(--color-card-list-background-hover))}.uxt.uxt-defaults.ix .card--filled:active,.mdsp.mdsp-defaults.ix .card--filled:active{background-color:rgba(var(--color-card-list-background-active))}.uxt.uxt-defaults.ix .card--filled::after,.mdsp.mdsp-defaults.ix .card--filled::after{display:none}.uxt.uxt-defaults.ix .card--filled .card__header .card__title a:focus:before,.mdsp.mdsp-defaults.ix .card--filled .card__header .card__title a:focus:before{outline:unset}.uxt.uxt-defaults.ix .dialog__title .dialog__close,.uxt.uxt-defaults.ix .dialog__title .dialog__close:visited,.mdsp.mdsp-defaults.ix .dialog__title .dialog__close,.mdsp.mdsp-defaults.ix .dialog__title .dialog__close:visited{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .container,.uxt.uxt-defaults.ix .fieldset,.uxt.uxt-defaults.ix fieldset,.uxt.uxt-defaults.ix .list .list__item,.mdsp.mdsp-defaults.ix .container,.mdsp.mdsp-defaults.ix .fieldset,.mdsp.mdsp-defaults.ix fieldset,.mdsp.mdsp-defaults.ix .list .list__item{border-color:rgba(var(--color-card-border))}.uxt.uxt-defaults.ix .emptyState::before,.uxt.uxt-defaults.ix .emptyState::after,.mdsp.mdsp-defaults.ix .emptyState::before,.mdsp.mdsp-defaults.ix .emptyState::after{background-image:none}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-page.p-highlight,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-page.p-highlight{background-color:rgba(var(--color-pagination-highlight));color:rgb(var(--color-primary-darker))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-page.p-highlight:hover,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-page.p-highlight:hover{background-color:rgba(var(--color-pagination-highlight-hover))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element{border-radius:unset}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element:hover:not(.p-disabled),.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element:hover:not(.p-disabled){background-color:rgba(var(--color-primary-lightest))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element:active:not(.p-disabled),.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element:active:not(.p-disabled){background-color:rgba(var(--color-pagination-active))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element.p-highlight:active,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element.p-highlight:active{background-color:rgba(var(--color-pagination-highlight-active))}.uxt.uxt-defaults.ix .inputGroup__label,.uxt.uxt-defaults.ix .inputGroup__label.is-required:after,.mdsp.mdsp-defaults.ix .inputGroup__label,.mdsp.mdsp-defaults.ix .inputGroup__label.is-required:after{color:rgba(var(--color-font-secondary), 1);font-weight:normal}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).inputGroup__checkbox--indeterminate+label:after,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).inputGroup__checkbox--indeterminate+label:after{left:5px;top:8px}.uxt.uxt-defaults.ix .inputGroup .inputGroup__radioButton.inputGroup__radioButton--indeterminate+label:after,.mdsp.mdsp-defaults.ix .inputGroup .inputGroup__radioButton.inputGroup__radioButton--indeterminate+label:after{left:7px;top:9px}.uxt.uxt-defaults.ix .inputGroup input[type=text],.uxt.uxt-defaults.ix .inputGroup__textarea,.uxt.uxt-defaults.ix .inputGroup__textInput,.mdsp.mdsp-defaults.ix .inputGroup input[type=text],.mdsp.mdsp-defaults.ix .inputGroup__textarea,.mdsp.mdsp-defaults.ix .inputGroup__textInput{background-color:rgba(var(--color-input-background), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=text]:hover,.uxt.uxt-defaults.ix .inputGroup__textarea:hover,.uxt.uxt-defaults.ix .inputGroup__textInput:hover,.mdsp.mdsp-defaults.ix .inputGroup input[type=text]:hover,.mdsp.mdsp-defaults.ix .inputGroup__textarea:hover,.mdsp.mdsp-defaults.ix .inputGroup__textInput:hover{background-color:rgba(var(--color-input-background-hover), 1);border-color:rgb(var(--color-input-border-hover), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=text]:focus,.uxt.uxt-defaults.ix .inputGroup__textarea:focus,.uxt.uxt-defaults.ix .inputGroup__textInput:focus,.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):focus+label:before,.uxt.uxt-defaults.ix .inputGroup input[type=radio]:focus+label::before,.uxt.uxt-defaults.ix .inputGroup select:focus,.mdsp.mdsp-defaults.ix .inputGroup input[type=text]:focus,.mdsp.mdsp-defaults.ix .inputGroup__textarea:focus,.mdsp.mdsp-defaults.ix .inputGroup__textInput:focus,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):focus+label:before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:focus+label::before,.mdsp.mdsp-defaults.ix .inputGroup select:focus{outline:1px solid rgb(var(--color-focus-border), 1);outline-offset:1.75px;box-shadow:none}.uxt.uxt-defaults.ix .inputGroup .checkboxWrapper.checkboxWrapper--alternative .inputGroup__checkbox:checked+label:after,.mdsp.mdsp-defaults.ix .inputGroup .checkboxWrapper.checkboxWrapper--alternative .inputGroup__checkbox:checked+label:after{left:2px !important;top:5px !important}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before{border-color:rgba(var(--color-base000), 1);border-radius:0;height:16px;width:16px}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):hover+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):hover+label::before{background-color:rgba(var(--color-secondary-hover), 1);border-color:rgba(var(--color-dynamic), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):active+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):active+label::before{background-color:rgba(var(--color-secondary-active));border-color:rgba(var(--color-dynamic))}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before{background-color:rgba(var(--color-dynamic), 1);border-color:rgba(0,0,0,0)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::after,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::after{content:"";transform:translate(-1px, -3px) rotate(-53deg) scale(2) skew(-8deg, -3deg);border-width:0 0 .0625rem .0625rem;left:-19px;top:8px;height:3px;width:5px}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label:hover::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label:hover::before{background-color:rgba(var(--color-primary-dark), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:hover:not(.is-disabled)+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:hover:not(.is-disabled)+label::before{background-color:rgba(var(--color-dynamic-hover), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:active:not(.is-disabled)+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:active:not(.is-disabled)+label::before{background-color:rgba(var(--color-dynamic-active), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=radio]+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]+label::before{border-color:rgb(var(--color-font));box-sizing:border-box;height:20px;width:20px}.uxt.uxt-defaults.ix .inputGroup input[type=radio]:checked+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:checked+label::before{box-shadow:none;border-color:rgb(var(--color-font));outline:6px solid rgba(var(--color-dynamic), 1);outline-offset:-6px}.uxt.uxt-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):hover+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):hover+label::before{background-color:rgba(var(--color-secondary-hover), 1);border-color:rgba(var(--color-dynamic), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):active+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):active+label::before{background-color:rgba(var(--color-secondary-active));border-color:rgba(var(--color-dynamic))}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).is-disabled+label::before,.uxt.uxt-defaults.ix .inputGroup input[type=radio].is-disabled+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).is-disabled+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio].is-disabled+label::before{border-color:var(--theme-color-component-4)}.uxt.uxt-defaults.ix .h1,.uxt.uxt-defaults.ix h1,.mdsp.mdsp-defaults.ix .h1,.mdsp.mdsp-defaults.ix h1{font-size:1.375rem}.uxt.uxt-defaults.ix .listNavigation .listNavigation__list .list__item .item__link:hover,.mdsp.mdsp-defaults.ix .listNavigation .listNavigation__list .list__item .item__link:hover{background-color:rgba(var(--color-primary-lighter), 0.4)}.uxt.uxt-defaults.ix .popover__container,.mdsp.mdsp-defaults.ix .popover__container{background-color:rgba(var(--color-ix-theme-2), 1)}.uxt.uxt-defaults.ix .menu .popover__container .popover__item:not(.is-disabled),.uxt.uxt-defaults.ix .menu .popover__container .popover__item:visited:not(.is-disabled),.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:not(.is-disabled),.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:visited:not(.is-disabled){color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):hover,.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):hover{background-color:rgba(var(--color-ghost-hover))}.uxt.uxt-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):active,.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):active{background-color:rgba(var(--color-ghost-active))}.uxt.uxt-defaults.ix .messageWrapper .message,.mdsp.mdsp-defaults.ix .messageWrapper .message{border-width:2px;background-color:rgba(var(--color-interface), 1);color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .messageWrapper .message::after,.mdsp.mdsp-defaults.ix .messageWrapper .message::after{display:none}.uxt.uxt-defaults.ix .messageWrapper .message.is-informative,.uxt.uxt-defaults.ix .messageWrapper .message.is-info,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-informative,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-info{border-color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .messageWrapper .message.is-success,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-success{border-color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .messageWrapper .message.is-warning,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-warning{border-color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .messageWrapper .message.is-alert,.uxt.uxt-defaults.ix .messageWrapper .message.is-error,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-alert,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-error{border-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-informative,.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-info,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-informative,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-info{border-color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-informative::before,.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-info::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-informative::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-info::before{color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-success::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-success::before{color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-warning::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-warning::before{color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-alert::before,.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-error::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-alert::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-error::before{color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .notifications .notification,.mdsp.mdsp-defaults.ix .notifications .notification{box-shadow:var(--theme-shadow-4);color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .notifications .notification .notification__close,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close{right:-36px;top:12px;line-height:24px}.uxt.uxt-defaults.ix .notifications .notification .notification__close::before,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close::before{color:rgba(var(--color-font), 1);font-weight:bold}.uxt.uxt-defaults.ix .notifications .notification .notification__close:hover,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close:hover{background-color:var(--color-button-invisible-secondary--background-hover)}.uxt.uxt-defaults.ix .notifications .notification .notification__close:active,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close:active{background-color:var(--color-button-invisible-secondary--background-active)}.uxt.uxt-defaults.ix .notifications .notification__main,.mdsp.mdsp-defaults.ix .notifications .notification__main{margin:0 52px 0 52px;padding:12px 0}.uxt.uxt-defaults.ix .notifications .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification__main::before{color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .notifications .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification__details{border-top-color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-info .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-info .notification__main::before{color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-success .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .notification__main::before{color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-success .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .notification__details{border-top-color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-warning .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .notification__main::before{color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-warning .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .notification__details{border-top-color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-error .notification__main::before,.uxt.uxt-defaults.ix .notifications .notification.is-alert .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .notification__main::before{color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-error .notification__details,.uxt.uxt-defaults.ix .notifications .notification.is-alert .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .notification__details{border-top-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .notifications .notification,.uxt.uxt-defaults.ix .notifications .notification.is-info,.uxt.uxt-defaults.ix .notifications .notification.is-warning,.uxt.uxt-defaults.ix .notifications .notification.is-error,.uxt.uxt-defaults.ix .notifications .notification.is-alert,.uxt.uxt-defaults.ix .notifications .notification.is-success,.mdsp.mdsp-defaults.ix .notifications .notification,.mdsp.mdsp-defaults.ix .notifications .notification.is-info,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning,.mdsp.mdsp-defaults.ix .notifications .notification.is-error,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert,.mdsp.mdsp-defaults.ix .notifications .notification.is-success{background-color:rgba(var(--color-interface-secondary), 1);color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .notifications .notification__title,.uxt.uxt-defaults.ix .notifications .notification__content,.uxt.uxt-defaults.ix .notifications .notification.is-info__title,.uxt.uxt-defaults.ix .notifications .notification.is-info__content,.uxt.uxt-defaults.ix .notifications .notification.is-warning__title,.uxt.uxt-defaults.ix .notifications .notification.is-warning__content,.uxt.uxt-defaults.ix .notifications .notification.is-error__title,.uxt.uxt-defaults.ix .notifications .notification.is-error__content,.uxt.uxt-defaults.ix .notifications .notification.is-alert__title,.uxt.uxt-defaults.ix .notifications .notification.is-alert__content,.uxt.uxt-defaults.ix .notifications .notification.is-success__title,.uxt.uxt-defaults.ix .notifications .notification.is-success__content,.mdsp.mdsp-defaults.ix .notifications .notification__title,.mdsp.mdsp-defaults.ix .notifications .notification__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-info__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-info__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-error__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-error__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-success__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-success__content{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .notifications .notification .details__expander,.uxt.uxt-defaults.ix .notifications .notification .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-info .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-info .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-warning .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-warning .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-error .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-error .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-alert .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-alert .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-success .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-success .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-info .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-info .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .details__expander:visited{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error::before{display:none}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid .inputGroup__label,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid .inputGroup__label{color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>textarea,.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>input,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>textarea,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>input{background-color:rgba(var(--color-component-error), 1);border-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup--error,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup--error{display:flex;flex-direction:row;gap:4px}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup--error:before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup--error:before{background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https: //sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;content:"";background-size:16px;height:16px;width:16px}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup--error:after,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup--error:after{display:none}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before,.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]+label::before{border-color:rgba(var(--color-error), 1);background-color:rgba(var(--color-component-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before{background-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]:checked+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]:checked+label::before{outline-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup select,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup select{background-color:rgba(var(--color-component-error), 1)}.uxt.uxt-defaults.ix.forceDefaultElements input[type=submit],.uxt.uxt-defaults.ix.forceDefaultElements button,.mdsp.mdsp-defaults.ix.forceDefaultElements input[type=submit],.mdsp.mdsp-defaults.ix.forceDefaultElements button{border-radius:0}.uxt.uxt-defaults.ix input[type=submit],.mdsp.mdsp-defaults.ix input[type=submit]{border-radius:0}.uxt.uxt-defaults.ix .keyValueWrapper__keyValue .keyValue__key,.mdsp.mdsp-defaults.ix .keyValueWrapper__keyValue .keyValue__key{color:rgba(var(--color-soft-text))}.uxt.uxt-defaults.ix .keyValueWrapper__keyValue .keyValue__value,.mdsp.mdsp-defaults.ix .keyValueWrapper__keyValue .keyValue__value{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .stepper__steps .step__status__dot,.mdsp.mdsp-defaults.ix .stepper__steps .step__status__dot{min-height:20px;min-width:20px}.uxt.uxt-defaults.ix .stepper__steps .step__status__dot::before,.mdsp.mdsp-defaults.ix .stepper__steps .step__status__dot::before{font-size:16px}.uxt.uxt-defaults.ix .stepper__steps .step__flyout__container .step__status__line__wrapper,.mdsp.mdsp-defaults.ix .stepper__steps .step__flyout__container .step__status__line__wrapper{padding-left:10px}.uxt.uxt-defaults.ix .stepper__steps .step.is-current .step__status,.mdsp.mdsp-defaults.ix .stepper__steps .step.is-current .step__status{background-color:rgba(var(--color-ghost-selected))}.uxt.uxt-defaults.ix .stepper__steps .step__status__label,.mdsp.mdsp-defaults.ix .stepper__steps .step__status__label{font-size:14px;font-weight:normal}.uxt.uxt-defaults.ix .stepper__steps .step:last-child .step__status__indicator .step__status__line__wrapper:last-child,.mdsp.mdsp-defaults.ix .stepper__steps .step:last-child .step__status__indicator .step__status__line__wrapper:last-child{visibility:hidden}.uxt.uxt-defaults.ix .stepper--simple .stepper__steps .step__flyout__container .step__status__line__wrapper,.mdsp.mdsp-defaults.ix .stepper--simple .stepper__steps .step__flyout__container .step__status__line__wrapper{padding-left:18px}.uxt.uxt-defaults.ix .stepper--simple .stepper__steps .step__status__dot,.mdsp.mdsp-defaults.ix .stepper--simple .stepper__steps .step__status__dot{min-height:16px;min-width:16px}:root .uxt-ix-theme-light{--color-base000: 0, 0, 40;--color-base200: 51, 51, 83;--color-base450: 102, 102, 126;--color-base600: 153, 153, 169;--color-base750: 204, 204, 212;--color-base800: 229, 229, 233;--color-base900: 240, 240, 240;--color-base950: 243, 243, 240;--color-base1000: 255, 255, 255;--color-primary-darker: 0, 81, 89;--color-primary-dark: 25, 98, 108;--color-primary: 0, 121, 147;--color-primary-light: 0, 152, 166;--color-primary-lighter: 209, 255, 242;--color-primary-lightest: 235, 247, 248;--color-success-dark: 1, 106, 44;--color-success: 1, 137, 58;--color-success-light: 180, 204, 191;--color-success-lighter: 210, 234, 221;--color-warning-dark: 95, 79, 17;--color-warning: 233, 195, 42;--color-warning-light: 230, 219, 174;--color-warning-lighter: 255, 245, 204;--color-error-dark: 167, 27, 44;--color-error: 215, 35, 57;--color-error-light: 227, 184, 194;--color-error-lighter: 253, 221, 229;--color-info-dark: 0, 98, 138;--color-info: 0, 126, 177;--color-info-light: 183, 205, 214;--color-info-lighter: 204, 229, 239;--color-dangerPrimary: var(--color-error);--color-dangerPrimary-hover: 193, 31, 51;--color-dangerPrimary-active: 180, 29, 48;--color-dangerSecondary: var(--color-error);--color-dangerSecondary-hover: var(--color-dangerPrimary-hover);--color-dangerSecondary-active: var(--color-dangerPrimary-active);--color-font: var(--color-base000);--color-font-secondary: var(--color-base600);--color-font-disabled: var(--color-base600);--color-font-contrast: var(--color-base1000);--color-interface: var(--color-base1000);--color-interface-secondary: var(--color-base950);--color-interface-highlight: var(--color-base1000);--color-interface-headerfooter: var(--color-base1000);--color-shadow: var(--color-base000);--color-overlay: var(--color-base200);--color-border: 232, 232, 232;--color-disabled: var(--color-base600);--color-disabled-contrast: var(--color-base1000);--color-appBar-color: var(--color-base200);--color-appBar--active-collapsible: var(--color-primary);--color-appBar-bg: var(--color-interface-secondary);--color-appBar--active-bg: var(--color-interface);--color-appBar-hover: var(--color-primary);--color-appBar-border: 232, 232, 232;--color-appBar--active-indicator: var(--color-primary);--color-appBar--badge: var(--color-error);--color-appBar--active-color: var(--color-primary);--color-appHeader-bg: var(--color-interface-secondary);--color-appHeader-font: var(--color-primary);--color-charting01: 0, 153, 153;--color-charting02: 0, 137, 14;--color-charting03: 0, 41, 73;--color-charting04: 26, 116, 125;--color-charting05: 0, 81, 89;--color-charting06: 54, 100, 198;--color-charting07: 0, 35, 122;--color-charting08: 115, 83, 229;--color-charting09: 85, 59, 163;--color-charting10: 116, 0, 137;--color-charting11: 192, 71, 116;--color-charting12: 79, 21, 61;--color-charting13: 190, 89, 37;--color-charting14: 128, 16, 0;--color-charting15: 128, 87, 0;--color-charting16: 117, 117, 99;--color-charting17: 76, 76, 104;--color-charting18: 0, 135, 190;--color-charting19: var(--color-error);--color-charting20: var(--color-warning);--color-charting21: var(--color-success);--color-component: 189, 189, 174;--color-component-1: var(--color-component), .2;--color-component-1-hover: var(--color-component), .35;--color-component-1-active: 150, 150, 138 .35;--color-component-4: var(--color-base000), .45;--color-component-error: 252, 204, 215;--color-soft-text: var(--color-base000), .6;--color-dynamic: var(--color-primary-darker);--color-dynamic-hover: 18, 93, 101;--color-dynamic--active: 16, 82, 89;--color-primary-active: 22, 86, 92;--color-secondary-hover: var(--color-primary-lighter);--color-secondary-active: 184, 242, 226;--color-focus-border: 25, 159, 255;--color-ix-theme-2: 243, 243, 240;--color-ix-error: var(--color-error);--color-ix-error-hover: 193, 31, 51;--color-ix-error-active: 180, 29, 48;--color-ix-error-contrast: var(--color-base1000);--color-ix-warning: var(--color-warning);--color-ix-warning-hover: 227, 186, 23;--color-ix-warning-active: 208, 171, 21;--color-ix-warning-contrast: var(--color-base000);--color-ix-success: var(--color-success);--color-ix-success-hover: 1, 122, 51;--color-ix-success-active: 1, 111, 47;--color-ix-success-contrast: var(--color-base1000);--color-ix-info: var(--color-info);--color-ix-info-hover: 0, 113, 158;--color-ix-info-active: 0, 105, 148;--color-ix-info-contrast: var(--color-base1000);--color-shadow-1: rgba(0, 0, 40, 0.1);--color-shadow-2: rgba(0, 0, 40, 0.2);--color-shadow-3: rgba(0, 0, 40, 0.12);--theme-shadow-4: 0px 0px 2px var(--color-shadow-1), 0px 4px 8px var(--color-shadow-1), 0px 12px 18px var(--color-shadow-1);--color-card-list-background: var(--color-component-1);--color-card-list-background-hover: var(--color-component-1-hover);--color-card-list-background-active: var(--color-component-1-active);--color-card-background: transparent;--color-card-background-hover: var(--color-ghost-hover);--color-card-background-active: var(--color-ghost-active);--color-card-border: var(--color-base000), .20;--color-input-background: var(--color-primary-lightest);--color-input-background-hover: var(--color-primary-lighter);--color-input-border-hover: var(--color-primary-darker);--color-input-error-background: var(--color-component-error);--color-button-primary-background-active: var(--color-primary-active);--color-button-primary-background-disabled: var(--color-component-4);--color-button-secondary-background: var(--color-base1000);--color-button-secondary-background-hover: var(--color-secondary-hover);--color-button-secondary-background-active: var(--color-secondary-active);--color-button-secondary-border-hover: var(--color-primary-darker);--color-button-secondary-color-hover: var(--color-primary-darker);--color-button-secondary-border-active: var(--color-primary-darker);--color-button-secondary-color-active: var(--color-primary-darker);--color-ghost: 0, 0, 0, 0;--color-ghost-hover: var(--color-component), .15;--color-ghost-active: 143, 143, 117, 0.15;--color-ghost-selected: 0, 255, 185, 0.18;--color-ghost-selected-hover: 32, 197, 126, .22;--color-button-ghost-font-disabled: var(--color-component-4);--color-button-invisible-secondary-background-hover: rgb(189 189 174 / 15%);--color-button-invisible-secondary-background-active: rgb(143 143 117 / 15%);--color-pagination-active: var(--color-ghost-active);--color-pagination-highlight: var(--color-ghost-selected);--color-pagination-highlight-hover: var(--color-ghost-selected-hover);--color-pagination-highlight-active: var(--color-primary-lighter)}:root .uxt-ix-theme-dark{color-scheme:dark;--color-base000: 255, 255, 255;--color-base200: 242, 242, 244;--color-base450: 229, 229, 233;--color-base600: 204, 204, 212;--color-base750: 153, 153, 169;--color-base800: 102, 102, 126;--color-base900: 51, 51, 83;--color-base950: 35, 35, 60;--color-base1000: 0, 0, 40;--color-primary-darker: 197, 255, 239;--color-primary-dark: 0, 229, 170;--color-primary: 0, 204, 204;--color-primary-light: 0, 255, 185;--color-primary-lighter: 0, 24, 43;--color-primary-lightest: 0, 41, 73;--color-success-dark: 0, 87, 36;--color-success: 1, 214, 90;--color-success-light: 49, 163, 97;--color-success-lighter: 64, 214, 127;--color-warning-dark: 77, 65, 15;--color-warning: 255, 215, 50;--color-warning-light: 179, 161, 90;--color-warning-lighter: 255, 230, 128;--color-error-dark: 128, 19, 32;--color-error: 255, 38, 64;--color-error-light: 204, 94, 108;--color-error-lighter: 255, 143, 157;--color-info-dark: 0, 80, 92;--color-info: 0, 190, 220;--color-info-light: 43, 129, 143;--color-info-lighter: 66, 199, 220;--color-dangerPrimary: var(--color-error);--color-dangerPrimary-hover: 255, 66, 89;--color-dangerPrimary-active: 255, 20, 49;--color-dangerSecondary: var(--color-error);--color-dangerSecondary-hover: var(--color-dangerPrimary-hover);--color-dangerSecondary-active: var(--color-dangerPrimary-active);--color-font: var(--color-base000);--color-font-secondary: var(--color-base600);--color-font-disabled: 115, 115, 137;--color-font-contrast: var(--color-base1000);--color-interface: var(--color-base1000);--color-interface-secondary: var(--color-base950);--color-interface-highlight: var(--color-base950);--color-interface-headerfooter: var(--color-base950);--color-disabled: var(--color-font-disabled);--color-disabled-contrast: var(--color-base1000);--color-shadow: var(--color-base900);--color-overlay: var(--color-base1000);--color-border: var(--color-base900);--color-appBar-color: var(--color-font);--color-appBar--active-collapsible: var(--color-primary);--color-appBar-bg: var(--color-interface-secondary);--color-appBar--active-bg: var(--color-interface);--color-appBar-hover: var(--color-primary);--color-appBar-border: 51, 51, 83;--color-appBar--active-indicator: var(--color-primary);--color-appBar--badge: var(--color-error);--color-appBar--active-color: var(--color-primary);--color-appHeader-bg: var(--color-interface-secondary);--color-appHeader-font: var(--color-primary);--color-charting01: 0, 193, 182;--color-charting02: 1, 214, 90;--color-charting03: 204, 245, 245;--color-charting04: 0, 255, 185;--color-charting05: 133, 233, 210;--color-charting06: 104, 149, 246;--color-charting07: 151, 199, 255;--color-charting08: 128, 92, 255;--color-charting09: 191, 176, 243;--color-charting10: 185, 92, 201;--color-charting11: 229, 101, 155;--color-charting12: 255, 152, 196;--color-charting13: 190, 89, 37;--color-charting14: 255, 144, 0;--color-charting15: 255, 215, 50;--color-charting16: 170, 170, 150;--color-charting17: 125, 128, 153;--color-charting18: 77, 209, 231;--color-charting19: var(--color-error);--color-charting20: var(--color-warning);--color-charting21: var(--color-success);--color-component: 157, 157, 150;--color-component-1: var(--color-component), .2;--color-component-1-hover: var(--color-component), .35;--color-component-1-active: 125, 125, 120 .35;--color-component-4: var(--color-base000), .45;--color-component-error: 51, 17, 49;--color-soft-text: var(--color-base000), .6;--color-dynamic: var(--color-primary-light);--color-dynamic-hover: 98, 238, 199;--color-dynamic-active: 92, 224, 188;--color-secondary-hover: 0, 31, 57;--color-secondary-active: 0, 24, 43;--color-focus-border: 25, 159, 255;--color-ix-theme-2: 35, 35, 60;--color-ix-error: var(--color-error);--color-ix-error-hover: 255, 66, 89;--color-ix-error-active: 255, 20, 49;--color-ix-error-contrast: var(--color-base1000);--color-ix-warning: var(--color-warning);--color-ix-warning-hover: 255, 221, 82;--color-ix-warning-active: 255, 212, 36;--color-ix-warning-contrast: var(--color-base1000);--color-ix-success: var(--color-success);--color-ix-success-hover: 1, 234, 98;--color-ix-success-active: 1, 193, 81;--color-ix-success-contrast: var(--color-base1000);--color-ix-info: var(--color-info);--color-ix-info-hover: 0, 207, 240;--color-ix-info-active: 0, 181, 209;--color-ix-info-contrast: var(--color-base1000);--color-shadow-1: rgba(0, 0, 0, 0.6);--color-shadow-2: rgba(0, 0, 0, 0.2);--color-shadow-3: rgba(0, 0, 0, 0.6);--theme-shadow-4: 0px 0px 2px var(--color-shadow-2), 0px 4px 8px var(--color-shadow-1), 0px 12px 18px var(--color-shadow-1);--color-card-list-background: var(--color-component-1);--color-card-list-background-hover: var(--color-component-1-hover);--color-card-list-background-active: var(--color-component-1-active);--color-card-background: transparent;--color-card-background-hover: var(--color-ghost-hover);--color-card-background-active: var(--color-ghost-active);--color-card-border: 235, 240, 245, .40;--color-input-background: 0, 24, 59;--color-input-background-hover: var(--color-secondary-hover);--color-input-border-hover: var(--color-dynamic-hover);--color-button-primary-background-active: 0, 242, 176;--color-button-primary-background-disabled: var(--color-component-4);--color-button-secondary-background: var(--color-base1000);--color-button-secondary-background-hover: var(--color-secondary-hover);--color-button-secondary-background-active: var(--color-secondary-active);--color-button-secondary-border-hover: var(--color-primary-light);--color-button-secondary-color-hover: var(--color-primary-light);--color-button-secondary-border-active: 0, 255, 185;--color-button-secondary-color-active: 0, 255, 185;--color-ghost: 255, 255, 255, 0;--color-ghost-hover: var(--color-component), .15;--color-ghost-active: 105, 105, 99, .15;--color-ghost-selected: 58, 255, 201, .16;--color-ghost-selected-hover: 123, 253, 199, .25;--color-ghost-selected-active: 115, 221, 175, .22;--color-button-ghost-font-disabled: var(--color-component-4);--color-button-invisible-secondary-background-hover: rgb(189 189 174 / 15%);--color-button-invisible-secondary-background-active: rgb(143 143 117 / 15%);--color-pagination-active: var(--color-ghost-active);--color-pagination-highlight: 0, 255, 185, .12;--color-pagination-highlight-active: var(--color-ghost-selected-active)} \ No newline at end of file diff --git a/packages/documentation/docs/migration/uxt.md b/packages/documentation/docs/migration/uxt.md new file mode 100644 index 0000000000..122cc31870 --- /dev/null +++ b/packages/documentation/docs/migration/uxt.md @@ -0,0 +1,108 @@ +--- +sidebar_position: 2 +sidebar_label: Migration from UXT 2.7.0 +--- + +import Accordion from '@site/src/components/Accordion'; + +# UXT 2.7.0 to Siemens Industrial Experience design system + +For a quick and easy migration without changing your code base, the iX-UXT CSS Theme is prepared for app developers using the CSS from UXT (User Experience Toolkit, formerly named MindSphere Design System). + +:::info + +For the full experience, please use the Siemens Industrial Experience components. The theme is intended for a quick, yet, incomplete switch from UXT as a legacy design system. + +::: + +## Usage +1. When using UXT below v2.7.0, download the CSS theme and import it into your project. + _If you are using UXT v2.7.0 or higher, it is already part of the UXT CSS._ +2. Apply the class `.ix` to the `.uxt-defaults` element. +3. Depending if you want to use the dark or light theme, add `.uxt-ix-theme-dark` or `.uxt-ix-theme-light` to your `body` element. + +In the end, your setup should look like this: + +``` + + ... +
+ ... + +``` + +``` + + ... +
+ ... + +``` + +**Note**: We recommend using the CSS theme with UXT v2.7.0 + +Your layout might change in some places when applying the theme, including: +1. Headings are notably smaller +2. Buttons are slightly wider because of the bold label + +## Troubleshooting + + +1. Check if you use color variables (no raw HEX or RGB values) +2. Check if you applied the `.uxt-ix-theme-dark` on the `body` +3. Update your UXT version to v2.7.0 + + + +1. Check if you override specific attributes with `!important` +2. Check if you added the `.ix` class to the element with the `.uxt-defaults` class, as shown above +3. Update your current UXT version to 2.7.0 + + + +1. Check if you use color variables (no raw HEX or RGB values) +2. Check if you used meta color variables correctly (see more details [here](https://design.mindsphere.io/patterns/color.html#tab2anchor4)): + 1. For text elements: use the font colors, e.g. color-font or color-font-secondary (no base colors) + 2. For backgrounds: use the interface colors, e.g. color-interface or color-interface-secondary (no base colors) + 3. For statuses: use the error, warning, info, success colors (not primary) + + +If you're facing any other problems, please raise an issue in GitHub [raising an issue](https://github.com/siemens/ix/issues). + +## Component name differences +As some of the components are named differently in Industrial Experience, please consult this list of the most important component name differences to help make your migration easier: + +| **User Experience Toolkit** | **Industrial Experience** | +| --------------------------------------------- | ------------------------------------------------------------------ | +| App bar | Nav menu | +| Badge | Pill, chip | +| Busy indicator | Spinner | +| Button
- primary
- secondary
- ghost | Button
- primary filled
- primary outline
- primary ghost | +| Card grid | Layout grid | +| Container | Card | +| Dialog | Modal | +| Dropzone | Upload | +| List | Event list | +| Stepper | Workflow | +| Menu | Dropdown button | +| Message | Message bar | +| Notification | Toast | +| Pager | Pagination | +| Popover | Tooltip, dropdown | +| Switch | Toggle | +| Context region | Pane (inline right) | +| Item region | Pane (floating right) | +| Leading region | Pane (inline left) | + +## System icons + +Key differences between UXT and Industrial Experience: + +- [UXT offers an iconfont](https://design.mindsphere.io/patterns/system-icons.html) with 3 different styles (regular, bold, filled) +- [iX offers SVGs](https://ix.siemens.io/docs/icon-library/icons) with mainly 1 style that corresponds to our bold and partially filled variants separately + +When changing to the SVG icons by Industrial Experience, check whether your stylings still apply in your custom-built components. + +## Figma library + +When switching from UXT to Industrial Experience, use the swap library feature as described [here](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries).