@automattic/vip-design-system 2.18.0 → 2.19.0

package/tokens/valet-core/valet-core.json

@@ -7,13 +7,13 @@
   "fontSize": {
     "static": {
       "0": {
-        "value": "{rem}*.625",
+        "value": "{rem}*.6875",
         "type": "fontSizes"
       },
       "1": {
         "value": ".75 * {rem}",
         "type": "fontSizes",
-        "description": "these are non-responsive font sizes used for body copy, helper text and other elements that don't need to respond to viewport width."
+        "description": "These static font sizes are non-responsive and are used for body copy, helper text, and other UI text that should not scale with viewport width."
       },
       "2": {
         "value": ".875 * {rem}",
@@ -28,7 +28,11 @@
         "type": "fontSizes"
       },
       "5": {
-        "value": "1.25 * {rem}",
+        "value": "1.75 * {rem}",
+        "type": "fontSizes"
+      },
+      "6": {
+        "value": "2.5 * {rem}",
         "type": "fontSizes"
       }
     },
@@ -765,13 +769,18 @@
     }
   },
   "lineHeight": {
+    "0": {
+      "value": "100%",
+      "type": "lineHeights",
+      "description": "Use for short text labels"
+    },
     "1": {
-      "value": "110%",
+      "value": "115%",
       "type": "lineHeights",
       "description": "Use only for display."
     },
     "2": {
-      "value": "120%",
+      "value": "125%",
       "type": "lineHeights",
       "description": "Use for larger headings."
     },
@@ -809,6 +818,10 @@
       "value": "500",
       "type": "fontWeights"
     },
+    "semibold": {
+      "value": "600",
+      "type": "fontWeights"
+    },
     "bold": {
       "value": "700",
       "type": "fontWeights"
@@ -819,17 +832,34 @@
     }
   },
   "letterSpacing": {
+    "tight-3": {
+      "value": "-0.02em",
+      "type": "letterSpacing"
+    },
+    "tight-2": {
+      "value": "-0.015em",
+      "type": "letterSpacing"
+    },
+    "tight-1": {
+      "value": "-0.01em",
+      "type": "letterSpacing"
+    },
+   
     "none": {
       "value": "0em",
       "type": "letterSpacing",
       "description": "in Figma, letter spacing values need to be % but in production they need to be expressed in em to work with varable fonts"
     },
-    "tight": {
-      "value": "-.02em",
+    "loose-1": {
+      "value": "0.005em",
+      "type": "letterSpacing"
+    },
+    "loose-2": {
+      "value": "0.01em",
       "type": "letterSpacing"
     },
-    "loose": {
-      "value": ".03em",
+    "loose-3": {
+      "value": "0.02em",
       "type": "letterSpacing"
     }
   },

package/tokens/valet-core/wpvip-product-core.json

@@ -939,55 +939,61 @@
     },
     "helper-text": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "fontSize": "{fontSize.1}",
-        "lineHeight": "150%"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.regular}",
+        "fontSize": "{fontSize.static.1}",
+        "lineHeight": "{lineHeight.5}",
+        "letterSpacing": "{letterSpacing.loose-2}"
       },
       "type": "typography"
     },
     "label-xs": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "100%",
-        "fontSize": "11"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.0}",
+        "fontSize": "{fontSize.static.0}",
+        "letterSpacing": "{letterSpacing.loose-3}"
       },
       "type": "typography"
     },
     "label-small": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "100%",
-        "fontSize": "{fontSize.1}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.0}",
+        "fontSize": "{fontSize.static.1}",
+        "letterSpacing": "{letterSpacing.loose-1}"
       },
       "type": "typography"
     },
     "label-default": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.heading}",
-        "lineHeight": "100%",
-        "fontSize": "{fontSize.2}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.0}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.loose-1}"
       },
       "type": "typography"
     },
     "label-default-quiet": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "100%",
-        "fontSize": "{fontSize.2}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.0}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.loose-1}"
       },
       "type": "typography"
     },
     "label-default-loud": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "700",
-        "lineHeight": "100%",
-        "fontSize": "{fontSize.2}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.0}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.loose-1}"
       },
       "type": "typography"
     }
