@adobe/design-system-registry 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @adobe/design-system-registry
 
+## 3.1.0
+
+### Minor Changes
+
+- [#955](https://github.com/adobe/spectrum-design-data/pull/955) [`e05c3ef`](https://github.com/adobe/spectrum-design-data/commit/e05c3eff28caecbdb9782eb62023876e0d1f4947) Thanks [@GarthDB](https://github.com/GarthDB)! - feat(spec): property field migration path + property-terms registry (#941)
+
+  Adds normative migration policy for the `name.property` field per RFC #806:
+  - New `### Name-object migration policy` section in `spec/token-format.md` —
+    documents SPEC-017 severity escalation to `error` at spec `2.0.0`, narrowed
+    `property` semantics (CSS/styling attribute only), and author migration steps.
+  - New `property-terms.json` registry — 35 seeded CSS/styling attribute terms
+    (`color`, `background-color`, `border-radius`, `font-size`, `gap`, etc.).
+  - Updated `fields/property.json` — sets `registry` path to `property-terms.json`;
+    exports `propertyTerms` from registry index.
+  - Updated `spec/taxonomy.md` Property row — links to migration section and
+    calls out anatomy/surface values as migration debt.
+  - Closed RFC #806 open question in `docs/rfc-coordination.md`.
+
 ## 3.0.0
 
 ### Major Changes

package/index.js

@@ -34,6 +34,10 @@ export const anatomyTerms = JSON.parse(
   readFileSync(join(__dirname, "registry", "anatomy-terms.json"), "utf-8"),
 );
 
+export const propertyTerms = JSON.parse(
+  readFileSync(join(__dirname, "registry", "property-terms.json"), "utf-8"),
+);
+
 export const components = JSON.parse(
   readFileSync(join(__dirname, "registry", "components.json"), "utf-8"),
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/design-system-registry",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A single source of truth for design system terminology used across Spectrum tokens, component schemas, and anatomy",
   "type": "module",
   "main": "index.js",
@@ -44,7 +44,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "ava": "^6.0.1",
-    "@adobe/spectrum-component-api-schemas": "6.1.9"
+    "@adobe/spectrum-component-api-schemas": "6.1.14"
   },
   "scripts": {
     "validate": "node scripts/validate-registry.js",

package/registry/property-terms.json

@@ -0,0 +1,177 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/registry-value.json",
+  "type": "property-term",
+  "description": "CSS/styling attributes or design-system abstractions thereof, assigned to token name objects via the `property` field. Not all entries are valid CSS property identifiers — some (e.g. padding-horizontal, overlay-color, size) are design-system-level abstractions. Not anatomy parts (which belong in anatomy-terms.json) and not styling surfaces (which belong in token-objects.json). Examples: color, width, padding, font-size.",
+  "values": [
+    {
+      "id": "color",
+      "label": "Color",
+      "description": "Text or foreground color"
+    },
+    {
+      "id": "background-color",
+      "label": "Background Color",
+      "description": "Background fill color"
+    },
+    {
+      "id": "border-color",
+      "label": "Border Color",
+      "description": "Border or outline color"
+    },
+    {
+      "id": "fill-color",
+      "label": "Fill Color",
+      "description": "SVG or icon fill color"
+    },
+    {
+      "id": "shadow-color",
+      "label": "Shadow Color",
+      "description": "Drop shadow color component"
+    },
+    {
+      "id": "overlay-color",
+      "label": "Overlay Color",
+      "description": "Overlay or scrim tint color"
+    },
+    {
+      "id": "outline-color",
+      "label": "Outline Color",
+      "description": "CSS outline color"
+    },
+    {
+      "id": "opacity",
+      "label": "Opacity",
+      "description": "Element transparency level"
+    },
+    {
+      "id": "border-opacity",
+      "label": "Border Opacity",
+      "description": "Border transparency level"
+    },
+    {
+      "id": "overlay-opacity",
+      "label": "Overlay Opacity",
+      "description": "Overlay or scrim transparency level"
+    },
+    {
+      "id": "width",
+      "label": "Width",
+      "description": "Element width"
+    },
+    {
+      "id": "height",
+      "label": "Height",
+      "description": "Element height"
+    },
+    {
+      "id": "min-width",
+      "label": "Min Width",
+      "description": "Minimum element width"
+    },
+    {
+      "id": "max-width",
+      "label": "Max Width",
+      "description": "Maximum element width"
+    },
+    {
+      "id": "min-height",
+      "label": "Min Height",
+      "description": "Minimum element height"
+    },
+    {
+      "id": "max-height",
+      "label": "Max Height",
+      "description": "Maximum element height"
+    },
+    {
+      "id": "size",
+      "label": "Size",
+      "description": "General dimension size (non-directional)"
+    },
+    {
+      "id": "padding",
+      "label": "Padding",
+      "description": "Internal spacing on all sides"
+    },
+    {
+      "id": "padding-horizontal",
+      "label": "Horizontal Padding",
+      "description": "Internal horizontal (left/right) spacing"
+    },
+    {
+      "id": "padding-vertical",
+      "label": "Vertical Padding",
+      "description": "Internal vertical (top/bottom) spacing"
+    },
+    {
+      "id": "gap",
+      "label": "Gap",
+      "description": "Space between flex or grid children"
+    },
+    {
+      "id": "spacing",
+      "label": "Spacing",
+      "description": "General spacing between elements"
+    },
+    {
+      "id": "border-width",
+      "label": "Border Width",
+      "description": "Border or stroke thickness"
+    },
+    {
+      "id": "border-radius",
+      "label": "Border Radius",
+      "description": "Corner rounding radius"
+    },
+    {
+      "id": "outline-width",
+      "label": "Outline Width",
+      "description": "CSS outline thickness"
+    },
+    {
+      "id": "blur",
+      "label": "Blur",
+      "description": "Blur radius (backdrop or drop shadow)"
+    },
+    {
+      "id": "shadow",
+      "label": "Shadow",
+      "description": "Full box or drop shadow definition"
+    },
+    {
+      "id": "font-size",
+      "label": "Font Size",
+      "description": "Typeface size"
+    },
+    {
+      "id": "font-weight",
+      "label": "Font Weight",
+      "description": "Typeface weight (boldness)"
+    },
+    {
+      "id": "font-family",
+      "label": "Font Family",
+      "description": "Typeface family name"
+    },
+    {
+      "id": "line-height",
+      "label": "Line Height",
+      "description": "Vertical spacing between lines of text"
+    },
+    {
+      "id": "letter-spacing",
+      "label": "Letter Spacing",
+      "description": "Horizontal spacing between characters"
+    },
+    {
+      "id": "duration",
+      "label": "Duration",
+      "description": "Animation or transition duration"
+    },
+    {
+      "id": "easing",
+      "label": "Easing",
+      "description": "Animation or transition easing function"
+    }
+  ]
+}

package/test/registry.test.js

@@ -16,6 +16,7 @@ import {
   states,
   variants,
   anatomyTerms,
+  propertyTerms,
   components,
   scaleValues,
   categories,
@@ -63,6 +64,13 @@ test("anatomyTerms registry loads successfully", (t) => {
   t.true(anatomyTerms.values.length > 0);
 });
 
+test("propertyTerms registry loads successfully", (t) => {
+  t.truthy(propertyTerms);
+  t.truthy(propertyTerms.values);
+  t.true(Array.isArray(propertyTerms.values));
+  t.true(propertyTerms.values.length > 0);
+});
+
 test("components registry loads successfully", (t) => {
   t.truthy(components);
   t.truthy(components.values);
@@ -121,6 +129,11 @@ test("anatomyTerms registry has no duplicate IDs", (t) => {
   t.is(ids.length, new Set(ids).size);
 });
 
+test("propertyTerms registry has no duplicate IDs", (t) => {
+  const ids = propertyTerms.values.map((v) => v.id);
+  t.is(ids.length, new Set(ids).size);
+});
+
 // Test for duplicate aliases
 test("sizes registry has no duplicate aliases", (t) => {
   const aliases = sizes.values.flatMap((v) => v.aliases || []);
@@ -276,6 +289,27 @@ test("anatomyTerms does not include styling surfaces", (t) => {
   t.false(ids.includes("visual"));
 });
 
+test("propertyTerms includes core CSS styling attributes", (t) => {
+  const ids = getValues(propertyTerms);
+  t.true(ids.includes("color"));
+  t.true(ids.includes("background-color"));
+  t.true(ids.includes("border-color"));
+  t.true(ids.includes("opacity"));
+  t.true(ids.includes("width"));
+  t.true(ids.includes("height"));
+  t.true(ids.includes("font-size"));
+  t.true(ids.includes("gap"));
+});
+
+test("propertyTerms does not include anatomy parts or styling surfaces", (t) => {
+  const ids = getValues(propertyTerms);
+  t.false(ids.includes("background"));
+  t.false(ids.includes("border"));
+  t.false(ids.includes("icon"));
+  t.false(ids.includes("label"));
+  t.false(ids.includes("handle"));
+});
+
 test("tokenObjects includes styling surfaces", (t) => {
   const ids = getValues(tokenObjects);
   t.true(ids.includes("background"));