@arcgis/core 6.0.0-next.8 → 6.0.0-next.9

package/assets/esri/themes/base/widgets/_SelectionList.scss

@@ -15,40 +15,40 @@
       overflow: auto;
 
       &[scale="s"] .esri-selection-list__container {
-        gap: var(--calcite-spacing-sm);
-        padding: var(--calcite-spacing-sm) 0;
+        gap: var(--calcite-space-sm);
+        padding: var(--calcite-space-sm) 0;
       }
 
       &[scale="m"] .esri-selection-list__container {
-        gap: var(--calcite-spacing-md);
-        padding: var(--calcite-spacing-md) 0;
+        gap: var(--calcite-space-md);
+        padding: var(--calcite-space-md) 0;
       }
 
       &[scale="l"] .esri-selection-list__container {
-        gap: var(--calcite-spacing-lg);
-        padding: var(--calcite-spacing-lg) 0;
+        gap: var(--calcite-space-lg);
+        padding: var(--calcite-space-lg) 0;
       }
     }
 
     &__container {
       flex-direction: column;
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
 
       > * {
-        background-color: var(--calcite-color-foreground-1);
+        background-color: var(--calcite-color-surface-2);
 
         &[scale="s"] {
-          padding: 0 var(--calcite-spacing-sm) 0 var(--calcite-spacing-sm);
+          padding: 0 var(--calcite-space-sm) 0 var(--calcite-space-sm);
           font-size: var(--calcite-font-size-sm);
         }
 
         &[scale="m"] {
-          padding: 0 var(--calcite-spacing-md) 0 var(--calcite-spacing-md);
+          padding: 0 var(--calcite-space-md) 0 var(--calcite-space-md);
           font-size: var(--calcite-font-size-md);
         }
 
         &[scale="l"] {
-          padding: 0 var(--calcite-spacing-lg) 0 var(--calcite-spacing-lg);
+          padding: 0 var(--calcite-space-lg) 0 var(--calcite-space-lg);
           font-size: var(--calcite-font-size-lg);
         }
       }
@@ -56,13 +56,13 @@
 
     .esri-selection-list__list-item__feature-icon {
       .esri-selection-list__list-item__icon {
-        margin-inline-start: calc(var(--calcite-spacing-lg) * -1);
+        margin-inline-start: calc(var(--calcite-space-lg) * -1);
       }
     }
 
     .esri-selection-list__list-item__icon {
-      min-width: var(--calcite-spacing-xxl);
-      height: var(--calcite-spacing-xxl);
+      min-width: var(--calcite-space-2xl);
+      height: var(--calcite-space-2xl);
     }
 
     &__list-item {
@@ -79,7 +79,7 @@
 
     &__total-count {
       align-self: center;
-      margin-inline: var(--calcite-spacing-xxs);
+      margin-inline: var(--calcite-space-2xs);
       line-height: initial;
     }
 

package/assets/esri/themes/base/widgets/_SelectionToolbar.scss

@@ -14,13 +14,13 @@
     calcite-chip {
       display: flex;
       align-self: center;
-      margin-inline: var(--calcite-spacing-xxs);
+      margin-inline: var(--calcite-space-2xs);
       margin-inline-start: auto;
       line-height: initial;
     }
 
     calcite-action > calcite-icon {
-      margin-inline-start: var(--calcite-spacing-xxs);
+      margin-inline-start: var(--calcite-space-2xs);
     }
   }
 

package/assets/esri/themes/base/widgets/_ShadowCast.scss

@@ -7,7 +7,7 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    gap: var(--calcite-spacing-xxl);
+    gap: var(--calcite-space-2xl);
     padding: var(--esri-widget-padding);
     width: $width;
     overflow: hidden;
@@ -31,15 +31,15 @@
 
       &__indicator {
         display: flex;
-        gap: var(--calcite-spacing-px);
+        gap: var(--calcite-space-px);
         align-items: center;
         justify-content: center;
-        margin-bottom: var(--calcite-spacing-xs);
+        margin-bottom: var(--calcite-space-xs);
       }
     }
 
     &__date-picker-container:not(:first-of-type) {
-      margin-top: var(--calcite-spacing-md);
+      margin-top: var(--calcite-space-md);
     }
 
     &__date-picker {
@@ -52,7 +52,7 @@
       flex-direction: column;
 
       &__select {
-        margin-bottom: var(--calcite-spacing-md);
+        margin-bottom: var(--calcite-space-md);
       }
 
       &__config--hidden {
@@ -67,7 +67,7 @@
 
       display: flex;
       flex-direction: column;
-      gap: var(--calcite-spacing-md);
+      gap: var(--calcite-space-md);
 
       calcite-label {
         display: block;
@@ -114,7 +114,7 @@
       }
 
       &__discrete-label {
-        margin-bottom: var(--calcite-spacing-xs);
+        margin-bottom: var(--calcite-space-xs);
         width: 100%;
         font-weight: $font-weight--medium;
 
@@ -133,8 +133,8 @@
 
       /* nested discrete config inside threshold config */
       .esri-shadow-cast__discrete-config {
-        gap: var(--calcite-spacing-xs);
-        padding: 0 var(--calcite-spacing-xs);
+        gap: var(--calcite-space-xs);
+        padding: 0 var(--calcite-space-xs);
       }
     }
 
@@ -159,9 +159,9 @@
 
         // center horizontally and place it above the mouse pointer
         transform: translate(-50%, -100%);
-        margin-top: -$tooltip-arrow-size - var(--calcite-spacing-xxs);
+        margin-top: -$tooltip-arrow-size - var(--calcite-space-2xs);
         background: $background-color;
-        padding: var(--calcite-spacing-xs) var(--calcite-spacing-sm);
+        padding: var(--calcite-space-xs) var(--calcite-space-sm);
         width: max-content;
 
         // Tooltip arrow

package/assets/esri/themes/base/widgets/_Sketch.scss

@@ -10,7 +10,7 @@
 
     &-pad {
       flex-flow: row wrap;
-      gap: var(--calcite-spacing-sm, 8px);
+      gap: var(--calcite-space-sm, 8px);
       justify-content: flex-start;
 
       &:dir(rtl) {

package/assets/esri/themes/base/widgets/_Slice.scss

@@ -1,6 +1,6 @@
 @mixin slice() {
   .esri-slice {
-    --layer-item-background: var(--calcite-color-foreground-2);
+    --layer-item-background: var(--calcite-color-surface-3);
 
     &__container {
       display: flex;
@@ -31,8 +31,8 @@
     }
 
     &__layer-item {
-      --calcite-color-foreground-2: var(--layer-item-background);
-      --calcite-color-foreground-1: var(--layer-item-background);
+      --calcite-list-background-color: var(--layer-item-background);
+      --calcite-list-background-color-hover: var(--layer-item-background);
     }
 
     &__actions {

package/assets/esri/themes/base/widgets/_SnappingControls.scss

@@ -35,7 +35,7 @@
       }
 
       calcite-icon {
-        margin-inline-start: var(--calcite-list-item-spacing-indent);
+        margin-inline-start: var(--calcite-space-md);
         color: var(--calcite-color-brand);
       }
     }

package/assets/esri/themes/base/widgets/_TimeSlider.scss

@@ -30,8 +30,8 @@
 
             &-separator {
               opacity: var(--calcite-opacity-disabled);
-              margin-top: var(--calcite-spacing-fixed-xxs);
-              margin-bottom: var(--calcite-spacing-fixed-xs);
+              margin-top: var(--calcite-space-2xs);
+              margin-bottom: var(--calcite-space-xs);
               background-color: var(--calcite-color-brand);
               width: 75px;
               height: var(--calcite-size-px);
@@ -139,7 +139,7 @@
             flex-flow: row nowrap;
 
             &-label {
-              margin-inline-start: var(--calcite-spacing-xs);
+              margin-inline-start: var(--calcite-space-xs);
             }
           }
         }
@@ -272,12 +272,12 @@
     }
 
     &__slider {
-      background-color: var(--calcite-color-foreground-2);
+      background-color: var(--calcite-color-surface-3);
       padding: 0 40px;
 
       .esri-slider {
         margin-top: -19px;
-        background-color: var(--calcite-color-foreground-2);
+        background-color: var(--calcite-color-surface-3);
 
         &__thumb {
           top: -6px;

package/assets/esri/themes/base/widgets/_TimeZoneLabel.scss

@@ -3,12 +3,12 @@
     @include defaultBoxShadow();
 
     display: inline-flex;
-    background-color: var(--calcite-color-foreground-1);
+    background-color: var(--calcite-color-surface-2);
 
     &__badge {
       display: flex;
-      padding-block: var(--calcite-spacing-sm);
-      padding-inline: var(--calcite-spacing-sm);
+      padding-block: var(--calcite-space-sm);
+      padding-inline: var(--calcite-space-sm);
       color: var(--calcite-color-text-1);
 
       &--disabled {
@@ -25,6 +25,7 @@
     }
 
     &__name {
+      // Calcite's read-only combobox bypasses its public background token.
       --calcite-color-background: transparent;
       --calcite-color-border-input: transparent;
       --calcite-font-weight-medium: normal;
@@ -40,7 +41,7 @@
       --calcite-label-margin-bottom: 0;
 
       align-items: center;
-      padding-inline: var(--calcite-spacing-sm);
+      padding-inline: var(--calcite-space-sm);
 
       &--disabled {
         opacity: var(--calcite-opacity-disabled);

package/assets/esri/themes/base/widgets/_Tooltip.scss

@@ -2,24 +2,21 @@
 
 @mixin tooltip() {
   .esri-tooltip {
-    // Calcite variables
-    --calcite-input-padding-inline: 0.5rem;
-    --calcite-input-height: 1.5rem;
-
     // Tooltip variables
     --field-height: 1rem;
-    --field-height--input: var(--calcite-input-height);
+    --field-height--input: 1.5rem; // Matches calcite-input scale="s".
+    --field-input-padding-inline: var(--calcite-space-sm);
     --field-row-gap: 2px;
-    --field-column-gap: var(--calcite-spacing-xs);
+    --field-column-gap: var(--calcite-space-xs);
     --field-input-width: 6.5rem;
-    --field-title-extra-margin: var(--calcite-spacing-lg);
+    --field-title-extra-margin: var(--calcite-space-lg);
     --field-title-color: var(--calcite-color-text-2);
     --field-value-color: var(--calcite-color-text-1);
     --font-size: var(--calcite-font-size--3);
     --font-size--input: var(--calcite-font-size--2);
-    --content-padding-inline: var(--calcite-spacing-xs);
-    --content-padding-block: var(--calcite-spacing-xs);
-    --help-message-border-spacing: var(--calcite-spacing-xs);
+    --content-padding-inline: var(--calcite-space-xs);
+    --content-padding-block: var(--calcite-space-xs);
+    --help-message-border-spacing: var(--calcite-space-xs);
     --help-message-min-width: 7rem;
     --icon-size--feedback: 0.625rem; // Shrink icon to keep tooltip more compact in feedback mode
     --elevation-mode-icon-size--feedback: 1rem;
@@ -92,7 +89,7 @@
         --field-row-gap: 1px;
 
         backdrop-filter: none;
-        background: var(--calcite-color-foreground-1);
+        background: var(--calcite-color-surface-2);
         pointer-events: all;
 
         // When the tooltip is in input mode but doesn't have focus in it, we reduce the opacity to
@@ -107,7 +104,7 @@
       background: rgb(0 0 0 / 80%);
 
       &--input {
-        background: var(--calcite-color-foreground-1);
+        background: var(--calcite-color-surface-2);
       }
     }
 
@@ -197,9 +194,9 @@
           min-width: max-content;
 
           &--read-only {
-            padding-inline: var(--calcite-input-padding-inline);
-            block-size: var(--calcite-input-height);
-            line-height: var(--calcite-input-height);
+            padding-inline: var(--field-input-padding-inline);
+            block-size: var(--field-height--input);
+            line-height: var(--field-height--input);
             font-size: var(--calcite-font-size--2);
           }
         }
@@ -253,7 +250,7 @@
       }
 
       &__input-message {
-        margin-block-end: var(--calcite-input-message-spacing);
+        grid-column: 2 / -1;
         width: 100%;
         text-wrap: auto;
       }
@@ -276,7 +273,7 @@
 
     &-help-message {
       display: flex;
-      gap: var(--calcite-spacing-xs);
+      gap: var(--calcite-space-xs);
       align-items: center;
       justify-content: center;
       margin-inline: calc(var(--content-padding-inline) * -1); // Fill the whole

package/assets/esri/themes/base/widgets/_UtilityNetworkAssociations.scss

@@ -36,7 +36,7 @@
       &-main {
         display: grid;
         gap: $panel_padding;
-        background: var(--calcite-color-foreground-1) /* color */;
+        background: var(--calcite-color-surface-2) /* color */;
         padding: $panel_padding 0;
       }
 
@@ -129,7 +129,7 @@
 
       &-warning {
         width: $icon_width;
-        color: var(--calcite-color-high-saturation-yellow-h-yy-060);
+        color: var(--calcite-color-status-warning);
       }
     }
 

package/assets/esri/themes/base/widgets/_UtilityNetworkTrace.scss

@@ -102,7 +102,7 @@
       flex-flow: column nowrap;
       animation: esri-fade-in-up 100ms ease-in-out;
       border-top: solid 3px $border-color--subtle;
-      background-color: var(--calcite-color-background);
+      background-color: var(--calcite-color-surface-1);
       padding: $cap-spacing $side-spacing;
       max-height: 85%;
       color: $font-color;

package/assets/esri/themes/base/widgets/_UtilityNetworkValidateTopology.scss

@@ -30,12 +30,12 @@
 
       &-error {
         width: $icon_width;
-        color: var(--calcite-color-high-saturation-yellow-h-yy-060);
+        color: var(--calcite-color-status-danger);
       }
 
       &-success {
         width: $icon_width;
-        color: var(--calcite-color-high-saturation-green-h-gg-060);
+        color: var(--calcite-color-status-success);
       }
     }
   }

package/assets/esri/themes/base/widgets/_ValuePicker.scss

@@ -45,7 +45,7 @@
       --calcite-action-bar-items-space: 0;
       --calcite-spacing-sm: 0;
 
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
     }
 
     &__caption,
@@ -149,7 +149,7 @@
               width: 0;
               text-overflow: ellipsis;
               font-size: var(--calcite-font-size--1);
-              font-weight: var(--calcite-font-weight-normal);
+              font-weight: var(--calcite-font-weight-regular);
             }
           }
 

package/assets/esri/themes/base/widgets/_VideoPlayer.scss

@@ -5,7 +5,7 @@
     --esri-video-player-color-swatch-size: 20px;
     --esri-video-player-color-swatch-gap: 10px;
     --esri-video-player-progress-width: 2px;
-    --esri-video-player-controls-spacing: var(--calcite-size-16, 16px);
+    --esri-video-player-controls-spacing: 1rem;
 
     min-width: calc(var(--esri-video-player-view-height) * var(--esri-video-player-view-aspect-ratio));
 
@@ -46,7 +46,7 @@
     }
 
     .esri-video-player__slider {
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
       padding: var(--esri-video-player-controls-spacing);
     }
 
@@ -85,7 +85,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: var(--calcite-color-foreground-1);
+    background-color: var(--calcite-color-surface-2);
     padding: 0 calc(var(--esri-video-player-controls-spacing) / 2) calc(var(--esri-video-player-controls-spacing) / 2);
     font-size: var(--calcite-font-size--2);
   }
@@ -101,7 +101,7 @@
   .esri-video-player__actions-group {
     display: flex;
     flex: 1;
-    gap: var(--calcite-spacing-md);
+    gap: var(--calcite-space-md);
     align-items: center;
   }
 
@@ -116,7 +116,7 @@
   }
 
   .esri-video-player__settings-flow {
-    min-width: var(--calcite-size-160);
+    min-width: 10rem;
   }
 
   .esri-metadata-table__empty-state {

package/assets/esri/themes/base/widgets/_Widget.scss

@@ -516,7 +516,11 @@
     // buttons, unless a custom appearance was specified
     &:not([appearance]),
     &[appearance="solid"] {
-      --calcite-color-foreground-3: #{$background-color};
+      --calcite-action-background-color-press: #{$background-color};
+
+      &:not(:hover, :active) {
+        --calcite-button-background-color: #{$background-color};
+      }
     }
 
     &:hover {