diff --git a/package-lock.json b/package-lock.json
index 556222e28c4..ebbe78cc26d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "@types/jest-axe": "3.5.9",
         "@types/lodash-es": "4.17.12",
         "@types/node": "^18.0.0",
+        "@types/prettier": "2.7.2",
         "@types/react": "^16.7.6",
         "@types/react-dom": "^16.0.9",
         "@types/semver": "7.5.6",
@@ -13586,6 +13587,12 @@
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==",
       "dev": true
     },
+    "node_modules/@types/prettier": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+      "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==",
+      "dev": true
+    },
     "node_modules/@types/pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
diff --git a/package.json b/package.json
index 4daaa37e829..d65fb3b64b8 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@types/jest-axe": "3.5.9",
     "@types/lodash-es": "4.17.12",
     "@types/node": "^18.0.0",
+    "@types/prettier": "2.7.2",
     "@types/react": "^16.7.6",
     "@types/react-dom": "^16.0.9",
     "@types/semver": "7.5.6",
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index 1f18e3ed6df..cbfb5d1e8a0 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -1,3 +1,5 @@
+@import "~@esri/calcite-design-tokens/dist/scss/core";
+
 /**
  * CSS Custom Properties
  *
@@ -21,7 +23,7 @@
   transition: visibility 0ms linear var(--calcite-internal-animation-timing-slow),
     opacity var(--calcite-internal-animation-timing-slow) $easing-function;
   // the modal should always use a dark scrim, regardless of light / dark mode - matches value in global.scss
-  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, 0.85)};
+  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};
 }
 
 .content-top[hidden],
diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
index dfc7aac5256..9876ad88362 100644
--- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -4,310 +4,313 @@ exports[`generated tokens CSS core should match 1`] = `
 "/
 
 :root {
-	--calcite-z-index-9: 900;
-	--calcite-z-index-8: 800;
-	--calcite-z-index-7: 700;
-	--calcite-z-index-6: 600;
-	--calcite-z-index-5: 500;
-	--calcite-z-index-4: 400;
-	--calcite-z-index-3: 300;
-	--calcite-z-index-1: 1;
-	--calcite-z-index-0: -999999;
-	--calcite-size-relative-auto: auto;
-	--calcite-size-relative-200: 200%;
-	--calcite-size-relative-162: 162.5%;
-	--calcite-size-relative-150: 150%;
-	--calcite-size-relative-137: 137.5%;
-	--calcite-size-relative-125: 125%;
-	--calcite-size-relative-100: 100%;
-	--calcite-size-relative-50: 50%;
-	--calcite-size-none: 0;
-	--calcite-size-288: 288px;
-	--calcite-size-256: 256px;
-	--calcite-size-224: 224px;
-	--calcite-size-192: 192px;
-	--calcite-size-160: 160px;
-	--calcite-size-144: 144px;
-	--calcite-size-128: 128px;
-	--calcite-size-112: 112px;
-	--calcite-size-96: 96px;
-	--calcite-size-80: 80px;
-	--calcite-size-72: 72px;
-	--calcite-size-64: 64px;
-	--calcite-size-56: 56px;
-	--calcite-size-48: 48px;
-	--calcite-size-44: 44px;
-	--calcite-size-40: 40px;
-	--calcite-size-36: 36px;
-	--calcite-size-32: 32px;
-	--calcite-size-28: 28px;
-	--calcite-size-24: 24px;
-	--calcite-size-20: 20px;
-	--calcite-size-16: 16px;
-	--calcite-size-14: 14px;
-	--calcite-size-12: 12px;
-	--calcite-size-10: 10px;
-	--calcite-size-8: 8px;
-	--calcite-size-6: 6px;
-	--calcite-size-4: 4px;
-	--calcite-size-2: 2px;
-	--calcite-size-1: 1px;
-	--calcite-opacity-100: 1;
-	--calcite-opacity-96: 0.96;
-	--calcite-opacity-92: 0.92;
-	--calcite-opacity-90: 0.9;
-	--calcite-opacity-85: 0.85;
-	--calcite-opacity-80: 0.8;
-	--calcite-opacity-70: 0.7;
-	--calcite-opacity-60: 0.6;
-	--calcite-opacity-50: 0.5;
-	--calcite-opacity-40: 0.4;
-	--calcite-opacity-30: 0.3;
-	--calcite-opacity-20: 0.2;
-	--calcite-opacity-10: 0.1;
-	--calcite-opacity-8: 0.08;
-	--calcite-opacity-4: 0.04;
-	--calcite-opacity-0: 0;
-	--calcite-font-text-case-capitalize: capitalize;
-	--calcite-font-text-case-lowercase: lowercase;
-	--calcite-font-text-case-uppercase: uppercase;
-	--calcite-font-text-case-none: none;
-	--calcite-font-text-decoration-underline: underline;
-	--calcite-font-text-decoration-none: none;
-	--calcite-font-weight-heavy: 900;
-	--calcite-font-weight-black: 900; /* only for Avenir Next World (secondary font family) */
-	--calcite-font-weight-extrabold: 800; /* only for Avenir Next World (secondary font family) */
-	--calcite-font-weight-bold: 700;
-	--calcite-font-weight-demi: 600;
-	--calcite-font-weight-medium-italic: "Medium Italic";
-	--calcite-font-weight-medium: 500;
-	--calcite-font-weight-regular: 400;
-	--calcite-font-weight-light: 300; /* only for Avenir Next World (secondary font family) */
-	--calcite-font-weight-thin: 100;
-	--calcite-font-weight-ultralight: 200; /* only for Avenir Next World (secondary font family) */
-	--calcite-font-style-italic: italic; /* used in ratings */
-	--calcite-font-family-monaco: Monaco;
-	--calcite-font-family-avenir-next-world: "Avenir Next World";
-	--calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
-	--calcite-container-size-1440: 1440px;
-	--calcite-container-size-1152: 1152px;
-	--calcite-container-size-854: 854px;
-	--calcite-container-size-768: 768px;
-	--calcite-container-size-678: 678px;
-	--calcite-container-size-504: 504px;
-	--calcite-container-size-476: 476px;
-	--calcite-container-size-328: 328px;
-	--calcite-container-size-320: 320px;
-	--calcite-container-size-154: 154px;
-	--calcite-container-size-0: 0;
-	--calcite-color-dark-blue-d-bb-430: #0087D7;
-	--calcite-color-dark-blue-d-bb-420: #00A0FF;
-	--calcite-color-dark-blue-d-bb-410: #47BBFF;
-	--calcite-color-dark-red-d-rr-430: #F3381B;
-	--calcite-color-dark-red-d-rr-420: #FE583E;
-	--calcite-color-dark-red-d-rr-410: #FF7465;
-	--calcite-color-dark-yellow-d-yy-430: #F4B000;
-	--calcite-color-dark-yellow-d-yy-420: #FFC900;
-	--calcite-color-dark-yellow-d-yy-410: #FFE24D;
-	--calcite-color-dark-green-d-gg-430: #36DA43;
-	--calcite-color-dark-green-d-gg-420: #36DA43;
-	--calcite-color-dark-green-d-gg-410: #44ED51;
-	--calcite-color-vibrant-violet-v-vv-180: #6a0be6;
-	--calcite-color-vibrant-violet-v-vv-160: #8129ff;
-	--calcite-color-vibrant-violet-v-vv-140: #974dff;
-	--calcite-color-vibrant-violet-v-vv-120: #b580ff;
-	--calcite-color-vibrant-violet-red-v-vr-180: #83009e;
-	--calcite-color-vibrant-violet-red-v-vr-160: #ac08cc;
-	--calcite-color-vibrant-violet-red-v-vr-140: #dd33ff;
-	--calcite-color-vibrant-violet-red-v-vr-120: #ea80ff;
-	--calcite-color-vibrant-pink-v-pk-180: #c00073;
-	--calcite-color-vibrant-pink-v-pk-160: #d11486;
-	--calcite-color-vibrant-pink-v-pk-140: #ff19a4;
-	--calcite-color-vibrant-pink-v-pk-120: #ff66c2;
-	--calcite-color-vibrant-red-v-rr-180: #b3000f;
-	--calcite-color-vibrant-red-v-rr-160: #d90012;
-	--calcite-color-vibrant-red-v-rr-140: #ff0015;
-	--calcite-color-vibrant-red-v-rr-120: #ff624d;
-	--calcite-color-vibrant-red-orange-v-ro-180: #c93b00;
-	--calcite-color-vibrant-red-orange-v-ro-160: #de4300;
-	--calcite-color-vibrant-red-orange-v-ro-140: #ff4d00;
-	--calcite-color-vibrant-red-orange-v-ro-120: #ff824d;
-	--calcite-color-vibrant-orange-yellow-v-oy-180: #d17300;
-	--calcite-color-vibrant-orange-yellow-v-oy-160: #e68600;
-	--calcite-color-vibrant-orange-yellow-v-oy-140: #ff9500;
-	--calcite-color-vibrant-orange-yellow-v-oy-120: #ffb54d;
-	--calcite-color-vibrant-yellow-v-yy-180: #ebba17;
-	--calcite-color-vibrant-yellow-v-yy-160: #f5d000;
-	--calcite-color-vibrant-yellow-v-yy-140: #ffee33;
-	--calcite-color-vibrant-yellow-v-yy-120: #fff766;
-	--calcite-color-vibrant-yellow-green-v-yg-180: #7fab00;
-	--calcite-color-vibrant-yellow-green-v-yg-160: #96cc00;
-	--calcite-color-vibrant-yellow-green-v-yg-140: #bbed3b;
-	--calcite-color-vibrant-yellow-green-v-yg-120: #d7ff73;
-	--calcite-color-vibrant-green-v-gg-180: #00a118;
-	--calcite-color-vibrant-green-v-gg-160: #00b81b;
-	--calcite-color-vibrant-green-v-gg-140: #3bed52;
-	--calcite-color-vibrant-green-v-gg-120: #73ff84;
-	--calcite-color-vibrant-green-blue-v-gb-180: #00cfca;
-	--calcite-color-vibrant-green-blue-v-gb-160: #00e6e2;
-	--calcite-color-vibrant-green-blue-v-gb-140: #00f7f3;
-	--calcite-color-vibrant-green-blue-v-gb-120: #59fffc;
-	--calcite-color-vibrant-blue-v-bb-180: #009af2;
-	--calcite-color-vibrant-blue-v-bb-160: #009af2;
-	--calcite-color-vibrant-blue-v-bb-140: #3db8ff;
-	--calcite-color-vibrant-blue-v-bb-120: #59d6ff;
-	--calcite-color-high-saturation-violet-h-vv-100: #100026;
-	--calcite-color-high-saturation-violet-h-vv-090: #250f43;
-	--calcite-color-high-saturation-violet-h-vv-080: #3a1e61;
-	--calcite-color-high-saturation-violet-h-vv-070: #4e2c7e;
-	--calcite-color-high-saturation-violet-h-vv-060: #633b9b;
-	--calcite-color-high-saturation-violet-h-vv-050: #7e5baf;
-	--calcite-color-high-saturation-violet-h-vv-040: #987ac3;
-	--calcite-color-high-saturation-violet-h-vv-030: #b39ad7;
-	--calcite-color-high-saturation-violet-h-vv-020: #cdb9eb;
-	--calcite-color-high-saturation-violet-h-vv-010: #e8d9ff;
-	--calcite-color-high-saturation-violet-red-h-vr-100: #200026;
-	--calcite-color-high-saturation-violet-red-h-vr-090: #3c1243;
-	--calcite-color-high-saturation-violet-red-h-vr-080: #572561;
-	--calcite-color-high-saturation-violet-red-h-vr-070: #73377e;
-	--calcite-color-high-saturation-violet-red-h-vr-060: #8e499b;
-	--calcite-color-high-saturation-violet-red-h-vr-050: #a466af;
-	--calcite-color-high-saturation-violet-red-h-vr-040: #b983c3;
-	--calcite-color-high-saturation-violet-red-h-vr-030: #cfa1d7;
-	--calcite-color-high-saturation-violet-red-h-vr-020: #e4beeb;
-	--calcite-color-high-saturation-violet-red-h-vr-010: #fadbff;
-	--calcite-color-high-saturation-pink-h-pk-100: #260404;
-	--calcite-color-high-saturation-pink-h-pk-090: #590b32;
-	--calcite-color-high-saturation-pink-h-pk-080: #851b52;
-	--calcite-color-high-saturation-pink-h-pk-070: #ba2f7e;
-	--calcite-color-high-saturation-pink-h-pk-060: #e04ea6;
-	--calcite-color-high-saturation-pink-h-pk-050: #e673bb;
-	--calcite-color-high-saturation-pink-h-pk-040: #eb8dc9;
-	--calcite-color-high-saturation-pink-h-pk-030: #f2a5d6;
-	--calcite-color-high-saturation-pink-h-pk-020: #fabee4;
-	--calcite-color-high-saturation-pink-h-pk-010: #ffd1ef;
-	--calcite-color-high-saturation-red-h-rr-100: #210300;
-	--calcite-color-high-saturation-red-h-rr-090: #4f0e08;
-	--calcite-color-high-saturation-red-h-rr-080: #7c1d13;
-	--calcite-color-high-saturation-red-h-rr-070: #a82b1e;
-	--calcite-color-high-saturation-red-h-rr-060: #d83020;
-	--calcite-color-high-saturation-red-h-rr-050: #e65240;
-	--calcite-color-high-saturation-red-h-rr-040: #f07062;
-	--calcite-color-high-saturation-red-h-rr-030: #f2877b;
-	--calcite-color-high-saturation-red-h-rr-020: #ffaaa1;
-	--calcite-color-high-saturation-red-h-rr-010: #ffc6bf;
-	--calcite-color-high-saturation-red-orange-h-ro-100: #260a00;
-	--calcite-color-high-saturation-red-orange-h-ro-090: #531b07;
-	--calcite-color-high-saturation-red-orange-h-ro-080: #802c0f;
-	--calcite-color-high-saturation-red-orange-h-ro-070: #ad3c16;
-	--calcite-color-high-saturation-red-orange-h-ro-060: #da4d1e;
-	--calcite-color-high-saturation-red-orange-h-ro-050: #e1653c;
-	--calcite-color-high-saturation-red-orange-h-ro-040: #e97e5a;
-	--calcite-color-high-saturation-red-orange-h-ro-030: #f09677;
-	--calcite-color-high-saturation-red-orange-h-ro-020: #f8af95;
-	--calcite-color-high-saturation-red-orange-h-ro-010: #ffc7b3;
-	--calcite-color-high-saturation-orange-h-oo-100: #401900;
-	--calcite-color-high-saturation-orange-h-oo-090: #6d2f08;
-	--calcite-color-high-saturation-orange-h-oo-080: #9a4410;
-	--calcite-color-high-saturation-orange-h-oo-070: #c65a18;
-	--calcite-color-high-saturation-orange-h-oo-060: #f36f20;
-	--calcite-color-high-saturation-orange-h-oo-050: #f58440;
-	--calcite-color-high-saturation-orange-h-oo-040: #f89960;
-	--calcite-color-high-saturation-orange-h-oo-030: #faae7f;
-	--calcite-color-high-saturation-orange-h-oo-020: #fdc39f;
-	--calcite-color-high-saturation-orange-h-oo-010: #ffd8bf;
-	--calcite-color-high-saturation-orange-yellow-h-oy-100: #402300;
-	--calcite-color-high-saturation-orange-yellow-h-oy-090: #6d3f08;
-	--calcite-color-high-saturation-orange-yellow-h-oy-080: #9a5b10;
-	--calcite-color-high-saturation-orange-yellow-h-oy-070: #c67718;
-	--calcite-color-high-saturation-orange-yellow-h-oy-060: #f89927;
-	--calcite-color-high-saturation-orange-yellow-h-oy-050: #f9a845;
-	--calcite-color-high-saturation-orange-yellow-h-oy-040: #fbb664;
-	--calcite-color-high-saturation-orange-yellow-h-oy-030: #fcc582;
-	--calcite-color-high-saturation-orange-yellow-h-oy-020: #fed3a1;
-	--calcite-color-high-saturation-orange-yellow-h-oy-010: #ffe2bf;
-	--calcite-color-high-saturation-yellow-h-yy-100: #5c4e00;
-	--calcite-color-high-saturation-yellow-h-yy-090: #8c7500;
-	--calcite-color-high-saturation-yellow-h-yy-080: #bfa200;
-	--calcite-color-high-saturation-yellow-h-yy-070: #d9bc00;
-	--calcite-color-high-saturation-yellow-h-yy-060: #edd317;
-	--calcite-color-high-saturation-yellow-h-yy-050: #f9e54e;
-	--calcite-color-high-saturation-yellow-h-yy-040: #fbea6e;
-	--calcite-color-high-saturation-yellow-h-yy-030: #fcee8d;
-	--calcite-color-high-saturation-yellow-h-yy-020: #fef3ad;
-	--calcite-color-high-saturation-yellow-h-yy-010: #fff7cc;
-	--calcite-color-high-saturation-yellow-green-h-yg-100: #121a00;
-	--calcite-color-high-saturation-yellow-green-h-yg-090: #384813;
-	--calcite-color-high-saturation-yellow-green-h-yg-080: #5e7526;
-	--calcite-color-high-saturation-yellow-green-h-yg-070: #84a338;
-	--calcite-color-high-saturation-yellow-green-h-yg-060: #aad04b;
-	--calcite-color-high-saturation-yellow-green-h-yg-050: #b6d860;
-	--calcite-color-high-saturation-yellow-green-h-yg-040: #c2e075;
-	--calcite-color-high-saturation-yellow-green-h-yg-030: #cde78a;
-	--calcite-color-high-saturation-yellow-green-h-yg-020: #d9ef9f;
-	--calcite-color-high-saturation-yellow-green-h-yg-010: #e5f7b4;
-	--calcite-color-high-saturation-green-h-gg-100: #001a03;
-	--calcite-color-high-saturation-green-h-gg-090: #0d3f14;
-	--calcite-color-high-saturation-green-h-gg-080: #1a6324;
-	--calcite-color-high-saturation-green-h-gg-070: #288835;
-	--calcite-color-high-saturation-green-h-gg-060: #35ac46;
-	--calcite-color-high-saturation-green-h-gg-050: #50ba5f;
-	--calcite-color-high-saturation-green-h-gg-040: #6bc878;
-	--calcite-color-high-saturation-green-h-gg-030: #87d692;
-	--calcite-color-high-saturation-green-h-gg-020: #a2e4ab;
-	--calcite-color-high-saturation-green-h-gg-010: #bdf2c4;
-	--calcite-color-high-saturation-green-blue-h-gb-100: #002625;
-	--calcite-color-high-saturation-green-blue-h-gb-090: #004d4c;
-	--calcite-color-high-saturation-green-blue-h-gb-080: #007472;
-	--calcite-color-high-saturation-green-blue-h-gb-070: #009b98;
-	--calcite-color-high-saturation-green-blue-h-gb-060: #00bab5;
-	--calcite-color-high-saturation-green-blue-h-gb-050: #28cecb;
-	--calcite-color-high-saturation-green-blue-h-gb-040: #5ae0de;
-	--calcite-color-high-saturation-green-blue-h-gb-030: #8fe6e5;
-	--calcite-color-high-saturation-green-blue-h-gb-020: #afedec;
-	--calcite-color-high-saturation-green-blue-h-gb-010: #cef5f4;
-	--calcite-color-high-saturation-blue-h-bb-100: #001726;
-	--calcite-color-high-saturation-blue-h-bb-090: #00304d;
-	--calcite-color-high-saturation-blue-h-bb-080: #004874;
-	--calcite-color-high-saturation-blue-h-bb-070: #00619b;
-	--calcite-color-high-saturation-blue-h-bb-060: #007ac2;
-	--calcite-color-high-saturation-blue-h-bb-050: #2890ce;
-	--calcite-color-high-saturation-blue-h-bb-040: #50a7da;
-	--calcite-color-high-saturation-blue-h-bb-030: #77bde7;
-	--calcite-color-high-saturation-blue-h-bb-020: #9fd4f3;
-	--calcite-color-high-saturation-blue-h-bb-010: #c7eaff;
-	--calcite-color-neutral-blk-240: #000000;
-	--calcite-color-neutral-blk-235: #060606;
-	--calcite-color-neutral-blk-230: #0b0b0b;
-	--calcite-color-neutral-blk-220: #151515;
-	--calcite-color-neutral-blk-210: #202020;
-	--calcite-color-neutral-blk-200: #2b2b2b;
-	--calcite-color-neutral-blk-190: #353535;
-	--calcite-color-neutral-blk-180: #404040;
-	--calcite-color-neutral-blk-170: #4a4a4a;
-	--calcite-color-neutral-blk-160: #555555;
-	--calcite-color-neutral-blk-150: #606060;
-	--calcite-color-neutral-blk-140: #6a6a6a;
-	--calcite-color-neutral-blk-130: #757575;
-	--calcite-color-neutral-blk-120: #808080;
-	--calcite-color-neutral-blk-110: #8a8a8a;
-	--calcite-color-neutral-blk-100: #949494;
-	--calcite-color-neutral-blk-090: #9f9f9f;
-	--calcite-color-neutral-blk-080: #aaaaaa;
-	--calcite-color-neutral-blk-070: #b5b5b5;
-	--calcite-color-neutral-blk-060: #bfbfbf;
-	--calcite-color-neutral-blk-050: #cacaca;
-	--calcite-color-neutral-blk-040: #d4d4d4;
-	--calcite-color-neutral-blk-030: #dfdfdf;
-	--calcite-color-neutral-blk-020: #eaeaea;
-	--calcite-color-neutral-blk-010: #f3f3f3;
-	--calcite-color-neutral-blk-005: #f8f8f8;
-	--calcite-color-neutral-blk-000: #ffffff;
-	--calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
-	--calcite-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
-	--calcite-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
-	--calcite-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
-	--calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
+  --calcite-z-index-9: 900;
+  --calcite-z-index-8: 800;
+  --calcite-z-index-7: 700;
+  --calcite-z-index-6: 600;
+  --calcite-z-index-5: 500;
+  --calcite-z-index-4: 400;
+  --calcite-z-index-3: 300;
+  --calcite-z-index-1: 1;
+  --calcite-z-index-0: -999999;
+  --calcite-size-relative-auto: auto;
+  --calcite-size-relative-200: 200%;
+  --calcite-size-relative-162: 162.5%;
+  --calcite-size-relative-150: 150%;
+  --calcite-size-relative-137: 137.5%;
+  --calcite-size-relative-125: 125%;
+  --calcite-size-relative-100: 100%;
+  --calcite-size-relative-50: 50%;
+  --calcite-size-none: 0;
+  --calcite-size-288: 288px;
+  --calcite-size-256: 256px;
+  --calcite-size-224: 224px;
+  --calcite-size-192: 192px;
+  --calcite-size-160: 160px;
+  --calcite-size-144: 144px;
+  --calcite-size-128: 128px;
+  --calcite-size-112: 112px;
+  --calcite-size-96: 96px;
+  --calcite-size-80: 80px;
+  --calcite-size-72: 72px;
+  --calcite-size-64: 64px;
+  --calcite-size-56: 56px;
+  --calcite-size-48: 48px;
+  --calcite-size-44: 44px;
+  --calcite-size-40: 40px;
+  --calcite-size-36: 36px;
+  --calcite-size-32: 32px;
+  --calcite-size-28: 28px;
+  --calcite-size-24: 24px;
+  --calcite-size-20: 20px;
+  --calcite-size-16: 16px;
+  --calcite-size-14: 14px;
+  --calcite-size-12: 12px;
+  --calcite-size-10: 10px;
+  --calcite-size-8: 8px;
+  --calcite-size-6: 6px;
+  --calcite-size-4: 4px;
+  --calcite-size-2: 2px;
+  --calcite-size-1: 1px;
+  --calcite-opacity-100: 1;
+  --calcite-opacity-96: 0.96;
+  --calcite-opacity-92: 0.92;
+  --calcite-opacity-90: 0.9;
+  --calcite-opacity-85: 0.85;
+  --calcite-opacity-80: 0.8;
+  --calcite-opacity-70: 0.7;
+  --calcite-opacity-60: 0.6;
+  --calcite-opacity-50: 0.5;
+  --calcite-opacity-40: 0.4;
+  --calcite-opacity-30: 0.3;
+  --calcite-opacity-20: 0.2;
+  --calcite-opacity-10: 0.1;
+  --calcite-opacity-8: 0.08;
+  --calcite-opacity-4: 0.04;
+  --calcite-opacity-0: 0;
+  --calcite-font-text-case-capitalize: capitalize;
+  --calcite-font-text-case-lowercase: lowercase;
+  --calcite-font-text-case-uppercase: uppercase;
+  --calcite-font-text-case-none: none;
+  --calcite-font-text-decoration-underline: underline;
+  --calcite-font-text-decoration-none: none;
+  --calcite-font-weight-heavy: 900;
+  --calcite-font-weight-black: 900; /* only for Avenir Next World (secondary font family) */
+  --calcite-font-weight-extrabold: 800; /* only for Avenir Next World (secondary font family) */
+  --calcite-font-weight-bold: 700;
+  --calcite-font-weight-demi: 600;
+  --calcite-font-weight-medium-italic: "Medium Italic";
+  --calcite-font-weight-medium: 500;
+  --calcite-font-weight-regular: 400;
+  --calcite-font-weight-light: 300; /* only for Avenir Next World (secondary font family) */
+  --calcite-font-weight-thin: 100;
+  --calcite-font-weight-ultralight: 200; /* only for Avenir Next World (secondary font family) */
+  --calcite-font-style-italic: italic; /* used in ratings */
+  --calcite-font-family-monaco: Monaco;
+  --calcite-font-family-avenir-next-world: "Avenir Next World";
+  --calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
+  --calcite-container-size-1440: 1440px;
+  --calcite-container-size-1152: 1152px;
+  --calcite-container-size-854: 854px;
+  --calcite-container-size-768: 768px;
+  --calcite-container-size-678: 678px;
+  --calcite-container-size-504: 504px;
+  --calcite-container-size-476: 476px;
+  --calcite-container-size-328: 328px;
+  --calcite-container-size-320: 320px;
+  --calcite-container-size-154: 154px;
+  --calcite-container-size-0: 0;
+  --calcite-color-dark-blue-d-bb-430: #0087d7;
+  --calcite-color-dark-blue-d-bb-420: #00a0ff;
+  --calcite-color-dark-blue-d-bb-410: #47bbff;
+  --calcite-color-dark-red-d-rr-430: #f3381b;
+  --calcite-color-dark-red-d-rr-420: #fe583e;
+  --calcite-color-dark-red-d-rr-410: #ff7465;
+  --calcite-color-dark-yellow-d-yy-430: #f4b000;
+  --calcite-color-dark-yellow-d-yy-420: #ffc900;
+  --calcite-color-dark-yellow-d-yy-410: #ffe24d;
+  --calcite-color-dark-green-d-gg-430: #36da43;
+  --calcite-color-dark-green-d-gg-420: #36da43;
+  --calcite-color-dark-green-d-gg-410: #44ed51;
+  --calcite-color-vibrant-violet-v-vv-180: #6a0be6;
+  --calcite-color-vibrant-violet-v-vv-160: #8129ff;
+  --calcite-color-vibrant-violet-v-vv-140: #974dff;
+  --calcite-color-vibrant-violet-v-vv-120: #b580ff;
+  --calcite-color-vibrant-violet-red-v-vr-180: #83009e;
+  --calcite-color-vibrant-violet-red-v-vr-160: #ac08cc;
+  --calcite-color-vibrant-violet-red-v-vr-140: #dd33ff;
+  --calcite-color-vibrant-violet-red-v-vr-120: #ea80ff;
+  --calcite-color-vibrant-pink-v-pk-180: #c00073;
+  --calcite-color-vibrant-pink-v-pk-160: #d11486;
+  --calcite-color-vibrant-pink-v-pk-140: #ff19a4;
+  --calcite-color-vibrant-pink-v-pk-120: #ff66c2;
+  --calcite-color-vibrant-red-v-rr-180: #b3000f;
+  --calcite-color-vibrant-red-v-rr-160: #d90012;
+  --calcite-color-vibrant-red-v-rr-140: #ff0015;
+  --calcite-color-vibrant-red-v-rr-120: #ff624d;
+  --calcite-color-vibrant-red-orange-v-ro-180: #c93b00;
+  --calcite-color-vibrant-red-orange-v-ro-160: #de4300;
+  --calcite-color-vibrant-red-orange-v-ro-140: #ff4d00;
+  --calcite-color-vibrant-red-orange-v-ro-120: #ff824d;
+  --calcite-color-vibrant-orange-yellow-v-oy-180: #d17300;
+  --calcite-color-vibrant-orange-yellow-v-oy-160: #e68600;
+  --calcite-color-vibrant-orange-yellow-v-oy-140: #ff9500;
+  --calcite-color-vibrant-orange-yellow-v-oy-120: #ffb54d;
+  --calcite-color-vibrant-yellow-v-yy-180: #ebba17;
+  --calcite-color-vibrant-yellow-v-yy-160: #f5d000;
+  --calcite-color-vibrant-yellow-v-yy-140: #ffee33;
+  --calcite-color-vibrant-yellow-v-yy-120: #fff766;
+  --calcite-color-vibrant-yellow-green-v-yg-180: #7fab00;
+  --calcite-color-vibrant-yellow-green-v-yg-160: #96cc00;
+  --calcite-color-vibrant-yellow-green-v-yg-140: #bbed3b;
+  --calcite-color-vibrant-yellow-green-v-yg-120: #d7ff73;
+  --calcite-color-vibrant-green-v-gg-180: #00a118;
+  --calcite-color-vibrant-green-v-gg-160: #00b81b;
+  --calcite-color-vibrant-green-v-gg-140: #3bed52;
+  --calcite-color-vibrant-green-v-gg-120: #73ff84;
+  --calcite-color-vibrant-green-blue-v-gb-180: #00cfca;
+  --calcite-color-vibrant-green-blue-v-gb-160: #00e6e2;
+  --calcite-color-vibrant-green-blue-v-gb-140: #00f7f3;
+  --calcite-color-vibrant-green-blue-v-gb-120: #59fffc;
+  --calcite-color-vibrant-blue-v-bb-180: #009af2;
+  --calcite-color-vibrant-blue-v-bb-160: #009af2;
+  --calcite-color-vibrant-blue-v-bb-140: #3db8ff;
+  --calcite-color-vibrant-blue-v-bb-120: #59d6ff;
+  --calcite-color-high-saturation-violet-h-vv-100: #100026;
+  --calcite-color-high-saturation-violet-h-vv-090: #250f43;
+  --calcite-color-high-saturation-violet-h-vv-080: #3a1e61;
+  --calcite-color-high-saturation-violet-h-vv-070: #4e2c7e;
+  --calcite-color-high-saturation-violet-h-vv-060: #633b9b;
+  --calcite-color-high-saturation-violet-h-vv-050: #7e5baf;
+  --calcite-color-high-saturation-violet-h-vv-040: #987ac3;
+  --calcite-color-high-saturation-violet-h-vv-030: #b39ad7;
+  --calcite-color-high-saturation-violet-h-vv-020: #cdb9eb;
+  --calcite-color-high-saturation-violet-h-vv-010: #e8d9ff;
+  --calcite-color-high-saturation-violet-red-h-vr-100: #200026;
+  --calcite-color-high-saturation-violet-red-h-vr-090: #3c1243;
+  --calcite-color-high-saturation-violet-red-h-vr-080: #572561;
+  --calcite-color-high-saturation-violet-red-h-vr-070: #73377e;
+  --calcite-color-high-saturation-violet-red-h-vr-060: #8e499b;
+  --calcite-color-high-saturation-violet-red-h-vr-050: #a466af;
+  --calcite-color-high-saturation-violet-red-h-vr-040: #b983c3;
+  --calcite-color-high-saturation-violet-red-h-vr-030: #cfa1d7;
+  --calcite-color-high-saturation-violet-red-h-vr-020: #e4beeb;
+  --calcite-color-high-saturation-violet-red-h-vr-010: #fadbff;
+  --calcite-color-high-saturation-pink-h-pk-100: #260404;
+  --calcite-color-high-saturation-pink-h-pk-090: #590b32;
+  --calcite-color-high-saturation-pink-h-pk-080: #851b52;
+  --calcite-color-high-saturation-pink-h-pk-070: #ba2f7e;
+  --calcite-color-high-saturation-pink-h-pk-060: #e04ea6;
+  --calcite-color-high-saturation-pink-h-pk-050: #e673bb;
+  --calcite-color-high-saturation-pink-h-pk-040: #eb8dc9;
+  --calcite-color-high-saturation-pink-h-pk-030: #f2a5d6;
+  --calcite-color-high-saturation-pink-h-pk-020: #fabee4;
+  --calcite-color-high-saturation-pink-h-pk-010: #ffd1ef;
+  --calcite-color-high-saturation-red-h-rr-100: #210300;
+  --calcite-color-high-saturation-red-h-rr-090: #4f0e08;
+  --calcite-color-high-saturation-red-h-rr-080: #7c1d13;
+  --calcite-color-high-saturation-red-h-rr-070: #a82b1e;
+  --calcite-color-high-saturation-red-h-rr-060: #d83020;
+  --calcite-color-high-saturation-red-h-rr-050: #e65240;
+  --calcite-color-high-saturation-red-h-rr-040: #f07062;
+  --calcite-color-high-saturation-red-h-rr-030: #f2877b;
+  --calcite-color-high-saturation-red-h-rr-020: #ffaaa1;
+  --calcite-color-high-saturation-red-h-rr-010: #ffc6bf;
+  --calcite-color-high-saturation-red-orange-h-ro-100: #260a00;
+  --calcite-color-high-saturation-red-orange-h-ro-090: #531b07;
+  --calcite-color-high-saturation-red-orange-h-ro-080: #802c0f;
+  --calcite-color-high-saturation-red-orange-h-ro-070: #ad3c16;
+  --calcite-color-high-saturation-red-orange-h-ro-060: #da4d1e;
+  --calcite-color-high-saturation-red-orange-h-ro-050: #e1653c;
+  --calcite-color-high-saturation-red-orange-h-ro-040: #e97e5a;
+  --calcite-color-high-saturation-red-orange-h-ro-030: #f09677;
+  --calcite-color-high-saturation-red-orange-h-ro-020: #f8af95;
+  --calcite-color-high-saturation-red-orange-h-ro-010: #ffc7b3;
+  --calcite-color-high-saturation-orange-h-oo-100: #401900;
+  --calcite-color-high-saturation-orange-h-oo-090: #6d2f08;
+  --calcite-color-high-saturation-orange-h-oo-080: #9a4410;
+  --calcite-color-high-saturation-orange-h-oo-070: #c65a18;
+  --calcite-color-high-saturation-orange-h-oo-060: #f36f20;
+  --calcite-color-high-saturation-orange-h-oo-050: #f58440;
+  --calcite-color-high-saturation-orange-h-oo-040: #f89960;
+  --calcite-color-high-saturation-orange-h-oo-030: #faae7f;
+  --calcite-color-high-saturation-orange-h-oo-020: #fdc39f;
+  --calcite-color-high-saturation-orange-h-oo-010: #ffd8bf;
+  --calcite-color-high-saturation-orange-yellow-h-oy-100: #402300;
+  --calcite-color-high-saturation-orange-yellow-h-oy-090: #6d3f08;
+  --calcite-color-high-saturation-orange-yellow-h-oy-080: #9a5b10;
+  --calcite-color-high-saturation-orange-yellow-h-oy-070: #c67718;
+  --calcite-color-high-saturation-orange-yellow-h-oy-060: #f89927;
+  --calcite-color-high-saturation-orange-yellow-h-oy-050: #f9a845;
+  --calcite-color-high-saturation-orange-yellow-h-oy-040: #fbb664;
+  --calcite-color-high-saturation-orange-yellow-h-oy-030: #fcc582;
+  --calcite-color-high-saturation-orange-yellow-h-oy-020: #fed3a1;
+  --calcite-color-high-saturation-orange-yellow-h-oy-010: #ffe2bf;
+  --calcite-color-high-saturation-yellow-h-yy-100: #5c4e00;
+  --calcite-color-high-saturation-yellow-h-yy-090: #8c7500;
+  --calcite-color-high-saturation-yellow-h-yy-080: #bfa200;
+  --calcite-color-high-saturation-yellow-h-yy-070: #d9bc00;
+  --calcite-color-high-saturation-yellow-h-yy-060: #edd317;
+  --calcite-color-high-saturation-yellow-h-yy-050: #f9e54e;
+  --calcite-color-high-saturation-yellow-h-yy-040: #fbea6e;
+  --calcite-color-high-saturation-yellow-h-yy-030: #fcee8d;
+  --calcite-color-high-saturation-yellow-h-yy-020: #fef3ad;
+  --calcite-color-high-saturation-yellow-h-yy-010: #fff7cc;
+  --calcite-color-high-saturation-yellow-green-h-yg-100: #121a00;
+  --calcite-color-high-saturation-yellow-green-h-yg-090: #384813;
+  --calcite-color-high-saturation-yellow-green-h-yg-080: #5e7526;
+  --calcite-color-high-saturation-yellow-green-h-yg-070: #84a338;
+  --calcite-color-high-saturation-yellow-green-h-yg-060: #aad04b;
+  --calcite-color-high-saturation-yellow-green-h-yg-050: #b6d860;
+  --calcite-color-high-saturation-yellow-green-h-yg-040: #c2e075;
+  --calcite-color-high-saturation-yellow-green-h-yg-030: #cde78a;
+  --calcite-color-high-saturation-yellow-green-h-yg-020: #d9ef9f;
+  --calcite-color-high-saturation-yellow-green-h-yg-010: #e5f7b4;
+  --calcite-color-high-saturation-green-h-gg-100: #001a03;
+  --calcite-color-high-saturation-green-h-gg-090: #0d3f14;
+  --calcite-color-high-saturation-green-h-gg-080: #1a6324;
+  --calcite-color-high-saturation-green-h-gg-070: #288835;
+  --calcite-color-high-saturation-green-h-gg-060: #35ac46;
+  --calcite-color-high-saturation-green-h-gg-050: #50ba5f;
+  --calcite-color-high-saturation-green-h-gg-040: #6bc878;
+  --calcite-color-high-saturation-green-h-gg-030: #87d692;
+  --calcite-color-high-saturation-green-h-gg-020: #a2e4ab;
+  --calcite-color-high-saturation-green-h-gg-010: #bdf2c4;
+  --calcite-color-high-saturation-green-blue-h-gb-100: #002625;
+  --calcite-color-high-saturation-green-blue-h-gb-090: #004d4c;
+  --calcite-color-high-saturation-green-blue-h-gb-080: #007472;
+  --calcite-color-high-saturation-green-blue-h-gb-070: #009b98;
+  --calcite-color-high-saturation-green-blue-h-gb-060: #00bab5;
+  --calcite-color-high-saturation-green-blue-h-gb-050: #28cecb;
+  --calcite-color-high-saturation-green-blue-h-gb-040: #5ae0de;
+  --calcite-color-high-saturation-green-blue-h-gb-030: #8fe6e5;
+  --calcite-color-high-saturation-green-blue-h-gb-020: #afedec;
+  --calcite-color-high-saturation-green-blue-h-gb-010: #cef5f4;
+  --calcite-color-high-saturation-blue-h-bb-100: #001726;
+  --calcite-color-high-saturation-blue-h-bb-090: #00304d;
+  --calcite-color-high-saturation-blue-h-bb-080: #004874;
+  --calcite-color-high-saturation-blue-h-bb-070: #00619b;
+  --calcite-color-high-saturation-blue-h-bb-060: #007ac2;
+  --calcite-color-high-saturation-blue-h-bb-050: #2890ce;
+  --calcite-color-high-saturation-blue-h-bb-040: #50a7da;
+  --calcite-color-high-saturation-blue-h-bb-030: #77bde7;
+  --calcite-color-high-saturation-blue-h-bb-020: #9fd4f3;
+  --calcite-color-high-saturation-blue-h-bb-010: #c7eaff;
+  --calcite-color-neutral-blk-240: #000000;
+  --calcite-color-neutral-blk-235: #060606;
+  --calcite-color-neutral-blk-230: #0b0b0b;
+  --calcite-color-neutral-blk-220: #151515;
+  --calcite-color-neutral-blk-210: #202020;
+  --calcite-color-neutral-blk-200: #2b2b2b;
+  --calcite-color-neutral-blk-190: #353535;
+  --calcite-color-neutral-blk-180: #404040;
+  --calcite-color-neutral-blk-170: #4a4a4a;
+  --calcite-color-neutral-blk-160: #555555;
+  --calcite-color-neutral-blk-150: #606060;
+  --calcite-color-neutral-blk-140: #6a6a6a;
+  --calcite-color-neutral-blk-130: #757575;
+  --calcite-color-neutral-blk-120: #808080;
+  --calcite-color-neutral-blk-110: #8a8a8a;
+  --calcite-color-neutral-blk-100: #949494;
+  --calcite-color-neutral-blk-090: #9f9f9f;
+  --calcite-color-neutral-blk-080: #aaaaaa;
+  --calcite-color-neutral-blk-070: #b5b5b5;
+  --calcite-color-neutral-blk-060: #bfbfbf;
+  --calcite-color-neutral-blk-050: #cacaca;
+  --calcite-color-neutral-blk-040: #d4d4d4;
+  --calcite-color-neutral-blk-030: #dfdfdf;
+  --calcite-color-neutral-blk-020: #eaeaea;
+  --calcite-color-neutral-blk-010: #f3f3f3;
+  --calcite-color-neutral-blk-005: #f8f8f8;
+  --calcite-color-neutral-blk-000: #ffffff;
+  --calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
+  --calcite-shadow-3: 0 4px 20px 0
+    rgba(var(--calcite-color-neutral-blk-240), 0.08);
+  --calcite-shadow-2: 0 4px 16px 0
+    rgba(var(--calcite-color-neutral-blk-240), 0.08);
+  --calcite-shadow-1: 0 2px 8px 0
+    rgba(var(--calcite-color-neutral-blk-240), 0.04);
+  --calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
 }
 "
 `;
@@ -315,47 +318,47 @@ exports[`generated tokens CSS core should match 1`] = `
 exports[`generated tokens CSS dark should match 1`] = `
 "/
 
-:root{
-	--calcite-color-border-white: #f8f8f8;
-	--calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
-	--calcite-color-border-input: #757575;
-	--calcite-color-border-3: #404040;
-	--calcite-color-border-2: #4a4a4a;
-	--calcite-color-border-1: #555555;
-	--calcite-color-text-link: #00A0FF;
-	--calcite-color-text-inverse: #151515;
-	--calcite-color-text-3: #9f9f9f;
-	--calcite-color-text-2: #bfbfbf;
-	--calcite-color-text-1: #ffffff;
-	--calcite-color-inverse-press: #f3f3f3;
-	--calcite-color-inverse-hover: #ffffff;
-	--calcite-color-inverse: #f8f8f8;
-	--calcite-color-status-danger-press: #d90012;
-	--calcite-color-status-danger-hover: #ff0015;
-	--calcite-color-status-danger: #FE583E;
-	--calcite-color-status-warning-press: #f5d000;
-	--calcite-color-status-warning-hover: #ffee33;
-	--calcite-color-status-warning: #FFC900;
-	--calcite-color-status-success-press: #00b81b;
-	--calcite-color-status-success-hover: #3bed52;
-	--calcite-color-status-success: #36DA43;
-	--calcite-color-status-info-press: #009af2;
-	--calcite-color-status-info-hover: #3db8ff;
-	--calcite-color-status-info: #00A0FF;
-	--calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
-	--calcite-color-brand-press: #00619b;
-	--calcite-color-brand-hover: #007ac2;
-	--calcite-color-brand: #009af2;
-	--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
-	--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
-	--calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
-	--calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
-	--calcite-color-transparent: rgba(255, 255, 255, 0);
-	--calcite-color-foreground-current: #214155;
-	--calcite-color-foreground-3: #151515;
-	--calcite-color-foreground-2: #202020;
-	--calcite-color-foreground-1: #2b2b2b;
-	--calcite-color-background: #353535;
+:root {
+  --calcite-color-border-white: #f8f8f8;
+  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
+  --calcite-color-border-input: #757575;
+  --calcite-color-border-3: #404040;
+  --calcite-color-border-2: #4a4a4a;
+  --calcite-color-border-1: #555555;
+  --calcite-color-text-link: #00a0ff;
+  --calcite-color-text-inverse: #151515;
+  --calcite-color-text-3: #9f9f9f;
+  --calcite-color-text-2: #bfbfbf;
+  --calcite-color-text-1: #ffffff;
+  --calcite-color-inverse-press: #f3f3f3;
+  --calcite-color-inverse-hover: #ffffff;
+  --calcite-color-inverse: #f8f8f8;
+  --calcite-color-status-danger-press: #d90012;
+  --calcite-color-status-danger-hover: #ff0015;
+  --calcite-color-status-danger: #fe583e;
+  --calcite-color-status-warning-press: #f5d000;
+  --calcite-color-status-warning-hover: #ffee33;
+  --calcite-color-status-warning: #ffc900;
+  --calcite-color-status-success-press: #00b81b;
+  --calcite-color-status-success-hover: #3bed52;
+  --calcite-color-status-success: #36da43;
+  --calcite-color-status-info-press: #009af2;
+  --calcite-color-status-info-hover: #3db8ff;
+  --calcite-color-status-info: #00a0ff;
+  --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
+  --calcite-color-brand-press: #00619b;
+  --calcite-color-brand-hover: #007ac2;
+  --calcite-color-brand: #009af2;
+  --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
+  --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
+  --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
+  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
+  --calcite-color-transparent: rgba(255, 255, 255, 0);
+  --calcite-color-foreground-current: #214155;
+  --calcite-color-foreground-3: #151515;
+  --calcite-color-foreground-2: #202020;
+  --calcite-color-foreground-1: #2b2b2b;
+  --calcite-color-background: #353535;
 }
 "
 `;
