feat: remove Roboto and make it possible to define custom font, defau…

…lt to system font This feature contains the following changes: docs(README.md): explain how font-related styles should be supplied fix(index.html): remove Roboto & set examples to use our default font stack Before this commit, the documentation used to request Roboto be downloaded from Google Fonts. Some components used this font to render their UI, while some inherited their font from Kompendium's body font. Here we set the default font to our cross-browser font stack, and tell all components to render their UI with this font and the specified font-related styles instead. The following commits will make some components free from Roboto. fix(badge): remove dependency on Roboto font fix(banner): remove dependency on Roboto font fix(button): remove dependency on Roboto font fix(breadcrumbs): render divider properly without dependency to chosen font This ensures that the divider character is vertically & horizontally center-aligned. fix(button-group): remove dependency on Roboto font fix(checkbox): remove dependency on Roboto font fix(chip-set): remove dependency on Roboto font fix(code-editor): ensure usage of cross-browser font stack This component was only using `monospace` as `font-family` to render the code. However, we have a `mixin` which offers a better font stack and defaults to more aesthetically pleasing fonts. The font stack has `monospace` as its last fallback. fix(collapsible-section): remove dependency on Roboto font fix(dialog): remove dependency on Roboto font fix(header): ensure optimal rendering of fonts As heading and subheading fonts are now using our font-stack, their `font-weight` had to be adjusted. fix(helper-line): remove dependency on Roboto font chore(style/internal): delete unused "helper-text" mixins Since we started using `limel-helper-line`, these mixins became obsolete. Previously, they were used in all components with the helper-line. fix(input elements): remove dependency on Roboto font From now on these component will inherit its unspecified font-related styles: - input field - select - picker - chipset - slider fix(list, menu): remove dependency on Roboto font fix(select): ensure optimal rendering of fonts As heading is now using our font-stack, its `font-weight` had to be adjusted. fix(select): remove dependency on Roboto font fix(slider): remove dependency on Roboto font fix(snackbar): remove dependency on Roboto font fix(switch): remove dependency on Roboto font fix(tab-bar): remove dependency on Roboto font fix(table): remove dependency on Roboto font fix(form): remove dependency on Roboto font Also, this commit ensures if `lime-typography.scss` has been imported anywhere that we have missed, or couldn't remove, the font-family that are coming from this file would not be automatically set to MDC's font stack. fix(circular-progress): fit in longer values better in `small` & `x-small` sizes
Lundalogik · Jan 5, 2024 · aab0740 · aab0740
1 parent 9711f52
commit aab0740
Show file tree

Hide file tree

Showing 31 changed files with 198 additions and 71 deletions.
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 @@