@servicetitan/design-system 11.3.1 → 11.4.0

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, #040404);
   /* 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"}

package/dist/components/Sidebar/Sidebar.js

@@ -9,136 +9,80 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import { debounce } from '../../utilities/debounce';
-import { ToggleButton } from './ToggleButton';
+import { useScreenSize } from '../../hooks/useScreenSize';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
 import { SidebarSection } from './SidebarSection';
 export const Sidebar = (_a) => {
     var { el: Element = 'div', className, localStorageKey, children } = _a, rest = __rest(_a, ["el", "className", "localStorageKey", "children"]);
-    const breakpoint = 992;
-    const hoverDelay = 300;
-    const hoverTimeout = useRef();
     const sidebarRef = useRef();
-    const pointerId = useRef();
     const getInitialOpen = () => {
         const wasPreviouslyOpen = typeof window !== 'undefined' &&
             window.localStorage.getItem(localStorageKey);
-        return {
-            value: wasPreviouslyOpen ? JSON.parse(wasPreviouslyOpen) : true,
-            temporary: false,
-        };
+        return wasPreviouslyOpen ? JSON.parse(wasPreviouslyOpen) : true;
     };
-    const [isDisplaySmall, setIsDisplaySmall] = useState(false);
-    const [openOnLargeDisplay, setOpenOnLargeDisplay] = useState(getInitialOpen());
-    const [openOnSmallDisplay, setOpenOnSmallDisplay] = useState(false);
-    const isOpen = (isDisplaySmall && openOnSmallDisplay) ||
-        (!isDisplaySmall && openOnLargeDisplay.value);
-    const isTemporary = isDisplaySmall || (!isDisplaySmall && openOnLargeDisplay.temporary);
+    const screensize = useScreenSize();
+    const isDisplaySmall = screensize.smallerThan.desktop;
+    const [isHover, setIsHover] = useState(false);
+    const [isTempOpen, setIsTempOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(getInitialOpen());
+    const hoverTimeout = useRef();
     const isTouchScreen = typeof window !== 'undefined' &&
         window.matchMedia('(pointer:coarse)').matches;
-    const open = useCallback((options) => {
-        var _a;
-        clearTimeout(hoverTimeout.current);
-        if (isDisplaySmall) {
-            setOpenOnSmallDisplay(true);
-        }
-        else {
-            setOpenOnLargeDisplay({
-                value: true,
-                temporary: (_a = options.temporary) !== null && _a !== void 0 ? _a : false,
-            });
-        }
-    }, [isDisplaySmall]);
-    const close = useCallback(() => {
-        clearTimeout(hoverTimeout.current);
-        if (isDisplaySmall) {
-            setOpenOnSmallDisplay(false);
-        }
-        else {
-            setOpenOnLargeDisplay({
-                value: false,
-                temporary: false,
-            });
-        }
-    }, [isDisplaySmall]);
-    const handlePointerEnter = (e) => {
-        if (e.pointerType === 'mouse') {
-            clearTimeout(hoverTimeout.current);
-            if (isOpen)
-                return;
-            hoverTimeout.current = setTimeout(() => open({ temporary: true }), hoverDelay);
-        }
-    };
-    const handlePointerLeave = (e) => {
-        var _a;
-        if (e.pointerType === 'mouse') {
-            clearTimeout(hoverTimeout.current);
-            if (!isOpen || (isOpen && !isTemporary))
-                return;
-            if (e.relatedTarget.nodeType &&
-                ((_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)))
-                return;
-            hoverTimeout.current = setTimeout(() => close(), hoverDelay);
-        }
-    };
-    const handlePointerDown = (e) => {
-        if (isDisplaySmall && e.pointerType === 'touch')
-            pointerId.current = e.pointerId;
-    };
-    const handlePointerUp = (e) => {
-        if (isDisplaySmall &&
-            e.pointerType === 'touch' &&
-            e.pointerId === pointerId.current) {
-            if (isOpen)
-                return;
-            open({ temporary: true });
-            pointerId.current = undefined;
-        }
-    };
-    const calcDisplaySmall = () => {
-        const windowWidth = Math.min(window.innerWidth, window.outerWidth);
-        return windowWidth < breakpoint;
-    };
     const SidebarClasses = classnames('Sidebar', className, {
-        'Sidebar--collapsed': !isOpen,
-        'Sidebar--temporary': isOpen && isTemporary,
+        'Sidebar--collapsed': !isOpen || isDisplaySmall,
+        'Sidebar--temporary': isTempOpen,
         'Sidebar--touch': isTouchScreen,
     });
     const toggleButtonClasses = classnames('Sidebar__toggle-button', {
-        'Sidebar__toggle-button-visible': isTemporary || isTouchScreen || !isOpen,
+        'Sidebar__toggle-button-visible': isTouchScreen || !isOpen,
     });
+    const iconName = isDisplaySmall && isTempOpen
+        ? 'keyboard_arrow_left'
+        : isDisplaySmall && !isTempOpen
+            ? 'keyboard_arrow_right'
+            : isOpen
+                ? 'keyboard_arrow_left'
+                : 'keyboard_arrow_right';
+    const size = isTouchScreen ? 'medium' : 'small';
+    const [tooltipText, setTooltipText] = useState();
     useEffect(() => {
-        const handleWindowResize = () => setIsDisplaySmall(calcDisplaySmall());
-        const handleWindowResizeDebounced = debounce(handleWindowResize, 150);
-        window.addEventListener('resize', handleWindowResizeDebounced);
-        handleWindowResize();
-        return () => window.removeEventListener('resize', handleWindowResizeDebounced);
-    }, []);
-    useEffect(() => {
-        if (!openOnLargeDisplay.temporary) {
-            localStorage.setItem(localStorageKey, JSON.stringify(openOnLargeDisplay.value));
-        }
-    }, [openOnLargeDisplay, localStorageKey]);
-    useEffect(() => {
-        const handleTapOutside = (e) => {
-            var _a;
-            if (isOpen &&
-                isTemporary &&
-                !((_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                close();
-            }
+        const getTooltipText = () => {
+            if (isTempOpen)
+                return 'Keep sidebar open';
+            if (!isOpen)
+                return 'Open sidebar';
+            return 'Close sidebar';
         };
-        window.addEventListener('touchend', handleTapOutside);
-        return () => window.removeEventListener('touchend', handleTapOutside);
-    }, [isOpen, isTemporary, close]);
+        setTooltipText(getTooltipText());
+    }, [isDisplaySmall, isHover, isOpen, isTempOpen]);
+    const handleHover = (state, delay = 300) => {
+        clearTimeout(hoverTimeout.current);
+        if (!isOpen || isDisplaySmall) {
+            setIsHover(state);
+            hoverTimeout.current = setTimeout(() => {
+                setIsTempOpen(state);
+            }, delay);
+        }
+    };
+    const open = () => {
+        if (!isDisplaySmall) {
+            handleHover(false, 0);
+            setIsOpen(!isOpen);
+            return;
+        }
+        setIsTempOpen(!isTempOpen);
+    };
     useEffect(() => {
-        return () => clearTimeout(hoverTimeout.current);
-    }, []);
+        localStorage.setItem(localStorageKey, JSON.stringify(isOpen));
+    }, [localStorageKey, isOpen]);
     return (React.createElement(Element, Object.assign({ className: SidebarClasses, ref: sidebarRef, "data-anvil-component": "Sidebar" }, rest),
         React.createElement("div", { className: "Sidebar__wrapper" },
-            React.createElement(ToggleButton, { className: toggleButtonClasses, isTouchScreen: isTouchScreen, isDisplaySmall: isDisplaySmall, openOnLargeDisplay: openOnLargeDisplay, openOnSmallDisplay: openOnSmallDisplay, open: open, close: close, onPointerEnter: () => clearTimeout(hoverTimeout.current), onPointerLeave: handlePointerLeave }),
-            React.createElement("div", { className: "Sidebar__content-wrapper", onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp },
+            React.createElement(Tooltip, { hoverOnly: true, className: "Sidebar__toggle-button-wrapper", direction: "r", text: tooltipText },
+                React.createElement(Button, { className: toggleButtonClasses, onClick: open, iconName: iconName, size: size, onMouseOver: () => clearTimeout(hoverTimeout.current), onMouseLeave: () => isTempOpen && handleHover(false) })),
+            React.createElement("div", { className: "Sidebar__content-wrapper", onMouseOver: () => handleHover(true), onMouseLeave: () => handleHover(false) },
                 React.createElement("div", { className: "Sidebar__content" }, children)))));
 };
 Sidebar.Section = SidebarSection;

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAsBlD,MAAM,CAAC,MAAM,OAAO,GAAY,CAAC,EAMhC,EAAE,EAAE;QAN4B,EAChC,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,eAAe,EACf,QAAQ,OAER,EADG,IAAI,cALyB,kDAMhC,CADO;IAEP,MAAM,UAAU,GAAG,MAAM,EAAkB,CAAC;IAE5C,MAAM,cAAc,GAAG,GAAG,EAAE;QAC3B,MAAM,iBAAiB,GACtB,OAAO,MAAM,KAAK,WAAW;YAC7B,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,OAAO,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,cAAc,EAAE,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,MAAM,EAAiC,CAAC;IAE7D,MAAM,aAAa,GAClB,OAAO,MAAM,KAAK,WAAW;QAC7B,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC;IAE/C,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,EAAE;QACvD,oBAAoB,EAAE,CAAC,MAAM,IAAI,cAAc;QAC/C,oBAAoB,EAAE,UAAU;QAChC,gBAAgB,EAAE,aAAa;KAC/B,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,UAAU,CAAC,wBAAwB,EAAE;QAChE,gCAAgC,EAAE,aAAa,IAAI,CAAC,MAAM;KAC1D,CAAC,CAAC;IAEH,MAAM,QAAQ,GACb,cAAc,IAAI,UAAU;QAC3B,CAAC,CAAC,qBAAqB;QACvB,CAAC,CAAC,cAAc,IAAI,CAAC,UAAU;YAC/B,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,qBAAqB;gBACvB,CAAC,CAAC,sBAAsB,CAAC;IAC3B,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAU,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,cAAc,GAAG,GAAG,EAAE;YAC3B,IAAI,UAAU;gBAAE,OAAO,mBAAmB,CAAC;YAC3C,IAAI,CAAC,MAAM;gBAAE,OAAO,cAAc,CAAC;YACnC,OAAO,eAAe,CAAC;QACxB,CAAC,CAAC;QAEF,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,CAAC,KAAc,EAAE,KAAK,GAAG,GAAG,EAAE,EAAE;QACnD,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,IAAI,cAAc,EAAE;YAC9B,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACtC,aAAa,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,EAAE,KAAK,CAAC,CAAC;SACV;IACF,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,cAAc,EAAE;YACpB,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YACtB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;YACnB,OAAO;SACP;QACD,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,CACN,oBAAC,OAAO,kBACP,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,UAAU,0BACM,SAAS,IAC1B,IAAI;QAER,6BAAK,SAAS,EAAC,kBAAkB;YAChC,oBAAC,OAAO,IACP,SAAS,QACT,SAAS,EAAC,gCAAgC,EAC1C,SAAS,EAAC,GAAG,EACb,IAAI,EAAE,WAAW;gBAEjB,oBAAC,MAAM,IACN,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,EACrD,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,IAAI,WAAW,CAAC,KAAK,CAAC,GACnD,CACO;YACV,6BACC,SAAS,EAAC,0BAA0B,EACpC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACpC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;gBAEtC,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CAC7C,CACD,CACG,CACV,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,CAAC,OAAO,GAAG,cAAc,CAAC"}

package/dist/components/Sidebar/SidebarSection.css

@@ -1,5 +1,124 @@
+/* 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: var(--colorsTextDefault, #040404);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  z-index: 10;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 239px;
+  transition: width 0.25s;
+}
+.Sidebar:hover .Sidebar__toggle-button,
+.Sidebar .Sidebar__toggle-button-visible {
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.Sidebar__wrapper {
+  min-height: 46px;
+  width: 239px;
+  transition: width 0.25s, opacity 0.25s;
+  position: relative;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
+}
+
+.Sidebar__content {
+  transition: opacity 0.25s, visibility 0.25s;
+  overflow: auto;
+}
+
+.Sidebar,
+.Sidebar__wrapper,
+.Sidebar__content-wrapper,
+.Sidebar__content {
+  height: 100%;
+}
+
+.Sidebar__wrapper, .Page.bg-neutral-10 .Sidebar__wrapper,
+.Sidebar__content,
+.Page.bg-neutral-10 .Sidebar__content,
+.Sidebar__toggle-button,
+.Page.bg-neutral-10 .Sidebar__toggle-button {
+  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: 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;
+  overflow: hidden;
+  opacity: 0;
+}
+.Sidebar--collapsed .Sidebar__toggle-button:not(:hover) {
+  box-shadow: none;
+}
+
+.Sidebar--temporary {
+  width: 29px;
+}
+.Sidebar--temporary .Sidebar__wrapper {
+  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;
+}
+.Sidebar--touch .Sidebar__toggle-button-wrapper {
+  right: -20px;
+}
+.Sidebar--touch .Sidebar__toggle-button {
+  padding: 7px !important;
+  border-radius: 20px;
+}
+
+.Sidebar__toggle-button {
+  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: 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;
+  top: 30px;
+  right: -16px;
+  z-index: 10;
+}
+
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarSection.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA,SCuHW;;ADrHX;EAAgB;;;AAGjB;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA0B","file":"SidebarSection.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Sidebar/SidebarSection.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.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;;;AExID;EACC;EACA,SCuHW;;ADrHX;EAAgB;;;AAGjB;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA0B","file":"SidebarSection.css"}

package/dist/components/Sidebar/index.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, #040404);
   /* 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;
@@ -108,7 +118,7 @@
 }
 
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {

package/dist/components/Sidebar/index.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","../../../src/components/Sidebar/SidebarSection.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;;;AGtHD;EACC;EACA,SDuHW;;ACrHX;EAAgB;;;AAGjB;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA0B","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Sidebar/SidebarSection.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.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;;;AExID;EACC;EACA,SCuHW;;ADrHX;EAAgB;;;AAGjB;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA0B","file":"index.css"}

package/dist/components/Snackbar/Snackbar.css

@@ -1,15 +1,15 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Snackbar {
   /* 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;
   animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  background: #2d2e31;
+  background: var(--colorsSurfaceInverted, #2d2e31);
   border-radius: 3px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: inline-flex;
   align-items: center;
   /** Material's width limit. Soft rule against long copy in this pattern. */
