@adobe/spectrum-tokens 13.0.0-beta.8 → 13.0.0-beta.9

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @adobe/spectrum-tokens
 
+## 13.0.0-beta.9
+
+### Minor Changes
+
+- cf09c84: Updated workflow-icon-size-50, 75, 100, 200, 300 with Spectrum 2 values in mobile and desktop.
+  Updated component-top-to-workflow and text-to-visual padding.
+  Added 3 new non-color tokens for S2 component downstates in Tokens Studio.
+
+  ## Design Motivation
+
+  Spectrum 2 icons have a different workflow icon sizing with base sizes 20 px (desktop), 24 px (mobile).
+
+  Updated padding values due to new workflow icon sizes in S2.
+
+  These tokens are used to calculate the perspective transform in CSS to achieve the effect of a component scaling down for down states in Spectrum 2. This is not applicable to all components.
+
+  ## Tokens Diff
+
+  _Tokens added (3):_
+
+  - `component-size-difference-down`
+  - `component-size-minimum-perspective-down`
+  - `component-size-width-ratio-down`
+
+  _Token values updated (15):_
+
+  - `component-top-to-workflow-icon-100`
+  - `component-top-to-workflow-icon-200`
+  - `component-top-to-workflow-icon-300`
+  - `component-top-to-workflow-icon-50`
+  - `component-top-to-workflow-icon-75`
+  - `text-to-visual-100`
+  - `text-to-visual-200`
+  - `text-to-visual-300`
+  - `text-to-visual-50`
+  - `text-to-visual-75`
+  - `workflow-icon-size-100`
+  - `workflow-icon-size-200`
+  - `workflow-icon-size-300`
+  - `workflow-icon-size-50`
+  - `workflow-icon-size-75`
+
 ## 13.0.0-beta.8
 
 ### Minor Changes

package/dist/json/drover.json

@@ -1401,6 +1401,9 @@
     "component-pill-edge-to-visual-only-200": "10px",
     "component-pill-edge-to-visual-only-300": "13px",
     "component-pill-edge-to-visual-only-75": "4px",
+    "component-size-difference-down": "-2px",
+    "component-size-minimum-perspective-down": "24px",
+    "component-size-width-ratio-down": "0.3333",
     "component-to-menu-extra-large": "8px",
     "component-to-menu-large": "7px",
     "component-to-menu-medium": "6px",
@@ -1410,9 +1413,9 @@
     "component-top-to-text-300": "12px",
     "component-top-to-text-50": "3px",
     "component-top-to-text-75": "4px",
-    "component-top-to-workflow-icon-100": "7px",
-    "component-top-to-workflow-icon-200": "10px",
-    "component-top-to-workflow-icon-300": "13px",
+    "component-top-to-workflow-icon-100": "6px",
+    "component-top-to-workflow-icon-200": "9px",
+    "component-top-to-workflow-icon-300": "11px",
     "component-top-to-workflow-icon-50": "3px",
     "component-top-to-workflow-icon-75": "4px",
     "contextual-help-body-size": "14px",
@@ -1887,11 +1890,11 @@
     "text-to-control-200": "11px",
     "text-to-control-300": "13px",
     "text-to-control-75": "9px",
-    "text-to-visual-100": "8px",
-    "text-to-visual-200": "9px",
-    "text-to-visual-300": "10px",
-    "text-to-visual-50": "6px",
-    "text-to-visual-75": "7px",
+    "text-to-visual-100": "6px",
+    "text-to-visual-200": "7px",
+    "text-to-visual-300": "8px",
+    "text-to-visual-50": "5px",
+    "text-to-visual-75": "5px",
     "text-underline-gap": "1px",
     "text-underline-thickness": "1px",
     "thumbnail-border-opacity": "0.1",
@@ -1917,9 +1920,9 @@
     "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",
