test(slider): add token theme tests

[eriklharper]

Related Issue: #7180

Summary

This PR adds token theme tests for calcite-slider.

[eriklharper]

Additional notes:

I was unsuccessful getting this extra test to pass, and I'm unsure why:

describe.only("handle focus", () => {
  const tokens: ComponentTestTokens = {
    "--calcite-slider-handle-border-color-hover": {
      shadowSelector: `.${CSS.handle}`,
      targetProp: "boxShadow",
      state: "focus",
    },
  };
  themed(html` <calcite-slider min="0" max="100" value="20" step="10"></calcite-slider> `, tokens);
});

This is an attempt to test that the handle-border-color-hover token is properly applied to the handle as a boxShadow color when the .thumb (parent div of handle) is focused. I tried state: "focus" and state: { focus: { attribute: "class", value: CSS.handle } }.

[alisonailea]

because we are using the same color to test multiple values its possible to get a false positive on tests. Make sure you are stopping the test just before verification and confirming the tokens are correctly applied. Or check in storybook.

[eriklharper]

because we are using the same color to test multiple values its possible to get a false positive on tests. Make sure you are stopping the test just before verification and confirming the tokens are correctly applied. Or check in storybook.

Should we randomize the color being used in each test run?