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 06f9ccf9d3..17080a58b1 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -340,3 +340,24 @@ } } } + +/** +* 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 `