@@ -1539,170 +1545,127 @@
     }
   },
   "fontFamily": {
-    "body": {
-      "value": "SF Pro Text",
-      "type": "fontFamilies"
-    },
-    "serif": {
-      "value": "Recoleta",
+    "default": {
+      "value": "aktiv-grotesk, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
       "type": "fontFamilies"
     },
     "monospace": {
-      "value": "SF Mono",
+      "value": "SF Mono, monospace",
       "type": "fontFamilies"
     }
   },
-  "fontSize": {
-    "0": {
-      "value": "{fontSize.static.0}",
-      "type": "fontSizes"
-    },
-    "1": {
-      "value": "{fontSize.static.1}",
-      "type": "fontSizes"
-    },
-    "2": {
-      "value": "{fontSize.static.2}",
-      "type": "fontSizes"
-    },
-    "3": {
-      "value": "19",
-      "type": "fontSizes"
-    },
-    "4": {
-      "value": "32",
-      "type": "fontSizes"
-    },
-    "5": {
-      "value": "40",
-      "type": "fontSizes"
-    }
-  },
-  "lineHeight": {
-    "body": {
-      "value": "{lineHeight.5}",
-      "type": "lineHeights"
-    },
-    "heading": {
-      "value": "113%",
-      "type": "lineHeights"
-    }
-  },
   "heading": {
     "1": {
       "value": {
-        "fontFamily": "{fontFamily.serif}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "135%",
-        "fontSize": "{fontSize.5}",
-        "letterSpacing": "-1%"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.1}",
+        "fontSize": "{fontSize.static.6}",
+        "letterSpacing": "{letterSpacing.tight-3}"
       },
       "type": "typography"
     },
     "2": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.heading}",
-        "lineHeight": "120%",
-        "fontSize": "{fontSize.4}",
-        "letterSpacing": "0%"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.2}",
+        "fontSize": "{fontSize.static.5}",
+        "letterSpacing": "{letterSpacing.tight-2}"
       },
       "type": "typography"
     },
     "3": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.heading}",
-        "lineHeight": "150%",
-        "fontSize": "{fontSize.3}",
-        "letterSpacing": "0%"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.3}",
+        "fontSize": "{fontSize.static.4}",
+        "letterSpacing": "{letterSpacing.tight-2}"
       },
       "type": "typography"
     },
     "4": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.heading}",
-        "lineHeight": "160%",
-        "fontSize": "{fontSize.2}",
-        "letterSpacing": "0%"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.none}"
       },
       "type": "typography"
     },
     "5": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.heading}",
-        "lineHeight": "150%",
-        "fontSize": "{fontSize.1}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.1}",
+        "letterSpacing": "{letterSpacing.none}"
       },
       "type": "typography"
     },
     "caps": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.bold}",
-        "lineHeight": "150%",
-        "fontSize": "{fontSize.1}",
-        "letterSpacing": "5%",
-        "textCase": "{textCase.uppercase}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.1}",
+        "letterSpacing": "{letterSpacing.loose-3}",
+        "textTransform": "uppercase"
       },
       "type": "typography"
     }
   },
-  "fontWeight": {
-    "body": {
-      "value": "{fontWeight.regular}",
-      "type": "fontWeights"
-    },
-    "heading": {
-      "value": "{fontWeight.medium}",
-      "type": "fontWeights"
-    }
-  },
+
   "body": {
     "small": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "{lineHeight.body}",
-        "fontSize": "{fontSize.1}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.1}",
+        "letterSpacing": "{letterSpacing.loose-2}"
       },
       "type": "typography"
     },
     "default": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "{lineHeight.body}",
-        "fontSize": "{fontSize.2}"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.loose-2}"
       },
       "type": "typography"
     },
     "large": {
       "value": {
-        "fontFamily": "{fontFamily.body}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "{lineHeight.body}",
-        "fontSize": "20"
+        "fontFamily": "{fontFamily.default}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.4}",
+        "letterSpacing": "{letterSpacing.loose-2}"
       },
       "type": "typography"
     },
     "mono": {
       "value": {
         "fontFamily": "{fontFamily.monospace}",
-        "fontWeight": "{fontWeight.body}",
-        "lineHeight": "{lineHeight.body}",
-        "fontSize": "{fontSize.2}"
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.none}"
       },
       "type": "typography"
     },
     "mono-bold": {
       "value": {
         "fontFamily": "{fontFamily.monospace}",
-        "lineHeight": "{lineHeight.body}",
-        "fontSize": "{fontSize.2}",
-        "fontWeight": "{fontWeight.bold}"
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.2}",
+        "fontWeight": "{fontWeight.bold}",
+        "letterSpacing": "{letterSpacing.none}"
       },
       "type": "typography"
     }