@servicetitan/design-system 11.2.0 → 11.4.0

package/dist/themes/kendo/index.css

@@ -65,11 +65,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 25px;
 }
 .FormField .a-Checkbox {
@@ -143,9 +143,9 @@
 }
 
 .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;
@@ -176,10 +176,10 @@
   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);
@@ -190,7 +190,7 @@
   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;
@@ -205,7 +205,7 @@
   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;
@@ -217,39 +217,39 @@
   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 {
@@ -257,7 +257,7 @@
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {
@@ -288,12 +288,12 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -389,7 +389,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -397,14 +397,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width
@@ -6930,7 +6930,7 @@ kendo-badge-container {
 
 .k-calendar {
   border-color: rgba(0, 0, 0, 0.08);
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
 }
 .k-calendar .k-header {
@@ -7000,7 +7000,7 @@ kendo-badge-container {
 }
 .k-calendar .k-calendar-navigation-highlight {
   border-color: rgba(0, 0, 0, 0.08);
-  color: #141414;
+  color: #040404;
   background-color: #ffffff;
 }
 .k-calendar[dir=rtl] .k-calendar-navigation, .k-rtl .k-calendar .k-calendar-navigation {
@@ -7667,7 +7667,7 @@ kendo-badge-container {
 }
 
 .k-popup {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -11462,7 +11462,7 @@ input.k-textbox {
 
 .k-menu-group,
 .k-menu.k-context-menu {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -12424,7 +12424,7 @@ kendo-label > .k-label {
 }
 .k-pager-md .k-pager-numbers.k-state-expanded,
 .k-pager-sm .k-pager-numbers.k-state-expanded {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
@@ -13752,7 +13752,7 @@ div.k-grid-norecords {
 
 .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
   border-top: 1px solid;
-  border-top-color: #dfe0e1;
+  border-top-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .k-columnmenu-item-content {
@@ -14125,7 +14125,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-column-menu .k-menu:not(.k-context-menu) {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
   background-color: #ffffff;
 }
@@ -14146,12 +14146,12 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-column-menu-group-header-text {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   color: #141414;
 }
 
 .k-check-all-wrap {
-  border-color: #dfe0e1;
+  border-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .k-grid-norecords-template {