@arcgis/core 6.0.0-next.1 → 6.0.0-next.11

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

@@ -9,7 +9,6 @@
   --calcite-dialog-min-size-y: 90px;
   --calcite-font-weight-medium: #{$font-weight};
   --calcite-font-size-0: #{$font-size};
-  --calcite-icon-size: var(--esri-oriented-imagery-viewer-action-icon-size);
 
   box-sizing: border-box;
   display: flex;
@@ -51,11 +50,11 @@
   overflow-y: auto;
 
   &-layer-list {
-    padding: 0 var(--calcite-spacing-md);
+    padding: 0 var(--calcite-space-md);
   }
 
   &-switch {
-    padding: 0 var(--calcite-spacing-md);
+    padding: 0 var(--calcite-space-md);
   }
 }
 
@@ -151,7 +150,7 @@
       align-items: center;
       justify-content: center;
       order: 7;
-      background: var(--calcite-color-foreground-1);
+      background: var(--calcite-color-surface-2);
       width: 48px;
       height: 59px;
     }
@@ -180,7 +179,7 @@
 
       .esri-oriented-imagery-viewer__image-enhancement-tool-container {
         margin-block: 0;
-        padding-block: var(--calcite-spacing-sm) var(--calcite-spacing-md);
+        padding-block: var(--calcite-space-sm) var(--calcite-space-md);
         width: 100%;
       }
     }
@@ -208,7 +207,7 @@
     }
 
     &__measurements-table {
-      margin-block-start: var(--calcite-spacing-sm);
+      margin-block-start: var(--calcite-space-sm);
     }
 
     &__measurements-bar {
@@ -221,7 +220,7 @@
     }
 
     &__measurement-display {
-      margin-block-end: var(--calcite-spacing-xxs);
+      margin-block-end: var(--calcite-space-2xs);
       text-align: center;
     }
 
@@ -243,8 +242,7 @@
         align-self: stretch;
         order: 1;
         border-top: 1px solid var(--calcite-color-border-3);
-        border-radius: 0 0 3px 3px;
-        background: var(--calcite-color-foreground-1);
+        background: var(--calcite-color-surface-2);
         width: 100%;
         height: 100%;
       }
@@ -252,8 +250,12 @@
 
     &__alert {
       position: absolute;
-      inset-block-end: var(--calcite-spacing-md);
-      inset-inline: var(--calcite-spacing-md);
+      inset-block-end: var(--calcite-space-md);
+      inset-inline: var(--calcite-space-md);
+
+      > [slot="message"] {
+        display: block;
+      }
     }
 
     &-container-measurement {
@@ -263,8 +265,7 @@
       align-self: stretch;
       order: 1;
       border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      border-radius: 0 0 var(--calcite-corner-radius-round) var(--calcite-corner-radius-round);
-      background: var(--calcite-color-foreground-1);
+      background: var(--calcite-color-surface-2);
       width: 100%;
       height: 50%;
     }
@@ -288,7 +289,7 @@
 
       &-feature {
         fill: var(--calcite-color-brand);
-        stroke: var(--calcite-color-foreground-1);
+        stroke: var(--calcite-color-surface-2);
         stroke-width: 1;
 
         &.selected {
@@ -313,7 +314,7 @@
       }
 
       &-pointer {
-        fill: var(--calcite-color-foreground-1);
+        fill: var(--calcite-color-surface-2);
         fill-rule: evenodd;
         stroke: rgb(0 0 0 / 0%);
         stroke-dasharray: none;
@@ -335,7 +336,7 @@
         overflow: hidden;
 
         &--video {
-          inset-block-end: calc(var(--calcite-spacing-xxxl) * 3);
+          inset-block-end: calc(var(--calcite-space-3xl) * 3);
         }
 
         &--zoomed {
@@ -344,7 +345,7 @@
         }
 
         &-boundary {
-          fill: var(--calcite-color-foreground-1);
+          fill: var(--calcite-color-surface-2);
           fill-opacity: 0.25;
           stroke: var(--calcite-color-border-2);
         }
@@ -364,31 +365,25 @@
         }
 
         &-enabled {
-          fill: var(--calcite-color-foreground-1);
+          fill: var(--calcite-color-surface-2);
           stroke: var(--calcite-color-border-2);
           stroke-width: 1;
         }
 
         &-disabled {
-          fill: var(--calcite-color-foreground-3);
+          fill: var(--calcite-color-surface-4);
           stroke: var(--calcite-color-border-2);
           stroke-width: 1;
         }
 
         &-outer {
-          fill: var(--calcite-color-foreground-1);
+          fill: var(--calcite-color-surface-2);
           fill-opacity: 0.4;
           stroke: none;
         }
       }
     }
 
-    &__alert {
-      > [slot="message"] {
-        display: block;
-      }
-    }
-
     @container (width <= 386px) or (height <= 348px) {
       .esri-oriented-imagery-viewer__alert > [slot="message"] {
         display: none;
@@ -421,14 +416,14 @@
 }
 
 @mixin videoSliderContainer() {
-  --calcite-block-padding: 0;
+  --calcite-block-content-space: 0;
 
   box-sizing: border-box;
   margin: 0;
   border: none;
   box-shadow: none;
   background-color: transparent;
-  padding-inline: var(--calcite-spacing-md);
+  padding-inline: var(--calcite-space-md);
   width: 100%;
   overflow: hidden;
 

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

@@ -86,8 +86,6 @@
       }
 
       &--l {
-        --calcite-size-l: 40px;
-
         // Smallest we can get away with given current Calcite behavior
         max-height: 40px;
       }

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

@@ -3,7 +3,7 @@
     calcite-block,
     calcite-block[expanded] {
       margin-block: 0;
-      margin-block-start: var(--calcite-spacing-md);
+      margin-block-start: var(--calcite-space-md);
       border: 0;
     }
   }

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,15 +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-dropdown {
-      calcite-icon {
-        margin-inline-start: var(--calcite-spacing-xxs);
-      }
+    calcite-action > calcite-icon {
+      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-value);
+        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 {