@jobber/design 0.63.0 → 0.64.0

package/dist/dark.mode.css

@@ -0,0 +1,115 @@
+:root[data-theme="dark"] {
+@media screen {
+  --base-unit: 16px;
+  --color-base-blue--700: hsl(197, 15%, 35%);
+  --color-base-blue--800: hsl(197, 18%, 25%);
+  --color-base-blue--900: hsl(197, 15%, 18%);
+  --color-base-blue--1000: hsl(197, 10%, 10%);
+  --color-interactive: hsl(86, 60%, 50%);
+  --color-interactive--hover: hsl(86, 60%, 60%);
+  --color-interactive--subtle: var(--color-base-blue--200);
+  --color-interactive--subtle--hover: var(--color-base-blue--100);
+  --color-destructive: var(--color-base-red--500);
+  --color-destructive--hover: var(--color-base-red--400);
+  --color-disabled: var(--color-base-grey--500);
+  --color-disabled--secondary: var(--color-base-grey--700);
+  --color-critical: var(--color-base-red--600);
+  --color-critical--surface: var(--color-base-red--900);
+  --color-critical--onSurface: var(--color-base-red--300);
+  --color-warning: var(--color-base-yellow--400);
+  --color-warning--surface: var(--color-base-yellow--700);
+  --color-warning--onSurface: var(--color-base-yellow--200);
+  --color-success: var(--color-base-green--500);
+  --color-success--surface: var(--color-base-green--800);
+  --color-success--onSurface: var(--color-base-green--300);
+  --color-informative: var(--color-base-lightBlue--600);
+  --color-informative--surface: var(--color-base-lightBlue--800);
+  --color-informative--onSurface: var(--color-base-lightBlue--300);
+  --color-inactive: var(--color-base-blue--500);
+  --color-inactive--surface: var(--color-base-blue--700);
+  --color-inactive--onSurface: var(--color-base-blue--200);
+  --color-heading: var(--color-base-blue--100);
+  --color-text: var(--color-base-blue--200);
+  --color-text--secondary: var(--color-base-blue--400);
+  --color-text--reverse: var(--color-base-blue--700);
+  --color-text--reverse--secondary: var(--color-base-blue--900);
+  --color-icon: var(--color-base-blue--200);
+  --color-surface: var(--color-base-blue--900);
+  --color-surface--hover: var(--color-base-blue--800);
+  --color-surface--active: var(--color-base-blue--700);
+  --color-surface--background: var(--color-base-blue--1000);
+  --color-surface--background--hover: var(--color-base-blue--800);
+  --color-surface--background--subtle: var(--color-base-blue--800);
+  --color-surface--reverse: var(--color-base-taupe--200);
+  --color-border: var(--color-base-blue--700);
+  --color-border--interactive: var(--color-base-blue--500);
+  --color-border--section: var(--color-base-blue--400);
+  --color-overlay: rgba(var(--color-black--rgb), 0.6);
+  --color-overlay--dimmed: rgba(var(--color-black--rgb), 0.4);
+  --color-request: var(--color-base-orange--500);
+  --color-quote: var(--color-base-pink--500);
+  --color-job: var(--color-base-green--500);
+  --color-visit: var(--color-job);
+  --color-task: var(--color-base-blue--500);
+  --color-event: var(--color-base-yellow--400);
+  --color-invoice: var(--color-base-lightBlue--500);
+  --color-payments: var(--color-invoice);
+  --color-request--surface: var(--color-base-orange--800);
+  --color-request--onSurface: var(--color-base-orange--300);
+  --color-quote--surface: var(--color-base-pink--800);
+  --color-quote--onSurface: var(--color-base-pink--300);
+  --color-job--surface: var(--color-base-green--800);
+  --color-job--onSurface: var(--color-base-green--200);
+  --color-visit--surface: var(--color-job--surface);
+  --color-visit--onSurface: var(--color-job--onSurface);
+  --color-task--surface: var(--color-base-blue--700);
+  --color-task--onSurface: var(--color-base-blue--300);
+  --color-event--surface: var(--color-base-yellow--700);
+  --color-event--onSurface: var(--color-base-yellow--200);
+  --color-invoice--surface: var(--color-base-lightBlue--800);
+  --color-invoice--onSurface: var(--color-base-lightBlue--300);
+  --color-payments--surface: var(--color-invoice--surface);
+  --color-payments--onSurface: var(--color-invoice--surface);
+  --color-client: var(--color-base-blue--200);
+  --shadow-low: 0px var(--space-minuscule) var(--space-smallest) rgba(0, 0, 0, 0.15), 0px 0px var(--space-smallest) rgba(0, 0, 0, 0.25);
+  --shadow-base: 0px var(--space-minuscule) var(--space-smaller) 0px rgba(0, 0, 0, 0.1), 0px var(--space-smaller) 12px 0px rgba(0, 0, 0, 0.2);
+  --shadow-high: 0px var(--space-base) var(--space-base) 0px rgba(0, 0, 0, 0.075), 0px 0px var(--space-small) 0px rgba(0, 0, 0, 0.175);
+  --field--placeholder-color: var(--color-base-blue--400);
+  --field--border-color: var(--color-base-blue--500);
+[data-elevation="elevated"] {
+  --base-unit: 16px;
+  --color-destructive: var(--color-base-red--400);
+  --color-destructive--hover: var(--color-base-red--300);
+  --color-surface: var(--color-base-blue--800);
+  --color-surface--hover: var(--color-base-blue--700);
+  --color-surface--active: var(--color-base-blue--600);
+  --color-surface--background: var(--color-base-blue--900);
+  --color-surface--background--hover: var(--color-base-blue--800);
+  --color-surface--background--subtle: var(--color-base-blue--700);
+  --color-border: var(--color-base-blue--700);
+  --color-border--section: var(--color-base-blue--300);
+  --color-text: var(--color-base-blue--100);
+  --color-text--secondary: var(--color-base-blue--300);
+}
+}
+}
+/* autoprefixer: off */
+@supports selector(::-webkit-scrollbar) {
+  [data-theme="dark"]:root html ::-webkit-scrollbar,
+  [data-theme="dark"]:root body ::-webkit-scrollbar {
+    background-color: var(--color-surface--background);
+  }
+
+  [data-theme="dark"]:root html ::-webkit-scrollbar-thumb,
+  [data-theme="dark"]:root body ::-webkit-scrollbar-thumb {
+    border: 3px solid var(--color-surface--background);
+    border-radius: 12px;
+    background-color: var(--color-surface--background--subtle);
+    cursor: pointer;
+  }
+
+  [data-theme="dark"]:root html ::-webkit-scrollbar-thumb:hover,
+  [data-theme="dark"]:root body ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-surface--active);
+  }
+}

