@adobe/spectrum-tokens 12.1.2 → 12.3.0

package/CHANGELOG.md

@@ -1,6 +1,7 @@
-## [12.1.2](https://github.com/adobe/spectrum-tokens/compare/v12.1.1...v12.1.2) (2023-03-31)
+# @adobe/spectrum-tokens
 
+## 12.3.0
 
-### Bug Fixes
+### Minor Changes
 
-* renamed token with typo, clos ([9134abb](https://github.com/adobe/spectrum-tokens/commit/9134abb926e133f1dcc9ec57c26687de7f0d6ffc))
+- fc919d2: Added tray token `tray-top-to-content-area`

package/README.md

@@ -6,23 +6,11 @@ Design tokens are directly integrated into our component libraries, UI kits, and
 
 ## Getting started
 
-Start by installing all the project dependencies.
-
-```bash
-yarn
-```
-
-Running this script will also build the tokens to the `dist` directory.
-
-To manually build the project, you can also run the following script:
-
-```bash
-yarn build
-```
+Follow the monorepo [setup guide](../../README.md#setup-monorepo-locally).
 
 ## Generate a Diff from the last release
 
-The `yarn generateDiffResult` script will build the project and compare the tokens in the `dist` directory with the last released version of Spectrum Tokens. It will generate a report of added tokens, deleted tokens, tokens with value changes, and tokens with potential name changes. The script can't guarantee the correct name changes; it compares new tokens and deleted tokens to see if any have the same value and are likely to be token name changes.
+The `pnpm generateDiffResult` script will build the project and compare the tokens in the `dist` directory with the last released version of Spectrum Tokens. It will generate a report of added tokens, deleted tokens, tokens with value changes, and tokens with potential name changes. The script can't guarantee the correct name changes; it compares new tokens and deleted tokens to see if any have the same value and are likely to be token name changes.
 
 ## Versioning
 
@@ -69,16 +57,16 @@ More details can be found in this [example workflow](https://semantic-release.gi
 
 ## Spectrum Tokens 11.x.x and 12.x.x
 
-Starting with `@adobe/spectrum-tokens` v12.0.0, this project uses a more efficient list of tokens. Previously in v11.x.x, every possible combination of component options was used to define tokens, resulting in an unnecessarily large list of tokens. However, while the work is ongoing in migrating components from the old system to the newer one, v12.0.0 and future versions will be published under the `next` tag. To install it, use the script:
+Starting with `@adobe/spectrum-tokens` v12.0.0, this project uses a more efficient list of tokens. Previously in v11.x.x, every possible combination of component options was used to define tokens, resulting in an unnecessarily large list of tokens. However, while the work is ongoing in migrating components from the old system to the newer one, v12.0.0 and future versions will be published under the `latest` tag. To install it, use the script:
 
 ```
-yarn add @adobe/spectrum-tokens@next
+pnpm add @adobe/spectrum-tokens
 ```
 
 or
 
 ```
-npm install --save @adobe/spectrum-tokens@next
+npm install --save @adobe/spectrum-tokens
 ```
 
 If you need to use the older and more complete set of tokens side by side with the v12.x.x release while the development of this migration is ongoing, you can use the [`@adobe/spectrum-tokens-depreacated`](https://www.npmjs.com/package/@adobe/spectrum-tokens-deprecated) package, which is an archived release of `@adobe/spectrum-tokens@11.8.0`.

package/dist/json/drover.json

@@ -1571,6 +1571,10 @@
     "field-edge-to-validation-icon-quiet": "0px",
     "field-edge-to-validation-icon-small": "9px",
     "field-edge-to-visual-quiet": "0px",
+    "field-end-edge-to-disclosure-icon-100": "11px",
+    "field-end-edge-to-disclosure-icon-200": "14px",
+    "field-end-edge-to-disclosure-icon-300": "17px",
+    "field-end-edge-to-disclosure-icon-75": "7px",
     "field-label-text-to-asterisk-extra-large": "5px",
     "field-label-text-to-asterisk-large": "5px",
     "field-label-text-to-asterisk-medium": "4px",
@@ -1600,6 +1604,10 @@
     "field-top-to-alert-icon-large": "10px",
     "field-top-to-alert-icon-medium": "7px",
     "field-top-to-alert-icon-small": "4px",
+    "field-top-to-disclosure-icon-100": "11px",
+    "field-top-to-disclosure-icon-200": "14px",
+    "field-top-to-disclosure-icon-300": "17px",
+    "field-top-to-disclosure-icon-75": "7px",
     "field-top-to-progress-circle-extra-large": "16px",
     "field-top-to-progress-circle-large": "12px",
     "field-top-to-progress-circle-medium": "8px",
@@ -1689,6 +1697,7 @@
     "opacity-checkerboard-square-size": "8px",
     "opacity-disabled": "0.3",
     "picker-border-width": "1px",
+    "picker-end-edge-to-disclousure-icon-quiet": "0px",
     "picker-visual-to-disclosure-icon-extra-large": "10px",
     "picker-visual-to-disclosure-icon-large": "9px",
     "picker-visual-to-disclosure-icon-medium": "8px",
@@ -1826,6 +1835,7 @@
     "tooltip-maximum-width": "160px",
     "tooltip-tip-height": "4px",
     "tooltip-tip-width": "8px",
+    "tray-top-to-content-area": "4px",
     "workflow-icon-size-100": "18px",
     "workflow-icon-size-200": "20px",
     "workflow-icon-size-300": "22px",

package/dist/json/variables.json

@@ -11273,6 +11273,9 @@
       }
     }
   },
+  "picker-end-edge-to-disclousure-icon-quiet": {
+    "value": "0px"
+  },
   "text-field-minimum-width-multiplier": {
     "value": "1.5"
   },
@@ -12767,6 +12770,16 @@
       }
     }
   },