+    "workflow-icon-size-100": "20px",
+    "workflow-icon-size-200": "22px",
+    "workflow-icon-size-300": "26px",
     "workflow-icon-size-50": "14px",
     "workflow-icon-size-75": "16px"
   }

package/dist/json/variables.json

@@ -15827,7 +15827,7 @@
         "uuid": "1423caf1-75ca-4ca8-aa6a-22dcf3655b0e"
       },
       "mobile": {
-        "value": "18px",
+        "value": "16px",
         "uuid": "4c4cb541-7d42-4bb4-9c86-7197c4600896"
       }
     }
@@ -15839,7 +15839,7 @@
         "uuid": "85cdef34-0682-45eb-ac06-98c76883cdf7"
       },
       "mobile": {
-        "value": "20px",
+        "value": "18px",
         "uuid": "b720c214-babe-426d-9629-9ec60d5e8622"
       }
     }
@@ -15847,11 +15847,11 @@
   "workflow-icon-size-100": {
     "sets": {
       "desktop": {
-        "value": "18px",
+        "value": "20px",
         "uuid": "40abc60f-ab65-41ef-b724-a0f0bdd94d14"
       },
       "mobile": {
-        "value": "22px",
+        "value": "24px",
         "uuid": "9e882a20-b8e1-4e9b-89f9-26f21db3cd78"
       }
     }
@@ -15859,11 +15859,11 @@
   "workflow-icon-size-200": {
     "sets": {
       "desktop": {
-        "value": "20px",
+        "value": "22px",
         "uuid": "6392e605-932e-456d-be53-149b624a04e2"
       },
       "mobile": {
-        "value": "24px",
+        "value": "28px",
         "uuid": "9948e083-8c75-48f7-8e58-32c75ec76116"
       }
     }
@@ -15871,11 +15871,11 @@
   "workflow-icon-size-300": {
     "sets": {
       "desktop": {
-        "value": "22px",
+        "value": "26px",
         "uuid": "25908278-79d3-47f4-9b53-adbdd1c13e2a"
       },
       "mobile": {
-        "value": "28px",
+        "value": "30px",
         "uuid": "df0dc6c3-59fc-4ee0-87a9-c3d49a07cf9c"
       }
     }
@@ -15931,11 +15931,11 @@
   "text-to-visual-50": {
     "sets": {
       "desktop": {
-        "value": "6px",
+        "value": "5px",
         "uuid": "ff1fadc2-9ec0-456f-a054-4512e51c85c8"
       },
       "mobile": {
-        "value": "8px",
+        "value": "7px",
         "uuid": "8588bf80-96df-40fb-8b6f-61d06899f8dd"
       }
     }
@@ -15943,11 +15943,11 @@
   "text-to-visual-75": {
     "sets": {
       "desktop": {
-        "value": "7px",
+        "value": "5px",
         "uuid": "50763a0d-c6eb-47f0-8b56-4c86ee22a430"
       },
       "mobile": {
-        "value": "9px",
+        "value": "7px",
         "uuid": "77dc4cd4-8e4e-4873-b6f3-d573eb7fc315"
       }
     }
@@ -15955,11 +15955,11 @@
   "text-to-visual-100": {
     "sets": {
       "desktop": {
-        "value": "8px",
+        "value": "6px",
         "uuid": "1d601d0a-d6d0-4711-9fb9-71898c2bcc9a"
       },
       "mobile": {
-        "value": "10px",
+        "value": "8px",
         "uuid": "09d55113-8d94-429f-b0c8-ffabe8ccba27"
       }
     }
@@ -15967,11 +15967,11 @@
   "text-to-visual-200": {
     "sets": {
       "desktop": {
-        "value": "9px",
+        "value": "7px",
         "uuid": "7ce11af3-b94b-4239-a310-f8d09635779a"
       },
       "mobile": {
-        "value": "11px",
+        "value": "9px",
         "uuid": "dc4ec555-72eb-4328-aba4-e8d594102f45"
       }
     }
@@ -15979,11 +15979,11 @@
   "text-to-visual-300": {
     "sets": {
       "desktop": {
-        "value": "10px",
+        "value": "8px",
         "uuid": "4366909e-3bfb-481c-abdc-4ae71f965bc3"
       },
       "mobile": {
-        "value": "13px",
+        "value": "11px",
         "uuid": "205f0c77-6588-4cc7-927f-3ba767200bac"
       }
     }
@@ -16471,7 +16471,7 @@
         "uuid": "0fafc819-d65b-4952-849a-b3c426e9a4a9"
       },
       "mobile": {
-        "value": "4px",
+        "value": "5px",
         "uuid": "24853983-c1b0-422d-84b6-05b9313066ed"
       }
     }
@@ -16483,7 +16483,7 @@
         "uuid": "2bc8b2ca-9792-4034-a604-43ce28ce8ede"
       },
       "mobile": {
-        "value": "5px",
+        "value": "6px",
         "uuid": "9d1b0ef4-5433-43fe-aa33-0274ff29f6f3"
       }
     }
@@ -16491,11 +16491,11 @@
   "component-top-to-workflow-icon-100": {
     "sets": {
       "desktop": {
-        "value": "7px",
+        "value": "6px",
         "uuid": "c3a280b0-bc84-4a7c-8048-c689f8deef86"
       },
       "mobile": {
-        "value": "9px",
+        "value": "8px",
         "uuid": "a3d3f9e9-a784-445a-a052-22f84b832512"
       }
     }
@@ -16503,11 +16503,11 @@
   "component-top-to-workflow-icon-200": {
     "sets": {
       "desktop": {
-        "value": "10px",
+        "value": "9px",
         "uuid": "ef82b92a-2cbd-4b70-920c-4b999b018e07"
       },
       "mobile": {
-        "value": "13px",
+        "value": "11px",
         "uuid": "259c0cf5-d321-4a6b-a3ae-b8c58fc1c9d6"
       }
     }
@@ -16515,11 +16515,11 @@
   "component-top-to-workflow-icon-300": {
     "sets": {
       "desktop": {
-        "value": "13px",
+        "value": "11px",
         "uuid": "72d6ae5c-e133-4e7f-bc96-3e4c28d586fd"
       },
       "mobile": {
-        "value": "16px",
+        "value": "15px",
         "uuid": "bac14298-68f0-4fb6-a152-c95ab19fd27f"
       }
     }
@@ -17476,6 +17476,18 @@
       }
     }
   },
+  "component-size-width-ratio-down": {
+    "value": "0.3333",
+    "uuid": "4ee7342c-f2ef-4554-af0f-011052ff6177"
+  },
+  "component-size-minimum-perspective-down": {
+    "value": "24px",
+    "uuid": "103daec0-9711-4422-84d1-62ab77afa00d"
+  },
+  "component-size-difference-down": {
+    "value": "-2px",
+    "uuid": "9ef4a0a5-b81c-4f54-8927-286ece29a824"
+  },
   "accent-color-100": {
     "ref": "{blue-100}",
     "sets": {

package/package.json

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

package/src/layout.json

@@ -104,7 +104,7 @@
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "18px",
+        "value": "16px",
         "uuid": "4c4cb541-7d42-4bb4-9c86-7197c4600896"
       }
     }
@@ -119,7 +119,7 @@
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "20px",
+        "value": "18px",
         "uuid": "b720c214-babe-426d-9629-9ec60d5e8622"
       }
     }
@@ -129,12 +129,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "18px",
+        "value": "20px",
         "uuid": "40abc60f-ab65-41ef-b724-a0f0bdd94d14"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "22px",
+        "value": "24px",
         "uuid": "9e882a20-b8e1-4e9b-89f9-26f21db3cd78"
       }
     }
