chore(tokens): add Dial custom tokens

Author: pfulton

components/tokens/custom-express/custom-large-vars.css

@@ -15,4 +15,6 @@ governing permissions and limitations under the License.
 .spectrum--express.spectrum--large {
   --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
   --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
+
+  --spectrum-dial-border-radius: 15px;
 }

components/tokens/custom-express/custom-medium-vars.css

@@ -15,4 +15,6 @@ governing permissions and limitations under the License.
 .spectrum--express.spectrum--medium {
   --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
   --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+
+  --spectrum-dial-border-radius: 12px;
 }

components/tokens/custom-spectrum/custom-large-vars.css

@@ -87,4 +87,12 @@ governing permissions and limitations under the License.
   --spectrum-treeview-item-indentation-large: 25px;
   --spectrum-treeview-item-indentation-extra-large: 30px;
   --spectrum-treeview-indicator-inset-block-start: 6px;
+
+  --spectrum-dial-border-radius: 20px;
+  --spectrum-dial-handle-position: 10px;
+  --spectrum-dial-handle-block-margin: 20px;
+  --spectrum-dial-handle-inline-margin: 20px;
+  --spectrum-dial-controls-margin: calc(20px / 2);
+  --spectrum-dial-label-gap-y: 6px;
+  --spectrum-dial-label-container-top-to-text: 5px;
 }

components/tokens/custom-spectrum/custom-medium-vars.css

@@ -86,4 +86,12 @@ governing permissions and limitations under the License.
   --spectrum-treeview-item-indentation-large: 20px;
   --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
   --spectrum-treeview-indicator-inset-block-start: 5px;
+
+  --spectrum-dial-border-radius: 16px;
+  --spectrum-dial-handle-position: 8px;
+  --spectrum-dial-handle-block-margin: 16px;
+  --spectrum-dial-handle-inline-margin: 16px;
+  --spectrum-dial-controls-margin: calc(16px / 2);
+  --spectrum-dial-label-gap-y: 5px;
+  --spectrum-dial-label-container-top-to-text: 4px;
 }