diff --git a/packages/calcite-components/src/components/meter/meter.scss b/packages/calcite-components/src/components/meter/meter.scss
index 562e8486cee..27b6ee3cfd1 100644
--- a/packages/calcite-components/src/components/meter/meter.scss
+++ b/packages/calcite-components/src/components/meter/meter.scss
@@ -1,57 +1,110 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-meter-background-color: Specifies the background color of the component.
+ * @prop --calcite-meter-border-color: Specifies the border color of the component and displayed step lines.
+ * @prop --calcite-meter-shadow: Specifies the box shadow of the component.
+ * @prop --calcite-meter-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-meter-fill-color: Specifies the color of the component's fill.
+ * @prop --calcite-meter-range-text-color: Specifies the color of the component's range labels.
+ * @prop --calcite-meter-value-text-color: Specifies the color of the component's value label.
+ *
+ */
+
+/**
+  * Local props
+  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
+  *
+  * --calcite-internal-meter-fill-color
+  * --calcite-internal-meter-background-color
+  * --calcite-internal-meter-space: var(--calcite-spacing-base);
+  * --calcite-internal-meter-height: var(--calcite-size-lg);
+  * --calcite-internal-meter-font-size: var(--calcite-font-size--1);
+*/
+
 @include base-component();
 @include disabled();
 
 :host {
   @apply flex;
-  --calcite-meter-space-internal: theme("spacing[0.5]");
-  --calcite-meter-height-internal: theme("spacing.4");
-  --calcite-meter-font-size-internal: var(--calcite-font-size--1);
+  --calcite-internal-meter-space: var(--calcite-spacing-base);
+  --calcite-internal-meter-height: var(--calcite-size-lg);
+  --calcite-internal-meter-font-size: var(--calcite-font-size--1);
+  --calcite-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));
+  --calcite-meter-background-color: var(--calcite-color-foreground-2);
+  --calcite-meter-border-color: var(--calcite-color-border-3);
+  --calcite-meter-shadow: var(--calcite-shadow-none);
+  --calcite-meter-range-text-color: var(--calcite-color-text-3);
+  --calcite-meter-value-text-color: var(--calcite-color-text-1);
+  --calcite-meter-shadow: var(--calcite-shadow-none);
+  --calcite-meter-corner-radius: 9999px;
 }
 
 :host([scale="s"]) {
-  --calcite-meter-height-internal: theme("spacing.3");
-  --calcite-meter-font-size-internal: var(--calcite-font-size--2);
+  --calcite-internal-meter-height: var(--calcite-size-xxl);
+  --calcite-internal-meter-font-size: var(--calcite-font-size--2);
 }
 
 :host([scale="l"]) {
-  --calcite-meter-height-internal: theme("spacing.6");
-  --calcite-meter-font-size-internal: var(--calcite-font-size-0);
+  --calcite-internal-meter-height: var(--calcite-size-xxxl);
+  --calcite-internal-meter-font-size: var(--calcite-font-size-0);
 }
 
-.container {
-  @apply flex relative items-center w-full m-0;
-  block-size: var(--calcite-meter-height-internal);
-  background-color: var(--calcite-color-foreground-2);
-  border: 1px solid var(--calcite-color-border-3);
-  border-radius: var(--calcite-meter-height-internal);
+:host([appearance="solid"]) {
+  --calcite-meter-border-color: var(--calcite-color-foreground-3);
+  --calcite-meter-background-color: var(--calcite-color-foreground-3);
+}
+
+:host([appearance="outline"]) {
+  --calcite-meter-background-color: transparent;
+}
+
+.fill {
+  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));
+}
+
+.fill-danger {
+  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger));
+}
+
+.fill-success {
+  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success));
 }
 
-.solid {
-  border: 1px solid var(--calcite-color-foreground-3);
-  background-color: var(--calcite-color-foreground-3);
+.fill-warning {
+  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning));
 }
 
