@adobe/spectrum-tokens 12.0.0-beta.61 → 12.0.0-beta.63

package/CHANGELOG.md

@@ -1,9 +1,6 @@
-# [12.0.0-beta.61](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.60...v12.0.0-beta.61) (2022-12-14)
+# [12.0.0-beta.63](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.62...v12.0.0-beta.63) (2022-12-15)
 
 
-### Features
+### Bug Fixes
 
-* adding color area tokens (DNA-1234) ([28f42bc](https://github.com/adobe/spectrum-tokens/commit/28f42bcc06e5b0be5c6ce26d01c607a3c6b2b90b))
-* adds navigational indicator tokens (DNA-1236) ([c4eb51c](https://github.com/adobe/spectrum-tokens/commit/c4eb51c4e0deb62c11aac5e18f91ccc4a27c42e8))
-* color-slider tokens (DNA-1238) ([524feaf](https://github.com/adobe/spectrum-tokens/commit/524feaf43ead77ffb681e8ca35dc69182064ef95))
-* color-wheeeeeeeeeeeeeeeeel tokens (DNA-1235) ([9c8daac](https://github.com/adobe/spectrum-tokens/commit/9c8daace803665f1cd5196deb5c016dba33a2fb1))
+* trigger release ([44d7637](https://github.com/adobe/spectrum-tokens/commit/44d7637db052d168dd23de42c2246ff66124e128))

package/dist/json/drover.json

@@ -90,6 +90,7 @@
       "chartreuse-visual-color": "rgb(135, 177, 3)",
       "color-area-border-color": "rgb(0, 0, 0)",
       "color-area-border-width": "1px",
+      "color-slider-border-color": "rgb(0, 0, 0)",
       "cyan-100": "rgb(197, 248, 255)",
       "cyan-1000": "rgb(0, 93, 137)",
       "cyan-1100": "rgb(0, 74, 115)",
@@ -251,6 +252,10 @@
       "neutral-background-color-down": "rgb(0, 0, 0)",
       "neutral-background-color-hover": "rgb(0, 0, 0)",
       "neutral-background-color-key-focus": "rgb(0, 0, 0)",
+      "neutral-background-color-selected-default": "rgb(70, 70, 70)",
+      "neutral-background-color-selected-down": "rgb(0, 0, 0)",
+      "neutral-background-color-selected-hover": "rgb(34, 34, 34)",
+      "neutral-background-color-selected-key-focus": "rgb(34, 34, 34)",
       "neutral-content-color-default": "rgb(34, 34, 34)",
       "neutral-content-color-down": "rgb(0, 0, 0)",
       "neutral-content-color-focus": "rgb(0, 0, 0)",
@@ -491,6 +496,7 @@
       "chartreuse-visual-color": "rgb(148, 192, 8)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
+      "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 61, 98)",
       "cyan-1000": "rgb(84, 211, 241)",
       "cyan-1100": "rgb(127, 228, 249)",
@@ -652,6 +658,10 @@
       "neutral-background-color-down": "rgb(63, 63, 63)",
       "neutral-background-color-hover": "rgb(84, 84, 84)",
       "neutral-background-color-key-focus": "rgb(84, 84, 84)",
+      "neutral-background-color-selected-default": "rgb(209, 209, 209)",
+      "neutral-background-color-selected-down": "rgb(255, 255, 255)",
+      "neutral-background-color-selected-hover": "rgb(235, 235, 235)",
+      "neutral-background-color-selected-key-focus": "rgb(235, 235, 235)",
       "neutral-content-color-default": "rgb(235, 235, 235)",
       "neutral-content-color-down": "rgb(255, 255, 255)",
       "neutral-content-color-focus": "rgb(255, 255, 255)",
@@ -892,6 +902,7 @@
       "chartreuse-visual-color": "rgb(138, 180, 3)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
+      "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 41, 68)",
       "cyan-1000": "rgb(57, 199, 234)",
       "cyan-1100": "rgb(96, 216, 243)",
@@ -1053,6 +1064,10 @@
       "neutral-background-color-down": "rgb(48, 48, 48)",
       "neutral-background-color-hover": "rgb(75, 75, 75)",
       "neutral-background-color-key-focus": "rgb(75, 75, 75)",
+      "neutral-background-color-selected-default": "rgb(208, 208, 208)",
+      "neutral-background-color-selected-down": "rgb(255, 255, 255)",
+      "neutral-background-color-selected-hover": "rgb(235, 235, 235)",
+      "neutral-background-color-selected-key-focus": "rgb(235, 235, 235)",
       "neutral-content-color-default": "rgb(235, 235, 235)",
       "neutral-content-color-down": "rgb(255, 255, 255)",
       "neutral-content-color-focus": "rgb(255, 255, 255)",
@@ -1306,11 +1321,12 @@
     "color-area-minimum-width": "64px",
     "color-area-width": "192px",
     "color-control-track-width": "24px",
+    "color-slider-border-opacity": "0.1",
     "color-slider-border-rounding": "4px",
     "color-slider-border-width": "1px",
     "color-slider-length": "192px",
     "color-slider-minimum-length": "200px",
-    "color-wheel-area-margin": "12px",
+    "color-wheel-color-area-margin": "12px",
     "color-wheel-minimum-width": "192px",
     "combo-box-minimum-width-multiplier": "2.5",
     "combo-box-visual-to-field-button-extra-large": "10px",

package/dist/json/variables.json

@@ -564,6 +564,158 @@
       }
     }
   },
+  "neutral-background-color-selected-default": {
+    "sets": {
+      "spectrum": {
+        "ref": "{gray-700}",
+        "sets": {
+          "light": {
+            "value": "rgb(70, 70, 70)"
+          },
+          "dark": {
+            "value": "rgb(209, 209, 209)"
+          },
+          "darkest": {
+            "value": "rgb(208, 208, 208)"
+          },
+          "wireframe": {
+            "value": "rgb(78, 112, 187)"
+          }
+        }
+      },
+      "express": {
+        "ref": "{gray-800}",
+        "sets": {
+          "light": {
+            "value": "rgb(34, 34, 34)"
+          },
+          "dark": {
+            "value": "rgb(235, 235, 235)"
+          },
+          "darkest": {
+            "value": "rgb(235, 235, 235)"
+          },
+          "wireframe": {
+            "value": "rgb(73, 110, 194)"
+          }
+        }
+      }
+    }
+  },
+  "neutral-background-color-selected-hover": {
+    "sets": {
+      "spectrum": {
+        "ref": "{gray-800}",
+        "sets": {
+          "light": {
+            "value": "rgb(34, 34, 34)"
+          },
+          "dark": {
+            "value": "rgb(235, 235, 235)"
+          },
+          "darkest": {
+            "value": "rgb(235, 235, 235)"
+          },
+          "wireframe": {
+            "value": "rgb(73, 110, 194)"
+          }
+        }
+      },
+      "express": {
+        "ref": "{gray-900}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 0, 0)"
+          },
+          "dark": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "darkest": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "wireframe": {
+            "value": "rgb(72, 110, 194)"
+          }
+        }
+      }
+    }
+  },
+  "neutral-background-color-selected-down": {
+    "sets": {
+      "spectrum": {
+        "ref": "{gray-900}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 0, 0)"
+          },
+          "dark": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "darkest": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "wireframe": {
+            "value": "rgb(72, 110, 194)"
+          }
+        }
+      },
+      "express": {
+        "ref": "{gray-900}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 0, 0)"
+          },
+          "dark": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "darkest": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "wireframe": {
+            "value": "rgb(72, 110, 194)"
+          }
+        }
+      }
+    }
+  },
+  "neutral-background-color-selected-key-focus": {
+    "sets": {
+      "spectrum": {
+        "ref": "{gray-800}",
+        "sets": {
+          "light": {
+            "value": "rgb(34, 34, 34)"
+          },
+          "dark": {
+            "value": "rgb(235, 235, 235)"
+          },
+          "darkest": {
+            "value": "rgb(235, 235, 235)"
+          },
+          "wireframe": {
+            "value": "rgb(73, 110, 194)"
+          }
+        }
+      },
+      "express": {
+        "ref": "{gray-900}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 0, 0)"
+          },
+          "dark": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "darkest": {
+            "value": "rgb(255, 255, 255)"
+          },
+          "wireframe": {
+            "value": "rgb(72, 110, 194)"
+          }
+        }
+      }
+    }
+  },
   "neutral-subdued-background-color-default": {
     "sets": {
       "light": {
@@ -5547,26 +5699,6 @@
       }
     }
   },