package/dist/dark.theme.css

@@ -0,0 +1,78 @@
+:root {
+  --base-unit: 16px;
+  --color-base-blue--700: hsl(197, 15%, 35%);
+  --color-base-blue--800: hsl(197, 18%, 25%);
+  --color-base-blue--900: hsl(197, 15%, 18%);
+  --color-base-blue--1000: hsl(197, 10%, 10%);
+  --color-interactive: hsl(86, 60%, 50%);
+  --color-interactive--hover: hsl(86, 60%, 60%);
+  --color-interactive--subtle: var(--color-base-blue--200);
+  --color-interactive--subtle--hover: var(--color-base-blue--100);
+  --color-destructive: var(--color-base-red--500);
+  --color-destructive--hover: var(--color-base-red--400);
+  --color-disabled: var(--color-base-grey--500);
+  --color-disabled--secondary: var(--color-base-grey--700);
+  --color-critical: var(--color-base-red--600);
+  --color-critical--surface: var(--color-base-red--900);
+  --color-critical--onSurface: var(--color-base-red--300);
+  --color-warning: var(--color-base-yellow--400);
+  --color-warning--surface: var(--color-base-yellow--700);
+  --color-warning--onSurface: var(--color-base-yellow--200);
+  --color-success: var(--color-base-green--500);
+  --color-success--surface: var(--color-base-green--800);
+  --color-success--onSurface: var(--color-base-green--300);
+  --color-informative: var(--color-base-lightBlue--600);
+  --color-informative--surface: var(--color-base-lightBlue--800);
+  --color-informative--onSurface: var(--color-base-lightBlue--300);
+  --color-inactive: var(--color-base-blue--500);
+  --color-inactive--surface: var(--color-base-blue--700);
+  --color-inactive--onSurface: var(--color-base-blue--200);
+  --color-heading: var(--color-base-blue--100);
+  --color-text: var(--color-base-blue--200);
+  --color-text--secondary: var(--color-base-blue--400);
+  --color-text--reverse: var(--color-base-blue--700);
+  --color-text--reverse--secondary: var(--color-base-blue--900);
+  --color-icon: var(--color-base-blue--200);
+  --color-surface: var(--color-base-blue--900);
+  --color-surface--hover: var(--color-base-blue--800);
+  --color-surface--active: var(--color-base-blue--700);
+  --color-surface--background: var(--color-base-blue--1000);
+  --color-surface--background--hover: var(--color-base-blue--800);
+  --color-surface--background--subtle: var(--color-base-blue--800);
+  --color-surface--reverse: var(--color-base-taupe--200);
+  --color-border: var(--color-base-blue--700);
+  --color-border--interactive: var(--color-base-blue--500);
+  --color-border--section: var(--color-base-blue--400);
+  --color-overlay: rgba(var(--color-black--rgb), 0.6);
+  --color-overlay--dimmed: rgba(var(--color-black--rgb), 0.4);
+  --color-request: var(--color-base-orange--500);
+  --color-quote: var(--color-base-pink--500);
+  --color-job: var(--color-base-green--500);
+  --color-visit: var(--color-job);
+  --color-task: var(--color-base-blue--500);
+  --color-event: var(--color-base-yellow--400);
+  --color-invoice: var(--color-base-lightBlue--500);
+  --color-payments: var(--color-invoice);
+  --color-request--surface: var(--color-base-orange--800);
+  --color-request--onSurface: var(--color-base-orange--300);
+  --color-quote--surface: var(--color-base-pink--800);
+  --color-quote--onSurface: var(--color-base-pink--300);
+  --color-job--surface: var(--color-base-green--800);
+  --color-job--onSurface: var(--color-base-green--200);
+  --color-visit--surface: var(--color-job--surface);
+  --color-visit--onSurface: var(--color-job--onSurface);
+  --color-task--surface: var(--color-base-blue--700);
+  --color-task--onSurface: var(--color-base-blue--300);
+  --color-event--surface: var(--color-base-yellow--700);
+  --color-event--onSurface: var(--color-base-yellow--200);
+  --color-invoice--surface: var(--color-base-lightBlue--800);
+  --color-invoice--onSurface: var(--color-base-lightBlue--300);
+  --color-payments--surface: var(--color-invoice--surface);
+  --color-payments--onSurface: var(--color-invoice--surface);
+  --color-client: var(--color-base-blue--200);
+  --shadow-low: 0px var(--space-minuscule) var(--space-smallest) rgba(0, 0, 0, 0.15), 0px 0px var(--space-smallest) rgba(0, 0, 0, 0.25);
+  --shadow-base: 0px var(--space-minuscule) var(--space-smaller) 0px rgba(0, 0, 0, 0.1), 0px var(--space-smaller) 12px 0px rgba(0, 0, 0, 0.2);
+  --shadow-high: 0px var(--space-base) var(--space-base) 0px rgba(0, 0, 0, 0.075), 0px 0px var(--space-small) 0px rgba(0, 0, 0, 0.175);
+  --field--placeholder-color: var(--color-base-blue--400);
+  --field--border-color: var(--color-base-blue--500);
+}