@@ -27,14 +27,14 @@
 
 .Snackbar__action {
   background: transparent;
-  color: #a9d1ff;
+  color: var(--colorsTextPrimarySubdued, #a9d1ff);
   cursor: pointer;
   line-height: 1.5;
   text-align: right;
   padding-left: 16px;
 }
 .Snackbar__action:hover {
-  color: #ecf4fd;
+  text-decoration: underline;
 }
 
 .Snackbar__close.Button {
@@ -43,7 +43,7 @@
   margin-right: -4px;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
 }
 .Snackbar__close.Button .a-Icon,
 .Snackbar__close.Button .a-Icon > svg {
@@ -57,7 +57,7 @@
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #949596);
 }
 
 .Snackbar--floating {

package/dist/components/Snackbar/Snackbar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Snackbar/Snackbar.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA;EACA,YEwCmB;EFvCnB;EACA;EACA;EACA,OEwBiB;EFvBjB;EACA;AAEA;EACA;EACA;EACA,SEyGW;EFxGX;;;AAGD;EACC;EACA,aEoHkB;EFnHlB,eEoGW;;;AFjGZ;EACC;EACA;EACA;EACA,aE4GkB;EF3GlB;EACA,cEyFW;;AFvFX;EACC,OERe;;;AFYjB;EACC;EACA;EACA;EACA;EACA;EACA,OEJkB;;AFMlB;AAAA;EAEC;EACA;;AAED;EAAgB;;AAEhB;EAAU;;AACV;EAA4B,OEtBX;;;AFyBlB;EACC,QE8DW;EF7DX,ME6DW;EF5DX;EACA;;;AAGD;EACC;IACC;IACA;;EAGD;IACC;IACA","file":"Snackbar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Snackbar/Snackbar.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACUA;ACTC;EACA;AAEA;EACA;EDQA;EACA,YAXoB;EAYpB,eEPiB;EFQjB;EACA;EACA,OAdc;EAed;EACA;AAEA;EACA;EACA;EACA,SEmGW;EFlGX;;;AAGD;EACC;EACA,aE8GkB;EF7GlB,eE8FW;;;AF3FZ;EACC;EACA,OAhCa;EAiCb;EACA,aEsGkB;EFrGlB;EACA,cEmFW;;AFjFX;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA,OA/Cc;;AAiDd;AAAA;EAEC;EACA;;AAED;EAAgB;;AAEhB;EAAU;;AACV;EAA4B,OAxDhB;;;AA2Db;EACC,QEwDW;EFvDX,MEuDW;EFtDX;EACA;;;AAGD;EACC;IACC;IACA;;EAGD;IACC;IACA","file":"Snackbar.css"}

package/dist/components/Snackbar/index.css

@@ -1,15 +1,15 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Snackbar {
   /* 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;
   animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  background: #2d2e31;
+  background: var(--colorsSurfaceInverted, #2d2e31);
   border-radius: 3px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
   display: inline-flex;
   align-items: center;
   /** Material's width limit. Soft rule against long copy in this pattern. */
@@ -27,14 +27,14 @@
 
 .Snackbar__action {
   background: transparent;
-  color: #a9d1ff;
+  color: var(--colorsTextPrimarySubdued, #a9d1ff);
   cursor: pointer;
   line-height: 1.5;
   text-align: right;
   padding-left: 16px;
 }
 .Snackbar__action:hover {
-  color: #ecf4fd;
+  text-decoration: underline;
 }
 
 .Snackbar__close.Button {
@@ -43,7 +43,7 @@
   margin-right: -4px;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
 }
 .Snackbar__close.Button .a-Icon,
 .Snackbar__close.Button .a-Icon > svg {
@@ -57,7 +57,7 @@
   background-color: transparent;
 }
 .Snackbar__close.Button.Button--icon-only:hover {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #949596);
 }
 
 .Snackbar--floating {