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

package/assets/esri/themes/base/_mixins.scss

@@ -32,7 +32,7 @@
 }
 
 @mixin calciteExternalOutline() {
-  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));
+  outline: 2px solid var(--calcite-color-focus, var(--calcite-color-brand));
   outline-offset: calc(2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1)));
 }
 
@@ -550,7 +550,7 @@
 }
 
 @mixin layerListItem() {
-  --calcite-list-item-icon-center: 8.5px;
+  --esri-list-item-icon-center: 8.5px;
 }
 
 @mixin layerListStatusIndicator() {

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

@@ -54,7 +54,7 @@
     padding: 0 16px 0 4px;
     text-align: right;
     white-space: nowrap;
-    font-weight: var(--calcite-font-weight-normal, $font-weight);
+    font-weight: var(--calcite-font-weight-regular, $font-weight);
   }
 
   .esri-attribution--open {

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

@@ -86,8 +86,8 @@
   }
 
   .esri-basemap-layer-list__editing {
-    padding-block: var(--calcite-spacing-sm);
-    padding-inline: var(--calcite-spacing-sm);
+    padding-block: var(--calcite-space-sm);
+    padding-inline: var(--calcite-space-sm);
   }
 
   @keyframes esri-basemap-layer-list__updating-anim {

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

@@ -1,6 +1,6 @@
 @mixin batchAttributeForm() {
   .esri-batch-attribute-form {
-    background-color: var(--calcite-color-background);
+    background-color: var(--calcite-color-surface-1);
     padding: var(--esri-widget-padding);
 
     &__notice-error {
@@ -8,7 +8,7 @@
     }
 
     &__disabled-notice {
-      margin-bottom: var(--calcite-spacing-xl);
+      margin-bottom: var(--calcite-space-xl);
     }
 
     &__form {
@@ -110,7 +110,7 @@
     }
 
     &__input--disabled {
-      background-color: var(--calcite-color-background);
+      background-color: var(--calcite-color-surface-1);
       font-weight: var(--calcite-font-weight-medium);
     }
 
@@ -198,11 +198,11 @@
     }
 
     &__attachment-element-list-item {
-      --calcite-list-item-border-color: var(--calcite-color-border-3);
+      --calcite-list-border-color: var(--calcite-color-border-3);
 
       @include wordbreak();
 
-      min-block-size: var(--calcite-spae-2xl);
+      min-block-size: var(--calcite-space-2xl);
     }
 
     &__attachment-element-list-item-start {

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

@@ -100,7 +100,7 @@
   .esri-bookmarks__bookmark-content calcite-table-row {
     --calcite-color-border-3: transparent;
     --calcite-color-text-1: var(--calcite-color-text-3);
-    --calcite-internal-table-row-background: transparent;
+    --calcite-table-row-background-color: transparent;
 
     pointer-events: none;
   }

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

@@ -163,8 +163,8 @@
     level-border-color: $border-color,
     level-border-color--hover: $border-color--active,
     level-border-color--active: $border-color--active,
-    level-background-color: rgb(from var(--calcite-color-foreground-1) r g b / 70%),
-    level-background-color--hover: rgb(from var(--calcite-color-foreground-1) r g b / 90%),
+    level-background-color: rgb(from var(--calcite-color-surface-2) r g b / 70%),
+    level-background-color--hover: rgb(from var(--calcite-color-surface-2) r g b / 90%),
     level-background-color--active: $border-color--active,
   );
 

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

@@ -7,9 +7,9 @@
     --container-width: 100cqw;
     --phase-size: 24px;
     --arrow-width: 24px;
-    --padding: var(--calcite-spacing-xxs);
-    --divider-width-min: var(--calcite-spacing-base);
-    --divider-width-max: var(--calcite-spacing-xl);
+    --padding: var(--calcite-space-2xs);
+    --divider-width-min: var(--calcite-space-base);
+    --divider-width-max: var(--calcite-space-xl);
 
     // prettier-ignore
     --divider-width: calc(
@@ -32,7 +32,7 @@
     &__phases-container {
       position: relative;
       flex-shrink: 1;
-      padding: var(--calcite-spacing-xxs);
+      padding: var(--calcite-space-2xs);
       overflow: hidden;
     }
 
@@ -44,7 +44,7 @@
       justify-content: center;
       border: solid var(--calcite-border-width-sm) $border-color;
       border-radius: var(--calcite-corner-radius-pill);
-      background: var(--calcite-color-background);
+      background: var(--calcite-color-surface-1);
       padding: 0;
       padding-top: 1px; // Visually center the text
       width: var(--phase-size);

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

@@ -46,7 +46,7 @@
   .esri-catalog-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-catalog-layer-list__publishing-anim 2s normal infinite;
   }
 

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

@@ -1,7 +1,5 @@
 @mixin compass() {
   .esri-compass {
-    --calcite-color-foreground-3: #{$background-color};
-
     border-radius: 50%;
 
     &__icon-container {

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

@@ -27,23 +27,17 @@
     }
 
     &__buttons-container {
-      --calcite-color-background: transparent;
+      --calcite-color-surface-1: transparent;
       --calcite-action-group-gap: 0;
-      --calcite-action-group-padding: 0;
-
-      calcite-action {
-        /* Make focus outline not visible if using mouse */
-        --calcite-color-focus-color: var(--calcite-color-foreground-3);
-      }
 
       calcite-action:not([active]) {
         /* Fix active styles remaining on initial button in Firefox */
-        --calcite-color-foreground-3: var(--calcite-color-foreground-1);
+        --calcite-color-surface-4: var(--calcite-color-surface-2);
       }
 
       calcite-action[active] {
         /* Fix button:active not having a background */
-        --calcite-color-foreground-1: var(--calcite-color-foreground-3);
+        --calcite-color-surface-2: var(--calcite-color-surface-4);
       }
 
       calcite-icon {
@@ -53,7 +47,7 @@
       /* Fix sticky hover effect on touchscreen devices */
       @media (hover: none) {
         calcite-action {
-          --calcite-color-foreground-2: var(--calcite-color-foreground-1);
+          --calcite-color-surface-3: var(--calcite-color-surface-2);
           --calcite-color-text-1: var(--calcite-color-text-3);
         }
       }

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

@@ -3,7 +3,7 @@
 @mixin directions() {
   .esri-directions {
     calcite-flow-item {
-      --calcite-color-background: var(--calcite-color-foreground-1);
+      --calcite-color-surface-1: var(--calcite-color-surface-2);
     }
 
     &__accordion {
@@ -12,10 +12,10 @@
 
     &__stop-container {
       --calcite-list-border-color: transparent;
-      --calcite-list-background-color-hover: var(--calcite-color-foreground-1);
+      --calcite-list-background-color-hover: var(--calcite-color-surface-2);
 
       display: flex;
-      margin-block-start: var(--calcite-spacing-sm);
+      margin-block-start: var(--calcite-space-sm);
     }
 
     &__stop-list {
@@ -24,12 +24,12 @@
 
     &__action-container {
       display: flex;
-      margin-top: var(--calcite-spacing-sm);
-      margin-inline: var(--calcite-spacing-sm);
+      margin-top: var(--calcite-space-sm);
+      margin-inline: var(--calcite-space-sm);
     }
 
     &__add-stop-button {
-      margin-inline-end: var(--calcite-spacing-xs);
+      margin-inline-end: var(--calcite-space-xs);
     }
 
     &__departure-time {
@@ -38,7 +38,7 @@
 
     &__departure-time-options {
       display: flex;
-      margin-bottom: var(--calcite-spacing-sm);
+      margin-bottom: var(--calcite-space-sm);
 
       calcite-input-date-picker,
       calcite-input-time-picker {
@@ -57,8 +57,8 @@
     &__header-stops {
       display: grid;
       grid-template-columns: auto 1fr;
-      gap: var(--calcite-spacing-base) var(--calcite-spacing-xxs);
-      margin-block-end: var(--calcite-spacing-base);
+      gap: var(--calcite-space-base) var(--calcite-space-2xs);
+      margin-block-end: var(--calcite-space-base);
       font-size: var(--calcite-font-size--1);
     }
 
@@ -71,20 +71,20 @@
 
     &__edit-footer {
       border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      padding: var(--calcite-spacing-md);
+      padding: var(--calcite-space-md);
     }
 
     &__edit-information-container {
       border-bottom: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
       background-color: var(--calcite-color-surface-1);
-      padding: var(--calcite-spacing-md);
+      padding: var(--calcite-space-md);
     }
 
     &__edit-toolbar-container {
       display: flex;
       flex-flow: column nowrap;
       align-items: flex-start;
-      margin: var(--calcite-spacing-md);
+      margin: var(--calcite-space-md);
     }
 
     &__edit-toolbar {
@@ -92,8 +92,8 @@
       flex-flow: row nowrap;
       border-width: var(--calcite-border-width-sm);
       border-style: solid;
-      border-radius: var(--calcite-corner-radius-round);
-      border-color: var(--calcite-color-foreground-3);
+      border-radius: var(--calcite-corner-radius-sm);
+      border-color: var(--calcite-color-surface-4);
       overflow: hidden;
     }
 
@@ -120,20 +120,20 @@
     }
 
     &__margin-inline-medium {
-      margin-inline: var(--calcite-spacing-md);
+      margin-inline: var(--calcite-space-md);
     }
 
     &__padding-medium {
-      padding: var(--calcite-spacing-md);
+      padding: var(--calcite-space-md);
     }
 
     &__route-item {
       display: flex;
       flex: 1 0 auto;
-      margin: var(--calcite-spacing-md);
-      margin-block-start: var(--calcite-spacing-sm);
+      margin: var(--calcite-space-md);
+      margin-block-start: var(--calcite-space-sm);
       border: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      border-radius: var(--calcite-corner-radius-round);
+      border-radius: var(--calcite-corner-radius-sm);
       width: auto;
       overflow: hidden;
     }
@@ -145,8 +145,8 @@
       margin: 0;
       border: none;
       background-color: transparent;
-      padding: var(--calcite-spacing-sm) var(--calcite-spacing-md);
-      padding-inline-end: var(--calcite-spacing-xs);
+      padding: var(--calcite-space-sm) var(--calcite-space-md);
+      padding-inline-end: var(--calcite-space-xs);
       text-align: unset;
       font-family: var(--calcite-font-family);
 
@@ -156,7 +156,7 @@
     }
 
     &__route-item-button:hover {
-      background-color: var(--calcite-color-foreground-2);
+      background-color: var(--calcite-color-surface-3);
       cursor: pointer;
     }
 
@@ -185,7 +185,7 @@
     }
 
     &__optimize-switches {
-      margin-inline-start: var(--calcite-spacing-md);
+      margin-inline-start: var(--calcite-space-md);
       cursor: pointer;
     }
 
@@ -205,7 +205,7 @@
 
     &__primary-footer {
       border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      padding: var(--calcite-spacing-md);
+      padding: var(--calcite-space-md);
     }
 
     &__primary-footer-centered {
@@ -213,14 +213,14 @@
       flex-flow: column wrap;
       align-items: center;
       border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
-      padding: var(--calcite-spacing-md);
+      padding: var(--calcite-space-md);
     }
 
     &__primary-footer-loader {
       --calcite-loader-spacing: 0;
 
-      margin-top: var(--calcite-spacing-md);
-      margin-bottom: var(--calcite-spacing-md);
+      margin-top: var(--calcite-space-md);
+      margin-bottom: var(--calcite-space-md);
     }
 
     &__save-error {
@@ -230,28 +230,28 @@
     }
 
     &__save-error-icon {
-      margin-top: calc(var(--calcite-spacing-lg) * 3);
-      margin-bottom: var(--calcite-spacing-xxs);
+      margin-top: calc(var(--calcite-space-lg) * 3);
+      margin-bottom: var(--calcite-space-2xs);
       color: var(--calcite-color-status-danger);
     }
 
     &__save-error-label {
-      margin-inline: var(--calcite-spacing-sm);
+      margin-inline: var(--calcite-space-sm);
     }
 
     &__save-process-loader {
-      padding-top: calc(var(--calcite-spacing-lg) * 3);
-      padding-bottom: calc(var(--calcite-spacing-lg) * 2);
+      padding-top: calc(var(--calcite-space-lg) * 3);
+      padding-bottom: calc(var(--calcite-space-lg) * 2);
     }
 
     &__selected-feature-container {
-      margin-inline: var(--calcite-spacing-md);
+      margin-inline: var(--calcite-space-md);
       height: 100px;
       overflow-y: auto;
     }
 
     &__separator {
-      margin: var(--calcite-spacing-md) 0;
+      margin: var(--calcite-space-md) 0;
       background-color: var(--calcite-color-border-3);
       height: var(--calcite-border-width-sm);
     }
@@ -268,7 +268,7 @@
       left: 0;
       margin: 0;
       border: none;
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
       width: 100vw;
       max-width: 100vw;
       height: 100vh;
@@ -279,13 +279,13 @@
     &__print-preview-content {
       display: flex;
       flex-direction: column;
-      padding-inline: var(--calcite-spacing-md);
+      padding-inline: var(--calcite-space-md);
     }
 
     &__print-preview-header {
       display: flex;
       align-items: center;
-      margin-bottom: var(--calcite-spacing-lg);
+      margin-bottom: var(--calcite-space-lg);
       border-block-end: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
     }
 
@@ -293,7 +293,7 @@
       display: flex;
       flex-direction: column;
       flex-grow: 1;
-      padding-block: var(--calcite-spacing-sm);
+      padding-block: var(--calcite-space-sm);
       line-height: var(--calcite-font-line-height-relative-snug);
       color: var(--calcite-color-text-3);
       font-size: var(--calcite-font-size--2);
@@ -303,12 +303,12 @@
     &__print-preview-section {
       display: flex;
       flex-direction: column;
-      margin-top: var(--calcite-spacing-md);
+      margin-top: var(--calcite-space-md);
     }
 
     &__print-preview-header-buttons {
       display: flex;
-      padding-inline-end: var(--calcite-spacing-md);
+      padding-inline-end: var(--calcite-space-md);
     }
 
     &__print-preview--avoid-page-break {

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

@@ -9,7 +9,7 @@
   flex-flow: column nowrap;
   animation: esri-fade-in-up 250ms ease-in-out;
   border-top: solid 3px $contextColor;
-  background-color: var(--calcite-color-background);
+  background-color: var(--calcite-color-surface-1);
   padding-block: $cap-spacing;
   padding-inline: $side-spacing;
   max-height: 85%;
@@ -61,7 +61,7 @@
 
 @mixin editor() {
   $border: 1px solid $border-color;
-  $panel-background-color: var(--calcite-color-background);
+  $panel-background-color: var(--calcite-color-surface-1);
 
   $panel-min-height: 200px;
   $panel-padding-inline: $side-spacing;
@@ -162,7 +162,7 @@
       &__filter-container--sticky {
         margin-block: -$cap-spacing $cap-spacing; // Cancel top margin from the filter
         margin-inline: -$panel-padding-inline; // Fill the whole width
-        background-color: var(--calcite-color-background);
+        background-color: var(--calcite-color-surface-1);
         padding-block: $cap-spacing;
         padding-inline: $panel-padding-inline; // ...but add the padding back in
       }
@@ -183,7 +183,7 @@
       display: flex;
       flex-direction: row;
       border-bottom: var(--divider-border);
-      background-color: var(--calcite-color-foreground-1);
+      background-color: var(--calcite-color-surface-2);
       overflow-wrap: anywhere;
     }
 
@@ -276,10 +276,10 @@
     &__selection-toolbar-container {
       position: relative;
       flex-shrink: 0;
-      margin: var(--calcite-spacing-sm, 8px);
+      margin: var(--calcite-space-sm, 8px);
       border-width: var(--calcite-border-width-sm, 1px);
       border-style: solid;
-      border-radius: var(--calcite-corner-radius-round, 4px);
+      border-radius: var(--calcite-corner-radius-sm, 4px);
       border-color: var(--calcite-color-border-3, #dfdfdf);
       min-height: min-content;
       overflow: hidden;
@@ -431,7 +431,7 @@
       }
 
       &__item--preserved {
-        --calcite-color-foreground-2: var(--calcite-color-status-success);
+        --calcite-color-surface-3: var(--calcite-color-status-success);
         --calcite-chip-text-color: var(--calcite-color-text-inverse);
       }
     }

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

@@ -52,7 +52,7 @@
     flex: 1 1 auto;
     flex-direction: column;
     justify-content: stretch;
-    background-color: var(--calcite-color-foreground-1);
+    background-color: var(--calcite-color-surface-2);
   }
 
   .esri-expand__sheet .esri-expand__panel-content,

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

@@ -69,7 +69,7 @@
   }
 
   .esri-feature {
-    --calcite-color-background: #{$background-color};
+    --calcite-color-surface-1: #{$background-color};
 
     width: 100%;
   }

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

@@ -1,6 +1,6 @@
 @mixin featureForm() {
   $group-border-width: 3px;
-  $panel-background-color: var(--calcite-color-background);
+  $panel-background-color: var(--calcite-color-surface-1);
   $text-element-line-height: 1.375;
 
   .esri-feature-form {
@@ -98,7 +98,7 @@
   }
 
   .esri-feature-form__disabled-notice {
-    margin-bottom: var(--calcite-spacing-xl, 1.25rem);
+    margin-bottom: var(--calcite-space-xl, 1.25rem);
   }
 
   .esri-feature-form__form-header {
@@ -123,7 +123,7 @@
   }
 
   .esri-feature-form__input--disabled {
-    background-color: var(--calcite-color-background);
+    background-color: var(--calcite-color-surface-1);
     font-weight: var(--calcite-font-weight-medium);
   }
 
@@ -178,7 +178,7 @@
     line-height: $text-element-line-height;
     color: var(--calcite-color-text-3);
     font-size: var(--calcite-font-size--1);
-    font-weight: var(--calcite-font-weight-normal);
+    font-weight: var(--calcite-font-weight-regular);
 
     a {
       display: inline;
@@ -237,7 +237,7 @@
     code {
       border: 1px solid var(--calcite-color-border-3);
       border-radius: $border-radius;
-      background-color: var(--calcite-color-foreground-3);
+      background-color: var(--calcite-color-surface-4);
       padding: 0.25em;
       white-space: normal;
       word-break: break-word;
@@ -275,7 +275,7 @@
       line-height: $text-element-line-height;
       color: var(--calcite-color-text-3);
       font-size: var(--calcite-font-size--1);
-      font-weight: var(--calcite-font-weight-normal);
+      font-weight: var(--calcite-font-weight-regular);
     }
 
     strong {

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

@@ -66,7 +66,7 @@
 
       border-width: var(--calcite-border-width-sm, 1px);
       border-style: solid;
-      border-radius: var(--calcite-corner-radius-round, 4px);
+      border-radius: var(--calcite-corner-radius-sm, 4px);
       border-color: var(--calcite-color-border-3, #dfdfdf);
       width: 100%;
       min-height: min-content;

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

@@ -35,7 +35,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/_FeatureFormUtilityNetworkAssociationSettings.scss

@@ -15,13 +15,13 @@
       }
 
       &:last-of-type {
-        margin-block-end: var(--calcite-spacing-md);
+        margin-block-end: var(--calcite-space-md);
         border-top: none;
         border-radius: 0 0 8px 8px;
       }
 
       calcite-label {
-        margin-inline: var(--calcite-spacing-md);
+        margin-inline: var(--calcite-space-md);
       }
     }
 
@@ -30,7 +30,7 @@
       flex-direction: column;
 
       > * {
-        margin-block-end: var(--calcite-spacing-md);
+        margin-block-end: var(--calcite-space-md);
       }
     }
   }