@jobber/design 0.63.0 → 0.64.0

package/foundation.native.js

@@ -1,352 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/* This file is automatically generated and should not be edited. */
-export const tokens = {
-  "border-base": 1,
-  "border-thick": 2,
-  "border-thicker": 4,
-  "border-thickest": 8,
-  "color-interactive": "hsl(107, 58%, 33%)",
-  "color-interactive--hover": "hsl(107, 65%, 24%)",
-  "color-destructive": "hsl(6, 64%, 51%)",
-  "color-destructive--hover": "hsl(6, 100%, 35%)",
-  "color-interactive--subtle": "hsl(198, 35%, 21%)",
-  "color-interactive--subtle--hover": "hsl(197, 90%, 12%)",
-  "color-disabled": "hsl(0, 0%, 72%)",
-  "color-disabled--secondary": "hsl(0, 0%, 93%)",
-  "color-focus": "hsl(198, 12%, 57%)",
-  "color-critical": "hsl(6, 64%, 51%)",
-  "color-critical--surface": "hsl(7, 63%, 95%)",
-  "color-critical--onSurface": "hsl(6, 100%, 24%)",
-  "color-warning": "hsl(51, 64%, 49%)",
-  "color-warning--surface": "hsl(52, 64%, 89%)",
-  "color-warning--onSurface": "hsl(51, 64%, 24%)",
-  "color-success": "hsl(107, 58%, 33%)",
-  "color-success--surface": "hsl(109, 28%, 92%)",
-  "color-success--onSurface": "hsl(107, 64%, 16%)",
-  "color-informative": "hsl(207, 79%, 57%)",
-  "color-informative--surface": "hsl(207, 87%, 94%)",
-  "color-informative--onSurface": "hsl(207, 61%, 34%)",
-  "color-inactive": "hsl(198, 25%, 33%)",
-  "color-inactive--surface": "hsl(195, 12%, 94%)",
-  "color-inactive--onSurface": "hsl(197, 90%, 12%)",
-  "color-heading": "hsl(197, 90%, 12%)",
-  "color-text": "hsl(198, 35%, 21%)",
-  "color-text--secondary": "hsl(197, 15%, 45%)",
-  "color-text--reverse": "rgba(255, 255, 255, 1)",
-  "color-text--reverse--secondary": "hsl(200, 13%, 87%)",
-  "color-icon": "hsl(198, 35%, 21%)",
-  "color-surface": "rgba(255, 255, 255, 1)",
-  "color-surface--hover": "hsl(53, 21%, 93%)",
-  "color-surface--background": "hsl(53, 21%, 93%)",
-  "color-surface--background--hover": "hsl(51, 17%, 85%)",
-  "color-surface--background--subtle": "hsl(45, 20%, 97%)",
-  "color-surface--background--subtle--hover": "hsl(51, 17%, 85%)",
-  "color-surface--reverse": "hsl(197, 90%, 12%)",
-  "color-surface--active": "hsl(51, 17%, 85%)",
-  "color-border": "hsl(200, 13%, 87%)",
-  "color-border--interactive": "hsl(200, 13%, 87%)",
-  "color-border--section": "hsl(197, 90%, 12%)",
-  "color-overlay": "rgba(0, 0, 0, 0.32)",
-  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
-  "color-brand": "hsl(79, 85%, 34%)",
-  "color-brand--highlight": "hsl(86, 100%, 46%)",
-  "color-request": "hsl(33, 71%, 38%)",
-  "color-request--surface": "hsl(34, 76%, 92%)",
-  "color-request--onSurface": "hsl(33, 72%, 20%)",
-  "color-quote": "hsl(348, 40%, 41%)",
-  "color-quote--surface": "hsl(347, 33%, 95%)",
-  "color-quote--onSurface": "hsl(348, 40%, 27%)",
-  "color-job": "hsl(107, 58%, 33%)",
-  "color-job--surface": "hsl(109, 28%, 92%)",
-  "color-job--onSurface": "hsl(107, 65%, 24%)",
-  "color-task": "hsl(206, 61%, 23%)",
-  "color-task--surface": "hsl(195, 12%, 94%)",
-  "color-task--onSurface": "hsl(198, 35%, 21%)",
-  "color-invoice": "hsl(207, 61%, 34%)",
-  "color-invoice--surface": "hsl(207, 87%, 94%)",
-  "color-invoice--onSurface": "hsl(206, 61%, 23%)",
-  "color-visit": "hsl(107, 58%, 33%)",
-  "color-visit--surface": "hsl(109, 28%, 92%)",
-  "color-visit--onSurface": "hsl(107, 65%, 24%)",
-  "color-event": "hsl(51, 64%, 49%)",
-  "color-event--surface": "hsl(52, 64%, 89%)",
-  "color-event--onSurface": "hsl(51, 64%, 24%)",
-  "color-payments": "hsl(207, 61%, 34%)",
-  "color-payments--surface": "hsl(207, 87%, 94%)",
-  "color-payments--onSurface": "hsl(207, 87%, 94%)",
-  "color-client": "hsl(48, 3%, 34%)",
-  "color-blue": "hsl(197, 90%, 12%)",
-  "color-blue--light": "hsl(198, 25%, 33%)",
-  "color-blue--lighter": "hsl(198, 12%, 57%)",
-  "color-blue--lightest": "hsl(200, 13%, 87%)",
-  "color-blue--dark": "hsl(198, 96%, 9%)",
-  "color-taupe": "hsl(53, 21%, 93%)",
-  "color-taupe--light": "hsl(45, 20%, 97%)",
-  "color-taupe--dark": "hsl(51, 17%, 85%)",
-  "color-green": "hsl(107, 58%, 33%)",
-  "color-green--light": "hsl(107, 30%, 49%)",
-  "color-green--lighter": "hsl(107, 29%, 65%)",
-  "color-green--lightest": "hsl(109, 28%, 92%)",
-  "color-green--dark": "hsl(107, 64%, 16%)",
-  "color-lime": "hsl(79, 85%, 34%)",
-  "color-lime--light": "hsl(79, 51%, 51%)",
-  "color-lime--lighter": "hsl(79, 51%, 78%)",
-  "color-lime--lightest": "hsl(79, 49%, 90%)",
-  "color-lime--dark": "hsl(79, 85%, 21%)",
-  "color-yellowGreen": "hsl(79, 85%, 34%)",
-  "color-yellowGreen--light": "hsl(79, 51%, 51%)",
-  "color-yellowGreen--lighter": "hsl(79, 51%, 78%)",
-  "color-yellowGreen--lightest": "hsl(79, 49%, 90%)",
-  "color-yellowGreen--dark": "hsl(79, 86%, 27%)",
-  "color-yellow": "hsl(51, 64%, 49%)",
-  "color-yellow--light": "hsl(51, 64%, 77%)",
-  "color-yellow--lighter": "hsl(52, 64%, 89%)",
-  "color-yellow--lightest": "hsl(49, 67%, 95%)",
-  "color-yellow--dark": "hsl(51, 64%, 32%)",
-  "color-red": "hsl(6, 64%, 51%)",
-  "color-red--light": "hsl(6, 64%, 76%)",
-  "color-red--lighter": "hsl(5, 65%, 90%)",
-  "color-red--lightest": "hsl(7, 63%, 95%)",
-  "color-red--dark": "hsl(6, 100%, 24%)",
-  "color-grey": "hsl(0, 0%, 72%)",
-  "color-grey--light": "hsl(0, 0%, 87%)",
-  "color-grey--lighter": "hsl(0, 0%, 93%)",
-  "color-grey--lightest": "hsl(0, 0%, 97%)",
-  "color-grey--dark": "hsl(0, 0%, 47%)",
-  "color-greyBlue--rgb": "101, 120, 132",
-  "color-greyBlue": "hsl(197, 15%, 45%)",
-  "color-greyBlue--light": "hsl(198, 12%, 57%)",
-  "color-greyBlue--lighter": "hsl(196, 12%, 70%)",
-  "color-greyBlue--lightest": "hsl(195, 12%, 94%)",
-  "color-greyBlue--dark": "hsl(198, 35%, 21%)",
-  "color-lightBlue": "hsl(207, 79%, 57%)",
-  "color-lightBlue--light": "hsl(207, 89%, 71%)",
-  "color-lightBlue--lighter": "hsl(206, 91%, 87%)",
-  "color-lightBlue--lightest": "hsl(207, 87%, 94%)",
-  "color-lightBlue--dark": "hsl(207, 61%, 45%)",
-  "color-purple": "hsl(348, 40%, 27%)",
-  "color-purple--light": "rgb(172, 155, 214)",
-  "color-purple--lighter": "rgb(207, 198, 231)",
-  "color-purple--lightest": "rgb(237, 234, 246)",
-  "color-purple--dark": "hsl(347, 41%, 18%)",
-  "color-pink": "hsl(348, 34%, 53%)",
-  "color-pink--light": "hsl(349, 34%, 64%)",
-  "color-pink--lighter": "hsl(349, 34%, 75%)",
-  "color-pink--lightest": "hsl(347, 33%, 95%)",
-  "color-pink--dark": "hsl(348, 40%, 27%)",
-  "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-orange": "hsl(33, 71%, 48%)",
-  "color-orange--light": "hsl(33, 77%, 63%)",
-  "color-orange--lighter": "hsl(32, 78%, 84%)",
-  "color-orange--lightest": "hsl(34, 76%, 92%)",
-  "color-orange--dark": "hsl(33, 71%, 38%)",
-  "color-brown": "hsl(33, 71%, 29%)",
-  "color-brown--light": "hsl(33, 71%, 38%)",
-  "color-brown--lighter": "hsl(51, 17%, 85%)",
-  "color-brown--dark": "hsl(33, 72%, 20%)",
-  "color-navy": "hsl(207, 61%, 34%)",
-  "color-navy--light": "hsl(207, 61%, 45%)",
-  "color-navy--lighter": "hsl(200, 13%, 87%)",
-  "color-navy--lightest": "hsl(195, 12%, 94%)",
-  "color-navy--dark": "hsl(206, 61%, 23%)",
-  "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-white": "rgba(255, 255, 255, 1)",
-  "color-base-white": "rgba(255, 255, 255, 1)",
-  "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-black--rgb": "0, 0, 0",
-  "color-black": "rgba(0, 0, 0, 1)",
-  "color-base-black": "rgba(0, 0, 0, 1)",
-  "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%)",
-  "radius-small": 4,
-  "radius-base": 8,
-  "radius-large": 16,
-  "radius-larger": 24,
-  "radius-circle": 100,
-  "base-unit": 16,
-  "space-minuscule": 1,
-  "space-smallest": 2,
-  "space-smaller": 4,
-  "space-small": 8,
-  "space-base": 16,
-  "space-large": 24,
-  "space-larger": 32,
-  "space-largest": 48,
-  "space-extravagant": 64,
-  "shadow-low": {
-    "shadowColor": "rgba(0, 0, 0, 1)",
-    "shadowOffset": {
-      "width": 0,
-      "height": 1
-    },
-    "shadowOpacity": 0.2,
-    "shadowRadius": 1,
-    "elevation": 2
-  },
-  "shadow-base": {
-    "shadowColor": "rgba(0, 0, 0, 1)",
-    "shadowOffset": {
-      "width": 0,
-      "height": 1
-    },
-    "shadowOpacity": 0.16,
-    "shadowRadius": 4,
-    "elevation": 6
-  },
-  "shadow-high": {
-    "shadowColor": "rgba(0, 0, 0, 1)",
-    "shadowOffset": {
-      "width": 0,
-      "height": 8
-    },
-    "shadowOpacity": 0.125,
-    "shadowRadius": 16,
-    "elevation": 12
-  },
-  "timing-quick": 100,
-  "timing-base": 200,
-  "timing-slow": 300,
-  "timing-slower": 400,
-  "timing-slowest": 500,
-  "timing-loading": 1000,
-  "timing-loading--extended": 2000,
-  "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--fontSize-extravagant": 42,
-  "typography--fontSize-jumbo": 32,
-  "typography--fontSize-largest": 24,
-  "typography--fontSize-larger": 20,
-  "typography--fontSize-large": 18,
-  "typography--fontSize-base": 16,
-  "typography--fontSize-small": 14,
-  "typography--fontSize-smaller": 12,
-  "typography--lineHeight-large": 22,
-  "typography--lineHeight-base": 20,
-  "typography--lineHeight-tight": 18,
-  "typography--lineHeight-tighter": 16,
-  "typography--lineHeight-tightest": 14,
-  "typography--lineHeight-miniscule": 10,
-  "typography--lineHeight-extravagant": 42,
-  "typography--lineHeight-jumbo": 36,
-  "typography--lineHeight-largest": 28,
-  "typography--lineHeight-larger": 24,
-  "typography--fontSize-smallest": 10
-}

