@servicetitan/design-system 13.2.1 → 13.2.2

package/dist/components/index.css

@@ -20,7 +20,7 @@ span.Popover {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-radius: 6px;
   border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
@@ -171,12 +171,12 @@ span.Popover {
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuGroup__divider,
 .ActionMenu .ActionMenuItem {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   list-style: none;
 }
 .ActionMenu .ActionMenuItem {
   align-items: center;
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   display: flex;
   flex-direction: row;
   min-height: 26px;
@@ -185,8 +185,8 @@ span.Popover {
   outline: 0;
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus {
-  background: var(--colorsSurfacePrimary, #2270ee);
-  color: var(--colorsTextOnPrimary, #ffffff);
+  background: var(--colorsSurfacePrimary, #0265dc);
+  color: var(--colorsTextOnPrimary, white);
   cursor: pointer;
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
@@ -202,7 +202,7 @@ span.Popover {
 .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Eyebrow,
 .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Text,
 .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content {
-  color: var(--colorsTextOnPrimary, #ffffff);
+  color: var(--colorsTextOnPrimary, white);
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__icon .a-Icon > svg {
   fill: currentColor !important;
@@ -243,7 +243,7 @@ span.Popover {
   margin-right: 8px;
 }
 .ActionMenuGroup__label.Divider .Eyebrow {
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   opacity: 0.6;
 }
 
@@ -263,13 +263,13 @@ span.Popover {
 }
 
 .Announcement--info {
-  background-color: var(--colorsStatusInfo, #2270ee);
-  color: var(--colorsTextOnPrimary, #ffffff);
+  background-color: var(--colorsStatusInfo, #0265dc);
+  color: var(--colorsTextOnPrimary, white);
 }
 
 .Announcement--critical {
-  background-color: var(--colorsStatusCriticalStrong, #bf2a00);
-  color: var(--colorsTextOnCritical, #ffffff);
+  background-color: var(--colorsStatusCriticalStrong, #e13212);
+  color: var(--colorsTextOnCritical, white);
 }
 
 .Announcement--warning {
@@ -468,7 +468,7 @@ span.Popover {
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
   width: 100%;
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 3px;
   color: var(--colorsTextDefault, #141414);
@@ -477,7 +477,7 @@ span.Popover {
   position: relative;
 }
 .Trigger:focus, .Trigger:active {
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #0265dc);
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   outline: 0;
 }
@@ -516,7 +516,7 @@ span.Popover {
 }
 
 .Trigger--open {
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Trigger--open.Trigger--error {
   border-color: var(--colorsBorderCritical, #e13212);
@@ -571,7 +571,7 @@ span.Popover {
   border-color: var(--colorsBorderCritical, #e13212);
 }
 .Trigger-open .Trigger__shortLabel, .Trigger:active .Trigger__shortLabel {
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #0265dc);
 }
 
 .Trigger__shortLabel--left {
@@ -585,7 +585,7 @@ span.Popover {
   margin: -11px 0 -11px -11px;
 }
 .Trigger:active .Trigger__shortLabel--left, .Trigger--open .Trigger__shortLabel--left {
-  border-right-color: var(--colorsBorderPrimary, #2270ee);
+  border-right-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Trigger--error:active .Trigger__shortLabel--left, .Trigger--error.Trigger--open .Trigger__shortLabel--left {
   border-right-color: var(--colorsBorderCritical, #e13212);
@@ -602,7 +602,7 @@ span.Popover {
   margin: -11px -11px -11px 0;
 }
 .Trigger:active .Trigger__shortLabel--right, .Trigger--open .Trigger__shortLabel--right {
-  border-right-color: var(--colorsBorderPrimary, #2270ee);
+  border-right-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Trigger--error:active .Trigger__shortLabel--right, .Trigger--error.Trigger--open .Trigger__shortLabel--right {
   border-right-color: var(--colorsBorderCritical, #e13212);
@@ -811,21 +811,21 @@ span.Popover {
   margin-top: 5px;
 }
 .Banner--info .Banner__icon {
-  color: var(--colorsStatusInfoStrong, #004cc3);
+  color: var(--colorsStatusInfoStrong, #0265dc);
 }
 .Banner--critical .Banner__icon {
-  color: var(--colorsStatusCritical, #f94d32);
+  color: var(--colorsStatusCritical, #e13212);
 }
 .Banner--warning .Banner__icon {
   color: var(--colorsStatusWarning, #ffbe00);
 }
 .Banner--success .Banner__icon {
-  color: var(--colorsStatusSuccessStrong, #10864b);
+  color: var(--colorsStatusSuccessStrong, #007a4d);
 }
 
 .Banner--info {
-  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
-  border: 1px solid var(--colorsBorderPrimarySubdued, #a9d1ff);
+  background-color: var(--colorsSurfacePrimarySubdued, #e0f2ff);
+  border: 1px solid var(--colorsBorderPrimarySubdued, #b5deff);
 }
 
 .Banner--warning {
@@ -839,8 +839,8 @@ span.Popover {
 }
 
 .Banner--success {
-  background-color: var(--colorsSurfaceSuccessSubdued, #e1fdef);
-  border: 1px solid var(--colorsBorderSuccessSubdued, #90efc0);
+  background-color: var(--colorsSurfaceSuccessSubdued, #cef8e0);
+  border: 1px solid var(--colorsBorderSuccessSubdued, #89ecbc);
 }
 
 .Banner--compact .Banner__action > .Button:first-child {
@@ -1030,36 +1030,36 @@ span.Popover {
   text-decoration: none;
 }
 .Button:hover::before {
-  background-color: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button:active::before, .Button.Button--selected::before {
-  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 .Button.Button--focus-visible:focus {
   outline: 0;
-  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .Button.Button--outline {
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
 }
 .Button.Button--outline:hover::before {
-  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
-  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 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);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .Button.Button--subtle {
   background-color: transparent;
 }
 .Button.Button--subtle:hover::before {
-  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button.Button--subtle:active::before, .Button.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
 
 button.Button {
@@ -1099,38 +1099,38 @@ button.Button {
 }
 
 .Button--blue {
-  background-color: var(--colorsSurfacePrimary, #2270ee);
-  color: var(--colorsTextOnPrimary, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #0265dc);
+  color: var(--colorsTextOnPrimary, white);
 }
 .Button--blue:hover::before {
   background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: var(--colorsActiveOnPrimary, rgba(4, 4, 4, 0.08));
+  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
-  color: var(--colorsTextPrimary, #2270ee);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--outline:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 .Button--blue.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(0, 76, 195, 0.2));
+  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
 }
 .Button--blue.Button--subtle {
   background-color: transparent;
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--subtle:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 .Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(0, 76, 195, 0.2));
+  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
 }
 
 .Button--red {
@@ -1141,7 +1141,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(4, 4, 4, 0.16));
+  background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
 }
 .Button--red.Button--focus-visible:focus {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
@@ -1371,7 +1371,7 @@ button.Button--full {
   z-index: 2;
 }
 .ButtonToggle__Item .Button:hover {
-  background-color: var(--colorsHoverSubdued, rgba(20, 20, 20, 0.04));
+  background-color: var(--colorsHoverSubdued, rgba(68, 68, 69, 0.04));
 }
 
 .ButtonToggle__Item:not(:first-child) {
@@ -1402,17 +1402,17 @@ button.Button--full {
   box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected .Button {
-  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
-  color: var(--colorsTextPrimary, #2270ee);
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 var(--colorsBorderPrimary, #2270ee), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderPrimary, #0265dc), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--negative {
@@ -1424,7 +1424,7 @@ button.Button--full {
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected .Button {
   background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item--selected .Button {
   box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
@@ -1465,7 +1465,7 @@ button.Button--full {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-radius: 6px;
   color: var(--colorsTextDefault, #141414);
   font-size: 16px;
@@ -1541,7 +1541,7 @@ button.Button--full {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 200ms 0ms;
 }
 .Card--placeholder:hover {
-  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+  background-color: var(--colorsSurfacePrimarySubdued, #e0f2ff);
   box-shadow: 0 0 0;
 }
 .Card--placeholder:hover.Card--error {
@@ -1588,14 +1588,14 @@ button.Button--full {
   padding: 0;
 }
 .Card--active > .CardSection {
-  border-left-color: var(--colorsBorderPrimary, #2270ee);
-  border-right-color: var(--colorsBorderPrimary, #2270ee);
+  border-left-color: var(--colorsBorderPrimary, #0265dc);
+  border-right-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Card--active > .CardSection:first-child {
-  border-top-color: var(--colorsBorderPrimary, #2270ee);
+  border-top-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Card--active > .CardSection:last-child {
-  border-bottom-color: var(--colorsBorderPrimary, #2270ee);
+  border-bottom-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Card--error > .CardSection {
   border-left-color: var(--colorsBorderCritical, #e13212);
@@ -1657,8 +1657,8 @@ button.Button--full {
   /* Make sure CardSections with color don't inherit the active border */
 }
 .CardSection--blue, .Card--active > .CardSection--blue.CardSection {
-  background: #2270ee;
-  border-color: #2270ee;
+  background: #0265dc;
+  border-color: #0265dc;
 }
 
 .CardSection--purple {
@@ -1673,8 +1673,8 @@ button.Button--full {
   /* Make sure CardSections with color don't inherit the active border */
 }
 .CardSection--green, .Card--active > .CardSection--green.CardSection {
-  background: #1fbc70;
-  border-color: #1fbc70;
+  background: #007a4d;
+  border-color: #007a4d;
 }
 
 .CardSection--red {
@@ -1689,8 +1689,8 @@ button.Button--full {
   /* Make sure CardSections with color don't inherit the active border */
 }
 .CardSection--lightblue, .Card--active > .CardSection--lightblue.CardSection {
-  background: #a9d1ff;
-  border-color: #a9d1ff;
+  background: #b5deff;
+  border-color: #b5deff;
 }
 
 .a-Checkbox {
@@ -1773,7 +1773,7 @@ button.Button--full {
 }
 
 .Checkbox__box {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-radius: 3px;
   border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
   box-sizing: border-box;
@@ -1809,7 +1809,7 @@ button.Button--full {
   border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, white), 0%), 0 0 0 0 var(--colorsBorderPrimary, #0265dc) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -1820,7 +1820,7 @@ button.Button--full {
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, white) inset, -2px 0 0 0 var(--colorsTextInverted, white) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -1835,7 +1835,7 @@ button.Button--full {
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, white) inset, -2.5px 0 0 0 var(--colorsTextInverted, white) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -1847,7 +1847,7 @@ button.Button--full {
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #0265dc) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   opacity: 1;
@@ -1859,7 +1859,7 @@ button.Button--full {
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
   border-color: var(--colorsBorderDefault, #444445);
@@ -1868,14 +1868,14 @@ button.Button--full {
   border-color: var(--colorsBorderCritical, #e13212);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #0265dc) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
   box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: var(--colorsBorderPrimary, #2270ee);
-  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
+  border-color: var(--colorsBorderPrimary, #0265dc);
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
   border-color: var(--colorsBorderCritical, #e13212);
@@ -1940,8 +1940,8 @@ button.Button--full {
   /* smartphones, touchscreens */
 }
 .ColorPicker__Item--active {
-  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee);
-  border-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #0265dc);
+  border-color: var(--colorsSurfaceDefault, white);
   cursor: default;
 }
 @media (pointer: coarse) {
@@ -1968,7 +1968,7 @@ button.Button--full {
   outline: none;
 }
 .ColorPicker__CardWrapper--focus .ColorPicker__CardSection {
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #0265dc);
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ColorPicker__CardWrapper--disabled .ColorPicker--disabled {
@@ -2118,8 +2118,8 @@ button.Button--full {
 }
 
 .DatePicker--open .Input:not(:focus) > .Input__InnerWrapper {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  background-color: var(--colorsSurfaceDefault, white);
+  border-color: var(--colorsBorderPrimary, #0265dc);
 }
 .DatePicker--open .Input.Input--error:not(:focus) > .Input__InnerWrapper {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
@@ -2136,29 +2136,53 @@ button.Button--full {
   justify-content: center;
 }
 .DatePicker__calendar .k-calendar {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   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);
+  box-shadow: 0 0 38px 19px var(--colorsSurfaceDefault, white);
 }
 .DatePicker__calendar .k-calendar .k-calendar-view {
   z-index: 2;
 }
 .DatePicker__calendar .k-calendar .k-calendar-view .k-today {
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
-.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td:hover .k-link {
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td:not(.k-range-mid):not(.k-selected):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-view .k-calendar-td.k-range-mid:hover {
+  position: relative;
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-range-mid:hover .k-link {
+  background-color: transparent;
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-range-mid:hover::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-state-selected .k-link, .DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-selected .k-link {
+  color: var(--colorsTextInverted, white);
+  background-color: var(--colorsSurfacePrimary, #0265dc);
+  border-color: var(--colorsBorderPrimary, #0265dc);
+}
+.DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-state-selected:hover .k-link::before, .DatePicker__calendar .k-calendar .k-calendar-view .k-calendar-td.k-selected:hover .k-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
 }
 .DatePicker__calendar .k-calendar .k-calendar-navigation {
   background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
@@ -2171,7 +2195,7 @@ button.Button--full {
 .DatePicker__calendar .k-calendar .k-calendar-navigation-highlight {
   border-color: var(--colorsBorderGrey, #dfe0e1);
   color: var(--colorsTextDefault, #141414);
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
 }
 .DatePicker__calendar .k-calendar .k-content {
   background-color: unset;
@@ -2188,7 +2212,7 @@ button.Button--full {
   margin-top: 8px;
 }
 .DatePicker__calendar .k-calendar .k-nav-today {
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
   cursor: pointer;
   padding: 5px 8px;
 }
@@ -2388,7 +2412,7 @@ button.Button--full {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   bottom: 0;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.15);
   box-sizing: border-box;
@@ -2551,7 +2575,7 @@ button.Button--full {
 
 .a-Icon.FilePicker__File__Icon {
   margin-right: 8px;
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 
 .FilePicker__File__ActionIcon {
@@ -2604,7 +2628,7 @@ button.Button--full {
   padding: 4px 8px;
   border-radius: 500em;
   border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   font-size: 12px;
   cursor: pointer;
   background-color: transparent;
@@ -2616,7 +2640,7 @@ button.Button--full {
 }
 .FilterButton.FilterButton--focus-visible:focus {
   outline: 0;
-  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .FilterButton .FilterButton__Icon {
   height: 21px;
@@ -2676,7 +2700,7 @@ button.Button--full {
   content: "";
   width: 6px;
   height: 100%;
-  background-color: var(--colorsStatusInfo, #2270ee);
+  background-color: var(--colorsStatusInfo, #0265dc);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -2684,23 +2708,23 @@ button.Button--full {
   top: 0;
 }
 .FlowCardStep--active.FlowCardStep--error::before {
-  background-color: var(--colorsStatusCritical, #f94d32);
+  background-color: var(--colorsStatusCritical, #e13212);
 }
 .FlowCardStep--active.FlowCardStep--saved::before {
-  background-color: var(--colorsStatusSuccess, #18a761);
+  background-color: var(--colorsStatusSuccess, #007a4d);
 }
 .FlowCardStep--active .FlowCardStep__header {
   border-bottom: none;
 }
 .FlowCardStep--active.FlowCardStep--headerOnly .FlowCardStep__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .FlowCardStep--error::before {
   content: "";
   width: 6px;
   height: 100%;
-  background-color: var(--colorsStatusCritical, #f94d32);
+  background-color: var(--colorsStatusCritical, #e13212);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -2735,8 +2759,8 @@ button.Button--full {
   font-size: 14px;
 }
 .FlowCardStep__status.FlowCardStep__status--active {
-  background-color: var(--colorsStatusInfo, #2270ee);
-  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsStatusInfo, #0265dc);
+  color: var(--colorsTextInverted, white);
 }
 .FlowCardStep__status.FlowCardStep__status--error {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
@@ -2744,39 +2768,39 @@ button.Button--full {
 
 .FlowCardStep--ordered .FlowCardStep__status {
   background-color: var(--colorsSurfaceGreyStronger, #bcbcbd);
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
 }
 .FlowCardStep--ordered .FlowCardStep__status--active {
-  background-color: var(--colorsStatusInfo, #2270ee);
-  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsStatusInfo, #0265dc);
+  color: var(--colorsTextInverted, white);
 }
 .FlowCardStep--ordered .FlowCardStep__status--custom {
   background-color: inherit;
   color: inherit;
 }
 .FlowCardStep--ordered .FlowCardStep__status--saved {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
-  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
+  color: var(--colorsTextInverted, white);
 }
 .FlowCardStep--ordered .FlowCardStep__status--error {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 
 .FlowCardStep__icon-active {
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
 }
 
 .FlowCardStep .FlowCardStep__indicator-active {
-  color: var(--colorsStatusSuccess, #18a761);
+  color: var(--colorsStatusSuccess, #007a4d);
 }
 .FlowCardStep .FlowCardStep__indicator-complete {
-  color: var(--colorsStatusSuccess, #18a761);
+  color: var(--colorsStatusSuccess, #007a4d);
 }
 .FlowCardStep .FlowCardStep__indicator-disabled {
   color: var(--colorsSurfaceGreyStronger, #bcbcbd);
 }
 .FlowCardStep .FlowCardStep__indicator-error {
-  color: var(--colorsStatusCritical, #f94d32);
+  color: var(--colorsStatusCritical, #e13212);
 }
 
 .FormField {
@@ -2901,10 +2925,10 @@ button.Button--full {
   color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
-  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
-  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
   color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
@@ -7863,7 +7887,7 @@ button.a-Icon {
 }
 button.a-Icon:focus {
   border-radius: 3px;
-  box-shadow: 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: 0 0 0 2px var(--colorsFocusRingPrimary, #78bbfa);
   outline: 0;
 }
 
@@ -7962,7 +7986,7 @@ button.a-Icon svg {
 }
 
 .InlineEdit__content--textcolor {
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 
 .InlineEdit__content--error {
@@ -8136,7 +8160,7 @@ button.a-Icon svg {
   padding: 0;
   max-width: 100%;
   /* ... */
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   color: var(--colorsTextDefault, #141414);
   border-radius: 3px;
@@ -8210,8 +8234,8 @@ button.a-Icon svg {
   border-radius: 3px;
 }
 .Input:focus-within > .Input__InnerWrapper, .Input.Input--focus > .Input__InnerWrapper {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  background-color: var(--colorsSurfaceDefault, white);
+  border-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Input:focus-within > .Input__InnerWrapper > input, .Input.Input--focus > .Input__InnerWrapper > input {
   color: var(--colorsTextDefault, #141414);
@@ -8398,14 +8422,14 @@ button.a-Icon svg {
   font-weight: 600;
 }
 .Label.Label--error, .Form label.Label--error:not(.Field__html-label) {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Label.Label--disabled, .Form label.Label--disabled:not(.Field__html-label) {
   opacity: 0.4;
 }
 
 .Label__required {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
   margin-left: 2px;
 }
 
@@ -8578,11 +8602,11 @@ button.a-Icon svg {
 }
 
 .Link--blue {
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 
 .Link--red {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .Link--grey {
@@ -8623,7 +8647,7 @@ button.a-Icon svg {
 }
 
 .Mask__backdrop {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   position: absolute;
   height: 100%;
   width: 100%;
@@ -8665,7 +8689,7 @@ button.a-Icon svg {
   max-height: 90vh;
   margin: 5vh auto;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-radius: 6px;
   position: relative;
 }
@@ -8695,7 +8719,7 @@ button.a-Icon svg {
 .Modal__header,
 .Modal__content,
 .Modal__footer {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   padding: 24px 32px;
 }
 
@@ -8849,6 +8873,7 @@ button.a-Icon svg {
   content: "";
   position: absolute;
   inset: -8px -16px;
+  z-index: -1;
 }
 .OptionList__option .a-Checkbox {
   width: 100%;
@@ -8868,13 +8893,13 @@ button.a-Icon svg {
 }
 
 .OptionList--single-select .OptionList__option--selected {
-  background-color: var(--colorsHoverPrimary, #ecf4fd);
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 .OptionList--single-select .OptionList__option--selected .Checkbox__label {
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
-  background-color: var(--colorsHoverPrimary, #ecf4fd);
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 
 /* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
@@ -9067,7 +9092,7 @@ button.a-Icon svg {
 .Page__actionToolbar {
   min-height: 56px;
   padding: 12px 24px;
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
@@ -9086,7 +9111,7 @@ button.a-Icon svg {
 }
 
 .Panel {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   width: 0;
   border-left: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
@@ -9123,7 +9148,7 @@ button.a-Icon svg {
 .Page__footer {
   min-height: 56px;
   padding: 16px 24px;
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
@@ -9163,13 +9188,13 @@ button.a-Icon svg {
   stroke: #08bfdf;
 }
 .ProgressCircle--blue .ProgressCircle__circle {
-  stroke: var(--colorsStatusInfo, #2270ee);
+  stroke: var(--colorsStatusInfo, #0265dc);
 }
 .ProgressCircle--red .ProgressCircle__circle {
-  stroke: var(--colorsStatusCritical, #f94d32);
+  stroke: var(--colorsStatusCritical, #e13212);
 }
 .ProgressCircle--green .ProgressCircle__circle {
-  stroke: var(--colorsStatusSuccess, #18a761);
+  stroke: var(--colorsStatusSuccess, #007a4d);
 }
 .ProgressCircle--yellow .ProgressCircle__circle {
   stroke: var(--colorsStatusWarning, #ffbe00);
@@ -9239,23 +9264,23 @@ button.a-Icon svg {
 }
 
 .ProgressBar--blue::-webkit-progress-value {
-  background: var(--colorsStatusInfo, #2270ee);
+  background: var(--colorsStatusInfo, #0265dc);
 }
 .ProgressBar--blue::-moz-progress-bar {
-  background: var(--colorsStatusInfo, #2270ee);
+  background: var(--colorsStatusInfo, #0265dc);
 }
 .ProgressBar--blue .ProgressBar__value {
-  background: var(--colorsStatusInfo, #2270ee);
+  background: var(--colorsStatusInfo, #0265dc);
 }
 
 .ProgressBar--green::-webkit-progress-value {
-  background: var(--colorsStatusSuccess, #18a761);
+  background: var(--colorsStatusSuccess, #007a4d);
 }
 .ProgressBar--green::-moz-progress-bar {
-  background: var(--colorsStatusSuccess, #18a761);
+  background: var(--colorsStatusSuccess, #007a4d);
 }
 .ProgressBar--green .ProgressBar__value {
-  background: var(--colorsStatusSuccess, #18a761);
+  background: var(--colorsStatusSuccess, #007a4d);
 }
 
 .ProgressBar--red::-webkit-progress-value {
@@ -9370,7 +9395,7 @@ button.a-Icon svg {
 }
 
 .ProgressTrackerDivider--completed::after {
-  background-color: var(--colorsStatusInfo, #2270ee);
+  background-color: var(--colorsStatusInfo, #3892f3);
 }
 
 .ProgressTrackerStep {
@@ -9409,7 +9434,7 @@ button.a-Icon svg {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  color: var(---colorsTextInverted, #ffffff);
+  color: var(---colorsTextInverted, white);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -9420,7 +9445,7 @@ button.a-Icon svg {
   width: 17px;
   height: 17px;
   border-radius: 50%;
-  color: var(---colorsTextInverted, #ffffff);
+  color: var(---colorsTextInverted, white);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -9430,10 +9455,10 @@ button.a-Icon svg {
   box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressTrackerStep--active .ProgressTrackerStep__simple {
-  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #0265dc);
 }
 .ProgressTrackerStep--complete .ProgressTrackerStep__simple, .ProgressTrackerStep--editing .ProgressTrackerStep__simple {
-  background-color: var(--colorsTextPrimary, #1360d9);
+  background-color: var(--colorsTextPrimary, #0265dc);
 }
 
 .ProgressTrackerStep__label {
@@ -9448,7 +9473,7 @@ button.a-Icon svg {
   cursor: pointer;
 }
 .ProgressTrackerStep--clickable .ProgressTrackerStep__label {
-  color: var(--colorsTextPrimary, #1360d9);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .ProgressTrackerStep--clickable .ProgressTrackerStep__label:hover, .ProgressTrackerStep--clickable .ProgressTrackerStep__label:focus {
   text-decoration: underline;
@@ -9464,7 +9489,7 @@ button.a-Icon svg {
 }
 
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  color: var(--colorsTextPrimary, #1360d9);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .ProgressTrackerStep--complete .a-Icon {
   font-size: 28px;
@@ -9480,8 +9505,8 @@ button.a-Icon svg {
 }
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
-  color: var(--colorsTextPrimary, #1360d9);
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #0265dc);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 
 .ProgressTrackerStep--disabled {
@@ -9582,7 +9607,7 @@ button.a-Icon svg {
 }
 
 .Radio__box {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   border-radius: 100%;
   box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd) inset;
   display: inline-flex;
@@ -9613,7 +9638,7 @@ button.a-Icon svg {
   top: 7px;
 }
 .Radio__box::before {
-  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #0265dc) inset;
   border-radius: 100%;
   bottom: 0;
   content: "";
@@ -9642,7 +9667,7 @@ button.a-Icon svg {
   box-shadow: 0 0 0 1px var(--colorsBorderCriticalSubdued, #ffb2a0) inset;
 }
 .Radio__input:checked + .Radio__box, .Radio--checked .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #0265dc) inset;
 }
 .a-Radio .Radio__input:checked + .Radio__box::after, .a-Radio .Radio--checked .Radio__box::after {
   background-color: transparent;
@@ -9672,10 +9697,10 @@ button.a-Icon svg {
   box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #0265dc) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box::before, .Radio--checked:not(.Radio--disabled):hover .Radio__box::before {
-  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #0265dc) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__box {
   box-shadow: 0 0 0 1px #f94d32 inset;
@@ -9687,7 +9712,7 @@ button.a-Icon svg {
   box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e13212) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #0265dc) 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, #e13212) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -9756,10 +9781,10 @@ button.a-Icon svg {
   overflow-y: hidden;
 }
 .Scroll__Scrollbar:focus {
-  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+  outline-color: var(--colorsFocusRingPrimary, #78bbfa);
 }
 .Scroll__Scrollbar:focus-visible {
-  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+  outline-color: var(--colorsFocusRingPrimary, #78bbfa);
 }
 
 /* Scrollable without visible scrollbar */
@@ -9865,7 +9890,7 @@ button.a-Icon svg {
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   color: var(--colorsTextDefault, #141414);
   border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
@@ -9875,19 +9900,19 @@ button.a-Icon svg {
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
   border-color: var(--colorsBorderGrey, #dfe0e1) !important;
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
 }
 .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));
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 .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);
+  color: var(--colorsTextCritical, #bf2a00);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
   border-color: var(--colorsBorderCritical, #e13212);
 }
@@ -9896,13 +9921,13 @@ button.a-Icon svg {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item.selected {
-  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
-  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .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;
@@ -9986,7 +10011,7 @@ button.a-Icon svg {
 }
 .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: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .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 var(--colorsFocusRingPrimary, #a9d1ff) !important;
@@ -10012,7 +10037,7 @@ button.a-Icon svg {
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {
@@ -10062,7 +10087,7 @@ button.a-Icon svg {
 .Page.bg-neutral-10 .Sidebar__content,
 .Sidebar__toggle-button,
 .Page.bg-neutral-10 .Sidebar__toggle-button {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
 }
 .Page.bg-white .Sidebar__wrapper, .Page.bg-neutral-0 .Sidebar__wrapper,
 .Page.bg-white .Sidebar__content,
@@ -10122,16 +10147,16 @@ button.a-Icon svg {
   opacity: 0;
   transition: opacity 0.25s;
   padding: 3px !important;
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
 }
 .Sidebar__toggle-button:hover {
-  background: var(--colorsSurfaceDefault, #ffffff);
-  color: var(--colorsTextPrimary, #2270ee);
-  border-color: var(--colorsTextPrimary, #2270ee);
+  background: var(--colorsSurfaceDefault, white);
+  color: var(--colorsTextPrimary, #0265dc);
+  border-color: var(--colorsTextPrimary, #0265dc);
   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));
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 .Sidebar__toggle-button.Button--focus-visible:focus {
   opacity: 1;
@@ -10220,14 +10245,14 @@ button.a-Icon svg {
   /* States */
 }
 .SideNavItem > .SideNavItem__button:hover {
-  background: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+  background: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .SideNavItem > .SideNavItem__button:active:not(:focus-within) {
-  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 .SideNavItem > .SideNavItem__button.SideNavItem__button--focus-visible:focus {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
+  box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix,
 .SideNavItem > .SideNavItem__button > .SideNavItem__button__content,
@@ -10252,15 +10277,15 @@ button.a-Icon svg {
   pointer-events: none;
 }
 .SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) {
-  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
-  color: var(--colorsTextPrimary, #2270ee);
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) > .SideNavItem__button__content {
   font-weight: bold;
 }
 .SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) .a-Icon svg {
-  color: var(--colorsTextPrimary, #2270ee) !important;
-  fill: var(--colorsTextPrimary, #2270ee) !important;
+  color: var(--colorsTextPrimary, #0265dc) !important;
+  fill: var(--colorsTextPrimary, #0265dc) !important;
 }
 .SideNavItem .SideNavItem__button--expanded > .SideNavItem__button__content {
   font-weight: bold;
@@ -10335,7 +10360,7 @@ button.a-Icon svg {
   border-radius: 3px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
   display: inline-flex;
   font-size: 16px;
   align-items: center;
@@ -10354,7 +10379,7 @@ button.a-Icon svg {
 
 .Snackbar__action {
   background: transparent;
-  color: var(--colorsTextPrimarySubdued, #a9d1ff);
+  color: var(--colorsTextPrimarySubdued, #78bbfa);
   cursor: pointer;
   line-height: 1.5;
   text-align: right;
@@ -10384,7 +10409,7 @@ button.a-Icon svg {
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: var(--colorsTextInverted, #949596);
+  color: var(--colorsTextInverted, white);
 }
 
 .Snackbar--floating {
@@ -10740,16 +10765,16 @@ button.a-Icon svg {
   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: var(--colorsStatusInfo, #2270ee);
+  background-color: var(--colorsStatusInfo, #0265dc);
 }
 .StatusLight .StatusLight__indicator--success {
-  background-color: var(--colorsStatusSuccess, #18a761);
+  background-color: var(--colorsStatusSuccess, #007a4d);
 }
 .StatusLight .StatusLight__indicator--warning {
   background-color: var(--colorsStatusWarning, #ffbe00);
 }
 .StatusLight .StatusLight__indicator--critical {
-  background-color: var(--colorsStatusCritical, #f94d32);
+  background-color: var(--colorsStatusCritical, #e13212);
 }
 
 @keyframes shadow-pulse {
@@ -10870,7 +10895,7 @@ button.a-Icon svg {
 }
 
 .Tab--inactive:hover, .Tab--inactive--hover {
-  box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #a9d1ff) inset;
+  box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #78bbfa) inset;
   color: var(--colorsTextSubdued, #606162);
   text-decoration: none;
 }
@@ -10912,23 +10937,23 @@ button.a-Icon svg {
   padding: 16px;
 }
 .TabGroup--index .Tab--active {
-  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;
+  background-color: var(--colorsSurfaceDefault, white);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #0265dc) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .TabGroup--index .Tab--active:hover {
-  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;
+  background-color: var(--colorsSurfaceDefault, white);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #0265dc) 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 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1), 1px 0 0 var(--colorsBorderGrey, #dfe0e1), 0 1px 0 var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #0265dc) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1), 1px 0 0 var(--colorsBorderGrey, #dfe0e1), 0 1px 0 var(--colorsSurfaceDefault, white);
 }
 
 .Tab--active {
-  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #0265dc) inset;
   color: var(--colorsTextDefault, #141414);
 }
 .Tab--active:hover {
-  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #0265dc) inset;
 }
 
 .TabGroup--dark .Tab--active,
@@ -10942,7 +10967,7 @@ button.a-Icon svg {
   box-shadow: none;
 }
 .TabGroup--dark .Tab:not(.Tab--active) {
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
 }
 .TabGroup--dark .Tab:not(.Tab--active):hover {
   background: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
@@ -11033,7 +11058,7 @@ button.a-Icon svg {
   box-shadow: 1px 0 0;
 }
 .TabGroup--verticallyDivided.TabGroup--dark .Tab--inactive::before {
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
 }
 
 .TabGroup__action {
@@ -11131,7 +11156,7 @@ button.a-Icon svg {
 }
 .Table.k-grid {
   border-color: var(--colorsBorderGrey, #dfe0e1);
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
 }
 .Table.k-grid .k-grid-header {
   color: var(--colorsTextOnGrey, #444445);
@@ -11143,15 +11168,15 @@ button.a-Icon svg {
   background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
-  background-color: var(--colorsSurfacePrimary, #2270ee);
+  background-color: var(--colorsSurfacePrimary, #0265dc);
 }
 .Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
-  color: var(--colorsTextOnPrimary, #ffffff);
+  color: var(--colorsTextOnPrimary, white);
 }
 .Table.k-grid .k-grid-header .k-i-sort-asc-sm,
 .Table.k-grid .k-grid-header .k-i-sort-desc-sm,
 .Table.k-grid .k-grid-header .k-sort-order {
-  color: var(--colorsTextPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .Table.k-grid tr.k-alt {
   background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
@@ -11164,11 +11189,11 @@ button.a-Icon svg {
 }
 .Table.k-grid tr.k-alt.k-selected,
 .Table.k-grid tr.k-selected {
-  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+  background-color: var(--colorsSurfacePrimarySubdued, #e0f2ff);
 }
 .Table.k-grid tr.k-alt.k-selected:hover,
 .Table.k-grid tr.k-selected:hover {
-  background-color: var(--colorsHoverPrimary, #a9d1ff);
+  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
 }
 .Table.k-grid tr.k-alt.k-selected > td,
 .Table.k-grid tr.k-selected > td {
@@ -11195,19 +11220,19 @@ button.a-Icon svg {
   background-color: var(--colorsSurfaceGrey, #eeeeee);
 }
 .Table.k-grid .k-grid-content {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
 }
 .Table.k-grid .k-checkbox {
   border-color: var(--colorsBorderGreyStrong, #bcbcbd);
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
 }
 .Table.k-grid .k-checkbox.k-checked, .Table.k-grid .k-checkbox:checked {
-  border-color: var(--colorsBorderPrimary, #2270ee);
-  color: var(--colorsTextOnPrimary, #ffffff);
-  background-color: var(--colorsSurfacePrimary, #2270ee);
+  border-color: var(--colorsBorderPrimary, #0265dc);
+  color: var(--colorsTextOnPrimary, white);
+  background-color: var(--colorsSurfacePrimary, #0265dc);
 }
 .Table.k-grid .k-checkbox.k-focus, .Table.k-grid .k-checkbox:checked:focus, .Table.k-grid .k-checkbox:focus {
-  box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #ecf4fd);
+  box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .Table.k-grid .k-filter-row > td,
 .Table.k-grid .k-filter-row > th,
@@ -11230,9 +11255,9 @@ button.a-Icon svg {
   background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 .Table.k-grid .k-pager-wrap .k-selected {
-  background-color: var(--colorsSurfacePrimary, #2270ee);
+  background-color: var(--colorsSurfacePrimary, #0265dc);
   border-radius: 3px;
-  color: var(--colorsTextOnPrimary, #ffffff);
+  color: var(--colorsTextOnPrimary, white);
   cursor: default;
 }
 .Table.k-grid .k-pager-wrap .k-pager-nav.k-link:hover,
@@ -11319,7 +11344,7 @@ button.a-Icon svg {
   background-color: #b14c00;
 }
 .Tag.Tag--success {
-  background-color: #18a761;
+  background-color: #007a4d;
 }
 .Tag.Tag--info {
   background-color: #6954c0;
@@ -11347,8 +11372,8 @@ button.a-Icon svg {
   color: #444445;
 }
 .Tag.Tag--subtle.Tag--success {
-  background-color: #e1fdef;
-  color: #10864b;
+  background-color: #cef8e0;
+  color: #005132;
 }
 .Tag.Tag--subtle.Tag--info {
   background-color: #f1edff;
@@ -11432,7 +11457,7 @@ button.a-Icon svg {
 }
 
 .Tag--subtle.Tag--success.Tag .Tag__close.Button {
-  color: #10864b;
+  color: #005132;
 }
 
 .Tag--subtle.Tag--info.Tag .Tag__close.Button {
@@ -11466,7 +11491,7 @@ button.a-Icon svg {
 }
 
 .Tag--success.Tag .Tag__close.Button:hover {
-  background-color: #10864b;
+  background-color: #005132;
 }
 
 .Tag--info.Tag .Tag__close.Button:hover {
@@ -11491,7 +11516,7 @@ button.a-Icon svg {
 }
 
 .Tag--subtle.Tag--success.Tag .Tag__close.Button:hover {
-  background-color: rgba(16, 134, 75, 0.2);
+  background-color: rgba(0, 81, 50, 0.2);
 }
 
 .Tag--subtle.Tag--info.Tag .Tag__close.Button:hover {
@@ -11556,7 +11581,7 @@ button.a-Icon svg {
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   text-align: left;
   z-index: 1100;
 }
@@ -11587,7 +11612,7 @@ button.a-Icon svg {
   background: var(--colorsSurfaceInvertedStrong, #141414);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
   display: flex;
   flex: 0 0 auto;
   font-size: 20px;
@@ -11652,7 +11677,7 @@ button.a-Icon svg {
 }
 
 .TakeoverSection {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   padding: 24px;
 }
 .TakeoverSection + .TakeoverSection {
@@ -11660,7 +11685,7 @@ button.a-Icon svg {
 }
 
 .TakeoverFooter {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   flex: 0 0 auto;
@@ -11706,7 +11731,7 @@ button.a-Icon svg {
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  background-color: var(--colorsSurfaceDefault, white);
   border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 3px;
   box-shadow: none;
@@ -11736,8 +11761,8 @@ button.a-Icon svg {
 }
 .TextArea:focus-within, .TextArea:focus {
   color: var(--colorsTextDefault, #141414);
-  border-color: var(--colorsBorderPrimary, #2270ee);
-  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-color: var(--colorsBorderPrimary, #0265dc);
+  background-color: var(--colorsSurfaceDefault, white);
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   -webkit-appearance: none;
 }
@@ -11787,7 +11812,7 @@ button.a-Icon svg {
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid var(--colorsBorderDefault, #dfe0e1);
+  border: 1px solid var(--colorsBorderDefault, #444445);
   display: inline-block;
   position: relative;
   overflow: hidden;
@@ -11849,8 +11874,8 @@ button.a-Icon svg {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: var(--colorsActiveStrong, rgba(20, 20, 20, 0.2));
-  color: var(--colorsTextInverted, #ffffff);
+  background-color: var(--colorsActiveStrong, rgba(20, 20, 20, 0.4));
+  color: var(--colorsTextInverted, white);
 }
 
 .TimePicker {
@@ -11886,8 +11911,8 @@ button.a-Icon svg {
 }
 
 .TimePicker--open .Input:not(:focus) > .Input__InnerWrapper {
-  background-color: var(--colorsSurfaceDefault, #ffffff);
-  border-color: var(--colorsBorderPrimary, #2270ee);
+  background-color: var(--colorsSurfaceDefault, white);
+  border-color: var(--colorsBorderPrimary, #0265dc);
 }
 .TimePicker--open .Input.Input--error:not(:focus) > .Input__InnerWrapper {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
@@ -11899,7 +11924,7 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-radius: 3px;
   border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
@@ -11919,13 +11944,13 @@ button.a-Icon svg {
   word-break: break-word;
 }
 .Toast--info .Toast__title {
-  color: var(--colorsTextPrimary, #1360d9);
+  color: var(--colorsTextPrimary, #0265dc);
 }
 .Toast--critical .Toast__title {
   color: var(--colorsTextCritical, #bf2a00);
 }
 .Toast--success .Toast__title {
-  color: var(--colorsStatusSuccessStrong, #10864b);
+  color: var(--colorsStatusSuccessStrong, #007a4d);
 }
 .Toast--warning .Toast__title {
   color: var(--colorsTextDefault, #141414);
@@ -11937,16 +11962,16 @@ button.a-Icon svg {
   transform: translateY(2px);
 }
 .Toast--info .Toast__icon {
-  color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsStatusInfo, #0265dc);
 }
 .Toast--critical .Toast__icon {
-  color: var(--colorsStatusCritical, #f94d32);
+  color: var(--colorsStatusCritical, #e13212);
 }
 .Toast--success .Toast__icon {
-  color: var(--colorsStatusSuccessStrong, #10864b);
+  color: var(--colorsStatusSuccessStrong, #007a4d);
 }
 .Toast--warning .Toast__icon {
-  color: var(--colorsStatusWarningStrong, #de9500);
+  color: var(--colorsStatusWarningStrong, #ffbe00);
 }
 
 .Toast__description {
@@ -12033,10 +12058,10 @@ button.a-Icon svg {
   margin-right: -16px;
 }
 .Togglebox:hover .CardSection {
-  border-color: var(--colorsBorderPrimary, #56a4ff);
+  border-color: var(--colorsBorderPrimary, #0265dc);
 }
 .Togglebox:focus-within .CardSection {
-  border-color: var(--colorsBorderPrimary, #56a4ff);
+  border-color: var(--colorsBorderPrimary, #0265dc);
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
@@ -12136,7 +12161,7 @@ button.a-Icon svg {
   width: 42px;
 }
 .ToggleSwitch__element::before {
-  background: var(--colorsSurfaceDefault, #ffffff);
+  background: var(--colorsSurfaceDefault, white);
   border-radius: 100%;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   content: "";
@@ -12158,13 +12183,13 @@ button.a-Icon svg {
   background: var(--colorsSurfaceGreyStrong, #dfe0e1);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--checked .ToggleSwitch__element {
-  background: var(--colorsStatusSuccess, #18a761);
+  background: var(--colorsStatusSuccess, #007a4d);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element::before, .ToggleSwitch--checked .ToggleSwitch__element::before {
   left: 22px;
 }
 .ToggleSwitch:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: var(--colorsStatusSuccessStrong, #10864b);
+  background: var(--colorsStatusSuccessStrong, #007a4d);
 }
 .ToggleSwitch--disabled .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled .ToggleSwitch--checked .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch--checked .ToggleSwitch__element {
   background: var(--colorsSurfaceDisabled, #606162);
@@ -12246,7 +12271,7 @@ button.a-Icon svg {
   font-size: 14px;
   background: var(--colorsSurfaceInvertedStrong, #141414);
   border-radius: 3px;
-  color: var(--colorsTextInverted, #ffffff);
+  color: var(--colorsTextInverted, white);
   max-width: 18em;
   padding: 4px 8px;
   position: relative;