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

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

@@ -76,7 +76,7 @@
           &__filesize {
             display: flex;
             align-items: center;
-            margin-inline-end: var(--calcite-spacing-md);
+            margin-inline-end: var(--calcite-space-md);
             height: 100%;
             cursor: default;
           }
@@ -89,8 +89,8 @@
 
       display: flex;
       align-items: center;
-      background-color: var(--calcite-color-foreground-1);
-      padding-block-start: var(--calcite-spacing-base); // Height of calcite progress component
+      background-color: var(--calcite-color-surface-2);
+      padding-block-start: var(--calcite-space-base); // Height of calcite progress component
       width: 100%;
       line-height: initial;
 
@@ -102,12 +102,12 @@
       calcite-chip {
         --calcite-chip-close-icon-color: var(--calcite-color-text-inverse);
 
-        margin-inline-end: var(--calcite-spacing-md);
+        margin-inline-end: var(--calcite-space-md);
       }
 
       calcite-label {
         border-inline-end: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-        padding-inline: var(--calcite-spacing-md);
+        padding-inline: var(--calcite-space-md);
         height: 100%;
       }
 
@@ -133,14 +133,14 @@
 
     &__attachments-view {
       border-block-start: var(--calcite-border-width-sm) solid var(--calcite-color-text-2);
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
       min-width: 300px;
 
       &__content {
         flex-direction: column;
         align-items: center;
-        background-color: var(--calcite-color-background);
-        padding: var(--calcite-spacing-md);
+        background-color: var(--calcite-color-surface-1);
+        padding: var(--calcite-space-md);
         width: 100%;
         max-height: 100%;
         overflow-y: auto;
@@ -155,12 +155,12 @@
       }
 
       &__details {
-        padding: var(--calcite-spacing-xl);
+        padding: var(--calcite-space-xl);
         max-height: 100%;
 
         img {
           display: block;
-          padding: var(--calcite-spacing-sm);
+          padding: var(--calcite-space-sm);
           max-width: 100%;
           max-height: 100%;
         }
@@ -178,12 +178,12 @@
         text-align: center;
 
         &__label {
-          margin-bottom: var(--calcite-spacing-md);
+          margin-bottom: var(--calcite-space-md);
           font-size: var(--calcite-font-size-md);
         }
 
         &__message {
-          margin-bottom: var(--calcite-spacing-md);
+          margin-bottom: var(--calcite-space-md);
           word-break: break-all;
         }
 
@@ -199,26 +199,26 @@
 
             calcite-button,
             span {
-              margin-bottom: var(--calcite-spacing-sm);
+              margin-bottom: var(--calcite-space-sm);
             }
           }
         }
       }
 
       &__icon {
-        margin-bottom: var(--calcite-spacing-md);
+        margin-bottom: var(--calcite-space-md);
         block-size: var(--icon-size);
         inline-size: var(--icon-size);
       }
 
       &__information {
         flex-direction: column;
-        padding: var(--calcite-spacing-md);
+        padding: var(--calcite-space-md);
         max-width: 200px;
         overflow-y: auto;
 
         &__data {
-          margin-block-end: var(--calcite-spacing-md);
+          margin-block-end: var(--calcite-space-md);
           word-wrap: break-word;
           color: var(--calcite-color-text-1);
         }
@@ -231,7 +231,7 @@
         calcite-button,
         calcite-icon,
         img {
-          margin-block-end: var(--calcite-spacing-md);
+          margin-block-end: var(--calcite-space-md);
         }
       }
 
