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

package/CHANGELOG.md

@@ -1,8 +1,12 @@
-# [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.67](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.66...v12.0.0-beta.67) (2023-01-25)
+
+
+### Bug Fixes
+
+* token name typo ([007da82](https://github.com/adobe/spectrum-tokens/commit/007da828661f97ea7f8880b795d8571f3a0026d2))
 
 
 ### 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))
+* color loupe tokens, DNA-1249 ([4169f4a](https://github.com/adobe/spectrum-tokens/commit/4169f4a9548169b855fdd78ae918f74935cc0306))
+* new card tokens, DNA-1250 ([c9e3bdd](https://github.com/adobe/spectrum-tokens/commit/c9e3bdd24d77659b174e350a5671067bb019a081))

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

@@ -56,6 +56,7 @@
       "blue-background-color-default": "rgb(2, 101, 220)",
       "blue-visual-color": "rgb(20, 122, 243)",
       "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)",
@@ -90,6 +91,9 @@
       "chartreuse-visual-color": "rgb(135, 177, 3)",
       "color-area-border-color": "rgb(0, 0, 0)",
       "color-area-border-width": "1px",
+      "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
+      "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
+      "color-loupe-outer-border": "rgb(255, 255, 255)",
       "color-slider-border-color": "rgb(0, 0, 0)",
       "cyan-100": "rgb(197, 248, 255)",
       "cyan-1000": "rgb(0, 93, 137)",
@@ -462,6 +466,7 @@
       "blue-background-color-default": "rgb(52, 143, 244)",
       "blue-visual-color": "rgb(114, 183, 249)",
       "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)",
@@ -496,6 +501,9 @@
       "chartreuse-visual-color": "rgb(148, 192, 8)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
+      "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
+      "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
+      "color-loupe-outer-border": "rgb(255, 255, 255)",
       "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 61, 98)",
       "cyan-1000": "rgb(84, 211, 241)",
@@ -868,6 +876,7 @@
       "blue-background-color-default": "rgb(29, 128, 245)",
       "blue-visual-color": "rgb(94, 170, 247)",
       "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)",
@@ -902,6 +911,9 @@
       "chartreuse-visual-color": "rgb(138, 180, 3)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
+      "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
+      "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
+      "color-loupe-outer-border": "rgb(255, 255, 255)",
       "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 41, 68)",
       "cyan-1000": "rgb(57, 199, 234)",
@@ -1295,6 +1307,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,6 +1340,13 @@
     "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",
@@ -1395,7 +1418,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",

package/dist/json/variables.json

@@ -5853,6 +5853,44 @@
   "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"
+  },
   "white": {
     "value": "rgb(255, 255, 255)"
   },
@@ -11670,6 +11708,92 @@
   "search-field-minimum-width-multiplier": {
     "value": "3"
   },
+  "color-loupe-height": {
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "64px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "40px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-width": {
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "48px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "32px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-bottom-to-color-handle": {
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "12px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "6px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-outer-border-width": {
+    "ref": "{border-width-200}",
+    "value": "2px"
+  },
+  "color-loupe-inner-border-width": {
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "ref": "{border-width-200}",
+            "value": "2px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "3px"
+          }
+        }
+      }
+    }
+  },
+  "card-minimum-width": {
+    "value": "100px"
+  },
+  "card-preview-minimum-height": {
+    "value": "130px"
+  },
+  "card-selection-background-size": {
+    "value": "40px"
+  },
   "corner-radius-75": {
     "sets": {
       "spectrum": {
@@ -15724,7 +15848,7 @@
     "ref": "{cjk-line-height-100}",
     "value": "1.5"
   },
-  "detail-margin-top-mulitplier": {
+  "detail-margin-top-multiplier": {
     "value": "0.88888889"
   },
   "detail-margin-bottom-multiplier": {

package/jest.config.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.0.0-beta.66",
+  "version": "12.0.0-beta.67",
   "description": "",
   "type": "module",
   "main": "config.js",
@@ -13,7 +13,7 @@
     "diffLastRelease": ". tasks/diffOutput.sh",
     "generateDiffResult": "node tasks/diff.js",
     "clean": "rm -rf dist",
-    "pre-commit": "lint-staged --config commitlint.config.cjs",
+    "pre-commit": "lint-staged",
     "prepare": "husky install && yarn run build",
     "semantic-release": "semantic-release"
   },

package/src/color-component.json

@@ -64,5 +64,33 @@
   "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"
   }
 }

package/src/layout-component.json

@@ -2810,5 +2810,97 @@
   "search-field-minimum-width-multiplier": {
     "component": "search-field",
     "value": "3"
+  },
+  "color-loupe-height": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "64px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "40px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-width": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "48px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "32px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-bottom-to-color-handle": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "12px"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "value": "6px"
+          }
+        }
+      }
+    }
+  },
+  "color-loupe-outer-border-width": {
+    "component": "color-loupe",
+    "value": "{border-width-200}"
+  },
+  "color-loupe-inner-border-width": {
+    "component": "color-loupe",
+    "sets": {
+      "spectrum": {
+        "sets": {
+          "desktop": {
+            "value": "{border-width-200}"
+          }
+        }
+      },
+      "express": {
+        "sets": {
+          "desktop": {
+            "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"
   }
 }

package/src/typography.json

@@ -991,7 +991,7 @@
     "component": "detail",
     "value": "{cjk-line-height-100}"
   },
-  "detail-margin-top-mulitplier": {
+  "detail-margin-top-multiplier": {
     "component": "detail",
     "value": "0.88888889"
   },

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/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}\``)
               );