@new-ui/colors 0.3.0 → 1.0.0

package/README.md

@@ -1,7 +1,7 @@
 ![](help/dark.png)
 
 ## Install
-Install New UI Colors from your terminal via npm. Current version is 0.3.0
+Install New UI Colors from your terminal via npm. Current version is 1.0.0
 
 ```
 npm i @new-ui/colors
@@ -11,24 +11,24 @@ 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@1.0.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@1.0.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">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light-cold.css">
 ```
 
-Dark themes [WIP]: 
+Dark themes: 
 ```
-<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@1.0.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@1.0.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">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark-cold.css">
 ```
 
 ## Build
@@ -54,5 +54,6 @@ npm run build:tokens -- --theme=dark-cold
 ```
 
 ## Get a Figma copy
+Refer to the Figma file for the color tokens cheatsheet.
 
-[New UI Colors - Light](https://www.figma.com/community/file/1179503548902179413)
+[New UI Colors](https://www.figma.com/community/file/1179503548902179413)

package/dist/themes/dark-cold.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 11 Dec 2022 21:08:08 GMT
+ * Generated on Mon, 12 Dec 2022 16:49:40 GMT
  */
 
 :root {
@@ -132,5 +132,53 @@
   --red3: hsl(3, 100%, 79%);
   --red2: hsl(3, 100%, 89%);
   --red1: hsl(2, 100%, 95%);
-  --background: var(--black);
+  --text-success: var(--green4);
+  --text-error: var(--red4);
+  --text-on-color: var(--white);
+  --text-placeholder: var(--cold6);
+  --text-secondary: var(--cold5);
+  --text-primary-alt: var(--cold3);
+  --text-primary: var(--cold1);
+  --support-info: var(--blue4);
+  --support-success: var(--green4);
+  --support-warning: var(--yellow4);
+  --support-error: var(--red4);
+  --link-visited: var(--indigo4);
+  --link-subtle: var(--cold1);
+  --link-hover: var(--blue3);
+  --link: var(--blue4);
+  --icon-on-color: var(--white);
+  --icon-disabled: var(--cold7);
+  --icon-secondary: var(--cold4);
+  --icon-primary: var(--cold2);
+  --button-disabled: var(--cold6);
+  --button-danger-active: var(--red3);
+  --button-danger-hover: var(--red3);
+  --button-danger: var(--red4);
+  --button-secondary-active: var(--cold3);
+  --button-secondary-hover: var(--cold2);
+  --button-secondary: var(--cold1);
+  --button-primary-active: var(--blue3);
+  --button-primary-hover: var(--blue3);
+  --button-primary: var(--blue4);
+  --border-strong: var(--cold5);
+  --border-default: var(--cold7);
+  --border-muted: var(--cold9);
+  --background-brown: var(--brown8);
+  --background-pink: var(--pink8);
+  --background-purple: var(--purple8);
+  --background-indigo: var(--indigo8);
+  --background-blue: var(--blue8);
+  --background-cyan: var(--cyan8);
+  --background-teal: var(--teal8);
+  --background-mint: var(--mint8);
+  --background-green: var(--green8);
+  --background-yellow: var(--yellow8);
+  --background-orange: var(--orange8);
+  --background-red: var(--red8);
+  --background-selected-hover: var(--cold7);
+  --background-selected: var(--cold8);
+  --background-hover: var(--cold9);
+  --background-secondary: var(--cold9);
+  --background: var(--cold10);
 }

package/dist/themes/dark-warm.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 11 Dec 2022 21:08:03 GMT
+ * Generated on Mon, 12 Dec 2022 16:49:35 GMT
  */
 
 :root {
@@ -132,5 +132,53 @@
   --red3: hsl(3, 100%, 79%);
   --red2: hsl(3, 100%, 89%);
   --red1: hsl(2, 100%, 95%);
-  --background: var(--black);
+  --text-success: var(--green4);
+  --text-error: var(--red4);
+  --text-on-color: var(--white);
+  --text-placeholder: var(--warm6);
+  --text-secondary: var(--warm5);
+  --text-primary-alt: var(--warm3);
+  --text-primary: var(--warm1);
+  --support-info: var(--blue4);
+  --support-success: var(--green4);
+  --support-warning: var(--yellow4);
+  --support-error: var(--red4);
+  --link-visited: var(--indigo4);
+  --link-subtle: var(--warm1);
+  --link-hover: var(--blue3);
+  --link: var(--blue4);
+  --icon-on-color: var(--white);
+  --icon-disabled: var(--warm7);
+  --icon-secondary: var(--warm4);
+  --icon-primary: var(--warm2);
+  --button-disabled: var(--warm6);
+  --button-danger-active: var(--red3);
+  --button-danger-hover: var(--red3);
+  --button-danger: var(--red4);
+  --button-secondary-active: var(--warm3);
+  --button-secondary-hover: var(--warm2);
+  --button-secondary: var(--warm1);
+  --button-primary-active: var(--blue3);
+  --button-primary-hover: var(--blue3);
+  --button-primary: var(--blue4);
+  --border-strong: var(--warm5);
+  --border-default: var(--warm7);
+  --border-muted: var(--warm9);
+  --background-brown: var(--brown8);
+  --background-pink: var(--pink8);
+  --background-purple: var(--purple8);
+  --background-indigo: var(--indigo8);
+  --background-blue: var(--blue8);
+  --background-cyan: var(--cyan8);
+  --background-teal: var(--teal8);
+  --background-mint: var(--mint8);
+  --background-green: var(--green8);
+  --background-yellow: var(--yellow8);
+  --background-orange: var(--orange8);
+  --background-red: var(--red8);
+  --background-selected-hover: var(--warm7);
+  --background-selected: var(--warm8);
+  --background-hover: var(--warm9);
+  --background-secondary: var(--warm9);
+  --background: var(--warm10);
 }

package/dist/themes/dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 11 Dec 2022 21:08:15 GMT
+ * Generated on Mon, 12 Dec 2022 16:49:29 GMT
  */
 
 :root {
@@ -132,5 +132,53 @@
   --red3: hsl(3, 100%, 79%);
   --red2: hsl(3, 100%, 89%);
   --red1: hsl(2, 100%, 95%);
-  --background: var(--black);
+  --text-success: var(--green4);
+  --text-error: var(--red4);
+  --text-on-color: var(--white);
+  --text-placeholder: var(--grey6);
+  --text-secondary: var(--grey5);
+  --text-primary-alt: var(--grey3);
+  --text-primary: var(--grey1);
+  --support-info: var(--blue4);
+  --support-success: var(--green4);
+  --support-warning: var(--yellow4);
+  --support-error: var(--red4);
+  --link-visited: var(--indigo4);
+  --link-subtle: var(--grey1);
+  --link-hover: var(--blue3);
+  --link: var(--blue4);
+  --icon-on-color: var(--white);
+  --icon-disabled: var(--grey7);
+  --icon-secondary: var(--grey4);
+  --icon-primary: var(--grey2);
+  --button-disabled: var(--grey6);
+  --button-danger-active: var(--red3);
+  --button-danger-hover: var(--red3);
+  --button-danger: var(--red4);
+  --button-secondary-active: var(--grey3);
+  --button-secondary-hover: var(--grey2);
+  --button-secondary: var(--grey1);
+  --button-primary-active: var(--blue3);
+  --button-primary-hover: var(--blue3);
+  --button-primary: var(--blue4);
+  --border-strong: var(--grey5);
+  --border-default: var(--grey7);
+  --border-muted: var(--grey9);
+  --background-brown: var(--brown8);
+  --background-pink: var(--pink8);
+  --background-purple: var(--purple8);
+  --background-indigo: var(--indigo8);
+  --background-blue: var(--blue8);
+  --background-cyan: var(--cyan8);
+  --background-teal: var(--teal8);
+  --background-mint: var(--mint8);
+  --background-green: var(--green8);
+  --background-yellow: var(--yellow8);
+  --background-orange: var(--orange8);
+  --background-red: var(--red8);
+  --background-selected-hover: var(--grey7);
+  --background-selected: var(--grey8);
+  --background-hover: var(--grey9);
+  --background-secondary: var(--grey9);
+  --background: var(--grey10);
 }

package/dist/themes/light-cold.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 11 Dec 2022 21:07:21 GMT
+ * Generated on Mon, 12 Dec 2022 16:49:20 GMT
  */
 
 :root {

package/dist/themes/light-warm.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 11 Dec 2022 21:07:14 GMT
+ * Generated on Mon, 12 Dec 2022 16:49:04 GMT
  */
 
 :root {

package/dist/themes/light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 11 Dec 2022 21:07:08 GMT
+ * Generated on Mon, 12 Dec 2022 16:48:49 GMT
  */
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@new-ui/colors",
-  "version": "0.3.0",
-  "description": "![](help/dark.png)",
+  "version": "1.0.0",
+  "description": "Colors are now one less thing to worry about.",
   "main": "index.js",
   "scripts": {
     "build:tokens": "node ./build-tokens.js"

package/tokens/themes/dark/dark.json

@@ -1,6 +1,198 @@
 {
   "$background": {
-    "value": "{$black}",
+    "value": "{$grey10}",
+    "type": "color"
+  },
+  "$background-secondary": {
+    "value": "{$grey9}",
+    "type": "color"
+  },
+  "$background-hover": {
+    "value": "{$grey9}",
+    "type": "color"
+  },
+  "$background-selected": {
+    "value": "{$grey8}",
+    "type": "color"
+  },
+  "$background-selected-hover": {
+    "value": "{$grey7}",
+    "type": "color"
+  },
+  "$background-red": {
+    "value": "{$red8}",
+    "type": "color"
+  },
+  "$background-orange": {
+    "value": "{$orange8}",
+    "type": "color"
+  },
+  "$background-yellow": {
+    "value": "{$yellow8}",
+    "type": "color"
+  },
+  "$background-green": {
+    "value": "{$green8}",
+    "type": "color"
+  },
+  "$background-mint": {
+    "value": "{$mint8}",
+    "type": "color"
+  },
+  "$background-teal": {
+    "value": "{$teal8}",
+    "type": "color"
+  },
+  "$background-cyan": {
+    "value": "{$cyan8}",
+    "type": "color"
+  },
+  "$background-blue": {
+    "value": "{$blue8}",
+    "type": "color"
+  },
+  "$background-indigo": {
+    "value": "{$indigo8}",
+    "type": "color"
+  },
+  "$background-purple": {
+    "value": "{$purple8}",
+    "type": "color"
+  },
+  "$background-pink": {
+    "value": "{$pink8}",
+    "type": "color"
+  },
+  "$background-brown": {
+    "value": "{$brown8}",
+    "type": "color"
+  },
+  "$border-muted": {
+    "value": "{$grey9}",
+    "type": "color"
+  },
+  "$border-default": {
+    "value": "{$grey7}",
+    "type": "color"
+  },
+  "$border-strong": {
+    "value": "{$grey5}",
+    "type": "color"
+  },
+  "$button-primary": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$button-primary-hover": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$button-primary-active": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$button-secondary": {
+    "value": "{$grey1}",
+    "type": "color"
+  },
+  "$button-secondary-hover": {
+    "value": "{$grey2}",
+    "type": "color"
+  },
+  "$button-secondary-active": {
+    "value": "{$grey3}",
+    "type": "color"
+  },
+  "$button-danger": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$button-danger-hover": {
+    "value": "{$red3}",
+    "type": "color"
+  },
+  "$button-danger-active": {
+    "value": "{$red3}",
+    "type": "color"
+  },
+  "$button-disabled": {
+    "value": "{$grey6}",
+    "type": "color"
+  },
+  "$icon-primary": {
+    "value": "{$grey2}",
+    "type": "color"
+  },
+  "$icon-secondary": {
+    "value": "{$grey4}",
+    "type": "color"
+  },
+  "$icon-disabled": {
+    "value": "{$grey7}",
+    "type": "color"
+  },
+  "$icon-on-color": {
+    "value": "{$white}",
+    "type": "color"
+  },
+  "$link": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$link-hover": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$link-subtle": {
+    "value": "{$grey1}",
+    "type": "color"
+  },
+  "$link-visited": {
+    "value": "{$indigo4}",
+    "type": "color"
+  },
+  "$support-error": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$support-warning": {
+    "value": "{$yellow4}",
+    "type": "color"
+  },
+  "$support-success": {
+    "value": "{$green4}",
+    "type": "color"
+  },
+  "$support-info": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$text-primary": {
+    "value": "{$grey1}",
+    "type": "color"
+  },
+  "$text-primary-alt": {
+    "value": "{$grey3}",
+    "type": "color"
+  },
+  "$text-secondary": {
+    "value": "{$grey5}",
+    "type": "color"
+  },
+  "$text-placeholder": {
+    "value": "{$grey6}",
+    "type": "color"
+  },
+  "$text-on-color": {
+    "value": "{$white}",
+    "type": "color"
+  },
+  "$text-error": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$text-success": {
+    "value": "{$green4}",
     "type": "color"
   }
 }

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

@@ -1,6 +1,198 @@
 {
   "$background": {
-    "value": "{$black}",
+    "value": "{$cold10}",
+    "type": "color"
+  },
+  "$background-secondary": {
+    "value": "{$cold9}",
+    "type": "color"
+  },
+  "$background-hover": {
+    "value": "{$cold9}",
+    "type": "color"
+  },
+  "$background-selected": {
+    "value": "{$cold8}",
+    "type": "color"
+  },
+  "$background-selected-hover": {
+    "value": "{$cold7}",
+    "type": "color"
+  },
+  "$background-red": {
+    "value": "{$red8}",
+    "type": "color"
+  },
+  "$background-orange": {
+    "value": "{$orange8}",
+    "type": "color"
+  },
+  "$background-yellow": {
+    "value": "{$yellow8}",
+    "type": "color"
+  },
+  "$background-green": {
+    "value": "{$green8}",
+    "type": "color"
+  },
+  "$background-mint": {
+    "value": "{$mint8}",
+    "type": "color"
+  },
+  "$background-teal": {
+    "value": "{$teal8}",
+    "type": "color"
+  },
+  "$background-cyan": {
+    "value": "{$cyan8}",
+    "type": "color"
+  },
+  "$background-blue": {
+    "value": "{$blue8}",
+    "type": "color"
+  },
+  "$background-indigo": {
+    "value": "{$indigo8}",
+    "type": "color"
+  },
+  "$background-purple": {
+    "value": "{$purple8}",
+    "type": "color"
+  },
+  "$background-pink": {
+    "value": "{$pink8}",
+    "type": "color"
+  },
+  "$background-brown": {
+    "value": "{$brown8}",
+    "type": "color"
+  },
+  "$border-muted": {
+    "value": "{$cold9}",
+    "type": "color"
+  },
+  "$border-default": {
+    "value": "{$cold7}",
+    "type": "color"
+  },
+  "$border-strong": {
+    "value": "{$cold5}",
+    "type": "color"
+  },
+  "$button-primary": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$button-primary-hover": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$button-primary-active": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$button-secondary": {
+    "value": "{$cold1}",
+    "type": "color"
+  },
+  "$button-secondary-hover": {
+    "value": "{$cold2}",
+    "type": "color"
+  },
+  "$button-secondary-active": {
+    "value": "{$cold3}",
+    "type": "color"
+  },
+  "$button-danger": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$button-danger-hover": {
+    "value": "{$red3}",
+    "type": "color"
+  },
+  "$button-danger-active": {
+    "value": "{$red3}",
+    "type": "color"
+  },
+  "$button-disabled": {
+    "value": "{$cold6}",
+    "type": "color"
+  },
+  "$icon-primary": {
+    "value": "{$cold2}",
+    "type": "color"
+  },
+  "$icon-secondary": {
+    "value": "{$cold4}",
+    "type": "color"
+  },
+  "$icon-disabled": {
+    "value": "{$cold7}",
+    "type": "color"
+  },
+  "$icon-on-color": {
+    "value": "{$white}",
+    "type": "color"
+  },
+  "$link": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$link-hover": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$link-subtle": {
+    "value": "{$cold1}",
+    "type": "color"
+  },
+  "$link-visited": {
+    "value": "{$indigo4}",
+    "type": "color"
+  },
+  "$support-error": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$support-warning": {
+    "value": "{$yellow4}",
+    "type": "color"
+  },
+  "$support-success": {
+    "value": "{$green4}",
+    "type": "color"
+  },
+  "$support-info": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$text-primary": {
+    "value": "{$cold1}",
+    "type": "color"
+  },
+  "$text-primary-alt": {
+    "value": "{$cold3}",
+    "type": "color"
+  },
+  "$text-secondary": {
+    "value": "{$cold5}",
+    "type": "color"
+  },
+  "$text-placeholder": {
+    "value": "{$cold6}",
+    "type": "color"
+  },
+  "$text-on-color": {
+    "value": "{$white}",
+    "type": "color"
+  },
+  "$text-error": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$text-success": {
+    "value": "{$green4}",
     "type": "color"
   }
 }

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

@@ -1,6 +1,198 @@
 {
   "$background": {
-    "value": "{$black}",
+    "value": "{$warm10}",
+    "type": "color"
+  },
+  "$background-secondary": {
+    "value": "{$warm9}",
+    "type": "color"
+  },
+  "$background-hover": {
+    "value": "{$warm9}",
+    "type": "color"
+  },
+  "$background-selected": {
+    "value": "{$warm8}",
+    "type": "color"
+  },
+  "$background-selected-hover": {
+    "value": "{$warm7}",
+    "type": "color"
+  },
+  "$background-red": {
+    "value": "{$red8}",
+    "type": "color"
+  },
+  "$background-orange": {
+    "value": "{$orange8}",
+    "type": "color"
+  },
+  "$background-yellow": {
+    "value": "{$yellow8}",
+    "type": "color"
+  },
+  "$background-green": {
+    "value": "{$green8}",
+    "type": "color"
+  },
+  "$background-mint": {
+    "value": "{$mint8}",
+    "type": "color"
+  },
+  "$background-teal": {
+    "value": "{$teal8}",
+    "type": "color"
+  },
+  "$background-cyan": {
+    "value": "{$cyan8}",
+    "type": "color"
+  },
+  "$background-blue": {
+    "value": "{$blue8}",
+    "type": "color"
+  },
+  "$background-indigo": {
+    "value": "{$indigo8}",
+    "type": "color"
+  },
+  "$background-purple": {
+    "value": "{$purple8}",
+    "type": "color"
+  },
+  "$background-pink": {
+    "value": "{$pink8}",
+    "type": "color"
+  },
+  "$background-brown": {
+    "value": "{$brown8}",
+    "type": "color"
+  },
+  "$border-muted": {
+    "value": "{$warm9}",
+    "type": "color"
+  },
+  "$border-default": {
+    "value": "{$warm7}",
+    "type": "color"
+  },
+  "$border-strong": {
+    "value": "{$warm5}",
+    "type": "color"
+  },
+  "$button-primary": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$button-primary-hover": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$button-primary-active": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$button-secondary": {
+    "value": "{$warm1}",
+    "type": "color"
+  },
+  "$button-secondary-hover": {
+    "value": "{$warm2}",
+    "type": "color"
+  },
+  "$button-secondary-active": {
+    "value": "{$warm3}",
+    "type": "color"
+  },
+  "$button-danger": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$button-danger-hover": {
+    "value": "{$red3}",
+    "type": "color"
+  },
+  "$button-danger-active": {
+    "value": "{$red3}",
+    "type": "color"
+  },
+  "$button-disabled": {
+    "value": "{$warm6}",
+    "type": "color"
+  },
+  "$icon-primary": {
+    "value": "{$warm2}",
+    "type": "color"
+  },
+  "$icon-secondary": {
+    "value": "{$warm4}",
+    "type": "color"
+  },
+  "$icon-disabled": {
+    "value": "{$warm7}",
+    "type": "color"
+  },
+  "$icon-on-color": {
+    "value": "{$white}",
+    "type": "color"
+  },
+  "$link": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$link-hover": {
+    "value": "{$blue3}",
+    "type": "color"
+  },
+  "$link-subtle": {
+    "value": "{$warm1}",
+    "type": "color"
+  },
+  "$link-visited": {
+    "value": "{$indigo4}",
+    "type": "color"
+  },
+  "$support-error": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$support-warning": {
+    "value": "{$yellow4}",
+    "type": "color"
+  },
+  "$support-success": {
+    "value": "{$green4}",
+    "type": "color"
+  },
+  "$support-info": {
+    "value": "{$blue4}",
+    "type": "color"
+  },
+  "$text-primary": {
+    "value": "{$warm1}",
+    "type": "color"
+  },
+  "$text-primary-alt": {
+    "value": "{$warm3}",
+    "type": "color"
+  },
+  "$text-secondary": {
+    "value": "{$warm5}",
+    "type": "color"
+  },
+  "$text-placeholder": {
+    "value": "{$warm6}",
+    "type": "color"
+  },
+  "$text-on-color": {
+    "value": "{$white}",
+    "type": "color"
+  },
+  "$text-error": {
+    "value": "{$red4}",
+    "type": "color"
+  },
+  "$text-success": {
+    "value": "{$green4}",
     "type": "color"
   }
 }