package/foundation.scss

@@ -1,319 +0,0 @@
-$border-base: 1px;
-$border-thick: 2px;
-$border-thicker: 4px;
-$border-thickest: 8px;
-$color-interactive: hsl(107, 58%, 33%);
-$color-interactive--hover: hsl(107, 65%, 24%);
-$color-destructive: hsl(6, 64%, 51%);
-$color-destructive--hover: hsl(6, 100%, 35%);
-$color-interactive--subtle: hsl(198, 35%, 21%);
-$color-interactive--subtle--hover: hsl(197, 90%, 12%);
-$color-disabled: hsl(0, 0%, 72%);
-$color-disabled--secondary: hsl(0, 0%, 93%);
-$color-focus: hsl(198, 12%, 57%);
-$color-critical: hsl(6, 64%, 51%);
-$color-critical--surface: hsl(7, 63%, 95%);
-$color-critical--onSurface: hsl(6, 100%, 24%);
-$color-warning: hsl(51, 64%, 49%);
-$color-warning--surface: hsl(52, 64%, 89%);
-$color-warning--onSurface: hsl(51, 64%, 24%);
-$color-success: hsl(107, 58%, 33%);
-$color-success--surface: hsl(109, 28%, 92%);
-$color-success--onSurface: hsl(107, 64%, 16%);
-$color-informative: hsl(207, 79%, 57%);
-$color-informative--surface: hsl(207, 87%, 94%);
-$color-informative--onSurface: hsl(207, 61%, 34%);
-$color-inactive: hsl(198, 25%, 33%);
-$color-inactive--surface: hsl(195, 12%, 94%);
-$color-inactive--onSurface: hsl(197, 90%, 12%);
-$color-heading: hsl(197, 90%, 12%);
-$color-text: hsl(198, 35%, 21%);
-$color-text--secondary: hsl(197, 15%, 45%);
-$color-text--reverse: rgba(255, 255, 255, 1);
-$color-text--reverse--secondary: hsl(200, 13%, 87%);
-$color-icon: hsl(198, 35%, 21%);
-$color-surface: rgba(255, 255, 255, 1);
-$color-surface--hover: hsl(53, 21%, 93%);
-$color-surface--background: hsl(53, 21%, 93%);
-$color-surface--background--hover: hsl(51, 17%, 85%);
-$color-surface--background--subtle: hsl(45, 20%, 97%);
-$color-surface--background--subtle--hover: hsl(51, 17%, 85%);
-$color-surface--reverse: hsl(197, 90%, 12%);
-$color-surface--active: hsl(51, 17%, 85%);
-$color-border: hsl(200, 13%, 87%);
-$color-border--interactive: hsl(200, 13%, 87%);
-$color-border--section: hsl(197, 90%, 12%);
-$color-overlay: rgba(0, 0, 0, 0.32);
-$color-overlay--dimmed: rgba(255, 255, 255, 0.6);
-$color-brand: hsl(79, 85%, 34%);
-$color-brand--highlight: hsl(86, 100%, 46%);
-$color-request: hsl(33, 71%, 38%);
-$color-request--surface: hsl(34, 76%, 92%);
-$color-request--onSurface: hsl(33, 72%, 20%);
-$color-quote: hsl(348, 40%, 41%);
-$color-quote--surface: hsl(347, 33%, 95%);
-$color-quote--onSurface: hsl(348, 40%, 27%);
-$color-job: hsl(107, 58%, 33%);
-$color-job--surface: hsl(109, 28%, 92%);
-$color-job--onSurface: hsl(107, 65%, 24%);
-$color-task: hsl(206, 61%, 23%);
-$color-task--surface: hsl(195, 12%, 94%);
-$color-task--onSurface: hsl(198, 35%, 21%);
-$color-invoice: hsl(207, 61%, 34%);
-$color-invoice--surface: hsl(207, 87%, 94%);
-$color-invoice--onSurface: hsl(206, 61%, 23%);
-$color-visit: hsl(107, 58%, 33%);
-$color-visit--surface: hsl(109, 28%, 92%);
-$color-visit--onSurface: hsl(107, 65%, 24%);
-$color-event: hsl(51, 64%, 49%);
-$color-event--surface: hsl(52, 64%, 89%);
-$color-event--onSurface: hsl(51, 64%, 24%);
-$color-payments: hsl(207, 61%, 34%);
-$color-payments--surface: hsl(207, 87%, 94%);
-$color-payments--onSurface: hsl(207, 87%, 94%);
-$color-client: hsl(48, 3%, 34%);
-$color-blue: hsl(197, 90%, 12%);
-$color-blue--light: hsl(198, 25%, 33%);
-$color-blue--lighter: hsl(198, 12%, 57%);
-$color-blue--lightest: hsl(200, 13%, 87%);
-$color-blue--dark: hsl(198, 96%, 9%);
-$color-taupe: hsl(53, 21%, 93%);
-$color-taupe--light: hsl(45, 20%, 97%);
-$color-taupe--dark: hsl(51, 17%, 85%);
-$color-green: hsl(107, 58%, 33%);
-$color-green--light: hsl(107, 30%, 49%);
-$color-green--lighter: hsl(107, 29%, 65%);
-$color-green--lightest: hsl(109, 28%, 92%);
-$color-green--dark: hsl(107, 64%, 16%);
-$color-lime: hsl(79, 85%, 34%);
-$color-lime--light: hsl(79, 51%, 51%);
-$color-lime--lighter: hsl(79, 51%, 78%);
-$color-lime--lightest: hsl(79, 49%, 90%);
-$color-lime--dark: hsl(79, 85%, 21%);
-$color-yellowGreen: hsl(79, 85%, 34%);
-$color-yellowGreen--light: hsl(79, 51%, 51%);
-$color-yellowGreen--lighter: hsl(79, 51%, 78%);
-$color-yellowGreen--lightest: hsl(79, 49%, 90%);
-$color-yellowGreen--dark: hsl(79, 86%, 27%);
-$color-yellow: hsl(51, 64%, 49%);
-$color-yellow--light: hsl(51, 64%, 77%);
-$color-yellow--lighter: hsl(52, 64%, 89%);
-$color-yellow--lightest: hsl(49, 67%, 95%);
-$color-yellow--dark: hsl(51, 64%, 32%);
-$color-red: hsl(6, 64%, 51%);
-$color-red--light: hsl(6, 64%, 76%);
-$color-red--lighter: hsl(5, 65%, 90%);
-$color-red--lightest: hsl(7, 63%, 95%);
-$color-red--dark: hsl(6, 100%, 24%);
-$color-grey: hsl(0, 0%, 72%);
-$color-grey--light: hsl(0, 0%, 87%);
-$color-grey--lighter: hsl(0, 0%, 93%);
-$color-grey--lightest: hsl(0, 0%, 97%);
-$color-grey--dark: hsl(0, 0%, 47%);
-$color-greyBlue--rgb: 101, 120, 132;
-$color-greyBlue: hsl(197, 15%, 45%);
-$color-greyBlue--light: hsl(198, 12%, 57%);
-$color-greyBlue--lighter: hsl(196, 12%, 70%);
-$color-greyBlue--lightest: hsl(195, 12%, 94%);
-$color-greyBlue--dark: hsl(198, 35%, 21%);
-$color-lightBlue: hsl(207, 79%, 57%);
-$color-lightBlue--light: hsl(207, 89%, 71%);
-$color-lightBlue--lighter: hsl(206, 91%, 87%);
-$color-lightBlue--lightest: hsl(207, 87%, 94%);
-$color-lightBlue--dark: hsl(207, 61%, 45%);
-$color-purple: hsl(348, 40%, 27%);
-$color-purple--light: rgb(172, 155, 214);
-$color-purple--lighter: rgb(207, 198, 231);
-$color-purple--lightest: rgb(237, 234, 246);
-$color-purple--dark: hsl(347, 41%, 18%);
-$color-pink: hsl(348, 34%, 53%);
-$color-pink--light: hsl(349, 34%, 64%);
-$color-pink--lighter: hsl(349, 34%, 75%);
-$color-pink--lightest: hsl(347, 33%, 95%);
-$color-pink--dark: hsl(348, 40%, 27%);
-$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-orange: hsl(33, 71%, 48%);
-$color-orange--light: hsl(33, 77%, 63%);
-$color-orange--lighter: hsl(32, 78%, 84%);
-$color-orange--lightest: hsl(34, 76%, 92%);
-$color-orange--dark: hsl(33, 71%, 38%);
-$color-brown: hsl(33, 71%, 29%);
-$color-brown--light: hsl(33, 71%, 38%);
-$color-brown--lighter: hsl(51, 17%, 85%);
-$color-brown--lightest: undefined;
-$color-brown--dark: hsl(33, 72%, 20%);
-$color-navy: hsl(207, 61%, 34%);
-$color-navy--light: hsl(207, 61%, 45%);
-$color-navy--lighter: hsl(200, 13%, 87%);
-$color-navy--lightest: hsl(195, 12%, 94%);
-$color-navy--dark: hsl(206, 61%, 23%);
-$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-white: rgba(255, 255, 255, 1);
-$color-base-white: rgba(255, 255, 255, 1);
-$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-black--rgb: 0, 0, 0;
-$color-black: rgba(0, 0, 0, 1);
-$color-base-black: rgba(0, 0, 0, 1);
-$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%);
-$radius-small: 4px;
-$radius-base: 8px;
-$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 1px 2px rgba(0, 0, 0, 0.25),
- 0px 0px 2px rgba(0, 0, 0, 0.1);
-$shadow-base: 0px 1px 4px 0px
- rgba(0, 0, 0, 0.1),
- 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
-$shadow-high: 0px 16px 16px 0px
- rgba(0, 0, 0, 0.075),
- 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
-$shadow-focus: 0px 0px 0px 2px rgba(255, 255, 255, 1) 0px 0px 0px 4px hsl(198, 12%, 57%);
-$timing-quick: 100;
-$timing-base: 200;
-$timing-slow: 300;
-$timing-slower: 400;
-$timing-slowest: 500;
-$timing-loading: 1000;
-$timing-loading--extended: 2000;
-$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.4px;
-$typography--fontFamily-normal: "Inter", Helvetica, Arial, sans-serif;
-$typography--fontFamily-display: "Jobber Pro", "Poppins", Helvetica, Arial,    sans-serif;
-$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;
-$typography--lineHeight-large: 1.34;
-$typography--lineHeight-base: 1.25;
-$typography--lineHeight-tight: 1.2;
-$typography--lineHeight-tighter: 1.143;
-$typography--lineHeight-tightest: 1.12;
-$typography--lineHeight-miniscule: 1.08;