-  "color-area-border-color": {
-    "ref": "{gray-900}",
-    "sets": {
-      "light": {
-        "value": "rgb(0, 0, 0)"
-      },
-      "dark": {
-        "value": "rgb(255, 255, 255)"
-      },
-      "darkest": {
-        "value": "rgb(255, 255, 255)"
-      },
-      "wireframe": {
-        "value": "rgb(72, 110, 194)"
-      }
-    }
-  },
-  "color-area-border-opacity": {
-    "value": "0.1"
-  },
   "swatch-border-color": {
     "ref": "{gray-900}",
     "sets": {
@@ -5681,6 +5813,46 @@
     "ref": "{opacity-disabled}",
     "value": "0.3"
   },
+  "color-area-border-color": {
+    "ref": "{gray-900}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 0, 0)"
+      },
+      "dark": {
+        "value": "rgb(255, 255, 255)"
+      },
+      "darkest": {
+        "value": "rgb(255, 255, 255)"
+      },
+      "wireframe": {
+        "value": "rgb(72, 110, 194)"
+      }
+    }
+  },
+  "color-area-border-opacity": {
+    "value": "0.1"
+  },
+  "color-slider-border-color": {
+    "ref": "{gray-900}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 0, 0)"
+      },
+      "dark": {
+        "value": "rgb(255, 255, 255)"
+      },
+      "darkest": {
+        "value": "rgb(255, 255, 255)"
+      },
+      "wireframe": {
+        "value": "rgb(72, 110, 194)"
+      }
+    }
+  },
+  "color-slider-border-opacity": {
+    "value": "0.1"
+  },
   "white": {
     "value": "rgb(255, 255, 255)"
   },
