chore(style): remove lime-typography.scss

Kiarokh · Kiarokh · commit 0cada683fd39 · 2025-07-31T10:12:43.000+02:00
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.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -39,6 +39,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
@@ -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
@@ -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
@@ -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
@@ -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,17 +179,18 @@ 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;
     }
 
     .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -41,6 +41,10 @@
             var(--limel-theme-primary-color)
         );
     }
+
+    .mdc-slider__value-indicator-text {
+        font-size: 0.8125rem; //13px
+    }
 }
 
 .mdc-floating-label,
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/style/internal/codemirror-tooltip.scss b/src/style/internal/codemirror-tooltip.scss
diff --git a/src/style/internal/lime-typography.scss b/src/style/internal/lime-typography.scss
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ button {`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`.label {`
`83`		`- font-size: 0.875rem;`
	`83`	`+ font-size: var(--limel-theme-default-font-size);`
`84`	`84`	`font-weight: 600;`
`85`	`85`	`letter-spacing: functions.pxToRem(0.5);`
`86`	`86`	`padding: 0 0.25rem;`
Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,7 @@ header {`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`h2 {`
`127`		`- font-size: 0.875rem;`
	`127`	`+ font-size: var(--limel-theme-default-font-size);`
`128`	`128`	`font-weight: 400;`
`129`	`129`	`color: var(--card-subheading-color, rgb(var(--contrast-1000)));`
`130`	`130`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@ limel-dynamic-label {`
`39`	`39`	`// other font-related styles that might be set by MDC,`
`40`	`40`	// such as `letter-spacing` or `font-size`.
`41`	`41`	`font-family: inherit;`
	`42`	`+ font-size: var(--limel-theme-default-font-size);`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`.mdc-form-field {`
Original file line number	Diff line number	Diff line change
`@@ -183,6 +183,7 @@ limel-badge {`
`183`	`183`	`@include mixins.truncate-text;`
`184`	`184`	`line-height: 1.2;`
`185`	`185`	`padding: 0 0.5rem;`
	`186`	`+ font-size: var(--limel-theme-default-font-size);`
`186`	`187`	`}`
`187`	`188`
`188`	`189`	`.trailing-button {`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`background-color: rgba(var(--contrast-300), 0.9);`
`25`	`25`	`color: rgb(var(--contrast-1100));`
`26`	`26`
`27`		`- font-size: 0.875rem;`
	`27`	`+ font-size: var(--limel-theme-default-font-size);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`iframe {`