@servicetitan/design-system 11.3.1 → 11.4.0

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "11.3.1";
+  --anvil-version: "11.4.0";
 }
 
 /*
@@ -87,7 +87,7 @@ a:focus {
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -310,12 +310,12 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -413,7 +413,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -421,14 +421,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width
@@ -6991,7 +6991,7 @@ kendo-badge-container {
 
 .k-calendar {
   border-color: rgba(0, 0, 0, 0.08);
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
 }
 .k-calendar .k-header {
@@ -7061,7 +7061,7 @@ kendo-badge-container {
 }
 .k-calendar .k-calendar-navigation-highlight {
   border-color: rgba(0, 0, 0, 0.08);
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
 }
 .k-calendar[dir=rtl] .k-calendar-navigation, .k-rtl .k-calendar .k-calendar-navigation {
@@ -7756,7 +7756,7 @@ kendo-badge-container {
 }
 
 .k-popup {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -11607,7 +11607,7 @@ input.k-textbox {
 
 .k-menu-group,
 .k-menu.k-context-menu {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -12570,7 +12570,7 @@ kendo-label > .k-label {
 }
 .k-pager-md .k-pager-numbers.k-state-expanded,
 .k-pager-sm .k-pager-numbers.k-state-expanded {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
@@ -13931,7 +13931,7 @@ div.k-grid-norecords {
 
 .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
   border-top: 1px solid;
-  border-top-color: #dfe0e1;
+  border-top-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .k-columnmenu-item-content {
@@ -14307,7 +14307,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-column-menu .k-menu:not(.k-context-menu) {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -14328,12 +14328,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-column-menu-group-header-text {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
 }
 
 .k-check-all-wrap {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .k-grid-norecords-template {
@@ -15009,7 +15009,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .semantic-anvil-theme {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   /*
@@ -16417,7 +16417,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .ActionMenu {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   padding: 12px 0;
@@ -16440,7 +16440,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 .ActionMenu .ActionMenuItem {
   align-items: center;
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   display: flex;
   flex-direction: row;
   min-height: 26px;
@@ -16506,13 +16506,13 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin-right: 8px;
 }
 .ActionMenuGroup__label.Divider .Eyebrow {
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   opacity: 0.6;
 }
 
 .Announcement {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -16570,7 +16570,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 /* OptionList overrides specific to the Select */
 .a-Select {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -16662,22 +16662,22 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
   width: 100%;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
-  color: #141414;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
   padding: 7px 12px;
   cursor: pointer;
   position: relative;
 }
 .Trigger:focus, .Trigger:active {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   outline: 0;
 }
 .Trigger .TagGroup {
@@ -16687,11 +16687,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   cursor: default;
 }
 .Trigger .Trigger__placeholder {
-  color: rgba(20, 20, 20, 0.4);
   line-height: 1.5;
+  opacity: 0.4;
 }
 .Trigger.Trigger--error .Trigger__placeholder {
-  color: rgba(230, 55, 23, 0.6);
+  color: var(--colorsTextCritical, #f94d32);
+  opacity: 0.6;
 }
 .Trigger .Trigger__clear.Button {
   border-radius: 100%;
@@ -16714,36 +16715,36 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Trigger--open {
-  border-color: #2270ee;
+  border-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--open.Trigger--error {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 
 .Trigger--error {
-  border-color: #e63717;
-  color: #e63717;
-  background-color: #ffece9;
+  border-color: var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #f94d32);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--error:focus, .Trigger--error:active {
-  border-color: #e63717;
-  box-shadow: 0 0 0 3px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Trigger--error .Trigger__value,
 .Trigger--error .Button {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Trigger--disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background-color: #f7f7f7;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 .Trigger--disabled.Trigger--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--disabled.Trigger--error .Trigger__clear.Button--disabled.Button--subtle {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .Trigger--disabled .Trigger__clear.Button--disabled.Button--subtle {
   opacity: 1;
@@ -16752,7 +16753,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 .Trigger__shortLabel {
   align-items: center;
   background: transparent;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   display: flex;
   margin: -7px 0 -7px -12px;
   z-index: 0;
@@ -16765,12 +16766,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin-right: 11px;
 }
 .Trigger--error .Trigger__shortLabel {
-  background-color: #ffece9;
-  color: #e63717;
-  border-color: #e63717;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  color: var(--colorsTextCritical, #f94d32);
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .Trigger-open .Trigger__shortLabel, .Trigger:active .Trigger__shortLabel {
-  border-color: #2270ee;
+  border-color: var(--colorsBorderPrimary, #2270ee);
 }
 
 .Trigger__shortLabel--left {
@@ -16784,10 +16785,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin: -11px 0 -11px -11px;
 }
 .Trigger:active .Trigger__shortLabel--left, .Trigger--open .Trigger__shortLabel--left {
-  border-right-color: #2270ee;
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--error:active .Trigger__shortLabel--left, .Trigger--error.Trigger--open .Trigger__shortLabel--left {
-  border-right-color: #e63717;
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 
 .Trigger__shortLabel--right {
@@ -16801,10 +16802,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin: -11px -11px -11px 0;
 }
 .Trigger:active .Trigger__shortLabel--right, .Trigger--open .Trigger__shortLabel--right {
-  border-right-color: #2270ee;
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--error:active .Trigger__shortLabel--right, .Trigger--error.Trigger--open .Trigger__shortLabel--right {
-  border-right-color: #e63717;
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 
 .Trigger__controls {
@@ -16816,10 +16817,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger__arrow.a-Icon {
   align-self: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Trigger--error .Trigger__arrow.a-Icon {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Trigger__value {
@@ -16835,21 +16836,21 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Select--DrillIn .Popover__header {
-  background-color: #f5f5f5;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 
 .SelectDrillIn__back {
   margin-left: -8px;
 }
 .Select__focus:focus-within .SelectDrillIn__back {
-  background: #dfe0e1;
+  background: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
   border-radius: 3px;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Avatar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -16858,7 +16859,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   background-size: cover;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-weight: 700;
   justify-content: center;
@@ -16922,7 +16923,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 /** @define Backdrop */
 .Backdrop {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: none;
@@ -16931,10 +16932,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(20, 20, 20, 0.6);
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
 }
 
 .Backdrop--is-open {
@@ -16944,7 +16945,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 .BackLink {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   cursor: pointer;
@@ -16961,7 +16962,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 .BackLink--focus-visible:focus {
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .BackLink__back-icon {
@@ -16970,7 +16971,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Banner {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: #ffffff;
@@ -17091,7 +17092,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .BodyText {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-family: "Nunito Sans", sans-serif;
@@ -17117,7 +17118,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Breadcrumb {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -17128,7 +17129,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Breadcrumb-Link {
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   display: inline-flex;
   line-height: 1.5;
   margin-top: 8px;
@@ -17139,11 +17140,11 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 .Breadcrumb-Link__label--focus-visible:focus {
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Breadcrumb-Link__icon.a-Icon {
-  color: #444445;
+  color: var(--colorsTextDefault, #141414);
   padding-right: 16px;
   padding-left: 16px;
 }
@@ -17158,7 +17159,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Breadcrumb-Link:last-child {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .Breadcrumb-Link:last-child .Breadcrumb-Link__icon {
   display: none;
@@ -17166,7 +17167,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Button {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -17209,10 +17210,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   text-decoration: none;
 }
 .Button:hover::before {
-  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
 }
 .Button:active::before, .Button.Button--selected::before {
-  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
 }
 .Button.Button--focus-visible:focus {
   outline: 0;
@@ -17223,10 +17224,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
 }
 .Button.Button--outline:hover::before {
-  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
 }
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
-  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
 }
 .Button.Button--outline.Button--focus-visible:focus {
   box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
@@ -17235,10 +17236,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   background-color: transparent;
 }
 .Button.Button--subtle:hover::before {
-  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
 }
 .Button.Button--subtle:active::before, .Button.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
 }
 
 button.Button {
@@ -17285,7 +17286,7 @@ button.Button {
   background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.08));
+  background-color: var(--colorsActiveOnPrimary, rgba(4, 4, 4, 0.08));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
@@ -17320,7 +17321,7 @@ button.Button {
   background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
 }
 .Button--red:active::before, .Button--red.Button--selected::before {
-  background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnCritical, rgba(4, 4, 4, 0.16));
 }
 .Button--red.Button--focus-visible:focus {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
@@ -17557,7 +17558,7 @@ button.Button--full {
   z-index: 2;
 }
 .ButtonToggle__Item .Button:hover {
-  background-color: rgba(20, 20, 20, 0.04);
+  background-color: var(--colorsHoverSubdued, rgba(20, 20, 20, 0.04));
 }
 
 .ButtonToggle__Item:not(:first-child) {
@@ -17585,20 +17586,20 @@ button.Button--full {
 }
 .ButtonToggle--primary .ButtonToggle__Item .Button,
 .ButtonToggle--primary .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected .Button {
-  background-color: rgba(34, 112, 238, 0.08);
-  color: #1360d9;
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px #56a4ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #1360d9, 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #56a4ff, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderPrimary, #2270ee), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--negative {
@@ -17606,35 +17607,35 @@ button.Button--full {
 }
 .ButtonToggle--negative .ButtonToggle__Item .Button,
 .ButtonToggle--negative .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected .Button {
-  background-color: rgba(230, 55, 23, 0.1);
-  color: #e63717;
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  color: var(--colorsTextCritical, #f94d32);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px #ff745f;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #ff745f, 0 0 0 3px #ffb2a0;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #ff745f, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderCritical, #e63717), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--neutral .ButtonToggle__Item .Button,
 .ButtonToggle--neutral .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--neutral .ButtonToggle__Item--selected .Button {
-  background-color: rgba(20, 20, 20, 0.08);
-  box-shadow: inset 0 0 0 1px #bcbcbd;
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .ButtonToggle--neutral .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #bcbcbd, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--neutral.ButtonToggle .Button--focus-visible:focus {
-  box-shadow: 0 0 0 1px #bcbcbd, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .ButtonToggle--disabled {
@@ -17648,12 +17649,12 @@ button.Button--full {
 
 .Card {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   text-align: left;
 }
 
@@ -17725,11 +17726,11 @@ button.Button--full {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 200ms 0ms;
 }
 .Card--placeholder:hover {
-  background-color: #ecf4fd;
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
   box-shadow: 0 0 0;
 }
 .Card--placeholder:hover.Card--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Card--placeholder > .CardSection {
   flex-grow: 1;
@@ -17743,7 +17744,7 @@ button.Button--full {
 }
 
 .CardSection {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 24px;
   /* Remove bottom border for stacked sections */
   border-bottom-width: 0;
@@ -17772,24 +17773,24 @@ button.Button--full {
   padding: 0;
 }
 .Card--active > .CardSection {
-  border-left-color: #2270ee;
-  border-right-color: #2270ee;
+  border-left-color: var(--colorsBorderPrimary, #2270ee);
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:first-child {
-  border-top-color: #2270ee;
+  border-top-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:last-child {
-  border-bottom-color: #2270ee;
+  border-bottom-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--error > .CardSection {
-  border-left-color: #e63717;
-  border-right-color: #e63717;
+  border-left-color: var(--colorsBorderCritical, #e63717);
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:first-child {
-  border-top-color: #e63717;
+  border-top-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:last-child {
-  border-bottom-color: #e63717;
+  border-bottom-color: var(--colorsBorderCritical, #e63717);
 }
 .CardSection:first-child {
   border-top-left-radius: 6px;
@@ -17833,8 +17834,8 @@ button.Button--full {
 .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue), .Card--active > .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue).CardSection,
 .CardSection--dark,
 .Card--active > .CardSection--dark.CardSection {
-  background: #141414;
-  border-color: #141414;
+  background: #040404;
+  border-color: #040404;
 }
 
 .CardSection--blue {
@@ -17879,7 +17880,7 @@ button.Button--full {
 
 .Collapsible {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -17895,7 +17896,7 @@ button.Button--full {
 
 .ColorPicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -17917,8 +17918,8 @@ button.Button--full {
   /* smartphones, touchscreens */
 }
 .ColorPicker__Item--active {
-  box-shadow: 0 0 0 2px #2270ee;
-  border-color: #ffffff;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee);
+  border-color: var(--colorsSurfaceDefault, #ffffff);
   cursor: default;
 }
 @media (pointer: coarse) {
@@ -17935,7 +17936,7 @@ button.Button--full {
   cursor: not-allowed;
 }
 .ColorPicker--disabled .ColorPicker__Item--active {
-  box-shadow: 0 0 0 2px #bcbcbd;
+  box-shadow: 0 0 0 2px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 
 .ColorPicker__CardWrapper .ColorPicker__CardSection {
@@ -17945,8 +17946,8 @@ button.Button--full {
   outline: none;
 }
 .ColorPicker__CardWrapper--focus .ColorPicker__CardSection {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ColorPicker__CardWrapper--disabled .ColorPicker--disabled {
   opacity: initial;
@@ -17954,7 +17955,7 @@ button.Button--full {
 
 .Container {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: block;
@@ -18005,7 +18006,7 @@ button.Button--full {
 
 .DataList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: table;
@@ -18035,17 +18036,17 @@ button.Button--full {
 }
 
 .DataList__HeaderCell {
-  background-color: #f7f7f7;
-  color: #141414;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 400;
   padding: 4px 8px;
 }
 
 .DataList--Simple .DataList__HeaderCell {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   background: transparent;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: normal;
 }
 .DataList--Simple .DataList__Cell:first-child {
@@ -18062,7 +18063,7 @@ button.Button--full {
 
 .DatePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -18094,15 +18095,52 @@ button.Button--full {
 /* Kendo calendar styles */
 .DatePicker__calendar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
   justify-content: center;
 }
 .DatePicker__calendar .k-calendar {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border: none;
+  color: var(--colorsTextDefault, #141414);
   /* Kendo team did not updated classnames, so color not passed correctly via _kendo-variables.scss */
 }
+.DatePicker__calendar .k-calendar.k-calendar-infinite .k-calendar-view::after {
+  box-shadow: 0 0 38px 19px var(--colorsSurfaceDefault, #ffffff);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-today {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td:hover .k-link {
+  border: var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-state-selected .k-link {
+  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #2270ee);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  color: var(--colorsTextDefault, #141414);
+  box-shadow: inset -1px 0 var(--colorsBorderGreyStrong, #bcbcbd);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation::before, .DatePicker__calendar .k-calendar .k-calendar-navigation::after {
+  box-shadow: 0 0 6em 3em var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.DatePicker__calendar .k-calendar .k-calendar-navigation-highlight {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.DatePicker__calendar .k-calendar .k-content {
+  background-color: unset;
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
 .DatePicker__calendar .k-calendar table th,
 .DatePicker__calendar .k-calendar .k-calendar-navigation .k-calendar-navigation-marker,
 .DatePicker__calendar .k-calendar .k-calendar-header .k-title {
@@ -18113,20 +18151,20 @@ button.Button--full {
   margin-top: 8px;
 }
 .DatePicker__calendar .k-calendar .k-nav-today {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
   cursor: pointer;
   padding: 5px 8px;
 }
 .DatePicker__calendar .k-calendar .k-nav-today:hover {
   text-decoration: none !important;
   /* Button-like styling */
-  box-shadow: inset 0 100px 0 3px rgba(127, 127, 127, 0.075);
+  box-shadow: inset 0 100px 0 3px var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
   border-radius: 3px;
 }
 
 .DateRangePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   width: -webkit-min-content;
@@ -18189,10 +18227,10 @@ button.Button--full {
 
 .Divider {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: #dfe0e1;
+  color: var(--colorsBorderGrey, #dfe0e1);
   margin: 0;
   z-index: 1;
 }
@@ -18202,7 +18240,7 @@ button.Button--full {
 }
 .Divider .Divider__content {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex: 0 0 auto;
@@ -18311,10 +18349,10 @@ button.Button--full {
 
 .Drawer {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background-color: #fff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   bottom: 0;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.15);
   box-sizing: border-box;
@@ -18334,8 +18372,8 @@ button.Button--full {
 .Drawer .Drawer__header {
   align-items: center;
   box-sizing: border-box;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 #dfe0e1;
+  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   padding: 16px 24px;
   min-height: 64px;
@@ -18373,7 +18411,7 @@ button.Button--full {
   font-size: 20px;
   flex-grow: 1;
   margin: 0;
-  color: #444445;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .Drawer__header-close.Button {
@@ -18387,7 +18425,7 @@ button.Button--full {
 }
 
 .Drawer__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   padding: 16px 24px;
 }
@@ -18400,14 +18438,14 @@ button.Button--full {
 
 .Eyebrow {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 600;
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;
@@ -18425,7 +18463,7 @@ button.Button--full {
 
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -18436,14 +18474,14 @@ button.Button--full {
 
 .FilePicker__File {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
   display: flex;
   margin-bottom: 16px;
@@ -18460,14 +18498,14 @@ button.Button--full {
 
 .a-Icon.FilePicker__File__Icon {
   margin-right: 8px;
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .FilePicker__File__ActionIcon {
   margin-left: 8px;
 }
 .FilePicker__File__ActionIcon .a-Icon {
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 
@@ -18506,14 +18544,14 @@ button.Button--full {
 
 .FilterButton {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
   padding: 4px 8px;
   border-radius: 500em;
   border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
-  color: var(--colorsTextDefault, #141414);
+  color: var(--colorsTextDefault, #040404);
   font-size: 12px;
   cursor: pointer;
   background-color: transparent;
@@ -18584,7 +18622,7 @@ button.Button--full {
   content: "";
   width: 6px;
   height: 100%;
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -18592,10 +18630,10 @@ button.Button--full {
   top: 0;
 }
 .FlowCardStep--active.FlowCardStep--error::before {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 .FlowCardStep--active.FlowCardStep--saved::before {
-  background-color: #1fbc70;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .FlowCardStep--active .FlowCardStep__header {
   border-bottom: none;
@@ -18608,7 +18646,7 @@ button.Button--full {
   content: "";
   width: 6px;
   height: 100%;
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -18643,31 +18681,48 @@ button.Button--full {
   font-size: 14px;
 }
 .FlowCardStep__status.FlowCardStep__status--active {
-  background-color: #2270ee;
-  color: white;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep__status.FlowCardStep__status--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 
 .FlowCardStep--ordered .FlowCardStep__status {
-  background-color: #bcbcbd;
-  color: white;
+  background-color: var(--colorsSurfaceGreyStronger, #bcbcbd);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--active {
-  background-color: #2270ee;
-  color: white;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--custom {
   background-color: inherit;
   color: inherit;
 }
 .FlowCardStep--ordered .FlowCardStep__status--saved {
-  background-color: #ffffff;
-  color: white;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+
+.FlowCardStep__icon-active {
+  color: var(--colorsTextInverted, #ffffff);
+}
+
+.FlowCardStep .FlowCardStep__indicator-active {
+  color: var(--colorsStatusSuccess, #18a761);
+}
+.FlowCardStep .FlowCardStep__indicator-complete {
+  color: var(--colorsStatusSuccess, #18a761);
+}
+.FlowCardStep .FlowCardStep__indicator-disabled {
+  color: var(--colorsSurfaceGreyStronger, #bcbcbd);
+}
+.FlowCardStep .FlowCardStep__indicator-error {
+  color: var(--colorsStatusCritical, #f94d32);
 }
 
 /*** FormField styles ***/
@@ -18754,7 +18809,7 @@ button.Button--full {
 
 .FormField__helpers {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -18838,7 +18893,7 @@ button.Button--full {
 .FormGroup {
   /* stylelint-enable */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -18972,7 +19027,7 @@ button.Button--full {
 
 .Frame {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   height: 100vh;
@@ -19002,7 +19057,7 @@ button.Button--full {
 
 .Grid {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -19065,7 +19120,7 @@ button.Button--full {
   margin-bottom: 0 !important;
 }
 .Grid.Grid--divided:not(.Grid--vertically-divided) > .GridColumn:not(.GridRow), .Grid.Grid--divided:not(.Grid--vertically-divided) > .GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--vertically-divided > .GridColumn:not(.GridRow), .Grid.Grid--vertically-divided > .GridRow > .GridColumn {
   margin-top: 8px;
@@ -19080,7 +19135,7 @@ button.Button--full {
   margin-top: 0;
 }
 .Grid > .GridRow--divided.GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid > .GridRow--divided.GridRow > .GridColumn:first-child {
   box-shadow: none;
@@ -19098,7 +19153,7 @@ button.Button--full {
   width: calc(100% - 16px);
   height: 1px;
   margin: 0% 8px;
-  box-shadow: 0 -1px 0 0 #bcbcbd;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--horizontally-padded--divided.Grid, .Grid.Grid--padded.Grid--divided:not(.Grid--vertically-divided):not(.Grid--horizontally-divided) {
   width: 100%;
@@ -19119,16 +19174,16 @@ button.Button--full {
 .Grid.Grid--celled {
   width: 100%;
   margin: 1em 0;
-  box-shadow: 0 0 0 1px #bcbcbd;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--celled > .GridRow {
   width: 100% !important;
   margin: 0;
   padding: 0;
-  box-shadow: 0 -1px 0 0 #bcbcbd;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--celled > .GridColumn:not(.GridRow), .Grid.Grid--celled > .GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   padding: 1em;
 }
 .Grid.Grid--celled > .GridColumn:first-child, .Grid.Grid--celled > .GridRow > .GridColumn:first-child {
@@ -24141,19 +24196,19 @@ button.Button--full {
     flex-direction: column-reverse;
   }
   .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--mobile-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--mobile-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--mobile-reversed"].Grid--Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--mobile-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -24174,19 +24229,19 @@ button.Button--full {
     flex-direction: column-reverse;
   }
   .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--tablet-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--tablet-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--tablet-reversed"].Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--tablet-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -24207,19 +24262,19 @@ button.Button--full {
     flex-direction: column-reverse;
   }
   .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--desktop-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--desktop-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--desktop-reversed"].Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--desktop-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -24369,7 +24424,7 @@ button.Button--full {
     border-top: none !important;
   }
   .Grid.Grid--stackable.Grid--celled > .GridColumn:not(.GridRow), .Grid.Grid--stackable.Grid--celled > .GridRow > .GridColumn, .Grid.Grid--stackable.Grid--divided:not([class*=-vertically-divided]) > .GridRow > .GridColumn, .Grid.Grid--stackable.Grid--divided:not([class*=-vertically-divided]) > .GridColumn:not(.GridRow) {
-    border-top: 1px solid #bcbcbd;
+    border-top: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
     box-shadow: none !important;
     padding-top: 16px !important;
     padding-bottom: 16px !important;
@@ -24517,7 +24572,7 @@ button.Button--full {
 }
 .Headline {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;
@@ -24655,7 +24710,7 @@ button.Button--full {
 }
 
 .InlineEdit__value--placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .InlineEdit__content--icon .InlineEdit__editIcon {
@@ -24757,14 +24812,14 @@ button.Button--full {
 /*** Input styles ***/
 .Input {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   display: inline-flex;
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
   /* Sizes */
   /*** States ***/
@@ -24811,7 +24866,7 @@ button.Button--full {
   /* ... */
   background-color: #ffffff;
   border: 1px solid #dfe0e1;
-  color: #141414;
+  color: #040404;
   border-radius: 3px;
   transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
   box-shadow: none;
@@ -24838,7 +24893,7 @@ button.Button--full {
   /* ... */
   background-color: transparent;
   border: none;
-  color: #141414;
+  color: #040404;
   transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
   box-shadow: none;
   /* Chrome autofill styling */
@@ -24847,13 +24902,13 @@ button.Button--full {
   background-color: #f7f7f7;
 }
 .Input > .Input__InnerWrapper > input::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input > .Input__InnerWrapper > input:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input > .Input__InnerWrapper > input::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input > .Input__InnerWrapper > input::-webkit-autofill {
   box-shadow: 0 0 0 100px #fffff0 inset !important;
@@ -24873,16 +24928,16 @@ button.Button--full {
   pointer-events: none;
 }
 .Input.Input--disabled input::-moz-placeholder, .Input:not(.Input--disabled) input[disabled]::-moz-placeholder, .Input.Input--disabled .InputAddon::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input.Input--disabled input:-ms-input-placeholder, .Input:not(.Input--disabled) input[disabled]:-ms-input-placeholder, .Input.Input--disabled .InputAddon:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input.Input--disabled input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .Input:focus-within, .Input.Input--focus {
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   border-radius: 3px;
 }
 .Input:focus-within > .Input__InnerWrapper, .Input.Input--focus > .Input__InnerWrapper {
@@ -24890,7 +24945,7 @@ button.Button--full {
   border-color: #2270ee;
 }
 .Input:focus-within > .Input__InnerWrapper > input, .Input.Input--focus > .Input__InnerWrapper > input {
-  color: #141414;
+  color: #040404;
 }
 .Input:focus-within > .Input__InnerWrapper > input::-webkit-autofill, .Input.Input--focus > .Input__InnerWrapper > input::-webkit-autofill {
   box-shadow: 0 0 0 100px #fffff0 inset !important;
@@ -25084,34 +25139,34 @@ button.Button--full {
 }
 .Label, .Form label:not(.Field__html-label) {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   font-weight: 600;
 }
 .Label.Label--error, .Form label.Label--error:not(.Field__html-label) {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .Label.Label--disabled, .Form label.Label--disabled:not(.Field__html-label) {
   opacity: 0.4;
 }
 
 .Label__required {
-  color: #e63717;
+  color: var(--colorsTextCritical, #f94d32);
   margin-left: 2px;
 }
 
 .Label__optional {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   font-weight: 400;
   margin-left: 2px;
 }
 
 .Label__help {
   bottom: 2px;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   margin-left: 4px;
   position: relative;
 }
@@ -25260,10 +25315,10 @@ button.Button--full {
 .Link {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   cursor: pointer;
   font-weight: 400;
 }
@@ -25276,7 +25331,7 @@ button.Button--full {
 }
 
 .Link--red {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #f94d32);
 }
 
 .Link--grey {
@@ -25285,7 +25340,7 @@ button.Button--full {
 
 .Link--disabled {
   pointer-events: none;
-  color: var(--colorsTextOnGrey, #444445);
+  color: var(--colorsTextDefault, #141414);
   opacity: 0.4;
 }
 
@@ -25296,7 +25351,6 @@ button.Button--full {
 
 .Mask__overlay {
   align-items: center;
-  background: rgba(255, 255, 255, 0.85);
   cursor: not-allowed;
   display: flex;
   height: 100%;
@@ -25317,6 +25371,14 @@ button.Button--full {
   cursor: auto;
 }
 
+.Mask__backdrop {
+  background: var(--colorsSurfaceDefault, #ffffff);
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  opacity: 0.85;
+}
+
 .Mask__card,
 .Mask__spinner {
   position: relative;
@@ -25343,7 +25405,7 @@ button.Button--full {
 /** @define Modal */
 .Modal {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -25352,7 +25414,7 @@ button.Button--full {
   max-height: 90vh;
   margin: 5vh auto;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
 }
 .Modal:focus {
@@ -25381,7 +25443,7 @@ button.Button--full {
 .Modal__header,
 .Modal__content,
 .Modal__footer {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px 32px;
 }
 
@@ -25412,13 +25474,13 @@ button.Button--full {
 }
 
 .Modal__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
 .Modal__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
@@ -25456,9 +25518,9 @@ button.Button--full {
 
 .MoreDetailsIcon {
   display: inline-flex;
-  background-color: #eeeeee;
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
   border-radius: 50%;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   margin-left: 4px;
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
@@ -25502,12 +25564,12 @@ button.Button--full {
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .OptionList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -25546,11 +25608,13 @@ button.Button--full {
 }
 
 .OptionList--single-select .OptionList__option--selected {
-  color: #2270ee;
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
+}
+.OptionList--single-select .OptionList__option--selected .Checkbox__label {
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
 }
 
 /* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
@@ -25627,14 +25691,14 @@ button.Button--full {
   align-items: center;
   padding-left: 24px;
   z-index: 2;
-  background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%, rgba(238, 238, 238, 0) 100%);
+  background: linear-gradient(to left, var(--colorsSurfaceGrey, #eeeeee) 70%, var(--colorsSurfaceGrey, #eeeeee) 71%, transparent 100%);
   /* Match the background color of the single selected option */
 }
 .OptionList__option:hover .OptionList__option--secondary-action {
   opacity: 1;
 }
 .OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
-  background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%, rgba(236, 244, 253, 0) 100%);
+  background: linear-gradient(to left, var(--colorsHoverPrimary, #ecf4fd) 70%, var(--colorsHoverPrimary, #ecf4fd) 71%, transparent 100%);
 }
 
 /*
@@ -25663,9 +25727,10 @@ button.Button--full {
 
 .Page {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
+  background-color: var(--colorsAppBackground, #fcfcfc);
   display: flex;
   flex-grow: 1;
   position: relative;
@@ -25760,8 +25825,8 @@ button.Button--full {
 .Page__actionToolbar {
   min-height: 56px;
   padding: 12px 24px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
   align-items: center;
@@ -25779,9 +25844,9 @@ button.Button--full {
 }
 
 .Panel {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   width: 0;
-  border-left: 1px solid #dfe0e1;
+  border-left: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -25794,7 +25859,7 @@ button.Button--full {
   opacity: 1;
 }
 .Panel--left {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-left: none;
 }
 .Panel .Panel__content {
@@ -25816,8 +25881,8 @@ button.Button--full {
 .Page__footer {
   min-height: 56px;
   padding: 16px 24px;
-  background-color: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
   align-items: center;
@@ -25842,7 +25907,7 @@ button.Button--full {
 .ProgressCircle__background {
   fill: transparent;
   transform-origin: 50% 50%;
-  stroke: #eeeeee;
+  stroke: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressCircle__circle {
@@ -25855,16 +25920,16 @@ button.Button--full {
   stroke: #08bfdf;
 }
 .ProgressCircle--blue .ProgressCircle__circle {
-  stroke: #2270ee;
+  stroke: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressCircle--red .ProgressCircle__circle {
-  stroke: #f94d32;
+  stroke: var(--colorsStatusCritical, #f94d32);
 }
 .ProgressCircle--green .ProgressCircle__circle {
-  stroke: #1fbc70;
+  stroke: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressCircle--yellow .ProgressCircle__circle {
-  stroke: #ffc902;
+  stroke: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressCircle__svg {
@@ -25884,12 +25949,13 @@ button.Button--full {
 }
 
 /** @define ProgressBar */
+/** Color Variants */
 .ProgressBar {
   /* Reset the default appearance */
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
   border-radius: 6px;
   display: block;
@@ -25905,7 +25971,7 @@ button.Button--full {
 }
 
 .ProgressBar::-webkit-progress-bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar::-webkit-progress-value {
@@ -25926,62 +25992,61 @@ button.Button--full {
 }
 
 .ProgressBar__bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar__value {
   background: #08bfdf;
 }
 
-/** Color Variants */
 .ProgressBar--blue::-webkit-progress-value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue::-moz-progress-bar {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue .ProgressBar__value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressBar--green::-webkit-progress-value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green::-moz-progress-bar {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green .ProgressBar__value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 
 .ProgressBar--red::-webkit-progress-value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red::-moz-progress-bar {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red .ProgressBar__value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 
 .ProgressBar--yellow::-webkit-progress-value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow::-moz-progress-bar {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow .ProgressBar__value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressBar--blue-grey::-webkit-progress-value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey::-moz-progress-bar {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey .ProgressBar__value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 
 /** Size Variants */
@@ -26044,7 +26109,7 @@ button.Button--full {
 
 .ProgressTracker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -26066,11 +26131,11 @@ button.Button--full {
   top: 50%;
   margin-top: -1px;
   height: 2px;
-  background-color: #dfe0e1;
+  background-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ProgressTrackerStep {
-  color: #949596;
+  color: var(--colorsTextSubdued, #737475);
   display: flex;
   align-items: center;
   position: relative;
@@ -26089,7 +26154,7 @@ button.Button--full {
 .ProgressTrackerStep:focus {
   outline: none;
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 /* Children */
@@ -26097,8 +26162,8 @@ button.Button--full {
   width: 1.8em;
   height: 1.8em;
   border-radius: 50%;
-  background: #bcbcbd;
-  color: #ffffff;
+  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
+  color: var(---colorsTextInverted, #ffffff);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -26118,10 +26183,10 @@ button.Button--full {
 }
 
 .ProgressTrackerStep--complete {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  background-color: #1fbc70;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressTrackerStep--complete .a-Icon {
   font-size: 20px;
@@ -26129,27 +26194,23 @@ button.Button--full {
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressTrackerStep--disabled {
   pointer-events: none !important;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
-  color: #949596;
   opacity: 0.6;
 }
-.ProgressTrackerStep--disabled .ProgressTrackerStep__icon, .ProgressTrackerStep--disabled:hover .ProgressTrackerStep__icon {
-  background-color: #bcbcbd;
-}
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -26332,7 +26393,7 @@ button.Button--full {
   box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Radio--error.Radio--focus-visible:focus-within .Radio__box {
   box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -26376,7 +26437,7 @@ button.Button--full {
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;
@@ -26504,11 +26565,58 @@ button.Button--full {
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
    * Fix for collapsing trigger if no value been set, since newer
    * semantic-ui-react-v2.0.1 removes empty .text node form trigger in such scenario
    */
 }
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
+  border-color: var(--colorsBorderGrey, #dfe0e1) !important;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item.selected {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item:hover {
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error {
+  color: var(--colorsTextCritical, #f94d32);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !important;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item {
+  color: var(--colorsTextCritical, #f94d32);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item.selected {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error:focus-within {
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.visible > .text:not(.default) {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:not(.button) > .default.text {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
+  color: var(--colorsTextSubdued, #737475);
+}
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
 }
@@ -26578,13 +26686,10 @@ button.Button--full {
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.active + .Select__clear-icon, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:hover + .Select__clear-icon {
   z-index: 10;
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #a9d1ff !important;
-}
-.error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #ffb2a0 !important;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff) !important;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown::before {
   content: "";
@@ -26603,11 +26708,11 @@ button.Button--full {
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon {
   position: absolute;
   right: 2em;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {
@@ -26616,7 +26721,7 @@ button.Button--full {
 
 .Sidebar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   z-index: 10;
@@ -26636,7 +26741,7 @@ button.Button--full {
   width: 239px;
   transition: width 0.25s, opacity 0.25s;
   position: relative;
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .Sidebar__content {
@@ -26656,21 +26761,23 @@ button.Button--full {
 .Page.bg-neutral-10 .Sidebar__content,
 .Sidebar__toggle-button,
 .Page.bg-neutral-10 .Sidebar__toggle-button {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Page.bg-white .Sidebar__wrapper, .Page.bg-neutral-0 .Sidebar__wrapper,
 .Page.bg-white .Sidebar__content,
 .Page.bg-neutral-0 .Sidebar__content,
 .Page.bg-white .Sidebar__toggle-button,
 .Page.bg-neutral-0 .Sidebar__toggle-button {
-  background: #fcfcfc;
+  background: var(--colorsAppBackground, #fcfcfc);
 }
 
 .Sidebar--collapsed {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__wrapper {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__content {
   visibility: hidden;
@@ -26688,6 +26795,10 @@ button.Button--full {
   width: 239px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar--temporary .Sidebar__content {
+  visibility: visible;
+  opacity: 1;
+}
 
 .Sidebar--touch .Sidebar__wrapper {
   min-height: 50px;
@@ -26701,19 +26812,23 @@ button.Button--full {
 }
 
 .Sidebar__toggle-button {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 16px;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   opacity: 0;
   transition: opacity 0.25s;
   padding: 3px !important;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Sidebar__toggle-button:hover {
-  background-color: #ecf4fd;
-  color: #2270ee;
-  border-color: #2270ee;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextPrimary, #2270ee);
+  border-color: var(--colorsTextPrimary, #2270ee);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar__toggle-button:hover::before {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
 
 .Sidebar__toggle-button-wrapper {
   position: absolute;
@@ -26723,7 +26838,7 @@ button.Button--full {
 }
 
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {
@@ -26747,11 +26862,11 @@ button.Button--full {
 
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -26763,9 +26878,10 @@ button.Button--full {
 }
 
 .SideNav__title {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   margin: 0 16px;
   padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .SideNav__list {
@@ -26784,7 +26900,7 @@ button.Button--full {
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -26797,11 +26913,11 @@ button.Button--full {
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: #ecf4fd;
-  color: #2270ee;
+  background: var(--colorsHoverPrimary, rgba(236, 244, 253, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .SideNavGroup {
@@ -26825,16 +26941,16 @@ button.Button--full {
 
 .Snackbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
           animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  background: #2d2e31;
+  background: var(--colorsSurfaceInverted, #2d2e31);
   border-radius: 3px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: inline-flex;
   align-items: center;
   /** Material's width limit. Soft rule against long copy in this pattern. */
@@ -26852,14 +26968,14 @@ button.Button--full {
 
 .Snackbar__action {
   background: transparent;
-  color: #a9d1ff;
+  color: var(--colorsTextPrimarySubdued, #a9d1ff);
   cursor: pointer;
   line-height: 1.5;
   text-align: right;
   padding-left: 16px;
 }
 .Snackbar__action:hover {
-  color: #ecf4fd;
+  text-decoration: underline;
 }
 
 .Snackbar__close.Button {
@@ -26868,7 +26984,7 @@ button.Button--full {
   margin-right: -4px;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
 }
 .Snackbar__close.Button .a-Icon,
 .Snackbar__close.Button .a-Icon > svg {
@@ -26882,7 +26998,7 @@ button.Button--full {
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #949596);
 }
 
 .Snackbar--floating {
@@ -27025,6 +27141,15 @@ button.Button--full {
   display: flex;
 }
 
+.StackItem {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.StackItem--fill {
+  flex: 1 1 auto;
+}
+
 /* Flex Direction */
 .Stack--direction-row {
   flex-direction: row;
@@ -27223,18 +27348,9 @@ button.Button--full {
   margin-top: initial;
 }
 
-.StackItem {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-.StackItem--fill {
-  flex: 1 1 auto;
-}
-
 .StatusLight {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -27256,7 +27372,7 @@ button.Button--full {
   min-width: 12px;
   height: 12px;
   border-radius: 12px;
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
   margin: 8px;
 }
 .StatusLight .StatusLight__indicator::before {
@@ -27274,16 +27390,16 @@ button.Button--full {
   transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
 }
 .StatusLight .StatusLight__indicator--info {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 .StatusLight .StatusLight__indicator--success {
-  background-color: #18a761;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .StatusLight .StatusLight__indicator--warning {
-  background-color: #ffc902;
+  background-color: var(--colorsStatusWarning, #ffbe00);
 }
 .StatusLight .StatusLight__indicator--critical {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 
 @-webkit-keyframes shadow-pulse {
@@ -27325,7 +27441,7 @@ button.Button--full {
   opacity: 0.4;
 }
 .StatusLight--disabled .StatusLight__indicator {
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
 }
 .StatusLight--disabled .StatusLight__indicator::before {
   -webkit-animation: none;
@@ -27362,11 +27478,11 @@ button.Button--full {
 .Tab {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   cursor: pointer;
   line-height: 1;
   display: flex;
@@ -27391,7 +27507,7 @@ button.Button--full {
   height: 100%;
   display: flex;
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -27417,7 +27533,7 @@ button.Button--full {
 .Tab.Tab--focus-visible:focus::after {
   position: absolute;
   content: "";
-  box-shadow: inset 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   top: 0;
   bottom: 0;
   left: 0;
@@ -27425,8 +27541,8 @@ button.Button--full {
 }
 
 .Tab--inactive:hover, .Tab--inactive--hover {
-  box-shadow: 0 -2px 0 #a9d1ff inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #a9d1ff) inset;
+  color: var(--colorsTextSubdued, #737475);
   text-decoration: none;
 }
 
@@ -27440,7 +27556,7 @@ button.Button--full {
   padding: 12px 16px;
   margin-right: 1px;
   min-width: 64px;
-  box-shadow: 0 -1px 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 var(--colorsBorderGrey, #dfe0e1) inset;
   position: relative;
 }
 .TabGroup--index .Tab:hover, .TabGroup--index .Tab--hover {
@@ -27456,7 +27572,8 @@ button.Button--full {
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceInvertedStrong, #141414);
+  opacity: 0.08;
 }
 .CardSection .TabGroup--index .Tab {
   box-shadow: none;
@@ -27466,23 +27583,23 @@ button.Button--full {
   padding: 16px;
 }
 .TabGroup--index .Tab--active {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .TabGroup--index .Tab--active:hover {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .CardSection .TabGroup--index .Tab--active {
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1, 1px 0 0 #dfe0e1, 0 1px 0 #ffffff;
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1), 1px 0 0 var(--colorsBorderGrey, #dfe0e1), 0 1px 0 var(--colorsSurfaceDefault, #ffffff);
 }
 
 .Tab--active {
-  box-shadow: 0 -2px 0 #2270ee inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
+  color: var(--colorsTextDefault, #141414);
 }
 .Tab--active:hover {
-  box-shadow: 0 -2px 0 #2270ee inset;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
 }
 
 .TabGroup--dark .Tab--active,
@@ -27496,10 +27613,10 @@ button.Button--full {
   box-shadow: none;
 }
 .TabGroup--dark .Tab:not(.Tab--active) {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
 }
 .TabGroup--dark .Tab:not(.Tab--active):hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
   box-shadow: none;
 }
 
@@ -27509,7 +27626,7 @@ button.Button--full {
 
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -27529,7 +27646,7 @@ button.Button--full {
 }
 
 .TabGroup--divider {
-  box-shadow: 0 -1px 0 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 
 .TabGroup__Item {
@@ -27551,7 +27668,7 @@ button.Button--full {
 }
 .TabGroup--verticallyDivided .Tab::before {
   box-shadow: -1px 0 0;
-  color: rgba(20, 20, 20, 0.3);
+  color: var(--colorsBorderGrey, #dfe0e1);
   content: "";
   height: 50%;
   position: absolute;
@@ -27587,7 +27704,7 @@ button.Button--full {
   box-shadow: 1px 0 0;
 }
 .TabGroup--verticallyDivided.TabGroup--dark .Tab--inactive::before {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TabGroup__action {
@@ -27609,7 +27726,7 @@ button.Button--full {
 
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -27707,11 +27824,11 @@ button.Button--full {
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-column-resizer:hover {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 .Table .k-grid-header-sticky[style*="border-right-width: 1px;"],
 .Table .k-grid-content-sticky[style*="border-right-width: 1px;"] {
-  box-shadow: 2px 3px 5px 0 rgba(20, 20, 20, 0.1);
+  box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
 .Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
   background-color: #eeeeee;
@@ -27724,7 +27841,7 @@ button.Button--full {
 /* Filter popups are rendered outside .Table in portal */
 .k-popup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -27744,11 +27861,11 @@ button.Button--full {
 
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   border-radius: 3px;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-size: 14px;
   font-weight: 600;
@@ -27958,11 +28075,11 @@ button.Button--full {
 
 .Tag .Tag__close.Button:focus {
   box-shadow: none;
-  background-color: rgba(20, 20, 20, 0.2);
+  background-color: rgba(4, 4, 4, 0.2);
 }
 .Tag--subtle.Tag .Tag__close.Button:focus,
 .Tag--default.Tag .Tag__close.Button:focus {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 
 .Tag--lightText,
@@ -27994,7 +28111,7 @@ button.Button--full {
 
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -28005,7 +28122,7 @@ button.Button--full {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -28033,10 +28150,10 @@ button.Button--full {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: flex;
   flex: 0 0 auto;
   font-size: 20px;
@@ -28050,9 +28167,9 @@ button.Button--full {
 .TakeoverHeader--light {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 #dfe0e1;
-  color: #444445;
+  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
 }
 
 .TakeoverHeader__title {
@@ -28101,16 +28218,16 @@ button.Button--full {
 }
 
 .TakeoverSection {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px;
 }
 .TakeoverSection + .TakeoverSection {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .TakeoverFooter {
-  background: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   flex: 0 0 auto;
   padding-top: 16px;
@@ -28135,7 +28252,7 @@ button.Button--full {
 
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;
@@ -28149,7 +28266,7 @@ button.Button--full {
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -28159,7 +28276,7 @@ button.Button--full {
   border-radius: 3px;
   box-shadow: none;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   font-size: 16px;
   outline: none;
   line-height: 1.2857;
@@ -28174,13 +28291,13 @@ button.Button--full {
   /* States */
 }
 .TextArea::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 @supports (-moz-appearance: none) {
   .TextArea {
@@ -28188,10 +28305,10 @@ button.Button--full {
   }
 }
 .TextArea:focus {
-  color: #141414;
+  color: #040404;
   border-color: #2270ee;
   background-color: #ffffff;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   -webkit-appearance: none;
 }
 .TextArea.TextArea--disabled, .TextArea:not(.TextArea--disabled)[disabled] {
@@ -28203,13 +28320,13 @@ button.Button--full {
   background-color: #f7f7f7;
 }
 .TextArea[readonly]::-moz-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea[readonly]:-ms-input-placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 .TextArea[readonly]::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .TextArea.TextArea--error {
@@ -28239,7 +28356,7 @@ 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;
@@ -28315,7 +28432,7 @@ button.Button--full {
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -28347,12 +28464,12 @@ button.Button--full {
 
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   display: flex;
@@ -28369,16 +28486,16 @@ button.Button--full {
   word-break: break-word;
 }
 .Toast--info .Toast__title {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__title {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__title {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__title {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__icon {
@@ -28387,20 +28504,20 @@ button.Button--full {
   transform: translateY(2px);
 }
 .Toast--info .Toast__icon {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__icon {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__icon {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__icon {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__description {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   margin-top: 8px;
 }
@@ -28436,7 +28553,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;
 }
@@ -28486,7 +28603,7 @@ button.Button--full {
 }
 .Togglebox:focus-within .CardSection {
   border-color: var(--colorsBorderPrimary, #56a4ff);
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Togglebox__content {
@@ -28545,7 +28662,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;
@@ -28619,7 +28736,7 @@ button.Button--full {
   background: var(--colorsSurfaceDisabled, #606162);
 }
 .ToggleSwitch--focus-visible:focus-within .ToggleSwitch__element {
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .Label.ToggleSwitch__label {
@@ -28656,7 +28773,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;
 }
@@ -28690,9 +28807,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;
@@ -28748,7 +28865,7 @@ _:-ms-lang(x), .Tooltip__body {
   }
 }
 .Tooltip__caret::before {
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
 }
 
 .bg-white {
@@ -28760,11 +28877,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .bg-black {
-  background-color: #141414;
+  background-color: #040404;
 }
 
 .bg-black-i {
-  background-color: #141414 !important;
+  background-color: #040404 !important;
 }
 
 .bg-blue {
@@ -28999,6 +29116,14 @@ _:-ms-lang(x), .Tooltip__body {
   background-color: #141414 !important;
 }
 
+.bg-neutral-500 {
+  background-color: #040404;
+}
+
+.bg-neutral-500-i {
+  background-color: #040404 !important;
+}
+
 .bg-blue-grey-100 {
   background-color: #eaeff2;
 }
@@ -29696,11 +29821,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .c-black {
-  color: #141414;
+  color: #040404;
 }
 
 .c-black-i {
-  color: #141414 !important;
+  color: #040404 !important;
 }
 
 .c-blue {
@@ -29935,6 +30060,14 @@ _:-ms-lang(x), .Tooltip__body {
   color: #141414 !important;
 }
 
+.c-neutral-500 {
+  color: #040404;
+}
+
+.c-neutral-500-i {
+  color: #040404 !important;
+}
+
 .c-blue-grey-100 {
   color: #eaeff2;
 }