@adobe/spectrum-tokens 13.0.0-beta.41 → 13.0.0-beta.43

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @adobe/spectrum-tokens
 
+## 13.0.0-beta.43
+
+### Minor Changes
+
+- [#384](https://github.com/adobe/spectrum-tokens/pull/384) [`681b4b0`](https://github.com/adobe/spectrum-tokens/commit/681b4b0094d31bae4c9b1b095fa59d6448c26cab) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added dragged drop shadow tokens that point to new 300 global drop shadow tokens
+
+  ## Design Motivation
+
+  These are new foundational drop shadow tokens that represent a higher elevation when items are dragged. The more prominent shadow also brings more visual focus to the dragged item. They will be used in the standard panel "dragged" state, as well as in future component updates, to be determined.
+
+  ## Token Diff
+
+  _Tokens added (8):_
+
+  - `drop-shadow-blur-300`
+  - `drop-shadow-color-300`
+  - `drop-shadow-dragged-blur`
+  - `drop-shadow-dragged-color`
+  - `drop-shadow-dragged-x`
+  - `drop-shadow-dragged-y`
+  - `drop-shadow-x-300`
+  - `drop-shadow-y-300`
+
+## 13.0.0-beta.42
+
+### Minor Changes
+
+- [#382](https://github.com/adobe/spectrum-tokens/pull/382) [`2af3850`](https://github.com/adobe/spectrum-tokens/commit/2af3850a554812fd9c1b3e6fd902a746c9ac42c7) Thanks [@nabuhasan](https://github.com/nabuhasan)! - Updated S2 swatch tokens and added swatch-group tokens in S2 Color and S2 Non-color data sets, respectively.
+
+  ## Design Motivation
+
+  Swatch and swatch group components are being formalized as Spectrum 2 components. These tokens define the design data needed for implementation. Changes include updated corner rounding, colors and spacing for spacious density.
+
+  For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13497).
+
+  ## Token Diff
+
+  _Tokens added (3):_
+
+  - `swatch-group-spacing-spacious`
+  - `swatch-group-border-opacity`
+  - `swatch-group-border-color`
+
+  _Tokens values updated (3):_
+
+  - `swatch-border-color`: `gray-900` -> `gray-1000`
+  - `swatch-border-opacity`: `0.51` -> `0.42`
+  - `swatch-disabled-icon-border-opacity`: `0.51` -> `0.42`
+
 ## 13.0.0-beta.41
 
 ### Minor Changes

package/dist/json/drover.json

@@ -178,6 +178,8 @@
       "drop-shadow-color": "rgba(0, 0, 0, 0.12)",
       "drop-shadow-color-100": "rgba(0, 0, 0, 0.12)",
       "drop-shadow-color-200": "rgba(0, 0, 0, 0.16)",
+      "drop-shadow-color-300": "rgba(0, 0, 0, 0.2)",
+      "drop-shadow-dragged-color": "rgba(0, 0, 0, 0.2)",
       "drop-shadow-elevated-color": "rgba(0, 0, 0, 0.16)",
       "drop-shadow-emphasized-default-color": "rgba(0, 0, 0, 0.12)",
       "drop-shadow-emphasized-hover-color": "rgba(0, 0, 0, 0.16)",
@@ -608,8 +610,9 @@
       "static-white-text-color": "rgb(255, 255, 255)",
       "static-white-track-color": "rgba(255, 255, 255, 0.17)",
       "static-white-track-indicator-color": "rgba(255, 255, 255, 0.94)",
-      "swatch-border-color": "rgb(19, 19, 19)",
+      "swatch-border-color": "rgb(0, 0, 0)",
       "swatch-disabled-icon-border-color": "rgb(0, 0, 0)",
+      "swatch-group-border-color": "rgb(0, 0, 0)",
       "table-row-hover-color": "rgb(19, 19, 19)",
       "table-selected-row-background-color": "rgb(59, 99, 251)",
       "table-selected-row-background-color-non-emphasized": "rgb(41, 41, 41)",
@@ -847,6 +850,8 @@
       "drop-shadow-color": "rgba(0, 0, 0, 0.36)",
       "drop-shadow-color-100": "rgba(0, 0, 0, 0.36)",
       "drop-shadow-color-200": "rgba(0, 0, 0, 0.48)",
+      "drop-shadow-color-300": "rgba(0, 0, 0, 0.6)",
+      "drop-shadow-dragged-color": "rgba(0, 0, 0, 0.6)",
       "drop-shadow-elevated-color": "rgba(0, 0, 0, 0.48)",
       "drop-shadow-emphasized-default-color": "rgba(0, 0, 0, 0.36)",
       "drop-shadow-emphasized-hover-color": "rgba(0, 0, 0, 0.48)",
@@ -1277,8 +1282,9 @@
       "static-white-text-color": "rgb(255, 255, 255)",
       "static-white-track-color": "rgba(255, 255, 255, 0.17)",
       "static-white-track-indicator-color": "rgba(255, 255, 255, 0.94)",
-      "swatch-border-color": "rgb(242, 242, 242)",
+      "swatch-border-color": "rgb(255, 255, 255)",
       "swatch-disabled-icon-border-color": "rgb(0, 0, 0)",
+      "swatch-group-border-color": "rgb(255, 255, 255)",
       "table-row-hover-color": "rgb(242, 242, 242)",
       "table-selected-row-background-color": "rgb(52, 91, 248)",
       "table-selected-row-background-color-non-emphasized": "rgb(219, 219, 219)",
@@ -1770,6 +1776,10 @@
     "drop-shadow-blur": "6px",
     "drop-shadow-blur-100": "6px",
     "drop-shadow-blur-200": "8px",
+    "drop-shadow-blur-300": "16px",
+    "drop-shadow-dragged-blur": "16px",
+    "drop-shadow-dragged-x": "0px",
+    "drop-shadow-dragged-y": "6px",
     "drop-shadow-elevated-blur": "8px",
     "drop-shadow-elevated-x": "0px",
     "drop-shadow-elevated-y": "2px",
@@ -1782,9 +1792,11 @@
     "drop-shadow-x": "0px",
     "drop-shadow-x-100": "0px",
     "drop-shadow-x-200": "0px",
+    "drop-shadow-x-300": "0px",
     "drop-shadow-y": "1px",
     "drop-shadow-y-100": "1px",
     "drop-shadow-y-200": "2px",
+    "drop-shadow-y-300": "6px",
     "drop-zone-background-color-opacity": "0.1",
     "drop-zone-background-color-opacity-filled": "0.3",
     "drop-zone-body-font-size": "14px",
@@ -2100,8 +2112,10 @@
     "status-light-top-to-dot-large": "14px",
     "status-light-top-to-dot-medium": "11px",
     "status-light-top-to-dot-small": "8px",
-    "swatch-border-opacity": "0.51",
-    "swatch-disabled-icon-border-opacity": "0.51",
+    "swatch-border-opacity": "0.42",
+    "swatch-disabled-icon-border-opacity": "0.42",
+    "swatch-group-border-opacity": "0.2",
+    "swatch-group-spacing-spacious": "6px",
     "swatch-size-extra-small": "16px",
     "swatch-size-large": "40px",
     "swatch-size-medium": "32px",

package/dist/json/variables.json

@@ -4812,6 +4812,18 @@
       }
     }
   },
