Refactor theming system to use centralized Lime Elements CSS variables

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',

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) {
@@ -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;
     }
 }
 

src/components/badge/badge.scss

@@ -1,5 +1,4 @@
 @use '../../style/functions';
-@use '../../style/internal/lime-theme';
 @use '../../style/mixins';
 
 /**

src/components/banner/banner.scss

@@ -1,5 +1,3 @@
-@use '../../style/internal/lime-theme';
-@use '../../style/internal/variables';
 @use '../../style/functions';
 
 /**
@@ -8,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));

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)) {

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 {
@@ -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 {

src/components/button/button.scss

@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 :host {
     display: inline-block;
 }
@@ -56,10 +54,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 +70,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);
@@ -79,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;
@@ -137,13 +138,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 {

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)));
     }

src/components/checkbox/checkbox.scss

@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '@material/checkbox';
 @use '@material/form-field';
 
@@ -8,7 +7,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))
@@ -38,6 +40,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 {
@@ -61,7 +64,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 {
@@ -91,13 +94,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);
         }
     }
 }

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))',
             };
         }
 

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';
 
@@ -159,7 +157,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 {

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));
     }
 }
 
@@ -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 {

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.
@@ -50,7 +49,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))

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';
 
@@ -101,7 +100,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;
 

src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss

@@ -1,4 +1,3 @@
-@use '../../../style/internal/lime-theme';
 @use '../../../style/functions';
 @use '../../../style/mixins';
 
@@ -84,19 +83,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 +151,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 +286,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));
     }
 }
 

src/components/dialog/dialog.scss

@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/dialog';
 
 /**
@@ -91,7 +89,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)

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;
@@ -21,7 +20,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);
 

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.

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;
 }