diff --git a/src/components/button-group/button-group.scss b/src/components/button-group/button-group.scss index da6893df5b..22a27096b3 100644 --- a/src/components/button-group/button-group.scss +++ b/src/components/button-group/button-group.scss @@ -123,7 +123,7 @@ } .mdc-chip__text { - font-size: functions.pxToRem(13); + font-size: var(--limel-theme-default-small-font-size); overflow: hidden; text-overflow: ellipsis; display: block; diff --git a/src/components/dynamic-label/dynamic-label.scss b/src/components/dynamic-label/dynamic-label.scss index 51ef194927..8a62353fee 100644 --- a/src/components/dynamic-label/dynamic-label.scss +++ b/src/components/dynamic-label/dynamic-label.scss @@ -24,7 +24,9 @@ limel-icon { label { flex-grow: 1; - font-size: 0.8125rem; // `13px`, Like Checkbox & Switch + font-size: var( + --limel-theme-default-small-font-size + ); // `13px`, Like Checkbox & Switch line-height: normal; color: var(--limel-theme-on-surface-color); padding-top: 0.375rem; diff --git a/src/components/form/row/row.scss b/src/components/form/row/row.scss index a1104033cf..5bf788e3a8 100644 --- a/src/components/form/row/row.scss +++ b/src/components/form/row/row.scss @@ -81,7 +81,7 @@ .description { margin: 0; color: var(--limel-theme-text-secondary-on-background-color); - font-size: 0.8125rem; + font-size: var(--limel-theme-default-small-font-size); line-height: 1.5; } diff --git a/src/components/header/header.scss b/src/components/header/header.scss index aac91f7008..6a4eadf215 100644 --- a/src/components/header/header.scss +++ b/src/components/header/header.scss @@ -66,7 +66,7 @@ .subheading { color: var(--header-subheading-color, rgb(var(--contrast-900))); - font-size: functions.pxToRem(13); + font-size: var(--limel-theme-default-small-font-size); font-weight: 400; } diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 9722e29fbc..745b4a6b0c 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -53,7 +53,7 @@ $list-mdc-list-item: 0; .mdc-deprecated-list-item__secondary-text { opacity: 0.6; - font-size: 0.8125rem; //13px + font-size: var(--limel-theme-default-small-font-size); //13px } .mdc-deprecated-list-item--disabled { @@ -97,7 +97,7 @@ $list-mdc-list-item: 0; all: unset; @include mixins.truncate-text; color: rgb(var(--contrast-900)); - font-size: 0.8125rem; // 13px + font-size: var(--limel-theme-default-small-font-size); // 13px } .mdc-deprecated-list-item { diff --git a/src/components/markdown/partial-styles/_pre-code.scss b/src/components/markdown/partial-styles/_pre-code.scss index dd1079c314..99dae52b8d 100644 --- a/src/components/markdown/partial-styles/_pre-code.scss +++ b/src/components/markdown/partial-styles/_pre-code.scss @@ -3,7 +3,7 @@ code { @include mixins.font-family(monospace); - font-size: functions.pxToRem(13); + font-size: var(--limel-theme-default-small-font-size); letter-spacing: functions.pxToRem(-0.2); color: rgb(var(--contrast-1300)); diff --git a/src/components/menu-list/menu-list.scss b/src/components/menu-list/menu-list.scss index b1911fdd1f..0db2dc81f7 100644 --- a/src/components/menu-list/menu-list.scss +++ b/src/components/menu-list/menu-list.scss @@ -22,7 +22,7 @@ margin: functions.pxToRem(4); // added space to visualize keyboard-focused items .mdc-deprecated-list-item[role='menuitem'] { - font-size: functions.pxToRem(13); + font-size: var(--limel-theme-default-small-font-size); .mdc-deprecated-list-item__graphic { margin-right: 0; diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss index 3c4112105c..900e2d274c 100644 --- a/src/components/slider/slider.scss +++ b/src/components/slider/slider.scss @@ -59,7 +59,7 @@ div[slot='content'] { } .mdc-slider__value-indicator-text { - font-size: 0.8125rem; //13px + font-size: var(--limel-theme-default-small-font-size); //13px } } diff --git a/src/components/snackbar/snackbar.scss b/src/components/snackbar/snackbar.scss index 135c25611b..4de6a90668 100644 --- a/src/components/snackbar/snackbar.scss +++ b/src/components/snackbar/snackbar.scss @@ -51,7 +51,7 @@ aside { color: rgb(var(--contrast-100)); -webkit-font-smoothing: antialiased; - font-size: 0.8125rem; + font-size: var(--limel-theme-default-small-font-size); font-weight: 400; padding: 0 0.25rem; diff --git a/src/global/core-styles.scss b/src/global/core-styles.scss index 63a40af277..3d9ba00b17 100644 --- a/src/global/core-styles.scss +++ b/src/global/core-styles.scss @@ -27,6 +27,7 @@ // The default font size for Lime Elements components. --limel-theme-default-font-size: 0.875rem; //14px + --limel-theme-default-small-font-size: 0.8125rem; //13px } // ⚠️ This section below is commented out.