@servicetitan/design-system 11.3.1 → 11.4.2

package/dist/components/Select/Select.css

@@ -2,11 +2,58 @@
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
    * Fix for collapsing trigger if no value been set, since newer
    * semantic-ui-react-v2.0.1 removes empty .text node form trigger in such scenario
    */
 }
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
+  border-color: var(--colorsBorderGrey, #dfe0e1) !important;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.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));
+}
+.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);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !important;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item {
+  color: var(--colorsTextCritical, #f94d32);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item.selected {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
+}
+.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;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.visible > .text:not(.default) {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:not(.button) > .default.text {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
+  color: var(--colorsTextSubdued, #737475);
+}
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
 }
@@ -76,13 +123,10 @@
 }
 .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: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .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 #a9d1ff !important;
-}
-.error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #ffb2a0 !important;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff) !important;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown::before {
   content: "";
@@ -101,11 +145,11 @@
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon {
   position: absolute;
   right: 2em;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {

package/dist/components/Select/Select.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAaA;EACC;;AAEA;AAwGC;AAAA;AAAA;AAAA;;AAtGC;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCmGC;;ADjGZ;EAAQ;;AAER;EACC;EACA,aAlCmB;EAmCnB;EACA,gBApCmB;EAqCnB,cAtCoB;;AAwCpB;EACC;EACA;EACA;EACA,cA3CkB;;AA6ClB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAxDwB;EAyDxB;EACA,gBA1DwB;EA2DxB,cAhEoB;;AAkEpB;EACC;EACA;EACA;EACA,cArEkB;;AAwEnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OCpBY;;ADwBd;EAGC;;AAEA;EAAW;;AAOZ;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OChGiB;EDiGjB;;AAEA;EACC,OCvDa;;AD4Df;AAAA;EACS,aCRS","file":"Select.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AA4BA;EACC;;AAEA;EACC,kBA3BmB;EA4BnB,OA1Ba;EA2Bb,cAzBe;AA6Kf;AAAA;AAAA;AAAA;;AAlJA;EACC;EACA,kBAjCkB;;AAmClB;EACC,OAlCW;;AAoCX;EAAa,kBA/BQ;;AAgCrB;EAAU,kBAjCU;;AAqCtB;EACC,OAzCa;EA0Cb,kBA5CmB;EA6CnB,cAzCe;;AA2Cf;EACC;EACA,kBAjDkB;;AAmDlB;EACC,OAlDW;;AAoDX;EAAa,kBA9CgB;;AA+C7B;EAAU,kBAhDkB;;AAoD9B;EAGC;;AAIF;EAAkC,OAjErB;;AAmEb;EACC,OApEY;EAqEZ;;AAGD;EAAmB,OAhEN;;AAmEZ;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCoCC;;ADlCZ;EAAQ;;AAER;EACC;EACA,aAnFmB;EAoFnB;EACA,gBArFmB;EAsFnB,cAvFoB;;AAyFpB;EACC;EACA;EACA;EACA,cA5FkB;;AA8FlB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAzGwB;EA0GxB;EACA,gBA3GwB;EA4GxB,cAjHoB;;AAmHpB;EACC;EACA;EACA;EACA,cAtHkB;;AAyHnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OAzKU;;AA6KZ;EAGC;;AAOD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OAvMc;EAwMd;;AAEA;EACC,OA1MW;;AA+Mb;AAAA;EACS,aCrES","file":"Select.css"}

package/dist/components/Select/index.css

@@ -2,11 +2,58 @@
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
    * Fix for collapsing trigger if no value been set, since newer
    * semantic-ui-react-v2.0.1 removes empty .text node form trigger in such scenario
    */
 }
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
+  border-color: var(--colorsBorderGrey, #dfe0e1) !important;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.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));
+}
+.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);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !important;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item {
+  color: var(--colorsTextCritical, #f94d32);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item.selected {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
+}
+.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;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.visible > .text:not(.default) {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:not(.button) > .default.text {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
+  color: var(--colorsTextSubdued, #737475);
+}
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
 }
@@ -76,13 +123,10 @@
 }
 .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: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .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 #a9d1ff !important;
-}
-.error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #ffb2a0 !important;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff) !important;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown::before {
   content: "";