+  "tray-top-to-content-area": {
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
   "corner-radius-75": {
     "sets": {
       "spectrum": {
@@ -13697,6 +13710,86 @@
       }
     }
   },
+  "field-end-edge-to-disclosure-icon-75": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "field-end-edge-to-disclosure-icon-100": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "field-end-edge-to-disclosure-icon-200": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "field-end-edge-to-disclosure-icon-300": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-75": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-100": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-200": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-300": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
   "field-top-to-alert-icon-small": {
     "sets": {
       "desktop": {

package/moon.yml

@@ -0,0 +1,63 @@
+fileGroups:
+  sources:
+    - "src/**/*"
+  tests:
+    - "test/**/*"
+tasks:
+  build:
+    command:
+      - node
+      - tasks/buildSpectrumTokens.js
+    platform: node
+    inputs:
+      - "tasks/buildSpectrumTokens.js"
+      - "@globs(sources)"
+    outputs:
+      - "dist/"
+  buildManifest:
+    command:
+      - node
+      - tasks/buildManifest.js
+    platform: node
+    inputs:
+      - "tasks/buildManifest.js"
+      - "@globs(sources)"
+    outputs:
+      - "manifest.json"
+  clean:
+    command:
+      - rm
+      - -rf
+      - dist
+    local: true
+    platform: system
+  convert-excel:
+    command:
+      - node
+      - tasks/excel.js
+    local: true
+    platform: node
+  generateDiffResult:
+    command:
+      - node
+      - tasks/diff.js
+    deps:
+      - ~:build
+    platform: node
+  test:
+    command:
+      - npx
+      - ava
+    inputs:
+      - "tasks/**/*"
+      - "@globs(tests)"
+      - "@globs(sources)"
+    deps:
+      - ~:build
+    platform: node
+  test-watch:
+    command:
+      - ava
+      - --watch
+    local: true
+    platform: node

package/package.json

@@ -1,22 +1,10 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.1.2",
-  "description": "",
+  "version": "12.3.0",
+  "description": "Design tokens for Spectrum, Adobe's design system",
   "type": "module",
   "main": "config.js",
   "tokens": "dist/json/variables.json",
-  "scripts": {
-    "buildManifest": "node tasks/buildManifest.js",
-    "convert-excel": "node tasks/excel.js",
-    "test": "ava",
-    "test-watch": "ava --watch",
-    "build": "node tasks/buildSpectrumTokens.js",
-    "generateDiffResult": "yarn build && node tasks/diff.js",
-    "clean": "rm -rf dist",
-    "pre-commit": "lint-staged",
-    "prepare": "husky install && yarn build && yarn buildManifest",
-    "semantic-release": "semantic-release"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/adobe/spectrum-tokens.git"
@@ -31,23 +19,16 @@
   },
   "homepage": "https://github.com/adobe/spectrum-tokens#readme",
   "devDependencies": {
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@semantic-release/changelog": "^6.0.1",
-    "ava": "^5.2.0",
     "convert-excel-to-json": "^1.7.0",
     "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",
-    "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"
-  }
-}
+    "style-dictionary-sets": "^2.0.5",
+    "tar": "^6.1.13",
+    "tmp-promise": "^3.0.3"
+  },
+  "scripts": {}
+}

package/src/layout-component.json

@@ -2306,6 +2306,10 @@
       }
     }
   },
