@automattic/vip-design-system 1.2.3 → 1.3.1

package/tokens/valet-core/{wpvip-productive-color-dark.json → wpvip-product-dark.json}

@@ -40,13 +40,39 @@
   },
   "input": {
     "background": {
-      "value": "{color.gray.93}",
-      "type": "color",
-      "description": "Use for input backgrounds"
+      "default": {
+        "value": "rgba( {color.gray.93},0)",
+        "type": "color",
+        "description": "Use for input backgrounds"
+      },
+      "primary": {
+        "value": "{color.gray.70}",
+        "type": "color"
+      },
+      "brand": {
+        "value": "{color.gold.60}",
+        "type": "color"
+      },
+      "success": {
+        "value": "{color.green.60}",
+        "type": "color"
+      },
+      "inactive": {
+        "value": "{color.gray.80}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{color.gray.80}",
+        "type": "color"
+      },
+      "read-only": {
+        "value": "{layer.1}",
+        "type": "color"
+      }
     },
     "label": {
       "default": {
-        "value": "{text.primary}",
+        "value": "{color.gray.10}",
         "type": "color"
       }
     },
@@ -73,7 +99,11 @@
         "type": "color"
       },
       "error": {
-        "value": "{color.red.55}",
+        "value": "{color.red.40}",
+        "type": "color"
+      },
+      "read-only": {
+        "value": "{border.2}",
         "type": "color"
       }
     },
@@ -96,11 +126,11 @@
           "type": "color"
         },
         "hover": {
-          "value": "rgba({color.black},0)",
+          "value": "{color.gray.85}",
           "type": "color"
         },
         "active": {
-          "value": "{color.gray.93}",
+          "value": "rgba( {color.gray.93} ,0)",
           "type": "color"
         },
         "disabled": {
@@ -164,6 +194,18 @@
           "type": "color"
         }
       }
+    },
+    "toggle": {
+      "switch": {
+        "default": {
+          "value": "{color.gray.7}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{color.gray.50}",
+          "type": "color"
+        }
+      }
     }
   },
   "border": {
@@ -274,11 +316,19 @@
     },
     "inverse": {
       "type": "color",
-      "value": "{color.gray.85}"
+      "value": "{color.gray.7}"
     },
     "disabled": {
       "type": "color",
       "value": "{color.gray.65}"
+    },
+    "brand": {
+      "value": "{color.gold.45}",
+      "type": "color"
+    },
+    "inverse-disabled": {
+      "value": "{color.gray.60}",
+      "type": "color"
     }
   },
   "button": {
@@ -915,6 +965,278 @@
       }
     }
   },
+  "sticker": {
+    "gray": {
+      "background": {
+        "type": "color",
+        "value": "{color.gray.90}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.gray.20}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gray.80}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gray.75}"
+      }
+    },
+    "blue": {
+      "background": {
+        "type": "color",
+        "value": "{color.blue.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.blue.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.blue.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.blue.65}"
+      }
+    },
+    "green": {
+      "background": {
+        "type": "color",
+        "value": "{color.green.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.green.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.green.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.green.65}"
+      }
+    },
+    "red": {
+      "background": {
+        "type": "color",
+        "value": "{color.red.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.red.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.red.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.red.65}"
+      }
+    },
+    "gold": {
+      "background": {
+        "type": "color",
+        "value": "{color.gold.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.65}"
+      }
+    },
+    "yellow": {
+      "background": {
+        "type": "color",
+        "value": "{color.yellow.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.yellow.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.yellow.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.yellow.65}"
+      }
+    },
+    "orange": {
+      "background": {
+        "type": "color",
+        "value": "{color.orange.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.orange.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.orange.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.orange.65}"
+      }
+    },
+    "salmon": {
+      "background": {
+        "type": "color",
+        "value": "{color.salmon.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.salmon.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.salmon.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.salmon.65}"
+      }
+    },
+    "pink": {
+      "background": {
+        "type": "color",
+        "value": "{color.pink.80}"
+      },
+      "background-secondary": {
+        "type": "color",
+        "value": "{color.pink.30}"
+      },
+      "text": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "text-secondary": {
+        "type": "color",
+        "value": "{color.black}"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pure-white}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.pink.70}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.pink.65}"
+      }
+    }
+  },
   "toolbar": {
     "background": {
       "value": "{color.gray.100}",
@@ -960,7 +1282,7 @@
   "option-row": {
     "default": {
       "background": {
-        "value": "{color.gold.45}",
+        "value": "{color.gold.40}",
         "type": "color"
       },
       "icon": {
@@ -979,4 +1301,4 @@
       }
     }
   }
-}
+}