@@ -144,12 +144,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "20px",
+        "value": "22px",
         "uuid": "6392e605-932e-456d-be53-149b624a04e2"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "24px",
+        "value": "28px",
         "uuid": "9948e083-8c75-48f7-8e58-32c75ec76116"
       }
     }
@@ -159,12 +159,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "22px",
+        "value": "26px",
         "uuid": "25908278-79d3-47f4-9b53-adbdd1c13e2a"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "28px",
+        "value": "30px",
         "uuid": "df0dc6c3-59fc-4ee0-87a9-c3d49a07cf9c"
       }
     }
@@ -234,12 +234,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "6px",
+        "value": "5px",
         "uuid": "ff1fadc2-9ec0-456f-a054-4512e51c85c8"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "8px",
+        "value": "7px",
         "uuid": "8588bf80-96df-40fb-8b6f-61d06899f8dd"
       }
     }
@@ -249,12 +249,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "7px",
+        "value": "5px",
         "uuid": "50763a0d-c6eb-47f0-8b56-4c86ee22a430"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "9px",
+        "value": "7px",
         "uuid": "77dc4cd4-8e4e-4873-b6f3-d573eb7fc315"
       }
     }
@@ -264,12 +264,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "8px",
+        "value": "6px",
         "uuid": "1d601d0a-d6d0-4711-9fb9-71898c2bcc9a"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "10px",
