@adobe/spectrum-tokens 12.0.0-beta.66 → 12.0.0-beta.68

package/CHANGELOG.md

@@ -1,8 +1,15 @@
-# [12.0.0-beta.66](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.65...v12.0.0-beta.66) (2023-01-11)
+# [12.0.0-beta.68](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.67...v12.0.0-beta.68) (2023-02-11)
+
+
+### Bug Fixes
+
+* fixed missing token sets for color loupe ([7de5d5b](https://github.com/adobe/spectrum-tokens/commit/7de5d5bf4148e565336b65aed8691275896c0b87))
 
 
 ### Features
 
-* added illustrated-message tokens ([3326f28](https://github.com/adobe/spectrum-tokens/commit/3326f28d285a7cbbc9c97d74d7ca032e2442a79f))
-* added missing field-edge-to-visual-quiet token ([4250036](https://github.com/adobe/spectrum-tokens/commit/4250036a7923837a2e28937812b2488c40f29b61))
-* added search-field tokens ([3f8f544](https://github.com/adobe/spectrum-tokens/commit/3f8f54493eec685897429b6379345889073f84a3))
+* added detail typography tokens for uppercase, DNA-1257 ([a4fce7e](https://github.com/adobe/spectrum-tokens/commit/a4fce7e3b197f23f92a5f8f869d4cf11f32339dc))
+* added dropzone tokens, DNA-1258 ([c0ce9df](https://github.com/adobe/spectrum-tokens/commit/c0ce9dfe39f0a9a22ac5b3ba31bebb4c80aa48e4))
+* added new alert dialog typography tokens, DNA-1255 ([f590663](https://github.com/adobe/spectrum-tokens/commit/f590663292178e5d261013d4e830de487fcadd25))
+* new typography color tokens, DNA-1254 ([b836ae5](https://github.com/adobe/spectrum-tokens/commit/b836ae5e47014e6a5eca23e9e574b5f6d27a04b1))
+* updated color-wheel-minimum-width and added color-wheel-width, DNA-1256 ([57ee5f4](https://github.com/adobe/spectrum-tokens/commit/57ee5f425abde5941c486224c91b3bd4d82a3261))

package/README.md

@@ -1,19 +1,15 @@
 # Spectrum Tokens
 
 ---
-  
-  
+
 # Note: This project is in beta right now.
 
-  
-  
---- 
+---
 
 Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.
 
 Design tokens are directly integrated into our component libraries, UI kits, and the Spectrum XD plugin. They cover the various options of platform scales, color themes, component states, and more. We also offer teams a variety of token types to use directly within their products if they are not using a Spectrum component library.
 
-
 ## Getting started
 
 Start by installing all the project dependencies.

package/commitlint.config.cjs

@@ -16,4 +16,4 @@ governing permissions and limitations under the License.
 
 module.exports = {
   extends: ["@commitlint/config-conventional"],
-};
+};

package/dist/json/drover.json

@@ -55,7 +55,9 @@
       "blue-900": "rgb(2, 101, 220)",
       "blue-background-color-default": "rgb(2, 101, 220)",
       "blue-visual-color": "rgb(20, 122, 243)",
+      "body-color": "rgb(34, 34, 34)",
       "border-width-100": "1px",
+      "card-selection-background-color": "rgb(248, 248, 248)",
       "celery-100": "rgb(205, 252, 191)",
       "celery-1000": "rgb(0, 103, 15)",
       "celery-1100": "rgb(0, 83, 13)",
@@ -88,8 +90,16 @@
       "chartreuse-900": "rgb(87, 116, 0)",
       "chartreuse-background-color-default": "rgb(152, 197, 10)",
       "chartreuse-visual-color": "rgb(135, 177, 3)",
+      "code-color": "rgb(34, 34, 34)",
       "color-area-border-color": "rgb(0, 0, 0)",
       "color-area-border-width": "1px",
+      "color-loupe-bottom-to-color-handle": "12px",
+      "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
+      "color-loupe-height": "64px",
+      "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
+      "color-loupe-inner-border-width": "2px",
+      "color-loupe-outer-border": "rgb(255, 255, 255)",
+      "color-loupe-width": "48px",
       "color-slider-border-color": "rgb(0, 0, 0)",
       "cyan-100": "rgb(197, 248, 255)",
       "cyan-1000": "rgb(0, 93, 137)",
@@ -107,6 +117,7 @@
       "cyan-900": "rgb(0, 113, 159)",
       "cyan-background-color-default": "rgb(0, 113, 159)",
       "cyan-visual-color": "rgb(18, 176, 218)",
+      "detail-color": "rgb(0, 0, 0)",
       "disabled-background-color": "rgb(230, 230, 230)",
       "disabled-border-color": "rgb(213, 213, 213)",
       "disabled-content-color": "rgb(177, 177, 177)",
@@ -117,6 +128,7 @@
       "disabled-static-white-border-color": "rgba(255, 255, 255, 0.25)",
       "disabled-static-white-content-color": "rgba(255, 255, 255, 0.55)",
       "drop-shadow-color": "rgba(0, 0, 0, 0.15)",
+      "drop-zone-background-color": "rgb(20, 122, 243)",
       "focus-indicator-color": "rgb(20, 122, 243)",
       "fuchsia-100": "rgb(255, 233, 252)",
       "fuchsia-1000": "rgb(157, 3, 158)",
@@ -164,6 +176,7 @@
       "green-background-color-default": "rgb(0, 122, 77)",
       "green-visual-color": "rgb(21, 164, 110)",
       "heading-cjk-font-weight": "extra-bold",
+      "heading-color": "rgb(0, 0, 0)",
       "heading-sans-serif-emphasized-font-weight": "bold",
       "heading-sans-serif-font-weight": "bold",
       "heading-serif-emphasized-font-weight": "bold",
@@ -461,7 +474,9 @@
       "blue-900": "rgb(114, 183, 249)",
       "blue-background-color-default": "rgb(52, 143, 244)",
       "blue-visual-color": "rgb(114, 183, 249)",
+      "body-color": "rgb(235, 235, 235)",
       "border-width-100": "1px",
+      "card-selection-background-color": "rgb(50, 50, 50)",
       "celery-100": "rgb(0, 69, 10)",
       "celery-1000": "rgb(105, 220, 99)",
       "celery-1100": "rgb(142, 235, 127)",
@@ -494,8 +509,16 @@
       "chartreuse-900": "rgb(148, 192, 8)",
       "chartreuse-background-color-default": "rgb(148, 192, 8)",
       "chartreuse-visual-color": "rgb(148, 192, 8)",
+      "code-color": "rgb(235, 235, 235)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
+      "color-loupe-bottom-to-color-handle": "12px",
+      "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
+      "color-loupe-height": "64px",
+      "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
+      "color-loupe-inner-border-width": "2px",
+      "color-loupe-outer-border": "rgb(255, 255, 255)",
+      "color-loupe-width": "48px",
       "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 61, 98)",
       "cyan-1000": "rgb(84, 211, 241)",
@@ -513,6 +536,7 @@
       "cyan-900": "rgb(44, 193, 230)",
       "cyan-background-color-default": "rgb(0, 153, 198)",
       "cyan-visual-color": "rgb(44, 193, 230)",
+      "detail-color": "rgb(255, 255, 255)",
       "disabled-background-color": "rgb(63, 63, 63)",
       "disabled-border-color": "rgb(84, 84, 84)",
       "disabled-content-color": "rgb(112, 112, 112)",
@@ -523,6 +547,7 @@
       "disabled-static-white-border-color": "rgba(255, 255, 255, 0.25)",
       "disabled-static-white-content-color": "rgba(255, 255, 255, 0.55)",
       "drop-shadow-color": "rgba(0, 0, 0, 0.5)",
+      "drop-zone-background-color": "rgb(114, 183, 249)",
       "focus-indicator-color": "rgb(84, 163, 246)",
       "fuchsia-100": "rgb(107, 3, 106)",
       "fuchsia-1000": "rgb(250, 168, 245)",
@@ -570,6 +595,7 @@
       "green-background-color-default": "rgb(18, 162, 108)",
       "green-visual-color": "rgb(43, 180, 125)",
       "heading-cjk-font-weight": "extra-bold",
+      "heading-color": "rgb(255, 255, 255)",
       "heading-sans-serif-emphasized-font-weight": "bold",
       "heading-sans-serif-font-weight": "bold",
       "heading-serif-emphasized-font-weight": "bold",
@@ -867,7 +893,9 @@
       "blue-900": "rgb(94, 170, 247)",
       "blue-background-color-default": "rgb(29, 128, 245)",
       "blue-visual-color": "rgb(94, 170, 247)",
+      "body-color": "rgb(235, 235, 235)",
       "border-width-100": "1px",
+      "card-selection-background-color": "rgb(29, 29, 29)",
       "celery-100": "rgb(0, 47, 7)",
       "celery-1000": "rgb(80, 208, 82)",
       "celery-1100": "rgb(115, 224, 107)",
@@ -900,8 +928,16 @@
       "chartreuse-900": "rgb(138, 180, 3)",
       "chartreuse-background-color-default": "rgb(138, 180, 3)",
       "chartreuse-visual-color": "rgb(138, 180, 3)",
+      "code-color": "rgb(235, 235, 235)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
+      "color-loupe-bottom-to-color-handle": "12px",
+      "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
+      "color-loupe-height": "64px",
+      "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
+      "color-loupe-inner-border-width": "2px",
+      "color-loupe-outer-border": "rgb(255, 255, 255)",
+      "color-loupe-width": "48px",
       "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 41, 68)",
       "cyan-1000": "rgb(57, 199, 234)",
@@ -919,6 +955,7 @@
       "cyan-900": "rgb(23, 180, 221)",
       "cyan-background-color-default": "rgb(0, 140, 186)",
       "cyan-visual-color": "rgb(23, 180, 221)",
+      "detail-color": "rgb(255, 255, 255)",
       "disabled-background-color": "rgb(48, 48, 48)",
       "disabled-border-color": "rgb(75, 75, 75)",
       "disabled-content-color": "rgb(106, 106, 106)",
@@ -929,6 +966,7 @@
       "disabled-static-white-border-color": "rgba(255, 255, 255, 0.25)",
       "disabled-static-white-content-color": "rgba(255, 255, 255, 0.55)",
       "drop-shadow-color": "rgba(0, 0, 0, 0.8)",
+      "drop-zone-background-color": "rgb(94, 170, 247)",
       "focus-indicator-color": "rgb(64, 150, 243)",
       "fuchsia-100": "rgb(70, 14, 68)",
       "fuchsia-1000": "rgb(246, 149, 243)",
@@ -976,6 +1014,7 @@
       "green-background-color-default": "rgb(0, 149, 98)",
       "green-visual-color": "rgb(28, 168, 114)",
       "heading-cjk-font-weight": "extra-bold",
+      "heading-color": "rgb(255, 255, 255)",
       "heading-sans-serif-emphasized-font-weight": "bold",
       "heading-sans-serif-font-weight": "bold",
       "heading-serif-emphasized-font-weight": "bold",
@@ -1245,8 +1284,10 @@
     "alert-banner-to-top-text": "14px",
     "alert-banner-to-top-workflow-icon": "15px",
     "alert-banner-width": "832px",
+    "alert-dialog-description-size": "14px",
     "alert-dialog-maximum-width": "480px",
     "alert-dialog-minimum-width": "288px",
+    "alert-dialog-title-size": "18px",
     "avatar-opacity-disabled": "0.3",
     "avatar-size-100": "20px",
     "avatar-size-200": "22px",
@@ -1295,6 +1336,10 @@
     "breadcrumbs-truncated-menu-to-bottom-text": "0px",
     "breadcrumbs-truncated-menu-to-separator-icon": "0px",
     "button-minimum-width-multiplier": "2.25",
+    "card-minimum-width": "100px",
+    "card-preview-minimum-height": "130px",
+    "card-selection-background-color-opacity": "0.95",
+    "card-selection-background-size": "40px",
     "character-count-to-field-quiet-extra-large": "-4px",
     "character-count-to-field-quiet-large": "-3px",
     "character-count-to-field-quiet-medium": "-3px",
@@ -1324,13 +1369,21 @@
     "color-area-minimum-width": "64px",
     "color-area-width": "192px",
     "color-control-track-width": "24px",
+    "color-loupe-bottom-to-color-handle": "12px",
+    "color-loupe-drop-shadow-blur": "8px",
+    "color-loupe-drop-shadow-y": "2px",
+    "color-loupe-height": "64px",
+    "color-loupe-inner-border-width": "2px",
+    "color-loupe-outer-border-width": "2px",
+    "color-loupe-width": "48px",
     "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-color-area-margin": "12px",
-    "color-wheel-minimum-width": "192px",
+    "color-wheel-minimum-width": "175px",
+    "color-wheel-width": "192px",
     "combo-box-minimum-width-multiplier": "2.5",
     "combo-box-visual-to-field-button-extra-large": "10px",
     "combo-box-visual-to-field-button-large": "9px",
@@ -1395,7 +1448,7 @@
     "detail-letter-spacing": "0.06em",
     "detail-line-height": "1.3",
     "detail-margin-bottom-multiplier": "0.25",
-    "detail-margin-top-mulitplier": "0.88888889",
+    "detail-margin-top-multiplier": "0.88888889",
     "detail-size-l": "14px",
     "detail-size-m": "12px",
     "detail-size-s": "11px",
@@ -1410,6 +1463,15 @@
     "drop-shadow-blur": "4px",
     "drop-shadow-x": "0px",
     "drop-shadow-y": "1px",
+    "drop-zone-background-color-opacity": "0.1",
+    "drop-zone-background-color-opacity-filled": "0.3",
+    "drop-zone-body-size": "14px",
+    "drop-zone-border-dash-gap": "4px",
+    "drop-zone-border-dash-length": "8px",
+    "drop-zone-cjk-title-size": "20px",
+    "drop-zone-content-maximum-width": "380px",
+    "drop-zone-title-size": "22px",
+    "drop-zone-width": "428px",
     "field-edge-to-alert-icon-extra-large": "18px",
     "field-edge-to-alert-icon-large": "15px",
     "field-edge-to-alert-icon-medium": "12px",

package/dist/json/variables.json

@@ -5853,6 +5853,211 @@
   "color-slider-border-opacity": {
     "value": "0.1"
   },
+  "color-loupe-drop-shadow-color": {
+    "ref": "{transparent-black-300}",
+    "value": "rgba(0, 0, 0, 0.25)"
+  },
+  "color-loupe-drop-shadow-y": {
+    "value": "2px"
+  },
+  "color-loupe-drop-shadow-blur": {
+    "value": "8px"
+  },
+  "color-loupe-inner-border": {
+    "ref": "{transparent-black-200}",
+    "value": "rgba(0, 0, 0, 0.1)"
+  },
+  "color-loupe-outer-border": {
+    "ref": "{white}",
+    "value": "rgb(255, 255, 255)"
+  },
+  "card-selection-background-color": {
+    "ref": "{gray-100}",
+    "sets": {
+      "light": {
+        "value": "rgb(248, 248, 248)"
+      },
+      "dark": {
+        "value": "rgb(50, 50, 50)"
+      },
+      "darkest": {
+        "value": "rgb(29, 29, 29)"
+      },
+      "wireframe": {
+        "value": "rgb(244, 246, 252)"
+      }
+    }
+  },
+  "card-selection-background-color-opacity": {
+    "value": "0.95"
+  },
+  "drop-zone-background-color": {
+    "ref": "{accent-visual-color}",
+    "sets": {
+      "light": {
+        "ref": "{accent-color-800}",
+        "sets": {
+          "spectrum": {
+            "ref": "{blue-800}",
+            "sets": {
+              "light": {
+                "value": "rgb(20, 122, 243)"
+              },
+              "dark": {
+                "value": "rgb(84, 163, 246)"
+              },
+              "darkest": {
+                "value": "rgb(64, 150, 243)"
+              },
+              "wireframe": {
+                "value": "rgb(173, 192, 233)"
+              }
+            }
+          },
+          "express": {
+            "ref": "{indigo-800}",
+            "sets": {
+              "light": {
+                "value": "rgb(104, 109, 244)"
+              },
+              "dark": {
+                "value": "rgb(145, 149, 255)"
+              },
+              "darkest": {
+                "value": "rgb(132, 136, 253)"
+              },
+              "wireframe": {
+                "value": "rgb(173, 192, 233)"
+              }
+            }
+          }
+        }
+      },
+      "dark": {
+        "ref": "{accent-color-900}",
+        "sets": {
+          "spectrum": {
+            "ref": "{blue-900}",
+            "sets": {
+              "light": {
+                "value": "rgb(2, 101, 220)"
+              },
+              "dark": {
+                "value": "rgb(114, 183, 249)"
+              },
+              "darkest": {
+                "value": "rgb(94, 170, 247)"
+              },
+              "wireframe": {
+                "value": "rgb(154, 177, 227)"
+              }
+            }
+          },
+          "express": {
+            "ref": "{indigo-900}",
+            "sets": {
+              "light": {
+                "value": "rgb(82, 88, 228)"
+              },
+              "dark": {
+                "value": "rgb(167, 170, 255)"
+              },
+              "darkest": {
+                "value": "rgb(153, 157, 255)"
+              },
+              "wireframe": {
+                "value": "rgb(154, 177, 227)"
+              }
+            }
+          }
+        }
+      },
+      "darkest": {
+        "ref": "{accent-color-900}",
+        "sets": {
+          "spectrum": {
+            "ref": "{blue-900}",
+            "sets": {
+              "light": {
+                "value": "rgb(2, 101, 220)"
+              },
+              "dark": {
+                "value": "rgb(114, 183, 249)"
+              },
+              "darkest": {
+                "value": "rgb(94, 170, 247)"
+              },
+              "wireframe": {
+                "value": "rgb(154, 177, 227)"
+              }
+            }
+          },
+          "express": {
+            "ref": "{indigo-900}",
+            "sets": {
+              "light": {
+                "value": "rgb(82, 88, 228)"
+              },
+              "dark": {
+                "value": "rgb(167, 170, 255)"
+              },
+              "darkest": {
+                "value": "rgb(153, 157, 255)"
+              },
+              "wireframe": {
+                "value": "rgb(154, 177, 227)"
+              }
+            }
+          }
+        }
+      },
+      "wireframe": {
+        "ref": "{accent-color-900}",
+        "sets": {
+          "spectrum": {
+            "ref": "{blue-900}",
+            "sets": {
+              "light": {
+                "value": "rgb(2, 101, 220)"
+              },
+              "dark": {
+                "value": "rgb(114, 183, 249)"
+              },
+              "darkest": {
+                "value": "rgb(94, 170, 247)"
+              },
+              "wireframe": {
+                "value": "rgb(154, 177, 227)"
+              }
+            }
+          },
+          "express": {
+            "ref": "{indigo-900}",
+            "sets": {
+              "light": {
+                "value": "rgb(82, 88, 228)"
+              },
+              "dark": {
+                "value": "rgb(167, 170, 255)"
+              },
+              "darkest": {
+                "value": "rgb(153, 157, 255)"
+              },
+              "wireframe": {
+                "value": "rgb(154, 177, 227)"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "drop-zone-background-color-opacity": {
+    "value": "0.1"
+  },
+  "drop-zone-background-color-opacity-filled": {
+    "value": "0.3"
+  },
   "white": {
     "value": "rgb(255, 255, 255)"
   },
@@ -11136,6 +11341,58 @@
   "alert-dialog-maximum-width": {
     "value": "480px"
   },
+  "alert-dialog-title-size": {
+    "sets": {
+      "desktop": {
+        "ref": "{heading-size-s}",
+        "sets": {
+          "desktop": {
+            "value": "18px"
+          },
+          "mobile": {
+            "value": "22px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{heading-size-xs}",
+        "sets": {
+          "desktop": {
+            "value": "16px"
+          },
+          "mobile": {
+            "value": "19px"
+          }
+        }
+      }
+    }
+  },
+  "alert-dialog-description-size": {
+    "sets": {
+      "desktop": {
+        "ref": "{body-size-s}",
+        "sets": {
+          "desktop": {
+            "value": "14px"
+          },
+          "mobile": {
+            "value": "17px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{body-size-xs}",
+        "sets": {
+          "desktop": {
+            "value": "12px"
+          },
+          "mobile": {
+            "value": "15px"
+          }
+        }
+      }
+    }
+  },
   "opacity-checkerboard-square-size": {
     "sets": {
       "desktop": {
@@ -11551,7 +11808,7 @@
       "express": {}
     }
   },
-  "color-wheel-minimum-width": {
+  "color-wheel-width": {
     "sets": {
       "desktop": {
         "value": "192px"
@@ -11561,6 +11818,16 @@
       }
     }
   },
+  "color-wheel-minimum-width": {
+    "sets": {
+      "desktop": {
+        "value": "175px"
+      },
+      "mobile": {
+        "value": "219px"
+      }
+    }
+  },
   "color-wheel-color-area-margin": {
     "value": "12px"
   },
@@ -11670,6 +11937,168 @@
   "search-field-minimum-width-multiplier": {
     "value": "3"
   },
+  "color-loupe-height": {
+    "sets": {
+      "spectrum": {
+        "value": "64px"
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "40px"
+          },
+          "mobile": {
+            "value": "50px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-width": {
+    "sets": {
+      "spectrum": {
+        "value": "48px"
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "32px"
+          },
+          "mobile": {
+            "value": "40px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-bottom-to-color-handle": {
+    "sets": {
+      "spectrum": {
+        "value": "12px"
+      },
+      "express": {
+        "value": "6px"
+      }
+    }
+  },
+  "color-loupe-outer-border-width": {
+    "ref": "{border-width-200}",
+    "value": "2px"
+  },
+  "color-loupe-inner-border-width": {
+    "sets": {
+      "spectrum": {
+        "ref": "{border-width-200}",
+        "value": "2px"
+      },
+      "express": {
+        "value": "3px"
+      }
+    }
+  },
+  "card-minimum-width": {
+    "value": "100px"
+  },
+  "card-preview-minimum-height": {
+    "value": "130px"
+  },
+  "card-selection-background-size": {
+    "value": "40px"
+  },
+  "drop-zone-width": {
+    "value": "428px"
+  },
+  "drop-zone-content-maximum-width": {
+    "ref": "{illustrated-message-maximum-width}",
+    "value": "380px"
+  },
+  "drop-zone-border-dash-length": {
+    "value": "8px"
+  },
+  "drop-zone-border-dash-gap": {
+    "value": "4px"
+  },
+  "drop-zone-title-size": {
+    "ref": "{illustrated-message-title-size}",
+    "sets": {
+      "desktop": {
+        "ref": "{heading-size-m}",
+        "sets": {
+          "desktop": {
+            "value": "22px"
+          },
+          "mobile": {
+            "value": "27px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{heading-size-s}",
+        "sets": {
+          "desktop": {
+            "value": "18px"
+          },
+          "mobile": {
+            "value": "22px"
+          }
+        }
+      }
+    }
+  },
+  "drop-zone-cjk-title-size": {
+    "ref": "{illustrated-message-cjk-title-size}",
+    "sets": {
+      "desktop": {
+        "ref": "{heading-cjk-size-m}",
+        "sets": {
+          "desktop": {
+            "value": "20px"
+          },
+          "mobile": {
+            "value": "24px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{heading-cjk-size-s}",
+        "sets": {
+          "desktop": {
+            "value": "18px"
+          },
+          "mobile": {
+            "value": "22px"
+          }
+        }
+      }
+    }
+  },
+  "drop-zone-body-size": {
+    "ref": "{illustrated-message-body-size}",
+    "sets": {
+      "desktop": {
+        "ref": "{body-size-s}",
+        "sets": {
+          "desktop": {
+            "value": "14px"
+          },
+          "mobile": {
+            "value": "17px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{body-size-xs}",
+        "sets": {
+          "desktop": {
+            "value": "12px"
+          },
+          "mobile": {
+            "value": "15px"
+          }
+        }
+      }
+    }
+  },
   "corner-radius-75": {
     "sets": {
       "spectrum": {
@@ -15272,6 +15701,23 @@
   "heading-margin-bottom-multiplier": {
     "value": "0.25"
   },
+  "heading-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)"
+      }
+    }
+  },
   "body-sans-serif-font-family": {
     "ref": "{sans-serif-font-family}",
     "value": "Adobe Clean"
@@ -15468,6 +15914,23 @@
   "body-margin-multiplier": {
     "value": "0.75"
   },
+  "body-color": {
+    "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)"
+      }
+    }
+  },
   "detail-sans-serif-font-family": {
     "ref": "{sans-serif-font-family}",
     "value": "Adobe Clean"
@@ -15724,7 +16187,7 @@
     "ref": "{cjk-line-height-100}",
     "value": "1.5"
   },
-  "detail-margin-top-mulitplier": {
+  "detail-margin-top-multiplier": {
     "value": "0.88888889"
   },
   "detail-margin-bottom-multiplier": {
@@ -15733,6 +16196,29 @@
   "detail-letter-spacing": {
     "value": "0.06em"
   },
+  "detail-sans-serif-text-transform": {
+    "value": "uppercase"
+  },
+  "detail-serif-text-transform": {
+    "value": "uppercase"
+  },
+  "detail-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)"
+      }
+    }
+  },
   "code-font-family": {
     "value": "Source Code Pro"
   },
@@ -15866,5 +16352,22 @@
   "code-cjk-line-height": {
     "ref": "{cjk-line-height-200}",
     "value": "1.7"
+  },
+  "code-color": {
+    "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)"
+      }
+    }
   }
 }

package/jest.config.cjs

@@ -19,4 +19,4 @@ module.exports = {
   collectCoverage: true,
   coverageDirectory: "coverage",
   coverageProvider: "v8",
-};
+};

package/manifest.json

@@ -0,0 +1,9 @@
+[
+  "src/color-aliases.json",
+  "src/color-component.json",
+  "src/color-palette.json",
+  "src/layout-component.json",
+  "src/layout.json",
+  "src/semantic-color-palette.json",
+  "src/typography.json"
+]

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.0.0-beta.66",
+  "version": "12.0.0-beta.68",
   "description": "",
   "type": "module",
   "main": "config.js",
   "tokens": "dist/json/variables.json",
   "scripts": {
+    "buildManifest": "node tasks/buildManifest.js",
     "convert-excel": "node tasks/excel.js",
-    "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
+    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
     "test-watch": "jest --runInBand --watch",
     "build": "node tasks/buildSpectrumTokens.js",
     "diffLastRelease": ". tasks/diffOutput.sh",
     "generateDiffResult": "node tasks/diff.js",
     "clean": "rm -rf dist",
-    "pre-commit": "lint-staged --config commitlint.config.cjs",
-    "prepare": "husky install && yarn run build",
+    "pre-commit": "lint-staged",
+    "prepare": "husky install && yarn run build && yarn run buildManifest",
     "semantic-release": "semantic-release"
   },
   "repository": {
@@ -35,16 +36,18 @@
     "@commitlint/config-conventional": "^17.1.0",
     "@semantic-release/changelog": "^6.0.1",
     "convert-excel-to-json": "^1.7.0",
-    "hex-to-rgba": "^2.0.1",
-    "semantic-release": "^19.0.5",
-    "slugify": "^1.6.5",
     "deep-object-diff": "^1.1.7",
+    "glob": "^8.1.0",
+    "glob-promise": "^6.0.2",
+    "hex-to-rgba": "^2.0.1",
     "husky": "^8.0.1",
     "jest": "^29.0.3",
     "lint-staged": "^13.0.3",
     "node-fetch": "^2.6.7",
     "prettier": "^2.7.1",
+    "semantic-release": "^19.0.5",
     "semantic-release-mirror-version": "^1.1.1",
+    "slugify": "^1.6.5",
     "style-dictionary": "^3.7.1",
     "style-dictionary-sets": "^2.0.5"
   }

package/src/color-component.json

@@ -64,5 +64,45 @@
   "color-slider-border-opacity": {
     "component": "color-slider",
     "value": "0.1"
+  },
+  "color-loupe-drop-shadow-color": {
+    "component": "color-loupe",
+    "value": "{transparent-black-300}"
+  },
+  "color-loupe-drop-shadow-y": {
+    "component": "color-loupe",
+    "value": "2px"
+  },
+  "color-loupe-drop-shadow-blur": {
+    "component": "color-loupe",
+    "value": "8px"
+  },
+  "color-loupe-inner-border": {
+    "component": "color-loupe",
+    "value": "{transparent-black-200}"
+  },
+  "color-loupe-outer-border": {
+    "component": "color-loupe",
+    "value": "{white}"
+  },
+  "card-selection-background-color": {
+    "component": "cards",
+    "value": "{gray-100}"
+  },
+  "card-selection-background-color-opacity": {
+    "component": "cards",
+    "value": "0.95"
+  },
+  "drop-zone-background-color": {
+    "component": "drop-zone",
+    "value": "{accent-visual-color}"
+  },
+  "drop-zone-background-color-opacity": {
+    "component": "drop-zone",
+    "value": "0.1"
+  },
+  "drop-zone-background-color-opacity-filled": {
+    "component": "drop-zone",
+    "value": "0.3"
   }
 }

package/src/layout-component.json

@@ -2296,6 +2296,28 @@
     "component": "alert-dialog",
     "value": "480px"
   },
+  "alert-dialog-title-size": {
+    "component": "alert-dialog",
+    "sets": {
+      "desktop": {
+        "value": "{heading-size-s}"
+      },
+      "mobile": {
+        "value": "{heading-size-xs}"
+      }
+    }
+  },
+  "alert-dialog-description-size": {
+    "component": "alert-dialog",
+    "sets": {
+      "desktop": {
+        "value": "{body-size-s}"
+      },
+      "mobile": {
+        "value": "{body-size-xs}"
+      }
+    }
+  },
   "opacity-checkerboard-square-size": {
     "component": "opacity-checkerboard",
     "sets": {
@@ -2728,7 +2750,7 @@
     "component": "color-area",
     "value": "{corner-radius-100}"
   },
-  "color-wheel-minimum-width": {
+  "color-wheel-width": {
     "component": "color-wheel",
     "sets": {
       "desktop": {
@@ -2739,6 +2761,17 @@
       }
     }
   },
+  "color-wheel-minimum-width": {
+    "component": "color-wheel",
+    "sets": {
+      "desktop": {
+        "value": "175px"
+      },
+      "mobile": {
+        "value": "219px"
+      }
+    }
+  },
   "color-wheel-color-area-margin": {
     "component": "color-wheel",
     "value": "12px"
@@ -2810,5 +2843,107 @@
   "search-field-minimum-width-multiplier": {
     "component": "search-field",
     "value": "3"
+  },
+  "color-loupe-height": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "value": "64px"
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "40px"
+          },
+          "mobile": {
+            "value": "50px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-width": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "value": "48px"
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "32px"
+          },
+          "mobile": {
+            "value": "40px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-bottom-to-color-handle": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "value": "12px"
+      },
+      "express": {
+        "value": "6px"
+      }
+    }
+  },
+  "color-loupe-outer-border-width": {
+    "component": "color-loupe",
+    "value": "{border-width-200}"
+  },
+  "color-loupe-inner-border-width": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "value": "{border-width-200}"
+      },
+      "express": {
+        "value": "3px"
+      }
+    }
+  },
+  "card-minimum-width": {
+    "component": "cards",
+    "value": "100px"
+  },
+  "card-preview-minimum-height": {
+    "component": "cards",
+    "value": "130px"
+  },
+  "card-selection-background-size": {
+    "component": "cards",
+    "value": "40px"
+  },
+  "drop-zone-width": {
+    "component": "drop-zone",
+    "value": "428px"
+  },
+  "drop-zone-content-maximum-width": {
+    "component": "drop-zone",
+    "value": "{illustrated-message-maximum-width}"
+  },
+  "drop-zone-border-dash-length": {
+    "component": "drop-zone",
+    "value": "8px"
+  },
+  "drop-zone-border-dash-gap": {
+    "component": "drop-zone",
+    "value": "4px"
+  },
+  "drop-zone-title-size": {
+    "component": "drop-zone",
+    "value": "{illustrated-message-title-size}"
+  },
+  "drop-zone-cjk-title-size": {
+    "component": "drop-zone",
+    "value": "{illustrated-message-cjk-title-size}"
+  },
+  "drop-zone-body-size": {
+    "component": "drop-zone",
+    "value": "{illustrated-message-body-size}"
   }
 }

package/src/typography.json

@@ -615,6 +615,10 @@
     "component": "heading",
     "value": "0.25"
   },
+  "heading-color": {
+    "component": "heading",
+    "value": "{gray-900}"
+  },
   "body-sans-serif-font-family": {
     "component": "body",
     "value": "{sans-serif-font-family}"
@@ -763,6 +767,10 @@
     "component": "body",
     "value": "0.75"
   },
+  "body-color": {
+    "component": "body",
+    "value": "{gray-800}"
+  },
   "detail-sans-serif-font-family": {
     "component": "detail",
     "value": "{sans-serif-font-family}"
@@ -991,7 +999,7 @@
     "component": "detail",
     "value": "{cjk-line-height-100}"
   },
-  "detail-margin-top-mulitplier": {
+  "detail-margin-top-multiplier": {
     "component": "detail",
     "value": "0.88888889"
   },
@@ -1003,6 +1011,18 @@
     "component": "detail",
     "value": "0.06em"
   },
+  "detail-sans-serif-text-transform": {
+    "component": "detail",
+    "value": "uppercase"
+  },
+  "detail-serif-text-transform": {
+    "component": "detail",
+    "value": "uppercase"
+  },
+  "detail-color": {
+    "component": "detail",
+    "value": "{gray-900}"
+  },
   "code-font-family": {
     "component": "code",
     "value": "Source Code Pro"
@@ -1102,5 +1122,9 @@
   "code-cjk-line-height": {
     "component": "code",
     "value": "{cjk-line-height-200}"
+  },
+  "code-color": {
+    "component": "code",
+    "value": "{gray-800}"
   }
 }

package/tasks/buildManifest.js

@@ -0,0 +1,8 @@
+import glob from "glob-promise";
+import { writeFile } from "fs/promises";
+
+const manifestFileName = "manifest.json";
+const files = await glob("src/**/*.json");
+
+await writeFile(manifestFileName, JSON.stringify(files, null, 2));
+console.log(`Wrote ${manifestFileName} with ${files.length} files.`);

package/tasks/buildSpectrumTokens.js

@@ -11,7 +11,12 @@ governing permissions and limitations under the License.
 */
 
 import StyleDictionary from "style-dictionary";
-import {JsonSetsFormatter, NameKebabTransfom, DroverJsonFormatter, AttributeSetsTransform} from "style-dictionary-sets";
+import {
+  JsonSetsFormatter,
+  NameKebabTransfom,
+  DroverJsonFormatter,
+  AttributeSetsTransform,
+} from "style-dictionary-sets";
 
 StyleDictionary.registerTransform(AttributeSetsTransform);
 StyleDictionary.registerTransform(NameKebabTransfom);

package/tasks/deprecateExpress.js

@@ -0,0 +1,11 @@
+import glob from "glob-promise";
+import { readFile, writeFile } from "fs/promises";
+import { augmentExpressTokens } from "./lib/augmentExpressTokens.js";
+
+const files = await glob("src/**/*.json");
+files.forEach(async (fileName) => {
+  const fileTokens = JSON.parse(await readFile(fileName, "utf8"));
+  const result = augmentExpressTokens(fileTokens);
+  await writeFile(fileName, JSON.stringify(result, null, 2));
+  console.log(`Updated ${fileName}.`);
+});

package/tasks/diff.js

@@ -84,7 +84,9 @@ function logResultCategory(diffResult, categoryKey, msg) {
               Array.isArray(results[oldTokenName]) &&
               results[oldTokenName].length > 1
             ) {
-              console.log(`  - Old name: \`${oldTokenName}\`, new name options:`);
+              console.log(
+                `  - Old name: \`${oldTokenName}\`, new name options:`
+              );
               results[oldTokenName].forEach((newTokenName) =>
                 console.log(`    - \`${newTokenName}\``)
               );

package/tasks/lib/augmentExpressTokens.js

@@ -0,0 +1,40 @@
+const deprecationObj = {
+  deprecated: true,
+  deprecated_comment:
+    "Express will merge with Spectrum with the release of Spectrum 2.",
+};
+
+const findExpressValue = (tokenObj) => {
+  if (typeof tokenObj === "object" && tokenObj !== null) {
+    if (tokenObj.hasOwnProperty("value")) {
+      return {
+        ...tokenObj,
+        ...deprecationObj,
+      };
+    } else {
+      const result = {};
+      Object.keys(tokenObj).forEach((tokenName) => {
+        result[tokenName] = findExpressValue(tokenObj[tokenName]);
+      });
+      return result;
+    }
+  }
+};
+
+const augmentExpressTokens = (tokenObj) => {
+  if (typeof tokenObj === "object" && tokenObj !== null) {
+    const result = {};
+    Object.keys(tokenObj).forEach((tokenName) => {
+      if (tokenName === "express") {
+        result[tokenName] = findExpressValue(tokenObj[tokenName]);
+      } else {
+        result[tokenName] = augmentExpressTokens(tokenObj[tokenName]);
+      }
+    });
+    return result;
+  } else {
+    return tokenObj;
+  }
+};
+
+export default augmentExpressTokens;