@@ -9021,155 +9193,55 @@
       }
     }
   },
-  "color-area-width": {
+  "switch-control-width-small": {
     "sets": {
-      "desktop": {
-        "value": "192px"
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "23px"
+          },
+          "mobile": {
+            "value": "32px"
+          }
+        }
       },
-      "mobile": {
-        "value": "240px"
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "25px"
+          },
+          "mobile": {
+            "value": "32px"
+          }
+        }
       }
     }
   },
-  "color-area-minimum-width": {
+  "switch-control-width-medium": {
     "sets": {
-      "desktop": {
-        "value": "64px"
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "26px"
+          },
+          "mobile": {
+            "value": "36px"
+          }
+        }
       },
-      "mobile": {
-        "value": "80px"
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "28px"
+          },
+          "mobile": {
+            "value": "36px"
+          }
+        }
       }
     }
   },
-  "color-area-height": {
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  },
-  "color-area-minimum-height": {
-    "sets": {
-      "desktop": {
-        "value": "64px"
-      },
-      "mobile": {
-        "value": "80px"
-      }
-    }
-  },
-  "color-area-border-width": {
-    "ref": "{border-width-100}",
-    "sets": {
-      "spectrum": {
-        "value": "1px"
-      },
-      "express": {
-        "value": "2px"
-      }
-    }
-  },
-  "color-area-border-rounding": {
-    "ref": "{corner-radius-100}",
-    "sets": {
-      "spectrum": {},
-      "express": {}
-    }
-  },
-  "color-wheel-minimum-width": {
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  },
-  "color-wheel-area-margin": {
-    "value": "12px"
-  },
-  "color-control-track-width": {
-    "sets": {
-      "desktop": {
-        "value": "24px"
-      },
-      "mobile": {
-        "value": "30px"
-      }
-    }
-  },
-  "color-slider-length": {
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  },
-  "color-slider-minimum-length": {
-    "value": "200px"
-  },
-  "color-slider-border-width": {
-    "value": "1px"
-  },
-  "color-slider-border-rounding": {
-    "value": "4px"
-  },
-  "switch-control-width-small": {
-    "sets": {
-      "spectrum": {
-        "sets": {
-          "desktop": {
-            "value": "23px"
-          },
-          "mobile": {
-            "value": "32px"
-          }
-        }
-      },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "25px"
-          },
-          "mobile": {
-            "value": "32px"
-          }
-        }
-      }
-    }
-  },
-  "switch-control-width-medium": {
-    "sets": {
-      "spectrum": {
-        "sets": {
-          "desktop": {
-            "value": "26px"
-          },
-          "mobile": {
-            "value": "36px"
-          }
-        }
-      },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "28px"
-          },
-          "mobile": {
-            "value": "36px"
-          }
-        }
-      }
-    }
-  },
-  "switch-control-width-large": {
+  "switch-control-width-large": {
     "sets": {
       "spectrum": {
         "sets": {
@@ -10058,7 +10130,7 @@
         "value": "336px"
       },
       "mobile": {
-        "value": "420"
+        "value": "420px"
       }
     }
   },
@@ -10249,46 +10321,6 @@
       }
     }
   },
