refactor: drop calcite-base dep (#12206)

jcfranco · web-flow · commit 290431f696a2 · 2025-05-21T17:09:58.000-07:00
**Related Issue:** N/A ## Summary `calcite-base` is a legacy dependency that is used for a small set of Sass variables. This PR drops it as dependency by inlining some values within our style files. 📦✂️ ### Notes - This will help with #10585 and #10583 - I'll create a follow-up issue to replace `$baseline`, `$easing-function` and `$floating-ui-shadow` with token or alternate styling (if applicable)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "@cspell/dict-scientific-terms-us": "3.0.6",
     "@cspell/eslint-plugin": "8.19.1",
     "@eslint/js": "9.25.0",
-    "@esri/calcite-base": "1.2.0",
     "@octokit/webhooks-types": "7.6.1",
     "@prettier/sync": "0.5.5",
     "@storybook/addon-a11y": "8.6.12",
diff --git a/packages/calcite-components/src/assets/styles/_animation.scss b/packages/calcite-components/src/assets/styles/_animation.scss
@@ -1,3 +1,5 @@
+$easing-function: cubic-bezier(0.215, 0.44, 0.42, 0.88);
+
 @mixin animation-helper-classes() {
   @keyframes in {
     0% {
diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
@@ -1,3 +1,4 @@
+$floating-ui-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
 $floating-ui-transition-offset: 5px;
 
 @mixin floating-ui-offset-bottom {
@@ -30,7 +31,7 @@ $floating-ui-transition-offset: 5px;
     /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
     transition-property: inset, left, opacity;
     opacity: 0;
-    box-shadow: $shadow-2;
+    box-shadow: $floating-ui-shadow;
     @apply rounded z-default;
   }
 }
diff --git a/packages/calcite-components/src/assets/styles/_spacing.scss b/packages/calcite-components/src/assets/styles/_spacing.scss
@@ -1,3 +1,5 @@
+$baseline: 1.5rem;
+
 %component-spacing {
   /* Component spacing variables */
 
diff --git a/packages/calcite-components/src/assets/styles/global.scss b/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";
 
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.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";
 
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
@@ -11,6 +11,9 @@
  *
  */
 
+$viewport-small: 480px;
+$viewport-medium: 860px;
+
 :host {
   --calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+$easing-function: cubic-bezier(0.215, 0.44, 0.42, 0.88);`
	`2`	`+`
`1`	`3`	`@mixin animation-helper-classes() {`
`2`	`4`	`@keyframes in {`
`3`	`5`	`0% {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+$floating-ui-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);`
`1`	`2`	`$floating-ui-transition-offset: 5px;`
`2`	`3`
`3`	`4`	`@mixin floating-ui-offset-bottom {`
`@@ -30,7 +31,7 @@ $floating-ui-transition-offset: 5px;`
`30`	`31`	`/* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */`
`31`	`32`	`transition-property: inset, left, opacity;`
`32`	`33`	`opacity: 0;`
`33`		`- box-shadow: $shadow-2;`
	`34`	`+ box-shadow: $floating-ui-shadow;`
`34`	`35`	`@apply rounded z-default;`
`35`	`36`	`}`
`36`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+$baseline: 1.5rem;`
	`2`	`+`
`1`	`3`	`%component-spacing {`
`2`	`4`	`/* Component spacing variables */`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-@import "@esri/calcite-base/dist/index";`
`2`	`1`	`@import "@esri/calcite-design-tokens/dist/scss/index";`
`3`	`2`	`@import "@esri/calcite-design-tokens/dist/scss/core";`
`4`	`3`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,9 @@`
`11`	`11`	`*`
`12`	`12`	`*/`
`13`	`13`
	`14`	`+$viewport-small: 480px;`
	`15`	`+$viewport-medium: 860px;`
	`16`	`+`
`14`	`17`	`:host {`
`15`	`18`	`--calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};`
`16`	`19`	`}`