+        "value": "8px",
         "uuid": "09d55113-8d94-429f-b0c8-ffabe8ccba27"
       }
     }
@@ -279,12 +279,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "9px",
+        "value": "7px",
         "uuid": "7ce11af3-b94b-4239-a310-f8d09635779a"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "11px",
+        "value": "9px",
         "uuid": "dc4ec555-72eb-4328-aba4-e8d594102f45"
       }
     }
@@ -294,12 +294,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "10px",
+        "value": "8px",
         "uuid": "4366909e-3bfb-481c-abdc-4ae71f965bc3"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "13px",
+        "value": "11px",
         "uuid": "205f0c77-6588-4cc7-927f-3ba767200bac"
       }
     }
@@ -909,7 +909,7 @@
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "4px",
+        "value": "5px",
         "uuid": "24853983-c1b0-422d-84b6-05b9313066ed"
       }
     }
@@ -924,7 +924,7 @@
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "5px",
+        "value": "6px",
         "uuid": "9d1b0ef4-5433-43fe-aa33-0274ff29f6f3"
       }
     }
@@ -934,12 +934,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "7px",
+        "value": "6px",
         "uuid": "c3a280b0-bc84-4a7c-8048-c689f8deef86"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "9px",
+        "value": "8px",
         "uuid": "a3d3f9e9-a784-445a-a052-22f84b832512"
       }
     }
@@ -949,12 +949,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "10px",
+        "value": "9px",
         "uuid": "ef82b92a-2cbd-4b70-920c-4b999b018e07"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "13px",
+        "value": "11px",
         "uuid": "259c0cf5-d321-4a6b-a3ae-b8c58fc1c9d6"
       }
     }
@@ -964,12 +964,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "13px",
+        "value": "11px",
         "uuid": "72d6ae5c-e133-4e7f-bc96-3e4c28d586fd"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
-        "value": "16px",
+        "value": "15px",
         "uuid": "bac14298-68f0-4fb6-a152-c95ab19fd27f"
       }
     }
@@ -2163,5 +2163,20 @@
         "uuid": "d396d74a-425d-4f06-837f-349f81ebf486"
       }
     }
+  },
+  "component-size-width-ratio-down": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/multiplier.json",
+    "value": "0.3333",
+    "uuid": "4ee7342c-f2ef-4554-af0f-011052ff6177"
+  },
+  "component-size-minimum-perspective-down": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "24px",
+    "uuid": "103daec0-9711-4422-84d1-62ab77afa00d"
+  },
+  "component-size-difference-down": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "-2px",
+    "uuid": "9ef4a0a5-b81c-4f54-8927-286ece29a824"
   }
 }