@jobber/design 0.57.3 → 0.59.0

package/dist/index.js

@@ -669,7 +669,7 @@ function getPathClassNames(name, color) {
 /* This file is automatically generated by buildIconStyle.js and should not be edited. */
 const iconStyles = {
     "icon": {
-        "fill": "rgb(1, 40, 55)",
+        "fill": "hsl(198, 35%, 21%)",
         "display": "inline-block",
         "verticalAlign": "middle"
     },
@@ -709,79 +709,79 @@ const iconStyles = {
         ]
     },
     "person": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(48, 3%, 34%)"
     },
     "clients": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(48, 3%, 34%)"
     },
     "company": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(48, 3%, 34%)"
     },
     "property": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(48, 3%, 34%)"
     },
     "job": {
-        "fill": "rgb(50, 130, 28)"
+        "fill": "hsl(107, 58%, 33%)"
     },
     "jobOnHold": {
-        "fill": "rgb(50, 130, 28)"
+        "fill": "hsl(107, 58%, 33%)"
     },
     "visit": {
-        "fill": "rgb(153, 194, 71)"
+        "fill": "hsl(79, 85%, 34%)"
     },
     "moveVisits": {
-        "fill": "rgb(153, 194, 71)"
+        "fill": "hsl(79, 85%, 34%)"
     },
     "event": {
-        "fill": "rgb(209, 185, 46)"
+        "fill": "hsl(51, 64%, 49%)"
     },
     "quote": {
-        "fill": "rgb(164, 70, 88)"
+        "fill": "hsl(348, 40%, 41%)"
     },
     "request": {
-        "fill": "rgb(185, 133, 70)"
+        "fill": "hsl(33, 71%, 38%)"
     },
     "task": {
-        "fill": "rgb(75, 106, 150)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "userUnassigned": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "reminder": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "trash": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "checkmark": {
-        "fill": "rgb(50, 130, 28)"
+        "fill": "hsl(107, 58%, 33%)"
     },
     "timer": {
-        "fill": "rgb(60, 162, 224)"
+        "fill": "hsl(207, 79%, 57%)"
     },
     "invoice": {
-        "fill": "rgb(49, 98, 144)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "invoiceLater": {
-        "fill": "rgb(49, 98, 144)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "sendInvoice": {
-        "fill": "rgb(49, 98, 144)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "paidInvoice": {
-        "fill": "rgb(49, 98, 144)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "badInvoice": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "payment": {
-        "fill": "rgb(227, 142, 38)"
+        "fill": "hsl(33, 71%, 48%)"
     },
     "expense": {
-        "fill": "rgb(227, 142, 38)"
+        "fill": "hsl(33, 71%, 48%)"
     },
     "video": {
-        "fill": "rgb(60, 162, 224)"
+        "fill": "hsl(207, 79%, 57%)"
     },
     "excel": {
         "fill": "rgb(31, 115, 71)"
@@ -814,145 +814,145 @@ const iconStyles = {
         "fill": "rgba(255, 255, 255, 1)"
     },
     "grey": {
-        "fill": "rgb(181, 181, 181)"
+        "fill": "hsl(0, 0%, 72%)"
     },
     "greyBlue": {
-        "fill": "rgba(101, 120, 132, 1)"
+        "fill": "hsl(197, 15%, 45%)"
     },
     "greyBlueDark": {
-        "fill": "rgb(66, 78, 86)"
+        "fill": "hsl(198, 35%, 21%)"
     },
     "greyBlueLighter": {
-        "fill": "rgb(193, 201, 206)"
+        "fill": "hsl(196, 12%, 70%)"
     },
     "blue": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(197, 90%, 12%)"
     },
     "lightBlue": {
-        "fill": "rgb(60, 162, 224)"
+        "fill": "hsl(207, 79%, 57%)"
     },
     "green": {
-        "fill": "rgb(50, 130, 28)"
+        "fill": "hsl(107, 58%, 33%)"
     },
     "yellow": {
-        "fill": "rgb(209, 185, 46)"
+        "fill": "hsl(51, 64%, 49%)"
     },
     "red": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "navy": {
-        "fill": "rgb(75, 106, 150)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "orange": {
-        "fill": "rgb(227, 142, 38)"
+        "fill": "hsl(33, 71%, 48%)"
     },
     "interactive": {
-        "fill": "rgb(50, 130, 28)"
+        "fill": "hsl(107, 58%, 33%)"
     },
     "interactiveHover": {
-        "fill": "rgb(14, 78, 26)"
+        "fill": "hsl(107, 65%, 24%)"
     },
     "destructive": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "destructiveHover": {
-        "fill": "rgb(87, 9, 0)"
+        "fill": "hsl(6, 100%, 35%)"
     },
     "interactiveSubtle": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(198, 35%, 21%)"
     },
     "interactiveSubtleHover": {
-        "fill": "rgb(1, 25, 35)"
+        "fill": "hsl(197, 90%, 12%)"
     },
     "disabled": {
-        "fill": "rgb(181, 181, 181)"
+        "fill": "hsl(0, 0%, 72%)"
     },
     "disabledSecondary": {
-        "fill": "rgb(225, 225, 225)"
+        "fill": "hsl(0, 0%, 93%)"
     },
     "focus": {
-        "fill": "rgb(131, 151, 160)"
+        "fill": "hsl(198, 12%, 57%)"
     },
     "critical": {
-        "fill": "rgb(199, 20, 0)"
+        "fill": "hsl(6, 64%, 51%)"
     },
     "criticalSurface": {
-        "fill": "rgb(250, 237, 234)"
+        "fill": "hsl(7, 63%, 95%)"
     },
     "criticalOnSurface": {
-        "fill": "rgb(87, 9, 0)"
+        "fill": "hsl(6, 100%, 24%)"
     },
     "warning": {
-        "fill": "rgb(209, 185, 46)"
+        "fill": "hsl(51, 64%, 49%)"
     },
     "warningSurface": {
-        "fill": "rgb(250, 248, 234)"
+        "fill": "hsl(52, 64%, 89%)"
     },
     "warningOnSurface": {
-        "fill": "rgb(91, 79, 6)"
+        "fill": "hsl(51, 64%, 24%)"
     },
     "success": {
-        "fill": "rgb(50, 130, 28)"
+        "fill": "hsl(107, 58%, 33%)"
     },
     "successSurface": {
-        "fill": "rgb(241, 247, 238)"
+        "fill": "hsl(109, 28%, 92%)"
     },
     "successOnSurface": {
-        "fill": "rgb(14, 78, 26)"
+        "fill": "hsl(107, 64%, 16%)"
     },
     "informative": {
-        "fill": "rgb(60, 162, 224)"
+        "fill": "hsl(207, 79%, 57%)"
     },
     "informativeSurface": {
-        "fill": "rgb(239, 246, 251)"
+        "fill": "hsl(207, 87%, 94%)"
     },
     "informativeOnSurface": {
-        "fill": "rgb(17, 66, 85)"
+        "fill": "hsl(207, 61%, 34%)"
     },
     "inactive": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(198, 25%, 33%)"
     },
     "inactiveSurface": {
-        "fill": "rgb(238, 240, 242)"
+        "fill": "hsl(195, 12%, 94%)"
     },
     "inactiveOnSurface": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(197, 90%, 12%)"
     },
     "heading": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(197, 90%, 12%)"
     },
     "text": {
-        "fill": "rgb(66, 78, 86)"
+        "fill": "hsl(198, 35%, 21%)"
     },
     "textSecondary": {
-        "fill": "rgb(78, 105, 116)"
+        "fill": "hsl(197, 15%, 45%)"
     },
     "textReverse": {
         "fill": "rgba(255, 255, 255, 1)"
     },
     "textReverseSecondary": {
-        "fill": "rgb(193, 201, 206)"
+        "fill": "hsl(200, 13%, 87%)"
     },
     "surface": {
         "fill": "rgba(255, 255, 255, 1)"
     },
     "surfaceHover": {
-        "fill": "rgb(241, 239, 233)"
+        "fill": "hsl(53, 21%, 93%)"
     },
     "surfaceActive": {
-        "fill": "rgb(218, 224, 226)"
+        "fill": "hsl(51, 17%, 85%)"
     },
     "surfaceBackground": {
-        "fill": "rgb(241, 239, 233)"
+        "fill": "hsl(53, 21%, 93%)"
     },
     "surfaceReverse": {
-        "fill": "rgb(1, 40, 55)"
+        "fill": "hsl(197, 90%, 12%)"
     },
     "brand": {
-        "fill": "rgb(124, 175, 14)"
+        "fill": "hsl(79, 85%, 34%)"
     },
     "brandHighlight": {
-        "fill": "rgb(132, 234, 0)"
+        "fill": "hsl(86, 100%, 46%)"
     }
 };
 
@@ -964,136 +964,154 @@ const tokens = {
   "border-thick": 2,
   "border-thicker": 4,
   "border-thickest": 8,
-  "color-interactive": "rgb(50, 130, 28)",
-  "color-interactive--hover": "rgb(14, 78, 26)",
-  "color-destructive": "rgb(199, 20, 0)",
-  "color-destructive--hover": "rgb(87, 9, 0)",
-  "color-interactive--subtle": "rgb(1, 40, 55)",
-  "color-interactive--subtle--hover": "rgb(1, 25, 35)",
-  "color-disabled": "rgb(181, 181, 181)",
-  "color-disabled--secondary": "rgb(225, 225, 225)",
-  "color-focus": "rgb(131, 151, 160)",
-  "color-critical": "rgb(199, 20, 0)",
-  "color-critical--surface": "rgb(250, 237, 234)",
-  "color-critical--onSurface": "rgb(87, 9, 0)",
-  "color-warning": "rgb(209, 185, 46)",
-  "color-warning--surface": "rgb(250, 248, 234)",
-  "color-warning--onSurface": "rgb(91, 79, 6)",
-  "color-success": "rgb(50, 130, 28)",
-  "color-success--surface": "rgb(241, 247, 238)",
-  "color-success--onSurface": "rgb(14, 78, 26)",
-  "color-informative": "rgb(60, 162, 224)",
-  "color-informative--surface": "rgb(239, 246, 251)",
-  "color-informative--onSurface": "rgb(17, 66, 85)",
-  "color-inactive": "rgb(1, 40, 55)",
-  "color-inactive--surface": "rgb(238, 240, 242)",
-  "color-inactive--onSurface": "rgb(1, 40, 55)",
-  "color-heading": "rgb(1, 40, 55)",
-  "color-text": "rgb(66, 78, 86)",
-  "color-text--secondary": "rgb(78, 105, 116)",
+  "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": "rgb(193, 201, 206)",
-  "color-icon": "rgb(1, 40, 55)",
+  "color-text--reverse--secondary": "hsl(200, 13%, 87%)",
+  "color-icon": "hsl(198, 35%, 21%)",
   "color-surface": "rgba(255, 255, 255, 1)",
-  "color-surface--hover": "rgb(241, 239, 233)",
-  "color-surface--active": "rgb(218, 224, 226)",
-  "color-surface--background": "rgb(241, 239, 233)",
-  "color-surface--background--hover": "rgb(231, 229, 217)",
-  "color-surface--reverse": "rgb(1, 40, 55)",
-  "color-border": "rgb(218, 224, 226)",
-  "color-border--section": "rgb(1, 40, 55)",
+  "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(198, 12%, 57%)",
+  "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": "rgb(124, 175, 14)",
-  "color-brand--highlight": "rgb(132, 234, 0)",
-  "color-request": "rgb(185, 133, 70)",
-  "color-quote": "rgb(164, 70, 88)",
-  "color-job": "rgb(50, 130, 28)",
-  "color-visit": "rgb(50, 130, 28)",
-  "color-task": "rgb(75, 106, 150)",
-  "color-event": "rgb(209, 185, 46)",
-  "color-invoice": "rgb(49, 98, 144)",
-  "color-payments": "rgb(49, 98, 144)",
-  "color-client": "rgb(1, 40, 55)",
-  "color-blue": "rgb(1, 40, 55)",
-  "color-blue--light": "rgb(78, 105, 116)",
-  "color-blue--lighter": "rgb(131, 151, 160)",
-  "color-blue--lightest": "rgb(218, 224, 226)",
-  "color-blue--dark": "rgb(1, 25, 35)",
-  "color-taupe": "rgb(241, 239, 233)",
-  "color-taupe--light": "rgb(252, 250, 244)",
-  "color-taupe--dark": "rgb(231, 229, 217)",
-  "color-green": "rgb(50, 130, 28)",
-  "color-green--light": "rgb(104, 162, 87)",
-  "color-green--lighter": "rgb(198, 221, 192)",
-  "color-green--lightest": "rgb(241, 247, 238)",
-  "color-green--dark": "rgb(14, 78, 26)",
-  "color-lime": "rgb(153, 194, 71)",
-  "color-lime--light": "rgb(184, 212, 126)",
-  "color-lime--lighter": "rgb(214, 230, 181)",
-  "color-lime--lightest": "rgb(240, 246, 227)",
-  "color-lime--dark": "rgb(99, 125, 46)",
-  "color-yellowGreen": "rgb(187, 197, 32)",
-  "color-yellowGreen--light": "rgb(207, 214, 99)",
-  "color-yellowGreen--lighter": "rgb(228, 232, 166)",
-  "color-yellowGreen--lightest": "rgb(245, 246, 222)",
-  "color-yellowGreen--dark": "rgb(122, 128, 21)",
-  "color-yellow": "rgb(209, 185, 46)",
-  "color-yellow--light": "rgb(231, 213, 87)",
-  "color-yellow--lighter": "rgb(241, 231, 159)",
-  "color-yellow--lightest": "rgb(250, 248, 234)",
-  "color-yellow--dark": "rgb(91, 79, 6)",
-  "color-red": "rgb(199, 20, 0)",
-  "color-red--light": "rgb(233, 141, 119)",
-  "color-red--lighter": "rgb(255, 206, 194)",
-  "color-red--lightest": "rgb(250, 237, 234)",
-  "color-red--dark": "rgb(87, 9, 0)",
-  "color-grey": "rgb(181, 181, 181)",
-  "color-grey--light": "rgb(203, 203, 203)",
-  "color-grey--lighter": "rgb(225, 225, 225)",
-  "color-grey--lightest": "rgb(244, 244, 244)",
-  "color-grey--dark": "rgb(118, 118, 118)",
+  "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": "rgba(101, 120, 132, 1)",
-  "color-greyBlue--light": "rgb(147, 161, 169)",
-  "color-greyBlue--lighter": "rgb(193, 201, 206)",
-  "color-greyBlue--lightest": "rgb(238, 240, 242)",
-  "color-greyBlue--dark": "rgb(66, 78, 86)",
-  "color-lightBlue": "rgb(60, 162, 224)",
-  "color-lightBlue--light": "rgb(119, 190, 233)",
-  "color-lightBlue--lighter": "rgb(177, 218, 243)",
-  "color-lightBlue--lightest": "rgb(239, 246, 251)",
-  "color-lightBlue--dark": "rgb(17, 66, 85)",
-  "color-purple": "rgb(136, 112, 196)",
+  "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": "rgb(88, 73, 127)",
-  "color-pink": "rgb(179, 96, 150)",
-  "color-pink--light": "rgb(202, 144, 182)",
-  "color-pink--lighter": "rgb(225, 191, 213)",
-  "color-pink--lightest": "rgb(244, 231, 239)",
-  "color-pink--dark": "rgb(116, 62, 98)",
+  "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": "rgb(227, 142, 38)",
-  "color-orange--light": "rgb(247, 182, 102)",
-  "color-orange--lighter": "rgb(250, 213, 167)",
-  "color-orange--lightest": "rgb(253, 239, 222)",
-  "color-orange--dark": "rgb(158, 98, 23)",
-  "color-brown": "rgb(130, 107, 70)",
-  "color-brown--light": "rgb(168, 151, 126)",
-  "color-brown--lighter": "rgb(205, 196, 181)",
-  "color-brown--lightest": "rgb(236, 233, 227)",
-  "color-brown--dark": "rgb(85, 70, 46)",
-  "color-navy": "rgb(75, 106, 150)",
-  "color-navy--light": "rgb(129, 151, 182)",
-  "color-navy--lighter": "rgb(183, 195, 213)",
-  "color-navy--lightest": "rgb(228, 233, 239)",
-  "color-navy--dark": "rgb(49, 69, 98)",
+  "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)",
@@ -1101,8 +1119,110 @@ const tokens = {
   "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,