-.outline {
-  @apply bg-transparent;
+.container {
+  @apply flex relative items-center;
+  margin: 0;
+  inline-size: var(--calcite-container-size-content-fluid);
+  block-size: var(--calcite-internal-meter-height);
+  background-color: var(--calcite-meter-background-color);
+  border: var(--calcite-border-width-sm) solid var(--calcite-meter-border-color);
+  border-radius: var(--calcite-meter-corner-radius);
+  box-shadow: var(--calcite-meter-shadow);
 }
 
 .value-visible {
-  margin-block-start: theme("spacing.6");
+  margin-block-start: var(--calcite-size-xxl);
 }
 
 .steps-visible {
-  margin-block-end: theme("spacing.6");
+  margin-block-end: var(--calcite-size-xxl);
 }
 
 .step-line {
   @apply block absolute inset-y-0;
-  inline-size: var(--calcite-meter-space-internal);
-  background-color: var(--calcite-color-border-3);
+  inline-size: var(--calcite-internal-meter-space);
+  background-color: var(--calcite-meter-border-color);
 }
 
 .label {
   @apply absolute;
-  font-size: var(--calcite-meter-font-size-internal);
+  font-size: var(--calcite-internal-meter-font-size);
 }
 
 .label-hidden {
@@ -61,60 +114,33 @@
 .label-value {
   inset-block-end: calc(100% + 0.5em);
   font-weight: var(--calcite-font-weight-bold);
-  color: var(--calcite-color-text-1);
+  color: var(--calcite-meter-value-text-color);
 }
 
 .label-range {
-  @apply text-color-3;
+  color: var(--calcite-meter-range-text-color);
   inset-block-start: calc(100% + 0.5em);
 }
 
-.unit-label {
-  @apply text-color-3 font-medium;
-}
-
-.label-value .unit-label {
-  @apply text-color-2 font-bold;
+.label-range .unit-label {
+  font-weight: var(--calcite-font-weight-medium);
 }
 
 .fill {
-  @apply block absolute duration-150 ease-in-out bg-brand z-default;
-  inset-inline-start: var(--calcite-meter-space-internal);
-  inset-block: var(--calcite-meter-space-internal);
-  border-radius: var(--calcite-meter-height-internal);
-  max-inline-size: calc(100% - (var(--calcite-meter-space-internal) * 2));
-  min-inline-size: calc(var(--calcite-meter-height-internal) - (var(--calcite-meter-space-internal) * 2));
+  @apply block absolute duration-150 ease-in-out z-default;
+  inset-inline-start: var(--calcite-internal-meter-space);
+  inset-block: var(--calcite-internal-meter-space);
+  border-radius: var(--calcite-meter-corner-radius);
+  max-inline-size: calc(100% - (var(--calcite-internal-meter-space) * 2));
+  min-inline-size: calc(var(--calcite-internal-meter-height) - (var(--calcite-internal-meter-space) * 2));
+  background-color: var(--calcite-internal-meter-fill-color);
   transition-property: inline-size, background-color, box-shadow;
 }
 
-.fill-danger {
-  background-color: var(--calcite-color-status-danger);
-}
-
-.fill-success {
-  background-color: var(--calcite-color-status-success);
-}
-
-.fill-warning {
-  background-color: var(--calcite-color-status-warning);
-}
-
 .solid .fill {
   inset-block: 0;
   inset-inline-start: 0;
   max-inline-size: 100%;
-  min-inline-size: calc(var(--calcite-meter-height-internal));
-  box-shadow: 0 0 0 1px var(--calcite-color-brand);
-}
-
-.solid .fill-danger {
-  box-shadow: 0 0 0 1px var(--calcite-color-status-danger);
-}
-
-.solid .fill-success {
-  box-shadow: 0 0 0 1px var(--calcite-color-status-success);
-}
-
-.solid .fill-warning {
-  box-shadow: 0 0 0 1px var(--calcite-color-status-warning);
+  min-inline-size: calc(var(--calcite-internal-meter-height));
+  box-shadow: 0 0 0 1px var(--calcite-internal-meter-fill-color);
 }
diff --git a/packages/calcite-components/src/components/meter/meter.stories.ts b/packages/calcite-components/src/components/meter/meter.stories.ts
index 28d75ada570..86cf79b2e02 100644
--- a/packages/calcite-components/src/components/meter/meter.stories.ts
+++ b/packages/calcite-components/src/components/meter/meter.stories.ts
@@ -212,3 +212,24 @@ export const complexUnitRTL_TestOnly = (): string =>
     high="7600"
     value="2200"
   ></calcite-meter>`;
+
+export const theming_TestOnly = (): string => html`
+  <calcite-meter
+    unit-label="GB"
+    value-label
+    range-labels
+    value-label-type="units"
+    min="0"
+    max="12400"
+    low="4600"
+    high="7600"
+    value="2200"
+    style="--calcite-meter-background-color: rgb(208, 190, 230);
+      --calcite-meter-border-color: rgb(184, 48, 153);
+      --calcite-meter-shadow: var(--calcite-shadow-sm);
+      --calcite-meter-corner-radius: 0px;
+      --calcite-meter-fill-color: rgb(174, 69, 174);
+      --calcite-meter-range-text-color: rgb(28, 110, 164);
+      --calcite-meter-value-text-color: purple;"
+  ></calcite-meter>
+`;
diff --git a/packages/calcite-components/src/demos/meter.html b/packages/calcite-components/src/demos/meter.html
index c0c5774c91b..369540e5003 100644
--- a/packages/calcite-components/src/demos/meter.html
+++ b/packages/calcite-components/src/demos/meter.html
@@ -29,20 +29,28 @@
         --calcite-color-status-warning: #8ebad1;
         --calcite-color-status-danger: #35c4b1;
       }
+
+      .token-theming {
+        --calcite-meter-background-color: rgb(208, 190, 230);
+        --calcite-meter-border-color: rgb(184, 48, 153);
+        --calcite-meter-shadow: var(--calcite-shadow-sm);
+        --calcite-meter-corner-radius: 0px;
+        --calcite-meter-fill-color: rgb(174, 69, 174);
+        --calcite-meter-range-text-color: rgb(28, 110, 164);
+        --calcite-meter-value-text-color: purple;
+      }
     </style>
     <script src="./_assets/head.js"></script>
   </head>
 
   <body>
     <demo-dom-swapper>
-      <div class="parent">
-        <h3>Interactive Example</h3>
-      </div>
       <div class="parent">
         <div class="child">
           <calcite-label>
-            Example 1
+            Themed
             <calcite-meter
+              class="token-theming"
               group-separator
               unit-label="GB"
               value-label
@@ -52,6 +60,7 @@ <h3>Interactive Example</h3>
               low="4600"
               high="7600"
               value="-2200"
+              value-label-type="units"
             ></calcite-meter>
           </calcite-label>
           <calcite-label>
@@ -74,6 +83,7 @@ <h3>Interactive Example</h3>
       </div>
       <div class="parent">
         <div class="child">
+          <h3>Interactive Example</h3>
           <calcite-label>
             Meter
             <calcite-meter