@new-ui/colors 0.1.0 → 0.3.0

package/README.md

@@ -1 +1,58 @@
 ![](help/dark.png)
+
+## Install
+Install New UI Colors from your terminal via npm. Current version is 0.3.0
+
+```
+npm i @new-ui/colors
+```
+
+To get started quickly, you can use the CDN files.
+
+Light themes: 
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/light.css">
+```
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/light-warm.css">
+```
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/light-cold.css">
+```
+
+Dark themes [WIP]: 
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/dark.css">
+```
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/dark-warm.css">
+```
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/dark-cold.css">
+```
+
+## Build
+
+To build themes from tokens.
+
+```
+npm install
+```
+
+Light themes: 
+```
+npm run build:tokens -- --theme=light
+npm run build:tokens -- --theme=light-warm
+npm run build:tokens -- --theme=light-cold
+```
+
+Dark themes: 
+```
+npm run build:tokens -- --theme=dark
+npm run build:tokens -- --theme=dark-warm
+npm run build:tokens -- --theme=dark-cold
+```
+
+## Get a Figma copy
+
+[New UI Colors - Light](https://www.figma.com/community/file/1179503548902179413)

package/dist/themes/dark-cold.css

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 11 Dec 2022 21:08:08 GMT
+ */
+
+:root {
+  --white: hsl(0, 0%, 100%);
+  --black: hsl(0, 0%, 0%);
+  --cold10: hsl(206, 16%, 8%);
+  --cold9: hsl(200, 12%, 15%);
+  --cold8: hsl(207, 10%, 23%);
+  --cold7: hsl(207, 7%, 32%);
+  --cold6: hsl(210, 6%, 44%);
+  --cold5: hsl(216, 7%, 56%);
+  --cold4: hsl(210, 8%, 66%);
+  --cold3: hsl(210, 11%, 78%);
+  --cold2: hsl(213, 15%, 88%);
+  --cold1: hsl(220, 30%, 96%);
+  --warm10: hsl(0, 7%, 8%);
+  --warm9: hsl(0, 3%, 15%);
+  --warm8: hsl(0, 3%, 23%);
+  --warm7: hsl(0, 3%, 33%);
+  --warm6: hsl(0, 2%, 44%);
+  --warm5: hsl(0, 2%, 55%);
+  --warm4: hsl(0, 3%, 67%);
+  --warm3: hsl(10, 5%, 78%);
+  --warm2: hsl(10, 10%, 89%);
+  --warm1: hsl(12, 24%, 96%);
+  --grey10: hsl(0, 0%, 9%);
+  --grey9: hsl(0, 0%, 15%);
+  --grey8: hsl(0, 0%, 22%);
+  --grey7: hsl(0, 0%, 32%);
+  --grey6: hsl(0, 0%, 44%);
+  --grey5: hsl(0, 0%, 55%);
+  --grey4: hsl(0, 0%, 66%);
+  --grey3: hsl(0, 0%, 78%);
+  --grey2: hsl(0, 0%, 88%);
+  --grey1: hsl(0, 0%, 96%);
+  --brown8: hsl(35, 27%, 14%);
+  --brown7: hsl(34, 26%, 26%);
+  --brown6: hsl(33, 26%, 38%);
+  --brown5: hsl(34, 27%, 50%);
+  --brown4: hsl(34, 26%, 54%);
+  --brown3: hsl(34, 26%, 74%);
+  --brown2: hsl(35, 27%, 86%);
+  --brown1: hsl(33, 29%, 94%);
+  --pink8: hsl(349, 69%, 16%);
+  --pink7: hsl(349, 71%, 31%);
+  --pink6: hsl(348, 70%, 45%);
+  --pink5: hsl(349, 100%, 59%);
+  --pink4: hsl(349, 100%, 62%);
+  --pink3: hsl(349, 100%, 78%);
+  --pink2: hsl(349, 100%, 89%);
+  --pink1: hsl(348, 100%, 95%);
+  --purple8: hsl(280, 46%, 17%);
+  --purple7: hsl(279, 46%, 31%);
+  --purple6: hsl(280, 46%, 45%);
+  --purple5: hsl(280, 68%, 60%);
+  --purple4: hsl(280, 68%, 63%);
+  --purple3: hsl(279, 68%, 79%);
+  --purple2: hsl(280, 68%, 89%);
+  --purple1: hsl(279, 68%, 95%);
+  --indigo8: hsl(242, 43%, 16%);
+  --indigo7: hsl(241, 43%, 31%);
+  --indigo6: hsl(241, 43%, 45%);
+  --indigo5: hsl(241, 61%, 59%);
+  --indigo4: hsl(241, 61%, 62%);
+  --indigo3: hsl(241, 61%, 79%);
+  --indigo2: hsl(242, 62%, 89%);
+  --indigo1: hsl(244, 62%, 95%);
+  --blue8: hsl(211, 100%, 14%);
+  --blue7: hsl(211, 100%, 26%);
+  --blue6: hsl(211, 100%, 38%);
+  --blue5: hsl(211, 100%, 50%);
+  --blue4: hsl(211, 100%, 54%);
+  --blue3: hsl(211, 100%, 74%);
+  --blue2: hsl(211, 100%, 86%);
+  --blue1: hsl(211, 100%, 94%);
+  --cyan8: hsl(199, 64%, 15%);
+  --cyan7: hsl(199, 64%, 29%);
+  --cyan6: hsl(199, 64%, 42%);
+  --cyan5: hsl(199, 78%, 55%);
+  --cyan4: hsl(199, 78%, 58%);
+  --cyan3: hsl(199, 78%, 76%);
+  --cyan2: hsl(199, 78%, 87%);
+  --cyan1: hsl(199, 79%, 95%);
+  --teal8: hsl(189, 62%, 13%);
+  --teal7: hsl(189, 61%, 25%);
+  --teal6: hsl(189, 61%, 37%);
+  --teal5: hsl(189, 61%, 48%);
+  --teal4: hsl(189, 57%, 52%);
+  --teal3: hsl(189, 58%, 73%);
+  --teal2: hsl(189, 57%, 85%);
+  --teal1: hsl(190, 56%, 94%);
+  --mint8: hsl(178, 100%, 11%);
+  --mint7: hsl(177, 100%, 20%);
+  --mint6: hsl(178, 100%, 30%);
+  --mint5: hsl(177, 100%, 39%);
+  --mint4: hsl(177, 82%, 44%);
+  --mint3: hsl(177, 64%, 68%);
+  --mint2: hsl(178, 63%, 83%);
+  --mint1: hsl(178, 63%, 93%);
+  --green8: hsl(136, 59%, 14%);
+  --green7: hsl(135, 59%, 26%);
+  --green6: hsl(135, 58%, 37%);
+  --green5: hsl(135, 59%, 49%);
+  --green4: hsl(135, 56%, 53%);
+  --green3: hsl(135, 57%, 74%);
+  --green2: hsl(136, 56%, 86%);
+  --green1: hsl(137, 56%, 94%);
+  --yellow8: hsl(48, 100%, 14%);
+  --yellow7: hsl(48, 100%, 26%);
+  --yellow6: hsl(48, 100%, 38%);
+  --yellow5: hsl(48, 100%, 50%);
+  --yellow4: hsl(48, 100%, 54%);
+  --yellow3: hsl(48, 100%, 74%);
+  --yellow2: hsl(48, 100%, 86%);
+  --yellow1: hsl(48, 100%, 94%);
+  --orange8: hsl(35, 100%, 14%);
+  --orange7: hsl(35, 100%, 26%);
+  --orange6: hsl(35, 100%, 38%);
+  --orange5: hsl(35, 100%, 50%);
+  --orange4: hsl(35, 100%, 54%);
+  --orange3: hsl(35, 100%, 74%);
+  --orange2: hsl(35, 100%, 86%);
+  --orange1: hsl(35, 100%, 94%);
+  --red8: hsl(3, 69%, 16%);
+  --red7: hsl(3, 68%, 31%);
+  --red6: hsl(3, 68%, 45%);
+  --red5: hsl(3, 100%, 59%);
+  --red4: hsl(3, 100%, 63%);
+  --red3: hsl(3, 100%, 79%);
+  --red2: hsl(3, 100%, 89%);
+  --red1: hsl(2, 100%, 95%);
+  --background: var(--black);
+}

package/dist/themes/dark-warm.css

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 11 Dec 2022 21:08:03 GMT
+ */
+
+:root {
+  --white: hsl(0, 0%, 100%);
+  --black: hsl(0, 0%, 0%);
+  --cold10: hsl(206, 16%, 8%);
+  --cold9: hsl(200, 12%, 15%);
+  --cold8: hsl(207, 10%, 23%);
+  --cold7: hsl(207, 7%, 32%);
+  --cold6: hsl(210, 6%, 44%);
+  --cold5: hsl(216, 7%, 56%);
+  --cold4: hsl(210, 8%, 66%);
+  --cold3: hsl(210, 11%, 78%);
+  --cold2: hsl(213, 15%, 88%);
+  --cold1: hsl(220, 30%, 96%);
+  --warm10: hsl(0, 7%, 8%);
+  --warm9: hsl(0, 3%, 15%);
+  --warm8: hsl(0, 3%, 23%);
+  --warm7: hsl(0, 3%, 33%);
+  --warm6: hsl(0, 2%, 44%);
+  --warm5: hsl(0, 2%, 55%);
+  --warm4: hsl(0, 3%, 67%);
+  --warm3: hsl(10, 5%, 78%);
+  --warm2: hsl(10, 10%, 89%);
+  --warm1: hsl(12, 24%, 96%);
+  --grey10: hsl(0, 0%, 9%);
+  --grey9: hsl(0, 0%, 15%);
+  --grey8: hsl(0, 0%, 22%);
+  --grey7: hsl(0, 0%, 32%);
+  --grey6: hsl(0, 0%, 44%);
+  --grey5: hsl(0, 0%, 55%);
+  --grey4: hsl(0, 0%, 66%);
+  --grey3: hsl(0, 0%, 78%);
+  --grey2: hsl(0, 0%, 88%);
+  --grey1: hsl(0, 0%, 96%);
+  --brown8: hsl(35, 27%, 14%);
+  --brown7: hsl(34, 26%, 26%);
+  --brown6: hsl(33, 26%, 38%);
+  --brown5: hsl(34, 27%, 50%);
+  --brown4: hsl(34, 26%, 54%);
+  --brown3: hsl(34, 26%, 74%);
+  --brown2: hsl(35, 27%, 86%);
+  --brown1: hsl(33, 29%, 94%);
+  --pink8: hsl(349, 69%, 16%);
+  --pink7: hsl(349, 71%, 31%);
+  --pink6: hsl(348, 70%, 45%);
+  --pink5: hsl(349, 100%, 59%);
+  --pink4: hsl(349, 100%, 62%);
+  --pink3: hsl(349, 100%, 78%);
+  --pink2: hsl(349, 100%, 89%);
+  --pink1: hsl(348, 100%, 95%);
+  --purple8: hsl(280, 46%, 17%);
+  --purple7: hsl(279, 46%, 31%);
+  --purple6: hsl(280, 46%, 45%);
+  --purple5: hsl(280, 68%, 60%);
+  --purple4: hsl(280, 68%, 63%);
+  --purple3: hsl(279, 68%, 79%);
+  --purple2: hsl(280, 68%, 89%);
+  --purple1: hsl(279, 68%, 95%);
+  --indigo8: hsl(242, 43%, 16%);
+  --indigo7: hsl(241, 43%, 31%);
+  --indigo6: hsl(241, 43%, 45%);
+  --indigo5: hsl(241, 61%, 59%);
+  --indigo4: hsl(241, 61%, 62%);
+  --indigo3: hsl(241, 61%, 79%);
+  --indigo2: hsl(242, 62%, 89%);
+  --indigo1: hsl(244, 62%, 95%);
+  --blue8: hsl(211, 100%, 14%);
+  --blue7: hsl(211, 100%, 26%);
+  --blue6: hsl(211, 100%, 38%);
+  --blue5: hsl(211, 100%, 50%);
+  --blue4: hsl(211, 100%, 54%);
+  --blue3: hsl(211, 100%, 74%);
+  --blue2: hsl(211, 100%, 86%);
+  --blue1: hsl(211, 100%, 94%);
+  --cyan8: hsl(199, 64%, 15%);
+  --cyan7: hsl(199, 64%, 29%);
+  --cyan6: hsl(199, 64%, 42%);
+  --cyan5: hsl(199, 78%, 55%);
+  --cyan4: hsl(199, 78%, 58%);
+  --cyan3: hsl(199, 78%, 76%);
+  --cyan2: hsl(199, 78%, 87%);
+  --cyan1: hsl(199, 79%, 95%);
+  --teal8: hsl(189, 62%, 13%);
+  --teal7: hsl(189, 61%, 25%);
+  --teal6: hsl(189, 61%, 37%);
+  --teal5: hsl(189, 61%, 48%);
+  --teal4: hsl(189, 57%, 52%);
+  --teal3: hsl(189, 58%, 73%);
+  --teal2: hsl(189, 57%, 85%);
+  --teal1: hsl(190, 56%, 94%);
+  --mint8: hsl(178, 100%, 11%);
+  --mint7: hsl(177, 100%, 20%);
+  --mint6: hsl(178, 100%, 30%);
+  --mint5: hsl(177, 100%, 39%);
+  --mint4: hsl(177, 82%, 44%);
+  --mint3: hsl(177, 64%, 68%);
+  --mint2: hsl(178, 63%, 83%);
+  --mint1: hsl(178, 63%, 93%);
+  --green8: hsl(136, 59%, 14%);
+  --green7: hsl(135, 59%, 26%);
+  --green6: hsl(135, 58%, 37%);
+  --green5: hsl(135, 59%, 49%);
+  --green4: hsl(135, 56%, 53%);
+  --green3: hsl(135, 57%, 74%);
+  --green2: hsl(136, 56%, 86%);
+  --green1: hsl(137, 56%, 94%);
+  --yellow8: hsl(48, 100%, 14%);
+  --yellow7: hsl(48, 100%, 26%);
+  --yellow6: hsl(48, 100%, 38%);
+  --yellow5: hsl(48, 100%, 50%);
+  --yellow4: hsl(48, 100%, 54%);
+  --yellow3: hsl(48, 100%, 74%);
+  --yellow2: hsl(48, 100%, 86%);
+  --yellow1: hsl(48, 100%, 94%);
+  --orange8: hsl(35, 100%, 14%);
+  --orange7: hsl(35, 100%, 26%);
+  --orange6: hsl(35, 100%, 38%);
+  --orange5: hsl(35, 100%, 50%);
+  --orange4: hsl(35, 100%, 54%);
+  --orange3: hsl(35, 100%, 74%);
+  --orange2: hsl(35, 100%, 86%);
+  --orange1: hsl(35, 100%, 94%);
+  --red8: hsl(3, 69%, 16%);
+  --red7: hsl(3, 68%, 31%);
+  --red6: hsl(3, 68%, 45%);
+  --red5: hsl(3, 100%, 59%);
+  --red4: hsl(3, 100%, 63%);
+  --red3: hsl(3, 100%, 79%);
+  --red2: hsl(3, 100%, 89%);
+  --red1: hsl(2, 100%, 95%);
+  --background: var(--black);
+}

package/dist/themes/dark.css

@@ -1,136 +1,136 @@
 /**
  * Do not edit directly
- * Generated on Fri, 02 Dec 2022 19:43:17 GMT
+ * Generated on Sun, 11 Dec 2022 21:08:15 GMT
  */
 
 :root {
   --white: hsl(0, 0%, 100%);
   --black: hsl(0, 0%, 0%);
   --cold10: hsl(206, 16%, 8%);
-  --cold09: hsl(200, 12%, 15%);
-  --cold08: hsl(207, 10%, 23%);
-  --cold07: hsl(207, 7%, 32%);
-  --cold06: hsl(210, 6%, 44%);
-  --cold05: hsl(216, 7%, 56%);
-  --cold04: hsl(210, 8%, 66%);
-  --cold03: hsl(210, 11%, 78%);
-  --cold02: hsl(213, 15%, 88%);
-  --cold01: hsl(220, 30%, 96%);
+  --cold9: hsl(200, 12%, 15%);
+  --cold8: hsl(207, 10%, 23%);
+  --cold7: hsl(207, 7%, 32%);
+  --cold6: hsl(210, 6%, 44%);
+  --cold5: hsl(216, 7%, 56%);
+  --cold4: hsl(210, 8%, 66%);
+  --cold3: hsl(210, 11%, 78%);
+  --cold2: hsl(213, 15%, 88%);
+  --cold1: hsl(220, 30%, 96%);
   --warm10: hsl(0, 7%, 8%);
-  --warm09: hsl(0, 3%, 15%);
-  --warm08: hsl(0, 3%, 23%);
-  --warm07: hsl(0, 3%, 33%);
-  --warm06: hsl(0, 2%, 44%);
-  --warm05: hsl(0, 2%, 55%);
-  --warm04: hsl(0, 3%, 67%);
-  --warm03: hsl(10, 5%, 78%);
-  --warm02: hsl(10, 10%, 89%);
-  --warm01: hsl(12, 24%, 96%);
+  --warm9: hsl(0, 3%, 15%);
+  --warm8: hsl(0, 3%, 23%);
+  --warm7: hsl(0, 3%, 33%);
+  --warm6: hsl(0, 2%, 44%);
+  --warm5: hsl(0, 2%, 55%);
+  --warm4: hsl(0, 3%, 67%);
+  --warm3: hsl(10, 5%, 78%);
+  --warm2: hsl(10, 10%, 89%);
+  --warm1: hsl(12, 24%, 96%);
   --grey10: hsl(0, 0%, 9%);
-  --grey09: hsl(0, 0%, 15%);
-  --grey08: hsl(0, 0%, 22%);
-  --grey07: hsl(0, 0%, 32%);
-  --grey06: hsl(0, 0%, 44%);
-  --grey05: hsl(0, 0%, 55%);
-  --grey04: hsl(0, 0%, 66%);
-  --grey03: hsl(0, 0%, 78%);
-  --grey02: hsl(0, 0%, 88%);
-  --grey01: hsl(0, 0%, 96%);
-  --brown08: hsl(35, 27%, 14%);
-  --brown07: hsl(34, 26%, 26%);
-  --brown06: hsl(33, 26%, 38%);
-  --brown05: hsl(34, 27%, 50%);
-  --brown04: hsl(34, 26%, 54%);
-  --brown03: hsl(34, 26%, 74%);
-  --brown02: hsl(35, 27%, 86%);
-  --brown01: hsl(33, 29%, 94%);
-  --pink08: hsl(349, 69%, 16%);
-  --pink07: hsl(349, 71%, 31%);
-  --pink06: hsl(348, 70%, 45%);
-  --pink05: hsl(349, 100%, 59%);
-  --pink04: hsl(349, 100%, 62%);
-  --pink03: hsl(349, 100%, 78%);
-  --pink02: hsl(349, 100%, 89%);
-  --pink01: hsl(348, 100%, 95%);
-  --purple08: hsl(280, 46%, 17%);
-  --purple07: hsl(279, 46%, 31%);
-  --purple06: hsl(280, 46%, 45%);
-  --purple05: hsl(280, 68%, 60%);
-  --purple04: hsl(280, 68%, 63%);
-  --purple03: hsl(279, 68%, 79%);
-  --purple02: hsl(280, 68%, 89%);
-  --purple01: hsl(279, 68%, 95%);
-  --indigo08: hsl(242, 43%, 16%);
-  --indigo07: hsl(241, 43%, 31%);
-  --indigo06: hsl(241, 43%, 45%);
-  --indigo05: hsl(241, 61%, 59%);
-  --indigo04: hsl(241, 61%, 62%);
-  --indigo03: hsl(241, 61%, 79%);
-  --indigo02: hsl(242, 62%, 89%);
-  --indigo01: hsl(244, 62%, 95%);
-  --blue08: hsl(211, 100%, 14%);
-  --blue07: hsl(211, 100%, 26%);
-  --blue06: hsl(211, 100%, 38%);
-  --blue05: hsl(211, 100%, 50%);
-  --blue04: hsl(211, 100%, 54%);
-  --blue03: hsl(211, 100%, 74%);
-  --blue02: hsl(211, 100%, 86%);
-  --blue01: hsl(211, 100%, 94%);
-  --cyan08: hsl(199, 64%, 15%);
-  --cyan07: hsl(199, 64%, 29%);
-  --cyan06: hsl(199, 64%, 42%);
-  --cyan05: hsl(199, 78%, 55%);
-  --cyan04: hsl(199, 78%, 58%);
-  --cyan03: hsl(199, 78%, 76%);
-  --cyan02: hsl(199, 78%, 87%);
-  --cyan01: hsl(199, 79%, 95%);
-  --teal08: hsl(189, 62%, 13%);
-  --teal07: hsl(189, 61%, 25%);
-  --teal06: hsl(189, 61%, 37%);
-  --teal05: hsl(189, 61%, 48%);
-  --teal04: hsl(189, 57%, 52%);
-  --teal03: hsl(189, 58%, 73%);
-  --teal02: hsl(189, 57%, 85%);
-  --teal01: hsl(190, 56%, 94%);
-  --mint08: hsl(178, 100%, 11%);
-  --mint07: hsl(177, 100%, 20%);
-  --mint06: hsl(178, 100%, 30%);
-  --mint05: hsl(177, 100%, 39%);
-  --mint04: hsl(177, 82%, 44%);
-  --mint03: hsl(177, 64%, 68%);
-  --mint02: hsl(178, 63%, 83%);
-  --mint01: hsl(178, 63%, 93%);
-  --green08: hsl(136, 59%, 14%);
-  --green07: hsl(135, 59%, 26%);
-  --green06: hsl(135, 58%, 37%);
-  --green05: hsl(135, 59%, 49%);
-  --green04: hsl(135, 56%, 53%);
-  --green03: hsl(135, 57%, 74%);
-  --green02: hsl(136, 56%, 86%);
-  --green01: hsl(137, 56%, 94%);
-  --yellow08: hsl(48, 100%, 14%);
-  --yellow07: hsl(48, 100%, 26%);
-  --yellow06: hsl(48, 100%, 38%);
-  --yellow05: hsl(48, 100%, 50%);
-  --yellow04: hsl(48, 100%, 54%);
-  --yellow03: hsl(48, 100%, 74%);
-  --yellow02: hsl(48, 100%, 86%);
-  --yellow01: hsl(48, 100%, 94%);
-  --orange08: hsl(35, 100%, 14%);
-  --orange07: hsl(35, 100%, 26%);
-  --orange06: hsl(35, 100%, 38%);
-  --orange05: hsl(35, 100%, 50%);
-  --orange04: hsl(35, 100%, 54%);
-  --orange03: hsl(35, 100%, 74%);
-  --orange02: hsl(35, 100%, 86%);
-  --orange01: hsl(35, 100%, 94%);
-  --red08: hsl(2, 68%, 7%);
-  --red07: hsl(3, 69%, 16%);
-  --red06: hsl(3, 68%, 31%);
-  --red05: hsl(3, 100%, 59%);
-  --red04: hsl(3, 100%, 63%);
-  --red03: hsl(3, 100%, 79%);
-  --red02: hsl(3, 100%, 89%);
-  --red01: hsl(2, 100%, 95%);
-  --background: var(--grey10);
+  --grey9: hsl(0, 0%, 15%);
+  --grey8: hsl(0, 0%, 22%);
+  --grey7: hsl(0, 0%, 32%);
+  --grey6: hsl(0, 0%, 44%);
+  --grey5: hsl(0, 0%, 55%);
+  --grey4: hsl(0, 0%, 66%);
+  --grey3: hsl(0, 0%, 78%);
+  --grey2: hsl(0, 0%, 88%);
+  --grey1: hsl(0, 0%, 96%);
+  --brown8: hsl(35, 27%, 14%);
+  --brown7: hsl(34, 26%, 26%);
+  --brown6: hsl(33, 26%, 38%);
+  --brown5: hsl(34, 27%, 50%);
+  --brown4: hsl(34, 26%, 54%);
+  --brown3: hsl(34, 26%, 74%);
+  --brown2: hsl(35, 27%, 86%);
+  --brown1: hsl(33, 29%, 94%);
+  --pink8: hsl(349, 69%, 16%);
+  --pink7: hsl(349, 71%, 31%);
+  --pink6: hsl(348, 70%, 45%);
+  --pink5: hsl(349, 100%, 59%);
+  --pink4: hsl(349, 100%, 62%);
+  --pink3: hsl(349, 100%, 78%);
+  --pink2: hsl(349, 100%, 89%);
+  --pink1: hsl(348, 100%, 95%);
+  --purple8: hsl(280, 46%, 17%);
+  --purple7: hsl(279, 46%, 31%);
+  --purple6: hsl(280, 46%, 45%);
+  --purple5: hsl(280, 68%, 60%);
+  --purple4: hsl(280, 68%, 63%);
+  --purple3: hsl(279, 68%, 79%);
+  --purple2: hsl(280, 68%, 89%);
+  --purple1: hsl(279, 68%, 95%);
+  --indigo8: hsl(242, 43%, 16%);
+  --indigo7: hsl(241, 43%, 31%);
+  --indigo6: hsl(241, 43%, 45%);
+  --indigo5: hsl(241, 61%, 59%);
+  --indigo4: hsl(241, 61%, 62%);
+  --indigo3: hsl(241, 61%, 79%);
+  --indigo2: hsl(242, 62%, 89%);
+  --indigo1: hsl(244, 62%, 95%);
+  --blue8: hsl(211, 100%, 14%);
+  --blue7: hsl(211, 100%, 26%);
+  --blue6: hsl(211, 100%, 38%);
+  --blue5: hsl(211, 100%, 50%);
+  --blue4: hsl(211, 100%, 54%);
+  --blue3: hsl(211, 100%, 74%);
+  --blue2: hsl(211, 100%, 86%);
+  --blue1: hsl(211, 100%, 94%);
+  --cyan8: hsl(199, 64%, 15%);
+  --cyan7: hsl(199, 64%, 29%);
+  --cyan6: hsl(199, 64%, 42%);
+  --cyan5: hsl(199, 78%, 55%);
+  --cyan4: hsl(199, 78%, 58%);
+  --cyan3: hsl(199, 78%, 76%);
+  --cyan2: hsl(199, 78%, 87%);
+  --cyan1: hsl(199, 79%, 95%);
+  --teal8: hsl(189, 62%, 13%);
+  --teal7: hsl(189, 61%, 25%);
+  --teal6: hsl(189, 61%, 37%);
+  --teal5: hsl(189, 61%, 48%);
+  --teal4: hsl(189, 57%, 52%);
+  --teal3: hsl(189, 58%, 73%);
+  --teal2: hsl(189, 57%, 85%);
+  --teal1: hsl(190, 56%, 94%);
+  --mint8: hsl(178, 100%, 11%);
+  --mint7: hsl(177, 100%, 20%);
+  --mint6: hsl(178, 100%, 30%);
+  --mint5: hsl(177, 100%, 39%);
+  --mint4: hsl(177, 82%, 44%);
+  --mint3: hsl(177, 64%, 68%);
+  --mint2: hsl(178, 63%, 83%);
+  --mint1: hsl(178, 63%, 93%);
+  --green8: hsl(136, 59%, 14%);
+  --green7: hsl(135, 59%, 26%);
+  --green6: hsl(135, 58%, 37%);
+  --green5: hsl(135, 59%, 49%);
+  --green4: hsl(135, 56%, 53%);
+  --green3: hsl(135, 57%, 74%);
+  --green2: hsl(136, 56%, 86%);
+  --green1: hsl(137, 56%, 94%);
+  --yellow8: hsl(48, 100%, 14%);
+  --yellow7: hsl(48, 100%, 26%);
+  --yellow6: hsl(48, 100%, 38%);
+  --yellow5: hsl(48, 100%, 50%);
+  --yellow4: hsl(48, 100%, 54%);
+  --yellow3: hsl(48, 100%, 74%);
+  --yellow2: hsl(48, 100%, 86%);
+  --yellow1: hsl(48, 100%, 94%);
+  --orange8: hsl(35, 100%, 14%);
+  --orange7: hsl(35, 100%, 26%);
+  --orange6: hsl(35, 100%, 38%);
+  --orange5: hsl(35, 100%, 50%);
+  --orange4: hsl(35, 100%, 54%);
+  --orange3: hsl(35, 100%, 74%);
+  --orange2: hsl(35, 100%, 86%);
+  --orange1: hsl(35, 100%, 94%);
+  --red8: hsl(3, 69%, 16%);
+  --red7: hsl(3, 68%, 31%);
+  --red6: hsl(3, 68%, 45%);
+  --red5: hsl(3, 100%, 59%);
+  --red4: hsl(3, 100%, 63%);
+  --red3: hsl(3, 100%, 79%);
+  --red2: hsl(3, 100%, 89%);
+  --red1: hsl(2, 100%, 95%);
+  --background: var(--black);
 }