@adobe/spectrum-tokens 12.5.0 → 12.7.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @adobe/spectrum-tokens
 
+## 12.7.0
+
+### Minor Changes
+
+- 625cb7f: Removed express specific token data for color handle
+
+### Token Diff
+
+_Tokens values updated (4):_
+
+- `color-loupe-bottom-to-color-handle` (removed express specific token data)
+- `color-loupe-height` (removed express specific token data)
+- `color-loupe-inner-border-width` (removed express specific token data)
+- `color-loupe-width` (removed express specific token data)
+
+## 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,21 +94,13 @@
       "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",
       "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
-      "color-loupe-inner-border-width": "2px",
       "color-loupe-outer-border": "rgb(255, 255, 255)",
-      "color-loupe-width": "48px",
       "color-slider-border-color": "rgb(0, 0, 0)",
       "cyan-100": "rgb(197, 248, 255)",
       "cyan-1000": "rgb(0, 93, 137)",
@@ -138,6 +130,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,21 +516,13 @@
       "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",
       "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
-      "color-loupe-inner-border-width": "2px",
       "color-loupe-outer-border": "rgb(255, 255, 255)",
-      "color-loupe-width": "48px",
       "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 61, 98)",
       "cyan-1000": "rgb(84, 211, 241)",
@@ -567,6 +552,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,21 +938,13 @@
       "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",
       "color-loupe-inner-border": "rgba(0, 0, 0, 0.1)",
-      "color-loupe-inner-border-width": "2px",
       "color-loupe-outer-border": "rgb(255, 255, 255)",
-      "color-loupe-width": "48px",
       "color-slider-border-color": "rgb(255, 255, 255)",
       "cyan-100": "rgb(0, 41, 68)",
       "cyan-1000": "rgb(57, 199, 234)",
@@ -996,6 +974,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 +1417,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)",
@@ -1452,7 +1428,7 @@
     "color-loupe-drop-shadow-blur": "8px",
     "color-loupe-drop-shadow-y": "2px",
     "color-loupe-height": "64px",
-    "color-loupe-inner-border-width": "2px",
+    "color-loupe-inner-border-width": "1px",
     "color-loupe-outer-border-width": "2px",
     "color-loupe-width": "48px",
     "color-slider-border-opacity": "0.1",
@@ -1522,7 +1498,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 +1596,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"
   },
@@ -12151,63 +12206,20 @@
     "value": "3"
   },
   "color-loupe-height": {
-    "sets": {
-      "spectrum": {
-        "value": "64px"
-      },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "40px"
-          },
-          "mobile": {
-            "value": "50px"
-          }
-        }
-      }
-    }
+    "value": "64px"
   },
   "color-loupe-width": {
-    "sets": {
-      "spectrum": {
-        "value": "48px"
-      },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "32px"
-          },
-          "mobile": {
-            "value": "40px"
-          }
-        }
-      }
-    }
+    "value": "48px"
   },
   "color-loupe-bottom-to-color-handle": {
-    "sets": {
-      "spectrum": {
-        "value": "12px"
-      },
-      "express": {
-        "value": "6px"
-      }
-    }
+    "value": "12px"
   },
   "color-loupe-outer-border-width": {
     "ref": "{border-width-200}",
     "value": "2px"
   },
   "color-loupe-inner-border-width": {
-    "sets": {
-      "spectrum": {
-        "ref": "{border-width-200}",
-        "value": "2px"
-      },
-      "express": {
-        "value": "3px"
-      }
-    }
+    "value": "1px"
   },
   "card-minimum-width": {
     "value": "100px"
@@ -12711,49 +12723,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 +12749,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.7.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"
@@ -3167,60 +3193,15 @@
   },
   "color-loupe-height": {
     "component": "color-loupe",
-    "sets": {
-      "spectrum": {
-        "value": "64px"
-      },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "40px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          },
-          "mobile": {
-            "value": "50px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          }
-        }
-      }
-    }
+    "value": "64px"
   },
   "color-loupe-width": {
     "component": "color-loupe",
-    "sets": {
-      "spectrum": {
-        "value": "48px"
-      },
-      "express": {
-        "sets": {
-          "desktop": {
-            "value": "32px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          },
-          "mobile": {
-            "value": "40px",
-            "deprecated": true,
-            "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-          }
-        }
-      }
-    }
+    "value": "48px"
   },
   "color-loupe-bottom-to-color-handle": {
     "component": "color-loupe",
-    "sets": {
-      "spectrum": {
-        "value": "12px"
-      },
-      "express": {
-        "value": "6px",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-      }
-    }
+    "value": "12px"
   },
   "color-loupe-outer-border-width": {
     "component": "color-loupe",
@@ -3228,16 +3209,7 @@
   },
   "color-loupe-inner-border-width": {
     "component": "color-loupe",
-    "sets": {
-      "spectrum": {
-        "value": "{border-width-200}"
-      },
-      "express": {
-        "value": "3px",
-        "deprecated": true,
-        "deprecated_comment": "Express will merge with Spectrum with the release of Spectrum 2."
-      }
-    }
+    "value": "1px"
   },
   "card-minimum-width": {
     "component": "cards",
@@ -3691,58 +3663,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 +3692,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",