@servicetitan/design-system 11.3.0 → 11.4.1

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "11.3.0";
+  --anvil-version: "11.4.1";
 }
 
 /*
@@ -87,11 +87,11 @@ a:focus {
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 25px;
 }
 .FormField .a-Checkbox {
@@ -165,9 +165,9 @@ a:focus {
 }
 
 .Checkbox__box {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #bcbcbd;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
   box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
@@ -198,10 +198,10 @@ a:focus {
   margin-bottom: -6px;
 }
 .Checkbox--error .Checkbox__box {
-  border-color: #ffb2a0;
+  border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 #2270ee inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -212,7 +212,7 @@ a:focus {
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 white inset, -2px 0 0 0 white inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -227,7 +227,7 @@ a:focus {
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 white inset, -2.5px 0 0 0 white inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -239,39 +239,39 @@ a:focus {
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #ffb2a0;
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #a9d1ff;
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #444445;
+  border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 4px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: #e63717;
-  box-shadow: 0 0 0 4px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Checkbox--disabled .Checkbox__box {
@@ -279,7 +279,7 @@ a:focus {
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {
@@ -310,12 +310,12 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -413,7 +413,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -421,14 +421,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width
@@ -6991,7 +6991,7 @@ kendo-badge-container {
 
 .k-calendar {
   border-color: rgba(0, 0, 0, 0.08);
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
 }
 .k-calendar .k-header {
@@ -7061,7 +7061,7 @@ kendo-badge-container {
 }
 .k-calendar .k-calendar-navigation-highlight {
   border-color: rgba(0, 0, 0, 0.08);
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
 }
 .k-calendar[dir=rtl] .k-calendar-navigation, .k-rtl .k-calendar .k-calendar-navigation {
@@ -7756,7 +7756,7 @@ kendo-badge-container {
 }
 
 .k-popup {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -11607,7 +11607,7 @@ input.k-textbox {
 
 .k-menu-group,
 .k-menu.k-context-menu {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -12570,7 +12570,7 @@ kendo-label > .k-label {
 }
 .k-pager-md .k-pager-numbers.k-state-expanded,
 .k-pager-sm .k-pager-numbers.k-state-expanded {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
@@ -13931,7 +13931,7 @@ div.k-grid-norecords {
 
 .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
   border-top: 1px solid;
-  border-top-color: #dfe0e1;
+  border-top-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .k-columnmenu-item-content {
@@ -14307,7 +14307,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-column-menu .k-menu:not(.k-context-menu) {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -14328,12 +14328,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-column-menu-group-header-text {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
 }
 
 .k-check-all-wrap {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .k-grid-norecords-template {
@@ -15009,7 +15009,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .semantic-anvil-theme {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   /*
@@ -16417,7 +16417,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .ActionMenu {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   padding: 12px 0;
@@ -16440,7 +16440,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 .ActionMenu .ActionMenuItem {
   align-items: center;
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   display: flex;
   flex-direction: row;
   min-height: 26px;
@@ -16506,13 +16506,13 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin-right: 8px;
 }
 .ActionMenuGroup__label.Divider .Eyebrow {
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   opacity: 0.6;
 }
 
 .Announcement {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -16570,7 +16570,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 /* OptionList overrides specific to the Select */
 .a-Select {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -16662,22 +16662,22 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
   width: 100%;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
-  color: #141414;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
   padding: 7px 12px;
   cursor: pointer;
   position: relative;
 }
 .Trigger:focus, .Trigger:active {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   outline: 0;
 }
 .Trigger .TagGroup {
@@ -16687,11 +16687,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   cursor: default;
 }
 .Trigger .Trigger__placeholder {
-  color: rgba(20, 20, 20, 0.4);
   line-height: 1.5;
+  opacity: 0.4;
 }
 .Trigger.Trigger--error .Trigger__placeholder {
-  color: rgba(230, 55, 23, 0.6);
+  color: var(--colorsTextCritical, #f94d32);
+  opacity: 0.6;
 }
 .Trigger .Trigger__clear.Button {
   border-radius: 100%;
@@ -16714,36 +16715,36 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Trigger--open {
-  border-color: #2270ee;
+  border-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--open.Trigger--error {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 
 .Trigger--error {
-  border-color: #e63717;
-  color: #e63717;
-  background-color: #ffece9;
+  border-color: var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #f94d32);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--error:focus, .Trigger--error:active {
-  border-color: #e63717;
-  box-shadow: 0 0 0 3px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Trigger--error .Trigger__value,
 .Trigger--error .Button {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Trigger--disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background-color: #f7f7f7;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 .Trigger--disabled.Trigger--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--disabled.Trigger--error .Trigger__clear.Button--disabled.Button--subtle {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .Trigger--disabled .Trigger__clear.Button--disabled.Button--subtle {
   opacity: 1;
@@ -16752,7 +16753,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 .Trigger__shortLabel {
   align-items: center;
   background: transparent;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   display: flex;
   margin: -7px 0 -7px -12px;
   z-index: 0;
@@ -16765,12 +16766,11 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin-right: 11px;
 }
 .Trigger--error .Trigger__shortLabel {
-  background-color: #ffece9;
-  color: #e63717;
-  border-color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .Trigger-open .Trigger__shortLabel, .Trigger:active .Trigger__shortLabel {
-  border-color: #2270ee;
+  border-color: var(--colorsBorderPrimary, #2270ee);
 }
 
 .Trigger__shortLabel--left {
@@ -16784,10 +16784,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin: -11px 0 -11px -11px;
 }
 .Trigger:active .Trigger__shortLabel--left, .Trigger--open .Trigger__shortLabel--left {
-  border-right-color: #2270ee;
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--error:active .Trigger__shortLabel--left, .Trigger--error.Trigger--open .Trigger__shortLabel--left {
-  border-right-color: #e63717;
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 
 .Trigger__shortLabel--right {
@@ -16801,10 +16801,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin: -11px -11px -11px 0;
 }
 .Trigger:active .Trigger__shortLabel--right, .Trigger--open .Trigger__shortLabel--right {
-  border-right-color: #2270ee;
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--error:active .Trigger__shortLabel--right, .Trigger--error.Trigger--open .Trigger__shortLabel--right {
-  border-right-color: #e63717;
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 
 .Trigger__controls {
@@ -16816,10 +16816,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger__arrow.a-Icon {
   align-self: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Trigger--error .Trigger__arrow.a-Icon {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Trigger__value {
@@ -16835,21 +16835,21 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Select--DrillIn .Popover__header {
-  background-color: #f5f5f5;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 
 .SelectDrillIn__back {
   margin-left: -8px;
 }
 .Select__focus:focus-within .SelectDrillIn__back {
-  background: #dfe0e1;
+  background: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
   border-radius: 3px;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Avatar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -16858,7 +16858,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   background-size: cover;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-weight: 700;
   justify-content: center;
@@ -16922,7 +16922,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 /** @define Backdrop */
 .Backdrop {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: none;
@@ -16931,10 +16931,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(20, 20, 20, 0.6);
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
 }
 
 .Backdrop--is-open {
@@ -16944,7 +16944,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 .BackLink {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   cursor: pointer;
@@ -16961,7 +16961,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 .BackLink--focus-visible:focus {
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .BackLink__back-icon {
@@ -16970,7 +16970,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Banner {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: #ffffff;
@@ -17091,7 +17091,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .BodyText {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-family: "Nunito Sans", sans-serif;
@@ -17117,7 +17117,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Breadcrumb {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -17128,7 +17128,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Breadcrumb-Link {
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   display: inline-flex;
   line-height: 1.5;
   margin-top: 8px;
@@ -17139,11 +17139,11 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 .Breadcrumb-Link__label--focus-visible:focus {
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Breadcrumb-Link__icon.a-Icon {
-  color: #444445;
+  color: var(--colorsTextDefault, #141414);
   padding-right: 16px;
   padding-left: 16px;
 }
@@ -17158,7 +17158,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Breadcrumb-Link:last-child {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .Breadcrumb-Link:last-child .Breadcrumb-Link__icon {
   display: none;
@@ -17166,7 +17166,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Button {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -17209,10 +17209,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   text-decoration: none;
 }
 .Button:hover::before {
-  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
 }
 .Button:active::before, .Button.Button--selected::before {
-  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
 }
 .Button.Button--focus-visible:focus {
   outline: 0;
@@ -17223,10 +17223,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
 }
 .Button.Button--outline:hover::before {
-  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
 }
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
-  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
 }
 .Button.Button--outline.Button--focus-visible:focus {
   box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
@@ -17235,10 +17235,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   background-color: transparent;
 }
 .Button.Button--subtle:hover::before {
-  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
 }
 .Button.Button--subtle:active::before, .Button.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
 }
 
 button.Button {
@@ -17285,7 +17285,7 @@ button.Button {
   background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsActiveOnPrimary, rgba(4, 4, 4, 0.08));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
@@ -17320,7 +17320,7 @@ button.Button {
   background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
 }
 .Button--red:active::before, .Button--red.Button--selected::before {
-  background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnCritical, rgba(4, 4, 4, 0.16));
 }
 .Button--red.Button--focus-visible:focus {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
@@ -17557,7 +17557,7 @@ button.Button--full {
   z-index: 2;
 }
 .ButtonToggle__Item .Button:hover {
-  background-color: rgba(20, 20, 20, 0.04);
+  background-color: var(--colorsHoverSubdued, rgba(20, 20, 20, 0.04));
 }
 
 .ButtonToggle__Item:not(:first-child) {
@@ -17585,20 +17585,20 @@ button.Button--full {
 }
 .ButtonToggle--primary .ButtonToggle__Item .Button,
 .ButtonToggle--primary .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected .Button {
-  background-color: rgba(34, 112, 238, 0.08);
-  color: #1360d9;
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px #56a4ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #1360d9, 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #56a4ff, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderPrimary, #2270ee), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--negative {
@@ -17606,35 +17606,35 @@ button.Button--full {
 }
 .ButtonToggle--negative .ButtonToggle__Item .Button,
 .ButtonToggle--negative .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected .Button {
-  background-color: rgba(230, 55, 23, 0.1);
-  color: #e63717;
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  color: var(--colorsTextCritical, #f94d32);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px #ff745f;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #ff745f, 0 0 0 3px #ffb2a0;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #ff745f, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderCritical, #e63717), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--neutral .ButtonToggle__Item .Button,
 .ButtonToggle--neutral .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--neutral .ButtonToggle__Item--selected .Button {
-  background-color: rgba(20, 20, 20, 0.08);
-  box-shadow: inset 0 0 0 1px #bcbcbd;
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .ButtonToggle--neutral .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #bcbcbd, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--neutral.ButtonToggle .Button--focus-visible:focus {
-  box-shadow: 0 0 0 1px #bcbcbd, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .ButtonToggle--disabled {
@@ -17648,12 +17648,12 @@ button.Button--full {
 
 .Card {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   text-align: left;
 }
 
@@ -17725,11 +17725,11 @@ button.Button--full {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 200ms 0ms;
 }
 .Card--placeholder:hover {
-  background-color: #ecf4fd;
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
   box-shadow: 0 0 0;
 }
 .Card--placeholder:hover.Card--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Card--placeholder > .CardSection {
   flex-grow: 1;
@@ -17743,7 +17743,7 @@ button.Button--full {
 }
 
 .CardSection {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 24px;
   /* Remove bottom border for stacked sections */
   border-bottom-width: 0;
@@ -17772,24 +17772,24 @@ button.Button--full {
   padding: 0;
 }
 .Card--active > .CardSection {
-  border-left-color: #2270ee;
-  border-right-color: #2270ee;
+  border-left-color: var(--colorsBorderPrimary, #2270ee);
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:first-child {
-  border-top-color: #2270ee;
+  border-top-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:last-child {
-  border-bottom-color: #2270ee;
+  border-bottom-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--error > .CardSection {
-  border-left-color: #e63717;
-  border-right-color: #e63717;
+  border-left-color: var(--colorsBorderCritical, #e63717);
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:first-child {
-  border-top-color: #e63717;
+  border-top-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:last-child {
-  border-bottom-color: #e63717;
+  border-bottom-color: var(--colorsBorderCritical, #e63717);
 }
 .CardSection:first-child {
   border-top-left-radius: 6px;
@@ -17833,8 +17833,8 @@ button.Button--full {
 .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue), .Card--active > .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue).CardSection,
 .CardSection--dark,
 .Card--active > .CardSection--dark.CardSection {
-  background: #141414;
-  border-color: #141414;
+  background: #040404;
+  border-color: #040404;
 }
 
 .CardSection--blue {
@@ -17879,7 +17879,7 @@ button.Button--full {
 
 .Collapsible {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -17895,7 +17895,7 @@ button.Button--full {
 
 .ColorPicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -17917,8 +17917,8 @@ button.Button--full {
   /* smartphones, touchscreens */
 }
 .ColorPicker__Item--active {
-  box-shadow: 0 0 0 2px #2270ee;
-  border-color: #ffffff;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee);
+  border-color: var(--colorsSurfaceDefault, #ffffff);
   cursor: default;
 }
 @media (pointer: coarse) {
@@ -17935,7 +17935,7 @@ button.Button--full {
   cursor: not-allowed;
 }
 .ColorPicker--disabled .ColorPicker__Item--active {
-  box-shadow: 0 0 0 2px #bcbcbd;
+  box-shadow: 0 0 0 2px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 
 .ColorPicker__CardWrapper .ColorPicker__CardSection {
@@ -17945,8 +17945,8 @@ button.Button--full {
   outline: none;
 }
 .ColorPicker__CardWrapper--focus .ColorPicker__CardSection {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ColorPicker__CardWrapper--disabled .ColorPicker--disabled {
   opacity: initial;
@@ -17954,7 +17954,7 @@ button.Button--full {
 
 .Container {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: block;
@@ -18005,7 +18005,7 @@ button.Button--full {
 
 .DataList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: table;
@@ -18035,17 +18035,17 @@ button.Button--full {
 }
 
 .DataList__HeaderCell {
-  background-color: #f7f7f7;
-  color: #141414;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 400;
   padding: 4px 8px;
 }
 
 .DataList--Simple .DataList__HeaderCell {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   background: transparent;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: normal;
 }
 .DataList--Simple .DataList__Cell:first-child {
@@ -18062,7 +18062,7 @@ button.Button--full {
 
 .DatePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -18094,15 +18094,52 @@ button.Button--full {
 /* Kendo calendar styles */
 .DatePicker__calendar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
   justify-content: center;
 }
 .DatePicker__calendar .k-calendar {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border: none;
+  color: var(--colorsTextDefault, #141414);
   /* Kendo team did not updated classnames, so color not passed correctly via _kendo-variables.scss */
 }
+.DatePicker__calendar .k-calendar.k-calendar-infinite .k-calendar-view::after {
+  box-shadow: 0 0 38px 19px var(--colorsSurfaceDefault, #ffffff);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-today {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td:hover .k-link {
+  border: var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-state-selected .k-link {
+  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #2270ee);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  color: var(--colorsTextDefault, #141414);
+  box-shadow: inset -1px 0 var(--colorsBorderGreyStrong, #bcbcbd);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation::before, .DatePicker__calendar .k-calendar .k-calendar-navigation::after {
+  box-shadow: 0 0 6em 3em var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation-highlight {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.DatePicker__calendar .k-calendar .k-content {
+  background-color: unset;
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
 .DatePicker__calendar .k-calendar table th,
 .DatePicker__calendar .k-calendar .k-calendar-navigation .k-calendar-navigation-marker,
 .DatePicker__calendar .k-calendar .k-calendar-header .k-title {
@@ -18113,20 +18150,20 @@ button.Button--full {
   margin-top: 8px;
 }
 .DatePicker__calendar .k-calendar .k-nav-today {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
   cursor: pointer;
   padding: 5px 8px;
 }
 .DatePicker__calendar .k-calendar .k-nav-today:hover {
   text-decoration: none !important;
   /* Button-like styling */
-  box-shadow: inset 0 100px 0 3px rgba(127, 127, 127, 0.075);
+  box-shadow: inset 0 100px 0 3px var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
   border-radius: 3px;
 }
 
 .DateRangePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   width: -webkit-min-content;
@@ -18149,15 +18186,7 @@ button.Button--full {
 
 .DateRangePicker__actions {
   padding: 12px 16px;
-  border-top: 1px solid #dfe0e1;
-}
-
-.DateRangePicker__errorText {
-  color: #e63717;
-  font-size: 14px;
-  line-height: 1.25;
-  margin-top: 8px;
-  margin-bottom: 4px;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .DateRangePicker__fromTo {
@@ -18167,7 +18196,7 @@ button.Button--full {
 }
 
 .DateRangePicker__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
   display: flex;
   justify-content: center;
@@ -18183,16 +18212,16 @@ button.Button--full {
 }
 
 .DateRangePicker__options {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 
 .Divider {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: #dfe0e1;
+  color: var(--colorsBorderGrey, #dfe0e1);
   margin: 0;
   z-index: 1;
 }
@@ -18202,7 +18231,7 @@ button.Button--full {
 }
 .Divider .Divider__content {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex: 0 0 auto;
@@ -18311,10 +18340,10 @@ button.Button--full {
 
 .Drawer {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background-color: #fff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   bottom: 0;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.15);
   box-sizing: border-box;
@@ -18334,8 +18363,8 @@ button.Button--full {
 .Drawer .Drawer__header {
   align-items: center;
   box-sizing: border-box;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 #dfe0e1;
+  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   padding: 16px 24px;
   min-height: 64px;
@@ -18373,7 +18402,7 @@ button.Button--full {
   font-size: 20px;
   flex-grow: 1;
   margin: 0;
-  color: #444445;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .Drawer__header-close.Button {
@@ -18387,7 +18416,7 @@ button.Button--full {
 }
 
 .Drawer__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   padding: 16px 24px;
 }
@@ -18400,14 +18429,14 @@ button.Button--full {
 
 .Eyebrow {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 600;
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;
@@ -18425,7 +18454,7 @@ button.Button--full {
 
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -18436,14 +18465,14 @@ button.Button--full {
 
 .FilePicker__File {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
   display: flex;
   margin-bottom: 16px;
@@ -18460,14 +18489,14 @@ button.Button--full {
 
 .a-Icon.FilePicker__File__Icon {
   margin-right: 8px;
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .FilePicker__File__ActionIcon {
   margin-left: 8px;
 }
 .FilePicker__File__ActionIcon .a-Icon {
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 
@@ -18506,14 +18535,14 @@ button.Button--full {
 
 .FilterButton {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
   padding: 4px 8px;
   border-radius: 500em;
   border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   font-size: 12px;
   cursor: pointer;
   background-color: transparent;
@@ -18584,7 +18613,7 @@ button.Button--full {
   content: "";
   width: 6px;
   height: 100%;
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -18592,10 +18621,10 @@ button.Button--full {
   top: 0;
 }
 .FlowCardStep--active.FlowCardStep--error::before {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 .FlowCardStep--active.FlowCardStep--saved::before {
-  background-color: #1fbc70;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .FlowCardStep--active .FlowCardStep__header {
   border-bottom: none;
@@ -18608,7 +18637,7 @@ button.Button--full {
   content: "";
   width: 6px;
   height: 100%;
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -18643,31 +18672,48 @@ button.Button--full {
   font-size: 14px;
 }
 .FlowCardStep__status.FlowCardStep__status--active {
-  background-color: #2270ee;
-  color: white;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep__status.FlowCardStep__status--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 
 .FlowCardStep--ordered .FlowCardStep__status {
-  background-color: #bcbcbd;
-  color: white;
+  background-color: var(--colorsSurfaceGreyStronger, #bcbcbd);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--active {
-  background-color: #2270ee;
-  color: white;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--custom {
   background-color: inherit;
   color: inherit;
 }
 .FlowCardStep--ordered .FlowCardStep__status--saved {
-  background-color: #ffffff;
-  color: white;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+
+.FlowCardStep__icon-active {
+  color: var(--colorsTextInverted, #ffffff);
+}
+
+.FlowCardStep .FlowCardStep__indicator-active {
+  color: var(--colorsStatusSuccess, #18a761);
+}
+.FlowCardStep .FlowCardStep__indicator-complete {
+  color: var(--colorsStatusSuccess, #18a761);
+}
+.FlowCardStep .FlowCardStep__indicator-disabled {
+  color: var(--colorsSurfaceGreyStronger, #bcbcbd);
+}
+.FlowCardStep .FlowCardStep__indicator-error {
+  color: var(--colorsStatusCritical, #f94d32);
 }
 
 /*** FormField styles ***/
@@ -18754,7 +18800,7 @@ button.Button--full {
 
 .FormField__helpers {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -18838,7 +18884,7 @@ button.Button--full {
 .FormGroup {
   /* stylelint-enable */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -18972,7 +19018,7 @@ button.Button--full {
 
 .Frame {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   height: 100vh;
@@ -19002,7 +19048,7 @@ button.Button--full {
 
 .Grid {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -19065,7 +19111,7 @@ button.Button--full {
   margin-bottom: 0 !important;
 }
 .Grid.Grid--divided:not(.Grid--vertically-divided) > .GridColumn:not(.GridRow), .Grid.Grid--divided:not(.Grid--vertically-divided) > .GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--vertically-divided > .GridColumn:not(.GridRow), .Grid.Grid--vertically-divided > .GridRow > .GridColumn {
   margin-top: 8px;
@@ -19080,7 +19126,7 @@ button.Button--full {
   margin-top: 0;
 }
 .Grid > .GridRow--divided.GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid > .GridRow--divided.GridRow > .GridColumn:first-child {
   box-shadow: none;
@@ -19098,7 +19144,7 @@ button.Button--full {
   width: calc(100% - 16px);
   height: 1px;
   margin: 0% 8px;
-  box-shadow: 0 -1px 0 0 #bcbcbd;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--horizontally-padded--divided.Grid, .Grid.Grid--padded.Grid--divided:not(.Grid--vertically-divided):not(.Grid--horizontally-divided) {
   width: 100%;
@@ -19119,16 +19165,16 @@ button.Button--full {
 .Grid.Grid--celled {
   width: 100%;
   margin: 1em 0;
-  box-shadow: 0 0 0 1px #bcbcbd;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--celled > .GridRow {
   width: 100% !important;
   margin: 0;
   padding: 0;
-  box-shadow: 0 -1px 0 0 #bcbcbd;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--celled > .GridColumn:not(.GridRow), .Grid.Grid--celled > .GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   padding: 1em;
 }
 .Grid.Grid--celled > .GridColumn:first-child, .Grid.Grid--celled > .GridRow > .GridColumn:first-child {
@@ -24141,19 +24187,19 @@ button.Button--full {
     flex-direction: column-reverse;
   }
   .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--mobile-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--mobile-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--mobile-reversed"].Grid--Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--mobile-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -24174,19 +24220,19 @@ button.Button--full {
     flex-direction: column-reverse;
   }
   .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--tablet-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--tablet-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--tablet-reversed"].Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--tablet-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -24207,19 +24253,19 @@ button.Button--full {
     flex-direction: column-reverse;
   }
   .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--desktop-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--desktop-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--desktop-reversed"].Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--desktop-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -24369,7 +24415,7 @@ button.Button--full {
     border-top: none !important;
   }
   .Grid.Grid--stackable.Grid--celled > .GridColumn:not(.GridRow), .Grid.Grid--stackable.Grid--celled > .GridRow > .GridColumn, .Grid.Grid--stackable.Grid--divided:not([class*=-vertically-divided]) > .GridRow > .GridColumn, .Grid.Grid--stackable.Grid--divided:not([class*=-vertically-divided]) > .GridColumn:not(.GridRow) {
-    border-top: 1px solid #bcbcbd;
+    border-top: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
     box-shadow: none !important;
     padding-top: 16px !important;
     padding-bottom: 16px !important;
@@ -24517,7 +24563,7 @@ button.Button--full {
 }
 .Headline {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;
@@ -24655,7 +24701,7 @@ button.Button--full {
 }
 
 .InlineEdit__value--placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .InlineEdit__content--icon .InlineEdit__editIcon {
@@ -24757,14 +24803,14 @@ button.Button--full {
 /*** Input styles ***/
 .Input {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   display: inline-flex;
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
   /* Sizes */
   /*** States ***/
@@ -24811,7 +24857,7 @@ button.Button--full {
   /* ... */
   background-color: #ffffff;
   border: 1px solid #dfe0e1;
-  color: #141414;
+  color: #040404;
   border-radius: 3px;
   transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
   box-shadow: none;
@@ -24838,7 +24884,7 @@ button.Button--full {
   /* ... */
   background-color: transparent;
   border: none;
-  color: #141414;
+  color: #040404;
   transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
   box-shadow: none;
   /* Chrome autofill styling */
@@ -24847,13 +24893,13 @@ button.Button--full {
   background-color: #f7f7f7;
 }
 .Input > .Input__InnerWrapper > input::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input > .Input__InnerWrapper > input:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input > .Input__InnerWrapper > input::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input > .Input__InnerWrapper > input::-webkit-autofill {
   box-shadow: 0 0 0 100px #fffff0 inset !important;
@@ -24873,16 +24919,16 @@ button.Button--full {
   pointer-events: none;
 }
 .Input.Input--disabled input::-moz-placeholder, .Input:not(.Input--disabled) input[disabled]::-moz-placeholder, .Input.Input--disabled .InputAddon::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input.Input--disabled input:-ms-input-placeholder, .Input:not(.Input--disabled) input[disabled]:-ms-input-placeholder, .Input.Input--disabled .InputAddon:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input.Input--disabled input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input:focus-within, .Input.Input--focus {
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   border-radius: 3px;
 }
 .Input:focus-within > .Input__InnerWrapper, .Input.Input--focus > .Input__InnerWrapper {
@@ -24890,7 +24936,7 @@ button.Button--full {
   border-color: #2270ee;
 }
 .Input:focus-within > .Input__InnerWrapper > input, .Input.Input--focus > .Input__InnerWrapper > input {
-  color: #141414;
+  color: #040404;
 }
 .Input:focus-within > .Input__InnerWrapper > input::-webkit-autofill, .Input.Input--focus > .Input__InnerWrapper > input::-webkit-autofill {
   box-shadow: 0 0 0 100px #fffff0 inset !important;
@@ -25084,34 +25130,34 @@ button.Button--full {
 }
 .Label, .Form label:not(.Field__html-label) {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 600;
 }
 .Label.Label--error, .Form label.Label--error:not(.Field__html-label) {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .Label.Label--disabled, .Form label.Label--disabled:not(.Field__html-label) {
   opacity: 0.4;
 }
 
 .Label__required {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
   margin-left: 2px;
 }
 
 .Label__optional {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   font-weight: 400;
   margin-left: 2px;
 }
 
 .Label__help {
   bottom: 2px;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   margin-left: 4px;
   position: relative;
 }
@@ -25260,10 +25306,10 @@ button.Button--full {
 .Link {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   cursor: pointer;
   font-weight: 400;
 }
@@ -25276,7 +25322,7 @@ button.Button--full {
 }
 
 .Link--red {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Link--grey {
@@ -25285,7 +25331,7 @@ button.Button--full {
 
 .Link--disabled {
   pointer-events: none;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
 
@@ -25296,7 +25342,6 @@ button.Button--full {
 
 .Mask__overlay {
   align-items: center;
-  background: rgba(255, 255, 255, 0.85);
   cursor: not-allowed;
   display: flex;
   height: 100%;
@@ -25317,6 +25362,14 @@ button.Button--full {
   cursor: auto;
 }
 
+.Mask__backdrop {
+  background: var(--colorsSurfaceDefault, #ffffff);
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  opacity: 0.85;
+}
+
 .Mask__card,
 .Mask__spinner {
   position: relative;
@@ -25343,7 +25396,7 @@ button.Button--full {
 /** @define Modal */
 .Modal {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -25352,7 +25405,7 @@ button.Button--full {
   max-height: 90vh;
   margin: 5vh auto;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
 }
 .Modal:focus {
@@ -25381,7 +25434,7 @@ button.Button--full {
 .Modal__header,
 .Modal__content,
 .Modal__footer {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px 32px;
 }
 
@@ -25412,13 +25465,13 @@ button.Button--full {
 }
 
 .Modal__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
 .Modal__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
@@ -25456,9 +25509,9 @@ button.Button--full {
 
 .MoreDetailsIcon {
   display: inline-flex;
-  background-color: #eeeeee;
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
   border-radius: 50%;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   margin-left: 4px;
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
@@ -25502,12 +25555,12 @@ button.Button--full {
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .OptionList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -25546,11 +25599,13 @@ button.Button--full {
 }
 
 .OptionList--single-select .OptionList__option--selected {
-  color: #2270ee;
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
+}
+.OptionList--single-select .OptionList__option--selected .Checkbox__label {
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
 }
 
 /* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
@@ -25627,14 +25682,14 @@ button.Button--full {
   align-items: center;
   padding-left: 24px;
   z-index: 2;
-  background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%, rgba(238, 238, 238, 0) 100%);
+  background: linear-gradient(to left, var(--colorsSurfaceGrey, #eeeeee) 70%, var(--colorsSurfaceGrey, #eeeeee) 71%, transparent 100%);
   /* Match the background color of the single selected option */
 }
 .OptionList__option:hover .OptionList__option--secondary-action {
   opacity: 1;
 }
 .OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
-  background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%, rgba(236, 244, 253, 0) 100%);
+  background: linear-gradient(to left, var(--colorsHoverPrimary, #ecf4fd) 70%, var(--colorsHoverPrimary, #ecf4fd) 71%, transparent 100%);
 }
 
 /*
@@ -25663,9 +25718,10 @@ button.Button--full {
 
 .Page {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
+  background-color: var(--colorsAppBackground, #fcfcfc);
   display: flex;
   flex-grow: 1;
   position: relative;
@@ -25760,8 +25816,8 @@ button.Button--full {
 .Page__actionToolbar {
   min-height: 56px;
   padding: 12px 24px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
   align-items: center;
@@ -25779,9 +25835,9 @@ button.Button--full {
 }
 
 .Panel {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   width: 0;
-  border-left: 1px solid #dfe0e1;
+  border-left: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -25794,7 +25850,7 @@ button.Button--full {
   opacity: 1;
 }
 .Panel--left {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-left: none;
 }
 .Panel .Panel__content {
@@ -25816,8 +25872,8 @@ button.Button--full {
 .Page__footer {
   min-height: 56px;
   padding: 16px 24px;
-  background-color: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
   align-items: center;
@@ -25842,7 +25898,7 @@ button.Button--full {
 .ProgressCircle__background {
   fill: transparent;
   transform-origin: 50% 50%;
-  stroke: #eeeeee;
+  stroke: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressCircle__circle {
@@ -25855,16 +25911,16 @@ button.Button--full {
   stroke: #08bfdf;
 }
 .ProgressCircle--blue .ProgressCircle__circle {
-  stroke: #2270ee;
+  stroke: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressCircle--red .ProgressCircle__circle {
-  stroke: #f94d32;
+  stroke: var(--colorsStatusCritical, #f94d32);
 }
 .ProgressCircle--green .ProgressCircle__circle {
-  stroke: #1fbc70;
+  stroke: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressCircle--yellow .ProgressCircle__circle {
-  stroke: #ffc902;
+  stroke: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressCircle__svg {
@@ -25884,12 +25940,13 @@ button.Button--full {
 }
 
 /** @define ProgressBar */
+/** Color Variants */
 .ProgressBar {
   /* Reset the default appearance */
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
   border-radius: 6px;
   display: block;
@@ -25905,7 +25962,7 @@ button.Button--full {
 }
 
 .ProgressBar::-webkit-progress-bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar::-webkit-progress-value {
@@ -25926,62 +25983,61 @@ button.Button--full {
 }
 
 .ProgressBar__bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar__value {
   background: #08bfdf;
 }
 
-/** Color Variants */
 .ProgressBar--blue::-webkit-progress-value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue::-moz-progress-bar {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue .ProgressBar__value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressBar--green::-webkit-progress-value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green::-moz-progress-bar {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green .ProgressBar__value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 
 .ProgressBar--red::-webkit-progress-value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red::-moz-progress-bar {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red .ProgressBar__value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 
 .ProgressBar--yellow::-webkit-progress-value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow::-moz-progress-bar {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow .ProgressBar__value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressBar--blue-grey::-webkit-progress-value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey::-moz-progress-bar {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey .ProgressBar__value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 
 /** Size Variants */
@@ -26044,7 +26100,7 @@ button.Button--full {
 
 .ProgressTracker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -26066,11 +26122,11 @@ button.Button--full {
   top: 50%;
   margin-top: -1px;
   height: 2px;
-  background-color: #dfe0e1;
+  background-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ProgressTrackerStep {
-  color: #949596;
+  color: var(--colorsTextSubdued, #737475);
   display: flex;
   align-items: center;
   position: relative;
@@ -26089,7 +26145,7 @@ button.Button--full {
 .ProgressTrackerStep:focus {
   outline: none;
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 /* Children */
@@ -26097,8 +26153,8 @@ button.Button--full {
   width: 1.8em;
   height: 1.8em;
   border-radius: 50%;
-  background: #bcbcbd;
-  color: #ffffff;
+  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
+  color: var(---colorsTextInverted, #ffffff);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -26118,10 +26174,10 @@ button.Button--full {
 }
 
 .ProgressTrackerStep--complete {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  background-color: #1fbc70;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressTrackerStep--complete .a-Icon {
   font-size: 20px;
@@ -26129,31 +26185,27 @@ button.Button--full {
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressTrackerStep--disabled {
   pointer-events: none !important;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
-  color: #949596;
   opacity: 0.6;
 }
-.ProgressTrackerStep--disabled .ProgressTrackerStep__icon, .ProgressTrackerStep--disabled:hover .ProgressTrackerStep__icon {
-  background-color: #bcbcbd;
-}
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 27px;
 }
 .FormField .a-Radio {
@@ -26227,9 +26279,9 @@ button.Button--full {
 }
 
 .Radio__box {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
-  box-shadow: 0 0 0 1px #bcbcbd inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd) inset;
   display: inline-flex;
   flex-shrink: 0;
   margin-left: 1px;
@@ -26258,7 +26310,7 @@ button.Button--full {
   top: 7px;
 }
 .Radio__box::before {
-  box-shadow: 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
   border-radius: 100%;
   bottom: 0;
   content: "";
@@ -26284,10 +26336,10 @@ button.Button--full {
   width: 100%;
 }
 .Radio--error .Radio__box {
-  box-shadow: 0 0 0 1px #ffb2a0 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderCriticalSubdued, #ffb2a0) inset;
 }
 .Radio__input:checked + .Radio__box, .Radio--checked .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio .Radio__input:checked + .Radio__box::after, .a-Radio .Radio--checked .Radio__box::after {
   background-color: transparent;
@@ -26305,37 +26357,37 @@ button.Button--full {
   height: 8px;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box, .Radio--checked.Radio--error .Radio__box {
-  box-shadow: 0 0 0 2px #e63717 inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio .Radio--error .Radio__input:checked + .Radio__box .Radio__box::after, .a-Radio .Radio--checked.Radio--error .Radio__box::after {
   background-color: transparent;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box::before, .Radio--checked.Radio--error .Radio__box::before {
-  box-shadow: 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 1px #444445 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box::before, .Radio--checked:not(.Radio--disabled):hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__box {
   box-shadow: 0 0 0 1px #f94d32 inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #f94d32 inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box::before, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Radio--error.Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #f94d32 inset, 0 0 0 3px #ffb2a0;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Radio--disabled .Radio__box {
@@ -26343,7 +26395,7 @@ button.Button--full {
   filter: grayscale(1);
 }
 .Radio--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Radio .Radio__label {
@@ -26376,7 +26428,7 @@ button.Button--full {
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;
@@ -26504,11 +26556,58 @@ button.Button--full {
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
    * Fix for collapsing trigger if no value been set, since newer
    * semantic-ui-react-v2.0.1 removes empty .text node form trigger in such scenario
    */
 }
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
+  border-color: var(--colorsBorderGrey, #dfe0e1) !important;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item.selected {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item:hover {
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error {
+  color: var(--colorsTextCritical, #f94d32);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !important;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item {
+  color: var(--colorsTextCritical, #f94d32);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item.selected {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error:focus-within {
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.visible > .text:not(.default) {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:not(.button) > .default.text {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
+  color: var(--colorsTextSubdued, #737475);
+}
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
 }
@@ -26578,13 +26677,10 @@ button.Button--full {
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.active + .Select__clear-icon, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:hover + .Select__clear-icon {
   z-index: 10;
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #a9d1ff !important;
-}
-.error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #ffb2a0 !important;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff) !important;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown::before {
   content: "";
@@ -26603,11 +26699,11 @@ button.Button--full {
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon {
   position: absolute;
   right: 2em;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {
@@ -26616,7 +26712,7 @@ button.Button--full {
 
 .Sidebar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   z-index: 10;
@@ -26636,7 +26732,7 @@ button.Button--full {
   width: 239px;
   transition: width 0.25s, opacity 0.25s;
   position: relative;
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .Sidebar__content {
@@ -26656,21 +26752,23 @@ button.Button--full {
 .Page.bg-neutral-10 .Sidebar__content,
 .Sidebar__toggle-button,
 .Page.bg-neutral-10 .Sidebar__toggle-button {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Page.bg-white .Sidebar__wrapper, .Page.bg-neutral-0 .Sidebar__wrapper,
 .Page.bg-white .Sidebar__content,
 .Page.bg-neutral-0 .Sidebar__content,
 .Page.bg-white .Sidebar__toggle-button,
 .Page.bg-neutral-0 .Sidebar__toggle-button {
-  background: #fcfcfc;
+  background: var(--colorsAppBackground, #fcfcfc);
 }
 
 .Sidebar--collapsed {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__wrapper {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__content {
   visibility: hidden;
@@ -26688,6 +26786,10 @@ button.Button--full {
   width: 239px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar--temporary .Sidebar__content {
+  visibility: visible;
+  opacity: 1;
+}
 
 .Sidebar--touch .Sidebar__wrapper {
   min-height: 50px;
@@ -26701,19 +26803,23 @@ button.Button--full {
 }
 
 .Sidebar__toggle-button {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 16px;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   opacity: 0;
   transition: opacity 0.25s;
   padding: 3px !important;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Sidebar__toggle-button:hover {
-  background-color: #ecf4fd;
-  color: #2270ee;
-  border-color: #2270ee;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextPrimary, #2270ee);
+  border-color: var(--colorsTextPrimary, #2270ee);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar__toggle-button:hover::before {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
 
 .Sidebar__toggle-button-wrapper {
   position: absolute;
@@ -26723,7 +26829,7 @@ button.Button--full {
 }
 
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {
@@ -26747,11 +26853,11 @@ button.Button--full {
 
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -26763,9 +26869,10 @@ button.Button--full {
 }
 
 .SideNav__title {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   margin: 0 16px;
   padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .SideNav__list {
@@ -26784,7 +26891,7 @@ button.Button--full {
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -26797,11 +26904,11 @@ button.Button--full {
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: #ecf4fd;
-  color: #2270ee;
+  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .SideNavGroup {
@@ -26825,16 +26932,16 @@ button.Button--full {
 
 .Snackbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
           animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  background: #2d2e31;
+  background: var(--colorsSurfaceInverted, #2d2e31);
   border-radius: 3px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: inline-flex;
   align-items: center;
   /** Material's width limit. Soft rule against long copy in this pattern. */
@@ -26852,14 +26959,14 @@ button.Button--full {
 
 .Snackbar__action {
   background: transparent;
-  color: #a9d1ff;
+  color: var(--colorsTextPrimarySubdued, #a9d1ff);
   cursor: pointer;
   line-height: 1.5;
   text-align: right;
   padding-left: 16px;
 }
 .Snackbar__action:hover {
-  color: #ecf4fd;
+  text-decoration: underline;
 }
 
 .Snackbar__close.Button {
@@ -26868,7 +26975,7 @@ button.Button--full {
   margin-right: -4px;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
 }
 .Snackbar__close.Button .a-Icon,
 .Snackbar__close.Button .a-Icon > svg {
@@ -26882,7 +26989,7 @@ button.Button--full {
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #949596);
 }
 
 .Snackbar--floating {
@@ -27025,6 +27132,15 @@ button.Button--full {
   display: flex;
 }
 
+.StackItem {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.StackItem--fill {
+  flex: 1 1 auto;
+}
+
 /* Flex Direction */
 .Stack--direction-row {
   flex-direction: row;
@@ -27223,18 +27339,9 @@ button.Button--full {
   margin-top: initial;
 }
 
-.StackItem {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-.StackItem--fill {
-  flex: 1 1 auto;
-}
-
 .StatusLight {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -27256,7 +27363,7 @@ button.Button--full {
   min-width: 12px;
   height: 12px;
   border-radius: 12px;
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
   margin: 8px;
 }
 .StatusLight .StatusLight__indicator::before {
@@ -27274,16 +27381,16 @@ button.Button--full {
   transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
 }
 .StatusLight .StatusLight__indicator--info {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 .StatusLight .StatusLight__indicator--success {
-  background-color: #18a761;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .StatusLight .StatusLight__indicator--warning {
-  background-color: #ffc902;
+  background-color: var(--colorsStatusWarning, #ffbe00);
 }
 .StatusLight .StatusLight__indicator--critical {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 
 @-webkit-keyframes shadow-pulse {
@@ -27325,7 +27432,7 @@ button.Button--full {
   opacity: 0.4;
 }
 .StatusLight--disabled .StatusLight__indicator {
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
 }
 .StatusLight--disabled .StatusLight__indicator::before {
   -webkit-animation: none;
@@ -27362,11 +27469,11 @@ button.Button--full {
 .Tab {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   cursor: pointer;
   line-height: 1;
   display: flex;
@@ -27391,7 +27498,7 @@ button.Button--full {
   height: 100%;
   display: flex;
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -27417,7 +27524,7 @@ button.Button--full {
 .Tab.Tab--focus-visible:focus::after {
   position: absolute;
   content: "";
-  box-shadow: inset 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   top: 0;
   bottom: 0;
   left: 0;
@@ -27425,8 +27532,8 @@ button.Button--full {
 }
 
 .Tab--inactive:hover, .Tab--inactive--hover {
-  box-shadow: 0 -2px 0 #a9d1ff inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #a9d1ff) inset;
+  color: var(--colorsTextSubdued, #737475);
   text-decoration: none;
 }
 
@@ -27440,7 +27547,7 @@ button.Button--full {
   padding: 12px 16px;
   margin-right: 1px;
   min-width: 64px;
-  box-shadow: 0 -1px 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 var(--colorsBorderGrey, #dfe0e1) inset;
   position: relative;
 }
 .TabGroup--index .Tab:hover, .TabGroup--index .Tab--hover {
@@ -27456,7 +27563,8 @@ button.Button--full {
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceInvertedStrong, #141414);
+  opacity: 0.08;
 }
 .CardSection .TabGroup--index .Tab {
   box-shadow: none;
@@ -27466,23 +27574,23 @@ button.Button--full {
   padding: 16px;
 }
 .TabGroup--index .Tab--active {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .TabGroup--index .Tab--active:hover {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .CardSection .TabGroup--index .Tab--active {
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1, 1px 0 0 #dfe0e1, 0 1px 0 #ffffff;
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1), 1px 0 0 var(--colorsBorderGrey, #dfe0e1), 0 1px 0 var(--colorsSurfaceDefault, #ffffff);
 }
 
 .Tab--active {
-  box-shadow: 0 -2px 0 #2270ee inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
+  color: var(--colorsTextDefault, #141414);
 }
 .Tab--active:hover {
-  box-shadow: 0 -2px 0 #2270ee inset;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
 }
 
 .TabGroup--dark .Tab--active,
@@ -27496,10 +27604,10 @@ button.Button--full {
   box-shadow: none;
 }
 .TabGroup--dark .Tab:not(.Tab--active) {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
 }
 .TabGroup--dark .Tab:not(.Tab--active):hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
   box-shadow: none;
 }
 
@@ -27509,7 +27617,7 @@ button.Button--full {
 
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -27529,7 +27637,7 @@ button.Button--full {
 }
 
 .TabGroup--divider {
-  box-shadow: 0 -1px 0 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 
 .TabGroup__Item {
@@ -27551,7 +27659,7 @@ button.Button--full {
 }
 .TabGroup--verticallyDivided .Tab::before {
   box-shadow: -1px 0 0;
-  color: rgba(20, 20, 20, 0.3);
+  color: var(--colorsBorderGrey, #dfe0e1);
   content: "";
   height: 50%;
   position: absolute;
@@ -27587,7 +27695,7 @@ button.Button--full {
   box-shadow: 1px 0 0;
 }
 .TabGroup--verticallyDivided.TabGroup--dark .Tab--inactive::before {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TabGroup__action {
@@ -27609,7 +27717,7 @@ button.Button--full {
 
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -27707,11 +27815,11 @@ button.Button--full {
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-column-resizer:hover {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 .Table .k-grid-header-sticky[style*="border-right-width: 1px;"],
 .Table .k-grid-content-sticky[style*="border-right-width: 1px;"] {
-  box-shadow: 2px 3px 5px 0 rgba(20, 20, 20, 0.1);
+  box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
 .Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
   background-color: #eeeeee;
@@ -27724,7 +27832,7 @@ button.Button--full {
 /* Filter popups are rendered outside .Table in portal */
 .k-popup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -27744,11 +27852,11 @@ button.Button--full {
 
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   border-radius: 3px;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-size: 14px;
   font-weight: 600;
@@ -27958,11 +28066,11 @@ button.Button--full {
 
 .Tag .Tag__close.Button:focus {
   box-shadow: none;
-  background-color: rgba(20, 20, 20, 0.2);
+  background-color: rgba(4, 4, 4, 0.2);
 }
 .Tag--subtle.Tag .Tag__close.Button:focus,
 .Tag--default.Tag .Tag__close.Button:focus {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 
 .Tag--lightText,
@@ -27994,7 +28102,7 @@ button.Button--full {
 
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -28005,7 +28113,7 @@ button.Button--full {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -28033,10 +28141,10 @@ button.Button--full {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: flex;
   flex: 0 0 auto;
   font-size: 20px;
@@ -28050,9 +28158,9 @@ button.Button--full {
 .TakeoverHeader--light {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 #dfe0e1;
-  color: #444445;
+  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
 }
 
 .TakeoverHeader__title {
@@ -28101,16 +28209,16 @@ button.Button--full {
 }
 
 .TakeoverSection {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px;
 }
 .TakeoverSection + .TakeoverSection {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .TakeoverFooter {
-  background: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   flex: 0 0 auto;
   padding-top: 16px;
@@ -28135,7 +28243,7 @@ button.Button--full {
 
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;
@@ -28149,7 +28257,7 @@ button.Button--full {
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -28159,7 +28267,7 @@ button.Button--full {
   border-radius: 3px;
   box-shadow: none;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   font-size: 16px;
   outline: none;
   line-height: 1.2857;
@@ -28174,13 +28282,13 @@ button.Button--full {
   /* States */
 }
 .TextArea::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 @supports (-moz-appearance: none) {
   .TextArea {
@@ -28188,10 +28296,10 @@ button.Button--full {
   }
 }
 .TextArea:focus {
-  color: #141414;
+  color: #040404;
   border-color: #2270ee;
   background-color: #ffffff;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   -webkit-appearance: none;
 }
 .TextArea.TextArea--disabled, .TextArea:not(.TextArea--disabled)[disabled] {
@@ -28203,13 +28311,13 @@ button.Button--full {
   background-color: #f7f7f7;
 }
 .TextArea[readonly]::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea[readonly]:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea[readonly]::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .TextArea.TextArea--error {
@@ -28239,11 +28347,11 @@ button.Button--full {
 
 .Thumbnail {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderDefault, #dfe0e1);
   display: inline-block;
   position: relative;
   overflow: hidden;
@@ -28309,13 +28417,13 @@ button.Button--full {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: rgba(20, 20, 20, 0.4);
-  color: #ffffff;
+  background-color: var(--colorsActiveStrong, rgba(20, 20, 20, 0.2));
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -28347,12 +28455,12 @@ button.Button--full {
 
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   display: flex;
@@ -28369,16 +28477,16 @@ button.Button--full {
   word-break: break-word;
 }
 .Toast--info .Toast__title {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__title {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__title {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__title {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__icon {
@@ -28387,20 +28495,20 @@ button.Button--full {
   transform: translateY(2px);
 }
 .Toast--info .Toast__icon {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__icon {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__icon {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__icon {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__description {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   margin-top: 8px;
 }
@@ -28436,7 +28544,7 @@ button.Button--full {
 
 .ToastGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -28482,11 +28590,11 @@ button.Button--full {
   margin-right: -16px;
 }
 .Togglebox:hover .CardSection {
-  border-color: #56a4ff;
+  border-color: var(--colorsBorderPrimary, #56a4ff);
 }
 .Togglebox:focus-within .CardSection {
-  border-color: #56a4ff;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #56a4ff);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Togglebox__content {
@@ -28516,7 +28624,7 @@ button.Button--full {
 }
 
 .Togglebox__title {
-  color: #2d2e31;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 700;
 }
@@ -28525,13 +28633,13 @@ button.Button--full {
 }
 
 .Togglebox__children {
-  color: #2d2e31;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   line-height: 1;
   width: 100%;
 }
 .Togglebox__content--title .Togglebox__children {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Togglebox--radio .Togglebox__children {
   padding-left: 9px;
@@ -28545,7 +28653,7 @@ button.Button--full {
 
 .ToggleSwitch {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -28574,7 +28682,7 @@ button.Button--full {
 }
 
 .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
   border-radius: 13px;
   box-sizing: border-box;
   display: inline-flex;
@@ -28585,7 +28693,7 @@ button.Button--full {
   width: 42px;
 }
 .ToggleSwitch__element::before {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   content: "";
@@ -28601,25 +28709,25 @@ button.Button--full {
   margin: 0;
 }
 .ToggleSwitch:hover .ToggleSwitch__element {
-  background: #bcbcbd;
+  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
 }
 .ToggleSwitch--disabled .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #18a761;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element::before, .ToggleSwitch--checked .ToggleSwitch__element::before {
   left: 22px;
 }
 .ToggleSwitch:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #10864b;
+  background: var(--colorsStatusSuccessStrong, #10864b);
 }
 .ToggleSwitch--disabled .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled .ToggleSwitch--checked .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #606162;
+  background: var(--colorsSurfaceDisabled, #606162);
 }
 .ToggleSwitch--focus-visible:focus-within .ToggleSwitch__element {
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Label.ToggleSwitch__label {
@@ -28627,6 +28735,7 @@ button.Button--full {
   font-weight: normal;
   margin-left: 12px;
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
+  color: var(--colorsTextDefault, #141414);
   /* ToggleSwitch's height is exactly 1px taller than the standard label */
   margin-top: 1px;
 }
@@ -28655,7 +28764,7 @@ button.Button--full {
 .Tooltip,
 .Tooltip__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -28689,9 +28798,9 @@ button.Button--full {
 .Tooltip__body.Tooltip__body {
   display: inline-flex;
   font-size: 14px;
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
   border-radius: 3px;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   max-width: 18em;
   padding: 4px 8px;
   position: relative;
@@ -28747,7 +28856,7 @@ _:-ms-lang(x), .Tooltip__body {
   }
 }
 .Tooltip__caret::before {
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
 }
 
 .bg-white {
@@ -28759,11 +28868,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .bg-black {
-  background-color: #141414;
+  background-color: #040404;
 }
 
 .bg-black-i {
-  background-color: #141414 !important;
+  background-color: #040404 !important;
 }
 
 .bg-blue {
@@ -28998,6 +29107,14 @@ _:-ms-lang(x), .Tooltip__body {
   background-color: #141414 !important;
 }
 
+.bg-neutral-500 {
+  background-color: #040404;
+}
+
+.bg-neutral-500-i {
+  background-color: #040404 !important;
+}
+
 .bg-blue-grey-100 {
   background-color: #eaeff2;
 }
@@ -29695,11 +29812,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .c-black {
-  color: #141414;
+  color: #040404;
 }
 
 .c-black-i {
-  color: #141414 !important;
+  color: #040404 !important;
 }
 
 .c-blue {
@@ -29934,6 +30051,14 @@ _:-ms-lang(x), .Tooltip__body {
   color: #141414 !important;
 }
 
+.c-neutral-500 {
+  color: #040404;
+}
+
+.c-neutral-500-i {
+  color: #040404 !important;
+}
+
 .c-blue-grey-100 {
   color: #eaeff2;
 }