@servicetitan/design-system 11.3.1 → 11.4.2

package/dist/components/index.css

@@ -17,12 +17,12 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -118,7 +118,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -126,14 +126,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
@@ -152,7 +152,7 @@ span.Popover {
 
 .ActionMenu {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   padding: 12px 0;
@@ -175,7 +175,7 @@ span.Popover {
 }
 .ActionMenu .ActionMenuItem {
   align-items: center;
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   display: flex;
   flex-direction: row;
   min-height: 26px;
@@ -241,13 +241,13 @@ span.Popover {
   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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -368,7 +368,7 @@ span.Popover {
 /* 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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -460,22 +460,22 @@ span.Popover {
 
 .Trigger {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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 {
@@ -485,11 +485,12 @@ span.Popover {
   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%;
@@ -512,36 +513,36 @@ span.Popover {
 }
 
 .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;
@@ -550,7 +551,7 @@ span.Popover {
 .Trigger__shortLabel {
   align-items: center;
   background: transparent;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   display: flex;
   margin: -7px 0 -7px -12px;
   z-index: 0;
@@ -563,12 +564,11 @@ span.Popover {
   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 {
@@ -582,10 +582,10 @@ span.Popover {
   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 {
@@ -599,10 +599,10 @@ span.Popover {
   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 {
@@ -614,10 +614,10 @@ span.Popover {
 
 .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 {
@@ -633,21 +633,21 @@ span.Popover {
 }
 
 .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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -656,7 +656,7 @@ span.Popover {
   background-size: cover;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-weight: 700;
   justify-content: center;
@@ -720,7 +720,7 @@ span.Popover {
 /** @define Backdrop */
 .Backdrop {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: none;
@@ -729,10 +729,10 @@ span.Popover {
   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 {
@@ -742,7 +742,7 @@ span.Popover {
 .BackLink {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   cursor: pointer;
@@ -759,7 +759,7 @@ span.Popover {
 }
 .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 {
@@ -768,7 +768,7 @@ span.Popover {
 
 .Banner {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: #ffffff;
@@ -880,8 +880,8 @@ span.Popover {
 }
 
 .Banner__close.a-Icon {
+  align-self: baseline;
   color: var(--colorsTextDefault, #141414);
-  cursor: pointer;
   font-size: 1.2em;
   margin-left: 24px;
   margin-top: 6px;
@@ -889,7 +889,7 @@ span.Popover {
 
 .BodyText {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-family: "Nunito Sans", sans-serif;
@@ -915,7 +915,7 @@ span.Popover {
 
 .Breadcrumb {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -926,7 +926,7 @@ span.Popover {
 
 .Breadcrumb-Link {
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   display: inline-flex;
   line-height: 1.5;
   margin-top: 8px;
@@ -937,11 +937,11 @@ span.Popover {
 }
 .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;
 }
@@ -956,7 +956,7 @@ span.Popover {
 }
 
 .Breadcrumb-Link:last-child {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .Breadcrumb-Link:last-child .Breadcrumb-Link__icon {
   display: none;
@@ -964,7 +964,7 @@ span.Popover {
 
 .Button {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -1004,10 +1004,10 @@ span.Popover {
   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;
@@ -1018,10 +1018,10 @@ span.Popover {
   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);
@@ -1030,10 +1030,10 @@ span.Popover {
   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 {
@@ -1080,7 +1080,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;
@@ -1115,7 +1115,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);
@@ -1345,7 +1345,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) {
@@ -1373,20 +1373,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 {
@@ -1394,35 +1394,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 {
@@ -1436,12 +1436,12 @@ button.Button--full {
 
 .Card {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
 }
 
@@ -1513,11 +1513,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;
@@ -1531,7 +1531,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;
@@ -1560,24 +1560,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;
@@ -1621,8 +1621,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 {
@@ -1667,7 +1667,7 @@ button.Button--full {
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -1874,7 +1874,7 @@ button.Button--full {
 
 .Collapsible {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -1890,7 +1890,7 @@ button.Button--full {
 
 .ColorPicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -1912,8 +1912,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) {
@@ -1930,7 +1930,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 {
@@ -1940,8 +1940,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;
@@ -1949,7 +1949,7 @@ button.Button--full {
 
 .Container {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: block;
@@ -2000,7 +2000,7 @@ button.Button--full {
 
 .DataList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: table;
@@ -2030,17 +2030,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 {
@@ -2059,7 +2059,7 @@ button.Button--full {
 /* stylelint-disable-line */
 .DatePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -2091,15 +2091,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, #141414);
   /* 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 {
@@ -2110,20 +2147,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   width: min-content;
@@ -2144,15 +2181,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 {
@@ -2162,7 +2191,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;
@@ -2178,16 +2207,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, #141414);
   /* 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;
 }
@@ -2197,7 +2226,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex: 0 0 auto;
@@ -2306,10 +2335,10 @@ button.Button--full {
 
 .Drawer {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -2329,8 +2358,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;
@@ -2368,7 +2397,7 @@ button.Button--full {
   font-size: 20px;
   flex-grow: 1;
   margin: 0;
-  color: #444445;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .Drawer__header-close.Button {
@@ -2382,7 +2411,7 @@ button.Button--full {
 }
 
 .Drawer__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   padding: 16px 24px;
 }
@@ -2395,14 +2424,14 @@ button.Button--full {
 
 .Eyebrow {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -2420,7 +2449,7 @@ button.Button--full {
 
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -2431,14 +2460,14 @@ button.Button--full {
 
 .FilePicker__File {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -2455,14 +2484,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;
 }
 
@@ -2501,14 +2530,14 @@ button.Button--full {
 
 .FilterButton {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -2579,7 +2608,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;
@@ -2587,10 +2616,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;
@@ -2603,7 +2632,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;
@@ -2638,31 +2667,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 ***/
@@ -2749,7 +2795,7 @@ button.Button--full {
 
 .FormField__helpers {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -2833,7 +2879,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -2967,7 +3013,7 @@ button.Button--full {
 
 .Frame {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   height: 100vh;
@@ -2997,7 +3043,7 @@ button.Button--full {
 
 .Grid {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -3060,7 +3106,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;
@@ -3075,7 +3121,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;
@@ -3093,7 +3139,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%;
@@ -3114,16 +3160,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 {
@@ -8130,19 +8176,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;
@@ -8163,19 +8209,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;
@@ -8196,19 +8242,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;
@@ -8358,7 +8404,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;
@@ -8506,7 +8552,7 @@ button.Button--full {
 }
 .Headline {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;
@@ -8531,7 +8577,19 @@ button.Button--full {
   font-size: 16px;
 }
 
-.a-Icon {
+button.a-Icon {
+  all: unset;
+  cursor: pointer;
+  pointer-events: auto;
+}
+button.a-Icon:focus {
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
+  outline: 0;
+}
+
+.a-Icon,
+button.a-Icon {
   backface-visibility: hidden;
   color: inherit;
   display: inline-block;
@@ -8543,7 +8601,8 @@ button.Button--full {
   vertical-align: middle;
   width: auto;
 }
-.a-Icon svg {
+.a-Icon svg,
+button.a-Icon svg {
   vertical-align: bottom;
 }
 
@@ -8643,7 +8702,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 {
@@ -8745,14 +8804,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, #141414);
   /* 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 ***/
@@ -8799,7 +8858,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;
@@ -8826,7 +8885,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 */
@@ -8835,7 +8894,7 @@ button.Button--full {
   background-color: #f7f7f7;
 }
 .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;
@@ -8855,10 +8914,10 @@ button.Button--full {
   pointer-events: none;
 }
 .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 {
@@ -8866,7 +8925,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;
@@ -8913,7 +8972,7 @@ button.Button--full {
 .Input.Input--error:focus-within .InputAddon, .Input.Input--error.Input--focus .InputAddon {
   border-color: #e63717;
 }
-.Input.Input--error .InputAddon > i.a-Icon {
+.Input.Input--error .InputAddon > .a-Icon {
   color: #e63717;
 }
 .Input.Input--loading.Input--loading .Spinner {
@@ -8929,14 +8988,15 @@ button.Button--full {
   box-shadow: none !important;
   border-radius: 0 !important;
 }
-.Input > .Input__InnerWrapper i.a-Icon {
-  cursor: default;
-  color: #737475;
+.Input > .Input__InnerWrapper .a-Icon:not(button) {
   pointer-events: none;
+}
+.Input > .Input__InnerWrapper .a-Icon {
+  color: #737475;
   transition: opacity 0.3s ease;
   line-height: inherit;
 }
-.Input > .Input__InnerWrapper i.a-Icon svg {
+.Input > .Input__InnerWrapper .a-Icon svg {
   font-size: inherit;
   text-align: center;
   vertical-align: middle;
@@ -8977,6 +9037,9 @@ button.Button--full {
 .Input.Input--large > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
   margin: -6px 0;
 }
+.Input.Input--large > .Input__InnerWrapper > .InputAddon button.a-Icon > svg {
+  margin: -4px 0 -1px;
+}
 .Input.Input--xsmall > .Input__InnerWrapper > .InputAddon *:not(input) {
   line-height: 12px;
 }
@@ -9051,34 +9114,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, #141414);
   /* 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;
 }
@@ -9227,10 +9290,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, #141414);
   /* 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;
 }
@@ -9243,7 +9306,7 @@ button.Button--full {
 }
 
 .Link--red {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Link--grey {
@@ -9252,7 +9315,7 @@ button.Button--full {
 
 .Link--disabled {
   pointer-events: none;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
 
@@ -9263,7 +9326,6 @@ button.Button--full {
 
 .Mask__overlay {
   align-items: center;
-  background: rgba(255, 255, 255, 0.85);
   cursor: not-allowed;
   display: flex;
   height: 100%;
@@ -9284,6 +9346,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;
@@ -9310,7 +9380,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -9319,7 +9389,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 {
@@ -9348,7 +9418,7 @@ button.Button--full {
 .Modal__header,
 .Modal__content,
 .Modal__footer {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px 32px;
 }
 
@@ -9379,13 +9449,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;
 }
@@ -9423,9 +9493,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;
@@ -9469,12 +9539,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -9513,11 +9583,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 */
@@ -9594,14 +9666,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%);
 }
 
 /*
@@ -9630,9 +9702,10 @@ button.Button--full {
 
 .Page {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -9727,8 +9800,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;
@@ -9746,9 +9819,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;
@@ -9761,7 +9834,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 {
@@ -9783,8 +9856,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;
@@ -9809,7 +9882,7 @@ button.Button--full {
 .ProgressCircle__background {
   fill: transparent;
   transform-origin: 50% 50%;
-  stroke: #eeeeee;
+  stroke: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressCircle__circle {
@@ -9822,16 +9895,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 {
@@ -9851,10 +9924,11 @@ button.Button--full {
 }
 
 /** @define ProgressBar */
+/** Color Variants */
 .ProgressBar {
   /* Reset the default appearance */
   appearance: none;
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
   border-radius: 6px;
   display: block;
@@ -9869,7 +9943,7 @@ button.Button--full {
 }
 
 .ProgressBar::-webkit-progress-bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar::-webkit-progress-value {
@@ -9889,62 +9963,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 */
@@ -9995,7 +10068,7 @@ button.Button--full {
 
 .ProgressTracker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -10017,11 +10090,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;
@@ -10040,7 +10113,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 */
@@ -10048,8 +10121,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;
@@ -10069,10 +10142,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;
@@ -10080,27 +10153,23 @@ 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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -10283,7 +10352,7 @@ button.Button--full {
   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 var(--colorsBorderPrimary, #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 var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -10327,7 +10396,7 @@ button.Button--full {
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;
@@ -10455,11 +10524,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;
 }
@@ -10529,13 +10645,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: "";
@@ -10554,11 +10667,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 {
@@ -10567,7 +10680,7 @@ button.Button--full {
 
 .Sidebar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   z-index: 10;
@@ -10587,7 +10700,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 {
@@ -10607,21 +10720,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;
@@ -10639,6 +10754,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;
@@ -10652,19 +10771,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;
@@ -10674,7 +10797,7 @@ button.Button--full {
 }
 
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {
@@ -10698,11 +10821,11 @@ button.Button--full {
 
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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 {
@@ -10714,9 +10837,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 {
@@ -10735,7 +10859,7 @@ button.Button--full {
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -10748,11 +10872,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 {
@@ -10776,15 +10900,15 @@ button.Button--full {
 
 .Snackbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   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. */
@@ -10802,14 +10926,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 {
@@ -10818,7 +10942,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 {
@@ -10832,7 +10956,7 @@ button.Button--full {
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #949596);
 }
 
 .Snackbar--floating {
@@ -10939,6 +11063,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;
@@ -11137,18 +11270,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -11170,7 +11294,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 {
@@ -11188,16 +11312,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);
 }
 
 @keyframes shadow-pulse {
@@ -11223,7 +11347,7 @@ button.Button--full {
   opacity: 0.4;
 }
 .StatusLight--disabled .StatusLight__indicator {
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
 }
 .StatusLight--disabled .StatusLight__indicator::before {
   animation: none;
@@ -11258,11 +11382,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, #141414);
   /* 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;
@@ -11284,7 +11408,7 @@ button.Button--full {
   height: 100%;
   display: flex;
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -11310,7 +11434,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;
@@ -11318,8 +11442,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;
 }
 
@@ -11333,7 +11457,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 {
@@ -11349,7 +11473,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;
@@ -11359,23 +11484,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,
@@ -11389,10 +11514,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;
 }
 
@@ -11402,7 +11527,7 @@ button.Button--full {
 
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -11422,7 +11547,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 {
@@ -11444,7 +11569,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;
@@ -11480,7 +11605,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 {
@@ -11502,7 +11627,7 @@ button.Button--full {
 
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -11516,17 +11641,6 @@ button.Button--full {
 .Table .k-grid-header .k-grid-header-wrap {
   border-right-color: transparent;
 }
-.Table:not(.Table--striped) .k-alt,
-.Table:not(.Table--striped) .k-grid-content-sticky td {
-  background-color: transparent;
-}
-.Table:not(.Table--striped) .k-alt:hover,
-.Table:not(.Table--striped) .k-grid-content-sticky td:hover {
-  background-color: #f5f5f5;
-}
-.Table:not(.Table--striped) .k-master-row:not(:hover) {
-  background: transparent;
-}
 .Table.Table--master-detail > .k-grid-header colgroup > :first-child {
   display: none;
 }
@@ -11542,17 +11656,6 @@ button.Button--full {
 .Table.Table--master-detail > .k-grid-container > .k-grid-content > * > .k-grid-table > tbody > * > .k-hierarchy-cell {
   display: none;
 }
-.Table .k-state-selected td {
-  border-color: #d5e7fb;
-}
-.Table .k-state-selected:hover td {
-  background-color: #d5e7fb;
-}
-.Table .k-pager-wrap .k-state-selected {
-  background-color: #2270ee;
-  border-radius: 3px;
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
@@ -11567,7 +11670,7 @@ button.Button--full {
   bottom: 8px;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical::before {
@@ -11578,12 +11681,6 @@ button.Button--full {
 .Table .k-grid-header .k-header .k-grid-column-menu.k-grid-filter {
   border-radius: 3px;
 }
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
-  background-color: #2270ee;
-}
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header .k-link {
   font-weight: 400;
 }
@@ -11594,24 +11691,123 @@ 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);
-}
-.Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
-  background-color: #eeeeee;
+  box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
 .Table .k-i-sort-asc-sm,
 .Table .k-i-sort-desc-sm {
   font-size: 18px;
 }
+.Table.k-grid {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-grid-header {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-grid-header .k-grid-filter:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-header-column-menu:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-hierarchy-cell .k-icon:hover {
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
+  background-color: var(--colorsSurfacePrimary, #141414);
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-grid-header .k-i-sort-asc-sm,
+.Table.k-grid .k-grid-header .k-i-sort-desc-sm,
+.Table.k-grid .k-grid-header .k-sort-order {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.Table.k-grid .k-state-selected td {
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+}
+.Table.k-grid .k-state-selected:hover td {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Table.k-grid tr.k-alt {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid tr.k-alt:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-alt,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td {
+  background-color: transparent;
+}
+.Table.k-grid:not(.Table--striped) .k-alt:hover,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-master-row:not(:hover) {
+  background: transparent;
+}
+.Table.k-grid.Table--sortable .k-header:hover,
+.Table.k-grid.Table--sortable th.k-header.k-sorted {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-grid-content {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid tbody tr.k-state-hover,
+.Table.k-grid tbody tr:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-checkbox {
+  border-color: var(--colorsBorderGreyStrong, #bcbcbd);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-checkbox.k-checked, .Table.k-grid .k-checkbox:checked {
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+}
+.Table.k-grid .k-checkbox.k-state-focus, .Table.k-grid .k-checkbox:checked:focus, .Table.k-grid .k-checkbox:focus {
+  box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #ecf4fd);
+}
+.Table.k-grid .k-filter-row > td,
+.Table.k-grid .k-filter-row > th,
+.Table.k-grid td,
+.Table.k-grid .k-grid-content-locked,
+.Table.k-grid .k-grid-footer,
+.Table.k-grid .k-grid-footer-locked,
+.Table.k-grid .k-grid-footer-wrap,
+.Table.k-grid .k-grid-header,
+.Table.k-grid .k-grid-header-locked,
+.Table.k-grid .k-grid-header-wrap,
+.Table.k-grid .k-grouping-header,
+.Table.k-grid .k-grouping-header .k-group-indicator,
+.Table.k-grid .k-header,
+.Table.k-grid th.k-header {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
+.Table.k-grid .k-pager-wrap {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-pager-wrap .k-state-selected {
+  background-color: var(--colorsSurfacePrimary, #141414);
+  border-radius: 3px;
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-pager-wrap .k-pager-nav.k-link:hover,
+.Table.k-grid .k-pager-wrap .k-pager-refresh:hover,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-nav.k-link,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-refresh {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
 
 /* 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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -11631,11 +11827,11 @@ button.Button--full {
 
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -11845,11 +12041,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,
@@ -11881,7 +12077,7 @@ button.Button--full {
 
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -11892,7 +12088,7 @@ button.Button--full {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -11920,10 +12116,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;
@@ -11937,9 +12133,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 {
@@ -11988,16 +12184,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;
@@ -12022,7 +12218,7 @@ button.Button--full {
 
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;
@@ -12036,7 +12232,7 @@ button.Button--full {
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -12046,7 +12242,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;
@@ -12061,7 +12257,7 @@ button.Button--full {
   /* States */
 }
 .TextArea::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 @supports (-moz-appearance: none) {
   .TextArea {
@@ -12069,10 +12265,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] {
@@ -12084,7 +12280,7 @@ button.Button--full {
   background-color: #f7f7f7;
 }
 .TextArea[readonly]::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .TextArea.TextArea--error {
@@ -12114,7 +12310,7 @@ button.Button--full {
 
 .Thumbnail {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -12186,7 +12382,7 @@ button.Button--full {
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -12218,12 +12414,12 @@ button.Button--full {
 
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* 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;
@@ -12240,16 +12436,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 {
@@ -12258,20 +12454,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;
 }
@@ -12307,7 +12503,7 @@ button.Button--full {
 
 .ToastGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -12357,7 +12553,7 @@ button.Button--full {
 }
 .Togglebox:focus-within .CardSection {
   border-color: var(--colorsBorderPrimary, #56a4ff);
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Togglebox__content {
@@ -12416,7 +12612,7 @@ button.Button--full {
 
 .ToggleSwitch {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -12490,7 +12686,7 @@ button.Button--full {
   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 {
@@ -12527,7 +12723,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, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -12561,9 +12757,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;
@@ -12602,7 +12798,7 @@ _:-ms-lang(x), .Tooltip__body {
   }
 }
 .Tooltip__caret::before {
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
 }
 
 /*# sourceMappingURL=index.css.map */