@servicetitan/design-system 11.3.1 → 11.4.2

package/dist/components/Takeover/TakeoverFooter.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Takeover/TakeoverFooter.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB;;;AGpCrB;EACC,YDca;ECbb;EACA;EACA;EACA,aDmHW;EClHX,gBDkHW;;;AC/GZ;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAiC","file":"TakeoverFooter.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Takeover/TakeoverFooter.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAfa;EAgBb;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB;;;AEpCrB;EACC,YFDa;EEEb;EACA;EACA;EACA,aCoHW;EDnHX,gBCmHW;;;ADhHZ;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAiC","file":"TakeoverFooter.css"}

package/dist/components/Takeover/TakeoverHeader.css

@@ -3,10 +3,10 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: flex;
   flex: 0 0 auto;
   font-size: 20px;
@@ -20,9 +20,9 @@
 .TakeoverHeader--light {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 #dfe0e1;
-  color: #444445;
+  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
 }
 
 .TakeoverHeader__title {

package/dist/components/Takeover/TakeoverHeader.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/TakeoverHeader.scss","../../../src/utilities/_font-smoothing.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACaA;ECXE;EACA;EDaD;EACA,YEEa;EFDb;EACA;EACA,OEFa;EFGb;EACA;EACA,WEgHa;EF/Gb;EACA;EACA,SEiGW;EFhGX;EACA;;;AAGD;ECxBE;EACA;ED0BD,YEIkB;EFHlB;EACA,OEUmB;;;AFPpB;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EAAwB;;;AACxB;EAAyB;;;AAEzB;EAA6B;;;AAE7B;EACC,aE+DW;;;AF5DZ;EA1DC;EACA,SEyGiB;EFxGjB;EA2DA;EACA,SEgEc;EF/Dd;;AA3DA;EACC;;AA4DD;EAAU","file":"TakeoverHeader.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/TakeoverHeader.scss","../../../src/utilities/_font-smoothing.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACmBA;ECjBE;EACA;EDmBD;EACA,YAV2B;EAW3B;EACA;EACA,OAXc;EAYd;EACA;EACA,WE2Ga;EF1Gb;EACA;EACA,SE4FW;EF3FX;EACA;;;AAGD;EC9BE;EACA;EDgCD,YA1ByB;EA2BzB;EACA,OA1BY;;;AA6Bb;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EAAwB;;;AACxB;EAAyB;;;AAEzB;EAA6B;;;AAE7B;EACC,aE0DW;;;AFvDZ;EAhEC;EACA,SE0GiB;EFzGjB;EAiEA;EACA,SE2Dc;EF1Dd;;AAjEA;EACC;;AAkED;EAAU","file":"TakeoverHeader.css"}

package/dist/components/Takeover/TakeoverSection.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -12,7 +12,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -37,11 +37,11 @@
 }
 
 .TakeoverSection {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px;
 }
 .TakeoverSection + .TakeoverSection {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /*# sourceMappingURL=TakeoverSection.css.map */

package/dist/components/Takeover/TakeoverSection.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Takeover/TakeoverSection.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB;;;AGpCrB;EACC,YDca;ECbb,SDuHW;;ACrHX;EACC","file":"TakeoverSection.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Takeover/TakeoverSection.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAfa;EAgBb;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB;;;AEpCrB;EACC,YFDa;EEEb,SCwHW;;ADtHX;EACC","file":"TakeoverSection.css"}

package/dist/components/Takeover/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -12,7 +12,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -40,10 +40,10 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
-  background: #141414;
+  background: var(--colorsSurfaceInvertedStrong, #141414);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: flex;
   flex: 0 0 auto;
   font-size: 20px;
@@ -57,9 +57,9 @@
 .TakeoverHeader--light {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 #dfe0e1;
-  color: #444445;
+  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
+  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
 }
 
 .TakeoverHeader__title {
@@ -108,16 +108,16 @@
 }
 
 .TakeoverSection {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   padding: 24px;
 }
 .TakeoverSection + .TakeoverSection {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .TakeoverFooter {
-  background: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   flex: 0 0 auto;
   padding-top: 16px;

package/dist/components/Takeover/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Takeover/TakeoverHeader.scss","../../../src/utilities/_font-smoothing.scss","../../../src/components/Takeover/TakeoverSection.scss","../../../src/components/Takeover/TakeoverFooter.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB;;;AG1BrB;ECXE;EACA;EDaD;EACA,YDEa;ECDb;EACA;EACA,ODFa;ECGb;EACA;EACA,WDgHa;EC/Gb;EACA;EACA,SDiGW;EChGX;EACA;;;AAGD;ECxBE;EACA;ED0BD,YDIkB;ECHlB;EACA,ODUmB;;;ACPpB;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EAAwB;;;AACxB;EAAyB;;;AAEzB;EAA6B;;;AAE7B;EACC,aD+DW;;;AC5DZ;EA1DC;EACA,SDyGiB;ECxGjB;EA2DA;EACA,SDgEc;EC/Dd;;AA3DA;EACC;;AA4DD;EAAU;;;AElEX;EACC,YHca;EGbb,SHuHW;;AGrHX;EACC;;;ACLF;EACC,YJca;EIbb;EACA;EACA;EACA,aJmHW;EIlHX,gBJkHW;;;AI/GZ;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAiC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Takeover/TakeoverHeader.scss","../../../src/utilities/_font-smoothing.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Takeover/TakeoverSection.scss","../../../src/components/Takeover/TakeoverFooter.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAfa;EAgBb;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB;;;AEpBrB;ECjBE;EACA;EDmBD;EACA,YAV2B;EAW3B;EACA;EACA,OAXc;EAYd;EACA;EACA,WE2Ga;EF1Gb;EACA;EACA,SE4FW;EF3FX;EACA;;;AAGD;EC9BE;EACA;EDgCD,YA1ByB;EA2BzB;EACA,OA1BY;;;AA6Bb;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EAAwB;;;AACxB;EAAyB;;;AAEzB;EAA6B;;;AAE7B;EACC,aE0DW;;;AFvDZ;EAhEC;EACA,SE0GiB;EFzGjB;EAiEA;EACA,SE2Dc;EF1Dd;;AAjEA;EACC;;AAkED;EAAU;;;AGxEX;EACC,YLDa;EKEb,SDwHW;;ACtHX;EACC;;;ACLF;EACC,YNDa;EMEb;EACA;EACA;EACA,aFoHW;EEnHX,gBFmHW;;;AEhHZ;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAiC","file":"index.css"}

package/dist/components/Text/Text.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;

package/dist/components/Text/Text.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Text/Text.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,aEmGqB;EFlGrB,aEqIkB;EFpIlB;;AAEA;EAAQ","file":"Text.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Text/Text.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA;AAEA;EACA;EDCA,aEoGqB;EFnGrB,aEsIkB;EFrIlB;;AAEA;EAAQ","file":"Text.css"}

package/dist/components/Text/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;

package/dist/components/Text/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Text/Text.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,aEmGqB;EFlGrB,aEqIkB;EFpIlB;;AAEA;EAAQ","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Text/Text.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA;AAEA;EACA;EDCA,aEoGqB;EFnGrB,aEsIkB;EFrIlB;;AAEA;EAAQ","file":"index.css"}

package/dist/components/TextArea/TextArea.css

@@ -65,7 +65,7 @@
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -75,7 +75,7 @@
   border-radius: 3px;
   box-shadow: none;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   font-size: 16px;
   outline: none;
   line-height: 1.2857;
@@ -90,7 +90,7 @@
   /* States */
 }
 .TextArea::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 @supports (-moz-appearance: none) {
   .TextArea {
@@ -98,10 +98,10 @@
   }
 }
 .TextArea:focus {
-  color: #141414;
+  color: #040404;
   border-color: #2270ee;
   background-color: #ffffff;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   -webkit-appearance: none;
 }
 .TextArea.TextArea--disabled, .TextArea:not(.TextArea--disabled)[disabled] {
@@ -113,7 +113,7 @@
   background-color: #f7f7f7;
 }
 .TextArea[readonly]::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .TextArea.TextArea--error {

package/dist/components/TextArea/TextArea.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TextArea/TextArea.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCec;EDdd,cCkBc;EDjBd,OCiBc;EDhBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCOc;EDNd,cCUc;EDTd,OCSc;EDRd;EACA;;;AE9EF;AACC;ACJA;EACA,OFiBa;AEfb;EACA;ECHC;EACA;EFQD,kBDOa;ECNb,QF6Bc;EE5Bd,eDTuB;ECUvB;EACA;EACA,ODGa;ECFb,WDqHa;ECpHb;EACA,aAbuB;EAcvB;EACA;EACA;EACA,YF+BA;EE9BA;EACA;EACA;EACA;AAQA;;AANA;EAAiB,OFGQ;;AEDzB;EACC;IAAI;;;AAIL;EACC,ODlBY;ECmBZ,cDlBW;ECmBX,kBDrBY;ECsBZ,YD+Ea;EC9Eb;;AAGD;EAEC,kBDRiB;ECSjB,SDgEiB;EC/DjB;;AAGD;EAEC,kBDfiB;;ACkBlB;EAA2B,OFxBF;;;AE2B1B;EACC,kBDyBe;ECxBf,cD4Be;EC3Bf,OD2Be;ACpBf;AAKA;;AAVA;EACC;EACA,ODuBc;;ACnBf;EAA+B,OFRA;;AES/B;EAAsB,OFTS;;AEU/B;EAA0B,OFVK;;AEa/B;EACC;EACA","file":"TextArea.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TextArea/TextArea.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCgBc;EDfd,cCmBc;EDlBd,OCkBc;EDjBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCQc;EDPd,cCWc;EDVd,OCUc;EDTd;EACA;;;AE9EF;AACC;ACJA;EACA;AAEA;EACA;ECHC;EACA;EFQD,kBDOa;ECNb,QF6Bc;EE5Bd,eDTuB;ECUvB;EACA;EACA,ODGa;ECFb,WDsHa;ECrHb;EACA,aAbuB;EAcvB;EACA;EACA;EACA,YF+BA;EE9BA;EACA;EACA;EACA;AAQA;;AANA;EAAiB,OFGQ;;AEDzB;EACC;IAAI;;;AAIL;EACC,ODlBY;ECmBZ,cDlBW;ECmBX,kBDrBY;ECsBZ,YDgFa;EC/Eb;;AAGD;EAEC,kBDRiB;ECSjB,SDiEiB;EChEjB;;AAGD;EAEC,kBDfiB;;ACkBlB;EAA2B,OFxBF;;;AE2B1B;EACC,kBD0Be;ECzBf,cD6Be;EC5Bf,OD4Be;ACrBf;AAKA;;AAVA;EACC;EACA,ODwBc;;ACpBf;EAA+B,OFRA;;AES/B;EAAsB,OFTS;;AEU/B;EAA0B,OFVK;;AEa/B;EACC;EACA","file":"TextArea.css"}

package/dist/components/TextArea/index.css

@@ -65,7 +65,7 @@
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -75,7 +75,7 @@
   border-radius: 3px;
   box-shadow: none;
   box-sizing: border-box;
-  color: #141414;
+  color: #040404;
   font-size: 16px;
   outline: none;
   line-height: 1.2857;
@@ -90,7 +90,7 @@
   /* States */
 }
 .TextArea::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 @supports (-moz-appearance: none) {
   .TextArea {
@@ -98,10 +98,10 @@
   }
 }
 .TextArea:focus {
-  color: #141414;
+  color: #040404;
   border-color: #2270ee;
   background-color: #ffffff;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   -webkit-appearance: none;
 }
 .TextArea.TextArea--disabled, .TextArea:not(.TextArea--disabled)[disabled] {
@@ -113,7 +113,7 @@
   background-color: #f7f7f7;
 }
 .TextArea[readonly]::placeholder {
-  color: rgba(20, 20, 20, 0.4);
+  color: rgba(4, 4, 4, 0.4);
 }
 
 .TextArea.TextArea--error {

package/dist/components/TextArea/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TextArea/TextArea.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCec;EDdd,cCkBc;EDjBd,OCiBc;EDhBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCOc;EDNd,cCUc;EDTd,OCSc;EDRd;EACA;;;AE9EF;AACC;ACJA;EACA,OFiBa;AEfb;EACA;ECHC;EACA;EFQD,kBDOa;ECNb,QF6Bc;EE5Bd,eDTuB;ECUvB;EACA;EACA,ODGa;ECFb,WDqHa;ECpHb;EACA,aAbuB;EAcvB;EACA;EACA;EACA,YF+BA;EE9BA;EACA;EACA;EACA;AAQA;;AANA;EAAiB,OFGQ;;AEDzB;EACC;IAAI;;;AAIL;EACC,ODlBY;ECmBZ,cDlBW;ECmBX,kBDrBY;ECsBZ,YD+Ea;EC9Eb;;AAGD;EAEC,kBDRiB;ECSjB,SDgEiB;EC/DjB;;AAGD;EAEC,kBDfiB;;ACkBlB;EAA2B,OFxBF;;;AE2B1B;EACC,kBDyBe;ECxBf,cD4Be;EC3Bf,OD2Be;ACpBf;AAKA;;AAVA;EACC;EACA,ODuBc;;ACnBf;EAA+B,OFRA;;AES/B;EAAsB,OFTS;;AEU/B;EAA0B,OFVK;;AEa/B;EACC;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TextArea/TextArea.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCgBc;EDfd,cCmBc;EDlBd,OCkBc;EDjBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCQc;EDPd,cCWc;EDVd,OCUc;EDTd;EACA;;;AE9EF;AACC;ACJA;EACA;AAEA;EACA;ECHC;EACA;EFQD,kBDOa;ECNb,QF6Bc;EE5Bd,eDTuB;ECUvB;EACA;EACA,ODGa;ECFb,WDsHa;ECrHb;EACA,aAbuB;EAcvB;EACA;EACA;EACA,YF+BA;EE9BA;EACA;EACA;EACA;AAQA;;AANA;EAAiB,OFGQ;;AEDzB;EACC;IAAI;;;AAIL;EACC,ODlBY;ECmBZ,cDlBW;ECmBX,kBDrBY;ECsBZ,YDgFa;EC/Eb;;AAGD;EAEC,kBDRiB;ECSjB,SDiEiB;EChEjB;;AAGD;EAEC,kBDfiB;;ACkBlB;EAA2B,OFxBF;;;AE2B1B;EACC,kBD0Be;ECzBf,cD6Be;EC5Bf,OD4Be;ACrBf;AAKA;;AAVA;EACC;EACA,ODwBc;;ACpBf;EAA+B,OFRA;;AES/B;EAAsB,OFTS;;AEU/B;EAA0B,OFVK;;AEa/B;EACC;EACA","file":"index.css"}

package/dist/components/Thumbnail/Thumbnail.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Thumbnail {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;

package/dist/components/Thumbnail/Thumbnail.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Thumbnail/Thumbnail.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA,OCiBa;ADfb;EACA;EDMA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC,OEsGU;EFrGV,QEqGU;EFpGV,eEjBgB;;AFoBjB;EACC,OEiGU;EFhGV,QEgGU;EF/FV,eEvBgB;;AF0BjB;EACC,OE4FU;EF3FV,QE2FU;EF1FV,eE5BgB;;AF+BjB;EACC,OEuFU;EFtFV,QEsFU;EFrFV,eElCgB;;AFqCjB;EACC,OEkFU;EFjFV,QEiFU;EFhFV,eExCgB;;AF2CjB;EAAoB,SE8EN;;AF5Ed;EAAwB;;AACxB;EAAwB;;AACxB;EAA2B;;AAC3B;EAAyB;;AAEzB;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBArEc;EAsEd,OApEa","file":"Thumbnail.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Thumbnail/Thumbnail.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA;AAEA;EACA;EDMA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC,OEuGU;EFtGV,QEsGU;EFrGV,eEjBgB;;AFoBjB;EACC,OEkGU;EFjGV,QEiGU;EFhGV,eEvBgB;;AF0BjB;EACC,OE6FU;EF5FV,QE4FU;EF3FV,eE5BgB;;AF+BjB;EACC,OEwFU;EFvFV,QEuFU;EFtFV,eElCgB;;AFqCjB;EACC,OEmFU;EFlFV,QEkFU;EFjFV,eExCgB;;AF2CjB;EAAoB,SE+EN;;AF7Ed;EAAwB;;AACxB;EAAwB;;AACxB;EAA2B;;AAC3B;EAAyB;;AAEzB;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBArEc;EAsEd,OApEa","file":"Thumbnail.css"}

package/dist/components/Thumbnail/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Thumbnail {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;

package/dist/components/Thumbnail/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Thumbnail/Thumbnail.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA,OCiBa;ADfb;EACA;EDMA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC,OEsGU;EFrGV,QEqGU;EFpGV,eEjBgB;;AFoBjB;EACC,OEiGU;EFhGV,QEgGU;EF/FV,eEvBgB;;AF0BjB;EACC,OE4FU;EF3FV,QE2FU;EF1FV,eE5BgB;;AF+BjB;EACC,OEuFU;EFtFV,QEsFU;EFrFV,eElCgB;;AFqCjB;EACC,OEkFU;EFjFV,QEiFU;EFhFV,eExCgB;;AF2CjB;EAAoB,SE8EN;;AF5Ed;EAAwB;;AACxB;EAAwB;;AACxB;EAA2B;;AAC3B;EAAyB;;AAEzB;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBArEc;EAsEd,OApEa","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Thumbnail/Thumbnail.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA;AAEA;EACA;EDMA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC,OEuGU;EFtGV,QEsGU;EFrGV,eEjBgB;;AFoBjB;EACC,OEkGU;EFjGV,QEiGU;EFhGV,eEvBgB;;AF0BjB;EACC,OE6FU;EF5FV,QE4FU;EF3FV,eE5BgB;;AF+BjB;EACC,OEwFU;EFvFV,QEuFU;EFtFV,eElCgB;;AFqCjB;EACC,OEmFU;EFlFV,QEkFU;EFjFV,eExCgB;;AF2CjB;EAAoB,SE+EN;;AF7Ed;EAAwB;;AACxB;EAAwB;;AACxB;EAA2B;;AAC3B;EAAyB;;AAEzB;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBArEc;EAsEd,OApEa","file":"index.css"}

package/dist/components/TimePicker/TimePicker.css

@@ -6,12 +6,12 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .OptionList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -50,11 +50,13 @@
 }
 
 .OptionList--single-select .OptionList__option--selected {
-  color: #2270ee;
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
+}
+.OptionList--single-select .OptionList__option--selected .Checkbox__label {
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
 }
 
 /* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
@@ -131,14 +133,14 @@
   align-items: center;
   padding-left: 24px;
   z-index: 2;
-  background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%, rgba(238, 238, 238, 0) 100%);
+  background: linear-gradient(to left, var(--colorsSurfaceGrey, #eeeeee) 70%, var(--colorsSurfaceGrey, #eeeeee) 71%, transparent 100%);
   /* Match the background color of the single selected option */
 }
 .OptionList__option:hover .OptionList__option--secondary-action {
   opacity: 1;
 }
 .OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
-  background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%, rgba(236, 244, 253, 0) 100%);
+  background: linear-gradient(to left, var(--colorsHoverPrimary, #ecf4fd) 70%, var(--colorsHoverPrimary, #ecf4fd) 71%, transparent 100%);
 }
 
 /*
@@ -167,7 +169,7 @@
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;

package/dist/components/TimePicker/TimePicker.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ACdC;EACA,OCiBa;ADfb;EACA;;;ADcD;AAEC;EACC;;;AAIF;AACA;EACC,eEpBiB;EFqBjB;EACA;AAgBA;;AATA;EACC,WE+FY;EF9FZ,aEkEoB;EFjEpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEsEW;EFrEX,cEsEW;;;AFlEX;EACC,OEtCW;EFuCX,kBE9Be;;AFkCd;EAAY,kBElCE;;;AFuCjB;AACA;EAAsC,cEsD1B;;;AFlDV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cE8Cc;;;AF3Cf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cE0Bc;EFzBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEYW;EFXX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;AG/JzB;AFHC;EACA,OCiBa;ADfb;EACA;EEEA;;AAEA;EACC;EACA;;;AAIF;EAAqB;;;AACrB;EAAoB;;;AACpB;EAA4C;;;AAE5C;EACC;EACA;;AAEA;EAAoB","file":"TimePicker.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBAXwB;;;AAe1B;AClBC;EACA;AAEA;EACA;;;ADkBD;AAEC;EACC;;;AAIF;AACA;EACC,eExBiB;EFyBjB;EACA;AAgBA;;AATA;EACC,WE4FY;EF3FZ,aE+DoB;EF9DpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEmEW;EFlEX,cEmEW;;;AF/DX;EAKC,kBA/DyB;;AA2DzB;EACC,OA1DkB;;AAiElB;EAAY,kBAnEY;;;AAwE3B;AACA;EAAsC,cEgD1B;;;AF5CV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cEwCc;;;AFrCf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cEoBc;EFnBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEMW;EFLX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;AGtKzB;AFHC;EACA;AAEA;EACA;EEEA;;AAEA;EACC;EACA;;;AAIF;EAAqB;;;AACrB;EAAoB;;;AACpB;EAA4C;;;AAE5C;EACC;EACA;;AAEA;EAAoB","file":"TimePicker.css"}

package/dist/components/TimePicker/index.css

@@ -6,12 +6,12 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .OptionList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -50,11 +50,13 @@
 }
 
 .OptionList--single-select .OptionList__option--selected {
-  color: #2270ee;
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
+}
+.OptionList--single-select .OptionList__option--selected .Checkbox__label {
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
-  background-color: #ecf4fd;
+  background-color: var(--colorsHoverPrimary, #ecf4fd);
 }
 
 /* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
@@ -131,14 +133,14 @@
   align-items: center;
   padding-left: 24px;
   z-index: 2;
-  background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%, rgba(238, 238, 238, 0) 100%);
+  background: linear-gradient(to left, var(--colorsSurfaceGrey, #eeeeee) 70%, var(--colorsSurfaceGrey, #eeeeee) 71%, transparent 100%);
   /* Match the background color of the single selected option */
 }
 .OptionList__option:hover .OptionList__option--secondary-action {
   opacity: 1;
 }
 .OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
-  background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%, rgba(236, 244, 253, 0) 100%);
+  background: linear-gradient(to left, var(--colorsHoverPrimary, #ecf4fd) 70%, var(--colorsHoverPrimary, #ecf4fd) 71%, transparent 100%);
 }
 
 /*
@@ -167,7 +169,7 @@
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;

package/dist/components/TimePicker/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ACdC;EACA,OCiBa;ADfb;EACA;;;ADcD;AAEC;EACC;;;AAIF;AACA;EACC,eEpBiB;EFqBjB;EACA;AAgBA;;AATA;EACC,WE+FY;EF9FZ,aEkEoB;EFjEpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEsEW;EFrEX,cEsEW;;;AFlEX;EACC,OEtCW;EFuCX,kBE9Be;;AFkCd;EAAY,kBElCE;;;AFuCjB;AACA;EAAsC,cEsD1B;;;AFlDV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cE8Cc;;;AF3Cf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cE0Bc;EFzBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEYW;EFXX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;AG/JzB;AFHC;EACA,OCiBa;ADfb;EACA;EEEA;;AAEA;EACC;EACA;;;AAIF;EAAqB;;;AACrB;EAAoB;;;AACpB;EAA4C;;;AAE5C;EACC;EACA;;AAEA;EAAoB","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBAXwB;;;AAe1B;AClBC;EACA;AAEA;EACA;;;ADkBD;AAEC;EACC;;;AAIF;AACA;EACC,eExBiB;EFyBjB;EACA;AAgBA;;AATA;EACC,WE4FY;EF3FZ,aE+DoB;EF9DpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEmEW;EFlEX,cEmEW;;;AF/DX;EAKC,kBA/DyB;;AA2DzB;EACC,OA1DkB;;AAiElB;EAAY,kBAnEY;;;AAwE3B;AACA;EAAsC,cEgD1B;;;AF5CV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cEwCc;;;AFrCf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cEoBc;EFnBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEMW;EFLX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;AGtKzB;AFHC;EACA;AAEA;EACA;EEEA;;AAEA;EACC;EACA;;;AAIF;EAAqB;;;AACrB;EAAoB;;;AACpB;EAA4C;;;AAE5C;EACC;EACA;;AAEA;EAAoB","file":"index.css"}

package/dist/components/Toast/Toast.css

@@ -1,12 +1,12 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   display: flex;
@@ -23,16 +23,16 @@
   word-break: break-word;
 }
 .Toast--info .Toast__title {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__title {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__title {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__title {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__icon {
@@ -41,20 +41,20 @@
   transform: translateY(2px);
 }
 .Toast--info .Toast__icon {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__icon {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__icon {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__icon {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__description {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   margin-top: 8px;
 }

package/dist/components/Toast/Toast.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Toast/Toast.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA,OCiBa;ADfb;EACA;EDGA,YEUa;EFTb,eEDiB;EFEjB;EACA;EACA;EACA;EACA;EACA,WEuHa;EFtHb;EACA,SE2GW;EF1GX,OAfa;EAgBb;;;AAGD;EACC,aEoFkB;EFnFlB;;AAEA;EAAiB,OEMD;;AFLhB;EAAqB,OE8DN;;AF7Df;EAAoB,OE4CH;;AF3CjB;EAAoB,OEqCF;;;AFlCnB;EACC,WEsGa;EFrGb,cEyFW;EFtFX;;AAEA;EAAiB,OEPD;;AFQhB;EAAqB,OEiDN;;AFhDf;EAAoB,OE+BH;;AF9BjB;EAAoB,OEwBF;;;AFrBnB;EACC,OE3Ba;EF4Bb,WEsFa;EFrFb,YE0EW;;;AFvEZ;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,YE+DW;;;AF5DZ;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA,OE+CW;EF9CX,KE8CW;EF7CX","file":"Toast.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Toast/Toast.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACcA;ACbC;EACA;AAEA;EACA;EDYA,YAXoB;EAYpB,eEViB;EFWjB;EACA;EACA;EACA;EACA;EACA,WE+Ga;EF9Gb;EACA,SEmGW;EFlGX,OAxBa;EAyBb;;;AAGD;EACC,aE4EkB;EF3ElB;;AAEA;EAAiB,OA1BJ;;AA2Bb;EAAqB,OA1BJ;;AA2BjB;EAAoB,OA1BJ;;AA2BhB;EAAoB,OA1BJ;;;AA6BjB;EACC,WE8Fa;EF7Fb,cEiFW;EF9EX;;AAEA;EAAiB,OAvCJ;;AAwCb;EAAqB,OAvCJ;;AAwCjB;EAAoB,OAvCJ;;AAwChB;EAAoB,OAvCJ;;;AA0CjB;EACC,OA/Cc;EAgDd,WE8Ea;EF7Eb,YEkEW;;;AF/DZ;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,YEuDW;;;AFpDZ;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA,OEuCW;EFtCX,KEsCW;EFrCX","file":"Toast.css"}

package/dist/components/Toast/ToastGroup.css

@@ -1,12 +1,12 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   display: flex;
@@ -23,16 +23,16 @@
   word-break: break-word;
 }
 .Toast--info .Toast__title {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__title {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__title {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__title {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__icon {
@@ -41,20 +41,20 @@
   transform: translateY(2px);
 }
 .Toast--info .Toast__icon {
-  color: #2270ee;
+  color: var(--colorsStatusInfo, #2270ee);
 }
 .Toast--critical .Toast__icon {
-  color: #e63717;
+  color: var(--colorsStatusCritical, #f94d32);
 }
 .Toast--success .Toast__icon {
-  color: #10864b;
+  color: var(--colorsStatusSuccessStrong, #10864b);
 }
 .Toast--warning .Toast__icon {
-  color: #de9500;
+  color: var(--colorsStatusWarningStrong, #de9500);
 }
 
 .Toast__description {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-size: 14px;
   margin-top: 8px;
 }
@@ -90,7 +90,7 @@
 
 .ToastGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }