@jobber/design 0.63.0 → 0.64.0

package/{foundation.d.ts → dist/assets/tokens.web.d.ts}

@@ -1,167 +1,9 @@
-/* tslint:disable */
-/* eslint-disable */
-/* This file is automatically generated and should not be edited. */
-export const tokens: {
+declare const _default: {
+    "base-unit": string;
     "border-base": number;
     "border-thick": number;
     "border-thicker": number;
     "border-thickest": number;
-    "color-interactive": string;
-    "color-interactive--hover": string;
-    "color-destructive": string;
-    "color-destructive--hover": string;
-    "color-interactive--subtle": string;
-    "color-interactive--subtle--hover": string;
-    "color-disabled": string;
-    "color-disabled--secondary": string;
-    "color-focus": string;
-    "color-critical": string;
-    "color-critical--surface": string;
-    "color-critical--onSurface": string;
-    "color-warning": string;
-    "color-warning--surface": string;
-    "color-warning--onSurface": string;
-    "color-success": string;
-    "color-success--surface": string;
-    "color-success--onSurface": string;
-    "color-informative": string;
-    "color-informative--surface": string;
-    "color-informative--onSurface": string;
-    "color-inactive": string;
-    "color-inactive--surface": string;
-    "color-inactive--onSurface": string;
-    "color-heading": string;
-    "color-text": string;
-    "color-text--secondary": string;
-    "color-text--reverse": string;
-    "color-text--reverse--secondary": string;
-    "color-icon": string;
-    "color-surface": string;
-    "color-surface--hover": string;
-    "color-surface--background": string;
-    "color-surface--background--hover": string;
-    "color-surface--background--subtle": string;
-    "color-surface--background--subtle--hover": string;
-    "color-surface--reverse": string;
-    "color-surface--active": string;
-    "color-border": string;
-    "color-border--interactive": string;
-    "color-border--section": string;
-    "color-overlay": string;
-    "color-overlay--dimmed": string;
-    "color-brand": string;
-    "color-brand--highlight": string;
-    "color-request": string;
-    "color-request--surface": string;
-    "color-request--onSurface": string;
-    "color-quote": string;
-    "color-quote--surface": string;
-    "color-quote--onSurface": string;
-    "color-job": string;
-    "color-job--surface": string;
-    "color-job--onSurface": string;
-    "color-task": string;
-    "color-task--surface": string;
-    "color-task--onSurface": string;
-    "color-invoice": string;
-    "color-invoice--surface": string;
-    "color-invoice--onSurface": string;
-    "color-visit": string;
-    "color-visit--surface": string;
-    "color-visit--onSurface": string;
-    "color-event": string;
-    "color-event--surface": string;
-    "color-event--onSurface": string;
-    "color-payments": string;
-    "color-payments--surface": string;
-    "color-payments--onSurface": string;
-    "color-client": string;
-    "color-blue": string;
-    "color-blue--light": string;
-    "color-blue--lighter": string;
-    "color-blue--lightest": string;
-    "color-blue--dark": string;
-    "color-taupe": string;
-    "color-taupe--light": string;
-    "color-taupe--dark": string;
-    "color-green": string;
-    "color-green--light": string;
-    "color-green--lighter": string;
-    "color-green--lightest": string;
-    "color-green--dark": string;
-    "color-lime": string;
-    "color-lime--light": string;
-    "color-lime--lighter": string;
-    "color-lime--lightest": string;
-    "color-lime--dark": string;
-    "color-yellowGreen": string;
-    "color-yellowGreen--light": string;
-    "color-yellowGreen--lighter": string;
-    "color-yellowGreen--lightest": string;
-    "color-yellowGreen--dark": string;
-    "color-yellow": string;
-    "color-yellow--light": string;
-    "color-yellow--lighter": string;
-    "color-yellow--lightest": string;
-    "color-yellow--dark": string;
-    "color-red": string;
-    "color-red--light": string;
-    "color-red--lighter": string;
-    "color-red--lightest": string;
-    "color-red--dark": string;
-    "color-grey": string;
-    "color-grey--light": string;
-    "color-grey--lighter": string;
-    "color-grey--lightest": string;
-    "color-grey--dark": string;
-    "color-greyBlue--rgb": string;
-    "color-greyBlue": string;
-    "color-greyBlue--light": string;
-    "color-greyBlue--lighter": string;
-    "color-greyBlue--lightest": string;
-    "color-greyBlue--dark": string;
-    "color-lightBlue": string;
-    "color-lightBlue--light": string;
-    "color-lightBlue--lighter": string;
-    "color-lightBlue--lightest": string;
-    "color-lightBlue--dark": string;
-    "color-purple": string;
-    "color-purple--light": string;
-    "color-purple--lighter": string;
-    "color-purple--lightest": string;
-    "color-purple--dark": string;
-    "color-pink": string;
-    "color-pink--light": string;
-    "color-pink--lighter": string;
-    "color-pink--lightest": string;
-    "color-pink--dark": string;
-    "color-teal": string;
-    "color-teal--light": string;
-    "color-teal--lighter": string;
-    "color-teal--lightest": string;
-    "color-teal--dark": string;
-    "color-orange": string;
-    "color-orange--light": string;
-    "color-orange--lighter": string;
-    "color-orange--lightest": string;
-    "color-orange--dark": string;
-    "color-brown": string;
-    "color-brown--light": string;
-    "color-brown--lighter": string;
-    "color-brown--dark": string;
-    "color-navy": string;
-    "color-navy--light": string;
-    "color-navy--lighter": string;
-    "color-navy--lightest": string;
-    "color-navy--dark": string;
-    "color-indigo": string;
-    "color-indigo--light": string;
-    "color-indigo--lighter": string;
-    "color-indigo--lightest": string;
-    "color-indigo--dark": string;
-    "color-white--rgb": string;
-    "color-white": string;
-    "color-base-white": string;
     "color-base-grey--100": string;
     "color-base-grey--200": string;
     "color-base-grey--300": string;
@@ -172,9 +14,6 @@ export const tokens: {
     "color-base-grey--800": string;
     "color-base-grey--900": string;
     "color-base-grey--1000": string;
-    "color-black--rgb": string;
-    "color-black": string;
-    "color-base-black": string;
     "color-base-taupe--100": string;
     "color-base-taupe--200": string;
     "color-base-taupe--300": string;
@@ -265,12 +104,171 @@ export const tokens: {
     "color-base-orange--800": string;
     "color-base-orange--900": string;
     "color-base-orange--1000": string;
-    "radius-small": number;
+    "color-indigo": string;
+    "color-indigo--light": string;
+    "color-indigo--lighter": string;
+    "color-indigo--lightest": string;
+    "color-indigo--dark": string;
+    "color-white--rgb": string;
+    "color-black--rgb": string;
+    "color-brand--highlight": string;
+    "color-greyBlue--rgb": string;
+    "color-purple--light": string;
+    "color-purple--lighter": string;
+    "color-purple--lightest": string;
+    "color-teal": string;
+    "color-teal--light": string;
+    "color-teal--lighter": string;
+    "color-teal--lightest": string;
+    "color-teal--dark": string;
+    "color-blue": string;
+    "color-blue--light": string;
+    "color-blue--lighter": string;
+    "color-blue--lightest": string;
+    "color-blue--dark": string;
+    "color-taupe": string;
+    "color-taupe--light": string;
+    "color-taupe--dark": string;
+    "color-green": string;
+    "color-green--light": string;
+    "color-green--lighter": string;
+    "color-green--lightest": string;
+    "color-green--dark": string;
+    "color-lime": string;
+    "color-lime--light": string;
+    "color-lime--lighter": string;
+    "color-lime--lightest": string;
+    "color-lime--dark": string;
+    "color-yellowGreen": string;
+    "color-yellowGreen--light": string;
+    "color-yellowGreen--lighter": string;
+    "color-yellowGreen--lightest": string;
+    "color-yellowGreen--dark": string;
+    "color-yellow": string;
+    "color-yellow--light": string;
+    "color-yellow--lighter": string;
+    "color-yellow--lightest": string;
+    "color-yellow--dark": string;
+    "color-red": string;
+    "color-red--light": string;
+    "color-red--lighter": string;
+    "color-red--lightest": string;
+    "color-red--dark": string;
+    "color-grey": string;
+    "color-grey--light": string;
+    "color-grey--lighter": string;
+    "color-grey--lightest": string;
+    "color-grey--dark": string;
+    "color-overlay": string;
+    "color-overlay--dimmed": string;
+    "color-white": string;
+    "color-black": string;
+    "color-greyBlue": string;
+    "color-greyBlue--light": string;
+    "color-greyBlue--lighter": string;
+    "color-greyBlue--lightest": string;
+    "color-greyBlue--dark": string;
+    "color-lightBlue": string;
+    "color-lightBlue--light": string;
+    "color-lightBlue--lighter": string;
+    "color-lightBlue--lightest": string;
+    "color-lightBlue--dark": string;
+    "color-purple": string;
+    "color-purple--dark": string;
+    "color-pink": string;
+    "color-pink--light": string;
+    "color-pink--lighter": string;
+    "color-pink--lightest": string;
+    "color-pink--dark": string;
+    "color-orange": string;
+    "color-orange--light": string;
+    "color-orange--lighter": string;
+    "color-orange--lightest": string;
+    "color-orange--dark": string;
+    "color-brown": string;
+    "color-brown--light": string;
+    "color-brown--lighter": string;
+    "color-brown--lightest": string;
+    "color-brown--dark": string;
+    "color-navy": string;
+    "color-navy--light": string;
+    "color-navy--lighter": string;
+    "color-navy--lightest": string;
+    "color-navy--dark": string;
+    "color-base-white": string;
+    "color-base-black": string;
+    "color-interactive": string;
+    "color-interactive--hover": string;
+    "color-interactive--subtle": string;
+    "color-interactive--subtle--hover": string;
+    "color-destructive": string;
+    "color-destructive--hover": string;
+    "color-disabled": string;
+    "color-disabled--secondary": string;
+    "color-focus": string;
+    "color-critical": string;
+    "color-critical--surface": string;
+    "color-critical--onSurface": string;
+    "color-warning": string;
+    "color-warning--surface": string;
+    "color-warning--onSurface": string;
+    "color-success": string;
+    "color-success--surface": string;
+    "color-success--onSurface": string;
+    "color-informative": string;
+    "color-informative--surface": string;
+    "color-informative--onSurface": string;
+    "color-inactive": string;
+    "color-inactive--surface": string;
+    "color-inactive--onSurface": string;
+    "color-heading": string;
+    "color-text": string;
+    "color-text--secondary": string;
+    "color-text--reverse": string;
+    "color-text--reverse--secondary": string;
+    "color-icon": string;
+    "color-surface": string;
+    "color-surface--hover": string;
+    "color-surface--reverse": string;
+    "color-surface--active": string;
+    "color-surface--background": string;
+    "color-surface--background--hover": string;
+    "color-surface--background--subtle": string;
+    "color-surface--background--subtle--hover": string;
+    "color-border": string;
+    "color-border--interactive": string;
+    "color-border--section": string;
+    "color-brand": string;
+    "color-request": string;
+    "color-request--surface": string;
+    "color-request--onSurface": string;
+    "color-quote": string;
+    "color-quote--surface": string;
+    "color-quote--onSurface": string;
+    "color-job": string;
+    "color-job--surface": string;
+    "color-job--onSurface": string;
+    "color-task": string;
+    "color-task--surface": string;
+    "color-task--onSurface": string;
+    "color-invoice": string;
+    "color-invoice--surface": string;
+    "color-invoice--onSurface": string;
+    "color-visit": string;
+    "color-visit--surface": string;
+    "color-visit--onSurface": string;
+    "color-event": string;
+    "color-event--surface": string;
+    "color-event--onSurface": string;
+    "color-payments": string;
+    "color-payments--surface": string;
+    "color-payments--onSurface": string;
+    "color-client": string;
     "radius-base": number;
+    "radius-small": number;
     "radius-large": number;
     "radius-larger": number;
     "radius-circle": number;
-    "base-unit": number;
     "space-minuscule": number;
     "space-smallest": number;
     "space-smaller": number;
@@ -280,6 +278,10 @@ export const tokens: {
     "space-larger": number;
     "space-largest": number;
     "space-extravagant": number;
+    "shadow-low": string;
+    "shadow-base": string;
+    "shadow-high": string;
+    "shadow-focus": string;
     "timing-quick": number;
     "timing-base": number;
     "timing-slow": number;
@@ -300,6 +302,16 @@ export const tokens: {
     "typography--letterSpacing-loose": number;
     "typography--fontFamily-normal": string;
     "typography--fontFamily-display": string;
+    "typography--lineHeight-large": number;
+    "typography--lineHeight-larger": number;
+    "typography--lineHeight-largest": number;
+    "typography--lineHeight-jumbo": number;
+    "typography--lineHeight-extravagant": number;
+    "typography--lineHeight-base": number;
+    "typography--lineHeight-tight": number;
+    "typography--lineHeight-tighter": number;
+    "typography--lineHeight-tightest": number;
+    "typography--lineHeight-minuscule": number;
     "typography--fontSize-extravagant": number;
     "typography--fontSize-jumbo": number;
     "typography--fontSize-largest": number;
@@ -308,10 +320,5 @@ export const tokens: {
     "typography--fontSize-base": number;
     "typography--fontSize-small": number;
     "typography--fontSize-smaller": number;
-    "typography--lineHeight-large": number;
-    "typography--lineHeight-base": number;
-    "typography--lineHeight-tight": number;
-    "typography--lineHeight-tighter": number;
-    "typography--lineHeight-tightest": number;
-    "typography--lineHeight-miniscule": number;
 };
+export default _default;

package/dist/color.css

@@ -0,0 +1,79 @@
+:root {
+  --base-unit: 16px;
+  --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-overlay: rgba(0, 0, 0, 0.32);
+  --color-overlay--dimmed: rgba(255, 255, 255, 0.6);
+  --color-white: rgba(255, 255, 255, 1);
+  --color-black: rgba(0, 0, 0, 1);
+  --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--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-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: hsl(53, 21%, 93%);
+  --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-base-white: rgba(255, 255, 255, 1);
+  --color-base-black: rgba(0, 0, 0, 1);
+}

package/dist/colors.cjs

@@ -0,0 +1,79 @@
+module.exports ={
+  "base-unit": "16px",
+  "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-overlay": "rgba(0, 0, 0, 0.32)",
+  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
+  "color-white": "rgba(255, 255, 255, 1)",
+  "color-black": "rgba(0, 0, 0, 1)",
+  "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--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-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": "hsl(53, 21%, 93%)",
+  "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-base-white": "rgba(255, 255, 255, 1)",
+  "color-base-black": "rgba(0, 0, 0, 1)",
+};

package/dist/colors.mjs

@@ -0,0 +1,79 @@
+export default {
+  "base-unit": "16px",
+  "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-overlay": "rgba(0, 0, 0, 0.32)",
+  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
+  "color-white": "rgba(255, 255, 255, 1)",
+  "color-black": "rgba(0, 0, 0, 1)",
+  "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--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-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": "hsl(53, 21%, 93%)",
+  "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-base-white": "rgba(255, 255, 255, 1)",
+  "color-base-black": "rgba(0, 0, 0, 1)",
+};