+  "drop-shadow-color-300": {
+    "sets": {
+      "light": {
+        "value": "rgba(0, 0, 0, 0.2)",
+        "uuid": "84ced765-054d-44f4-9dbe-5be607f65a16"
+      },
+      "dark": {
+        "value": "rgba(0, 0, 0, 0.6)",
+        "uuid": "8fd7fa72-67c3-4004-b8b3-af55a4b9cada"
+      }
+    }
+  },
   "drop-shadow-emphasized-default-color": {
     "ref": "{drop-shadow-color-100}",
     "sets": {
@@ -4932,26 +4944,40 @@
     "value": "rgba(255, 255, 255, 0.94)",
     "uuid": "a1cbc282-1376-48d1-b8bb-92f10aef7c6f"
   },
-  "swatch-border-color": {
-    "ref": "{gray-900}",
+  "drop-shadow-dragged-color": {
+    "ref": "{drop-shadow-color-300}",
     "sets": {
       "light": {
-        "value": "rgb(19, 19, 19)",
-        "uuid": "59093f0d-98b7-4659-bea6-3248ad20e96c"
+        "value": "rgba(0, 0, 0, 0.2)",
+        "uuid": "84ced765-054d-44f4-9dbe-5be607f65a16"
       },
       "dark": {
-        "value": "rgb(242, 242, 242)",
-        "uuid": "90d25d68-afb1-4b2a-9dba-3fe22d44976f"
+        "value": "rgba(0, 0, 0, 0.6)",
+        "uuid": "8fd7fa72-67c3-4004-b8b3-af55a4b9cada"
+      }
+    },
+    "uuid": "83c30113-68b5-475b-ba46-9179c9ff7e8d"
+  },
+  "swatch-border-color": {
+    "ref": "{gray-1000}",
+    "sets": {
+      "dark": {
+        "value": "rgb(255, 255, 255)",
+        "uuid": "5ce8c477-ae6e-427a-ac5c-79d15c8056ab"
+      },
+      "light": {
+        "value": "rgb(0, 0, 0)",
+        "uuid": "457fbeb8-56cd-4f3c-9950-f5e01f83f07c"
       },
       "wireframe": {
-        "value": "rgb(72, 110, 194)",
-        "uuid": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978"
+        "value": "rgb(8, 12, 22)",
+        "uuid": "e804baf9-ae2c-4574-96d9-10cd5253fe47"
       }
     },
     "uuid": "7da5157d-7f25-405b-8de0-f3669565fb48"
   },
   "swatch-border-opacity": {
-    "value": "0.51",
+    "value": "0.42",
     "uuid": "0e397a80-cf33-44ed-8b7d-1abaf4426bf5"
   },
   "swatch-disabled-icon-border-color": {
@@ -4960,7 +4986,7 @@
     "uuid": "c49cd7ae-7657-458b-871a-6b4f28bca535"
   },
   "swatch-disabled-icon-border-opacity": {
-    "value": "0.51",
+    "value": "0.42",
     "uuid": "cdbba3b6-cb51-4fec-88f0-273d4bb59a18"
   },
   "thumbnail-border-color": {
@@ -5757,6 +5783,24 @@
     },
     "uuid": "bfd387b8-0ce0-45ff-8d66-fc5de2f4900c"
   },
+  "swatch-group-border-color": {
+    "ref": "{gray-1000}",
+    "sets": {
+      "dark": {
+        "value": "rgb(255, 255, 255)",
+        "uuid": "5ce8c477-ae6e-427a-ac5c-79d15c8056ab"
+      },
+      "light": {
+        "value": "rgb(0, 0, 0)",
+        "uuid": "457fbeb8-56cd-4f3c-9950-f5e01f83f07c"
+      },
+      "wireframe": {
+        "value": "rgb(8, 12, 22)",
+        "uuid": "e804baf9-ae2c-4574-96d9-10cd5253fe47"
+      }
+    },
+    "uuid": "08b8d06a-5475-47bf-ad2e-9f52ee07345a"
+  },
   "white": {
     "value": "rgb(255, 255, 255)",
     "uuid": "9b799da8-2130-417e-b7ee-5e1154a89837"
@@ -21077,6 +21121,14 @@
     },
     "uuid": "66540ddb-ec74-487f-8e09-a37b436694b5"
   },
