@servicetitan/design-system 11.1.0 → 11.3.1

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "11.1.0";
+  --anvil-version: "11.3.1";
 }
 
 /*
@@ -91,7 +91,7 @@ a:focus {
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 25px;
 }
 .FormField .a-Checkbox {
@@ -157,11 +157,17 @@ a:focus {
   position: absolute;
   position: initial;
 }
+@supports (-moz-appearance: none) {
+  .Checkbox__input {
+    margin-left: -2px !important;
+    margin-right: -2px !important;
+  }
+}
 
 .Checkbox__box {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #bcbcbd;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
   box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
@@ -192,10 +198,10 @@ a:focus {
   margin-bottom: -6px;
 }
 .Checkbox--error .Checkbox__box {
-  border-color: #ffb2a0;
+  border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 #2270ee inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -206,7 +212,7 @@ a:focus {
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 white inset, -2px 0 0 0 white inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -221,7 +227,7 @@ a:focus {
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 white inset, -2.5px 0 0 0 white inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -233,39 +239,39 @@ a:focus {
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #ffb2a0;
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #a9d1ff;
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #444445;
+  border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 4px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: #e63717;
-  box-shadow: 0 0 0 4px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Checkbox--disabled .Checkbox__box {
@@ -273,7 +279,7 @@ a:focus {
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {
@@ -16854,7 +16860,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   box-sizing: border-box;
   color: #141414;
   display: inline-flex;
-  font-weight: 600;
+  font-weight: 700;
   justify-content: center;
   letter-spacing: -0.05em;
   line-height: 1;
@@ -16970,7 +16976,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   background: #ffffff;
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(20, 20, 20, 0.1);
-  color: #444445;
+  color: var(--colorsTextDefault, #141414);
   font-size: 16px;
   display: flex;
   line-height: 1.5;
@@ -17003,36 +17009,36 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin-top: 5px;
 }
 .Banner--info .Banner__icon {
-  color: #004cc3;
+  color: var(--colorsStatusInfoStrong, #004cc3);
 }
 .Banner--critical .Banner__icon {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Banner--warning .Banner__icon {
-  color: #ffbe00;
+  color: var(--colorsStatusWarning, #ffbe00);
 }
 .Banner--success .Banner__icon {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 
 .Banner--info {
-  background-color: #ecf4fd;
-  border: 1px solid #a9d1ff;
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+  border: 1px solid var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 
 .Banner--warning {
-  background-color: #fff9e2;
-  border: 1px solid #fff0b1;
+  background-color: var(--colorsSurfaceWarningSubdued, #fff9e2);
+  border: 1px solid var(--colorsBorderWarningSubdued, #fff0b1);
 }
 
 .Banner--critical {
-  background-color: #ffece9;
-  border: 1px solid #ffb2a0;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border: 1px solid var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Banner--success {
-  background-color: #e1fdef;
-  border: 1px solid #90efc0;
+  background-color: var(--colorsSurfaceSuccessSubdued, #e1fdef);
+  border: 1px solid var(--colorsBorderSuccessSubdued, #90efc0);
 }
 
 .Banner--compact .Banner__action > .Button:first-child {
@@ -17071,12 +17077,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Banner__title {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 600;
 }
 
 .Banner__close.a-Icon {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   cursor: pointer;
   font-size: 1.2em;
   margin-left: 24px;
@@ -18032,7 +18038,7 @@ button.Button--full {
   background-color: #f7f7f7;
   color: #141414;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 400;
   padding: 4px 8px;
 }
 
@@ -18100,7 +18106,7 @@ button.Button--full {
 .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 {
-  font-weight: 600;
+  font-weight: 700;
 }
 .DatePicker__calendar .k-calendar .k-calendar-header {
   min-width: 266px;
@@ -18817,7 +18823,7 @@ button.Button--full {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 /* Make Inputs behave like Semantic Inputs because legacy reasons */
@@ -24514,7 +24520,7 @@ button.Button--full {
   color: #141414;
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  font-weight: 600;
+  font-weight: 700;
   font-family: "Sofia Pro", SofiaPro, sans-serif;
   line-height: 1.25;
   font-size: 20px;
@@ -25259,7 +25265,7 @@ button.Button--full {
   font-family: "Nunito Sans", sans-serif;
   color: var(--colorsTextOnGrey, #444445);
   cursor: pointer;
-  font-weight: 600;
+  font-weight: 400;
 }
 .Link:hover, .Link:focus {
   text-decoration: underline;
@@ -25520,7 +25526,7 @@ button.Button--full {
 }
 .OptionList__option .Checkbox__label {
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 400;
   padding: 8px 16px 8px 0;
   width: 100%;
 }
@@ -26045,7 +26051,7 @@ button.Button--full {
   justify-content: space-between;
   list-style: none;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .ProgressTrackerDivider {
@@ -26147,7 +26153,7 @@ button.Button--full {
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 27px;
 }
 .FormField .a-Radio {
@@ -26213,11 +26219,17 @@ button.Button--full {
   position: absolute;
   position: initial;
 }
+@supports (-moz-appearance: none) {
+  .Radio__input {
+    margin-left: -2px !important;
+    margin-right: -2px !important;
+  }
+}
 
 .Radio__box {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
-  box-shadow: 0 0 0 1px #bcbcbd inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd) inset;
   display: inline-flex;
   flex-shrink: 0;
   margin-left: 1px;
@@ -26246,7 +26258,7 @@ button.Button--full {
   top: 7px;
 }
 .Radio__box::before {
-  box-shadow: 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
   border-radius: 100%;
   bottom: 0;
   content: "";
@@ -26272,10 +26284,10 @@ button.Button--full {
   width: 100%;
 }
 .Radio--error .Radio__box {
-  box-shadow: 0 0 0 1px #ffb2a0 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderCriticalSubdued, #ffb2a0) inset;
 }
 .Radio__input:checked + .Radio__box, .Radio--checked .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio .Radio__input:checked + .Radio__box::after, .a-Radio .Radio--checked .Radio__box::after {
   background-color: transparent;
@@ -26293,37 +26305,37 @@ button.Button--full {
   height: 8px;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box, .Radio--checked.Radio--error .Radio__box {
-  box-shadow: 0 0 0 2px #e63717 inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio .Radio--error .Radio__input:checked + .Radio__box .Radio__box::after, .a-Radio .Radio--checked.Radio--error .Radio__box::after {
   background-color: transparent;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box::before, .Radio--checked.Radio--error .Radio__box::before {
-  box-shadow: 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 1px #444445 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box::before, .Radio--checked:not(.Radio--disabled):hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__box {
   box-shadow: 0 0 0 1px #f94d32 inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #f94d32 inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box::before, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px #a9d1ff;
 }
 .Radio--error.Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #f94d32 inset, 0 0 0 3px #ffb2a0;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Radio--disabled .Radio__box {
@@ -26331,7 +26343,7 @@ button.Button--full {
   filter: grayscale(1);
 }
 .Radio--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Radio .Radio__label {
@@ -26773,7 +26785,7 @@ button.Button--full {
 .SideNavItem__button {
   border-radius: 3px;
   color: #141414;
-  font-weight: 600;
+  font-weight: 400;
   cursor: pointer;
   display: block;
   padding: 6px 16px;
@@ -27468,7 +27480,6 @@ button.Button--full {
 .Tab--active {
   box-shadow: 0 -2px 0 #2270ee inset;
   color: #141414;
-  font-weight: 600;
 }
 .Tab--active:hover {
   box-shadow: 0 -2px 0 #2270ee inset;
@@ -27508,7 +27519,7 @@ button.Button--full {
   padding-left: 0;
   font-size: 14px;
   display: flex;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 .CardSection > .TabGroup {
   margin: -25px -24px;
@@ -27681,7 +27692,7 @@ button.Button--full {
   color: #ffffff;
 }
 .Table .k-grid-header .k-header .k-link {
-  font-weight: 600;
+  font-weight: 400;
 }
 .Table .k-grid-header .k-header .k-link:not(:-webkit-any-link) {
   cursor: default;
@@ -28171,6 +28182,11 @@ button.Button--full {
 .TextArea::placeholder {
   color: rgba(20, 20, 20, 0.4);
 }
+@supports (-moz-appearance: none) {
+  .TextArea {
+    overflow-x: hidden;
+  }
+}
 .TextArea:focus {
   color: #141414;
   border-color: #2270ee;
@@ -28227,7 +28243,7 @@ button.Button--full {
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderDefault, #dfe0e1);
   display: inline-block;
   position: relative;
   overflow: hidden;
@@ -28293,8 +28309,8 @@ button.Button--full {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: rgba(20, 20, 20, 0.4);
-  color: #ffffff;
+  background-color: var(--colorsActiveStrong, rgba(20, 20, 20, 0.2));
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TimePicker {
@@ -28349,7 +28365,7 @@ button.Button--full {
 }
 
 .Toast__title {
-  font-weight: 600;
+  font-weight: 700;
   word-break: break-word;
 }
 .Toast--info .Toast__title {
@@ -28466,10 +28482,10 @@ button.Button--full {
   margin-right: -16px;
 }
 .Togglebox:hover .CardSection {
-  border-color: #56a4ff;
+  border-color: var(--colorsBorderPrimary, #56a4ff);
 }
 .Togglebox:focus-within .CardSection {
-  border-color: #56a4ff;
+  border-color: var(--colorsBorderPrimary, #56a4ff);
   box-shadow: 0 0 0 3px #a9d1ff;
 }
 
@@ -28500,22 +28516,22 @@ button.Button--full {
 }
 
 .Togglebox__title {
-  color: #2d2e31;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
 }
 .Togglebox__title + .Togglebox__label {
   margin-top: 4px;
 }
 
 .Togglebox__children {
-  color: #2d2e31;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   line-height: 1;
   width: 100%;
 }
 .Togglebox__content--title .Togglebox__children {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Togglebox--radio .Togglebox__children {
   padding-left: 9px;
@@ -28558,7 +28574,7 @@ button.Button--full {
 }
 
 .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
   border-radius: 13px;
   box-sizing: border-box;
   display: inline-flex;
@@ -28569,7 +28585,7 @@ button.Button--full {
   width: 42px;
 }
 .ToggleSwitch__element::before {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   content: "";
@@ -28585,22 +28601,22 @@ button.Button--full {
   margin: 0;
 }
 .ToggleSwitch:hover .ToggleSwitch__element {
-  background: #bcbcbd;
+  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
 }
 .ToggleSwitch--disabled .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #18a761;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ToggleSwitch__input:checked + .ToggleSwitch__element::before, .ToggleSwitch--checked .ToggleSwitch__element::before {
   left: 22px;
 }
 .ToggleSwitch:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #10864b;
+  background: var(--colorsStatusSuccessStrong, #10864b);
 }
 .ToggleSwitch--disabled .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch__input:checked + .ToggleSwitch__element, .ToggleSwitch--disabled .ToggleSwitch--checked .ToggleSwitch__element, .ToggleSwitch--disabled:hover .ToggleSwitch--checked .ToggleSwitch__element {
-  background: #606162;
+  background: var(--colorsSurfaceDisabled, #606162);
 }
 .ToggleSwitch--focus-visible:focus-within .ToggleSwitch__element {
   box-shadow: 0 0 0 3px #a9d1ff;
@@ -28611,6 +28627,7 @@ button.Button--full {
   font-weight: normal;
   margin-left: 12px;
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
+  color: var(--colorsTextDefault, #141414);
   /* ToggleSwitch's height is exactly 1px taller than the standard label */
   margin-top: 1px;
 }
@@ -31395,7 +31412,7 @@ _:-ms-lang(x), .Tooltip__body {
 .h5,
 .h6,
 .h7 {
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .fw-normal {
@@ -31407,11 +31424,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .fw-bold {
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .fw-bold-i {
-  font-weight: 600 !important;
+  font-weight: 700 !important;
 }
 
 .h-0 {