@adobe/spectrum-tokens 13.0.0-beta.20 → 13.0.0-beta.22

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @adobe/spectrum-tokens
 
+## 13.0.0-beta.22
+
+### Minor Changes
+
+- c42448c: Updated and added alert dialog tokens for both desktop and mobile.
+
+  ## Design Motivation
+
+  Title text in alert dialog is now using the new Title typography token. Also updated the size for description text, and added a new token for top to alert icon.
+
+  Title is a new typography style for Spectrum 2, and has a default `title-color` token.
+
+  ## Token Diff
+
+  _Tokens added (2):_
+
+  - `alert-banner-top-to-alert-icon`
+  - `title-color`
+
+  _Token values updated (2):_
+
+  - `alert-dialog-description-size`
+  - `alert-dialog-title-size`
+
+- 46a801c: Added tokens for S2 title color
+
+## 13.0.0-beta.21
+
+### Minor Changes
+
+- d71bea1: S2 Opacity checkerboard non-color token updates
+
+  ## Design Motivation
+
+  These changes occurred as a result of scaling things for S2 design language and experiences.
+
+  ## Token Diff
+
+  _Tokens added (2):_
+
+  - `opacity-checkerboard-square-size-medium`
+  - `opacity-checkerboard-square-size-small`
+
+  _Newly deprecated token (1):_
+
+  - `opacity-checkerboard-square-size`
+
 ## 13.0.0-beta.20
 
 ### Minor Changes

package/dist/json/drover.json

@@ -512,6 +512,7 @@
       "table-selected-row-background-color": "rgb(59, 99, 251)",
       "table-selected-row-background-color-non-emphasized": "rgb(41, 41, 41)",
       "thumbnail-border-color": "rgb(41, 41, 41)",
+      "title-color": "rgb(19, 19, 19)",
       "transparent-black-100": "rgba(0, 0, 0, 0.09)",
       "transparent-black-1000": "rgb(0, 0, 0)",
       "transparent-black-200": "rgba(0, 0, 0, 0.12)",
@@ -1077,6 +1078,7 @@
       "table-selected-row-background-color": "rgb(52, 91, 248)",
       "table-selected-row-background-color-non-emphasized": "rgb(219, 219, 219)",
       "thumbnail-border-color": "rgb(219, 219, 219)",
+      "title-color": "rgb(242, 242, 242)",
       "transparent-black-100": "rgba(0, 0, 0, 0.09)",
       "transparent-black-1000": "rgb(0, 0, 0)",
       "transparent-black-200": "rgba(0, 0, 0, 0.12)",
@@ -1236,13 +1238,14 @@
     "alert-banner-to-bottom-text": "20px",
     "alert-banner-to-top-text": "18px",
     "alert-banner-to-top-workflow-icon": "19px",
+    "alert-banner-top-to-alert-icon": "37px",
     "alert-banner-top-to-text": "18px",
     "alert-banner-top-to-workflow-icon": "19px",
     "alert-banner-width": "832px",
-    "alert-dialog-description-size": "14px",
+    "alert-dialog-description-size": "16px",
     "alert-dialog-maximum-width": "480px",
     "alert-dialog-minimum-width": "288px",
-    "alert-dialog-title-size": "18px",
+    "alert-dialog-title-size": "22px",
     "arrow-icon-size-100": "10px",
     "arrow-icon-size-200": "12px",
     "arrow-icon-size-300": "14px",
@@ -1686,6 +1689,8 @@
     "navigational-indicator-top-to-back-icon-medium": "9px",
     "navigational-indicator-top-to-back-icon-small": "6px",
     "opacity-checkerboard-square-size": "8px",
+    "opacity-checkerboard-square-size-medium": "8px",
+    "opacity-checkerboard-square-size-small": "4px",
     "opacity-disabled": "0.3",
     "picker-border-width": "1px",
     "picker-end-edge-to-disclosure-icon-quiet": "0px",

package/dist/json/variables.json

@@ -4760,6 +4760,24 @@
       }
     }
   },
