@adobe/spectrum-tokens 12.5.0 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @adobe/spectrum-tokens
 
+## 12.6.0
+
+### Minor Changes
+
+- ee5bfd8: Adding a couple tokens to floating action button that should have been included earlier.
+- 853d8c3: Removed express specific token data for color loupe and color handle
+- c9e76ab: Contextual help did not have any type specific tokens when it was initially defined.
+
+#### Token Diff
+
+  _Tokens added (4):_
+
+  - `floating-action-button-drop-shadow-y`
+  - `floating-action-button-shadow-color`
+  - `contextual-help-body-size`
+  - `contextual-help-title-size`
+
+  _Tokens values updated (7):_
+
+  - `color-handle-drop-shadow-blur`
+  - `color-handle-drop-shadow-x`
+  - `color-handle-drop-shadow-y`
+  - `color-handle-outer-border-opacity`
+  - `color-handle-outer-border-width`
+  - `color-handle-size`
+  - `color-handle-size-key-focus`
+
+  _Newly deprecated tokens (1):_
+
+  - `color-handle-drop-shadow-color`
+
 ## 12.5.0
 
 ### Minor Changes

package/dist/json/drover.json

@@ -94,14 +94,10 @@
       "code-color": "rgb(34, 34, 34)",
       "color-area-border-color": "rgb(0, 0, 0)",
       "color-area-border-width": "1px",
-      "color-handle-drop-shadow-blur": "0",
-      "color-handle-drop-shadow-x": "0",
-      "color-handle-drop-shadow-y": "0",
       "color-handle-inner-border-color": "rgb(0, 0, 0)",
       "color-handle-inner-border-opacity": "0.42",
       "color-handle-outer-border-color": "rgb(0, 0, 0)",
       "color-handle-outer-border-opacity": "0.42",
-      "color-handle-outer-border-width": "1px",
       "color-loupe-bottom-to-color-handle": "12px",
       "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
       "color-loupe-height": "64px",
@@ -138,6 +134,7 @@
       "disabled-static-white-content-color": "rgba(255, 255, 255, 0.55)",
       "drop-shadow-color": "rgba(0, 0, 0, 0.15)",
       "drop-zone-background-color": "rgb(20, 122, 243)",
+      "floating-action-button-shadow-color": "rgba(0, 0, 0, 0.25)",
       "focus-indicator-color": "rgb(20, 122, 243)",
       "fuchsia-100": "rgb(255, 233, 252)",
       "fuchsia-1000": "rgb(157, 3, 158)",
@@ -523,14 +520,10 @@
       "code-color": "rgb(235, 235, 235)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
-      "color-handle-drop-shadow-blur": "0",
-      "color-handle-drop-shadow-x": "0",
-      "color-handle-drop-shadow-y": "0",
       "color-handle-inner-border-color": "rgb(0, 0, 0)",
       "color-handle-inner-border-opacity": "0.42",
       "color-handle-outer-border-color": "rgb(0, 0, 0)",
       "color-handle-outer-border-opacity": "0.42",
-      "color-handle-outer-border-width": "1px",
       "color-loupe-bottom-to-color-handle": "12px",
       "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
       "color-loupe-height": "64px",
@@ -567,6 +560,7 @@
       "disabled-static-white-content-color": "rgba(255, 255, 255, 0.55)",
       "drop-shadow-color": "rgba(0, 0, 0, 0.5)",
       "drop-zone-background-color": "rgb(114, 183, 249)",
+      "floating-action-button-shadow-color": "rgba(0, 0, 0, 0.25)",
       "focus-indicator-color": "rgb(84, 163, 246)",
       "fuchsia-100": "rgb(107, 3, 106)",
       "fuchsia-1000": "rgb(250, 168, 245)",
@@ -952,14 +946,10 @@
       "code-color": "rgb(235, 235, 235)",
       "color-area-border-color": "rgb(255, 255, 255)",
       "color-area-border-width": "1px",
-      "color-handle-drop-shadow-blur": "0",
-      "color-handle-drop-shadow-x": "0",
-      "color-handle-drop-shadow-y": "0",
       "color-handle-inner-border-color": "rgb(0, 0, 0)",
       "color-handle-inner-border-opacity": "0.42",
       "color-handle-outer-border-color": "rgb(0, 0, 0)",
       "color-handle-outer-border-opacity": "0.42",
-      "color-handle-outer-border-width": "1px",
       "color-loupe-bottom-to-color-handle": "12px",
       "color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
       "color-loupe-height": "64px",
@@ -996,6 +986,7 @@
       "disabled-static-white-content-color": "rgba(255, 255, 255, 0.55)",
       "drop-shadow-color": "rgba(0, 0, 0, 0.8)",
       "drop-zone-background-color": "rgb(94, 170, 247)",
+      "floating-action-button-shadow-color": "rgba(0, 0, 0, 0.25)",
       "focus-indicator-color": "rgb(64, 150, 243)",
       "fuchsia-100": "rgb(70, 14, 68)",
       "fuchsia-1000": "rgb(246, 149, 243)",
