From 5710adbcc32fbc7ef83e925e1fca39146b154904 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 9 Jul 2025 13:46:42 +0200
Subject: [PATCH 1/9] chore(lime-theme): remove unused theme variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This file included `@use '@material/theme'` which was
supposed to add some of our very old brand colors to
MDC components. However…
1. We're already overriding all MDC colors anyways.
2. There were some build errors related to this line, where
the build couldn't find the file to import.
---
 src/style/internal/lime-theme.scss | 34 ------------------------------
 1 file changed, 34 deletions(-)

diff --git a/src/style/internal/lime-theme.scss b/src/style/internal/lime-theme.scss
index d28e0a3917..0fc62f7266 100644
--- a/src/style/internal/lime-theme.scss
+++ b/src/style/internal/lime-theme.scss
@@ -7,41 +7,7 @@
  * Avoid that unless there's very good reason for it!
  */
 
-@use '../brand-colors';
 @use '../_theme-color-variables';
-
-@use '@material/theme' with (
-    $primary: brand-colors.$lime-turquoise,
-    $secondary: brand-colors.$lime-dark-grey,
-    $background: #fff,
-    $surface: #fff,
-    $error: #b00020,
-    $on-primary: #fff,
-    $on-secondary: #fff,
-    $on-surface: #000,
-    $on-error: #fff,
-    // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
-    // $text-hint-on-light: rgba(0, 0, 0, 0.38),
-    // $text-primary-on-background: rgba(0, 0, 0, 0.87),
-    // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
-    //
-    // The following variables are also available to be set if needed
-    // (note by Ads: they probably aren't available in MDC v11)
-    //
-    // $text-hint-on-background: rgba(0, 0, 0, 0.38),
-    // $text-icon-on-background: rgba(0, 0, 0, 0.38),
-    // $text-primary-on-light: rgba(0, 0, 0, 0.87),
-    // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
-    // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
-    // $text-icon-on-light: rgba(0, 0, 0, 0.38),
-    // $text-primary-on-dark: white,
-    // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-    // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
-    // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
-     // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
-);
-@forward '@material/theme';
-
 @use './lime-typography';
 
 :host {

From 54a32616b1170b77755c904ada49465e2429328e Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 9 Jul 2025 13:48:53 +0200
Subject: [PATCH 2/9] chore(style): remove old unused brand colors file

---
 src/style/brand-colors.scss | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 src/style/brand-colors.scss

diff --git a/src/style/brand-colors.scss b/src/style/brand-colors.scss
deleted file mode 100644
index 169166e97a..0000000000
--- a/src/style/brand-colors.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-$lime-deep-red: #f05750;
-$lime-red: #ff7043;
-$lime-orange: #ffb03b;
-$lime-yellow: #ffcf3d;
-$lime-green: #66bb6a;
-$lime-turquoise: #26a69a;
-$lime-blue: #29b6f6;
-$lime-dark-blue: #57879f;
-$lime-magenta: #ff3195;
-$lime-light-grey: #adadad;
-$lime-dark-grey: #575756;

From f133ca2aa98f614afd6e5265b0be1ed66bad0f35 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 9 Jul 2025 14:04:29 +0200
Subject: [PATCH 3/9] chore(lime-theme): remove unnecessary use of mixins

The `_theme-color-variables.scss` file is used in two places:
1. `lime-theme.scss` (which is imported by MDC-using components)
2. `core-styles.scss` (which is imported globally)

Both files include the same `mixin` `theme-color-variables.theme-color-variables`
on the `:root` or `:host` level. `core-styles.scss` is imported globally and already
includes the theme variables at the `:root` level. While `lime-theme.scss` is
imported into some individual components that use MDC and
includes the same theme variables on the `:host` level.

Since the theme variables are already defined at the `:root` level in `core-styles.scss`,
they should be available throughout the entire application.
Therefore, including in all components. The duplication is unnecessary.
---
 src/style/internal/lime-theme.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/style/internal/lime-theme.scss b/src/style/internal/lime-theme.scss
index 0fc62f7266..990ebc8ae3 100644
--- a/src/style/internal/lime-theme.scss
+++ b/src/style/internal/lime-theme.scss
@@ -7,9 +7,4 @@
  * Avoid that unless there's very good reason for it!
  */
 
-@use '../_theme-color-variables';
 @use './lime-typography';
-
-:host {
-    @include theme-color-variables.theme-color-variables;
-}

From 16c79a08abde197f9bf3f93a712121873602f503 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 30 Jul 2025 11:59:58 +0200
Subject: [PATCH 4/9] refactor(components): ensure accent colors & and theming
 does not rely on MDC styles

Many of our components use MDC's custom CSS properties
such as `--mdc-theme-primary` to render their styles properly.
This is while we have had an undocumented property called
`--lime-primary-color` which was intended to be used for theming.
Due to our implementation and  some spaghetti code, our own props
worked inconsistently. So even we used MDC's props for styling
our components.
---
 .../action-bar-item/action-bar-item.scss      |  5 +-
 src/components/button-group/button-group.scss |  4 +-
 src/components/button/button.scss             | 15 ++--
 src/components/checkbox/checkbox.scss         | 11 ++-
 src/components/checkbox/checkbox.template.tsx |  2 +-
 src/components/chip-set/chip-set.scss         |  2 +-
 src/components/chip/chip.scss                 |  2 +-
 .../circular-progress/circular-progress.scss  |  5 +-
 .../collapsible-section.scss                  |  2 +-
 .../flatpickr-adapter/flatpickr-adapter.scss  | 34 ++++++---
 src/components/dialog/dialog.scss             |  2 +-
 .../dynamic-label/dynamic-label.scss          |  2 +-
 src/components/file/file.scss                 |  2 +-
 src/components/form/form.scss                 |  7 +-
 src/components/form/row/row.scss              |  4 +-
 src/components/helper-line/helper-line.scss   |  2 +-
 src/components/icon-button/icon-button.scss   |  2 +-
 .../linear-progress/linear-progress.scss      | 10 ++-
 src/components/list/list.scss                 | 18 ++++-
 .../list/partial-styles/_static-actions.scss  |  4 +-
 .../notched-outline/notched-outline.scss      |  8 +-
 .../progress-flow-item.scss                   |  4 +-
 src/components/select/select.scss             |  7 +-
 .../slider/partial-styles/_readonly.scss      | 10 ++-
 .../slider/partial-styles/_thumb.scss         | 10 ++-
 .../partial-styles/percentage-color.scss      | 24 +++---
 src/components/slider/slider.scss             | 25 +++++++
 src/components/snackbar/snackbar.scss         |  6 +-
 src/components/split-button/split-button.scss |  8 +-
 src/components/switch/switch.scss             | 22 ++++--
 src/components/switch/switch.tsx              |  2 +-
 src/components/tab-bar/tab-bar.scss           |  6 +-
 .../tabulator-custom-styles.scss              |  2 +-
 .../partial-styles/tabulator-paginator.scss   |  8 +-
 src/components/table/table.scss               |  7 +-
 .../plugins/image/view.scss                   | 10 ++-
 src/style/_theme-color-variables.scss         | 74 +++++++++++--------
 src/style/internal/codemirror-tooltip.scss    |  7 +-
 .../internal/shared_input-select-picker.scss  | 12 ++-
 src/style/mixins.scss                         | 20 ++---
 src/style/shadows.scss                        |  3 +-
 41 files changed, 277 insertions(+), 133 deletions(-)

diff --git a/src/components/action-bar/action-bar-item/action-bar-item.scss b/src/components/action-bar/action-bar-item/action-bar-item.scss
index 68198188ad..776d847019 100644
--- a/src/components/action-bar/action-bar-item/action-bar-item.scss
+++ b/src/components/action-bar/action-bar-item/action-bar-item.scss
@@ -55,7 +55,10 @@ button {
         &:not(:hover) {
             box-shadow: var(--button-shadow-inset);
         }
-        color: var(--mdc-theme-primary) !important;
+        color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        ) !important;
     }
 }
 
diff --git a/src/components/button-group/button-group.scss b/src/components/button-group/button-group.scss
index cca2db5b92..5f7a373728 100644
--- a/src/components/button-group/button-group.scss
+++ b/src/components/button-group/button-group.scss
@@ -96,7 +96,7 @@
             // which gets focused, which is inside this element…
             // and we are removing or hiding the visual appearance of the button
             outline: none;
