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/dist/metadata.json

@@ -122,6 +122,7 @@
     "--spectrum-animation-duration-100",
     "--spectrum-border-width-100",
     "--spectrum-component-edge-to-text-100",
+    "--spectrum-component-height-100",
     "--spectrum-corner-radius-100",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",

components/datepicker/index.css

@@ -16,6 +16,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/dist/metadata.json

@@ -95,6 +95,10 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-neutral-subdued-content-color-default",
+    "--spectrum-neutral-subdued-content-color-down",
+    "--spectrum-neutral-subdued-content-color-hover",
+    "--spectrum-neutral-subdued-content-color-key-focus",
     "--spectrum-workflow-icon-size-100"
   ],
   "passthroughs": [],

components/rating/index.css

@@ -15,6 +15,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);
@@ -25,8 +31,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/dist/metadata.json

@@ -166,6 +166,8 @@
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
     "--spectrum-font-size-75",
+    "--spectrum-gray-100",
+    "--spectrum-gray-200",
     "--spectrum-gray-600",
     "--spectrum-line-height-100",
     "--spectrum-medium-font-weight",

components/sidenav/index.css

@@ -76,6 +76,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/dist/metadata.json

@@ -230,15 +230,22 @@
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-75",
+    "--spectrum-corner-radius-500",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-75",
     "--spectrum-gray-100",
+    "--spectrum-gray-200",
+    "--spectrum-gray-400",
+    "--spectrum-gray-700",
+    "--spectrum-gray-75",
+    "--spectrum-gray-800",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-default",

components/slider/index.css

@@ -41,6 +41,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);
@@ -49,13 +53,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 */
@@ -83,6 +104,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 {
@@ -93,6 +115,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;
@@ -106,6 +129,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;

components/switch/dist/metadata.json

@@ -241,7 +241,6 @@
     "--highcontrast-switch-border-color-selected-focus",
     "--highcontrast-switch-border-color-selected-hover",
     "--highcontrast-switch-focus-indicator-color",
-    "--highcontrast-switch-handle-background-color",
     "--highcontrast-switch-handle-background-color-default",
     "--highcontrast-switch-handle-background-color-disabled",
     "--highcontrast-switch-handle-background-color-down",