@@ -1438,9 +1429,6 @@
     "color-area-width": "192px",
     "color-control-track-width": "24px",
     "color-handle-border-width": "2px",
-    "color-handle-drop-shadow-blur": "0",
-    "color-handle-drop-shadow-x": "0",
-    "color-handle-drop-shadow-y": "0",
     "color-handle-inner-border-opacity": "0.42",
     "color-handle-inner-border-width": "1px",
     "color-handle-outer-border-color": "rgb(0, 0, 0)",
@@ -1522,7 +1510,9 @@
     "component-top-to-workflow-icon-300": "13px",
     "component-top-to-workflow-icon-50": "3px",
     "component-top-to-workflow-icon-75": "4px",
+    "contextual-help-body-size": "18px",
     "contextual-help-minimum-width": "268px",
+    "contextual-help-title-size": "16px",
     "corner-radius-100": "4px",
     "corner-radius-200": "8px",
     "corner-radius-75": "2px",
@@ -1618,6 +1608,7 @@
     "field-top-to-validation-icon-small": "7px",
     "field-width": "192px",
     "floating-action-button-drop-shadow-blur": "12px",
+    "floating-action-button-drop-shadow-y": "4px",
     "focus-indicator-gap": "2px",
     "focus-indicator-thickness": "2px",
     "font-size-100": "14px",

package/dist/json/variables.json

@@ -6098,17 +6098,13 @@
     }
   },
   "color-handle-outer-border-opacity": {
+    "ref": "{color-handle-inner-border-opacity}",
     "sets": {
       "spectrum": {
-        "ref": "{color-handle-inner-border-opacity}",
-        "sets": {
-          "spectrum": {
-            "value": "0.42"
-          },
-          "express": {
-            "value": "0.15"
-          }
-        }
+        "value": "0.42"
+      },
+      "express": {
+        "value": "0.15"
       }
     }
   },
@@ -6133,6 +6129,10 @@
       }
     }
   },
+  "floating-action-button-shadow-color": {
+    "ref": "{transparent-black-300}",
+    "value": "rgba(0, 0, 0, 0.25)"
+  },
   "white": {
     "value": "rgb(255, 255, 255)"
   },
@@ -11579,6 +11579,58 @@
   "contextual-help-minimum-width": {
     "value": "268px"
   },
+  "contextual-help-title-size": {
+    "sets": {
+      "desktop": {
+        "ref": "{heading-size-xs}",
+        "sets": {
+          "desktop": {
+            "value": "16px"
+          },
+          "mobile": {
+            "value": "19px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{heading-size-xxs}",
+        "sets": {
+          "desktop": {
+            "value": "14px"
+          },
+          "mobile": {
+            "value": "17px"
+          }
+        }
+      }
+    }
+  },
+  "contextual-help-body-size": {
+    "sets": {
+      "desktop": {
+        "ref": "{heading-size-s}",
+        "sets": {
+          "desktop": {
+            "value": "18px"
+          },
+          "mobile": {
+            "value": "22px"
+          }
+        }
+      },
+      "mobile": {
+        "ref": "{heading-size-xs}",
+        "sets": {
+          "desktop": {
+            "value": "16px"
+          },
+          "mobile": {
+            "value": "19px"
+          }
+        }
+      }
+    }
+  },
   "breadcrumbs-height": {
     "ref": "{component-height-300}",
     "sets": {
@@ -12066,6 +12118,9 @@
   "floating-action-button-drop-shadow-blur": {
     "value": "12px"
   },
+  "floating-action-button-drop-shadow-y": {
+    "value": "4px"
+  },
   "illustrated-message-maximum-width": {
     "value": "380px"
   },
@@ -12711,49 +12766,21 @@
   },
   "color-handle-size": {
     "sets": {
-      "spectrum": {
-        "sets": {
-          "desktop": {
-            "value": "16px"
-          },
-          "mobile": {
-            "value": "20px"
-          }
-        }
+      "desktop": {
+        "value": "16px"
       },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "20px"
-          },
-          "mobile": {
-            "value": "24px"
-          }
-        }
+      "mobile": {
+        "value": "20px"
       }
     }
   },
   "color-handle-size-key-focus": {
     "sets": {
-      "spectrum": {
-        "sets": {
-          "desktop": {
-            "value": "32px"
-          },
-          "mobile": {
-            "value": "40px"
-          }
-        }
+      "desktop": {
+        "value": "32px"
       },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "40px"
-          },
-          "mobile": {
-            "value": "48px"
-          }
-        }
+      "mobile": {
+        "value": "40px"
       }
     }
   },
@@ -12765,50 +12792,16 @@
     "value": "1px"
   },
   "color-handle-outer-border-width": {
-    "sets": {
-      "spectrum": {
-        "value": "1px"
-      },
-      "express": {
-        "value": "0px"
-      }
-    }
+    "value": "1px"
   },
   "color-handle-drop-shadow-x": {
-    "sets": {
-      "spectrum": {
-        "value": "0"
-      },
-      "express": {
-        "ref": "{drop-shadow-x}",
-        "sets": {
-          "spectrum": {},
-          "express": {}
-        }
-      }
-    }
+    "value": "0"
   },
   "color-handle-drop-shadow-y": {
-    "sets": {
-      "spectrum": {
-        "value": "0"
-      },
-      "express": {
-        "ref": "{color-loupe-drop-shadow-y}",
-        "value": "2px"
-      }
-    }
+    "value": "0"
   },
   "color-handle-drop-shadow-blur": {
-    "sets": {
-      "spectrum": {
-        "value": "0"
-      },
-      "express": {
-        "ref": "{color-loupe-drop-shadow-blur}",
-        "value": "8px"
-      }
-    }
+    "value": "0"
   },
   "side-navigation-width": {
     "sets": {

package/package.json

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

package/src/color-component.json

@@ -136,20 +136,20 @@
   },
   "color-handle-outer-border-opacity": {
     "component": "color-handle",
-    "sets": {
-      "spectrum": {
-        "value": "{color-handle-inner-border-opacity}"
-      }
-    }
+    "value": "{color-handle-inner-border-opacity}"
   },
   "color-handle-drop-shadow-color": {
     "component": "color-handle",
+    "deprecated": true,
+    "deprecated_comment": "Express does not need a separate design for Color loupe and Color handle components",
     "sets": {
       "express": {
-        "value": "{drop-shadow-color}",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
+        "value": "{drop-shadow-color}"
       }
     }
+  },
+  "floating-action-button-shadow-color": {
+    "component": "floating-action-button",
+    "value": "{transparent-black-300}"
   }
 }

