@automattic/vip-design-system 1.2.3 → 1.3.1

package/tokens/valet-core/wpvip-web-color.json

@@ -0,0 +1,730 @@
+{
+  "background": {
+    "primary": {
+      "type": "color",
+      "description": "Use as main application background",
+      "value": "{color.gold.3}"
+    },
+    "inverse": {
+      "value": "{color.black}",
+      "type": "color",
+      "description": "Use as component background in high-contrast situations. "
+    },
+    "brand": {
+      "type": "color",
+      "value": "{color.gold.30}"
+    }
+  },
+  "layer": {
+    "1": {
+      "type": "color",
+      "value": "{color.gold.0}"
+    },
+    "2": {
+      "type": "color",
+      "value": "{color.gradient.neutral-light-1}"
+    },
+    "3": {
+      "type": "color",
+      "value": "{color.gold.0}"
+    },
+    "4": {
+      "value": "{color.pure-white}",
+      "type": "color"
+    },
+    "accent": {
+      "1": {
+        "type": "color",
+        "value": "{color.gold.20}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{color.pink.20}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{color.red.30}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{color.salmon.25}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{color.orange.25}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{color.yellow.20}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{color.green.25}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{color.blue.25}"
+      },
+      "neutral-1": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-1}"
+      },
+      "neutral-2": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-2}"
+      },
+      "neutral-3": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-3}"
+      },
+      "neutral-4": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-4}"
+      },
+      "brand": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "colorful-1": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-1}"
+      },
+      "colorful-2": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-2}"
+      },
+      "colorful-3": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-3}"
+      },
+      "colorful-4": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-4}"
+      },
+      "dark-1": {
+        "type": "color",
+        "value": "{color.gradient.colorful-dark-1}"
+      },
+      "dark-2": {
+        "type": "color",
+        "value": "{color.gradient.colorful-dark-2}"
+      },
+      "black": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "blur": {
+      "value": "rgba({background.primary}, .75)",
+      "type": "color",
+      "description": "color fill for transparent blurred component backgrounds"
+    }
+  },
+  "field": {
+    "1": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    },
+    "2": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    },
+    "3": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    },
+    "4": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    }
+  },
+  "border": {
+    "1": {
+      "value": "{color.black}",
+      "type": "color"
+    },
+    "2": {
+      "type": "color",
+      "value": "{color.gray.70}"
+    },
+    "3": {
+      "type": "color",
+      "value": "{color.gray.25}"
+    },
+    "4": {
+      "type": "color",
+      "value": "{color.gray.15}"
+    },
+    "accent": {
+      "type": "color",
+      "value": "{color.gold.50}"
+    },
+    "inverse-1": {
+      "value": "{color.pure-white}",
+      "type": "color"
+    },
+    "inverse-2": {
+      "value": "{color.gray.30}",
+      "type": "color"
+    },
+    "inverse-3": {
+      "value": "{color.gray.75}",
+      "type": "color"
+    },
+    "inverse-4": {
+      "value": "{color.gray.80}",
+      "type": "color"
+    }
+  },
+  "text": {
+    "primary": {
+      "value": "{color.black}",
+      "type": "color",
+      "description": "Use for headings"
+    },
+    "secondary": {
+      "type": "color",
+      "description": "Use for body text ",
+      "value": "{color.gray.75}"
+    },
+    "helper": {
+      "type": "color",
+      "description": "Use for helper text",
+      "value": "{color.gray.60}"
+    },
+    "placeholder": {
+      "type": "color",
+      "description": "Use for placeholder text in fields",
+      "value": "{color.gray.45}"
+    },
+    "disabled": {
+      "type": "color",
+      "value": "{color.gray.25}"
+    },
+    "inverse": {
+      "type": "color",
+      "value": "{color.gray.0}"
+    },
+    "inverse-secondary": {
+      "value": "{color.gray.15}",
+      "type": "color"
+    },
+    "interactive": {
+      "type": "color",
+      "value": "{color.gold.60}"
+    }
+  },
+  "link": {
+    "default": {
+      "type": "color",
+      "description": "Use for text links",
+      "value": "{color.gold.60}"
+    },
+    "hover": {
+      "type": "color",
+      "value": "{color.gold.70}"
+    },
+    "active": {
+      "type": "color",
+      "value": "{color.gold.80}"
+    },
+    "visited": {
+      "type": "color",
+      "value": "{color.gold.70}"
+    }
+  },
+  "icon": {
+    "primary": {
+      "value": "{color.black}",
+      "type": "color"
+    },
+    "secondary": {
+      "type": "color",
+      "value": "{color.gray.60}"
+    },
+    "helper": {
+      "type": "color",
+      "value": "{color.gray.40}"
+    },
+    "background": {
+      "value": "{color.gray.20}",
+      "type": "color"
+    },
+    "inverse": {
+      "type": "color",
+      "value": "{color.gold.0}"
+    },
+    "disabled": {
+      "type": "color",
+      "value": "{color.gray.25}"
+    }
+  },
+  "button": {
+    "primary": {
+      "default": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.50}"
+      },
+      "disabled": {
+        "type": "color",
+        "value": "{color.gray.50}"
+      },
+      "label": {
+        "value": "{color.gold.0}",
+        "type": "color"
+      },
+      "label hover": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "secondary": {
+      "default": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.50}"
+      },
+      "disabled": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "label": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "tertiary": {
+      "default": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gray.7}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gray.25}"
+      },
+      "disabled": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "label": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "display": {
+      "default": {
+        "value": "linear-gradient(55deg, {color.gold.30} 10%, {color.gold.20} 90%)",
+        "type": "color"
+      },
+      "hover": {
+        "value": "linear-gradient(55deg, {color.gold.65} 10%, {color.gold.45} 90%)",
+        "type": "color"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.65}"
+      },
+      "disabled": {
+        "type": "color",
+        "value": "{color.gray.50}"
+      },
+      "label": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "label hover": {
+        "value": "{color.pure-white}",
+        "type": "color"
+      }
+    }
+  },
+  "support": {
+    "background": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.7}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.7}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.7}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.7}"
+      }
+    },
+    "text": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.60}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.60}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.60}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.60}"
+      }
+    },
+    "icon": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.50}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.50}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.50}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.50}"
+      }
+    },
+    "accent": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.60}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.60}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.60}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.60}"
+      }
+    },
+    "link": {
+      "error": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.red.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.red.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.red.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.red.80}"
+        }
+      },
+      "warning": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.yellow.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.yellow.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.yellow.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.yellow.70}"
+        }
+      },
+      "info": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.blue.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.blue.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.blue.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.blue.70}"
+        }
+      },
+      "success": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.green.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.green.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.green.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.green.70}"
+        }
+      }
+    }
+  },
+  "focus": {
+    "default": {
+      "value": "{color.focus}",
+      "type": "color"
+    },
+    "inset": {
+      "value": "{color.pure-white}",
+      "type": "color"
+    }
+  },
+  "overlay": {
+    "type": "color",
+    "value": "rgba({color.gray.55},.25)"
+  },
+  "interactive": {
+    "type": "color",
+    "value": "{color.gold.55}"
+  },
+  "tag": {
+    "gray": {
+      "background": {
+        "type": "color",
+        "value": "{color.gray.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.gray.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gray.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gray.20}"
+      }
+    },
+    "blue": {
+      "background": {
+        "type": "color",
+        "value": "{color.blue.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.blue.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.blue.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.blue.20}"
+      }
+    },
+    "green": {
+      "background": {
+        "type": "color",
+        "value": "{color.green.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.green.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.green.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.green.20}"
+      }
+    },
+    "red": {
+      "background": {
+        "type": "color",
+        "value": "{color.red.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.red.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.red.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.red.20}"
+      }
+    },
+    "gold": {
+      "background": {
+        "type": "color",
+        "value": "{color.gold.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.gold.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.20}"
+      }
+    },
+    "yellow": {
+      "background": {
+        "type": "color",
+        "value": "{color.yellow.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.yellow.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.yellow.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.yellow.20}"
+      }
+    },
+    "orange": {
+      "background": {
+        "type": "color",
+        "value": "{color.orange.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.orange.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.orange.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.orange.20}"
+      }
+    },
+    "salmon": {
+      "background": {
+        "type": "color",
+        "value": "{color.salmon.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.salmon.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.salmon.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.salmon.20}"
+      }
+    },
+    "pink": {
+      "background": {
+        "type": "color",
+        "value": "{color.pink.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pink.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.pink.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.pink.20}"
+      }
+    }
+  }
+}