fix: restore undefined custom properties [part 5] (#3475)

Author: 5t3ph

.changeset/hip-spies-try.md

@@ -0,0 +1,9 @@
+---
+"@spectrum-css/datepicker": patch
+"@spectrum-css/rating": patch
+"@spectrum-css/sidenav": patch
+"@spectrum-css/slider": patch
+"@spectrum-css/switch": patch
+---
+
+Define undefined custom properties from themes directory.

components/datepicker/index.css

@@ -18,6 +18,7 @@
 	--spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0);
 	--spectrum-datepicker-border-width: var(--spectrum-border-width-100);
 	--spectrum-datepicker-min-width: var(--mod-datepicker-min-width, var(--spectrum-field-width));
+	--spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
 	--spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
 
 	/* button */

components/rating/index.css

@@ -22,6 +22,12 @@
 	/* Icon */
 	--spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100);
 	--spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100);
+	--spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+	--spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+	--spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+	--spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+
 
 	/* Focus ring */
 	--spectrum-rating-border-radius: var(--spectrum-corner-radius-100);
@@ -32,8 +38,9 @@
 	/* Spacing (top/bottom edge to icon) */
 	--spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
 
-	/* Indicator height */
+	/* Indicator */
 	--spectrum-rating-indicator-height: var(--spectrum-border-width-200);
+	--spectrum-rating-indicator-border-radius: 2px;
 
 	/* Colors */
 	/* selected + emphasized */

components/sidenav/index.css

@@ -85,6 +85,13 @@
 	/* color - background */
 	--spectrum-sidenav-background-disabled: transparent;
 	--spectrum-sidenav-background-default: transparent;
+	--spectrum-sidenav-background-hover: var(--spectrum-gray-100);
+	--spectrum-sidenav-item-background-down: var(--spectrum-gray-200);
+	--spectrum-sidenav-background-key-focus: var(--spectrum-gray-100);
+	--spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100);
+	--spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200);
+	--spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200);
+	--spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100);
 
 	/* color font */
 	--spectrum-sidenav-header-color: var(--spectrum-gray-600);

components/slider/index.css

@@ -76,6 +76,10 @@
 	--spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
 
 	/* colors */
+	--spectrum-slider-track-color: var(--spectrum-gray-200);
+	--spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+	--spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+	--spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100);
 	--spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
@@ -84,13 +88,30 @@
 	--spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
 	--spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
+	--spectrum-slider-handle-background-color: transparent;
+	--spectrum-slider-handle-background-color-disabled: transparent;
+	--spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75);
+	--spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75);
+	--spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+	--spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75);
+	--spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+
+
+	--spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
+	--spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+	--spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
+	--spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
 
 	/* values */
 	--spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
 	--spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
 
 	--spectrum-slider-range-track-reset: 0;
 
+	--spectrum-slider-track-corner-radius: 2px;
+
+	--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
+
 	position: relative;
 
 	/* Don't let z-index'd child elements float above other things on the page */
@@ -118,6 +139,7 @@
 	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
 	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
 	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
+	--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
 }
 
 .spectrum-Slider--sizeL {
@@ -128,6 +150,7 @@
 	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
 	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
 	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+	--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
 
 	/* TODO: placeholder value for sideLabel variant value width */
 	--spectrum-slider-value-inline-size: 18px;
@@ -141,6 +164,7 @@
 	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
 	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
 	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+	--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
 
 	/* TODO: placeholder value for sideLabel variant value width */
 	--spectrum-slider-value-inline-size: 22px;