@adobe/spectrum-tokens 12.20.0 → 12.22.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @adobe/spectrum-tokens
 
+## 12.22.0
+
+### Minor Changes
+
+- f50ceea: Updated size for the Arrow UI icon used in submenus (previously was too small and looked imbalanced relative to everything else)
+
+  ### Token Diff
+
+  _Token values updated (4):_
+
+  - `navigational-indicator-top-to-back-icon-small`: `desktop` `7px` -> `6px` and `mobile` `9px` -> `7px`
+  - `navigational-indicator-top-to-back-icon-medium`: `desktop` `11px` -> `9px` and `mobile` `13px` -> `12px`
+  - `navigational-indicator-top-to-back-icon-large`: `desktop` `14px` -> `12px` and `mobile` `17px` -> `16px`
+  - `navigational-indicator-top-to-back-icon-extra-large`: `desktop` `17px` -> `15px` and `mobile` `22px` -> `19px`
+
+## 12.21.0
+
+### Minor Changes
+
+- 9ee663d: Modified and new Side nav tokens
+
+  ### Design Motivation
+
+  Category headings changed to Adobe Clean 12 Medium @ `gray-600`, to differentiate them from multi-level, top navigation items.
+
+  ### Token Diff
+
+  Token added (1):
+
+  - `side-navigation-header-to-item`
+
+  Token value updated (1):
+
+  - `side-navigation-item-to-header`: changed from `desktop: 16px` `mobile: 20px` to `desktop: 24px` `mobile: 30px`
+
 ## 12.20.0
 
 ### Minor Changes

package/dist/json/drover.json

@@ -1799,10 +1799,10 @@
     "meter-thickness-large": "6px",
     "meter-thickness-small": "4px",
     "meter-width": "192px",
-    "navigational-indicator-top-to-back-icon-extra-large": "17px",
-    "navigational-indicator-top-to-back-icon-large": "14px",
-    "navigational-indicator-top-to-back-icon-medium": "11px",
-    "navigational-indicator-top-to-back-icon-small": "7px",
+    "navigational-indicator-top-to-back-icon-extra-large": "15px",
+    "navigational-indicator-top-to-back-icon-large": "12px",
+    "navigational-indicator-top-to-back-icon-medium": "9px",
+    "navigational-indicator-top-to-back-icon-small": "6px",
     "opacity-checkerboard-square-size": "8px",
     "opacity-disabled": "0.3",
     "picker-border-width": "1px",
@@ -1844,7 +1844,8 @@
     "side-label-character-count-top-margin-medium": "8px",
     "side-label-character-count-top-margin-small": "4px",
     "side-navigation-bottom-to-text": "8px",
-    "side-navigation-item-to-header": "16px",
+    "side-navigation-header-to-item": "8px",
+    "side-navigation-item-to-header": "24px",
     "side-navigation-item-to-item": "4px",
     "side-navigation-maximum-width": "240px",
     "side-navigation-minimum-width": "160px",

package/dist/json/variables.json

@@ -7540,14 +7540,6 @@
     "value": "rgba(0, 0, 0, 0.25)",
     "uuid": "918b8089-d89f-45d2-8c9c-f3f13f81b0b9"
   },
-  "color-loupe-drop-shadow-y": {
-    "value": "2px",
-    "uuid": "c9af5d60-11b1-4fc3-972e-6a607120657b"
-  },
-  "color-loupe-drop-shadow-blur": {
-    "value": "8px",
-    "uuid": "86caa027-9e9e-4a5f-aa38-058f0a96bc9d"
-  },
   "color-loupe-inner-border": {
     "ref": "{transparent-black-200}",
     "value": "rgba(0, 0, 0, 0.1)",
@@ -16575,6 +16567,14 @@
     "value": "1px",
     "uuid": "b3900f89-0a7a-4c47-a6d9-ca8aa19b9bfb"
   },