+  "title-color": {
+    "ref": "{gray-900}",
+    "sets": {
+      "light": {
+        "value": "rgb(19, 19, 19)",
+        "uuid": "59093f0d-98b7-4659-bea6-3248ad20e96c"
+      },
+      "dark": {
+        "value": "rgb(242, 242, 242)",
+        "uuid": "90d25d68-afb1-4b2a-9dba-3fe22d44976f"
+      },
+      "wireframe": {
+        "value": "rgb(72, 110, 194)",
+        "uuid": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978"
+      }
+    },
+    "uuid": "a7e9c20c-ab9b-46de-bf6a-c8fec9a8986b"
+  },
   "swatch-border-color": {
     "ref": "{gray-900}",
     "sets": {
@@ -12387,29 +12405,29 @@
   "alert-dialog-title-size": {
     "sets": {
       "desktop": {
-        "ref": "{heading-size-s}",
+        "ref": "{title-size-xxl}",
         "sets": {
           "desktop": {
-            "value": "18px",
-            "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175"
+            "value": "22px",
+            "uuid": "9be56e29-2e79-41e0-b5a9-6a2dabc70aa1"
           },
           "mobile": {
-            "value": "22px",
-            "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7"
+            "value": "27px",
+            "uuid": "a69a5079-1b5b-4ccf-946f-8b6e3fae4d7e"
           }
         },
         "uuid": "9b7ce1fc-ea8a-4d7b-a926-0accbd6b1197"
       },
       "mobile": {
-        "ref": "{heading-size-xs}",
+        "ref": "{title-size-xl}",
         "sets": {
           "desktop": {
-            "value": "16px",
-            "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91"
+            "value": "20px",
+            "uuid": "292a28d6-2e15-46e2-80cd-5171d977e9b5"
           },
           "mobile": {
-            "value": "19px",
-            "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991"
+            "value": "24px",
+            "uuid": "d5ed0e8d-01ac-495f-bd15-fecc30af17c4"
           }
         },
         "uuid": "3f362b57-09eb-4147-b366-5c1f04c9a29f"
@@ -12419,6 +12437,20 @@
   "alert-dialog-description-size": {
     "sets": {
       "desktop": {
+        "ref": "{body-size-m}",
+        "sets": {
+          "desktop": {
+            "value": "16px",
+            "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91"
+          },
+          "mobile": {
+            "value": "19px",
+            "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991"
+          }
+        },
+        "uuid": "9dc42d1a-b87d-4a5d-a5a3-6afd4d5bd599"
+      },
+      "mobile": {
         "ref": "{body-size-s}",
         "sets": {
           "desktop": {
@@ -12430,33 +12462,51 @@
             "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411"
           }
         },
-        "uuid": "9dc42d1a-b87d-4a5d-a5a3-6afd4d5bd599"
+        "uuid": "43c5762a-d3a6-49db-9e5e-4a524604fecc"
+      }
+    }
+  },
+  "opacity-checkerboard-square-size": {
+    "sets": {
+      "desktop": {
+        "ref": "{opacity-checkerboard-square-size-medium}",
+        "sets": {
+          "desktop": {
+            "value": "8px",
+            "uuid": "ead3f34f-55b1-4012-a4af-0f7fbf226020"
+          },
+          "mobile": {
+            "value": "10px",
+            "uuid": "cc6fdec6-c03a-4691-805f-b60d199bb60d"
+          }
+        },
+        "uuid": "9ddf2e73-ad74-46d7-a79d-fe961b06dbbd"
       },
       "mobile": {
-        "ref": "{body-size-xs}",
+        "ref": "{opacity-checkerboard-square-size-medium}",
         "sets": {
           "desktop": {
-            "value": "12px",
-            "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a"
+            "value": "8px",
+            "uuid": "ead3f34f-55b1-4012-a4af-0f7fbf226020"
           },
           "mobile": {
-            "value": "15px",
-            "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c"
+            "value": "10px",
+            "uuid": "cc6fdec6-c03a-4691-805f-b60d199bb60d"
           }
         },
-        "uuid": "43c5762a-d3a6-49db-9e5e-4a524604fecc"
+        "uuid": "879360e9-a7b0-47e0-bc4a-931a12877014"
       }
     }
   },
-  "opacity-checkerboard-square-size": {
+  "opacity-checkerboard-square-size-medium": {
     "sets": {
       "desktop": {
         "value": "8px",
-        "uuid": "9ddf2e73-ad74-46d7-a79d-fe961b06dbbd"
+        "uuid": "ead3f34f-55b1-4012-a4af-0f7fbf226020"
       },
       "mobile": {
         "value": "10px",
-        "uuid": "879360e9-a7b0-47e0-bc4a-931a12877014"
+        "uuid": "cc6fdec6-c03a-4691-805f-b60d199bb60d"
       }
     }
   },
@@ -16733,6 +16783,30 @@
     },
     "uuid": "56152e6a-3058-4467-86a1-34fa2b6f75b2"
   },
+  "opacity-checkerboard-square-size-small": {
+    "sets": {
+      "desktop": {
+        "value": "4px",
+        "uuid": "2537f52b-5cae-4a35-a1f3-b1d4fe89060d"
+      },
+      "mobile": {
+        "value": "5px",
+        "uuid": "0916cc84-f46f-45c3-b76d-d7d85d576480"
+      }
+    }
+  },
+  "alert-banner-top-to-alert-icon": {
+    "sets": {
+      "desktop": {
+        "value": "37px",
+        "uuid": "fa14092c-ef3f-4b11-8bc8-968d22bed6e0"
+      },
+      "mobile": {
+        "value": "29px",
+        "uuid": "7939208b-2f8c-4569-b7cb-1c1bcfc8705a"
+      }
+    }
+  },
   "corner-radius-0": {
     "value": "0px",
     "uuid": "bb9d8350-b1fb-4496-9c22-6ec9647ff117"

package/package.json

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

package/src/color-aliases.json

@@ -1668,5 +1668,10 @@
         "uuid": "73e40908-216f-406e-993f-287477753e65"
       }
     }
+  },
+  "title-color": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+    "value": "{gray-900}",
+    "uuid": "a7e9c20c-ab9b-46de-bf6a-c8fec9a8986b"
   }
-}
+}