-  "navigational-indicator-top-to-back-icon-small": {
-    "sets": {
-      "desktop": {
-        "value": "7px"
-      },
-      "mobile": {
-        "value": "9px"
-      }
-    }
-  },
-  "navigational-indicator-top-to-back-icon-medium": {
-    "sets": {
-      "desktop": {
-        "value": "11px"
-      },
-      "mobile": {
-        "value": "13px"
-      }
-    }
-  },
-  "navigational-indicator-top-to-back-icon-large": {
-    "sets": {
-      "desktop": {
-        "value": "14px"
-      },
-      "mobile": {
-        "value": "17px"
-      }
-    }
-  },
-  "navigational-indicator-top-to-back-icon-extra-large": {
-    "sets": {
-      "desktop": {
-        "value": "17px"
-      },
-      "mobile": {
-        "value": "22px"
-      }
-    }
-  },
   "in-line-alert-minimum-width": {
     "value": "240px"
   },
@@ -11461,6 +11493,96 @@
       }
     }
   },
+  "color-area-width": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-area-minimum-width": {
+    "sets": {
+      "desktop": {
+        "value": "64px"
+      },
+      "mobile": {
+        "value": "80px"
+      }
+    }
+  },
+  "color-area-height": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-area-minimum-height": {
+    "sets": {
+      "desktop": {
+        "value": "64px"
+      },
+      "mobile": {
+        "value": "80px"
+      }
+    }
+  },
+  "color-area-border-width": {
+    "ref": "{border-width-100}",
+    "sets": {
+      "spectrum": {
+        "value": "1px"
+      },
+      "express": {
+        "value": "2px"
+      }
+    }
+  },
+  "color-area-border-rounding": {
+    "ref": "{corner-radius-100}",
+    "sets": {
+      "spectrum": {},
+      "express": {}
+    }
+  },
+  "color-wheel-minimum-width": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-wheel-color-area-margin": {
+    "value": "12px"
+  },
+  "color-slider-length": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-slider-minimum-length": {
+    "value": "200px"
+  },
+  "color-slider-border-width": {
+    "value": "1px"
+  },
+  "color-slider-border-rounding": {
+    "value": "4px"
+  },
   "corner-radius-75": {
     "sets": {
       "spectrum": {
@@ -12784,6 +12906,56 @@
   "text-underline-gap": {
     "value": "1px"
   },
+  "navigational-indicator-top-to-back-icon-small": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-medium": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-large": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "color-control-track-width": {
+    "sets": {
+      "desktop": {
+        "value": "24px"
+      },
+      "mobile": {
+        "value": "30px"
+      }
+    }
+  },
   "accent-color-100": {
     "sets": {
       "spectrum": {
@@ -14473,6 +14645,18 @@
   "letter-spacing-cjk": {
     "value": "0.05em"
   },
+  "heading-sans-serif-font-family": {
+    "ref": "{font-family-sans-serif}",
+    "value": "Adobe Clean"
+  },
+  "heading-serif-font-family": {
+    "ref": "{font-family-serif}",
+    "value": "Adobe Clean Serif"
+  },
+  "heading-cjk-font-family": {
+    "ref": "{font-family-cjk}",
+    "value": "Adobe Clean Han"
+  },
   "heading-sans-serif-light-font-weight": {
     "ref": "{font-weight-light}",
     "value": "light"
@@ -14497,10 +14681,6 @@
     "ref": "{font-style-default}",
     "value": "normal"
   },
-  "heading-sans-serif-font-family": {
-    "ref": "{font-family-sans-serif}",
-    "value": "Adobe Clean"
-  },
   "heading-sans-serif-font-weight": {
     "sets": {
       "spectrum": {
@@ -14517,10 +14697,6 @@
     "ref": "{font-style-default}",
     "value": "normal"
   },
-  "heading-serif-font-family": {
-    "ref": "{font-family-serif}",
-    "value": "Adobe Clean Serif"
-  },
   "heading-serif-font-weight": {
     "sets": {
       "spectrum": {
@@ -14537,10 +14713,6 @@
     "ref": "{font-style-default}",
     "value": "normal"
   },
-  "heading-cjk-font-family": {
-    "ref": "{font-family-cjk}",
-    "value": "Adobe Clean Han"
-  },
   "heading-cjk-font-weight": {
     "sets": {
       "spectrum": {
@@ -14919,6 +15091,14 @@
     "ref": "{font-family-sans-serif}",
     "value": "Adobe Clean"
   },
+  "body-serif-font-family": {
+    "ref": "{font-family-serif}",
+    "value": "Adobe Clean Serif"
+  },
+  "body-cjk-font-family": {
+    "ref": "{font-family-cjk}",
+    "value": "Adobe Clean Han"
+  },
   "body-sans-serif-font-weight": {
     "ref": "{font-weight-regular}",
     "value": "regular"
@@ -14927,10 +15107,6 @@
     "ref": "{font-style-default}",
     "value": "normal"
   },
-  "body-serif-font-family": {
-    "ref": "{font-family-serif}",
-    "value": "Adobe Clean Serif"
-  },
   "body-serif-font-weight": {
     "ref": "{font-weight-regular}",
     "value": "regular"
@@ -14939,10 +15115,6 @@
     "ref": "{font-style-default}",
     "value": "normal"
   },
-  "body-cjk-font-family": {
-    "ref": "{font-family-cjk}",
-    "value": "Adobe Clean Han"
-  },
   "body-cjk-font-weight": {
     "ref": "{font-weight-regular}",
     "value": "regular"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.0.0-beta.61",
+  "version": "12.0.0-beta.63",
   "description": "",
   "main": "config.js",
   "tokens": "dist/json/variables.json",

package/src/color-aliases.json

@@ -155,6 +155,46 @@
       }
     }
   },
+  "neutral-background-color-selected-default": {
+    "sets": {
+      "spectrum": {
+        "value": "{gray-700}"
+      },
+      "express": {
+        "value": "{gray-800}"
+      }
+    }
+  },
+  "neutral-background-color-selected-hover": {
+    "sets": {
+      "spectrum": {
+        "value": "{gray-800}"
+      },
+      "express": {
+        "value": "{gray-900}"
+      }
+    }
+  },
+  "neutral-background-color-selected-down": {
+    "sets": {
+      "spectrum": {
+        "value": "{gray-900}"
+      },
+      "express": {
+        "value": "{gray-900}"
+      }
+    }
+  },
+  "neutral-background-color-selected-key-focus": {
+    "sets": {
+      "spectrum": {
+        "value": "{gray-800}"
+      },
+      "express": {
+        "value": "{gray-900}"
+      }
+    }
+  },
   "neutral-subdued-background-color-default": {
     "sets": {
       "light": {

package/src/color-component.json

@@ -1,12 +1,4 @@
 {
-  "color-area-border-color": {
-    "component": "color-area",
-    "value": "{gray-900}"
-  },
-  "color-area-border-opacity": {
-    "component": "color-area",
-    "value": "0.1"
-  },
   "swatch-border-color": {
     "component": "swatch",
     "value": "{gray-900}"
@@ -56,5 +48,21 @@
   "avatar-opacity-disabled": {
     "component": "avatar",
     "value": "{opacity-disabled}"
+  },
+  "color-area-border-color": {
+    "component": "color-area",
+    "value": "{gray-900}"
+  },
+  "color-area-border-opacity": {
+    "component": "color-area",
+    "value": "0.1"
+  },
+  "color-slider-border-color": {
+    "component": "color-slider",
+    "value": "{gray-900}"
+  },
+  "color-slider-border-opacity": {
+    "component": "color-slider",
+    "value": "0.1"
   }
 }

package/src/layout-component.json

@@ -199,108 +199,6 @@
       }
     }
   },
-  "color-area-width": {
-    "component": "color-area",
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  },  
-  "color-area-minimum-width": {
-    "component": "color-area",
-    "sets": {
-      "desktop": {
-        "value": "64px"
-      },
-      "mobile": {
-        "value": "80px"
-      }
-    }
-  },  
-  "color-area-height": {
-    "component": "color-area",
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  }, 
-  "color-area-minimum-height": {
-    "component": "color-area",
-    "sets": {
-      "desktop": {
-        "value": "64px"
-      },
-      "mobile": {
-        "value": "80px"
-      }
-    }
-  },  
-  "color-area-border-width": {
-    "component": "color-area",
-    "value": "{border-width-100}"
-  },   
-
-  "color-area-border-rounding": {
-    "component": "color-area",
-    "value": "{corner-radius-100}"
-  }, 
-  "color-wheel-minimum-width": {
-    "component": "color-wheel",
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  },
-  "color-wheel-area-margin": {
-    "component": "color-wheel",
-    "value": "12px"
-  }, 
-  "color-control-track-width": {
-    "component": "color-control",
-    "sets": {
-      "desktop": {
-        "value": "24px"
-      },
-      "mobile": {
-        "value": "30px"
-      }
-    }
-  },
-  "color-slider-length": {
-    "component": "color-slider",
-    "sets": {
-      "desktop": {
-        "value": "192px"
-      },
-      "mobile": {
-        "value": "240px"
-      }
-    }
-  },
-  "color-slider-minimum-length": {
-    "component": "color-slider",
-    "value": "200px"
-  },
-  "color-slider-border-width": {
-    "component": "color-slider",
-    "value": "1px"
-  },
-  "color-slider-border-rounding": {
-    "component": "color-slider",
-    "value": "4px"
-  },
   "switch-control-width-small": {
     "component": "switch",
     "sets": {
@@ -1309,7 +1207,7 @@
         "value": "336px"
       },
       "mobile": {
-        "value": "420"
+        "value": "420px"
       }
     }
   },
@@ -1433,7 +1331,7 @@
     "value": "5px"
   },
   "progress-bar-minimum-width": {
-    "component": "swatch",
+    "component": "progress-bar",
     "value": "48px"
   },
   "progress-bar-maximum-width": {
@@ -1525,50 +1423,6 @@
       }
     }
   },
-  "navigational-indicator-top-to-back-icon-small": {
-    "component": "navigational-indicator",
-    "sets": {
-      "desktop": {
-        "value": "7px"
-      },
-      "mobile": {
-        "value": "9px"
-      }
-    }
-  },
-  "navigational-indicator-top-to-back-icon-medium": {
-    "component": "navigational-indicator",
-    "sets": {
-      "desktop": {
-        "value": "11px"
-      },
-      "mobile": {
-        "value": "13px"
-      }
-    }
-  },
-  "navigational-indicator-top-to-back-icon-large": {
-    "component": "navigational-indicator",
-    "sets": {
-      "desktop": {
-        "value": "14px"
-      },
-      "mobile": {
-        "value": "17px"
-      }
-    }
-  },
-  "navigational-indicator-top-to-back-icon-extra-large": {
-    "component": "navigational-indicator",
-    "sets": {
-      "desktop": {
-        "value": "17px"
-      },
-      "mobile": {
-        "value": "22px"
-      }
-    }
-  },
   "in-line-alert-minimum-width": {
     "component": "in-line-alert",
     "value": "240px"
@@ -2188,6 +2042,7 @@
     }
   },
   "picker-visual-to-disclosure-icon-medium": {
+    "component": "picker",
     "sets": {
       "desktop": {
         "value": "8px"
@@ -2800,7 +2655,7 @@
     }
   },
   "rating-indicator-width": {
-    "component": "rating-indicator",
+    "component": "rating",
     "sets": {
       "desktop": {
         "value": "18px"
@@ -2811,7 +2666,7 @@
     }
   },
   "rating-indicator-to-icon": {
-    "component": "rating-indicator",
+    "component": "rating",
     "sets": {
       "desktop": {
         "value": "4px"
@@ -2820,5 +2675,95 @@
         "value": "5px"
       }
     }
+  },
+  "color-area-width": {
+    "component": "color-area",
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-area-minimum-width": {
+    "component": "color-area",
+    "sets": {
+      "desktop": {
+        "value": "64px"
+      },
+      "mobile": {
+        "value": "80px"
+      }
+    }
+  },
+  "color-area-height": {
+    "component": "color-area",
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-area-minimum-height": {
+    "component": "color-area",
+    "sets": {
+      "desktop": {
+        "value": "64px"
+      },
+      "mobile": {
+        "value": "80px"
+      }
+    }
+  },
+  "color-area-border-width": {
+    "component": "color-area",
+    "value": "{border-width-100}"
+  },
+  "color-area-border-rounding": {
+    "component": "color-area",
+    "value": "{corner-radius-100}"
+  },
+  "color-wheel-minimum-width": {
+    "component": "color-wheel",
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-wheel-color-area-margin": {
+    "component": "color-wheel",
+    "value": "12px"
+  },
+  "color-slider-length": {
+    "component": "color-slider",
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-slider-minimum-length": {
+    "component": "color-slider",
+    "value": "200px"
+  },
+  "color-slider-border-width": {
+    "component": "color-slider",
+    "value": "1px"
+  },
+  "color-slider-border-rounding": {
+    "component": "color-slider",
+    "value": "4px"
   }
 }

package/src/layout.json

@@ -1321,5 +1321,55 @@
   },
   "text-underline-gap": {
     "value": "1px"
+  },
+  "navigational-indicator-top-to-back-icon-small": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-medium": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-large": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "color-control-track-width": {
+    "sets": {
+      "desktop": {
+        "value": "24px"
+      },
+      "mobile": {
+        "value": "30px"
+      }
+    }
   }
 }

package/src/typography.json

@@ -203,6 +203,18 @@
   "letter-spacing-cjk": {
     "value": "0.05em"
   },
+  "heading-sans-serif-font-family": {
+    "component": "heading",
+    "value": "{font-family-sans-serif}"
+  },
+  "heading-serif-font-family": {
+    "component": "heading",
+    "value": "{font-family-serif}"
+  },
+  "heading-cjk-font-family": {
+    "component": "heading",
+    "value": "{font-family-cjk}"
+  },
   "heading-sans-serif-light-font-weight": {
     "component": "heading",
     "value": "{font-weight-light}"
@@ -227,10 +239,6 @@
     "component": "heading",
     "value": "{font-style-default}"
   },
-  "heading-sans-serif-font-family": {
-    "component": "heading",
-    "value": "{font-family-sans-serif}"
-  },
   "heading-sans-serif-font-weight": {
     "component": "heading",
     "sets": {
@@ -246,10 +254,6 @@
     "component": "heading",
     "value": "{font-style-default}"
   },
-  "heading-serif-font-family": {
-    "component": "heading",
-    "value": "{font-family-serif}"
-  },
   "heading-serif-font-weight": {
     "component": "heading",
     "sets": {
@@ -265,10 +269,6 @@
     "component": "heading",
     "value": "{font-style-default}"
   },
-  "heading-cjk-font-family": {
-    "component": "heading",
-    "value": "{font-family-cjk}"
-  },
   "heading-cjk-font-weight": {
     "component": "heading",
     "sets": {
@@ -590,6 +590,14 @@
     "component": "body",
     "value": "{font-family-sans-serif}"
   },
+  "body-serif-font-family": {
+    "component": "body",
+    "value": "{font-family-serif}"
+  },
+  "body-cjk-font-family": {
+    "component": "body",
+    "value": "{font-family-cjk}"
+  },
   "body-sans-serif-font-weight": {
     "component": "body",
     "value": "{font-weight-regular}"
@@ -598,10 +606,6 @@
     "component": "body",
     "value": "{font-style-default}"
   },
-  "body-serif-font-family": {
-    "component": "body",
-    "value": "{font-family-serif}"
-  },
   "body-serif-font-weight": {
     "component": "body",
     "value": "{font-weight-regular}"
@@ -610,10 +614,6 @@
     "component": "body",
     "value": "{font-style-default}"
   },
-  "body-cjk-font-family": {
-    "component": "body",
-    "value": "{font-family-cjk}"
-  },
   "body-cjk-font-weight": {
     "component": "body",
     "value": "{font-weight-regular}"

package/test/drover.test.js

@@ -1,45 +0,0 @@
-const { readFile } = require("fs/promises");
-
-const getValue = (obj, setName) => {
-  if (obj.hasOwnProperty("value")) {
-    return obj.value;
-  } else if (obj.hasOwnProperty("sets")) {
-    if (obj.sets.hasOwnProperty(setName)) {
-      return getValue(obj.sets[setName], setName);
-    } else if (obj.sets.hasOwnProperty("spectrum")) {
-      return getValue(obj.sets.spectrum, setName);
-    }
-  }
-};
-
-const vars = { light: {}, dark: {}, darkest: {} };
-let variables;
-let drover;
-
-beforeAll(async () => {
-  variables = JSON.parse(
-    await readFile("dist/json/variables.json", { encoding: "utf8" })
-  );
-  drover = JSON.parse(
-    await readFile("dist/json/drover.json", { encoding: "utf8" })
-  );
-  Object.keys(drover.colorThemes.light).forEach((tokenName) => {
-    vars.light[tokenName] = getValue(variables[tokenName], "light");
-  });
-  Object.keys(drover.colorThemes.dark).forEach((tokenName) => {
-    vars.dark[tokenName] = getValue(variables[tokenName], "dark");
-  });
-  Object.keys(drover.colorThemes.darkest).forEach((tokenName) => {
-    vars.darkest[tokenName] = getValue(variables[tokenName], "darkest");
-  });
-});
-
-test("Drover should match light variable values", () => {
-  expect(drover.colorThemes.light).toMatchObject(vars.light);
-});
-test("Drover should match dark variable values", () => {
-  expect(drover.colorThemes.dark).toMatchObject(vars.dark);
-});
-test("Drover should match darkest variable values", () => {
-  expect(drover.colorThemes.darkest).toMatchObject(vars.darkest);
-});