@@ -364,95 +367,97 @@ exports[`generated tokens CSS global should match 1`] = `
 "/
 
 :root {
-	--calcite-z-index-tooltip: 901;
-	--calcite-z-index-popup: 900;
-	--calcite-z-index-modal: 800;
-	--calcite-z-index-overlay: 700;
-	--calcite-z-index-dropdown: 600;
-	--calcite-z-index-toast: 500;
-	--calcite-z-index-header: 400;
-	--calcite-z-index-sticky: 300;
-	--calcite-z-index: 1;
-	--calcite-z-index-deep: -999999;
-	--calcite-spacing-xxxl: 32px;
-	--calcite-spacing-xxl: 20px;
-	--calcite-spacing-xl: 16px;
-	--calcite-spacing-lg: 14px;
-	--calcite-spacing-md: 12px;
-	--calcite-spacing-sm: 8px;
-	--calcite-spacing-xs: 6px;
-	--calcite-spacing-xxs: 4px;
-	--calcite-spacing-base: 2px;
-	--calcite-spacing-px: 1px;
-	--calcite-size-xxxl: 32px;
-	--calcite-size-xxl: 24px;
-	--calcite-size-xl: 20px;
-	--calcite-size-lg: 16px;
-	--calcite-size-md-plus: 14px;
-	--calcite-size-md: 12px;
-	--calcite-size-sm-plus: 10px;
-	--calcite-size-sm: 8px;
-	--calcite-size-xs: 6px;
-	--calcite-size-xxs: 4px;
-	--calcite-size-xxxs: 2px;
-	--calcite-size-px: 1px;
-	--calcite-opacity-disabled: 0.5;
-	--calcite-opacity-full: 1;
-	--calcite-opacity-dark: 0.85;
-	--calcite-opacity-half: 0.5;
-	--calcite-opacity-light: 0.4;
-	--calcite-font-text-case-capitalize: capitalize;
-	--calcite-font-text-case-lowercase: lowercase;
-	--calcite-font-text-case-uppercase: uppercase;
-	--calcite-font-text-case-none: none;
-	--calcite-font-text-decoration-underline: underline;
-	--calcite-font-text-decoration-none: none;
-	--calcite-font-paragraph-spacing-normal: 4px;
-	--calcite-font-letter-spacing-wide: 0.4;
-	--calcite-font-letter-spacing-normal: 0;
-	--calcite-font-letter-spacing-tight: -0.4;
-	--calcite-font-line-height-relative-loose: 2; /* 2 */
-	--calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
-	--calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
-	--calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
-	--calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
-	--calcite-font-line-height-relative: auto; /* 1 */
-	--calcite-font-line-height-fixed-xl: 24px;
-	--calcite-font-line-height-fixed-lg: 20px;
-	--calcite-font-line-height-fixed-base: 16px;
-	--calcite-font-line-height-fixed-sm: 12px;
-	--calcite-font-style-emphasis: italic; /* used in ratings */
-	--calcite-font-size-xxl: 24px;
-	--calcite-font-size-xl: 20px;
-	--calcite-font-size-lg: 18px;
-	--calcite-font-size-md: 16px;
-	--calcite-font-size: 14px;
-	--calcite-font-size-sm: 12px;
-	--calcite-font-size-xs: 10px;
-	--calcite-font-weight-bold: 700;
-	--calcite-font-weight-semibold: 600;
-	--calcite-font-weight-medium: 500;
-	--calcite-font-weight-regular: 400;
-	--calcite-font-weight-normal: 400; /* For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular" */
-	--calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
-	--calcite-font-family-code: Monaco;
-	--calcite-font-family: "Avenir Next LT Pro";
-	--calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
-	--calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
-	--calcite-container-size-gutter: 16px;
-	--calcite-container-size-margin: 24px;
-	--calcite-color-background-none: rgba(#ffffff, 0);
-	--calcite-corner-radius-pill: 100%;
-	--calcite-corner-radius-round: 4px;
-	--calcite-corner-radius-sharp: 0;
-	--calcite-border-width-lg: 4px;
-	--calcite-border-width-md: 2px;
-	--calcite-border-width-sm: 1px;
-	--calcite-border-width-none: 0;
-	--calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
-	--calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
-	--calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
-	--calcite-corner-radius: var(--calcite-corner-radius-sharp);
+  --calcite-z-index-tooltip: 901;
+  --calcite-z-index-popup: 900;
+  --calcite-z-index-modal: 800;
+  --calcite-z-index-overlay: 700;
+  --calcite-z-index-dropdown: 600;
+  --calcite-z-index-toast: 500;
+  --calcite-z-index-header: 400;
+  --calcite-z-index-sticky: 300;
+  --calcite-z-index: 1;
+  --calcite-z-index-deep: -999999;
+  --calcite-spacing-xxxl: 32px;
+  --calcite-spacing-xxl: 20px;
+  --calcite-spacing-xl: 16px;
+  --calcite-spacing-lg: 14px;
+  --calcite-spacing-md: 12px;
+  --calcite-spacing-sm: 8px;
+  --calcite-spacing-xs: 6px;
+  --calcite-spacing-xxs: 4px;
+  --calcite-spacing-base: 2px;
+  --calcite-spacing-px: 1px;
+  --calcite-size-xxxl: 32px;
+  --calcite-size-xxl: 24px;
+  --calcite-size-xl: 20px;
+  --calcite-size-lg: 16px;
+  --calcite-size-md-plus: 14px;
+  --calcite-size-md: 12px;
+  --calcite-size-sm-plus: 10px;
+  --calcite-size-sm: 8px;
+  --calcite-size-xs: 6px;
+  --calcite-size-xxs: 4px;
+  --calcite-size-xxxs: 2px;
+  --calcite-size-px: 1px;
+  --calcite-opacity-disabled: 0.5;
+  --calcite-opacity-full: 1;
+  --calcite-opacity-dark: 0.85;
+  --calcite-opacity-half: 0.5;
+  --calcite-opacity-light: 0.4;
+  --calcite-font-text-case-capitalize: capitalize;
+  --calcite-font-text-case-lowercase: lowercase;
+  --calcite-font-text-case-uppercase: uppercase;
+  --calcite-font-text-case-none: none;
+  --calcite-font-text-decoration-underline: underline;
+  --calcite-font-text-decoration-none: none;
+  --calcite-font-paragraph-spacing-normal: 4px;
+  --calcite-font-letter-spacing-wide: 0.4;
+  --calcite-font-letter-spacing-normal: 0;
+  --calcite-font-letter-spacing-tight: -0.4;
+  --calcite-font-line-height-relative-loose: 2; /* 2 */
+  --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
+  --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
+  --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
+  --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
+  --calcite-font-line-height-relative: auto; /* 1 */
+  --calcite-font-line-height-fixed-xl: 24px;
+  --calcite-font-line-height-fixed-lg: 20px;
+  --calcite-font-line-height-fixed-base: 16px;
+  --calcite-font-line-height-fixed-sm: 12px;
+  --calcite-font-style-emphasis: italic; /* used in ratings */
+  --calcite-font-size-xxl: 24px;
+  --calcite-font-size-xl: 20px;
+  --calcite-font-size-lg: 18px;
+  --calcite-font-size-md: 16px;
+  --calcite-font-size: 14px;
+  --calcite-font-size-sm: 12px;
+  --calcite-font-size-xs: 10px;
+  --calcite-font-weight-bold: 700;
+  --calcite-font-weight-semibold: 600;
+  --calcite-font-weight-medium: 500;
+  --calcite-font-weight-regular: 400;
+  --calcite-font-weight-normal: 400; /* For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular" */
+  --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
+  --calcite-font-family-code: Monaco;
+  --calcite-font-family: "Avenir Next LT Pro";
+  --calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
+  --calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
+  --calcite-container-size-gutter: 16px;
+  --calcite-container-size-margin: 24px;
+  --calcite-color-background-none: rgba(#ffffff, 0);
+  --calcite-corner-radius-pill: 100%;
+  --calcite-corner-radius-round: 4px;
+  --calcite-corner-radius-sharp: 0;
+  --calcite-border-width-lg: 4px;
+  --calcite-border-width-md: 2px;
+  --calcite-border-width-sm: 1px;
+  --calcite-border-width-none: 0;
+  --calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08),
+    0 12px 30px rgba(0, 0, 0, 0.1);
+  --calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04),
+    0 4px 16px 0 rgba(0, 0, 0, 0.08);
+  --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
+  --calcite-corner-radius: var(--calcite-corner-radius-sharp);
 }
 "
 `;