package/tokens/valet-core/{wpvip-expressive-color.json → wpvip-services-web-color.json}

@@ -727,4 +727,4 @@
       }
     }
   }
-}
+}

package/tokens/valet-core/{valet-expressive-core.json → wpvip-services-web-core.json}

@@ -5,41 +5,67 @@
         "value": "{space.responsive.4-7}",
         "type": "spacing",
         "description": "Use for global padding for the application—usually the outer margins of the screen. "
+      }
+    },
+    "responsive": {
+      "x-small": {
+        "value": "{space.responsive.3-4}",
+        "type": "spacing"
       },
       "small": {
-        "value": "{space.responsive.6-7}",
+        "value": "{space.responsive.4-5}",
         "type": "spacing"
       },
       "medium": {
-        "value": "{space.responsive.7-8}",
+        "value": "{space.responsive.5-6}",
         "type": "spacing"
       },
       "large": {
+        "value": "{space.responsive.6-7}",
+        "type": "spacing",
+        "description": "The default space between sequential blocks in a layout"
+      },
+      "x-large": {
+        "value": "{space.responsive.7-8}",
+        "type": "spacing"
+      },
+      "xx-large": {
         "value": "{space.responsive.8-9}",
         "type": "spacing"
       },
-      "huge": {
+      "xxx-large": {
         "value": "{space.responsive.9-10}",
         "type": "spacing"
       }
     },
-    "gap": {
-      "tiny": {
-        "value": "{space.responsive.3-4}",
+    "static": {
+      "x-small": {
+        "value": "{space.static.1}",
         "type": "spacing"
       },
       "small": {
-        "value": "{space.responsive.4-5}",
+        "value": "{space.static.2}",
         "type": "spacing"
       },
       "medium": {
-        "value": "{space.responsive.5-6}",
+        "value": "{space.static.3}",
         "type": "spacing"
       },
       "large": {
-        "value": "{space.responsive.6-7}",
-        "type": "spacing",
-        "description": "The default space between sequential blocks in a layout"
+        "value": "{space.static.4}",
+        "type": "spacing"
+      },
+      "x-large": {
+        "value": "{space.static.5}",
+        "type": "spacing"
+      },
+      "xx-large": {
+        "value": "{space.static.6}",
+        "type": "spacing"
+      },
+      "xxx-large": {
+        "value": "{space.static.7}",
+        "type": "spacing"
       }
     }
   },
@@ -106,17 +132,41 @@
     }
   },
   "borderRadius": {
-    "small": {
-      "value": "{borderRadius.static.2}",
-      "type": "borderRadius"
-    },
-    "medium": {
-      "value": "{borderRadius.responsive.3-5}",
-      "type": "borderRadius"
+    "static": {
+      "small": {
+        "value": "{borderRadius.static.2}",
+        "type": "borderRadius"
+      },
+      "medium": {
+        "value": "{borderRadius.static.3}",
+        "type": "borderRadius"
+      },
+      "large": {
+        "value": "{borderRadius.static.4}",
+        "type": "borderRadius"
+      },
+      "x-large": {
+        "value": "{borderRadius.static.5}",
+        "type": "borderRadius"
+      },
+      "xx-large": {
+        "value": "{borderRadius.static.6}",
+        "type": "borderRadius"
+      },
+      "x-small": {
+        "value": "{borderRadius.static.1}",
+        "type": "borderRadius"
+      }
     },
-    "large": {
-      "value": "{borderRadius.responsive.4-6}",
-      "type": "borderRadius"
+    "responsive": {
+      "medium": {
+        "value": "{borderRadius.responsive.3-5}",
+        "type": "borderRadius"
+      },
+      "large": {
+        "value": "{borderRadius.responsive.4-6}",
+        "type": "borderRadius"
+      }
     }
   }
-}
+}