@servicetitan/design-system 11.1.0 → 11.3.1

package/dist/components/index.css

@@ -658,7 +658,7 @@ span.Popover {
   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;
@@ -774,7 +774,7 @@ span.Popover {
   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;
@@ -807,36 +807,36 @@ span.Popover {
   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 {
@@ -875,12 +875,12 @@ span.Popover {
 }
 
 .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;
@@ -1671,7 +1671,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: 25px;
 }
 .FormField .a-Checkbox {
@@ -1737,11 +1737,17 @@ button.Button--full {
   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;
@@ -1772,10 +1778,10 @@ button.Button--full {
   margin-bottom: -6px;
 }
 .Checkbox--error .Checkbox__box {
-  border-color: #ffb2a0;
+  border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 #2270ee inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -1786,7 +1792,7 @@ button.Button--full {
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 white inset, -2px 0 0 0 white inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -1801,7 +1807,7 @@ button.Button--full {
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 white inset, -2.5px 0 0 0 white inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -1813,39 +1819,39 @@ button.Button--full {
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #ffb2a0;
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #a9d1ff;
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #444445;
+  border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 4px #a9d1ff;
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: #e63717;
-  box-shadow: 0 0 0 4px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Checkbox--disabled .Checkbox__box {
@@ -1853,7 +1859,7 @@ button.Button--full {
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {
@@ -2027,7 +2033,7 @@ button.Button--full {
   background-color: #f7f7f7;
   color: #141414;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 400;
   padding: 4px 8px;
 }
 
@@ -2097,7 +2103,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;
@@ -2812,7 +2818,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 */
@@ -8503,7 +8509,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;
@@ -9226,7 +9232,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;
@@ -9487,7 +9493,7 @@ button.Button--full {
 }
 .OptionList__option .Checkbox__label {
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 400;
   padding: 8px 16px 8px 0;
   width: 100%;
 }
@@ -9996,7 +10002,7 @@ button.Button--full {
   justify-content: space-between;
   list-style: none;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .ProgressTrackerDivider {
@@ -10098,7 +10104,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 {
@@ -10164,11 +10170,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;
@@ -10197,7 +10209,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: "";
@@ -10223,10 +10235,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;
@@ -10244,37 +10256,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 {
@@ -10282,7 +10294,7 @@ button.Button--full {
   filter: grayscale(1);
 }
 .Radio--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Radio .Radio__label {
@@ -10724,7 +10736,7 @@ button.Button--full {
 .SideNavItem__button {
   border-radius: 3px;
   color: #141414;
-  font-weight: 600;
+  font-weight: 400;
   cursor: pointer;
   display: block;
   padding: 6px 16px;
@@ -11361,7 +11373,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;
@@ -11401,7 +11412,7 @@ button.Button--full {
   padding-left: 0;
   font-size: 14px;
   display: flex;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 .CardSection > .TabGroup {
   margin: -25px -24px;
@@ -11574,7 +11585,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(:any-link) {
   cursor: default;
@@ -12052,6 +12063,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;
@@ -12102,7 +12118,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;
@@ -12164,8 +12180,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 {
@@ -12220,7 +12236,7 @@ button.Button--full {
 }
 
 .Toast__title {
-  font-weight: 600;
+  font-weight: 700;
   word-break: break-word;
 }
 .Toast--info .Toast__title {
@@ -12337,10 +12353,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;
 }
 
@@ -12371,22 +12387,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;
@@ -12429,7 +12445,7 @@ button.Button--full {
 }
 
 .ToggleSwitch__element {
-  background: #dfe0e1;
+  background: var(--colorsSurfaceGreyStrong, #dfe0e1);
   border-radius: 13px;
   box-sizing: border-box;
   display: inline-flex;
@@ -12440,7 +12456,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: "";
@@ -12456,22 +12472,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;
@@ -12482,6 +12498,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;
 }