@@ -101,11 +145,11 @@
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon {
   position: absolute;
   right: 2em;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAaA;EACC;;AAEA;AAwGC;AAAA;AAAA;AAAA;;AAtGC;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCmGC;;ADjGZ;EAAQ;;AAER;EACC;EACA,aAlCmB;EAmCnB;EACA,gBApCmB;EAqCnB,cAtCoB;;AAwCpB;EACC;EACA;EACA;EACA,cA3CkB;;AA6ClB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAxDwB;EAyDxB;EACA,gBA1DwB;EA2DxB,cAhEoB;;AAkEpB;EACC;EACA;EACA;EACA,cArEkB;;AAwEnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OCpBY;;ADwBd;EAGC;;AAEA;EAAW;;AAOZ;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OChGiB;EDiGjB;;AAEA;EACC,OCvDa;;AD4Df;AAAA;EACS,aCRS","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AA4BA;EACC;;AAEA;EACC,kBA3BmB;EA4BnB,OA1Ba;EA2Bb,cAzBe;AA6Kf;AAAA;AAAA;AAAA;;AAlJA;EACC;EACA,kBAjCkB;;AAmClB;EACC,OAlCW;;AAoCX;EAAa,kBA/BQ;;AAgCrB;EAAU,kBAjCU;;AAqCtB;EACC,OAzCa;EA0Cb,kBA5CmB;EA6CnB,cAzCe;;AA2Cf;EACC;EACA,kBAjDkB;;AAmDlB;EACC,OAlDW;;AAoDX;EAAa,kBA9CgB;;AA+C7B;EAAU,kBAhDkB;;AAoD9B;EAGC;;AAIF;EAAkC,OAjErB;;AAmEb;EACC,OApEY;EAqEZ;;AAGD;EAAmB,OAhEN;;AAmEZ;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCoCC;;ADlCZ;EAAQ;;AAER;EACC;EACA,aAnFmB;EAoFnB;EACA,gBArFmB;EAsFnB,cAvFoB;;AAyFpB;EACC;EACA;EACA;EACA,cA5FkB;;AA8FlB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAzGwB;EA0GxB;EACA,gBA3GwB;EA4GxB,cAjHoB;;AAmHpB;EACC;EACA;EACA;EACA,cAtHkB;;AAyHnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OAzKU;;AA6KZ;EAGC;;AAOD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OAvMc;EAwMd;;AAEA;EACC,OA1MW;;AA+Mb;AAAA;EACS,aCrES","file":"index.css"}

package/dist/components/SideNav/SideNav.css

@@ -1,11 +1,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .SideNav {
   /* 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;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -17,9 +17,10 @@
 }
 
 .SideNav__title {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   margin: 0 16px;
   padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .SideNav__list {

package/dist/components/SideNav/SideNav.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA,OCiBa;ADfb;EACA;EDGA;EACA,OEUa;EFTb,SEiHW;;AF/GX;EACC,aE6GU;EF5GV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;;;AAGD;EGzBC;EACA;EACA;EACA;EACA;EHwBA,aE8FW","file":"SideNav.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SE8GW;;AF5GX;EACC,aE0GU;EFzGV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE0FW","file":"SideNav.css"}

package/dist/components/SideNav/SideNav.js

@@ -18,7 +18,7 @@ export const SideNav = (_a) => {
     var { children, className, title } = _a, rest = __rest(_a, ["children", "className", "title"]);
     const SideNavClasses = classnames('SideNav', className);
     return (React.createElement("div", Object.assign({ className: SideNavClasses, "data-anvil-component": "SideNav" }, rest),
-        title !== undefined && (React.createElement(Headline, { el: "div", className: "SideNav__title c-neutral-200", size: "small" }, title)),
+        title !== undefined && (React.createElement(Headline, { el: "div", className: "SideNav__title", size: "small" }, title)),
         React.createElement("ul", { className: "SideNav__list" }, children)));
 };
 SideNav.Item = SideNavItem;

package/dist/components/SideNav/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNav.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwBvC,MAAM,CAAC,MAAM,OAAO,GAAY,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACrE,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACN,2CACC,SAAS,EAAE,cAAc,0BACJ,SAAS,IAC1B,IAAI;QAEP,KAAK,KAAK,SAAS,IAAI,CACvB,oBAAC,QAAQ,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,OAAO,IAEX,KAAK,CACI,CACX;QACD,4BAAI,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAM,CACxC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC;AAC3B,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC"}
+{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNav.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwBvC,MAAM,CAAC,MAAM,OAAO,GAAY,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACrE,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACN,2CACC,SAAS,EAAE,cAAc,0BACJ,SAAS,IAC1B,IAAI;QAEP,KAAK,KAAK,SAAS,IAAI,CACvB,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,IACxD,KAAK,CACI,CACX;QACD,4BAAI,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAM,CACxC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC;AAC3B,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC"}

package/dist/components/SideNav/SideNavGroup.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNavGroup.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACGA;EACC,YCyHW;;ADvHX;EAA+B,YCqHpB;;;ADlHZ;EACC;;;AAGD;EEZC;EACA;EACA;EACA;EACA","file":"SideNavGroup.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNavGroup.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACGA;EACC,YC0HW;;ADxHX;EAA+B,YCsHpB;;;ADnHZ;EACC;;;AAGD;EEZC;EACA;EACA;EACA;EACA","file":"SideNavGroup.css"}

package/dist/components/SideNav/SideNavItem.css

@@ -1,4 +1,37 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.SideNav {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  box-sizing: border-box;
+  color: var(--colorsTextDefault, #141414);
+  padding: 16px;
+}
+.SideNav .Tag {
+  margin-left: 8px;
+  transform: translateY(-1px);
+}
+.SideNav a {
+  text-decoration: none;
+}
+
+.SideNav__title {
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  margin: 0 16px;
+  padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
+}
+
+.SideNav__list {
+  list-style: none;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-top: 0;
+  padding-left: 0;
+  padding-top: 16px;
+}
+
 .SideNavItem {
   margin: 0;
   padding: 0;
@@ -6,7 +39,7 @@
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -19,11 +52,11 @@
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: #ecf4fd;
-  color: #2270ee;
+  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 /*# sourceMappingURL=SideNavItem.css.map */

package/dist/components/SideNav/SideNavItem.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNavItem.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;EACC;EACA;;;AAGD;EACC,eCDiB;EDEjB,OCSa;EDRb,aC8FqB;ED7FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YCMe;EDLf,OCQe;;ADLhB;EAAyB,OCKT","file":"SideNavItem.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SE8GW;;AF5GX;EACC,aE0GU;EFzGV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE0FW;;;AErHZ;EACC;EACA;;;AAGD;EACC,eFLiB;EEMjB,OJTc;EIUd,aF2FqB;EE1FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YAvBiB;EAwBjB,OAvBW;;AA0BZ;EAAyB,OA1Bb","file":"SideNavItem.css"}

package/dist/components/SideNav/index.css

@@ -1,11 +1,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .SideNav {
   /* 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;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -17,9 +17,10 @@
 }
 
 .SideNav__title {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   margin: 0 16px;
   padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .SideNav__list {
@@ -38,7 +39,7 @@
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -51,11 +52,11 @@
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: #ecf4fd;
-  color: #2270ee;
+  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .SideNavGroup {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss","../../../src/components/SideNav/SideNavGroup.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA,OCiBa;ADfb;EACA;EDGA;EACA,OEUa;EFTb,SEiHW;;AF/GX;EACC,aE6GU;EF5GV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;;;AAGD;EGzBC;EACA;EACA;EACA;EACA;EHwBA,aE8FW;;;AExHZ;EACC;EACA;;;AAGD;EACC,eFDiB;EEEjB,OFSa;EERb,aF8FqB;EE7FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YFMe;EELf,OFQe;;AELhB;EAAyB,OFKT;;;AG7BjB;EACC,YHyHW;;AGvHX;EAA+B,YHqHpB;;;AGlHZ;EACC;;;AAGD;EFZC;EACA;EACA;EACA;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss","../../../src/components/SideNav/SideNavGroup.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SE8GW;;AF5GX;EACC,aE0GU;EFzGV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE0FW;;;AErHZ;EACC;EACA;;;AAGD;EACC,eFLiB;EEMjB,OJTc;EIUd,aF2FqB;EE1FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YAvBiB;EAwBjB,OAvBW;;AA0BZ;EAAyB,OA1Bb;;;ACFb;EACC,YH0HW;;AGxHX;EAA+B,YHsHpB;;;AGnHZ;EACC;;;AAGD;EFZC;EACA;EACA;EACA;EACA","file":"index.css"}

package/dist/components/Sidebar/Sidebar.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Sidebar {
   /* 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;
   z-index: 10;
@@ -21,7 +21,7 @@
   width: 239px;
   transition: width 0.25s, opacity 0.25s;
   position: relative;
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .Sidebar__content {
@@ -41,21 +41,23 @@
 .Page.bg-neutral-10 .Sidebar__content,
 .Sidebar__toggle-button,
 .Page.bg-neutral-10 .Sidebar__toggle-button {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Page.bg-white .Sidebar__wrapper, .Page.bg-neutral-0 .Sidebar__wrapper,
 .Page.bg-white .Sidebar__content,
 .Page.bg-neutral-0 .Sidebar__content,
 .Page.bg-white .Sidebar__toggle-button,
 .Page.bg-neutral-0 .Sidebar__toggle-button {
-  background: #fcfcfc;
+  background: var(--colorsAppBackground, #fcfcfc);
 }
 
 .Sidebar--collapsed {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__wrapper {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__content {
   visibility: hidden;
@@ -73,6 +75,10 @@
   width: 239px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar--temporary .Sidebar__content {
+  visibility: visible;
+  opacity: 1;
+}
 
 .Sidebar--touch .Sidebar__wrapper {
   min-height: 50px;
@@ -86,19 +92,23 @@
 }
 
 .Sidebar__toggle-button {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 16px;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   opacity: 0;
   transition: opacity 0.25s;
   padding: 3px !important;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Sidebar__toggle-button:hover {
-  background-color: #ecf4fd;
-  color: #2270ee;
-  border-color: #2270ee;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextPrimary, #2270ee);
+  border-color: var(--colorsTextPrimary, #2270ee);
   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));
+}
 
 .Sidebar__toggle-button-wrapper {
   position: absolute;

package/dist/components/Sidebar/Sidebar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACUA;ACTC;EACA,OCiBa;ADfb;EACA;EDQA;EACA;EACA;EACA,OAbe;EAcf;;AAEA;AAAA;EAEC;EACA;;;AAIF;EACC;EACA,OAzBe;EA0Bf;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YEhCX;;AFkCb;AAAA;AAAA;AAAA;AAAA;EACuB,YEjBL;;;AFoBnB;EACC,OArDyB;;AAuDzB;EACC,OAxDwB;;AA2DzB;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OAzEyB;;AA2EzB;EACC,OA7Ec;EA8Ed;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eA1F6B;;;AA8F/B;EACC;EACA,eA/F6B;EAgG7B;EACA;EACA;EACA;;AAEA;EACC,kBEhFe;EFiFf,OE9Ee;EF+Ef,cE/Ee;EFgFf;;;AAIF;EACC;EACA,KA9G2B;EA+G3B;EACA","file":"Sidebar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACiBA;AChBC;EACA;AAEA;EACA;EDeA;EACA;EACA;EACA,OApBe;EAqBf;;AAEA;AAAA;EAEC;EACA;;;AAIF;EACC;EACA,OAhCe;EAiCf;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YA/CJ;;AAiDpB;AAAA;AAAA;AAAA;AAAA;EACuB,YAhDN;;;AAmDlB;EACC,OA5DyB;EA6DzB;;AAEA;EACC,OAhEwB;EAiExB;;AAGD;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OAlFyB;;AAoFzB;EACC,OAtFc;EAuFd;;AAGD;EACC;EACA;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eAxG6B;;;AA4G/B;EACC;EACA,eA7G6B;EA8G7B;EACA;EACA;EACA;EACA,YA1G2B;;AA4G3B;EACC,YA7G0B;EA8G1B,OA/GkB;EAgHlB,cAhHkB;EAiHlB;;AAEA;EACC,kBArHuB;;;AA0H1B;EACC;EACA,KAjI2B;EAkI3B;EACA","file":"Sidebar.css"}