@new-ui/colors 1.0.0 → 1.2.0

package/README.md

@@ -1,7 +1,7 @@
-![](help/dark.png)
+![](help/cover.png)
 
 ## Install
-Install New UI Colors from your terminal via npm. Current version is 1.0.0
+Install New UI Colors from your terminal via npm. Current version is 1.2.0
 
 ```
 npm i @new-ui/colors
@@ -10,25 +10,25 @@ npm i @new-ui/colors
 To get started quickly, you can use the CDN files.
 
 Light themes: 
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/light.min.css">
 ```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light.css">
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/light-warm.min.css">
 ```
-```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light-warm.css">
-```
-```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light-cold.css">
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/light-cold.min.css">
 ```
 
 Dark themes: 
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/dark.min.css">
 ```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark.css">
-```
-```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark-warm.css">
-```
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/dark-warm.min.css">
 ```
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark-cold.css">
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/dark-cold.min.css">
 ```
 
 ## Build
@@ -53,7 +53,7 @@ npm run build:tokens -- --theme=dark-warm
 npm run build:tokens -- --theme=dark-cold
 ```
 
-## Get a Figma copy
+## Recommended Defaults
 Refer to the Figma file for the color tokens cheatsheet.
 
-[New UI Colors](https://www.figma.com/community/file/1179503548902179413)
+[Get a Figma copy](https://www.figma.com/community/file/1179503548902179413)

package/build-tokens.js

@@ -2,7 +2,7 @@ const StyleDictionary = require("style-dictionary");
 const args = require("minimist")(process.argv.slice(2));
 const theme = args.theme ? args.theme : "primary";
 
-console.log(`🚧 Compiling tokens with the ${theme.toUpperCase()} theme`);
+console.log(`Compiling tokens with the ${theme.toUpperCase()} theme ...`);
 
 const getStyleDictionaryConfig = (theme) => {
   return {

package/dist/themes/dark-cold.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Dec 2022 16:49:40 GMT
+ * Generated on Mon, 26 Dec 2022 09:03:08 GMT
  */
 
 :root {
@@ -148,10 +148,10 @@
   --link-hover: var(--blue3);
   --link: var(--blue4);
   --icon-on-color: var(--white);
-  --icon-disabled: var(--cold7);
+  --icon-disabled: var(--cold8);
   --icon-secondary: var(--cold4);
   --icon-primary: var(--cold2);
-  --button-disabled: var(--cold6);
+  --button-disabled: var(--cold9);
   --button-danger-active: var(--red3);
   --button-danger-hover: var(--red3);
   --button-danger: var(--red4);
@@ -162,7 +162,7 @@
   --button-primary-hover: var(--blue3);
   --button-primary: var(--blue4);
   --border-strong: var(--cold5);
-  --border-default: var(--cold7);
+  --border: var(--cold7);
   --border-muted: var(--cold9);
   --background-brown: var(--brown8);
   --background-pink: var(--pink8);

package/dist/themes/dark-warm.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Dec 2022 16:49:35 GMT
+ * Generated on Mon, 26 Dec 2022 09:03:03 GMT
  */
 
 :root {
@@ -148,10 +148,10 @@
   --link-hover: var(--blue3);
   --link: var(--blue4);
   --icon-on-color: var(--white);
-  --icon-disabled: var(--warm7);
+  --icon-disabled: var(--warm8);
   --icon-secondary: var(--warm4);
   --icon-primary: var(--warm2);
-  --button-disabled: var(--warm6);
+  --button-disabled: var(--warm9);
   --button-danger-active: var(--red3);
   --button-danger-hover: var(--red3);
   --button-danger: var(--red4);
@@ -162,7 +162,7 @@
   --button-primary-hover: var(--blue3);
   --button-primary: var(--blue4);
   --border-strong: var(--warm5);
-  --border-default: var(--warm7);
+  --border: var(--warm7);
   --border-muted: var(--warm9);
   --background-brown: var(--brown8);
   --background-pink: var(--pink8);

package/dist/themes/dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Dec 2022 16:49:29 GMT
+ * Generated on Mon, 26 Dec 2022 09:02:59 GMT
  */
 
 :root {
@@ -148,10 +148,10 @@
   --link-hover: var(--blue3);
   --link: var(--blue4);
   --icon-on-color: var(--white);
-  --icon-disabled: var(--grey7);
+  --icon-disabled: var(--grey8);
   --icon-secondary: var(--grey4);
   --icon-primary: var(--grey2);
-  --button-disabled: var(--grey6);
+  --button-disabled: var(--grey9);
   --button-danger-active: var(--red3);
   --button-danger-hover: var(--red3);
   --button-danger: var(--red4);
@@ -162,7 +162,7 @@
   --button-primary-hover: var(--blue3);
   --button-primary: var(--blue4);
   --border-strong: var(--grey5);
-  --border-default: var(--grey7);
+  --border: var(--grey7);
   --border-muted: var(--grey9);
   --background-brown: var(--brown8);
   --background-pink: var(--pink8);

package/dist/themes/light-cold.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Dec 2022 16:49:20 GMT
+ * Generated on Mon, 26 Dec 2022 09:02:55 GMT
  */
 
 :root {
@@ -144,12 +144,12 @@
   --support-warning: var(--yellow5);
   --support-error: var(--red5);
   --link-visited: var(--indigo5);
-  --link-subtle: var(--cold7);
+  --link-subtle: var(--cold8);
   --link-hover: var(--blue6);
   --link: var(--blue5);
   --icon-on-color: var(--white);
-  --icon-disabled: var(--cold7);
-  --icon-secondary: var(--cold8);
+  --icon-disabled: var(--cold4);
+  --icon-secondary: var(--cold7);
   --icon-primary: var(--cold9);
   --button-disabled: var(--cold4);
   --button-danger-active: var(--red7);
@@ -162,7 +162,7 @@
   --button-primary-hover: var(--blue6);
   --button-primary: var(--blue5);
   --border-strong: var(--cold6);
-  --border-default: var(--cold4);
+  --border: var(--cold4);
   --border-muted: var(--cold2);
   --background-brown: var(--brown1);
   --background-pink: var(--pink1);

package/dist/themes/light-warm.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Dec 2022 16:49:04 GMT
+ * Generated on Mon, 26 Dec 2022 09:02:49 GMT
  */
 
 :root {
@@ -144,12 +144,12 @@
   --support-warning: var(--yellow5);
   --support-error: var(--red5);
   --link-visited: var(--indigo5);
-  --link-subtle: var(--warm7);
+  --link-subtle: var(--warm8);
   --link-hover: var(--blue6);
   --link: var(--blue5);
   --icon-on-color: var(--white);
-  --icon-disabled: var(--warm7);
-  --icon-secondary: var(--warm8);
+  --icon-disabled: var(--warm4);
+  --icon-secondary: var(--warm7);
   --icon-primary: var(--warm9);
   --button-disabled: var(--warm4);
   --button-danger-active: var(--red7);
@@ -162,7 +162,7 @@
   --button-primary-hover: var(--blue6);
   --button-primary: var(--blue5);
   --border-strong: var(--warm6);
-  --border-default: var(--warm4);
+  --border: var(--warm4);
   --border-muted: var(--warm2);
   --background-brown: var(--brown1);
   --background-pink: var(--pink1);

package/dist/themes/light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Dec 2022 16:48:49 GMT
+ * Generated on Mon, 26 Dec 2022 09:02:40 GMT
  */
 
 :root {
@@ -144,12 +144,12 @@
   --support-warning: var(--yellow5);
   --support-error: var(--red5);
   --link-visited: var(--indigo5);
-  --link-subtle: var(--grey7);
+  --link-subtle: var(--grey8);
   --link-hover: var(--blue6);
   --link: var(--blue5);
   --icon-on-color: var(--white);
-  --icon-disabled: var(--grey7);
-  --icon-secondary: var(--grey8);
+  --icon-disabled: var(--grey4);
+  --icon-secondary: var(--grey7);
   --icon-primary: var(--grey9);
   --button-disabled: var(--grey4);
   --button-danger-active: var(--red7);
@@ -162,7 +162,7 @@
   --button-primary-hover: var(--blue6);
   --button-primary: var(--blue5);
   --border-strong: var(--grey6);
-  --border-default: var(--grey4);
+  --border: var(--grey4);
   --border-muted: var(--grey2);
   --background-brown: var(--brown1);
   --background-pink: var(--pink1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@new-ui/colors",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Colors are now one less thing to worry about.",
   "main": "index.js",
   "scripts": {

package/tokens/themes/dark/dark.json

@@ -71,7 +71,7 @@
     "value": "{$grey9}",
     "type": "color"
   },
-  "$border-default": {
+  "$border": {
     "value": "{$grey7}",
     "type": "color"
   },
@@ -116,7 +116,7 @@
     "type": "color"
   },
   "$button-disabled": {
-    "value": "{$grey6}",
+    "value": "{$grey9}",
     "type": "color"
   },
   "$icon-primary": {
@@ -128,7 +128,7 @@
     "type": "color"
   },
   "$icon-disabled": {
-    "value": "{$grey7}",
+    "value": "{$grey8}",
     "type": "color"
   },
   "$icon-on-color": {

package/tokens/themes/dark-cold/dark.json

@@ -71,7 +71,7 @@
     "value": "{$cold9}",
     "type": "color"
   },
-  "$border-default": {
+  "$border": {
     "value": "{$cold7}",
     "type": "color"
   },
@@ -116,7 +116,7 @@
     "type": "color"
   },
   "$button-disabled": {
-    "value": "{$cold6}",
+    "value": "{$cold9}",
     "type": "color"
   },
   "$icon-primary": {
@@ -128,7 +128,7 @@
     "type": "color"
   },
   "$icon-disabled": {
-    "value": "{$cold7}",
+    "value": "{$cold8}",
     "type": "color"
   },
   "$icon-on-color": {

package/tokens/themes/dark-warm/dark.json

@@ -71,7 +71,7 @@
     "value": "{$warm9}",
     "type": "color"
   },
-  "$border-default": {
+  "$border": {
     "value": "{$warm7}",
     "type": "color"
   },
@@ -116,7 +116,7 @@
     "type": "color"
   },
   "$button-disabled": {
-    "value": "{$warm6}",
+    "value": "{$warm9}",
     "type": "color"
   },
   "$icon-primary": {
@@ -128,7 +128,7 @@
     "type": "color"
   },
   "$icon-disabled": {
-    "value": "{$warm7}",
+    "value": "{$warm8}",
     "type": "color"
   },
   "$icon-on-color": {

package/tokens/themes/light/light.json

@@ -71,7 +71,7 @@
     "value": "{$grey2}",
     "type": "color"
   },
-  "$border-default": {
+  "$border": {
     "value": "{$grey4}",
     "type": "color"
   },
@@ -124,11 +124,11 @@
     "type": "color"
   },
   "$icon-secondary": {
-    "value": "{$grey8}",
+    "value": "{$grey7}",
     "type": "color"
   },
   "$icon-disabled": {
-    "value": "{$grey7}",
+    "value": "{$grey4}",
     "type": "color"
   },
   "$icon-on-color": {
@@ -144,7 +144,7 @@
     "type": "color"
   },
   "$link-subtle": {
-    "value": "{$grey7}",
+    "value": "{$grey8}",
     "type": "color"
   },
   "$link-visited": {

package/tokens/themes/light-cold/light.json

@@ -71,7 +71,7 @@
     "value": "{$cold2}",
     "type": "color"
   },
-  "$border-default": {
+  "$border": {
     "value": "{$cold4}",
     "type": "color"
   },
@@ -124,11 +124,11 @@
     "type": "color"
   },
   "$icon-secondary": {
-    "value": "{$cold8}",
+    "value": "{$cold7}",
     "type": "color"
   },
   "$icon-disabled": {
-    "value": "{$cold7}",
+    "value": "{$cold4}",
     "type": "color"
   },
   "$icon-on-color": {
@@ -144,7 +144,7 @@
     "type": "color"
   },
   "$link-subtle": {
-    "value": "{$cold7}",
+    "value": "{$cold8}",
     "type": "color"
   },
   "$link-visited": {

package/tokens/themes/light-warm/light.json

@@ -71,7 +71,7 @@
     "value": "{$warm2}",
     "type": "color"
   },
-  "$border-default": {
+  "$border": {
     "value": "{$warm4}",
     "type": "color"
   },
@@ -124,11 +124,11 @@
     "type": "color"
   },
   "$icon-secondary": {
-    "value": "{$warm8}",
+    "value": "{$warm7}",
     "type": "color"
   },
   "$icon-disabled": {
-    "value": "{$warm7}",
+    "value": "{$warm4}",
     "type": "color"
   },
   "$icon-on-color": {
@@ -144,7 +144,7 @@
     "type": "color"
   },
   "$link-subtle": {
-    "value": "{$warm7}",
+    "value": "{$warm8}",
     "type": "color"
   },
   "$link-visited": {