@@ -244,7 +244,7 @@
       &__list__thumbnail {
         align-items: center;
         justify-content: center;
-        margin-block: var(--calcite-spacing-sm);
+        margin-block: var(--calcite-space-sm);
 
         span {
           display: flex;
@@ -277,7 +277,7 @@
       &__header {
         display: flex;
         flex-direction: row;
-        gap: var(--calcite-spacing-sm);
+        gap: var(--calcite-space-sm);
         justify-content: space-between;
         width: 100%;
 
@@ -298,7 +298,7 @@
       calcite-progress {
         position: sticky;
         top: 0;
-        margin-bottom: var(--calcite-spacing-sm);
+        margin-bottom: var(--calcite-space-sm);
       }
 
       calcite-pagination {
@@ -314,9 +314,9 @@
 
     &__footer__message {
       display: flex;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
       align-items: center;
-      margin: 0 var(--calcite-spacing-md);
+      margin: 0 var(--calcite-space-md);
     }
 
     &__footer__icon {
@@ -369,7 +369,7 @@
       overflow: hidden;
 
       > div:first-child {
-        margin-inline-end: var(--calcite-spacing-xxl);
+        margin-inline-end: var(--calcite-space-2xl);
         width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -377,7 +377,7 @@
 
       span {
         position: absolute;
-        inset-inline-end: var(--calcite-spacing-xxxl);
+        inset-inline-end: var(--calcite-space-3xl);
         align-self: center;
       }
     }
@@ -403,9 +403,9 @@
     calcite-icon,
     img {
       display: inline-flex;
-      margin-inline-end: var(--calcite-spacing-xxs);
-      max-width: var(--calcite-spacing-xxl);
-      max-height: var(--calcite-spacing-xxl);
+      margin-inline-end: var(--calcite-space-2xs);
+      max-width: var(--calcite-space-2xl);
+      max-height: var(--calcite-space-2xl);
       vertical-align: middle;
     }
   }

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

@@ -3,7 +3,7 @@
   $border: 1px solid $border-color;
 
   .esri-feature-templates {
-    background: var(--calcite-color-background);
+    background: var(--calcite-color-surface-1);
   }
 
   .esri-feature-templates__list-item-icon {

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

@@ -4,7 +4,7 @@
   $action-size--image: $button-width--half !default;
 
   .esri-features {
-    --calcite-color-background: #{$background-color};
+    --calcite-color-surface-1: #{$background-color};
 
     display: flex;
     flex-direction: column;
@@ -15,11 +15,11 @@
   }
 
   .esri-features__flow-item--collapsed {
-    --calcite-flow-item-header-border-block-end: none;
+    --calcite-flow-border-color: transparent;
   }
 
   .esri-features__container {
-    background-color: var(--calcite-color-background);
+    background-color: var(--calcite-color-surface-1);
   }
 
   .esri-features__container:not(:empty) {
@@ -46,11 +46,11 @@
     flex: 1;
     align-items: center;
     justify-content: flex-end;
-    background-color: var(--calcite-color-foreground-1);
+    background-color: var(--calcite-color-surface-2);
   }
 
   .esri-features__pagination-text {
-    padding-inline: var(--calcite-spacing-sm);
+    padding-inline: var(--calcite-space-sm);
     color: var(--calcite-color-text-3);
     font-size: var(--calcite-font-size-sm);
   }

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

@@ -9,7 +9,7 @@
       display: flex;
       flex-direction: row;
       align-self: center;
-      margin-block: var(--calcite-spacing-md);
+      margin-block: var(--calcite-space-md);
     }
   }
 }

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

@@ -2,7 +2,7 @@
   .esri-filter-condition {
     display: flex;
     flex-direction: column;
-    gap: var(--calcite-spacing-sm);
+    gap: var(--calcite-space-sm);
     width: 100%;
   }
 }

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

@@ -1,6 +1,6 @@
 @mixin grid() {
   .esri-grid {
-    background-color: var(--calcite-color-foreground-1);
+    background-color: var(--calcite-color-surface-2);
     width: 100%;
     height: 100%;
 
@@ -63,7 +63,7 @@
     vaadin-grid-cell-content {
       box-sizing: border-box !important;
       align-items: center;
-      padding: var(--calcite-spacing-xxs) var(--calcite-spacing-sm);
+      padding: var(--calcite-space-2xs) var(--calcite-space-sm);
       height: 100%;
       min-height: var(--calcite-font-line-height-fixed-3xl);
     }
@@ -102,11 +102,11 @@
     }
 
     vaadin-grid::part(body-cell) {
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
     }
 
     vaadin-grid::part(body-cell):hover {
-      background-color: var(--calcite-color-foreground-2);
+      background-color: var(--calcite-color-surface-3);
     }
 
     vaadin-grid::part(body-cell invalid) {
@@ -116,7 +116,7 @@
 
     vaadin-grid::part(header-cell) {
       border-color: var(--calcite-color-border-2);
-      background-color: var(--calcite-color-background);
+      background-color: var(--calcite-color-surface-1);
     }
 
     vaadin-grid::part(header-cell invalid) {
@@ -131,7 +131,7 @@
     // Adds brand border to sorted header cell
     vaadin-grid::part(header-cell direction) {
       border-bottom: var(--calcite-border-width-sm) solid var(--calcite-color-brand);
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
     }
 
     // Adds darkened border to sorted header cell on overflow
@@ -140,19 +140,19 @@
     }
 
     vaadin-grid::part(body-cell highlight) {
-      background-color: var(--calcite-color-foreground-3);
+      background-color: var(--calcite-color-surface-4);
     }
 
     // For specific cells with valid pending edits
     vaadin-grid::part(body-cell pending-edit) {
       border: var(--calcite-border-width-md) solid var(--calcite-color-status-success);
-      background-color: color-mix(in sRGB, var(--calcite-color-status-success) 20%, var(--calcite-color-foreground-1));
+      background-color: color-mix(in sRGB, var(--calcite-color-status-success) 20%, var(--calcite-color-surface-2));
 
       &:hover {
         background-color: color-mix(
           in sRGB,
           var(--calcite-color-status-success-hover) 20%,
-          var(--calcite-color-foreground-1)
+          var(--calcite-color-surface-2)
         );
       }
     }
@@ -160,14 +160,14 @@
     // For specific cells with invalid pending edits
     vaadin-grid::part(body-cell pending-edit-invalid) {
       border: var(--calcite-border-width-md) dashed var(--calcite-color-status-danger);
-      background-color: color-mix(in sRGB, var(--calcite-color-status-danger) 20%, var(--calcite-color-foreground-1));
+      background-color: color-mix(in sRGB, var(--calcite-color-status-danger) 20%, var(--calcite-color-surface-2));
       font-weight: var(--calcite-font-weight-bold);
 
       &:hover {
         background-color: color-mix(
           in sRGB,
           var(--calcite-color-status-danger-hover) 20%,
-          var(--calcite-color-foreground-1)
+          var(--calcite-color-surface-2)
         );
       }
     }
@@ -180,11 +180,11 @@
     }
 
     vaadin-grid::part(selected-row-cell) {
-      background-color: color-mix(in sRGB, var(--calcite-color-brand) 10%, var(--calcite-color-foreground-1));
+      background-color: color-mix(in sRGB, var(--calcite-color-brand) 10%, var(--calcite-color-surface-2));
     }
 
     vaadin-grid::part(selected-row-cell):hover {
-      background-color: color-mix(in sRGB, var(--calcite-color-brand) 20%, var(--calcite-color-foreground-1));
+      background-color: color-mix(in sRGB, var(--calcite-color-brand) 20%, var(--calcite-color-surface-2));
     }
 
     vaadin-checkbox {
@@ -233,7 +233,7 @@
         height: 100%;
         overflow: hidden;
         text-align: start;
-        font-weight: var(--calcite-font-weight-normal);
+        font-weight: var(--calcite-font-weight-regular);
 
         &:has(calcite-icon:only-child) {
           align-items: center;
@@ -244,7 +244,7 @@
           display: flex;
           flex-flow: column wrap;
           width: 100%;
-          min-height: var(--calcite-spacing-xxxl);
+          min-height: var(--calcite-space-3xl);
           overflow: hidden;
 
           span {
@@ -256,8 +256,8 @@
         }
 
         calcite-icon {
-          margin-inline-end: var(--calcite-spacing-xxs);
-          height: var(--calcite-spacing-xxl);
+          margin-inline-end: var(--calcite-space-2xs);
+          height: var(--calcite-space-2xl);
           color: var(--calcite-color-text-1);
         }
 
@@ -359,7 +359,7 @@
 
     calcite-combobox {
       position: absolute;
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
     }
 
     // Remove top border between stacked components for cleaner look.

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

@@ -18,11 +18,11 @@
     // Update spacing on LabeledSwitch to have the same padding
     // as other labeled elements in the form
     calcite-label.esri-labeled-switch__label {
-      margin-block-end: var(--calcite-spacing-sm, 0.5rem);
+      margin-block-end: var(--calcite-space-sm, 0.5rem);
     }
 
     &__switch--bordered {
-      border-width: 0 0 var(--calcite-spacing-px) 0;
+      border-width: 0 0 var(--calcite-space-px) 0;
       border-style: solid;
       border-color: var(--calcite-color-border-1);
     }
@@ -31,21 +31,21 @@
       display: flex;
       flex: 1 1 auto;
       flex-direction: column;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
     }
 
     &__tilegroup {
       display: flex;
-      column-gap: var(--calcite-spacing-md);
+      column-gap: var(--calcite-space-md);
       align-items: start;
     }
 
     &__tile__content {
       display: flex;
       flex-direction: column;
-      row-gap: var(--calcite-spacing-md);
+      row-gap: var(--calcite-space-md);
       align-items: center;
-      padding: var(--calcite-spacing-md);
+      padding: var(--calcite-space-md);
       color: var(--calcite-color-text-2);
 
       calcite-label {
@@ -72,15 +72,15 @@
         position: absolute;
         inset: 0;
         opacity: 0.001;
-        border: var(--calcite-spacing-px) solid transparent;
+        border: var(--calcite-space-px) solid transparent;
         cursor: pointer;
 
         &:checked + .esri-grid-controls__tile__content {
-          border: var(--calcite-spacing-px) solid var(--calcite-color-brand);
+          border: var(--calcite-space-px) solid var(--calcite-color-brand);
         }
 
         + .esri-grid-controls__tile__content {
-          border: var(--calcite-spacing-px) solid transparent;
+          border: var(--calcite-space-px) solid transparent;
         }
       }
     }
@@ -89,11 +89,11 @@
       display: grid;
       grid-auto-columns: 1fr;
       grid-auto-flow: column;
-      gap: var(--calcite-spacing-sm);
+      gap: var(--calcite-space-sm);
     }
 
     &__inline-icon {
-      margin-left: var(--calcite-spacing-xs);
+      margin-left: var(--calcite-space-xs);
       vertical-align: top;
       color: var(--calcite-color-status-warning);
     }

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

@@ -47,7 +47,7 @@
   .esri-layer-list__publishing {
     @include layerListPublishingIndicator();
 
-    transform-origin: var(--calcite-list-item-icon-center) var(--calcite-list-item-icon-center);
+    transform-origin: var(--esri-list-item-icon-center) var(--esri-list-item-icon-center);
     animation: esri-layer-list__publishing-anim 2s normal infinite;
   }
 

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

@@ -612,21 +612,21 @@ $relationship_column_size: 85px;
   .esri-spike-ramp__container {
     display: flex;
     flex-direction: row;
-    gap: var(--calcite-spacing-sm-plus);
-    margin-left: var(--calcite-spacing-sm);
+    gap: var(--calcite-space-sm-plus);
+    margin-left: var(--calcite-space-sm);
   }
 
   .esri-spike-ramp__preview-container {
     display: flex;
     position: relative;
-    gap: var(--calcite-spacing-sm-plus);
+    gap: var(--calcite-space-sm-plus);
     border-bottom: var(--calcite-border-width-sm) solid var(--calcite-color-border-2);
-    padding: 0 var(--calcite-spacing-xl);
+    padding: 0 var(--calcite-space-xl);
   }
 
   .esri-spike-ramp__preview {
     display: flex;
-    gap: var(--calcite-spacing-sm-plus);
+    gap: var(--calcite-space-sm-plus);
     align-items: end;
   }
 

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

@@ -9,8 +9,11 @@ $earmark_size: 6px !default;
     }
 
     calcite-button[appearance="outline-fill"] {
-      --calcite-color-foreground-1: var(--calcite-color-foreground-3);
       --calcite-icon-color: var(--calcite-color-text-1);
+
+      &:not(:hover, :active) {
+        --calcite-button-background-color: var(--calcite-color-surface-4);
+      }
     }
   }
 }

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,7 +242,7 @@
         align-self: stretch;
         order: 1;
         border-top: 1px solid var(--calcite-color-border-3);
-        background: var(--calcite-color-foreground-1);
+        background: var(--calcite-color-surface-2);
         width: 100%;
         height: 100%;
       }
@@ -251,8 +250,8 @@
 
     &__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;
@@ -266,7 +265,7 @@
       align-self: stretch;
       order: 1;
       border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      background: var(--calcite-color-foreground-1);
+      background: var(--calcite-color-surface-2);
       width: 100%;
       height: 50%;
     }
@@ -290,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 {
@@ -315,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;
@@ -337,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 {
@@ -346,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);
         }
@@ -366,19 +365,19 @@
         }
 
         &-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;
         }
@@ -424,7 +423,7 @@
   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;
     }
   }