@@ -460,47 +465,47 @@ exports[`generated tokens CSS global should match 1`] = `
 exports[`generated tokens CSS light should match 1`] = `
 "/
 
-:root{
-	--calcite-color-border-white: #ffffff;
-	--calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
-	--calcite-color-border-input: #949494;
-	--calcite-color-border-3: #dfdfdf;
-	--calcite-color-border-2: #d4d4d4;
-	--calcite-color-border-1: #cacaca;
-	--calcite-color-text-link: #00619b;
-	--calcite-color-text-inverse: #ffffff;
-	--calcite-color-text-3: #6a6a6a;
-	--calcite-color-text-2: #4a4a4a;
-	--calcite-color-text-1: #151515;
-	--calcite-color-inverse-press: #202020;
-	--calcite-color-inverse-hover: #2b2b2b;
-	--calcite-color-inverse: #353535;
-	--calcite-color-status-danger-press: #7c1d13;
-	--calcite-color-status-danger-hover: #a82b1e;
-	--calcite-color-status-danger: #d83020;
-	--calcite-color-status-warning-press: #bfa200;
-	--calcite-color-status-warning-hover: #d9bc00;
-	--calcite-color-status-warning: #edd317;
-	--calcite-color-status-success-press: #1a6324;
-	--calcite-color-status-success-hover: #288835;
-	--calcite-color-status-success: #35ac46;
-	--calcite-color-status-info-press: #00304d;
-	--calcite-color-status-info-hover: #004874;
-	--calcite-color-status-info: #00619b;
-	--calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
-	--calcite-color-brand-press: #004874;
-	--calcite-color-brand-hover: #00619b;
-	--calcite-color-brand: #007ac2;
-	--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
-	--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
-	--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
-	--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
-	--calcite-color-transparent: rgba(0, 0, 0, 0);
-	--calcite-color-foreground-current: #c7eaff;
-	--calcite-color-foreground-3: #eaeaea;
-	--calcite-color-foreground-2: #f3f3f3;
-	--calcite-color-foreground-1: #ffffff;
-	--calcite-color-background: #f8f8f8;
+:root {
+  --calcite-color-border-white: #ffffff;
+  --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
+  --calcite-color-border-input: #949494;
+  --calcite-color-border-3: #dfdfdf;
+  --calcite-color-border-2: #d4d4d4;
+  --calcite-color-border-1: #cacaca;
+  --calcite-color-text-link: #00619b;
+  --calcite-color-text-inverse: #ffffff;
+  --calcite-color-text-3: #6a6a6a;
+  --calcite-color-text-2: #4a4a4a;
+  --calcite-color-text-1: #151515;
+  --calcite-color-inverse-press: #202020;
+  --calcite-color-inverse-hover: #2b2b2b;
+  --calcite-color-inverse: #353535;
+  --calcite-color-status-danger-press: #7c1d13;
+  --calcite-color-status-danger-hover: #a82b1e;
+  --calcite-color-status-danger: #d83020;
+  --calcite-color-status-warning-press: #bfa200;
+  --calcite-color-status-warning-hover: #d9bc00;
+  --calcite-color-status-warning: #edd317;
+  --calcite-color-status-success-press: #1a6324;
+  --calcite-color-status-success-hover: #288835;
+  --calcite-color-status-success: #35ac46;
+  --calcite-color-status-info-press: #00304d;
+  --calcite-color-status-info-hover: #004874;
+  --calcite-color-status-info: #00619b;
+  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
+  --calcite-color-brand-press: #004874;
+  --calcite-color-brand-hover: #00619b;
+  --calcite-color-brand: #007ac2;
+  --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
+  --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
+  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
+  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
+  --calcite-color-transparent: rgba(0, 0, 0, 0);
+  --calcite-color-foreground-current: #c7eaff;
+  --calcite-color-foreground-3: #eaeaea;
+  --calcite-color-foreground-2: #f3f3f3;
+  --calcite-color-foreground-1: #ffffff;
+  --calcite-color-background: #f8f8f8;
 }
 "
 `;
@@ -1658,18 +1663,18 @@ $calcite-container-size-328: 328px;
 $calcite-container-size-320: 320px;
 $calcite-container-size-154: 154px;
 $calcite-container-size-0: 0;
-$calcite-color-dark-blue-d-bb-430: #0087D7;
-$calcite-color-dark-blue-d-bb-420: #00A0FF;
-$calcite-color-dark-blue-d-bb-410: #47BBFF;
-$calcite-color-dark-red-d-rr-430: #F3381B;
-$calcite-color-dark-red-d-rr-420: #FE583E;
-$calcite-color-dark-red-d-rr-410: #FF7465;
-$calcite-color-dark-yellow-d-yy-430: #F4B000;
-$calcite-color-dark-yellow-d-yy-420: #FFC900;
-$calcite-color-dark-yellow-d-yy-410: #FFE24D;
-$calcite-color-dark-green-d-gg-430: #36DA43;
-$calcite-color-dark-green-d-gg-420: #36DA43;
-$calcite-color-dark-green-d-gg-410: #44ED51;
+$calcite-color-dark-blue-d-bb-430: #0087d7;
+$calcite-color-dark-blue-d-bb-420: #00a0ff;
+$calcite-color-dark-blue-d-bb-410: #47bbff;
+$calcite-color-dark-red-d-rr-430: #f3381b;
+$calcite-color-dark-red-d-rr-420: #fe583e;
+$calcite-color-dark-red-d-rr-410: #ff7465;
+$calcite-color-dark-yellow-d-yy-430: #f4b000;
+$calcite-color-dark-yellow-d-yy-420: #ffc900;
+$calcite-color-dark-yellow-d-yy-410: #ffe24d;
+$calcite-color-dark-green-d-gg-430: #36da43;
+$calcite-color-dark-green-d-gg-420: #36da43;
+$calcite-color-dark-green-d-gg-410: #44ed51;
 $calcite-color-vibrant-violet-v-vv-180: #6a0be6;
 $calcite-color-vibrant-violet-v-vv-160: #8129ff;
 $calcite-color-vibrant-violet-v-vv-140: #974dff;
@@ -1865,7 +1870,8 @@ $calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0
 $calcite-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
 $calcite-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
 $calcite-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
-$calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);"
+$calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
+"
 `;
 
 exports[`generated tokens SCSS dark should match 1`] = `
@@ -1877,7 +1883,7 @@ $calcite-color-border-input: #757575;
 $calcite-color-border-3: #404040;
 $calcite-color-border-2: #4a4a4a;
 $calcite-color-border-1: #555555;
-$calcite-color-text-link: #00A0FF;
+$calcite-color-text-link: #00a0ff;
 $calcite-color-text-inverse: #151515;
 $calcite-color-text-3: #9f9f9f;
 $calcite-color-text-2: #bfbfbf;
@@ -1887,16 +1893,16 @@ $calcite-color-inverse-hover: #ffffff;
 $calcite-color-inverse: #f8f8f8;
 $calcite-color-status-danger-press: #d90012;
 $calcite-color-status-danger-hover: #ff0015;
-$calcite-color-status-danger: #FE583E;
+$calcite-color-status-danger: #fe583e;
 $calcite-color-status-warning-press: #f5d000;
 $calcite-color-status-warning-hover: #ffee33;
-$calcite-color-status-warning: #FFC900;
+$calcite-color-status-warning: #ffc900;
 $calcite-color-status-success-press: #00b81b;
 $calcite-color-status-success-hover: #3bed52;
-$calcite-color-status-success: #36DA43;
+$calcite-color-status-success: #36da43;
 $calcite-color-status-info-press: #009af2;
 $calcite-color-status-info-hover: #3db8ff;
-$calcite-color-status-info: #00A0FF;
+$calcite-color-status-info: #00a0ff;
 $calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
 $calcite-color-brand-press: #00619b;
 $calcite-color-brand-hover: #007ac2;
@@ -2002,10 +2008,13 @@ $calcite-border-width-lg: 4px;
 $calcite-border-width-md: 2px;
 $calcite-border-width-sm: 1px;
 $calcite-border-width-none: 0;
-$calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
-$calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+$calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08),
+  0 12px 30px rgba(0, 0, 0, 0.1);
+$calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04),
+  0 4px 16px 0 rgba(0, 0, 0, 0.08);
 $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
-$calcite-corner-radius: var(--calcite-corner-radius-sharp);"
+$calcite-corner-radius: var(--calcite-corner-radius-sharp);
+"
 `;
 
 exports[`generated tokens SCSS light should match 1`] = `
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts
index b484bef2cbe..f6d7eb3b038 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts
@@ -1,8 +1,10 @@
 import sd, { Core as StyleDictionary } from "style-dictionary";
+import * as prettier from "prettier";
 
 import { formatTokens } from "./utils/formatTokens.js";
 import { formatExtraOutput } from "./utils/formatExtraOutput.js";
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js";
+import { EOL } from "os";
 
 export const formatCssPlatform: CalledFormatterFunction = (args) => {
   const { file, dictionary } = args;
@@ -12,7 +14,7 @@ export const formatCssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return header + `:root {\n\t${tokens.join("\n\t")}\n}\n`;
+  return prettier.format(header + `:root {${tokens.join(EOL)}}`, { parser: "css" });
 };
 
 export const registerFormatterCss = (sd: StyleDictionary): void => {
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts
index d28760334cf..2204bce8bfc 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts
@@ -1,4 +1,6 @@
 import { Core as StyleDictionary } from "style-dictionary";
+import * as prettier from "prettier";
+
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments";
 
 export const formatDocsPlatform: CalledFormatterFunction = (args) => {
@@ -15,7 +17,7 @@ export const formatDocsPlatform: CalledFormatterFunction = (args) => {
     output.tokens[token.type].push(token);
   }
 
-  return JSON.stringify(output, null, 2);
+  return prettier.format(JSON.stringify(output, null, 2), { parser: "json" });
 };
 
 export const registerFormatterDocs = (sd: StyleDictionary): void => {
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts
index 5bef68d3324..2ec0b00a809 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts
@@ -1,12 +1,15 @@
 import styleDictionary, { Core as StyleDictionary } from "style-dictionary";
+import * as prettier from "prettier";
+
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments";
 
 export const formatJsPlatform: CalledFormatterFunction = (args) => {
-  return (
+  return prettier.format(
     styleDictionary.formatHelpers.fileHeader({ file: args.file }) +
-    "export default " +
-    JSON.stringify(args.dictionary.properties, null, 2) +
-    ";\n"
+      "export default " +
+      JSON.stringify(args.dictionary.properties, null, 2) +
+      ";",
+    { parser: "babel" }
   );
 };
 
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts
index 5eebe2a1e35..bc307d5585f 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts
@@ -2,7 +2,10 @@ import sd, { Core as StyleDictionary } from "style-dictionary";
 
 import { formatTokens } from "./utils/formatTokens.js";
 import { formatExtraOutput } from "./utils/formatExtraOutput.js";
+import * as prettier from "prettier";
+
 import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js";
+import { EOL } from "os";
 
 export const formatScssPlatform: CalledFormatterFunction = (args) => {
   const { file, dictionary } = args;
@@ -12,7 +15,7 @@ export const formatScssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return header + tokens.join("\n");
+  return prettier.format(header + tokens.join(EOL), { parser: "scss" });
 };
 
 export const registerFormatterScss = (sd: StyleDictionary): void => {
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
index 65591b529f6..38dfb94fe28 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
@@ -35,7 +35,7 @@ export const FormattingRules: Partial<Record<PlatformUnion | "default", Formatte
     commentStyle: "long",
     indentation: "  ",
     separator: ":",
-    join: "\n\t",
+    join: "",
     suffix: ";",
   },
   sass: {
@@ -43,7 +43,7 @@ export const FormattingRules: Partial<Record<PlatformUnion | "default", Formatte
     commentStyle: "short",
     indentation: "",
     separator: ":",
-    join: "\n",
+    join: "",
     suffix: ";",
   },
   scss: {
@@ -51,7 +51,7 @@ export const FormattingRules: Partial<Record<PlatformUnion | "default", Formatte
     commentStyle: "short",
     indentation: "",
     separator: ":",
-    join: "\n",
+    join: "",
     suffix: ";",
   },
 };
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
index 3e63ddba90d..8dfb7f5e594 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
@@ -1,5 +1,7 @@
 import { writeFileSync } from "fs";
 import { resolve } from "path";
+import * as prettier from "prettier";
+
 import { Platform } from "../../../../types/platform.js";
 import { Options } from "../../../../types/styleDictionary/options.js";
 import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js";
@@ -14,6 +16,8 @@ export function formatExtraOutput(
     const ensureIfArray = (x: any) => (Array.isArray(x) ? (x as any[]) : x);
 
     if (index) {
+      let parser;
+      // Set output
       switch (args.platform) {
         case "css":
         case "scss":
@@ -29,14 +33,14 @@ export function formatExtraOutput(
           const classes = index.class
             ? index.class.map((cls) => {
                 const c = ensureIfArray(outputObject[`${cls[1]}.${args.platform}`]);
-                return cls && Array.isArray(c) ? `.${cls[0]} {\n\t${c.join("\n\t")}\n}` : "";
+                return cls && Array.isArray(c) ? `.${cls[0]} {${c.join("")}}` : "";
               })
             : [];
           const mixins = index.mixin
             ? index.mixin.map(([mixinName, output]) => {
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 return Array.isArray(m)
-                  ? `@mixin ${mixinName} {\n\t${m.map((o) => `${o}`.replaceAll("$", "--")).join("\n\t")}\n}`
+                  ? `@mixin ${mixinName} {${m.map((o) => `${o}`.replaceAll("$", "--")).join("")}}`
                   : "";
               })
             : [];
@@ -45,9 +49,8 @@ export function formatExtraOutput(
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 const cssProps = m.map((o) => `${o}`.replaceAll("$", "--"));
                 return Array.isArray(m)
-                  ? `${
-                      output === "light" ? `:root {\n\t${cssProps.join("\n\t")}\n}\n` : ""
-                    }@media (${mediaSchemed}) {\n\t.calcite-mode-auto {\n\t\t${cssProps.join("\n\t\t")}\n\t}\n}`
+                  ? `${output === "light" ? `:root {${cssProps.join("")}}` : ""
+                    }@media (${mediaSchemed}) {.calcite-mode-auto {${cssProps.join("")}}}`
                   : "";
               })
             : [];
@@ -72,7 +75,28 @@ export function formatExtraOutput(
           break;
       }
 
-      writeFileSync(resolve(args.buildPath, index.name), `${args.header}${outputFiles[index.name].join("\n\n")}\n`);
+      // Set Parser
+      switch (args.platform) {
+        case "css":
+        case "scss":
+          parser = args.platform;
+          break;
+        case "sass":
+          parser = "scss";
+        case "es6":
+        case "js":
+          parser = "babel";
+          break;
+        case "docs":
+          parser = "json";
+        default:
+          break;
+      }
+
+      writeFileSync(
+        resolve(args.buildPath, index.name),
+        prettier.format(`${args.header}${outputFiles[index.name].join(" ")}`, { parser })
+      );
     }
 
     Object.entries(outputObject).forEach(([fileName, outputList]) => {
@@ -80,24 +104,26 @@ export function formatExtraOutput(
       switch (args.platform) {
         case Platform.CSS:
           if (typeof outputList[0] === "string" && outputList[0].slice(0, 2) === "--") {
-            writeFileSync(absoluteFilePath, `${args.header}:root{\n\t${outputList.join("\n\t")}\n}\n`);
+            writeFileSync(
+              absoluteFilePath,
+              prettier.format(`${args.header}:root{${outputList.join("")}}`, { parser: "css" })
+            );
           } else {
-            writeFileSync(absoluteFilePath, `${args.header}${outputList.join("\n\n")}\n`);
+            writeFileSync(absoluteFilePath, prettier.format(`${args.header}${outputList.join("")}`, { parser: "css" }));
           }
           break;
         case Platform.SCSS:
         case Platform.SASS:
-          if (typeof outputList[0] === "string" && outputList[0][0] === "$") {
-            writeFileSync(absoluteFilePath, `${args.header}${outputList.join("\n")}\n`);
-          } else {
-            writeFileSync(absoluteFilePath, `${args.header}${outputList.join("\n\n")}\n`);
-          }
+          writeFileSync(absoluteFilePath, prettier.format(`${args.header}${outputList.join("")}`, { parser: "scss" }));
           break;
         case Platform.JS:
-          writeFileSync(absoluteFilePath, args.header + "export default " + outputList[0] + "\n");
+          writeFileSync(
+            absoluteFilePath,
+            prettier.format(args.header + "export default " + outputList[0] + "", { parser: "babel" })
+          );
           break;
         case Platform.DOCS:
-          writeFileSync(absoluteFilePath, outputList[0]);
+          writeFileSync(absoluteFilePath, prettier.format(outputList[0].join(""), { parser: "json" }));
           break;
         default:
           break;