-            color: var(--mdc-theme-primary);
+            color: var(--lime-primary-color, var(--limel-theme-primary-color));
         }
 
         &:only-child {
@@ -113,7 +113,7 @@
     }
 
     &.mdc-chip--selected {
-        background-color: var(--mdc-theme-surface);
+        background-color: var(--limel-theme-surface-background-color);
         box-shadow: var(--button-shadow-inset);
 
         &:active {
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index e9dca5f49f..575df59b99 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -56,10 +56,13 @@ button {
 
     :host(limel-button[primary]) & {
         &:not(:disabled) {
-            color: var(--mdc-theme-on-primary, rgb(var(--color-white)));
+            color: var(
+                --lime-on-primary-color,
+                var(--limel-theme-on-primary-color)
+            );
             background-color: var(
-                --mdc-theme-primary,
-                rgb(var(--color-teal-default))
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
             );
         }
         &:disabled {
@@ -69,7 +72,7 @@ button {
 
     :host(limel-button:not([primary])) & {
         &:not(:disabled) {
-            color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));
+            color: var(--lime-primary-color, var(--limel-theme-primary-color));
         }
         &:disabled {
             color: rgba(var(--contrast-1600), 0.37);
@@ -137,13 +140,13 @@ svg {
 }
 
 .just-failed {
-    background-color: var(--lime-error-text-color) !important;
+    background-color: var(--limel-theme-error-color) !important;
     animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
 .outlined {
     border: 1px solid;
-    border-color: var(--mdc-theme-primary);
+    border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 
 @keyframes shake {
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index d35fde24b4..4511a20952 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -8,7 +8,10 @@
 
 @mixin custom-checkbox-styles {
     // This is used in other components too, such as `limel-list`
-    --mdc-checkbox-checked-color: var(--mdc-theme-primary);
+    --mdc-checkbox-checked-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
     --mdc-checkbox-unchecked-color: var(
         --checkbox-unchecked-border-color,
         rgb(var(--contrast-900))
@@ -59,7 +62,7 @@ limel-dynamic-label {
                     :indeterminate
                 )
                 ~ .mdc-checkbox__background {
-                border-color: var(--lime-error-text-color);
+                border-color: var(--limel-theme-error-color);
             }
         }
         .mdc-checkbox__native-control {
@@ -89,13 +92,15 @@ limel-dynamic-label {
         padding-top: 0.75rem;
         padding-left: 0;
 
+        color: var(--limel-theme-text-primary-on-background-color);
+
         &.mdc-checkbox--required::after {
             margin-left: 0.0625rem;
             content: '*';
         }
 
         &.mdc-checkbox--invalid {
-            color: var(--lime-error-text-color);
+            color: var(--limel-theme-error-text-color);
         }
     }
 }
diff --git a/src/components/checkbox/checkbox.template.tsx b/src/components/checkbox/checkbox.template.tsx
index 874369d515..94e2d993ca 100644
--- a/src/components/checkbox/checkbox.template.tsx
+++ b/src/components/checkbox/checkbox.template.tsx
@@ -26,7 +26,7 @@ export const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (
         if (props.checked) {
             icon = {
                 name: 'ok',
-                color: 'var(--mdc-theme-primary)',
+                color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
             };
         }
 
diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
index 457b402b3e..6f0336e479 100644
--- a/src/components/chip-set/chip-set.scss
+++ b/src/components/chip-set/chip-set.scss
@@ -159,7 +159,7 @@ $leading-icon-space: 1.5rem;
 .delimiter {
     opacity: 0.5;
     padding: 0 functions.pxToRem(2);
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
 }
 
 limel-chip {
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
index a54482525c..c9bfbb8096 100644
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -109,7 +109,7 @@
         }
     }
     .text {
-        color: var(--mdc-theme-primary);
+        color: var(--lime-primary-color, var(--limel-theme-primary-color));
     }
 }
 
diff --git a/src/components/circular-progress/circular-progress.scss b/src/components/circular-progress/circular-progress.scss
index 66455608fb..04de2a34c0 100644
--- a/src/components/circular-progress/circular-progress.scss
+++ b/src/components/circular-progress/circular-progress.scss
@@ -50,7 +50,10 @@
 
 .lime-circular-progress {
     --size: var(--circular-progress-size, 3rem);
-    --fill-color: var(--circular-progress-fill-color, var(--mdc-theme-primary));
+    --fill-color: var(
+        --circular-progress-fill-color,
+        var(--lime-primary-color, var(--limel-theme-primary-color))
+    );
     --track-color: var(
         --circular-progress-track-color,
         rgb(var(--contrast-400))
diff --git a/src/components/collapsible-section/collapsible-section.scss b/src/components/collapsible-section/collapsible-section.scss
index 4464f4cf4f..991365aea1 100644
--- a/src/components/collapsible-section/collapsible-section.scss
+++ b/src/components/collapsible-section/collapsible-section.scss
@@ -101,7 +101,7 @@ limel-icon {
 .title {
     font-size: 1rem;
     font-weight: 300;
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
 
     justify-self: flex-start;
 
diff --git a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
index 50ac97eb26..ac45c9af83 100644
--- a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
+++ b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
@@ -84,19 +84,32 @@ svg {
     &.endRange,
     &.inRange,
     &.selected:hover {
-        border-color: var(--mdc-theme-primary);
-        color: var(--mdc-theme-on-primary);
-        background: var(--mdc-theme-primary);
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+        color: var(
+            --lime-on-primary-color,
+            var(--limel-theme-on-primary-color)
+        );
+        background: var(--lime-primary-color, var(--limel-theme-primary-color));
     }
 
     &.today {
-        border-color: var(--mdc-theme-on-primary);
-        box-shadow: 0 0 0 0.125rem var(--mdc-theme-primary);
+        border-color: var(
+            --lime-on-primary-color,
+            var(--limel-theme-on-primary-color)
+        );
+        box-shadow: 0 0 0 0.125rem
+            var(--lime-primary-color, var(--limel-theme-primary-color));
 
         &:hover {
             &:not(.selected) {
                 background-color: transparent;
-                color: var(--mdc-theme-primary);
+                color: var(
+                    --lime-primary-color,
+                    var(--limel-theme-primary-color)
+                );
             }
             &:before {
                 top: -60%;
@@ -139,7 +152,7 @@ svg {
     border-top: 1px solid rgb(var(--contrast-400));
 
     input {
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
     }
 
     input,
@@ -274,8 +287,11 @@ svg {
     text-align: center;
 
     &.selected {
-        color: var(--mdc-theme-on-primary);
-        background: var(--mdc-theme-primary);
+        color: var(
+            --lime-on-primary-color,
+            var(--limel-theme-on-primary-color)
+        );
+        background: var(--lime-primary-color, var(--limel-theme-primary-color));
     }
 }
 
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 346a8beb24..d2cf827e89 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -91,7 +91,7 @@ $responsive-body-padding: 3vw; // 3% of viewport's width
         );
         @include mixins.fade-out-overflowed-content-on-edges(vertically);
 
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
         padding-left: var(
             --dialog-padding-left-right,
             min(1.25rem, $responsive-body-padding)
diff --git a/src/components/dynamic-label/dynamic-label.scss b/src/components/dynamic-label/dynamic-label.scss
index fa9e8e734d..51ef194927 100644
--- a/src/components/dynamic-label/dynamic-label.scss
+++ b/src/components/dynamic-label/dynamic-label.scss
@@ -26,6 +26,6 @@ label {
     flex-grow: 1;
     font-size: 0.8125rem; // `13px`, Like Checkbox & Switch
     line-height: normal;
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
     padding-top: 0.375rem;
 }
diff --git a/src/components/file/file.scss b/src/components/file/file.scss
index f81bde161f..e4f204b82e 100644
--- a/src/components/file/file.scss
+++ b/src/components/file/file.scss
@@ -35,7 +35,7 @@
 
     .tip {
         font-size: smaller;
-        color: var(--mdc-theme-text-secondary-on-background);
+        color: var(--limel-theme-text-secondary-on-background-color);
 
         // Below tries to render text in two lines,
         // and then truncate if there is no more space
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
index 035fecea61..0d7411c365 100644
--- a/src/components/form/form.scss
+++ b/src/components/form/form.scss
@@ -150,7 +150,7 @@ limel-code-editor {
 }
 
 .form-error {
-    color: var(--mdc-theme-error, #b00020);
+    color: var(--limel-theme-error-color);
     font-size: 0.6875rem;
     line-height: 1.5;
     visibility: inherit;
@@ -217,7 +217,10 @@ limel-code-editor {
                 margin: auto;
                 left: -0.75rem;
 
-                background-color: var(--mdc-theme-primary);
+                background-color: var(
+                    --lime-primary-color,
+                    var(--limel-theme-primary-color)
+                );
                 width: 0.125rem;
                 height: var(--mdc-typography-headline1-line-height);
                 border-radius: 0.125rem;
diff --git a/src/components/form/row/row.scss b/src/components/form/row/row.scss
index d059389ac4..d748c4d10c 100644
--- a/src/components/form/row/row.scss
+++ b/src/components/form/row/row.scss
@@ -74,13 +74,13 @@
         font-weight: normal;
 
         flex-grow: 1;
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
         font-size: var(--mdc-typography-subtitle1-font-size, 0.875rem);
     }
 
     .description {
         margin: 0;
-        color: var(--mdc-theme-text-secondary-on-background);
+        color: var(--limel-theme-text-secondary-on-background-color);
         font-size: var(--mdc-typography-body2-font-size, 0.8125rem);
         line-height: 1.5;
     }
diff --git a/src/components/helper-line/helper-line.scss b/src/components/helper-line/helper-line.scss
index a1003c5d2c..81edc5438c 100644
--- a/src/components/helper-line/helper-line.scss
+++ b/src/components/helper-line/helper-line.scss
@@ -27,7 +27,7 @@ div {
     --limel-h-l-grid-template-rows: 1fr;
 
     .helper-text {
-        color: var(--mdc-theme-error);
+        color: var(--limel-theme-error-color);
     }
 }
 
diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
index 95d86a7bf0..098d7dca6e 100644
--- a/src/components/icon-button/icon-button.scss
+++ b/src/components/icon-button/icon-button.scss
@@ -30,7 +30,7 @@ button {
     &:disabled {
         cursor: not-allowed;
 
-        color: var(--mdc-theme-text-disabled-on-background);
+        color: var(--limel-theme-text-disabled-on-background-color);
     }
 }
 
diff --git a/src/components/linear-progress/linear-progress.scss b/src/components/linear-progress/linear-progress.scss
index e3da8dc261..1bac882a11 100644
--- a/src/components/linear-progress/linear-progress.scss
+++ b/src/components/linear-progress/linear-progress.scss
@@ -22,7 +22,10 @@
     width: var(--percentage, 0%);
 
     border-radius: 0.25rem;
-    background-color: var(--mdc-theme-primary);
+    background-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
 }
 
 :host(limel-linear-progress[indeterminate]) {
@@ -39,7 +42,10 @@
             height: 100%;
             border-radius: 0.25rem;
             opacity: 0;
-            background-color: var(--mdc-theme-primary);
+            background-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
         }
 
         &:before {
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index f87ae83470..98daf62b01 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -44,6 +44,19 @@ $list-mdc-list-item: 0;
     // other font-related styles that might be set by MDC,
     // such as `letter-spacing` or `font-size`.
     font-family: inherit;
+    color: var(--limel-theme-text-primary-on-background-color);
+}
+
+.mdc-deprecated-list-item__secondary-text {
+    opacity: 0.6;
+}
+
+.mdc-deprecated-list-item--disabled {
+    .mdc-deprecated-list-item__text,
+    .mdc-deprecated-list-item__primary-text,
+    .mdc-deprecated-list-item__secondary-text {
+        color: var(--limel-theme-text-disabled-on-background-color);
+    }
 }
 
 .mdc-deprecated-list {
@@ -240,7 +253,10 @@ $list-mdc-list-item: 0;
 
 .mdc-deprecated-list-item.mdc-deprecated-list-item--selected {
     &:before {
-        background-color: var(--mdc-theme-primary);
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
         opacity: 0.15;
     }
 }
diff --git a/src/components/list/partial-styles/_static-actions.scss b/src/components/list/partial-styles/_static-actions.scss
index 64a3119baf..100c6b7e55 100644
--- a/src/components/list/partial-styles/_static-actions.scss
+++ b/src/components/list/partial-styles/_static-actions.scss
@@ -2,13 +2,13 @@
 
 :host(.static-actions-list) {
     z-index: $list-static-actions-list;
-    background-color: var(--mdc-theme-surface);
+    background-color: var(--limel-theme-surface-background-color);
 }
 
 :host(.has-position-sticky) {
     position: sticky;
     box-shadow: 0 0 functions.pxToRem(12) functions.pxToRem(8)
-        var(--mdc-theme-surface);
+        var(--limel-theme-surface-background-color);
 }
 
 :host(.has-position-sticky.is-on-top) {
diff --git a/src/components/notched-outline/notched-outline.scss b/src/components/notched-outline/notched-outline.scss
index e6bbfd4e5a..052f26713a 100644
--- a/src/components/notched-outline/notched-outline.scss
+++ b/src/components/notched-outline/notched-outline.scss
@@ -177,10 +177,12 @@ limel-notched-outline {
 
     &[invalid]:not([invalid='false']) {
         &:not([disabled]:not([disabled='false'])) {
-            --limel-notched-outline-border-color: var(--lime-error-text-color);
+            --limel-notched-outline-border-color: var(
+                --limel-theme-error-text-color
+            );
             &:hover {
                 --limel-notched-outline-border-color: var(
-                    --lime-error-text-color
+                    --limel-theme-error-color
                 );
             }
         }
@@ -188,7 +190,7 @@ limel-notched-outline {
         .limel-notched-outline--notch {
             label {
                 &:after {
-                    color: var(--lime-error-text-color);
+                    color: var(--limel-theme-error-text-color);
                 }
             }
         }
diff --git a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
index b151022da3..ade0e97802 100644
--- a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
+++ b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
@@ -12,7 +12,7 @@ $limel-progress-flow-divider: 1;
     );
     --step-background--selected: var(
         --progress-flow-step-background-color--selected,
-        var(--mdc-theme-primary)
+        var(--lime-primary-color, var(--limel-theme-primary-color))
     );
     --step-background--passed: var(
         --progress-flow-step-background-color--passed,
@@ -25,7 +25,7 @@ $limel-progress-flow-divider: 1;
     );
     --step-text--selected: var(
         --progress-flow-step-text-color--selected,
-        var(--mdc-theme-on-primary)
+        var(--lime-on-primary-color, var(--limel-theme-on-primary-color))
     );
     --step-text--passed: var(
         --progress-flow-step-text-color--passed,
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 9562ed8cc3..6ad1d3ecaa 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -127,7 +127,10 @@ limel-notched-outline:not([invalid]:not([invalid='false'])) {
 
                 .mdc-select__dropdown-icon {
                     svg {
-                        fill: var(--mdc-theme-primary);
+                        fill: var(
+                            --lime-primary-color,
+                            var(--limel-theme-primary-color)
+                        );
                     }
                 }
 
@@ -146,7 +149,7 @@ limel-notched-outline:not([invalid]:not([invalid='false'])) {
     &.limel-select--invalid {
         .limel-select__selected-option__text,
         .invalid-icon {
-            color: var(--lime-error-text-color);
+            color: var(--limel-theme-error-text-color);
         }
     }
 }
diff --git a/src/components/slider/partial-styles/_readonly.scss b/src/components/slider/partial-styles/_readonly.scss
index 5ddeb5ea01..afce4aa21f 100644
--- a/src/components/slider/partial-styles/_readonly.scss
+++ b/src/components/slider/partial-styles/_readonly.scss
@@ -28,11 +28,17 @@
 
         .mdc-slider__track--active_fill,
         .mdc-slider__thumb-knob {
-            background-color: var(--mdc-theme-primary);
+            background-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
         }
 
         .mdc-slider__track--active_fill {
-            border-color: var(--mdc-theme-primary);
+            border-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
         }
     }
 }
diff --git a/src/components/slider/partial-styles/_thumb.scss b/src/components/slider/partial-styles/_thumb.scss
index 3751900095..d48a1342ab 100644
--- a/src/components/slider/partial-styles/_thumb.scss
+++ b/src/components/slider/partial-styles/_thumb.scss
@@ -70,7 +70,10 @@
             box-shadow: var(--shadow-depth-16);
 
             &:before {
-                border-top-color: var(--mdc-theme-primary);
+                border-top-color: var(
+                    --lime-primary-color,
+                    var(--limel-theme-primary-color)
+                );
             }
         }
     }
@@ -85,6 +88,9 @@
 .mdc-slider__value-indicator {
     .mdc-slider:not(.mdc-slider--disabled) &,
     :host(limel-slider[readonly]) & {
-        background-color: var(--mdc-theme-primary);
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
     }
 }
diff --git a/src/components/slider/partial-styles/percentage-color.scss b/src/components/slider/partial-styles/percentage-color.scss
index 335484e805..0a3b4af266 100644
--- a/src/components/slider/partial-styles/percentage-color.scss
+++ b/src/components/slider/partial-styles/percentage-color.scss
@@ -5,41 +5,41 @@
 }
 
 :host(.displays-percentage-colors[readonly]) {
-    --mdc-theme-on-surface: var(--mdc-theme-primary);
+    --mdc-theme-on-surface: var(--lime-primary-color);
 }
 
 :host(.displays-percentage-colors.percent-0) {
-    --mdc-theme-primary: var(--color-percent--0);
+    --lime-primary-color: var(--color-percent--0);
 }
 :host(.displays-percentage-colors.percent-0-10) {
-    --mdc-theme-primary: var(--color-percent--0to10);
+    --lime-primary-color: var(--color-percent--0to10);
 }
 :host(.displays-percentage-colors.percent-10-20) {
-    --mdc-theme-primary: var(--color-percent--10to20);
+    --lime-primary-color: var(--color-percent--10to20);
 }
 :host(.displays-percentage-colors.percent-20-30) {
-    --mdc-theme-primary: var(--color-percent--20to30);
+    --lime-primary-color: var(--color-percent--20to30);
 }
 :host(.displays-percentage-colors.percent-30-40) {
-    --mdc-theme-primary: var(--color-percent--30to40);
+    --lime-primary-color: var(--color-percent--30to40);
 }
 :host(.displays-percentage-colors.percent-40-50) {
-    --mdc-theme-primary: var(--color-percent--40to50);
+    --lime-primary-color: var(--color-percent--40to50);
 }
 :host(.displays-percentage-colors.percent-50-60) {
-    --mdc-theme-primary: var(--color-percent--50to60);
+    --lime-primary-color: var(--color-percent--50to60);
 }
 :host(.displays-percentage-colors.percent-60-70) {
-    --mdc-theme-primary: var(--color-percent--60to70);
+    --lime-primary-color: var(--color-percent--60to70);
 }
 :host(.displays-percentage-colors.percent-70-80) {
-    --mdc-theme-primary: var(--color-percent--70to80);
+    --lime-primary-color: var(--color-percent--70to80);
 }
 :host(.displays-percentage-colors.percent-80-90) {
-    --mdc-theme-primary: var(--color-percent--80to90);
+    --lime-primary-color: var(--color-percent--80to90);
 }
 :host(.displays-percentage-colors.percent-90-100) {
-    --mdc-theme-primary: var(--color-percent--90to100);
+    --lime-primary-color: var(--color-percent--90to100);
 }
 :host(.displays-percentage-colors.percent-30-40),
 :host(.displays-percentage-colors.percent-40-50),
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index b708924187..35638fe90d 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -34,6 +34,31 @@ div[slot='content'] {
 .mdc-slider {
     height: shared_input-select-picker.$height-of-mdc-text-field;
     margin: 0 0.75rem;
+
+    .mdc-slider__track--inactive {
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .mdc-slider__track--active_fill {
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .mdc-slider__thumb-knob {
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
 }
 
 .mdc-slider .mdc-slider__value-indicator-text {
diff --git a/src/components/snackbar/snackbar.scss b/src/components/snackbar/snackbar.scss
index 2df4701bb7..135c25611b 100644
--- a/src/components/snackbar/snackbar.scss
+++ b/src/components/snackbar/snackbar.scss
@@ -75,9 +75,11 @@ aside {
 }
 
 .dismiss {
-    --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon
+    --limel-theme-on-surface-color: rgb(
+        var(--contrast-100)
+    ); // color of the X icon
     --icon-background-color: var(--lime-elevated-surface-background-color);
-    --fill-color: var(--mdc-theme-primary);
+    --fill-color: var(--lime-primary-color, var(--limel-theme-primary-color));
     --track-color: rgb(var(--contrast-800), 0.2);
     transition:
         opacity 0.1s ease,
diff --git a/src/components/split-button/split-button.scss b/src/components/split-button/split-button.scss
index 2d1a931e59..86a0ab93cf 100644
--- a/src/components/split-button/split-button.scss
+++ b/src/components/split-button/split-button.scss
@@ -42,14 +42,14 @@ limel-menu {
 
     &:not([disabled]) {
         color: var(
-            --mdc-theme-primary,
-            rgb(var(--color-teal-default))
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
         ); // similar to limel-button text
 
         &.primary {
             color: var(
-                --mdc-theme-on-primary,
-                rgb(var(--color-white))
+                --lime-on-primary-color,
+                var(--limel-theme-on-primary-color)
             ); // similar to limel-button text
         }
     }
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index 0f1f2b77bf..08cb26b3dd 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -57,10 +57,22 @@ $scale-factor: 0.8;
     --mdc-switch-unselected-focus-track-color: rgb(var(--contrast-800));
     --mdc-switch-unselected-pressed-track-color: rgb(var(--contrast-800));
     --mdc-switch-unselected-hover-track-color: rgb(var(--contrast-800));
-    --mdc-switch-selected-focus-track-color: var(--mdc-theme-primary);
-    --mdc-switch-selected-pressed-track-color: var(--mdc-theme-primary);
-    --mdc-switch-selected-track-color: var(--mdc-theme-primary);
-    --mdc-switch-selected-hover-track-color: var(--mdc-theme-primary);
+    --mdc-switch-selected-focus-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
+    --mdc-switch-selected-pressed-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
+    --mdc-switch-selected-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
+    --mdc-switch-selected-hover-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
 
     --mdc-switch-handle-elevation: var(--button-shadow-normal);
     --mdc-switch-disabled-track-opacity: 0.4;
@@ -78,7 +90,7 @@ $scale-factor: 0.8;
 
 label {
     @include lime-typography.typography(body2);
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
     padding-top: 0.375rem;
     line-height: normal;
     letter-spacing: normal;
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 04e07b37c0..d03beb66ea 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -138,7 +138,7 @@ export class Switch {
             if (this.value) {
                 icon = {
                     name: 'ok',
-                    color: 'var(--mdc-theme-primary)',
+                    color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
                 };
             }
 
diff --git a/src/components/tab-bar/tab-bar.scss b/src/components/tab-bar/tab-bar.scss
index c9705f8c3b..4acf28dd73 100644
--- a/src/components/tab-bar/tab-bar.scss
+++ b/src/components/tab-bar/tab-bar.scss
@@ -147,16 +147,16 @@ $tab-separator-background-color: rgb(var(--contrast-600));
     .mdc-tab__text-label {
         transition: color 0.2s ease;
         padding-left: 0 !important;
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
     }
     &:hover {
         .mdc-tab__text-label {
-            color: var(--mdc-theme-text-primary-on-background);
+            color: var(--limel-theme-text-primary-on-background-color);
         }
     }
     &.mdc-tab--active {
         .mdc-tab__text-label {
-            color: var(--mdc-theme-primary);
+            color: var(--lime-primary-color, var(--limel-theme-primary-color));
         }
     }
 }
diff --git a/src/components/table/partial-styles/tabulator-custom-styles.scss b/src/components/table/partial-styles/tabulator-custom-styles.scss
index da6c2a3464..1d8980da95 100644
--- a/src/components/table/partial-styles/tabulator-custom-styles.scss
+++ b/src/components/table/partial-styles/tabulator-custom-styles.scss
@@ -54,7 +54,7 @@
                 z-index: $table--has-interactive-rows--selectable-row--hover + 1;
                 inset: 0 0 auto 0;
                 border: $width-of-selected-row-indicator solid
-                    var(--mdc-theme-primary);
+                    var(--lime-primary-color, var(--limel-theme-primary-color));
                 border-radius: 1rem;
                 margin-right: -$width-of-selected-row-indicator * 2;
             }
diff --git a/src/components/table/partial-styles/tabulator-paginator.scss b/src/components/table/partial-styles/tabulator-paginator.scss
index 6a5dd54f9e..1682f47136 100644
--- a/src/components/table/partial-styles/tabulator-paginator.scss
+++ b/src/components/table/partial-styles/tabulator-paginator.scss
@@ -37,7 +37,9 @@
                 background-color: transparent; // has to be here, otherwise disabled buttons will also get a background
 
                 &.active {
-                    background-color: var(--mdc-theme-surface);
+                    background-color: var(
+                        --limel-theme-surface-background-color
+                    );
                     box-shadow: var(--button-shadow-inset);
                 }
 
@@ -80,7 +82,7 @@ button.tabulator-page {
                 style: solid;
                 color: transparent;
                 width: 0.25rem 0 0.25rem 0.4rem;
-                left-color: var(--mdc-theme-on-surface);
+                left-color: var(--limel-theme-on-surface-color);
             }
         }
     }
@@ -90,7 +92,7 @@ button.tabulator-page {
         &:before {
             height: 0.5rem;
             width: 0.125rem;
-            background-color: var(--mdc-theme-on-surface);
+            background-color: var(--limel-theme-on-surface-color);
         }
     }
 
diff --git a/src/components/table/table.scss b/src/components/table/table.scss
index 4024b0a6a1..8eda581c16 100644
--- a/src/components/table/table.scss
+++ b/src/components/table/table.scss
@@ -27,9 +27,12 @@ $height-of-aggregations-row: 1.5rem;
     --table-row-background-color--active: var(--contrast-300);
 
     --table-arrow-color: var(--contrast-800);
-    --table-arrow-color--active: var(--mdc-theme-primary);
+    --table-arrow-color--active: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
 
-    --table-text-color: var(--mdc-theme-text-primary-on-background);
+    --table-text-color: var(--limel-theme-text-primary-on-background-color);
     --limel-chip-size: 1.25rem;
 }
 
diff --git a/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss b/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
index 928e16e0c0..983dcd85f8 100644
--- a/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
+++ b/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
@@ -64,7 +64,10 @@
 
     &:has(.resize-handle[aria-grabbed='true']) {
         &::before {
-            border-color: var(--mdc-theme-primary);
+            border-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
             opacity: 0.8;
             box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);
         }
@@ -115,7 +118,10 @@
     &:hover,
     &:focus-visible {
         opacity: 1;
-        background-color: var(--mdc-theme-primary);
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
     }
 
     &:hover,
diff --git a/src/style/_theme-color-variables.scss b/src/style/_theme-color-variables.scss
index d6dfb7a281..feaa95dbe6 100644
--- a/src/style/_theme-color-variables.scss
+++ b/src/style/_theme-color-variables.scss
@@ -1,43 +1,57 @@
 @mixin theme-color-variables() {
+    // ==========================
+    // We need to keep these custom css vars. Because they are unfortunately
+    // used by some consumers as theming or styling hacks.
     --mdc-theme-primary: var(
         --lime-primary-color,
-        rgb(var(--color-teal-default))
-    );
-    --mdc-theme-secondary: var(
-        --lime-secondary-color,
-        rgb(var(--contrast-1100))
+        var(--limel-theme-primary-color)
     );
     --mdc-theme-on-primary: var(
         --lime-on-primary-color,
-        rgb(var(--contrast-100))
-    );
-    --mdc-theme-on-secondary: var(
-        --lime-on-secondary-color,
-        rgb(var(--contrast-100))
+        var(--limel-theme-on-primary-color)
     );
     --mdc-theme-text-disabled-on-background: var(
-        --lime-text-disabled-on-background-color,
-        rgba(var(--contrast-1700), 0.38)
+        --limel-theme-text-disabled-on-background-color
     );
     --mdc-theme-text-primary-on-background: var(
-        --lime-text-primary-on-background-color,
-        rgba(var(--contrast-1700), 0.87)
+        --limel-theme-text-primary-on-background-color
     );
     --mdc-theme-text-secondary-on-background: var(
-        --lime-text-secondary-on-background-color,
-        rgba(var(--contrast-1700), 0.54)
-    );
-    --mdc-theme-error: var(
-        --lime-error-background-color,
-        rgb(var(--color-red-dark))
-    );
-    --lime-error-text-color: rgb(var(--color-red-darker));
-    --mdc-theme-surface: var(
-        --lime-surface-background-color,
-        rgb(var(--contrast-100))
-    );
-    --mdc-theme-on-surface: var(
-        --lime-on-surface-color,
-        rgb(var(--contrast-1500))
-    );
+        --limel-theme-text-secondary-on-background-color
+    );
+    --mdc-theme-surface: var(--limel-theme-surface-background-color);
+    --mdc-theme-on-surface: var(--limel-theme-on-surface-color);
+    // We keep them as safety, even though the consumer should
+    // be encouraged to follow our theming guidelines
+    // and use the publicly declared CSS custom props like
+    // `--lime-primary-color` or `--lime-on-primary-color` instead.
+    //
+    // The "secondary" colors have never been used in the Lime design system,
+    // so we keep them commented out.
+    // --mdc-theme-secondary: var(--limel-theme-secondary-color);
+    // --mdc-theme-on-secondary: var(--limel-theme-on-secondary-color);
+    // ==========================
+
+    --limel-theme-primary-color: rgb(var(--color-teal-default));
+    --limel-theme-on-primary-color: rgb(var(--contrast-100));
+    // We never use secondary colors,
+    // but we keep them just in case.
+    // --limel-theme-secondary-color: rgb(var(--contrast-1100));
+    // --limel-theme-on-secondary-color: rgb(var(--contrast-100));
+    --limel-theme-text-disabled-on-background-color: rgb(
+        var(--contrast-1700),
+        0.38
+    );
+    --limel-theme-text-primary-on-background-color: rgb(
+        var(--contrast-1700),
+        0.87
+    );
+    --limel-theme-text-secondary-on-background-color: rgb(
+        var(--contrast-1700),
+        0.54
+    );
+    --limel-theme-error-color: rgb(var(--color-red-dark));
+    --limel-theme-error-text-color: rgb(var(--color-red-darker));
+    --limel-theme-surface-background-color: rgb(var(--contrast-100));
+    --limel-theme-on-surface-color: rgb(var(--contrast-1500));
 }
diff --git a/src/style/internal/codemirror-tooltip.scss b/src/style/internal/codemirror-tooltip.scss
index f3651da70d..5ff5b9dc0c 100644
--- a/src/style/internal/codemirror-tooltip.scss
+++ b/src/style/internal/codemirror-tooltip.scss
@@ -4,8 +4,11 @@
     transition: opacity 0.4s ease 0s;
     opacity: 0;
 
-    color: var(--mdc-theme-text-primary-on-background);
-    background-color: var(--mdc-theme-on-primary);
+    color: var(--limel-theme-text-primary-on-background-color);
+    background-color: var(
+        --lime-on-primary-color,
+        var(--limel-theme-on-primary-color)
+    );
 
     font-family: monospace;
     font-size: 0.875rem; // 14px, like the default code editor's font size
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index 3111388c3b..d0a85f4530 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -10,7 +10,10 @@
 
 $lime-text-field-outline-color: rgba(var(--contrast-700), 0.65);
 $lime-text-field-outline-color--hovered: rgba(var(--contrast-700), 1);
-$lime-text-field-outline-color--focused: var(--mdc-theme-primary);
+$lime-text-field-outline-color--focused: var(
+    --lime-primary-color,
+    var(--limel-theme-primary-color)
+);
 
 $background-color-normal: rgba(var(--contrast-200), 0.5);
 $background-color-hovered: rgba(var(--contrast-200), 1);
@@ -240,7 +243,8 @@ $cropped-label-hack--font-size: 0.875rem; //14px
             }
 
             &:focus-visible {
-                box-shadow: 0 0 0 functions.pxToRem(2) var(--mdc-theme-primary) !important; // has to be `!important` since we're using `box-shadow` insted of `outline` which is also used in `hover` mode
+                box-shadow: 0 0 0 functions.pxToRem(2)
+                    var(--lime-primary-color, var(--limel-theme-primary-color)) !important; // has to be `!important` since we're using `box-shadow` insted of `outline` which is also used in `hover` mode
             }
         }
         &:not(.mdc-text-field--disabled):hover {
@@ -262,7 +266,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
         &.mdc-text-field--invalid {
             i.mdc-text-field__icon.invalid-icon {
                 limel-icon {
-                    color: var(--lime-error-text-color);
+                    color: var(--limel-theme-error-text-color);
                 }
             }
         }
@@ -301,7 +305,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
         &.mdc-text-field--invalid {
             & + .mdc-text-field-helper-line {
                 .mdc-text-field-helper-text--validation-msg {
-                    color: var(--lime-error-text-color);
+                    color: var(--limel-theme-error-text-color);
                 }
             }
         }
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index 4a0d32d559..af91f2cb36 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -72,8 +72,8 @@ $clickable-normal-state-transitions: (
 );
 
 @mixin is-elevated-clickable(
-    $color: var(--mdc-theme-on-surface),
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
@@ -116,11 +116,11 @@ $clickable-normal-state-transitions: (
 }
 
 @mixin is-elevated-inset-clickable(
-    $color: var(--mdc-theme-on-surface),
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color),
-    $background-color--inset: var(--mdc-theme-surface)
+    $background-color--inset: var(--limel-theme-surface-background-color)
 ) {
     transition: $clickable-normal-state-transitions;
 
@@ -162,9 +162,9 @@ $clickable-normal-state-transitions: (
 }
 
 @mixin is-flat-clickable(
-    $color: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
     $background-color: transparent,
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
     transition: $clickable-normal-state-transitions;
@@ -205,11 +205,11 @@ $clickable-normal-state-transitions: (
 }
 
 @mixin is-flat-inset-clickable(
-    $color: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
     $background-color: transparent,
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color),
-    $background-color--inset: var(--mdc-theme-surface)
+    $background-color--inset: var(--limel-theme-surface-background-color)
 ) {
     transition: $clickable-normal-state-transitions;
 
diff --git a/src/style/shadows.scss b/src/style/shadows.scss
index abf736bd54..33ddbdee32 100644
--- a/src/style/shadows.scss
+++ b/src/style/shadows.scss
@@ -8,7 +8,8 @@
 
     // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
-    --shadow-focused-state: 0 0 0 0.125rem var(--mdc-theme-primary);
+    --shadow-focused-state: 0 0 0 0.125rem
+        var(--lime-primary-color, var(--limel-theme-primary-color));
 
     // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.

From 44e931fbc6c740686ed67b027ec6e6deba83d7be Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 30 Jul 2025 12:03:55 +0200
Subject: [PATCH 5/9] docs(theming): add docs about how to theme Lime Elements

---
 guides.ts      |   2 +-
 src/theming.md | 108 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 src/theming.md

diff --git a/guides.ts b/guides.ts
index 89fa6e8bed..9acfeed36c 100644
--- a/guides.ts
+++ b/guides.ts
@@ -3,7 +3,7 @@ import { Guide } from 'kompendium';
 export default [
     {
         name: 'Home',
-        children: ['src/contributing.md', 'src/events.md'],
+        children: ['src/contributing.md', 'src/events.md', 'src/theming.md'],
     },
     {
         name: 'DesignGuidelines',
diff --git a/src/theming.md b/src/theming.md
new file mode 100644
index 0000000000..53fe16b76d
--- /dev/null
+++ b/src/theming.md
@@ -0,0 +1,108 @@
+# Theming
+
+Lime Elements is relatively restrictive about the look and feel of the components. For instance, consumers cannot apply custom spaces around internal elements, change border radiuses, or size of the visual details.
+
+However, you still have lots of theming possibilities, such as setting your desired font, controlling colors on component level, and setting a global accent color.
+
+## Setting desired font family
+
+To achieve a blazing fast rendering, our components' user interface utilizes a default cross-browser sans-serif font stack.
+
+Lime Element is by default font agnostic, and basically relies on the inbuilt font of user's device. So there is no need for the users to download any fonts, while loading Lime Elements on their device.
+
+This also means that the UI would look slightly different on iOS, Android, Windows, Linux, etc… as they all have their own default system UI font.
+
+However, you can easily set your own desired font family. As web components typically inherit font-related styles such as `font-family`, `font-size`, and `color`, we recommend defining these styles at a higher level, such as the `<body>` element.
+
+If you use other libraries in combination with Lime Elements in your project, to maintain consistency with the look & feel demonstrated in this documentation, we suggest incorporating the following styles into your project:
+
+```css
+font-family: ui-sans-serif, system-ui, sans-serif;
+font-size: 0.875rem;
+font-style: normal;
+font-weight: 400;
+color: rgb(var(--contrast-1500));
+```
+
+💡 About the `color` specified above, read more on [our color system](/#/DesignGuidelines/color-system.md/).
+
+Or if you want to customize the font-family and related styles to suit your project's needs, you might prefer a different typeface like below:
+
+```css
+font-family: 'Roboto', Arial, Verdana, sans-serif;
+```
+
+---
+
+## Setting an accent color
+
+An accent color is a distinctive color used throughout a user interface to highlight interactive elements, draw attention to important actions, and reinforce brand identity. In UI libraries, the accent color typically appears on:
+
+- Primary buttons and call-to-action elements
+- Active states of form controls (checkboxes, radio buttons, switches)
+- Progress indicators and loading states
+- Selected items in lists or menus
+- Focus indicators for keyboard navigation
+- Links and other clickable elements
+
+By setting a consistent accent color, you ensure visual cohesion across all components while maintaining your brand's color palette.
+
+To define an accent color, set the `--lime-primary-color` CSS custom property on the `<body>` element or at the `:root` level:
+
+:::note
+You may need to define `--lime-on-primary-color` alongside your primary color to ensure proper contrast and readability. In some component, this property controls the color of text, icons, and other elements that appear on top of your accent color.
+:::
+
+```css
+:root {
+    --lime-primary-color: rgb(var(--color-blue-dark)); /* Your brand color */
+    --lime-on-primary-color: rgb(
+        var(--color-gray-lighter)
+    ); /* Text/icons on primary color */
+}
+```
+
+### Color Selection Guidelines
+
+When choosing your accent color, consider these important factors:
+
+- **Light colors** (pastels, bright tones): Generally provide poor contrast and can harm readability, especially on light backgrounds. If you must use light colors, ensure you set a dark contrasting color for text and icons: `--lime-on-primary-color: rgb(var(--color-gray-darker))` or `--lime-on-primary-color: rgb(0, 0, 0)`
+
+- **Dark colors** (deep blues, charcoal, navy): Work well with light text and icons. Set: `--lime-on-primary-color: rgb(255, 255, 255)` or use our color token: `--lime-on-primary-color: rgb(var(--color-white))`
+
+- **Red and green tones**: Exercise caution when using these colors as accents. Users typically associate red with errors or warnings, and green for success or confirmation. Choose these colors thoughtfully to avoid confusing your users about the intended action or state.
+
+- **Accessibility**: Ensure your accent color meets WCAG contrast requirements (minimum 4.5:1 ratio) when paired with `--lime-on-primary-color`.
+
+### Example
+
+The examples below demonstrate the same button with different accent colors:
+
+_A button with our default primary color_
+
+<limel-example-button-primary />
+
+_A few buttons with customized colors_
+
+<limel-example-button-colors />
+
+---
+
+### Changing the global font size
+
+Lime Elements uses `rem` units for sizing properties, including font sizes, spacing, and component dimensions; based on the standard browser root rem`16px`. This approach provides several benefits:
+
+- **Scalability**: All components scale proportionally when the root font size changes
+- **Consistency**: Maintains proper relationships between text and UI elements at any scale
+- **Accessibility**: Respects user preferences for larger text sizes
+- **Responsive design**: Enables easy scaling across different screen sizes and contexts
+
+To adjust the size of all Lime Elements components and text, modify the root font size:
+
+```css
+html {
+    font-size: 18px; /* Makes 1rem = 18px instead of 16px */
+}
+```
+
+This change will proportionally scale all components while maintaining their visual relationships.

From 14ec7b045b6d706d8dd0a3cff394e6b7029b5617 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 9 Jul 2025 14:30:33 +0200
Subject: [PATCH 6/9] chore(components): remove imported `lime-theme` from
 several components styles

There doesn't seem to be anything that these components used from
the imported `lime-theme.scss` file. It seemed that the file only includes
some SASS variables (from us and from MDC), but none of them is used
in the actual files. Comparing the compiled version of a couple of component's
styles, I could see that the code was identical. Visual inspection also doesn't
show any difference, and there is no build problems. Therefore, I just removed
the imported file.
---
 src/components/badge/badge.scss                                 | 1 -
 src/components/banner/banner.scss                               | 1 -
 src/components/button/button.scss                               | 2 --
 src/components/checkbox/checkbox.scss                           | 1 -
 src/components/chip-set/chip-set.scss                           | 2 --
 src/components/circular-progress/circular-progress.scss         | 1 -
 src/components/collapsible-section/collapsible-section.scss     | 1 -
 .../date-picker/flatpickr-adapter/flatpickr-adapter.scss        | 1 -
 src/components/dialog/dialog.scss                               | 2 --
 src/components/form/form.scss                                   | 1 -
 src/components/input-field/input-field.scss                     | 2 --
 src/components/linear-progress/linear-progress.scss             | 2 --
 src/components/list/list.scss                                   | 1 -
 src/components/slider/partial-styles/_readonly.scss             | 1 -
 src/components/slider/slider.scss                               | 2 --
 src/components/spinner/spinner.scss                             | 1 -
 src/components/switch/switch.scss                               | 2 +-
 src/components/tab-bar/tab-bar.scss                             | 1 -
 18 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index e59ffb2417..98e953fba9 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -1,5 +1,4 @@
 @use '../../style/functions';
-@use '../../style/internal/lime-theme';
 @use '../../style/mixins';
 
 /**
diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
index ad9517cd44..f78c08ea04 100644
--- a/src/components/banner/banner.scss
+++ b/src/components/banner/banner.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '../../style/internal/variables';
 @use '../../style/functions';
 
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 575df59b99..402110e194 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 :host {
     display: inline-block;
 }
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 4511a20952..604120670f 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '@material/checkbox';
 @use '@material/form-field';
 
diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
index 6f0336e479..2e172c9162 100644
--- a/src/components/chip-set/chip-set.scss
+++ b/src/components/chip-set/chip-set.scss
@@ -2,8 +2,6 @@
 @use '../../style/internal/shared_input-select-picker';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/textfield';
 @use '@material/textfield/icon';
 
diff --git a/src/components/circular-progress/circular-progress.scss b/src/components/circular-progress/circular-progress.scss
index 04de2a34c0..d591661496 100644
--- a/src/components/circular-progress/circular-progress.scss
+++ b/src/components/circular-progress/circular-progress.scss
@@ -1,6 +1,5 @@
 @use '../../style/functions';
 @use '../../style/mixins';
-@use '../../style/internal/lime-theme';
 
 /**
  * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
diff --git a/src/components/collapsible-section/collapsible-section.scss b/src/components/collapsible-section/collapsible-section.scss
index 991365aea1..bfd3377db0 100644
--- a/src/components/collapsible-section/collapsible-section.scss
+++ b/src/components/collapsible-section/collapsible-section.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '../../style/mixins';
 @use '../../style/internal/shared_input-select-picker';
 
diff --git a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
index ac45c9af83..1318e096b1 100644
--- a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
+++ b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
@@ -1,4 +1,3 @@
-@use '../../../style/internal/lime-theme';
 @use '../../../style/functions';
 @use '../../../style/mixins';
 
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index d2cf827e89..124eacceae 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/dialog';
 
 /**
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
index 0d7411c365..79138c4b53 100644
--- a/src/components/form/form.scss
+++ b/src/components/form/form.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '../../style/internal/lime-typography';
 @use '../../style/internal/shared_input-select-picker';
 
diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
index 9eec943b89..bc657eda39 100644
--- a/src/components/input-field/input-field.scss
+++ b/src/components/input-field/input-field.scss
@@ -3,8 +3,6 @@
 @use '../../style/internal/shared_input-select-picker';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/textfield';
 @use '@material/textfield/icon';
 @use '@material/list';
diff --git a/src/components/linear-progress/linear-progress.scss b/src/components/linear-progress/linear-progress.scss
index 1bac882a11..45cb4ae227 100644
--- a/src/components/linear-progress/linear-progress.scss
+++ b/src/components/linear-progress/linear-progress.scss
@@ -1,5 +1,3 @@
-@use '../../style/internal/lime-theme';
-
 /**
  * @prop --background-color: Color to use for progress-bar track.
  */
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 98daf62b01..eeb11ebdfa 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -1,7 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
 @use '../checkbox/checkbox.scss';
 
 @use '@material/list';
diff --git a/src/components/slider/partial-styles/_readonly.scss b/src/components/slider/partial-styles/_readonly.scss
index afce4aa21f..a4bfed40e6 100644
--- a/src/components/slider/partial-styles/_readonly.scss
+++ b/src/components/slider/partial-styles/_readonly.scss
@@ -1,4 +1,3 @@
-@use '../../../style/internal/lime-theme';
 @use '../../../style/functions';
 
 :host(limel-slider.readonly) {
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index 35638fe90d..ba84392afd 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -2,8 +2,6 @@
 @use '../../style/functions';
 @use '../../style/internal/shared_input-select-picker';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/slider/styles';
 
 :host(limel-slider) {
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index a6f22b7b4c..a92305fc58 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '../../style/functions';
-@use '../../style/internal/lime-theme';
 
 /**
  * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-lime-green`.
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index 08cb26b3dd..cb77930b11 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -1,6 +1,6 @@
 @use '../../style/functions';
 @use '../../style/internal/shared_input-select-picker';
-@use '../../style/internal/lime-theme';
+
 @use '../../style/internal/lime-typography';
 
 @use '@material/switch/styles';
diff --git a/src/components/tab-bar/tab-bar.scss b/src/components/tab-bar/tab-bar.scss
index 4acf28dd73..1525e1612a 100644
--- a/src/components/tab-bar/tab-bar.scss
+++ b/src/components/tab-bar/tab-bar.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '@material/tab-bar/mdc-tab-bar';
 @use '@material/tab-scroller/mdc-tab-scroller';
 @use '@material/tab-indicator/mdc-tab-indicator';

From 408440b6061ea975352ef09bd3a4475a625e29e2 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 9 Jul 2025 14:40:06 +0200
Subject: [PATCH 7/9] chore(style): remove `lime-theme.scss`

Since this file no longer defines or forwards any theme variables
and instead only imports and forwards a typography file,
we can rather only import the typography file where it is necessary.
---
 src/global/core-styles.scss                        |  2 +-
 src/style/internal/lime-theme.scss                 | 10 ----------
 src/style/internal/shared_input-select-picker.scss |  2 +-
 3 files changed, 2 insertions(+), 12 deletions(-)
 delete mode 100644 src/style/internal/lime-theme.scss

diff --git a/src/global/core-styles.scss b/src/global/core-styles.scss
index d3f64356ba..1815e7befc 100644
--- a/src/global/core-styles.scss
+++ b/src/global/core-styles.scss
@@ -1,6 +1,6 @@
 // These are exported for external use.
 
-@use '../style/internal/lime-theme';
+@use '../style/internal/lime-typography';
 @use '../style/_theme-color-variables';
 @use '../style/colors.scss';
 @use '../style/shadows.scss';
diff --git a/src/style/internal/lime-theme.scss b/src/style/internal/lime-theme.scss
deleted file mode 100644
index 990ebc8ae3..0000000000
--- a/src/style/internal/lime-theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-
-@use './lime-typography';
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index d0a85f4530..acd5a5805e 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -1,7 +1,7 @@
 @use '../../style/internal/z-index';
 @use '../functions';
 
-@use '../../style/internal/lime-theme';
+@use '../../style/internal/lime-typography';
 
 @use '@material/textfield';
 

From 3085095bf9c1e5164aaa822debf78d28378b537a Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 9 Jul 2025 16:13:35 +0200
Subject: [PATCH 8/9] chore(style): remove `lime-typography.scss`

And also remove the no-op `@use '@material/typography'`.
We didn't really have any use for this file, except in one location.
We handle typographic styles individually in components.
---
 .../action-bar-item/action-bar-item.scss      |  2 +-
 src/components/breadcrumbs/breadcrumbs.scss   |  2 +-
 src/components/button-group/button-group.scss |  2 +-
 src/components/button/button.scss             |  2 +-
 src/components/card/card.scss                 |  2 +-
 src/components/checkbox/checkbox.scss         |  1 +
 src/components/chip/chip.scss                 |  1 +
 .../dock/dock-button/dock-button.scss         |  2 +-
 .../form/examples/map-component.scss          |  2 +-
 src/components/form/form.scss                 | 36 ++++-----
 src/components/form/row/row.scss              |  4 +-
 src/components/help/limel-help-content.scss   |  2 +-
 src/components/info-tile/info-tile.scss       |  2 +-
 src/components/list/list.scss                 |  6 ++
 .../_adjust-for-table-cell.scss               |  2 +-
 .../markdown/partial-styles/_body-text.scss   |  2 +-
 .../partial-styles/_definition-lists.scss     |  2 +-
 .../markdown/partial-styles/_headings.scss    |  2 +-
 .../markdown/partial-styles/_tables.scss      |  2 +-
 .../progress-flow-item.scss                   |  2 +-
 src/components/select/select.scss             |  1 +
 src/components/slider/slider.scss             |  4 +
 src/components/switch/switch.scss             |  9 +--
 src/components/tab-bar/tab-bar.scss           |  2 +
 src/components/text-editor/text-editor.scss   |  2 +-
 src/components/tooltip/tooltip-content.scss   |  2 +-
 .../examples/action-buttons.scss              |  2 +-
 .../examples/ui-color-palette.scss            |  2 +-
 .../shadows/examples/surface-shadows.scss     |  2 +-
 src/examples/example-event-printer.scss       |  2 +-
 src/global/core-styles.scss                   |  4 +-
 src/style/internal/codemirror-tooltip.scss    |  4 +-
 src/style/internal/lime-typography.scss       | 80 -------------------
 .../internal/shared_input-select-picker.scss  |  8 +-
 34 files changed, 66 insertions(+), 136 deletions(-)
 delete mode 100644 src/style/internal/lime-typography.scss

diff --git a/src/components/action-bar/action-bar-item/action-bar-item.scss b/src/components/action-bar/action-bar-item/action-bar-item.scss
index 776d847019..f68ae93f19 100644
--- a/src/components/action-bar/action-bar-item/action-bar-item.scss
+++ b/src/components/action-bar/action-bar-item/action-bar-item.scss
@@ -40,7 +40,7 @@ button {
     color: var(--limel-action-bar-item-text-color);
 
     border-radius: var(--action-bar-item-height);
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     padding: 0 0.25rem;
 
     &:has(.text) {
diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss
index d9cce5b36a..00352a873f 100644
--- a/src/components/breadcrumbs/breadcrumbs.scss
+++ b/src/components/breadcrumbs/breadcrumbs.scss
@@ -48,7 +48,7 @@ ol {
 
     color: var(--limel-breadcrumbs-item-text-color);
     border-radius: 100vw;
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     padding: 0 0.25rem;
 
     &:not(:has(.text)) {
diff --git a/src/components/button-group/button-group.scss b/src/components/button-group/button-group.scss
index 5f7a373728..da6893df5b 100644
--- a/src/components/button-group/button-group.scss
+++ b/src/components/button-group/button-group.scss
@@ -26,7 +26,7 @@
     display: inline-grid;
     grid-auto-flow: column;
     margin: functions.pxToRem(2) !important;
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
 
     &:not(:last-child) {
         &:after {
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 402110e194..6c5e548786 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -80,7 +80,7 @@ button {
 }
 
 .label {
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     font-weight: 600;
     letter-spacing: functions.pxToRem(0.5);
     padding: 0 0.25rem;
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 1148a21e0c..98607e70a9 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -124,7 +124,7 @@ header {
     }
 
     h2 {
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
         font-weight: 400;
         color: var(--card-subheading-color, rgb(var(--contrast-1000)));
     }
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 604120670f..d64f6640e8 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -38,6 +38,7 @@ limel-dynamic-label {
     // other font-related styles that might be set by MDC,
     // such as `letter-spacing` or `font-size`.
     font-family: inherit;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 .mdc-form-field {
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
index c9bfbb8096..1e435f4911 100644
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -183,6 +183,7 @@ limel-badge {
     @include mixins.truncate-text;
     line-height: 1.2;
     padding: 0 0.5rem;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 .trailing-button {
diff --git a/src/components/dock/dock-button/dock-button.scss b/src/components/dock/dock-button/dock-button.scss
index a59e54863e..16e2ee4078 100644
--- a/src/components/dock/dock-button/dock-button.scss
+++ b/src/components/dock/dock-button/dock-button.scss
@@ -21,7 +21,7 @@
     height: var(--dock-item-height);
 
     border-radius: functions.pxToRem(6);
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     padding: 0 0.5rem;
     min-width: var(--dock-item-height);
 
diff --git a/src/components/form/examples/map-component.scss b/src/components/form/examples/map-component.scss
index 091357e520..848fdd5d49 100644
--- a/src/components/form/examples/map-component.scss
+++ b/src/components/form/examples/map-component.scss
@@ -24,7 +24,7 @@
     background-color: rgba(var(--contrast-300), 0.9);
     color: rgb(var(--contrast-1100));
 
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 iframe {
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
index 79138c4b53..283a815fa1 100644
--- a/src/components/form/form.scss
+++ b/src/components/form/form.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-typography';
 @use '../../style/internal/shared_input-select-picker';
 
 /**
@@ -10,8 +9,6 @@
  * @prop --form-background-color-of-odd-rows:Background of odd rows in the form, when layout type is `row`. Defaults to `--contrast-200`.
  */
 
-@include lime-typography.core-styles;
-
 .form-group {
     min-width: 0;
 }
@@ -182,10 +179,10 @@ limel-code-editor {
     }
 
     .mdc-typography--headline1 {
-        --mdc-typography-headline1-font-size: 2rem;
-        --mdc-typography-headline1-line-height: 2.25rem;
-        --mdc-typography-headline1-letter-spacing: -0.01rem;
-        --mdc-typography-headline1-font-weight: 400;
+        font-size: 2rem;
+        line-height: 2.25rem;
+        letter-spacing: -0.01rem;
+        font-weight: 400;
         margin-top: 1.5rem;
         margin-bottom: 0.25rem;
     }
@@ -193,6 +190,7 @@ limel-code-editor {
     .mdc-typography--body1 {
         margin-top: 0;
         margin-bottom: 0.5rem;
+        font-size: var(--limel-theme-default-font-size);
     }
 
     .form-group {
@@ -202,9 +200,9 @@ limel-code-editor {
         }
 
         .mdc-typography--headline1 {
-            --mdc-typography-headline1-font-size: 1.625rem;
-            --mdc-typography-headline1-line-height: 1.25rem;
-            --mdc-typography-headline1-font-weight: 300;
+            font-size: 1.625rem;
+            line-height: 1.25rem;
+            font-weight: 300;
             margin-top: 1rem;
 
             &:before {
@@ -221,7 +219,7 @@ limel-code-editor {
                     var(--limel-theme-primary-color)
                 );
                 width: 0.125rem;
-                height: var(--mdc-typography-headline1-line-height);
+                height: 1.5rem;
                 border-radius: 0.125rem;
 
                 opacity: 0.6;
@@ -235,8 +233,8 @@ limel-code-editor {
             }
 
             .mdc-typography--headline1 {
-                --mdc-typography-headline1-font-size: 1.375rem;
-                --mdc-typography-headline1-line-height: 1.5rem;
+                font-size: 1.375rem;
+                line-height: 1.5rem;
                 margin-top: 0.5rem;
 
                 &:before {
@@ -251,8 +249,8 @@ limel-code-editor {
                 }
 
                 .mdc-typography--headline1 {
-                    --mdc-typography-headline1-font-size: 1.25rem;
-                    --mdc-typography-headline1-line-height: 1.25rem;
+                    font-size: 1.25rem;
+                    line-height: 1.25rem;
                     margin-top: 1rem;
 
                     &:before {
@@ -267,8 +265,8 @@ limel-code-editor {
                 }
 
                 .mdc-typography--headline1 {
-                    --mdc-typography-headline1-font-size: 1.25rem;
-                    --mdc-typography-headline1-line-height: 1.25rem;
+                    font-size: 1.25rem;
+                    line-height: 1.25rem;
                     margin-top: 0.25rem;
 
                     &:before {
@@ -283,8 +281,8 @@ limel-code-editor {
                     }
 
                     .mdc-typography--headline1 {
-                        --mdc-typography-headline1-font-size: 1rem;
-                        --mdc-typography-headline1-line-height: 1rem;
+                        font-size: 1rem;
+                        line-height: 1rem;
                         margin-top: 0.25rem;
 
                         &:before {
diff --git a/src/components/form/row/row.scss b/src/components/form/row/row.scss
index d748c4d10c..a1104033cf 100644
--- a/src/components/form/row/row.scss
+++ b/src/components/form/row/row.scss
@@ -75,13 +75,13 @@
 
         flex-grow: 1;
         color: var(--limel-theme-on-surface-color);
-        font-size: var(--mdc-typography-subtitle1-font-size, 0.875rem);
+        font-size: 0.875rem;
     }
 
     .description {
         margin: 0;
         color: var(--limel-theme-text-secondary-on-background-color);
-        font-size: var(--mdc-typography-body2-font-size, 0.8125rem);
+        font-size: 0.8125rem;
         line-height: 1.5;
     }
 
diff --git a/src/components/help/limel-help-content.scss b/src/components/help/limel-help-content.scss
index 1c15adcaee..802e366ef7 100644
--- a/src/components/help/limel-help-content.scss
+++ b/src/components/help/limel-help-content.scss
@@ -28,7 +28,7 @@ a {
     bottom: 0;
 
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     padding-bottom: 0.125rem;
 }
 
diff --git a/src/components/info-tile/info-tile.scss b/src/components/info-tile/info-tile.scss
index 7caabd5afd..0c44308e6a 100644
--- a/src/components/info-tile/info-tile.scss
+++ b/src/components/info-tile/info-tile.scss
@@ -163,7 +163,7 @@ slot[name='primary'] {
         var(--label-max-size)
     );
     @supports not (container-type: size) {
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
     }
 }
 
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index eeb11ebdfa..9722e29fbc 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -46,8 +46,14 @@ $list-mdc-list-item: 0;
     color: var(--limel-theme-text-primary-on-background-color);
 }
 
+.mdc-deprecated-list-item__text,
+.mdc-deprecated-list-item__primary-text {
+    font-size: var(--limel-theme-default-font-size);
+}
+
 .mdc-deprecated-list-item__secondary-text {
     opacity: 0.6;
+    font-size: 0.8125rem; //13px
 }
 
 .mdc-deprecated-list-item--disabled {
diff --git a/src/components/markdown/partial-styles/_adjust-for-table-cell.scss b/src/components/markdown/partial-styles/_adjust-for-table-cell.scss
index 27c8f14358..add28e19dd 100644
--- a/src/components/markdown/partial-styles/_adjust-for-table-cell.scss
+++ b/src/components/markdown/partial-styles/_adjust-for-table-cell.scss
@@ -29,7 +29,7 @@
         display: inline-block;
         vertical-align: bottom;
 
-        font-size: 0.875rem; // Same as `<p>`s
+        font-size: var(--limel-theme-default-font-size); // Same as `<p>`s
         margin: 0 0.25rem 0 0;
         letter-spacing: normal;
         font-weight: 500;
diff --git a/src/components/markdown/partial-styles/_body-text.scss b/src/components/markdown/partial-styles/_body-text.scss
index 255bafd3c7..a677058247 100644
--- a/src/components/markdown/partial-styles/_body-text.scss
+++ b/src/components/markdown/partial-styles/_body-text.scss
@@ -10,7 +10,7 @@
 
 p,
 li {
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     word-break: break-word;
 }
 
diff --git a/src/components/markdown/partial-styles/_definition-lists.scss b/src/components/markdown/partial-styles/_definition-lists.scss
index 6e18fd2bcc..62eea28e32 100644
--- a/src/components/markdown/partial-styles/_definition-lists.scss
+++ b/src/components/markdown/partial-styles/_definition-lists.scss
@@ -12,7 +12,7 @@ dl {
     dt,
     dd {
         padding: $border-radius 0.5rem;
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
         margin: 0;
 
         &:nth-of-type(even) {
diff --git a/src/components/markdown/partial-styles/_headings.scss b/src/components/markdown/partial-styles/_headings.scss
index 2e4d15df23..68bbffc25d 100644
--- a/src/components/markdown/partial-styles/_headings.scss
+++ b/src/components/markdown/partial-styles/_headings.scss
@@ -15,7 +15,7 @@ h4 {
 }
 
 h5 {
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 h6 {
diff --git a/src/components/markdown/partial-styles/_tables.scss b/src/components/markdown/partial-styles/_tables.scss
index 3cc912ae60..cf65d825c3 100644
--- a/src/components/markdown/partial-styles/_tables.scss
+++ b/src/components/markdown/partial-styles/_tables.scss
@@ -26,7 +26,7 @@
         text-align: left;
         vertical-align: top;
         transition: background-color 0.2s ease;
-        font-size: 0.875rem; // 14px
+        font-size: var(--limel-theme-default-font-size); // 14px
     }
 
     td {
diff --git a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
index ade0e97802..ba95e1b0dc 100644
--- a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
+++ b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
@@ -73,7 +73,7 @@ $limel-progress-flow-divider: 1;
     width: 100%;
     height: var(--step-height);
     border: none;
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
 
     &.disabled {
         cursor: not-allowed;
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 6ad1d3ecaa..0a7e300806 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -36,6 +36,7 @@ limel-notched-outline:not([invalid]:not([invalid='false'])) {
     // other font-related styles that might be set by MDC,
     // such as `letter-spacing` or `font-size`.
     font-family: inherit;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 .mdc-select__dropdown-icon-graphic {
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index ba84392afd..3c4112105c 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -57,6 +57,10 @@ div[slot='content'] {
             var(--limel-theme-primary-color)
         );
     }
+
+    .mdc-slider__value-indicator-text {
+        font-size: 0.8125rem; //13px
+    }
 }
 
 .mdc-slider .mdc-slider__value-indicator-text {
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index cb77930b11..e083c42031 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/internal/shared_input-select-picker';
 
-@use '../../style/internal/lime-typography';
-
 @use '@material/switch/styles';
 
 $scale-factor: 0.8;
@@ -89,11 +87,8 @@ $scale-factor: 0.8;
 }
 
 label {
-    @include lime-typography.typography(body2);
-    color: var(--limel-theme-on-surface-color);
-    padding-top: 0.375rem;
-    line-height: normal;
-    letter-spacing: normal;
+    padding-top: 0.25rem;
+    font-size: var(--limel-theme-default-font-size);
 
     &:not(.disabled) {
         cursor: pointer;
diff --git a/src/components/tab-bar/tab-bar.scss b/src/components/tab-bar/tab-bar.scss
index 1525e1612a..ceae7f01d8 100644
--- a/src/components/tab-bar/tab-bar.scss
+++ b/src/components/tab-bar/tab-bar.scss
@@ -37,6 +37,8 @@ $tab-separator-background-color: rgb(var(--contrast-600));
     font-family: inherit;
     font-weight: 400;
     letter-spacing: normal;
+    font-size: var(--limel-theme-default-font-size);
+    text-transform: none;
 }
 
 .mdc-tab-indicator {
diff --git a/src/components/text-editor/text-editor.scss b/src/components/text-editor/text-editor.scss
index 34968e9939..6df4e9df65 100644
--- a/src/components/text-editor/text-editor.scss
+++ b/src/components/text-editor/text-editor.scss
@@ -151,7 +151,7 @@ $min-height-condensed: calc($min-height / 2);
 
     padding: var(--limel-text-editor-padding);
     font-style: italic;
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     color: shared_input-select-picker.$input-placeholder-color;
 }
 
diff --git a/src/components/tooltip/tooltip-content.scss b/src/components/tooltip/tooltip-content.scss
index 4ebcfe222f..7e455c9624 100644
--- a/src/components/tooltip/tooltip-content.scss
+++ b/src/components/tooltip/tooltip-content.scss
@@ -8,7 +8,7 @@
 }
 
 text {
-    font-size: 0.875rem; // 14px
+    font-size: var(--limel-theme-default-font-size); // 14px
     line-height: 1.25;
     display: flex;
     column-gap: 1rem;
diff --git a/src/design-guidelines/action-buttons/examples/action-buttons.scss b/src/design-guidelines/action-buttons/examples/action-buttons.scss
index c9b927bc80..f77d1ac9bf 100644
--- a/src/design-guidelines/action-buttons/examples/action-buttons.scss
+++ b/src/design-guidelines/action-buttons/examples/action-buttons.scss
@@ -23,7 +23,7 @@ $dialog-border-radius: 0.75rem;
     }
 
     p {
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
         opacity: 0.7;
         align-self: flex-start;
         padding: 0 0.75rem;
diff --git a/src/design-guidelines/color-system/examples/ui-color-palette.scss b/src/design-guidelines/color-system/examples/ui-color-palette.scss
index e555a16ecd..094f5bef24 100644
--- a/src/design-guidelines/color-system/examples/ui-color-palette.scss
+++ b/src/design-guidelines/color-system/examples/ui-color-palette.scss
@@ -18,7 +18,7 @@
 .usage {
     ul {
         padding-inline-start: functions.pxToRem(16);
-        font-size: functions.pxToRem(14);
+        font-size: var(--limel-theme-default-font-size);
         color: rgb(var(--contrast-1300));
         margin: 0 0 functions.pxToRem(16) 0;
     }
diff --git a/src/design-guidelines/shadows/examples/surface-shadows.scss b/src/design-guidelines/shadows/examples/surface-shadows.scss
index 40b0a72cc1..4de6c1a8bd 100644
--- a/src/design-guidelines/shadows/examples/surface-shadows.scss
+++ b/src/design-guidelines/shadows/examples/surface-shadows.scss
@@ -44,7 +44,7 @@
     width: 100%;
     padding: 0 functions.pxToRem(16);
 
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     background-color: var(--lime-elevated-surface-background-color);
     z-index: 1;
 }
diff --git a/src/examples/example-event-printer.scss b/src/examples/example-event-printer.scss
index b83a26df5d..7b592450bd 100644
--- a/src/examples/example-event-printer.scss
+++ b/src/examples/example-event-printer.scss
@@ -9,7 +9,7 @@
 }
 
 details {
-    font-size: 0.875rem; // 14px
+    font-size: var(--limel-theme-default-font-size); // 14px
 }
 
 summary {
diff --git a/src/global/core-styles.scss b/src/global/core-styles.scss
index 1815e7befc..63a40af277 100644
--- a/src/global/core-styles.scss
+++ b/src/global/core-styles.scss
@@ -1,6 +1,5 @@
 // These are exported for external use.
 
-@use '../style/internal/lime-typography';
 @use '../style/_theme-color-variables';
 @use '../style/colors.scss';
 @use '../style/shadows.scss';
@@ -25,6 +24,9 @@
     // background color which interferes with this lightened surface,
     // or provides a poor contrast.
     --lime-elevated-surface-background-color: rgb(var(--contrast-100));
+
+    // The default font size for Lime Elements components.
+    --limel-theme-default-font-size: 0.875rem; //14px
 }
 
 // ⚠️ This section below is commented out.
diff --git a/src/style/internal/codemirror-tooltip.scss b/src/style/internal/codemirror-tooltip.scss
index 5ff5b9dc0c..5ae2d54e59 100644
--- a/src/style/internal/codemirror-tooltip.scss
+++ b/src/style/internal/codemirror-tooltip.scss
@@ -11,7 +11,9 @@
     );
 
     font-family: monospace;
-    font-size: 0.875rem; // 14px, like the default code editor's font size
+    font-size: var(
+        --limel-theme-default-font-size
+    ); // 14px, like the default code editor's font size
     white-space: pre-wrap;
     // overflow: hidden; // Why `hidden`?
 
diff --git a/src/style/internal/lime-typography.scss b/src/style/internal/lime-typography.scss
deleted file mode 100644
index 2c7c3f397a..0000000000
--- a/src/style/internal/lime-typography.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-
-@use '../functions';
-
-@use '@material/typography' with (
-    $styles-headline1: (
-        font-family: inherit,
-        font-size: functions.pxToRem(22),
-        line-height: functions.pxToRem(22),
-    ),
-    $styles-headline2: (
-        font-family: inherit,
-        font-size: functions.pxToRem(16),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline3: (
-        font-family: inherit,
-        font-size: functions.pxToRem(16),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline4: (
-        font-family: inherit,
-        font-size: functions.pxToRem(16),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline5: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline6: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-subtitle1: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(18),
-    ),
-    $styles-subtitle2: (
-        font-family: inherit,
-        font-size: functions.pxToRem(13),
-        line-height: functions.pxToRem(18),
-    ),
-    $styles-body1: (
-        font-family: inherit,
-        font-size: functions.pxToRem(13),
-        line-height: functions.pxToRem(24),
-    ),
-    $styles-body2: (
-        font-family: inherit,
-        font-size: functions.pxToRem(13),
-        line-height: functions.pxToRem(26),
-    ),
-    $styles-caption: (
-        font-family: inherit,
-        font-size: functions.pxToRem(11),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-button: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(36),
-        text-transform: none,
-    ),
-    $styles-overline: (
-        font-family: inherit,
-        font-size: functions.pxToRem(11),
-        line-height: functions.pxToRem(14),
-    )
-);
-@forward '@material/typography';
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index acd5a5805e..b0f8ff6740 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -1,8 +1,6 @@
 @use '../../style/internal/z-index';
 @use '../functions';
 
-@use '../../style/internal/lime-typography';
-
 @use '@material/textfield';
 
 // Visual styles that unify the look & feel and behavior of
@@ -35,7 +33,7 @@ $height-of-mdc-helper-text-block: 0.9375rem;
 $mdc-chip-background-color: rgb(var(--contrast-100));
 
 $height-of-helper-text-pseudo-before: 0.75rem; // There is strange a pseudo before in MD's helper texts, which sets their distance to the element on top of it. Originally in MD, this value is 1rem. In Lime Elements, we need to make it less due to our layout needs.
-$cropped-label-hack--font-size: 0.875rem; //14px
+$cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
 
 @mixin looks-disabled() {
     cursor: not-allowed;
@@ -47,7 +45,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     font-weight: 400;
     letter-spacing: 0.009375em;
     color: $label-color;
@@ -59,7 +57,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     -webkit-font-smoothing: antialiased;
 
     color: $input-text-color;
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     font-weight: 400;
     letter-spacing: 0.009375em;
 }

From a40d70edbfd80a74a4e70f212ffeb9210e06a120 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Thu, 10 Jul 2025 11:09:25 +0200
Subject: [PATCH 9/9] chore(style): remove unnecessary `variables.scss` file

There was only one instance where something from
this file was actually used. That is now handled locally.
This file has otherwise nothing useful to offer.
---
 src/components/banner/banner.scss                      |  3 +--
 src/components/dock/dock-button/dock-button.scss       |  1 -
 src/components/dock/dock.scss                          |  1 -
 src/components/file-viewer/file-viewer.scss            |  1 -
 .../progress-flow-item/progress-flow-item.scss         |  1 -
 src/components/progress-flow/progress-flow.scss        |  1 -
 src/style/internal/variables.scss                      | 10 ----------
 7 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 src/style/internal/variables.scss

diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
index f78c08ea04..f6a42b9433 100644
--- a/src/components/banner/banner.scss
+++ b/src/components/banner/banner.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/variables';
 @use '../../style/functions';
 
 /**
@@ -7,7 +6,7 @@
  */
 
 .lime-banner {
-    min-height: variables.$lime-banner-height;
+    min-height: 3.25rem;
     display: none;
     background-color: rgba(var(--contrast-100), 0.7);
     backdrop-filter: blur(functions.pxToRem(5));
diff --git a/src/components/dock/dock-button/dock-button.scss b/src/components/dock/dock-button/dock-button.scss
index 16e2ee4078..fc47294e76 100644
--- a/src/components/dock/dock-button/dock-button.scss
+++ b/src/components/dock/dock-button/dock-button.scss
@@ -1,6 +1,5 @@
 @use '../../../style/mixins';
 @use '../../../style/functions';
-@use '../../../style/internal/variables';
 
 .button {
     all: unset;
diff --git a/src/components/dock/dock.scss b/src/components/dock/dock.scss
index bc3af9ad48..37f98d61ab 100644
--- a/src/components/dock/dock.scss
+++ b/src/components/dock/dock.scss
@@ -1,6 +1,5 @@
 @use '../../style/mixins';
 @use '../../style/functions';
-@use '../../style/internal/variables';
 
 /**
 * @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.
diff --git a/src/components/file-viewer/file-viewer.scss b/src/components/file-viewer/file-viewer.scss
index c76e965611..c05c4fa0c7 100644
--- a/src/components/file-viewer/file-viewer.scss
+++ b/src/components/file-viewer/file-viewer.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/variables';
 @use '../../style/internal/shared_input-select-picker';
 @use '../../style/mixins';
 
diff --git a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
index ba95e1b0dc..c8695a5e71 100644
--- a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
+++ b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
@@ -1,6 +1,5 @@
 @use '../../../style/mixins';
 @use '../../../style/functions';
-@use '../../../style/internal/variables';
 
 $limel-progress-flow-step-content: 2;
 $limel-progress-flow-divider: 1;
diff --git a/src/components/progress-flow/progress-flow.scss b/src/components/progress-flow/progress-flow.scss
index 86bc9c4395..4a4dd4485a 100644
--- a/src/components/progress-flow/progress-flow.scss
+++ b/src/components/progress-flow/progress-flow.scss
@@ -1,5 +1,4 @@
 @use '../../style/functions';
-@use '../../style/internal/variables';
 
 /**
 * @prop --progress-flow-step-background-color: Background color of steps, defaults to `--contrast-600`.
diff --git a/src/style/internal/variables.scss b/src/style/internal/variables.scss
deleted file mode 100644
index bdd8ef6544..0000000000
--- a/src/style/internal/variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly used by outside code.
- */
-
-@use '../functions';
-
-$lime-banner-height: functions.pxToRem(52) !default;