From e99fa09f749cd6ed557f4970f36623989ae53448 Mon Sep 17 00:00:00 2001 From: Kiarokh Moattar Date: Thu, 28 Dec 2023 10:51:58 +0100 Subject: [PATCH 1/2] chore(mixins): add mixins for cross-browser font stacks --- src/style/mixins.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 06f9ccf9d3..97f17a24cf 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -340,3 +340,19 @@ } } } + +/** +* This mixin creates a cross-browser font stack. +* - `sans-serif` can be used for the UI of the components. +* - `monospace` can be used for code. +*/ +@mixin font-family($letterform) { + @if $letterform == sans-serif { + font-family: ui-sans-serif, system-ui, sans-serif; + } @else if $letterform == monospace { + font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, + Consolas, 'DejaVu Sans Mono', monospace; + } @else { + @error "Please specify the font-family #{$letterform}!"; + } +} From ca91cd1bc0e198604d0aacf3f9619639840968bb Mon Sep 17 00:00:00 2001 From: Kiarokh Moattar Date: Thu, 28 Dec 2023 11:36:26 +0100 Subject: [PATCH 2/2] feat: remove Roboto and make it possible to define custom font, default 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 --- README.md | 20 ++++++- src/components/badge/badge.scss | 2 - src/components/banner/banner.scss | 2 - src/components/banner/banner.tsx | 2 +- src/components/breadcrumbs/breadcrumbs.scss | 4 ++ src/components/button-group/button-group.scss | 10 ++++ src/components/button/button.scss | 16 ++++-- src/components/callout/callout.scss | 1 + src/components/checkbox/checkbox.scss | 10 ++++ src/components/chip-set/chip-set.scss | 10 ++++ .../circular-progress/circular-progress.scss | 8 +++ src/components/code-editor/code-editor.scss | 5 +- .../collapsible-section.scss | 4 +- .../flatpickr-adapter/flatpickr-adapter.scss | 1 - src/components/dialog/dialog.scss | 10 ++++ .../form/examples/map-component.scss | 1 - src/components/header/header.scss | 3 +- src/components/helper-line/helper-line.scss | 4 -- src/components/list/list.scss | 11 ++++ src/components/portal/portal.scss | 4 ++ src/components/portal/portal.tsx | 2 + src/components/select/select.scss | 12 ++++ src/components/slider/slider.scss | 11 ++++ src/components/snackbar/snackbar.scss | 10 ++++ src/components/switch/switch.scss | 10 ++++ src/components/tab-bar/tab-bar.scss | 13 ++++- src/components/table/table.scss | 2 - src/index.html | 8 ++- src/style/internal/lime-typography.scss | 13 +++++ .../internal/shared_input-select-picker.scss | 55 ++++--------------- src/style/mixins.scss | 5 ++ 31 files changed, 198 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 4152cc8371..443117ef7f 100644 --- 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 `` 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 index c4eaaac92b..d6c4e31cfe 100644 --- 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 index 51c939640a..4f751b0525 100644 --- 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 index 3410792311..46d4d087f4 100644 --- a/src/components/banner/banner.tsx +++ b/src/components/banner/banner.tsx @@ -49,7 +49,7 @@ export class Banner {
{this.renderIcon()} -
{this.message}
+
{this.message}
diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss index 2790b4ca0c..d9cce5b36a 100644 --- 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 index 933e0f2497..adbbb8bf22 100644 --- 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 index 284d7b9f62..9f108d6e87 100644 --- 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 index c9621d532e..b9381c3f45 100644 --- 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 index ff1947ffc3..e39f806cde 100644 --- 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 index e5bac35e38..dc8bb0cf52 100644 --- 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 index 1050c37ee1..66455608fb 100644 --- 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 index 998455fe3c..2770af5129 100644 --- 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 index 3515608d1c..0cb708293d 100644 --- 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 index 7dcc463e81..65ca2e19bb 100644 --- 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 index cae1e1fc0e..c41e10c41f 100644 --- 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 index 6f779a8f57..091357e520 100644 --- 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 index f3da1d5775..996a536a95 100644 --- 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 index 97f83be07c..6c2ceefcb3 100644 --- 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 index 04fc0cb3da..2dddee3779 100644 --- 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 index b0d4e78661..0d60e0e660 100644 --- 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 index 6c8e2810e7..5dd22d7512 100644 --- 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 index 2eb1e96b97..78f485f2cc 100644 --- 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 index 5b1d1d4ce4..beb66fb62a 100644 --- 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 index e91eb1637a..262a232853 100644 --- 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 index 7c1b5a6638..8a3a993e53 100644 --- 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 { diff --git a/src/components/tab-bar/tab-bar.scss b/src/components/tab-bar/tab-bar.scss index 6b68640e63..abf9445661 100644 --- a/src/components/tab-bar/tab-bar.scss +++ b/src/components/tab-bar/tab-bar.scss @@ -30,6 +30,18 @@ $tab-scroller-fade-width: 65; } } +.mdc-tab { + // 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; + font-weight: 400; + letter-spacing: normal; +} + .mdc-tab-indicator { .mdc-tab-indicator__content { border: none; @@ -54,7 +66,6 @@ $tab-scroller-fade-width: 65; .mdc-tab { border-radius: 0; - letter-spacing: normal; padding-right: functions.pxToRem(20); padding-left: functions.pxToRem(20); min-width: functions.pxToRem(40); diff --git a/src/components/table/table.scss b/src/components/table/table.scss index a627fe8431..c23135ea7b 100644 --- a/src/components/table/table.scss +++ b/src/components/table/table.scss @@ -1,6 +1,5 @@ @use '../../style/mixins'; @use '../../style/functions'; -@use '../../style/internal/lime-typography'; @import '../../../node_modules/tabulator-tables/src/scss/tabulator.scss'; /* @@ -40,7 +39,6 @@ $table--limel-table--row-selector: 1; #tabulator-container, #tabulator-table { - @include lime-typography.base; background-color: transparent; border: none; } diff --git a/src/index.html b/src/index.html index 5930811063..1862208270 100644 --- a/src/index.html +++ b/src/index.html @@ -14,13 +14,15 @@ --dialog-z-index: 110; --popover-z-index: 115; --dropdown-z-index: 120; + --kompendium-example-font-family: ui-sans-serif, system-ui, sans-serif; + --kompendium-example-font-size: 0.875rem; + --kompendium-example-line-height: normal; + --limel-portal-font-family: var(--kompendium-example-font-family); } - - - + diff --git a/src/style/internal/lime-typography.scss b/src/style/internal/lime-typography.scss index 8bafaa70a0..2c7c3f397a 100644 --- a/src/style/internal/lime-typography.scss +++ b/src/style/internal/lime-typography.scss @@ -11,55 +11,68 @@ @use '@material/typography' with ( $styles-headline1: ( + font-family: inherit, font-size: functions.pxToRem(22), line-height: functions.pxToRem(22), ), $styles-headline2: ( + font-family: inherit, font-size: functions.pxToRem(16), line-height: functions.pxToRem(14), ), $styles-headline3: ( + font-family: inherit, font-size: functions.pxToRem(16), line-height: functions.pxToRem(14), ), $styles-headline4: ( + font-family: inherit, font-size: functions.pxToRem(16), line-height: functions.pxToRem(14), ), $styles-headline5: ( + font-family: inherit, font-size: functions.pxToRem(14), line-height: functions.pxToRem(14), ), $styles-headline6: ( + font-family: inherit, font-size: functions.pxToRem(14), line-height: functions.pxToRem(14), ), $styles-subtitle1: ( + font-family: inherit, font-size: functions.pxToRem(14), line-height: functions.pxToRem(18), ), $styles-subtitle2: ( + font-family: inherit, font-size: functions.pxToRem(13), line-height: functions.pxToRem(18), ), $styles-body1: ( + font-family: inherit, font-size: functions.pxToRem(13), line-height: functions.pxToRem(24), ), $styles-body2: ( + font-family: inherit, font-size: functions.pxToRem(13), line-height: functions.pxToRem(26), ), $styles-caption: ( + font-family: inherit, font-size: functions.pxToRem(11), line-height: functions.pxToRem(14), ), $styles-button: ( + font-family: inherit, font-size: functions.pxToRem(14), line-height: functions.pxToRem(36), text-transform: none, ), $styles-overline: ( + font-family: inherit, font-size: functions.pxToRem(11), line-height: functions.pxToRem(14), ) diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss index cf076ad4bd..e48ae43f67 100644 --- a/src/style/internal/shared_input-select-picker.scss +++ b/src/style/internal/shared_input-select-picker.scss @@ -40,7 +40,6 @@ $cropped-label-hack--font-size: 0.875rem; //14px } @mixin looks-like-input-label() { - font-family: Roboto, sans-serif; line-height: functions.pxToRem(28); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -52,7 +51,6 @@ $cropped-label-hack--font-size: 0.875rem; //14px } @mixin looks-like-input-value() { - font-family: Roboto, sans-serif; line-height: functions.pxToRem(28); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -86,55 +84,24 @@ $cropped-label-hack--font-size: 0.875rem; //14px } } -@mixin looks-like-helper-line { - padding-right: 1rem; - padding-left: 1rem; - flex-basis: 100%; // works like a line-break. NOTE: parent must have `flex-wrap: wrap;` /Kia - width: 100%; -} - -@mixin looks-like-helper-text { - 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; - text-decoration: inherit; - text-transform: inherit; - display: block; - margin-top: 0; - line-height: normal; - margin: 0; - transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); - opacity: 0; -} - -@mixin helper-text-color { - .mdc-text-field:not(.mdc-text-field--disabled) { - .mdc-text-field-character-counter, - + .mdc-text-field-helper-line .mdc-text-field-character-counter, - + .mdc-text-field-helper-line .mdc-text-field-helper-text { - color: $helper-text-color; - } - } -} - @mixin input-field-placeholder { &::placeholder { color: rgb(var(--contrast-900)) !important; } } -@mixin looks-like-helper-text-pseudo-before { - height: $height-of-helper-text-pseudo-before; - display: inline-block; - width: 0; - content: ''; - vertical-align: 0; -} - @mixin floating-label-overrides { + .mdc-text-field__input, + .mdc-floating-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-text-field { &:not(.mdc-text-field--disabled) { .mdc-floating-label { diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 97f17a24cf..17080a58b1 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -345,6 +345,11 @@ * This mixin creates a cross-browser font stack. * - `sans-serif` can be used for the UI of the components. * - `monospace` can be used for code. +* +* ⚠️ If we change the font stacks, we need to update +* 1. the consumer documentation in `README.md`, and +* 2. the CSS variables of `--kompendium-example-font-family` +* in the `