@servicetitan/design-system 11.3.0 → 11.4.1

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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
   width: 100%;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
-  color: #141414;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
   padding: 7px 12px;
   cursor: pointer;
   position: relative;
 }
 .Trigger:focus, .Trigger:active {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   outline: 0;
 }
 .Trigger .TagGroup {
@@ -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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: #ffffff;
@@ -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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   text-align: left;
 }
 
@@ -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,11 +1667,11 @@ button.Button--full {
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 25px;
 }
 .FormField .a-Checkbox {
@@ -1745,9 +1745,9 @@ button.Button--full {
 }
 
 .Checkbox__box {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #bcbcbd;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
   box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
@@ -1778,10 +1778,10 @@ button.Button--full {
   margin-bottom: -6px;
 }
 .Checkbox--error .Checkbox__box {
-  border-color: #ffb2a0;
+  border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 #2270ee inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -1792,7 +1792,7 @@ button.Button--full {
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 white inset, -2px 0 0 0 white inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -1807,7 +1807,7 @@ button.Button--full {
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 white inset, -2.5px 0 0 0 white inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -1819,39 +1819,39 @@ button.Button--full {
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #ffb2a0;
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #a9d1ff;
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #444445;
+  border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 4px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: #e63717;
-  box-shadow: 0 0 0 4px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Checkbox--disabled .Checkbox__box {
@@ -1859,7 +1859,7 @@ button.Button--full {
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {
@@ -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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
   justify-content: center;
 }
 .DatePicker__calendar .k-calendar {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border: none;
+  color: var(--colorsTextDefault, #141414);
   /* Kendo team did not updated classnames, so color not passed correctly via _kendo-variables.scss */
 }
+.DatePicker__calendar .k-calendar.k-calendar-infinite .k-calendar-view::after {
+  box-shadow: 0 0 38px 19px var(--colorsSurfaceDefault, #ffffff);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-today {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td:hover .k-link {
+  border: var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-state-selected .k-link {
+  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #2270ee);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  color: var(--colorsTextDefault, #141414);
+  box-shadow: inset -1px 0 var(--colorsBorderGreyStrong, #bcbcbd);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation::before, .DatePicker__calendar .k-calendar .k-calendar-navigation::after {
+  box-shadow: 0 0 6em 3em var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation-highlight {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.DatePicker__calendar .k-calendar .k-content {
+  background-color: unset;
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
 .DatePicker__calendar .k-calendar table th,
 .DatePicker__calendar .k-calendar .k-calendar-navigation .k-calendar-navigation-marker,
 .DatePicker__calendar .k-calendar .k-calendar-header .k-title {
@@ -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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: #dfe0e1;
+  color: var(--colorsBorderGrey, #dfe0e1);
   margin: 0;
   z-index: 1;
 }
@@ -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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background-color: #fff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   bottom: 0;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.15);
   box-sizing: border-box;
@@ -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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 600;
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;
@@ -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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
   display: flex;
   margin-bottom: 16px;
@@ -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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
   padding: 4px 8px;
   border-radius: 500em;
   border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   font-size: 12px;
   cursor: pointer;
   background-color: transparent;
@@ -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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* 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, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;
@@ -8643,7 +8689,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 +8791,14 @@ button.Button--full {
 /*** Input styles ***/
 .Input {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   display: inline-flex;
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
   /* Sizes */
   /*** States ***/
@@ -8799,7 +8845,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 +8872,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 +8881,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 +8901,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 +8912,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;
@@ -9051,34 +9097,34 @@ button.Button--full {
 }
 .Label, .Form label:not(.Field__html-label) {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 600;
 }
 .Label.Label--error, .Form label.Label--error:not(.Field__html-label) {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .Label.Label--disabled, .Form label.Label--disabled:not(.Field__html-label) {
   opacity: 0.4;
 }
 
 .Label__required {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
   margin-left: 2px;
 }
 
 .Label__optional {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   font-weight: 400;
   margin-left: 2px;
 }
 
 .Label__help {
   bottom: 2px;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   margin-left: 4px;
   position: relative;
 }
@@ -9227,10 +9273,10 @@ button.Button--full {
 .Link {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   cursor: pointer;
   font-weight: 400;
 }
@@ -9243,7 +9289,7 @@ button.Button--full {
 }
 
 .Link--red {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Link--grey {
@@ -9252,7 +9298,7 @@ button.Button--full {
 
 .Link--disabled {
   pointer-events: none;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
 
@@ -9263,7 +9309,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 +9329,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 +9363,7 @@ button.Button--full {
 /** @define Modal */
 .Modal {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -9319,7 +9372,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 +9401,7 @@ button.Button--full {
 .Modal__header,
 .Modal__content,
 .Modal__footer {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px 32px;
 }
 
@@ -9379,13 +9432,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 +9476,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 +9522,12 @@ button.Button--full {
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .OptionList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -9513,11 +9566,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 +9649,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 +9685,10 @@ button.Button--full {
 
 .Page {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
+  background-color: var(--colorsAppBackground, #fcfcfc);
   display: flex;
   flex-grow: 1;
   position: relative;
@@ -9727,8 +9783,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 +9802,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 +9817,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 +9839,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 +9865,7 @@ button.Button--full {
 .ProgressCircle__background {
   fill: transparent;
   transform-origin: 50% 50%;
-  stroke: #eeeeee;
+  stroke: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressCircle__circle {
@@ -9822,16 +9878,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 +9907,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 +9926,7 @@ button.Button--full {
 }
 
 .ProgressBar::-webkit-progress-bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar::-webkit-progress-value {
@@ -9889,62 +9946,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 +10051,7 @@ button.Button--full {
 
 .ProgressTracker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -10017,11 +10073,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 +10096,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 +10104,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 +10125,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,31 +10136,27 @@ button.Button--full {
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressTrackerStep--disabled {
   pointer-events: none !important;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
-  color: #949596;
   opacity: 0.6;
 }
-.ProgressTrackerStep--disabled .ProgressTrackerStep__icon, .ProgressTrackerStep--disabled:hover .ProgressTrackerStep__icon {
-  background-color: #bcbcbd;
-}
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 27px;
 }
 .FormField .a-Radio {
@@ -10178,9 +10230,9 @@ button.Button--full {
 }
 
 .Radio__box {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
-  box-shadow: 0 0 0 1px #bcbcbd inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd) inset;
   display: inline-flex;
   flex-shrink: 0;
   margin-left: 1px;
@@ -10209,7 +10261,7 @@ button.Button--full {
   top: 7px;
 }
 .Radio__box::before {
-  box-shadow: 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
   border-radius: 100%;
   bottom: 0;
   content: "";
@@ -10235,10 +10287,10 @@ button.Button--full {
   width: 100%;
 }
 .Radio--error .Radio__box {
-  box-shadow: 0 0 0 1px #ffb2a0 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderCriticalSubdued, #ffb2a0) inset;
 }
 .Radio__input:checked + .Radio__box, .Radio--checked .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio .Radio__input:checked + .Radio__box::after, .a-Radio .Radio--checked .Radio__box::after {
   background-color: transparent;
@@ -10256,37 +10308,37 @@ button.Button--full {
   height: 8px;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box, .Radio--checked.Radio--error .Radio__box {
-  box-shadow: 0 0 0 2px #e63717 inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio .Radio--error .Radio__input:checked + .Radio__box .Radio__box::after, .a-Radio .Radio--checked.Radio--error .Radio__box::after {
   background-color: transparent;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box::before, .Radio--checked.Radio--error .Radio__box::before {
-  box-shadow: 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 1px #444445 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box::before, .Radio--checked:not(.Radio--disabled):hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__box {
   box-shadow: 0 0 0 1px #f94d32 inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #f94d32 inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box::before, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Radio--error.Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #f94d32 inset, 0 0 0 3px #ffb2a0;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Radio--disabled .Radio__box {
@@ -10294,7 +10346,7 @@ button.Button--full {
   filter: grayscale(1);
 }
 .Radio--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Radio .Radio__label {
@@ -10327,7 +10379,7 @@ button.Button--full {
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;
@@ -10455,11 +10507,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 +10628,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 +10650,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 +10663,7 @@ button.Button--full {
 
 .Sidebar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   z-index: 10;
@@ -10587,7 +10683,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 +10703,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 +10737,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 +10754,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 +10780,7 @@ button.Button--full {
 }
 
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {
@@ -10698,11 +10804,11 @@ button.Button--full {
 
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -10714,9 +10820,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 +10842,7 @@ button.Button--full {
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -10748,11 +10855,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 +10883,15 @@ button.Button--full {
 
 .Snackbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   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 +10909,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 +10925,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 +10939,7 @@ button.Button--full {
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #949596);
 }
 
 .Snackbar--floating {
@@ -10939,6 +11046,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 +11253,9 @@ button.Button--full {
   margin-top: initial;
 }
 
-.StackItem {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-.StackItem--fill {
-  flex: 1 1 auto;
-}
-
 .StatusLight {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -11170,7 +11277,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 +11295,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 +11330,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 +11365,11 @@ button.Button--full {
 .Tab {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   cursor: pointer;
   line-height: 1;
   display: flex;
@@ -11284,7 +11391,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 +11417,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 +11425,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 +11440,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 +11456,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 +11467,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 +11497,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 +11510,7 @@ button.Button--full {
 
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -11422,7 +11530,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 +11552,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 +11588,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 +11610,7 @@ button.Button--full {
 
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -11594,11 +11702,11 @@ button.Button--full {
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-column-resizer:hover {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 .Table .k-grid-header-sticky[style*="border-right-width: 1px;"],
 .Table .k-grid-content-sticky[style*="border-right-width: 1px;"] {
-  box-shadow: 2px 3px 5px 0 rgba(20, 20, 20, 0.1);
+  box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
 .Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
   background-color: #eeeeee;
@@ -11611,7 +11719,7 @@ button.Button--full {
 /* Filter popups are rendered outside .Table in portal */
 .k-popup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -11631,11 +11739,11 @@ button.Button--full {
 
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   border-radius: 3px;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-size: 14px;
   font-weight: 600;
@@ -11845,11 +11953,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 +11989,7 @@ button.Button--full {
 
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -11892,7 +12000,7 @@ button.Button--full {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -11920,10 +12028,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 +12045,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 +12096,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 +12130,7 @@ button.Button--full {
 
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;
@@ -12036,7 +12144,7 @@ button.Button--full {
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -12046,7 +12154,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 +12169,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 +12177,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 +12192,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,11 +12222,11 @@ button.Button--full {
 
 .Thumbnail {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderDefault, #dfe0e1);
   display: inline-block;
   position: relative;
   overflow: hidden;
@@ -12180,13 +12288,13 @@ button.Button--full {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: rgba(20, 20, 20, 0.4);
-  color: #ffffff;
+  background-color: var(--colorsActiveStrong, rgba(20, 20, 20, 0.2));
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -12218,12 +12326,12 @@ button.Button--full {
 
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   display: flex;
@@ -12240,16 +12348,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 +12366,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 +12415,7 @@ button.Button--full {
 
 .ToastGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -12353,11 +12461,11 @@ button.Button--full {
   margin-right: -16px;
 }
 .Togglebox:hover .CardSection {
-  border-color: #56a4ff;
+  border-color: var(--colorsBorderPrimary, #56a4ff);
 }
 .Togglebox:focus-within .CardSection {
-  border-color: #56a4ff;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #56a4ff);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Togglebox__content {
@@ -12387,7 +12495,7 @@ button.Button--full {
 }
 
 .Togglebox__title {
-  color: #2d2e31;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 700;
 }
@@ -12396,13 +12504,13 @@ button.Button--full {
 }
 
 .Togglebox__children {
-  color: #2d2e31;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   line-height: 1;
   width: 100%;
 }
 .Togglebox__content--title .Togglebox__children {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Togglebox--radio .Togglebox__children {
   padding-left: 9px;
@@ -12416,7 +12524,7 @@ button.Button--full {
 
 .ToggleSwitch {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -12445,7 +12553,7 @@ button.Button--full {
 }
 
 .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
   border-radius: 13px;
   box-sizing: border-box;
   display: inline-flex;
@@ -12456,7 +12564,7 @@ button.Button--full {
   width: 42px;
 }
 .ToggleSwitch__element::before {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   content: "";
@@ -12472,25 +12580,25 @@ button.Button--full {
   margin: 0;
 }
 .ToggleSwitch:hover .ToggleSwitch__element {
-  background: #bcbcbd;
+  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
 }
 .ToggleSwitch--disabled .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #18a761;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element::before, .ToggleSwitch--checked .ToggleSwitch__element::before {
   left: 22px;
 }
 .ToggleSwitch:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #10864b;
+  background: var(--colorsStatusSuccessStrong, #10864b);
 }
 .ToggleSwitch--disabled .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled .ToggleSwitch--checked .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #606162;
+  background: var(--colorsSurfaceDisabled, #606162);
 }
 .ToggleSwitch--focus-visible:focus-within .ToggleSwitch__element {
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Label.ToggleSwitch__label {
@@ -12498,6 +12606,7 @@ button.Button--full {
   font-weight: normal;
   margin-left: 12px;
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
+  color: var(--colorsTextDefault, #141414);
   /* ToggleSwitch's height is exactly 1px taller than the standard label */
   margin-top: 1px;
 }
@@ -12526,7 +12635,7 @@ button.Button--full {
 .Tooltip,
 .Tooltip__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -12560,9 +12669,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;
@@ -12601,7 +12710,7 @@ _:-ms-lang(x), .Tooltip__body {
   }
 }
 .Tooltip__caret::before {
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
 }
 
 /*# sourceMappingURL=index.css.map */