+  "picker-end-edge-to-disclousure-icon-quiet": {
+    "component": "picker",
+    "value": "0px"
+  },
   "text-field-minimum-width-multiplier": {
     "component": "text-field",
     "value": "1.5"
@@ -3741,5 +3745,16 @@
         "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
       }
     }
+  },
+  "tray-top-to-content-area": {
+    "component": "tray",
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
   }
 }

package/src/layout.json

@@ -955,6 +955,86 @@
       }
     }
   },
+  "field-end-edge-to-disclosure-icon-75": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "field-end-edge-to-disclosure-icon-100": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "field-end-edge-to-disclosure-icon-200": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "field-end-edge-to-disclosure-icon-300": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-75": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-100": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-200": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "field-top-to-disclosure-icon-300": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
   "field-top-to-alert-icon-small": {
     "sets": {
       "desktop": {

package/tasks/diff.js

@@ -1,9 +1,18 @@
 import { access, readFile, writeFile } from "fs/promises";
-import fetch from "node-fetch";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
 import { detailedDiff, diff } from "deep-object-diff";
+import { exec } from "node:child_process";
+import { promisify } from "util";
+import tar from "tar";
+import tmp from "tmp-promise";
 
-const tag = "next-major";
+const execP = promisify(exec);
+
+const tag = "latest";
 const tokenPath = "dist/json/variables.json";
+const localRootDir = join(dirname(fileURLToPath(import.meta.url)), "..");
+const localTokenPath = join(localRootDir, tokenPath);
 
 run()
   .then(() => {
@@ -19,6 +28,7 @@ async function run() {
     getNewTokens(),
     getOldTokens(),
   ]);
+
   const diffResult = detailedDiff(oldTokens, newTokens);
 
   calculatePossibleRenames(diffResult, oldTokens, newTokens);
@@ -31,23 +41,25 @@ async function run() {
 
 async function getNewTokens() {
   try {
-    await access(tokenPath);
-    return JSON.parse(await readFile(tokenPath, { encoding: "utf8" }));
+    await access(localTokenPath);
+    return JSON.parse(await readFile(localTokenPath, { encoding: "utf8" }));
   } catch {
     console.error("cannot access");
   }
 }
 
 async function getOldTokens() {
-  try {
-    const response = await fetch(
-      `https://unpkg.com/@adobe/spectrum-tokens@${tag}/${tokenPath}`
-    );
-    console.log(`Fetched ${response.url}`);
-    return await response.json();
-  } catch {
-    console.error("cannot access");
-  }
+  const tmpDir = await tmp.dir();
+  const { stdout, stderr } = await execP(
+    `npm pack @adobe/spectrum-tokens@${tag} --pack-destination ${tmpDir.path}`,
+  );
+  await tar.x({
+    cwd: tmpDir.path,
+    file: join(tmpDir.path, stdout.trim()),
+  });
+  const oldTokenPath = join(tmpDir.path, "package", tokenPath);
+  await access(oldTokenPath);
+  return JSON.parse(await readFile(oldTokenPath, { encoding: "utf8" }));
 }
 
 function calculatePossibleRenames(diffResult, oldTokens, newTokens) {
@@ -85,14 +97,14 @@ function logResultCategory(diffResult, categoryKey, msg) {
               results[oldTokenName].length > 1
             ) {
               console.log(
-                `  - Old name: \`${oldTokenName}\`, new name options:`
+                `  - Old name: \`${oldTokenName}\`, new name options:`,
               );
               results[oldTokenName].forEach((newTokenName) =>
-                console.log(`    - \`${newTokenName}\``)
+                console.log(`    - \`${newTokenName}\``),
               );
             } else {
               console.log(
-                `  - \`${oldTokenName}\` -> \`${results[oldTokenName][0]}\``
+                `  - \`${oldTokenName}\` -> \`${results[oldTokenName][0]}\``,
               );
             }
           });

package/test/deprecateExpress.test.js

@@ -0,0 +1,38 @@
+import test from "ava";
+import augmentExpressTokens from "../tasks/lib/augmentExpressTokens.js";
+
+const fixture = {
+  foo: {
+    express: {
+      value: "bar",
+    },
+  },
+  "corner-radius-100": {
+    sets: {
+      spectrum: {
+        sets: {
+          desktop: {
+            value: "4px",
+          },
+          mobile: {
+            value: "5px",
+          },
+        },
+      },
+      express: {
+        sets: {
+          desktop: {
+            value: "6px",
+          },
+          mobile: {
+            value: "8px",
+          },
+        },
+      },
+    },
+  },
+};
+
+test("Deprecate Express should add deprecation metadata to Express tokens", (t) => {
+  t.snapshot(augmentExpressTokens(fixture));
+});

package/test/drover.test.js

@@ -0,0 +1,46 @@
+import test from "ava";
+import { readFile } from "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;
+
+test.before(async (t) => {
+  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", (t) => {
+  t.deepEqual(drover.colorThemes.light, vars.light);
+});
+test("Drover should match dark variable values", (t) => {
+  t.deepEqual(drover.colorThemes.dark, vars.dark);
+});
+test("Drover should match darkest variable values", (t) => {
+  t.deepEqual(drover.colorThemes.darkest, vars.darkest);
+});

package/test/snapshots/deprecateExpress.test.js.md

@@ -0,0 +1,47 @@
+# Snapshot report for `test/deprecateExpress.test.js`
+
+The actual snapshot is saved in `deprecateExpress.test.js.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## Deprecate Express should add deprecation metadata to Express tokens
+
+> Snapshot 1
+
+    {
+      'corner-radius-100': {
+        sets: {
+          express: {
+            sets: {
+              desktop: {
+                deprecated: true,
+                deprecated_comment: 'Express will merge with Spectrum with the release of Spectrum 2.',
+                value: '6px',
+              },
+              mobile: {
+                deprecated: true,
+                deprecated_comment: 'Express will merge with Spectrum with the release of Spectrum 2.',
+                value: '8px',
+              },
+            },
+          },
+          spectrum: {
+            sets: {
+              desktop: {
+                value: '4px',
+              },
+              mobile: {
+                value: '5px',
+              },
+            },
+          },
+        },
+      },
+      foo: {
+        express: {
+          deprecated: true,
+          deprecated_comment: 'Express will merge with Spectrum with the release of Spectrum 2.',
+          value: 'bar',
+        },
+      },
+    }

package/CODE_OF_CONDUCT.md

@@ -1,74 +0,0 @@
-# Adobe Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to make participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise, unacceptable behavior may be
-reported by contacting the project team at Grp-opensourceoffice@adobe.com. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality concerning the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

package/COPYRIGHT

@@ -1,5 +0,0 @@
-Copyright 2022 Adobe
-
-Adobe holds the copyright for all the files found in this repository.
-
-See the LICENSE file for licensing information.

package/commitlint.config.cjs

@@ -1,19 +0,0 @@
-/*
-Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-/*
- * For a detailed explanation regarding each configuration property, visit:
- * https://jestjs.io/docs/configuration
- */
-
-module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};