feat: define missing color property in some components (#2754)

* docs(meter): use typography in storybook for heading

Use typography template in Meter storybook. Helps make sure that color
is set on this heading without coming from higher up in the DOM, and
completes code TODO item.

* feat: define color property in some components

During the work to create a single entry point for PostCSS, it was
discovered that parts of several components did not define a color, and
instead relied on a color being set higher up in the DOM. This update
sets a color on some of these and adds mods where necessary.

.changeset/new-sheep-bathe.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/datepicker": minor
+"@spectrum-css/splitview": minor
+"@spectrum-css/treeview": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/well": minor
+"@spectrum-css/progressbar": patch
+---
+
+Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM.

components/datepicker/metadata/mods.md

@@ -3,6 +3,7 @@
 | `--mod-datepicker-border-color-disabled`             |
 | `--mod-datepicker-border-radius`                     |
 | `--mod-datepicker-border-radius-quiet`               |
+| `--mod-datepicker-dash-color`                        |
 | `--mod-datepicker-dash-color-disabled`               |
 | `--mod-datepicker-dash-font-size`                    |
 | `--mod-datepicker-dash-line-height`                  |

components/progressbar/stories/meter.template.js

@@ -3,16 +3,14 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 
 import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-ProgressBar",
 	customClasses = [],
 	customStyles = {},
-	headingStyles = {
-		"text-decoration": "underline",
-	},
 	items = [],
 	label = "Storage space",
 	value,
@@ -25,9 +23,12 @@ export const Template = ({
 	const meterLabel = meter.label ?? label;
 	const fill = meter.meterFill ?? meterFill;
 
-	// @todo: Should the heading content render through typography?
 	return html`
-	<p style=${styleMap(headingStyles)}>${heading}</p>
+	${Typography({
+		semantics: "heading",
+		size: "xs",
+		content: [heading],
+	})}
 	<div
 		class=${classMap({
 			[rootClass]: true,

components/slider/metadata/mods.md

@@ -37,6 +37,7 @@
 | `--mod-slider-ramp-track-height`                       |
 | `--mod-slider-range-track-reset`                       |
 | `--mod-slider-tick-handle-background-color`            |
+| `--mod-slider-tick-label-color`                        |
 | `--mod-slider-tick-mark-border-radius`                 |
 | `--mod-slider-tick-mark-color`                         |
 | `--mod-slider-tick-mark-color-disabled`                |