+  "swatch-group-spacing-spacious": {
+    "value": "6px",
+    "uuid": "b80ef303-eae7-498f-b172-73a098be0f0b"
+  },
+  "swatch-group-border-opacity": {
+    "value": "0.2",
+    "uuid": "19968846-dad0-42eb-b6a8-af65f3a910ff"
+  },
   "corner-radius-0": {
     "value": "0px",
     "uuid": "bb9d8350-b1fb-4496-9c22-6ec9647ff117"
@@ -22959,6 +23011,10 @@
     "value": "0px",
     "uuid": "0c76c925-4d29-49a3-b882-e946bd7fe9f1"
   },
+  "drop-shadow-x-300": {
+    "value": "0px",
+    "uuid": "cb6d74fe-cc32-47ff-bf8b-74597643a8a6"
+  },
   "drop-shadow-y-100": {
     "value": "1px",
     "uuid": "ed1f46fd-a586-46a5-8cc1-d843a57e2cc2"
@@ -22967,6 +23023,10 @@
     "value": "2px",
     "uuid": "d2d0320a-6984-4b3f-8f5d-ccb88892a26c"
   },
+  "drop-shadow-y-300": {
+    "value": "6px",
+    "uuid": "5d09089b-c0c5-4122-a3be-3e989562acda"
+  },
   "drop-shadow-blur-100": {
     "value": "6px",
     "uuid": "025e39f4-dfe7-4a8a-beb5-bd0577f72eac"
@@ -22975,6 +23035,10 @@
     "value": "8px",
     "uuid": "2b08d425-ecf2-4891-83cd-005a2d5e76ce"
   },