package/dist/foundation.css

@@ -0,0 +1,369 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+:root {
+  --base-unit: 16px;
+  --border-base: var(--space-minuscule);
+  --border-thick: var(--space-smallest);
+  --border-thicker: var(--space-smaller);
+  --border-thickest: var(--space-small);
+  --color-base-grey--100: hsl(0, 0%, 97%);
+  --color-base-grey--200: hsl(0, 0%, 93%);
+  --color-base-grey--300: hsl(0, 0%, 87%);
+  --color-base-grey--400: hsl(0, 0%, 72%);
+  --color-base-grey--500: hsl(0, 0%, 58%);
+  --color-base-grey--600: hsl(0, 0%, 47%);
+  --color-base-grey--700: hsl(0, 0%, 35%);
+  --color-base-grey--800: hsl(0, 0%, 24%);
+  --color-base-grey--900: hsl(0, 0%, 15%);
+  --color-base-grey--1000: hsl(0, 0%, 11%);
+  --color-base-taupe--100: hsl(45, 20%, 97%);
+  --color-base-taupe--200: hsl(53, 21%, 93%);
+  --color-base-taupe--300: hsl(51, 17%, 85%);
+  --color-base-taupe--400: hsl(49, 7%, 70%);
+  --color-base-taupe--500: hsl(47, 4%, 57%);
+  --color-base-taupe--600: hsl(43, 3%, 46%);
+  --color-base-taupe--700: hsl(48, 3%, 34%);
+  --color-base-taupe--800: hsl(40, 3%, 23%);
+  --color-base-taupe--900: hsl(30, 3%, 15%);
+  --color-base-taupe--1000: hsl(30, 4%, 11%);
+  --color-base-red--100: hsl(10, 60%, 98%);
+  --color-base-red--200: hsl(7, 63%, 95%);
+  --color-base-red--300: hsl(5, 65%, 90%);
+  --color-base-red--400: hsl(6, 64%, 76%);
+  --color-base-red--500: hsl(6, 64%, 65%);
+  --color-base-red--600: hsl(6, 64%, 51%);
+  --color-base-red--700: hsl(6, 100%, 35%);
+  --color-base-red--800: hsl(6, 100%, 24%);
+  --color-base-red--900: hsl(6, 100%, 16%);
+  --color-base-red--1000: hsl(6, 100%, 12%);
+  --color-base-green--100: hsl(108, 29%, 97%);
+  --color-base-green--200: hsl(109, 28%, 92%);
+  --color-base-green--300: hsl(106, 28%, 85%);
+  --color-base-green--400: hsl(107, 29%, 65%);
+  --color-base-green--500: hsl(107, 30%, 49%);
+  --color-base-green--600: hsl(107, 58%, 33%);
+  --color-base-green--700: hsl(107, 65%, 24%);
+  --color-base-green--800: hsl(107, 64%, 16%);
+  --color-base-green--900: hsl(108, 63%, 11%);
+  --color-base-green--1000: hsl(108, 64%, 8%);
+  --color-base-blue--100: hsl(210, 17%, 98%);
+  --color-base-blue--200: hsl(195, 12%, 94%);
+  --color-base-blue--300: hsl(200, 13%, 87%);
+  --color-base-blue--400: hsl(196, 12%, 70%);
+  --color-base-blue--500: hsl(198, 12%, 57%);
+  --color-base-blue--600: hsl(197, 15%, 45%);
+  --color-base-blue--700: hsl(198, 25%, 33%);
+  --color-base-blue--800: hsl(198, 35%, 21%);
+  --color-base-blue--900: hsl(197, 90%, 12%);
+  --color-base-blue--1000: hsl(198, 96%, 9%);
+  --color-base-yellow--100: hsl(49, 67%, 95%);
+  --color-base-yellow--200: hsl(52, 64%, 89%);
+  --color-base-yellow--300: hsl(51, 64%, 77%);
+  --color-base-yellow--400: hsl(51, 64%, 49%);
+  --color-base-yellow--500: hsl(51, 64%, 40%);
+  --color-base-yellow--600: hsl(51, 64%, 32%);
+  --color-base-yellow--700: hsl(51, 64%, 24%);
+  --color-base-yellow--800: hsl(51, 64%, 16%);
+  --color-base-yellow--900: hsl(51, 63%, 11%);
+  --color-base-yellow--1000: hsl(50, 64%, 8%);
+  --color-base-lime--100: hsl(80, 53%, 97%);
+  --color-base-lime--200: hsl(79, 49%, 90%);
+  --color-base-lime--300: hsl(79, 51%, 78%);
+  --color-base-lime--400: hsl(79, 51%, 51%);
+  --color-base-lime--500: hsl(79, 85%, 34%);
+  --color-base-lime--600: hsl(79, 86%, 27%);
+  --color-base-lime--700: hsl(79, 85%, 21%);
+  --color-base-lime--800: hsl(79, 86%, 14%);
+  --color-base-lime--900: hsl(78, 87%, 9%);
+  --color-base-lime--1000: hsl(79, 82%, 7%);
+  --color-base-lightBlue--100: hsl(205, 86%, 97%);
+  --color-base-lightBlue--200: hsl(207, 87%, 94%);
+  --color-base-lightBlue--300: hsl(206, 91%, 87%);
+  --color-base-lightBlue--400: hsl(207, 89%, 71%);
+  --color-base-lightBlue--500: hsl(207, 79%, 57%);
+  --color-base-lightBlue--600: hsl(207, 61%, 45%);
+  --color-base-lightBlue--700: hsl(207, 61%, 34%);
+  --color-base-lightBlue--800: hsl(206, 61%, 23%);
+  --color-base-lightBlue--900: hsl(207, 61%, 15%);
+  --color-base-lightBlue--1000: hsl(207, 60%, 11%);
+  --color-base-pink--100: hsl(345, 40%, 98%);
+  --color-base-pink--200: hsl(347, 33%, 95%);
+  --color-base-pink--300: hsl(348, 36%, 89%);
+  --color-base-pink--400: hsl(349, 34%, 75%);
+  --color-base-pink--500: hsl(349, 34%, 64%);
+  --color-base-pink--600: hsl(348, 34%, 53%);
+  --color-base-pink--700: hsl(348, 40%, 41%);
+  --color-base-pink--800: hsl(348, 40%, 27%);
+  --color-base-pink--900: hsl(347, 41%, 18%);
+  --color-base-pink--1000: hsl(349, 40%, 13%);
+  --color-base-orange--100: hsl(36, 71%, 97%);
+  --color-base-orange--200: hsl(34, 76%, 92%);
+  --color-base-orange--300: hsl(32, 78%, 84%);
+  --color-base-orange--400: hsl(33, 77%, 63%);
+  --color-base-orange--500: hsl(33, 71%, 48%);
+  --color-base-orange--600: hsl(33, 71%, 38%);
+  --color-base-orange--700: hsl(33, 71%, 29%);
+  --color-base-orange--800: hsl(33, 72%, 20%);
+  --color-base-orange--900: hsl(33, 72%, 13%);
+  --color-base-orange--1000: hsl(33, 70%, 9%);
+  --color-indigo: rgb(85, 106, 203);
+  --color-indigo--light: rgb(136, 151, 219);
+  --color-indigo--lighter: rgb(187, 195, 234);
+  --color-indigo--lightest: rgb(230, 233, 247);
+  --color-indigo--dark: rgb(55, 69, 132);
+  --color-white--rgb: 255, 255, 255;
+  --color-black--rgb: 0, 0, 0;
+  --color-brand--highlight: hsl(86, 100%, 46%);
+  --color-greyBlue--rgb: 101, 120, 132;
+  --color-purple--light: rgb(172, 155, 214);
+  --color-purple--lighter: rgb(207, 198, 231);
+  --color-purple--lightest: rgb(237, 234, 246);
+  --color-teal: rgb(62, 173, 146);
+  --color-teal--light: rgb(120, 198, 179);
+  --color-teal--lighter: rgb(178, 222, 211);
+  --color-teal--lightest: rgb(226, 243, 239);
+  --color-teal--dark: rgb(40, 112, 95);
+  --color-blue: var(--color-base-blue--900);
+  --color-blue--light: var(--color-base-blue--700);
+  --color-blue--lighter: var(--color-base-blue--500);
+  --color-blue--lightest: var(--color-base-blue--300);
+  --color-blue--dark: var(--color-base-blue--1000);
+  --color-taupe: var(--color-base-taupe--200);
+  --color-taupe--light: var(--color-base-taupe--100);
+  --color-taupe--dark: var(--color-base-taupe--300);
+  --color-green: var(--color-base-green--600);
+  --color-green--light: var(--color-base-green--500);
+  --color-green--lighter: var(--color-base-green--400);
+  --color-green--lightest: var(--color-base-green--200);
+  --color-green--dark: var(--color-base-green--800);
+  --color-lime: var(--color-base-lime--500);
+  --color-lime--light: var(--color-base-lime--400);
+  --color-lime--lighter: var(--color-base-lime--300);
+  --color-lime--lightest: var(--color-base-lime--200);
+  --color-lime--dark: var(--color-base-lime--700);
+  --color-yellowGreen: var(--color-base-lime--500);
+  --color-yellowGreen--light: var(--color-base-lime--400);
+  --color-yellowGreen--lighter: var(--color-base-lime--300);
+  --color-yellowGreen--lightest: var(--color-base-lime--200);
+  --color-yellowGreen--dark: var(--color-base-lime--600);
+  --color-yellow: var(--color-base-yellow--400);
+  --color-yellow--light: var(--color-base-yellow--300);
+  --color-yellow--lighter: var(--color-base-yellow--200);
+  --color-yellow--lightest: var(--color-base-yellow--100);
+  --color-yellow--dark: var(--color-base-yellow--600);
+  --color-red: var(--color-base-red--600);
+  --color-red--light: var(--color-base-red--400);
+  --color-red--lighter: var(--color-base-red--300);
+  --color-red--lightest: var(--color-base-red--200);
+  --color-red--dark: var(--color-base-red--800);
+  --color-grey: var(--color-base-grey--400);
+  --color-grey--light: var(--color-base-grey--300);
+  --color-grey--lighter: var(--color-base-grey--200);
+  --color-grey--lightest: var(--color-base-grey--100);
+  --color-grey--dark: var(--color-base-grey--600);
+  --color-overlay: rgba(var(--color-black--rgb), 0.32);
+  --color-overlay--dimmed: rgba(var(--color-white--rgb), 0.6);
+  --color-white: rgba(var(--color-white--rgb), 1);
+  --color-black: rgba(var(--color-black--rgb), 1);
+  --color-greyBlue: var(--color-base-blue--600);
+  --color-greyBlue--light: var(--color-base-blue--500);
+  --color-greyBlue--lighter: var(--color-base-blue--400);
+  --color-greyBlue--lightest: var(--color-base-blue--200);
+  --color-greyBlue--dark: var(--color-base-blue--800);
+  --color-lightBlue: var(--color-base-lightBlue--500);
+  --color-lightBlue--light: var(--color-base-lightBlue--400);
+  --color-lightBlue--lighter: var(--color-base-lightBlue--300);
+  --color-lightBlue--lightest: var(--color-base-lightBlue--200);
+  --color-lightBlue--dark: var(--color-base-lightBlue--600);
+  --color-purple: var(--color-base-pink--800);
+  --color-purple--dark: var(--color-base-pink--900);
+  --color-pink: var(--color-base-pink--600);
+  --color-pink--light: var(--color-base-pink--500);
+  --color-pink--lighter: var(--color-base-pink--400);
+  --color-pink--lightest: var(--color-base-pink--200);
+  --color-pink--dark: var(--color-base-pink--800);
+  --color-orange: var(--color-base-orange--500);
+  --color-orange--light: var(--color-base-orange--400);
+  --color-orange--lighter: var(--color-base-orange--300);
+  --color-orange--lightest: var(--color-base-orange--200);
+  --color-orange--dark: var(--color-base-orange--600);
+  --color-brown: var(--color-base-orange--700);
+  --color-brown--light: var(--color-base-orange--600);
+  --color-brown--lighter: var(--color-base-taupe--300);
+  --color-brown--lightest: var(--color-base-taupe--200);
+  --color-brown--dark: var(--color-base-orange--800);
+  --color-navy: var(--color-base-lightBlue--700);
+  --color-navy--light: var(--color-base-lightBlue--600);
+  --color-navy--lighter: var(--color-base-blue--300);
+  --color-navy--lightest: var(--color-base-blue--200);
+  --color-navy--dark: var(--color-base-lightBlue--800);
+  --color-base-white: var(--color-white);
+  --color-base-black: var(--color-black);
+  --color-interactive: var(--color-base-green--600);
+  --color-interactive--hover: var(--color-base-green--700);
+  --color-interactive--subtle: var(--color-base-blue--800);
+  --color-interactive--subtle--hover: var(--color-base-blue--900);
+  --color-destructive: var(--color-base-red--600);
+  --color-destructive--hover: var(--color-base-red--700);
+  --color-disabled: var(--color-base-grey--400);
+  --color-disabled--secondary: var(--color-base-grey--200);
+  --color-focus: var(--color-base-blue--500);
+  --color-critical: var(--color-base-red--600);
+  --color-critical--surface: var(--color-base-red--200);
+  --color-critical--onSurface: var(--color-base-red--800);
+  --color-warning: var(--color-base-yellow--400);
+  --color-warning--surface: var(--color-base-yellow--200);
+  --color-warning--onSurface: var(--color-base-yellow--700);
+  --color-success: var(--color-base-green--600);
+  --color-success--surface: var(--color-base-green--200);
+  --color-success--onSurface: var(--color-base-green--800);
+  --color-informative: var(--color-base-lightBlue--500);
+  --color-informative--surface: var(--color-base-lightBlue--200);
+  --color-informative--onSurface: var(--color-base-lightBlue--700);
+  --color-inactive: var(--color-base-blue--700);
+  --color-inactive--surface: var(--color-base-blue--200);
+  --color-inactive--onSurface: var(--color-base-blue--900);
+  --color-heading: var(--color-base-blue--900);
+  --color-text: var(--color-base-blue--800);
+  --color-text--secondary: var(--color-base-blue--600);
+  --color-text--reverse: var(--color-white);
+  --color-text--reverse--secondary: var(--color-base-blue--300);
+  --color-icon: var(--color-base-blue--800);
+  --color-surface: var(--color-white);
+  --color-surface--hover: var(--color-base-taupe--200);
+  --color-surface--reverse: var(--color-base-blue--900);
+  --color-surface--active: var(--color-base-taupe--300);
+  --color-surface--background: var(--color-base-taupe--200);
+  --color-surface--background--hover: var(--color-base-taupe--300);
+  --color-surface--background--subtle: var(--color-base-taupe--100);
+  --color-surface--background--subtle--hover: var(--color-base-taupe--300);
+  --color-border: var(--color-base-blue--300);
+  --color-border--interactive: var(--color-base-blue--300);
+  --color-border--section: var(--color-base-blue--900);
+  --color-brand: var(--color-base-lime--500);
+  --color-request: var(--color-base-orange--600);
+  --color-request--surface: var(--color-base-orange--200);
+  --color-request--onSurface: var(--color-base-orange--800);
+  --color-quote: var(--color-base-pink--700);
+  --color-quote--surface: var(--color-base-pink--200);
+  --color-quote--onSurface: var(--color-base-pink--800);
+  --color-job: var(--color-base-green--600);
+  --color-job--surface: var(--color-base-green--200);
+  --color-job--onSurface: var(--color-base-green--700);
+  --color-task: var(--color-base-lightBlue--800);
+  --color-task--surface: var(--color-base-blue--200);
+  --color-task--onSurface: var(--color-base-blue--800);
+  --color-invoice: var(--color-base-lightBlue--700);
+  --color-invoice--surface: var(--color-base-lightBlue--200);
+  --color-invoice--onSurface: var(--color-base-lightBlue--800);
+  --color-visit: var(--color-job);
+  --color-visit--surface: var(--color-job--surface);
+  --color-visit--onSurface: var(--color-job--onSurface);
+  --color-event: var(--color-base-yellow--400);
+  --color-event--surface: var(--color-base-yellow--200);
+  --color-event--onSurface: var(--color-base-yellow--700);
+  --color-payments: var(--color-invoice);
+  --color-payments--surface: var(--color-invoice--surface);
+  --color-payments--onSurface: var(--color-invoice--surface);
+  --color-client: var(--color-base-taupe--700);
+  --radius-base: 8px;
+  --radius-small: 4px;
+  --radius-large: 16px;
+  --radius-larger: 24px;
+  --radius-circle: 100%;
+  --space-minuscule: 1px;
+  --space-smallest: 2px;
+  --space-smaller: 4px;
+  --space-small: 8px;
+  --space-base: 16px;
+  --space-large: 24px;
+  --space-larger: 32px;
+  --space-largest: 48px;
+  --space-extravagant: 64px;
+  --shadow-low: 0px var(--space-minuscule) var(--space-smallest) rgba(0, 0, 0, 0.25), 0px 0px var(--space-smallest) rgba(0, 0, 0, 0.1);
+  --shadow-base: 0px var(--space-minuscule) var(--space-smaller) 0px rgba(0, 0, 0, 0.1), 0px var(--space-smaller) 12px 0px rgba(0, 0, 0, 0.05);
+  --shadow-high: 0px var(--space-base) var(--space-base) 0px rgba(0, 0, 0, 0.075), 0px 0px var(--space-small) 0px rgba(0, 0, 0, 0.05);
+  --shadow-focus: 0px 0px 0px var(--space-smallest) var(--color-surface), 0px 0px 0px var(--space-smaller) var(--color-focus);
+  --timing-quick: 100ms;
+  --timing-base: 200ms;
+  --timing-slow: 300ms;
+  --timing-slower: 400ms;
+  --timing-slowest: 500ms;
+  --timing-loading: 1000ms;
+  --timing-loading--extended: 2000ms;
+  --opacity-overlay: 0.8;
+  --opacity-pressed: 0.6;
+  --elevation-default: 0;
+  --elevation-base: 1;
+  --elevation-menu: 6;
+  --elevation-datepicker: 6;
+  --elevation-modal: 1001;
+  --elevation-tooltip: 1002;
+  --elevation-toast: 1003;
+  --typography--letterSpacing-base: 0;
+  --typography--letterSpacing-loose: 0.4;
+  --typography--fontFamily-normal: Inter, Helvetica, Arial, sans-serif;
+  --typography--fontFamily-display: Jobber Pro, Poppins, Helvetica, Arial, sans-serif;
+  --typography--lineHeight-large: 1.34;
+  --typography--lineHeight-larger: 1.5;
+  --typography--lineHeight-largest: 1.75;
+  --typography--lineHeight-jumbo: 2;
+  --typography--lineHeight-extravagant: 4;
+  --typography--lineHeight-base: 1.25;
+  --typography--lineHeight-tight: 1.2;
+  --typography--lineHeight-tighter: 1.143;
+  --typography--lineHeight-tightest: 1.12;
+  --typography--lineHeight-minuscule: 1.08;
+  --typography--fontSize-extravagant: 48px;
+  --typography--fontSize-jumbo: 36px;
+  --typography--fontSize-largest: 24px;
+  --typography--fontSize-larger: 20px;
+  --typography--fontSize-large: 16px;
+  --typography--fontSize-base: 14px;
+  --typography--fontSize-small: 12px;
+  --typography--fontSize-smaller: 10px;
+}
+
+
+/* Disable linter since we need to style body directly. */
+/* stylelint-disable-next-line selector-max-type */
+body {
+  color: var(--color-text);
+  font-family: var(--typography--fontFamily-normal);
+  font-size: var(--typography--fontSize-base);
+  line-height: var(--typography--lineHeight-larger, 1.5);
+  background-color: var(--color-surface);
+}
+
+@keyframes spinning {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@custom-media --small-screens-and-below (max-width: 489px);
+@custom-media --small-screens-and-up (min-width: 490px);
+@custom-media --medium-screens-and-up (min-width: 768px);
+@custom-media --large-screens-and-up (min-width: 1080px);
+@custom-media --extra-large-screens-and-up (min-width: 1440px);
+
+@media (max-width: 639px) {
+  :root {
+    --typography--fontSize-extravagant: calc(
+      var(--typography--fontSize-large) * 2.5
+    );
+    /* 40 */
+    --typography--fontSize-jumbo: calc(
+      var(--typography--fontSize-large) * 1.75
+    );
+    /* 28 */
+    --typography--fontSize-largest: calc(
+      var(--typography--fontSize-large) * 1.375
+    );
+    /* 22 */
+  }
+}