refactor: drop calcite-base and calcite-colors in favor of tokens and inlined vars/utils

package.json

@@ -30,8 +30,6 @@
   "devDependencies": {
     "@babel/preset-react": "7.22.15",
     "@cspell/eslint-plugin": "7.3.9",
-    "@esri/calcite-base": "1.2.0",
-    "@esri/calcite-colors": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.5",
     "@storybook/addon-a11y": "6.5.16",

packages/calcite-components/.storybook/utils.tsx

@@ -16,27 +16,31 @@ import {
 } from "@storybook/addon-knobs";
 import { CSS_UTILITY } from "../src/utils/resources";
 
-import { colors } from "../../../node_modules/@esri/calcite-colors/dist/colors";
 import { Description, DocsPage } from "@storybook/addon-docs";
 import { Theme as Mode } from "storybook-addon-themes/dist/models/Theme";
 import React from "react";
 import { Scale } from "../src/components/interfaces";
 import { html } from "../support/formatting";
 import { Breakpoints } from "../src/utils/responsive";
+import {
+  calciteColorNeutralBlk005,
+  calciteColorNeutralBlk200,
+  calciteColorNeutralBlk210,
+} from "@esri/calcite-design-tokens/dist/es6/core";
 
 const autoValue = {
   name: "Auto",
-  value: colors["blk-200"],
+  value: calciteColorNeutralBlk200,
 };
 
 const lightValue = {
   name: "Light",
-  value: colors["blk-005"],
+  value: calciteColorNeutralBlk005,
 };
 
 const darkValue = {
   name: "Dark",
-  value: colors["blk-210"],
+  value: calciteColorNeutralBlk210,
 };
 
 const list: Mode[] = [

packages/calcite-components/src/assets/styles/_animation.scss

@@ -1,3 +1,5 @@
+$easing-function: cubic-bezier(0.215, 0.44, 0.42, 0.88) !default;
+
 @mixin animation-helper-classes() {
   @keyframes in {
     0% {

packages/calcite-components/src/assets/styles/_floating-ui.scss

@@ -2,6 +2,7 @@ $floating-ui-transform-bottom: translateY(-5px);
 $floating-ui-transform-top: translateY(5px);
 $floating-ui-transform-left: translateX(5px);
 $floating-ui-transform-right: translateX(-5px);
+$floating-ui-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16) !default;
 
 @mixin floating-ui-base {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
@@ -14,7 +15,7 @@ $floating-ui-transform-right: translateX(-5px);
     transition: var(--calcite-floating-ui-transition);
     transition-property: transform, visibility, opacity;
     opacity: 0;
-    box-shadow: $shadow-2;
+    box-shadow: $floating-ui-shadow;
     @apply rounded z-default;
   }
 }

packages/calcite-components/src/assets/styles/global.scss

@@ -1,4 +1,3 @@
-@import "~@esri/calcite-base/dist/_index";
 @import "~@esri/calcite-design-tokens/dist/scss/index";
 @import "~@esri/calcite-design-tokens/dist/scss/core";
 

packages/calcite-components/src/assets/styles/includes.scss

@@ -1,5 +1,3 @@
-@import "~@esri/calcite-colors/dist/colors";
-@import "~@esri/calcite-base/dist/_index";
 @import "~@esri/calcite-design-tokens/dist/scss/index";
 @import "~@esri/calcite-design-tokens/dist/scss/core";
 

packages/calcite-components/src/assets/styles/readme.md

@@ -2,19 +2,15 @@
 
 When building any component in `packages/calcite-components`, please use these set of global variables (CSS variables and Sass mixins or variables)
 
-## From [calcite-colors](https://github.com/Esri/calcite-colors)
-
-### Color
+## Color [![Outdated](https://img.shields.io/badge/doc-outdated-red.svg)](https://shields.io/)
 
 [`colors.scss`](https://github.com/Esri/calcite-colors/blob/master/dist/colors.scss): you'll find the global CSS variables for both light and dark mode.
 
-## From [calcite-base](https://github.com/esri/calcite-base)
-
-### Typography
+## Typography [![Outdated](https://img.shields.io/badge/doc-outdated-red.svg)](https://shields.io/)
 
 [typography mixins from calcite-base](https://github.com/Esri/calcite-base/blob/master/dist/_type.scss)
 
-#### Font family
+### Font family
 
 Avenir Next is the main font family in use.
 For text indicating or related to code, use this CSS variable:
@@ -23,7 +19,7 @@ For text indicating or related to code, use this CSS variable:
 font-family: --calcite-code-family;
 ```
 
-#### Font size
+### Font size
 
 Here are the most common use cases font-size (Sass):
 
@@ -46,7 +42,7 @@ CSS ouput:
 }
 ```
 
-#### Font weight
+### Font weight
 
 Two font weights are available using CSS vars.
 
@@ -63,11 +59,11 @@ Example:
 font-weight: var(--calcite-font-weight-normal);
 ```
 
-### Shadows
+## Shadows
 
 The shadow of an element usually corresponds to the priority or importance of the message or workflow. Consistently using shadow for elements like alerts, modals, page takeovers, and sheets provides users clear and familiar indications of importance.
 
-#### CSS variables for shadows
+### CSS variables for shadows [![Outdated](https://img.shields.io/badge/doc-outdated-red.svg)](https://shields.io/)
 
 ```scss
 --shadow-1
@@ -90,7 +86,7 @@ Current usage:
 |          | FAB         |
 |          | Date-picker |
 
-### Focus states
+## Focus states
 
 All focuses-able elements should use the custom focus. Use a combination of two mixins to achieve this.
 

packages/calcite-components/src/components.d.ts

@@ -6260,6 +6260,8 @@ declare global {
     };
     interface HTMLCalciteListElementEventMap {
         "calciteListChange": void;
+        "calciteListDragEnd": ListDragDetail;
+        "calciteListDragStart": ListDragDetail;
         "calciteListFilter": void;
         "calciteListOrderChange": ListDragDetail;
         "calciteInternalListDefaultSlotChange": void;
@@ -9984,6 +9986,14 @@ declare namespace LocalJSX {
           * Emits when any of the list item selections have changed.
          */
         "onCalciteListChange"?: (event: CalciteListCustomEvent<void>) => void;
+        /**
+          * Emits when the component's dragging has ended.
+         */
+        "onCalciteListDragEnd"?: (event: CalciteListCustomEvent<ListDragDetail>) => void;
+        /**
+          * Emits when the component's dragging has started.
+         */
+        "onCalciteListDragStart"?: (event: CalciteListCustomEvent<ListDragDetail>) => void;
         /**
           * Emits when the component's filter has changed.
          */

packages/calcite-components/src/components/modal/modal.scss

@@ -277,6 +277,8 @@ slot[name="primary"] {
     block-size: var(--calcite-modal-height, auto);
   }
 
+  $baseline: 1.5rem;
+
   @media screen and (max-width: $width + 2 * $baseline) {
     :host([width-scale="#{$size}"]) {
       .modal {
@@ -378,7 +380,7 @@ slot[name="primary"] {
 /**
  * Tablet
  */
-@media screen and (max-width: $viewport-medium) {
+@media screen and (max-width: $calcite-container-size-height-lg-max) {
   @include slotted("header", "content-top", "*") {
     @apply text-1;
   }
@@ -391,7 +393,7 @@ slot[name="primary"] {
 /**
  * Mobile
  */
-@media screen and (max-width: $viewport-small) {
+@media screen and (max-width: $calcite-container-size-width-xs-max) {
   .footer,
   .content-bottom {
     @apply flex-col;

packages/calcite-components/src/components/sheet/sheet.scss

@@ -16,8 +16,8 @@
 :host {
   @apply flex absolute z-overlay inset-0;
   visibility: hidden !important;
-  // the sheet should always use a dark scrim, regardless of light / dark mode - matches value in global.scss
-  --calcite-sheet-scrim-background-internal: #{rgba($blk-240, 0.85)};
+  // the sheet should always use a dark scrim, regardless of light / dark mode
+  --calcite-sheet-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, 0.85)};
   --calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
   --calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04);
   --calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);

packages/calcite-components/src/components/stepper-item/stepper-item.scss

@@ -138,8 +138,7 @@
 @include disabled();
 
 :host([complete]) .container {
-  // todo dark mode
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: var(--calcite-color-brand-underline);
   & .stepper-item-icon {
     color: theme("backgroundColor.brand");
   }
@@ -222,7 +221,7 @@
 }
 
 :host([layout="vertical"][complete]) .container {
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: var(--calcite-color-brand-underline);
 }
 :host([layout="vertical"][complete]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][complete]:focus:not([disabled]):not([selected])) .container {
@@ -240,7 +239,7 @@
 }
 :host([layout="vertical"]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"]:focus:not([disabled]):not([selected])) .container {
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: var(--calcite-color-brand-underline);
 }
 :host([layout="vertical"][error]:hover:not([disabled]):not([selected])) .container,
 :host([layout="vertical"][error]:focus:not([disabled]):not([selected])) .container {
@@ -288,7 +287,7 @@
 }
 
 :host([layout="horizontal"][complete]) .stepper-item-header {
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: var(--calcite-color-brand-underline);
 }
 :host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,
 :host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {
@@ -302,7 +301,7 @@
 }
 :host([layout="horizontal"]:hover:not([disabled]):not([selected])) .stepper-item-header,
 :host([layout="horizontal"]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  border-color: rgba($h-bb-060, 0.5);
+  border-color: var(--calcite-color-brand-underline);
 }
 :host([layout="horizontal"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,
 :host([layout="horizontal"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {
@@ -336,7 +335,7 @@
 }
 
 :host([layout="horizontal"]:not([multiple-view-mode])) .stepper-item-header {
-  @apply border-none 
+  @apply border-none
   me-0;
   inline-size: 100%;
   padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);

packages/calcite-components/src/components/tile-select/tile-select.scss

@@ -1,3 +1,4 @@
+$baseline: 1.5rem;
 $spacing: $baseline * 0.5;
 
 :host {