+  "drop-shadow-blur-300": {
+    "value": "16px",
+    "uuid": "34812e0c-7ccf-49c2-884a-6fecd45f7c5a"
+  },
   "drop-shadow-emphasized-default-x": {
     "ref": "{drop-shadow-x-100}",
     "value": "0px",
@@ -23020,6 +23084,21 @@
     "value": "8px",
     "uuid": "f3487a86-3aea-4527-8b5c-287c0bddad6c"
   },
+  "drop-shadow-dragged-x": {
+    "ref": "{drop-shadow-x-300}",
+    "value": "0px",
+    "uuid": "be5c80b4-5769-491b-9550-fcf94f0c762e"
+  },
+  "drop-shadow-dragged-y": {
+    "ref": "{drop-shadow-y-300}",
+    "value": "6px",
+    "uuid": "ff8d4fda-72fa-4256-b2c8-f22a9d3e644f"
+  },
+  "drop-shadow-dragged-blur": {
+    "ref": "{drop-shadow-blur-300}",
+    "value": "16px",
+    "uuid": "f6015252-21fb-48f9-aadb-5ad050e3d590"
+  },
   "accent-color-100": {
     "ref": "{blue-100}",
     "sets": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "13.0.0-beta.41",
+  "version": "13.0.0-beta.43",
   "description": "Design tokens for Spectrum, Adobe's design system",
   "type": "module",
   "main": "index.js",

package/src/color-aliases.json

@@ -1703,6 +1703,21 @@
       }
     }
   },
+  "drop-shadow-color-300": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
+    "sets": {
+      "light": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json",
+        "value": "rgba(0, 0, 0, 0.2)",
+        "uuid": "84ced765-054d-44f4-9dbe-5be607f65a16"
+      },
+      "dark": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json",
+        "value": "rgba(0, 0, 0, 0.6)",
+        "uuid": "8fd7fa72-67c3-4004-b8b3-af55a4b9cada"
+      }
+    }
+  },
   "drop-shadow-emphasized-default-color": {
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{drop-shadow-color-100}",
@@ -1757,5 +1772,10 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{transparent-white-900}",
     "uuid": "a1cbc282-1376-48d1-b8bb-92f10aef7c6f"
+  },
+  "drop-shadow-dragged-color": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+    "value": "{drop-shadow-color-300}",
+    "uuid": "83c30113-68b5-475b-ba46-9179c9ff7e8d"
   }
 }