package/src/layout-component.json

@@ -2566,12 +2566,12 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
-        "value": "{heading-size-s}",
+        "value": "{title-size-xxl}",
         "uuid": "9b7ce1fc-ea8a-4d7b-a926-0accbd6b1197"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
-        "value": "{heading-size-xs}",
+        "value": "{title-size-xl}",
         "uuid": "3f362b57-09eb-4147-b366-5c1f04c9a29f"
       }
     }
@@ -2582,29 +2582,46 @@
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
-        "value": "{body-size-s}",
+        "value": "{body-size-m}",
         "uuid": "9dc42d1a-b87d-4a5d-a5a3-6afd4d5bd599"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
-        "value": "{body-size-xs}",
+        "value": "{body-size-s}",
         "uuid": "43c5762a-d3a6-49db-9e5e-4a524604fecc"
       }
     }
   },
   "opacity-checkerboard-square-size": {
+    "deprecated": true,
+    "deprecated_comment": "This token has been deprecated, use opacity-checkerboard-square-size-medium instead.",
     "component": "opacity-checkerboard",
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
+    "sets": {
+      "desktop": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+        "value": "{opacity-checkerboard-square-size-medium}",
+        "uuid": "9ddf2e73-ad74-46d7-a79d-fe961b06dbbd"
+      },
+      "mobile": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+        "value": "{opacity-checkerboard-square-size-medium}",
+        "uuid": "879360e9-a7b0-47e0-bc4a-931a12877014"
+      }
+    }
+  },
+  "opacity-checkerboard-square-size-medium": {
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
     "sets": {
       "desktop": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
         "value": "8px",
-        "uuid": "9ddf2e73-ad74-46d7-a79d-fe961b06dbbd"
+        "uuid": "ead3f34f-55b1-4012-a4af-0f7fbf226020"
       },
       "mobile": {
         "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
         "value": "10px",
-        "uuid": "879360e9-a7b0-47e0-bc4a-931a12877014"
+        "uuid": "cc6fdec6-c03a-4691-805f-b60d199bb60d"
       }
     }
   },
@@ -7378,5 +7395,35 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{font-size-600}",
     "uuid": "56152e6a-3058-4467-86a1-34fa2b6f75b2"
+  },
+  "opacity-checkerboard-square-size-small": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
+    "sets": {
+      "desktop": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+        "value": "4px",
+        "uuid": "2537f52b-5cae-4a35-a1f3-b1d4fe89060d"
+      },
+      "mobile": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+        "value": "5px",
+        "uuid": "0916cc84-f46f-45c3-b76d-d7d85d576480"
+      }
+    }
+  },
+  "alert-banner-top-to-alert-icon": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
+    "sets": {
+      "desktop": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+        "value": "37px",
+        "uuid": "fa14092c-ef3f-4b11-8bc8-968d22bed6e0"
+      },
+      "mobile": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+        "value": "29px",
+        "uuid": "7939208b-2f8c-4569-b7cb-1c1bcfc8705a"
+      }
+    }
   }
 }