@adobe/spectrum-tokens 12.0.0-beta.53 → 12.0.0-beta.55

package/CHANGELOG.md

@@ -1,7 +1,11 @@
-# [12.0.0-beta.53](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.52...v12.0.0-beta.53) (2022-10-05)
+# [12.0.0-beta.55](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.54...v12.0.0-beta.55) (2022-10-07)
 
 
 ### Bug Fixes
 
-* .releaserc config updated to treat beta as a release branch ([12cffee](https://github.com/adobe/spectrum-tokens/commit/12cffee80c10771762c8f144096d302ade22598c))
-* .releaserc config updated to treat beta as a release branch] ([8f54fa5](https://github.com/adobe/spectrum-tokens/commit/8f54fa525210d1d915d22b5ff39f8f218b243708))
+* orange bugs in notice and visual color ([1606dea](https://github.com/adobe/spectrum-tokens/commit/1606dea473a6f415fd51914cd6cc670c67dbc2b9))
+
+
+### Features
+
+* adds thumbnail tokens; closes DNA-1221 ([086e6fa](https://github.com/adobe/spectrum-tokens/commit/086e6fae30813fc332da45836c732ade588e93ba))

package/dist/json/drover.json

@@ -272,7 +272,7 @@
       "notice-color-700": "rgb(228, 111, 0)",
       "notice-color-800": "rgb(203, 93, 0)",
       "notice-color-900": "rgb(177, 76, 0)",
-      "notice-visual-color": "rgb(246, 133, 17)",
+      "notice-visual-color": "rgb(228, 111, 0)",
       "orange-100": "rgb(255, 236, 204)",
       "orange-1000": "rgb(149, 61, 0)",
       "orange-1100": "rgb(122, 47, 0)",
@@ -288,7 +288,7 @@
       "orange-800": "rgb(203, 93, 0)",
       "orange-900": "rgb(177, 76, 0)",
       "orange-background-color-default": "rgb(246, 133, 17)",
-      "orange-visual-color": "rgb(246, 133, 17)",
+      "orange-visual-color": "rgb(228, 111, 0)",
       "overlay-color": "rgb(0, 0, 0)",
       "overlay-opacity": "0.4",
       "positive-background-color-default": "rgb(0, 122, 77)",
@@ -1189,6 +1189,8 @@
     "action-button-edge-to-hold-icon-large": "5px",
     "action-button-edge-to-hold-icon-medium": "4px",
     "action-button-edge-to-hold-icon-small": "3px",
+    "alert-dialog-maximum-width": "480px",
+    "alert-dialog-minimum-width": "288px",
     "background-opacity-down": "0.1",
     "background-opacity-hover": "0.1",
     "background-opacity-key-focus": "0.1",
@@ -1523,6 +1525,18 @@
     "text-to-visual-300": "10px",
     "text-to-visual-50": "6px",
     "text-to-visual-75": "7px",
+    "thumbnail-size-100": "20px",
+    "thumbnail-size-1000": "56px",
+    "thumbnail-size-200": "22px",
+    "thumbnail-size-300": "26px",
+    "thumbnail-size-400": "28px",
+    "thumbnail-size-50": "16px",
+    "thumbnail-size-500": "32px",
+    "thumbnail-size-600": "36px",
+    "thumbnail-size-700": "40px",
+    "thumbnail-size-75": "18px",
+    "thumbnail-size-800": "44px",
+    "thumbnail-size-900": "50px",
     "toast-bottom-to-text": "17px",
     "toast-height": "48px",
     "toast-top-to-text": "14px",

package/dist/json/variables.json

@@ -3997,19 +3997,19 @@
   "notice-visual-color": {
     "sets": {
       "light": {
-        "ref": "{notice-color-600}",
+        "ref": "{notice-color-700}",
         "sets": {
           "light": {
-            "value": "rgb(246, 133, 17)"
+            "value": "rgb(228, 111, 0)"
           },
           "dark": {
-            "value": "rgb(202, 93, 0)"
+            "value": "rgb(225, 109, 0)"
           },
           "darkest": {
-            "value": "rgb(186, 82, 0)"
+            "value": "rgb(210, 98, 0)"
           },
           "wireframe": {
-            "value": "rgb(203, 215, 241)"
+            "value": "rgb(190, 205, 237)"
           }
         }
       },
@@ -4285,19 +4285,19 @@
   "orange-visual-color": {
     "sets": {
       "light": {
-        "ref": "{orange-600}",
+        "ref": "{orange-700}",
         "sets": {
           "light": {
-            "value": "rgb(246, 133, 17)"
+            "value": "rgb(228, 111, 0)"
           },
           "dark": {
-            "value": "rgb(202, 93, 0)"
+            "value": "rgb(225, 109, 0)"
           },
           "darkest": {
-            "value": "rgb(186, 82, 0)"
+            "value": "rgb(210, 98, 0)"
           },
           "wireframe": {
-            "value": "rgb(203, 215, 241)"
+            "value": "rgb(190, 205, 237)"
           }
         }
       },
@@ -10643,6 +10643,12 @@
       }
     }
   },
+  "alert-dialog-minimum-width": {
+    "value": "288px"
+  },
+  "alert-dialog-maximum-width": {
+    "value": "480px"
+  },
   "button-minimum-width-multiplier": {
     "value": "2.25"
   },
@@ -12036,6 +12042,126 @@
       }
     }
   },
+  "thumbnail-size-50": {
+    "sets": {
+      "desktop": {
+        "value": "16px"
+      },
+      "mobile": {
+        "value": "20px"
+      }
+    }
+  },
+  "thumbnail-size-75": {
+    "sets": {
+      "desktop": {
+        "value": "18px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "thumbnail-size-100": {
+    "sets": {
+      "desktop": {
+        "value": "20px"
+      },
+      "mobile": {
+        "value": "26px"
+      }
+    }
+  },
+  "thumbnail-size-200": {
+    "sets": {
+      "desktop": {
+        "value": "22px"
+      },
+      "mobile": {
+        "value": "28px"
+      }
+    }
+  },
+  "thumbnail-size-300": {
+    "sets": {
+      "desktop": {
+        "value": "26px"
+      },
+      "mobile": {
+        "value": "32px"
+      }
+    }
+  },
+  "thumbnail-size-400": {
+    "sets": {
+      "desktop": {
+        "value": "28px"
+      },
+      "mobile": {
+        "value": "36px"
+      }
+    }
+  },
+  "thumbnail-size-500": {
+    "sets": {
+      "desktop": {
+        "value": "32px"
+      },
+      "mobile": {
+        "value": "40px"
+      }
+    }
+  },
+  "thumbnail-size-600": {
+    "sets": {
+      "desktop": {
+        "value": "36px"
+      },
+      "mobile": {
+        "value": "46px"
+      }
+    }
+  },
+  "thumbnail-size-700": {
+    "sets": {
+      "desktop": {
+        "value": "40px"
+      },
+      "mobile": {
+        "value": "50px"
+      }
+    }
+  },
+  "thumbnail-size-800": {
+    "sets": {
+      "desktop": {
+        "value": "44px"
+      },
+      "mobile": {
+        "value": "55px"
+      }
+    }
+  },
+  "thumbnail-size-900": {
+    "sets": {
+      "desktop": {
+        "value": "50px"
+      },
+      "mobile": {
+        "value": "62px"
+      }
+    }
+  },
+  "thumbnail-size-1000": {
+    "sets": {
+      "desktop": {
+        "value": "56px"
+      },
+      "mobile": {
+        "value": "70px"
+      }
+    }
+  },
   "popover-tip-width": {
     "value": "16px"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.0.0-beta.53",
+  "version": "12.0.0-beta.55",
   "description": "",
   "main": "config.js",
   "tokens": "dist/json/variables.json",
@@ -10,6 +10,7 @@
     "test-watch": "jest --runInBand --watch",
     "build": "style-dictionary build",
     "diffLastRelease": ". tasks/diffOutput.sh",
+    "generateDiffResult": "node tasks/diff.js",
     "clean": "rm -rf dist",
     "pre-commit": "lint-staged",
     "prepare": "husky install && yarn run build",

package/src/color-alias.json

@@ -828,7 +828,7 @@
   "notice-visual-color": {
     "sets": {
       "light": {
-        "value": "{notice-color-600}"
+        "value": "{notice-color-700}"
       },
       "dark": {
         "value": "{notice-color-900}"
@@ -892,7 +892,7 @@
   "orange-visual-color": {
     "sets": {
       "light": {
-        "value": "{orange-600}"
+        "value": "{orange-700}"
       },
       "dark": {
         "value": "{orange-900}"

package/src/component-layout.json

@@ -580,6 +580,12 @@
       }
     }
   },
+  "alert-dialog-minimum-width": {
+    "value": "288px"
+  },
+  "alert-dialog-maximum-width": {
+    "value": "480px"
+  },
   "button-minimum-width-multiplier": {
     "value": "2.25"
   },
@@ -1976,6 +1982,126 @@
       }
     }
   },
+  "thumbnail-size-50": {
+    "sets": {
+      "desktop": {
+        "value": "16px"
+      },
+      "mobile": {
+        "value": "20px"
+      }
+    }
+  },
+  "thumbnail-size-75": {
+    "sets": {
+      "desktop": {
+        "value": "18px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "thumbnail-size-100": {
+    "sets": {
+      "desktop": {
+        "value": "20px"
+      },
+      "mobile": {
+        "value": "26px"
+      }
+    }
+  },
+  "thumbnail-size-200": {
+    "sets": {
+      "desktop": {
+        "value": "22px"
+      },
+      "mobile": {
+        "value": "28px"
+      }
+    }
+  },
+  "thumbnail-size-300": {
+    "sets": {
+      "desktop": {
+        "value": "26px"
+      },
+      "mobile": {
+        "value": "32px"
+      }
+    }
+  },
+  "thumbnail-size-400": {
+    "sets": {
+      "desktop": {
+        "value": "28px"
+      },
+      "mobile": {
+        "value": "36px"
+      }
+    }
+  },
+  "thumbnail-size-500": {
+    "sets": {
+      "desktop": {
+        "value": "32px"
+      },
+      "mobile": {
+        "value": "40px"
+      }
+    }
+  },
+  "thumbnail-size-600": {
+    "sets": {
+      "desktop": {
+        "value": "36px"
+      },
+      "mobile": {
+        "value": "46px"
+      }
+    }
+  },
+  "thumbnail-size-700": {
+    "sets": {
+      "desktop": {
+        "value": "40px"
+      },
+      "mobile": {
+        "value": "50px"
+      }
+    }
+  },
+  "thumbnail-size-800": {
+    "sets": {
+      "desktop": {
+        "value": "44px"
+      },
+      "mobile": {
+        "value": "55px"
+      }
+    }
+  },
+  "thumbnail-size-900": {
+    "sets": {
+      "desktop": {
+        "value": "50px"
+      },
+      "mobile": {
+        "value": "62px"
+      }
+    }
+  },
+  "thumbnail-size-1000": {
+    "sets": {
+      "desktop": {
+        "value": "56px"
+      },
+      "mobile": {
+        "value": "70px"
+      }
+    }
+  },
   "popover-tip-width": {
     "value": "16px"
   },

package/tasks/diff.js

@@ -20,41 +20,13 @@ async function run() {
     getOldTokens(),
   ]);
   const diffResult = detailedDiff(oldTokens, newTokens);
-  diffResult.possiblyRenamed = {};
-  Object.keys(diffResult.deleted).forEach((deletedTokenName) => {
-    const oldTokenValue = oldTokens[deletedTokenName];
-    Object.keys(diffResult.added).forEach((addedTokenName, i) => {
-      const newTokenValue = newTokens[addedTokenName];
-      if (Object.keys(diff(oldTokenValue, newTokenValue)).length === 0) {
-        diffResult.possiblyRenamed[deletedTokenName] = addedTokenName;
-      }
-    });
-  });
-  // console.log(JSON.stringify(diffResult, '', 2));
-  if (Object.keys(diffResult.added).length > 0) {
-    console.log(`\n*New Tokens Added (${Object.keys(diffResult.added).length}):*`);
-    Object.keys(diffResult.added).sort().forEach((tokenName, i) => {
-      console.log(`  - \`${tokenName}\``);
-    });
-  }
-  if (Object.keys(diffResult.deleted).length > 0) {
-    console.log(`\n*Tokens removed (${Object.keys(diffResult.deleted).length}):*`);
-    Object.keys(diffResult.deleted).sort().forEach((tokenName, i) => {
-      console.log(`  - \`${tokenName}\``);
-    });
-  }
-  if (Object.keys(diffResult.updated).length > 0) {
-    console.log(`\n*Token values updated (${Object.keys(diffResult.updated).length}):*`);
-    Object.keys(diffResult.updated).sort().forEach((tokenName, i) => {
-      console.log(`  - \`${tokenName}\``);
-    });
-  }
-  if (Object.keys(diffResult.possiblyRenamed).length > 0) {
-    console.log(`\n*Potentially renamed tokens (${Object.keys(diffResult.possiblyRenamed).length}):*`);
-    Object.keys(diffResult.possiblyRenamed).sort().forEach((tokenName, i) => {
-      console.log(`  - \`${tokenName}\` -> \`${diffResult.possiblyRenamed[tokenName]}\``);
-    });
-  }
+
+  calculatePossibleRenames(diffResult, oldTokens, newTokens);
+
+  logResultCategory(diffResult, "added");
+  logResultCategory(diffResult, "deleted");
+  logResultCategory(diffResult, "updated", "Token values updated");
+  logResultCategory(diffResult, "possiblyRenamed", "Tokens possibly renamed");
 }
 
 async function getNewTokens() {
@@ -77,3 +49,56 @@ async function getOldTokens() {
     console.error("cannot access");
   }
 }
+
+function calculatePossibleRenames(diffResult, oldTokens, newTokens) {
+  diffResult.possiblyRenamed = {};
+  Object.keys(diffResult.deleted).forEach((deletedTokenName) => {
+    const oldTokenValue = oldTokens[deletedTokenName];
+    const allValueMatches = [];
+    Object.keys(diffResult.added).forEach((addedTokenName, i) => {
+      const newTokenValue = newTokens[addedTokenName];
+      if (Object.keys(diff(oldTokenValue, newTokenValue)).length === 0) {
+        allValueMatches.push(addedTokenName);
+      }
+    });
+    if (allValueMatches.length > 0) {
+      diffResult.possiblyRenamed[deletedTokenName] = allValueMatches;
+    }
+  });
+}
+
+function logResultCategory(diffResult, categoryKey, msg) {
+  const results = diffResult[categoryKey];
+  const resultCount = Object.keys(results).length;
+  if (!msg) {
+    msg = `Tokens ${categoryKey}`;
+  }
+  if (resultCount > 0) {
+    console.log(`\n*${msg} (${resultCount}):*`);
+    switch (categoryKey) {
+      case "possiblyRenamed":
+        Object.keys(results)
+          .sort()
+          .forEach((oldTokenName, i) => {
+            if (
+              Array.isArray(results[oldTokenName]) &&
+              results[oldTokenName].length > 1
+            ) {
+              console.log(`  - Old name: \`${oldTokenName}\`, new name options:`);
+              results[oldTokenName].forEach((newTokenName) =>
+                console.log(`    - \`${newTokenName}\``)
+              );
+            } else {
+              console.log(
+                `  - \`${oldTokenName}\` -> \`${results[oldTokenName][0]}\``
+              );
+            }
+          });
+        break;
+      default:
+        Object.keys(results)
+          .sort()
+          .forEach((tokenName, i) => console.log(`  - \`${tokenName}\``));
+    }
+  }
+}