package/src/color-component.json

@@ -2,13 +2,13 @@
   "swatch-border-color": {
     "component": "swatch",
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
-    "value": "{gray-900}",
+    "value": "{gray-1000}",
     "uuid": "7da5157d-7f25-405b-8de0-f3669565fb48"
   },
   "swatch-border-opacity": {
     "component": "swatch",
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/opacity.json",
-    "value": "0.51",
+    "value": "0.42",
     "uuid": "0e397a80-cf33-44ed-8b7d-1abaf4426bf5"
   },
   "swatch-disabled-icon-border-color": {
@@ -20,7 +20,7 @@
   "swatch-disabled-icon-border-opacity": {
     "component": "swatch",
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/opacity.json",
-    "value": "0.51",
+    "value": "0.42",
     "uuid": "cdbba3b6-cb51-4fec-88f0-273d4bb59a18"
   },
   "thumbnail-border-color": {
@@ -405,5 +405,11 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{blue-800}",
     "uuid": "bfd387b8-0ce0-45ff-8d66-fc5de2f4900c"
+  },
+  "swatch-group-border-color": {
+    "component": "swatch-group",
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+    "value": "{gray-1000}",
+    "uuid": "08b8d06a-5475-47bf-ad2e-9f52ee07345a"
   }
 }

package/src/layout-component.json

@@ -8549,5 +8549,17 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{font-size-100}",
     "uuid": "66540ddb-ec74-487f-8e09-a37b436694b5"
+  },
+  "swatch-group-spacing-spacious": {
+    "component": "swatch-group",
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "6px",
+    "uuid": "b80ef303-eae7-498f-b172-73a098be0f0b"
+  },
+  "swatch-group-border-opacity": {
+    "component": "swatch-group",
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/opacity.json",
+    "value": "0.2",
+    "uuid": "19968846-dad0-42eb-b6a8-af65f3a910ff"
   }
 }

package/src/layout.json

@@ -2279,6 +2279,11 @@
     "value": "0px",
     "uuid": "0c76c925-4d29-49a3-b882-e946bd7fe9f1"
   },
+  "drop-shadow-x-300": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "0px",
+    "uuid": "cb6d74fe-cc32-47ff-bf8b-74597643a8a6"
+  },
   "drop-shadow-y-100": {
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
     "value": "1px",
@@ -2289,6 +2294,11 @@
     "value": "2px",
     "uuid": "d2d0320a-6984-4b3f-8f5d-ccb88892a26c"
   },
+  "drop-shadow-y-300": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "6px",
+    "uuid": "5d09089b-c0c5-4122-a3be-3e989562acda"
+  },
   "drop-shadow-blur-100": {
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
     "value": "6px",
@@ -2299,6 +2309,11 @@
     "value": "8px",
     "uuid": "2b08d425-ecf2-4891-83cd-005a2d5e76ce"
   },
+  "drop-shadow-blur-300": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "16px",
+    "uuid": "34812e0c-7ccf-49c2-884a-6fecd45f7c5a"
+  },
   "drop-shadow-emphasized-default-x": {
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{drop-shadow-x-100}",
@@ -2343,5 +2358,20 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{drop-shadow-blur-200}",
     "uuid": "f3487a86-3aea-4527-8b5c-287c0bddad6c"
+  },
+  "drop-shadow-dragged-x": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+    "value": "{drop-shadow-x-300}",
+    "uuid": "be5c80b4-5769-491b-9550-fcf94f0c762e"
+  },
+  "drop-shadow-dragged-y": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+    "value": "{drop-shadow-y-300}",
+    "uuid": "ff8d4fda-72fa-4256-b2c8-f22a9d3e644f"
+  },
+  "drop-shadow-dragged-blur": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+    "value": "{drop-shadow-blur-300}",
+    "uuid": "f6015252-21fb-48f9-aadb-5ad050e3d590"
   }
 }