+  "color-loupe-drop-shadow-y": {
+    "value": "2px",
+    "uuid": "c9af5d60-11b1-4fc3-972e-6a607120657b"
+  },
+  "color-loupe-drop-shadow-blur": {
+    "value": "8px",
+    "uuid": "86caa027-9e9e-4a5f-aa38-058f0a96bc9d"
+  },
   "card-minimum-width": {
     "value": "100px",
     "uuid": "55db9f3d-621d-4d23-b3d0-c0f2b0f3f9b0"
@@ -18968,15 +18968,27 @@
   "side-navigation-item-to-header": {
     "sets": {
       "desktop": {
-        "value": "16px",
+        "value": "24px",
         "uuid": "c5de72a2-931a-429d-ba85-5aaf2e30fbc4"
       },
       "mobile": {
-        "value": "20px",
+        "value": "30px",
         "uuid": "0f3821f1-6f0e-4325-bfa7-e572768fd468"
       }
     }
   },
+  "side-navigation-header-to-item": {
+    "sets": {
+      "desktop": {
+        "value": "8px",
+        "uuid": "423b5520-bb29-4179-9145-67305ca75b75"
+      },
+      "mobile": {
+        "value": "10px",
+        "uuid": "ad959938-ad69-4137-91e4-fcf2465b223a"
+      }
+    }
+  },
   "side-navigation-bottom-to-text": {
     "sets": {
       "desktop": {
@@ -20859,11 +20871,11 @@
   "navigational-indicator-top-to-back-icon-small": {
     "sets": {
       "desktop": {
-        "value": "7px",
+        "value": "6px",
         "uuid": "70de4f97-bc4a-44af-9995-1042e3c7c78f"
       },
       "mobile": {
-        "value": "9px",
+        "value": "7px",
         "uuid": "d11ab0de-19bd-4f56-8798-0192fd0cfe0e"
       }
     }
@@ -20871,11 +20883,11 @@
   "navigational-indicator-top-to-back-icon-medium": {
     "sets": {
       "desktop": {
-        "value": "11px",
+        "value": "9px",
         "uuid": "5561a148-fd77-44d3-b29d-3ed7389122a1"
       },
       "mobile": {
-        "value": "13px",
+        "value": "12px",
         "uuid": "74f8a686-0e06-4f7c-9e3d-694749beb420"
       }
     }
@@ -20883,11 +20895,11 @@
   "navigational-indicator-top-to-back-icon-large": {
     "sets": {
       "desktop": {
-        "value": "14px",
+        "value": "12px",
         "uuid": "c0e06d21-7372-401f-9ec2-926e2b1faf26"
       },
       "mobile": {
-        "value": "17px",
+        "value": "16px",
         "uuid": "e84bc865-c89f-403e-bb14-2a11f03fd364"
       }
     }
@@ -20895,11 +20907,11 @@
   "navigational-indicator-top-to-back-icon-extra-large": {
     "sets": {
       "desktop": {
-        "value": "17px",
+        "value": "15px",
         "uuid": "ac4d18d5-361c-4425-82c3-83979d58f682"
       },
       "mobile": {
-        "value": "22px",
+        "value": "19px",
         "uuid": "e68f2798-6a55-499a-b591-0cfc130607ba"
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.20.0",
+  "version": "12.22.0",
   "description": "Design tokens for Spectrum, Adobe's design system",
   "type": "module",
   "main": "tasks/buildSpectrumTokens.js",

package/src/color-component.json

@@ -90,16 +90,6 @@
     "value": "{transparent-black-300}",
     "uuid": "918b8089-d89f-45d2-8c9c-f3f13f81b0b9"
   },
-  "color-loupe-drop-shadow-y": {
-    "component": "color-loupe",
-    "value": "2px",
-    "uuid": "c9af5d60-11b1-4fc3-972e-6a607120657b"
-  },
-  "color-loupe-drop-shadow-blur": {
-    "component": "color-loupe",
-    "value": "8px",
-    "uuid": "86caa027-9e9e-4a5f-aa38-058f0a96bc9d"
-  },
   "color-loupe-inner-border": {
     "component": "color-loupe",
     "value": "{transparent-black-200}",

package/src/icons.json

@@ -94,6 +94,7 @@
     }
   },
   "workflow-icon-size-50": {
+    "component": "icon",
     "sets": {
       "desktop": {
         "value": "14px",
@@ -106,6 +107,7 @@
     }
   },
   "workflow-icon-size-75": {
+    "component": "icon",
     "sets": {
       "desktop": {
         "value": "16px",
@@ -118,6 +120,7 @@
     }
   },
   "workflow-icon-size-100": {
+    "component": "icon",
     "sets": {
       "desktop": {
         "value": "18px",
@@ -130,6 +133,7 @@
     }
   },
   "workflow-icon-size-200": {
+    "component": "icon",
     "sets": {
       "desktop": {
         "value": "20px",
@@ -142,6 +146,7 @@
     }
   },
   "workflow-icon-size-300": {
+    "component": "icon",
     "sets": {
       "desktop": {
         "value": "22px",

package/src/layout-component.json

@@ -3767,6 +3767,16 @@
     "value": "1px",
     "uuid": "b3900f89-0a7a-4c47-a6d9-ca8aa19b9bfb"
   },
+  "color-loupe-drop-shadow-y": {
+    "component": "color-loupe",
+    "value": "2px",
+    "uuid": "c9af5d60-11b1-4fc3-972e-6a607120657b"
+  },
+  "color-loupe-drop-shadow-blur": {
+    "component": "color-loupe",
+    "value": "8px",
+    "uuid": "86caa027-9e9e-4a5f-aa38-058f0a96bc9d"
+  },
   "card-minimum-width": {
     "component": "cards",
     "value": "100px",
@@ -6002,15 +6012,28 @@
     "component": "side-navigation",
     "sets": {
       "desktop": {
-        "value": "16px",
+        "value": "24px",
         "uuid": "c5de72a2-931a-429d-ba85-5aaf2e30fbc4"
       },
       "mobile": {
-        "value": "20px",
+        "value": "30px",
         "uuid": "0f3821f1-6f0e-4325-bfa7-e572768fd468"
       }
     }
   },
+  "side-navigation-header-to-item": {
+    "component": "side-navigation",
+    "sets": {
+      "desktop": {
+        "value": "8px",
+        "uuid": "423b5520-bb29-4179-9145-67305ca75b75"
+      },
+      "mobile": {
+        "value": "10px",
+        "uuid": "ad959938-ad69-4137-91e4-fcf2465b223a"
+      }
+    }
+  },
   "side-navigation-bottom-to-text": {
     "component": "side-navigation",
     "sets": {

package/src/layout.json

@@ -1696,11 +1696,11 @@
   "navigational-indicator-top-to-back-icon-small": {
     "sets": {
       "desktop": {
-        "value": "7px",
+        "value": "6px",
         "uuid": "70de4f97-bc4a-44af-9995-1042e3c7c78f"
       },
       "mobile": {
-        "value": "9px",
+        "value": "7px",
         "uuid": "d11ab0de-19bd-4f56-8798-0192fd0cfe0e"
       }
     }
@@ -1708,11 +1708,11 @@
   "navigational-indicator-top-to-back-icon-medium": {
     "sets": {
       "desktop": {
-        "value": "11px",
+        "value": "9px",
         "uuid": "5561a148-fd77-44d3-b29d-3ed7389122a1"
       },
       "mobile": {
-        "value": "13px",
+        "value": "12px",
         "uuid": "74f8a686-0e06-4f7c-9e3d-694749beb420"
       }
     }
@@ -1720,11 +1720,11 @@
   "navigational-indicator-top-to-back-icon-large": {
     "sets": {
       "desktop": {
-        "value": "14px",
+        "value": "12px",
         "uuid": "c0e06d21-7372-401f-9ec2-926e2b1faf26"
       },
       "mobile": {
-        "value": "17px",
+        "value": "16px",
         "uuid": "e84bc865-c89f-403e-bb14-2a11f03fd364"
       }
     }
@@ -1732,11 +1732,11 @@
   "navigational-indicator-top-to-back-icon-extra-large": {
     "sets": {
       "desktop": {
-        "value": "17px",
+        "value": "15px",
         "uuid": "ac4d18d5-361c-4425-82c3-83979d58f682"
       },
       "mobile": {
-        "value": "22px",
+        "value": "19px",
         "uuid": "e68f2798-6a55-499a-b591-0cfc130607ba"
       }
     }