package/src/layout-component.json

@@ -2629,6 +2629,28 @@
     "component": "contextual-help",
     "value": "268px"
   },
+  "contextual-help-title-size": {
+    "component": "contextual-help",
+    "sets": {
+      "desktop": {
+        "value": "{heading-size-xs}"
+      },
+      "mobile": {
+        "value": "{heading-size-xxs}"
+      }
+    }
+  },
+  "contextual-help-body-size": {
+    "component": "contextual-help",
+    "sets": {
+      "desktop": {
+        "value": "{heading-size-s}"
+      },
+      "mobile": {
+        "value": "{heading-size-xs}"
+      }
+    }
+  },
   "breadcrumbs-height": {
     "component": "breadcrumbs",
     "value": "{component-height-300}"
@@ -3124,6 +3146,10 @@
     "component": "floating-action-button",
     "value": "12px"
   },
+  "floating-action-button-drop-shadow-y": {
+    "component": "floating-action-button",
+    "value": "4px"
+  },
   "illustrated-message-maximum-width": {
     "component": "illustrated-message",
     "value": "380px"
@@ -3691,58 +3717,22 @@
   "color-handle-size": {
     "component": "color-handle",
     "sets": {
-      "spectrum": {
-        "sets": {
-          "desktop": {
-            "value": "16px"
-          },
-          "mobile": {
-            "value": "20px"
-          }
-        }
+      "desktop": {
+        "value": "16px"
       },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "20px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          },
-          "mobile": {
-            "value": "24px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          }
-        }
+      "mobile": {
+        "value": "20px"
       }
     }
   },
   "color-handle-size-key-focus": {
     "component": "color-handle",
     "sets": {
-      "spectrum": {
-        "sets": {
-          "desktop": {
-            "value": "32px"
-          },
-          "mobile": {
-            "value": "40px"
-          }
-        }
+      "desktop": {
+        "value": "32px"
       },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "40px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          },
-          "mobile": {
-            "value": "48px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          }
-        }
+      "mobile": {
+        "value": "40px"
       }
     }
   },
@@ -3756,55 +3746,19 @@
   },
   "color-handle-outer-border-width": {
     "component": "color-handle",
-    "sets": {
-      "spectrum": {
-        "value": "1px"
-      },
-      "express": {
-        "value": "0px",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-      }
-    }
+    "value": "1px"
   },
   "color-handle-drop-shadow-x": {
     "component": "color-handle",
-    "sets": {
-      "spectrum": {
-        "value": "0"
-      },
-      "express": {
-        "value": "{drop-shadow-x}",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-      }
-    }
+    "value": "0"
   },
   "color-handle-drop-shadow-y": {
     "component": "color-handle",
-    "sets": {
-      "spectrum": {
-        "value": "0"
-      },
-      "express": {
-        "value": "{color-loupe-drop-shadow-y}",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-      }
-    }
+    "value": "0"
   },
   "color-handle-drop-shadow-blur": {
     "component": "color-handle",
-    "sets": {
-      "spectrum": {
-        "value": "0"
-      },
-      "express": {
-        "value": "{color-loupe-drop-shadow-blur}",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-      }
-    }
+    "value": "0"
   },
   "side-navigation-width": {
     "component": "side-navigation",