Lundalogik · adrianschmidt · Jan 5, 2024 · Dec 28, 2023 · Dec 28, 2023 · adrianschmidt
diff --git a/README.md b/README.md
@@ -22,7 +22,25 @@ For a full list of components, along with live examples, please visit the [docum
 
 #### 1. Font
 
-The "Roboto" font is included for development purposes, but is not included in the published package. This font should be supplied by the consuming application. If not supplied, texts will fall back to suitable alternatives.
+To achieve a blazing fast rendering, our components' user interface utilizes a default cross-browser sans-serif font stack. 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. This is because we do not specify these defaults on each individual component.
+
+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/).
+
+Feel free to customize the font-family and related styles to suit your project's needs. For example, you might prefer a different typeface like below:
+
+```css
+font-family: 'Roboto', Arial, Verdana, sans-serif;
+```
 
 #### 2. Icons
 

diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
@@ -1,6 +1,5 @@
 @use '../../style/functions';
 @use '../../style/internal/lime-theme';
-@use '../../style/internal/lime-typography';
 @use '../../style/mixins';
 
 /**
@@ -23,7 +22,6 @@
 }
 
 span {
-    @include lime-typography.base;
     cursor: default;
     box-sizing: border-box;
 

diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
@@ -1,5 +1,4 @@
 @use '../../style/internal/lime-theme';
-@use '../../style/internal/lime-typography';
 @use '../../style/internal/variables';
 @use '../../style/functions';
 
@@ -9,7 +8,6 @@
  */
 
 .lime-banner {
-    @include lime-typography.typography(body2);
     min-height: variables.$lime-banner-height;
     display: none;
     background-color: rgba(var(--contrast-100), 0.7);

diff --git a/src/components/banner/banner.tsx b/src/components/banner/banner.tsx
@@ -49,7 +49,7 @@ export class Banner {
                 <div class="lime-banner__surface">
                     <div class="lime-banner__content">
                         {this.renderIcon()}
-                        <div class="mdc-typography--body2">{this.message}</div>
+                        <div>{this.message}</div>
                         <div class="lime-banner__actions">
                             <slot name="buttons" />
                         </div>

diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss
@@ -60,6 +60,10 @@ ol {
 
         &:after {
             content: var(--limel-breadcrumbs-divider);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
             width: var(--limel-breadcrumbs-gap);
 
             position: absolute;

diff --git a/src/components/button-group/button-group.scss b/src/components/button-group/button-group.scss
@@ -8,6 +8,16 @@
 * @prop --button-group-background-color: Background color of the component. Defaults to `--contrast-400`
 */
 
+.mdc-chip {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-chip {
     @include mixins.is-flat-inset-clickable($background-color: transparent);
     max-width: 100%;

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -17,6 +17,16 @@
 
 @include mixins.visualize-aria-expanded('button');
 
+button.mdc-button {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 button {
     display: flex;
     align-items: center;
@@ -76,11 +86,9 @@ button {
 }
 
 .label {
-    font-family: Roboto, sans-serif;
     font-size: 0.875rem;
-    font-weight: 500;
-    letter-spacing: functions.pxToRem(1);
-    opacity: 1;
+    font-weight: 600;
+    letter-spacing: functions.pxToRem(0.5);
     padding: 0 0.25rem;
 }
 

diff --git a/src/components/callout/callout.scss b/src/components/callout/callout.scss
@@ -77,4 +77,5 @@
 .heading {
     margin: 0;
     font-size: 1rem;
+    font-weight: 600;
 }
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
@@ -23,6 +23,16 @@
 @include checkbox.core-styles;
 @include form-field.core-styles;
 
+.mdc-form-field {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-form-field {
     display: flex;
 

diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
@@ -43,6 +43,16 @@ $scale-of-remove-chip-x-when-hovered: scale(0.7);
     isolation: isolate;
 }
 
+.mdc-chip {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-chip {
     @include mixins.is-elevated-inset-clickable();
     max-width: 100%;

diff --git a/src/components/circular-progress/circular-progress.scss b/src/components/circular-progress/circular-progress.scss
@@ -21,11 +21,19 @@
 :host([size='x-small']) {
     --circular-progress-size: 1.5rem;
     font-weight: bold;
+
+    .value {
+        letter-spacing: functions.pxToRem(-1);
+    }
 }
 
 :host([size='small']) {
     --circular-progress-size: 2rem;
     font-weight: bold;
+
+    .value {
+        letter-spacing: functions.pxToRem(-0.5);
+    }
 }
 
 :host([size='medium']) {

diff --git a/src/components/code-editor/code-editor.scss b/src/components/code-editor/code-editor.scss
@@ -6,7 +6,7 @@
 
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
- * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.875rem`.
+ * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.8125rem`.
  */
 
 @mixin light-mode-styles {
@@ -122,7 +122,7 @@
 
 :host {
     display: flex;
-    font-size: var(--code-editor-font-size, 0.875rem); // 14px
+    font-size: var(--code-editor-font-size, 0.8125rem); // 13px
     @include light-mode-styles;
 }
 
@@ -148,6 +148,7 @@
 
 .cm-s-lime {
     &.CodeMirror {
+        @include mixins.font-family(monospace);
         color: rgb(var(--code-editor-neutral-text-color));
         background-color: rgb(var(--code-editor-background-color));
         border-radius: 0.25rem;

diff --git a/src/components/collapsible-section/collapsible-section.scss b/src/components/collapsible-section/collapsible-section.scss
@@ -1,5 +1,4 @@
 @use '../../style/internal/lime-theme';
-@use '../../style/internal/lime-typography';
 @use '../../style/mixins';
 
 /**
@@ -84,7 +83,8 @@ header {
 }
 
 .title {
-    @include lime-typography.typography(headline2);
+    font-size: 1rem;
+    font-weight: 300;
     color: var(--mdc-theme-on-surface);
 
     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
@@ -15,7 +15,6 @@
 
     * {
         box-sizing: border-box;
-        font-family: 'Roboto';
     }
 }
 

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
@@ -34,6 +34,16 @@ $responsive-body-padding: 3vw; // 3% of viewport's width
 
 @include dialog.core-styles;
 
+.mdc-dialog__content {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-dialog {
     @include dialog.max-width(16000px, dialog.$margin);
 

diff --git a/src/components/form/examples/map-component.scss b/src/components/form/examples/map-component.scss
@@ -25,7 +25,6 @@
     color: rgb(var(--contrast-1100));
 
     font-size: 0.875rem;
-    font-family: 'Roboto';
 }
 
 iframe {

diff --git a/src/components/header/header.scss b/src/components/header/header.scss
@@ -59,12 +59,13 @@
 .heading {
     color: var(--header-heading-color, rgb(var(--contrast-1100)));
     font-size: functions.pxToRem(17);
+    font-weight: 500;
 }
 
 .subheading {
     color: var(--header-subheading-color, rgb(var(--contrast-900)));
     font-size: functions.pxToRem(14);
-    font-weight: lighter;
+    font-weight: 400;
 }
 
 .subheading__supporting-text {

diff --git a/src/components/helper-line/helper-line.scss b/src/components/helper-line/helper-line.scss
@@ -6,13 +6,9 @@
 
     min-width: 0; // prevents overflowing, if component is placed in flex containers
 
-    font-family: Roboto, sans-serif;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-size: 0.6875rem;
-    font-weight: 400;
-    letter-spacing: 0.0333333333em; // keeping this for now for consistency, until we get rid of all of them
-    line-height: normal;
 
     color: rgb(var(--contrast-1200));
 }

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -35,6 +35,17 @@ $list-mdc-list-item: 0;
 
 @include list.deprecated-core-styles;
 
+.mdc-deprecated-list,
+.mdc-deprecated-list-item__secondary-text {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-deprecated-list {
     --mdc-theme-text-icon-on-background: var(
         --icon-color,

diff --git a/src/components/portal/portal.scss b/src/components/portal/portal.scss
@@ -1,3 +1,7 @@
+/**
+ * @prop --limel-portal-font-family: Font family override for the portal. Because the portal is a direct descendant of the body element, any component placed in the portal inherits its font from the body element. If the body's font is not what should be used for the component in the portal, this property can be used to override the font.
+ */
+
 :host(limel-portal) {
     display: block;
     position: absolute;

diff --git a/src/components/portal/portal.tsx b/src/components/portal/portal.tsx
@@ -175,6 +175,8 @@ export class Portal {
         this.container = document.createElement('div');
         this.container.setAttribute('id', this.containerId);
         this.container.setAttribute('class', 'limel-portal--container');
+        this.container.style.fontFamily =
+            'var(--limel-portal-font-family, inherit)';
         Object.assign(this.container, {
             portalSource: this.host,
         });

diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -24,6 +24,18 @@
     left: functions.pxToRem(16);
 }
 
+.mdc-select__anchor,
+.mdc-floating-label,
+.mdc-select__selected-text {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-select__dropdown-icon-graphic {
     transition: transform 0.2s ease;
 }

diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
@@ -16,6 +16,17 @@
     margin-top: functions.pxToRem(4);
 }
 
+.mdc-floating-label,
+.mdc-slider .mdc-slider__value-indicator-text {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .slider__label {
     padding-left: functions.pxToRem(20);
     top: functions.pxToRem(

diff --git a/src/components/snackbar/snackbar.scss b/src/components/snackbar/snackbar.scss
@@ -24,6 +24,16 @@
     gap: 0.75rem;
 }
 
+.mdc-snackbar__label {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-snackbar__label {
     color: rgb(var(--contrast-100));
 }

diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
@@ -85,6 +85,16 @@ label {
     }
 }
 
+label {
+    // As long as this component is depended on MDC,
+    // we need to force it to be font-agnostic.
+    // When MDC-dependency is removed, this block can also be removed.
+    // However, on removal of MDC-dependency, we should also make sure to check
+    // other font-related styles that might be set by MDC,
+    // such as `letter-spacing` or `font-size`.
+    font-family: inherit;
+}
+
 .mdc-switch {
     &.mdc-switch--selected,
     &.mdc-switch.mdc-switch--unselected {
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,6 @@ @@
         * {
             box-sizing: border-box;
-            font-family: 'Roboto';
         }
     }
@@ Expand Down @@