diff --git a/changelog/unreleased/enhancement-make-ui-smaller b/changelog/unreleased/enhancement-make-ui-smaller new file mode 100644 index 000000000..252d30a7d --- /dev/null +++ b/changelog/unreleased/enhancement-make-ui-smaller @@ -0,0 +1,5 @@ +Enhancement: Make UI smaller + +We've adjusted several values to make the UI appear less big. + +https://github.com/owncloud/owncloud-design-system/pull/2270 \ No newline at end of file diff --git a/changelog/unreleased/enhancement-use-inter b/changelog/unreleased/enhancement-use-inter new file mode 100644 index 000000000..2663cd73d --- /dev/null +++ b/changelog/unreleased/enhancement-use-inter @@ -0,0 +1,5 @@ +Enhancement: Use Inter font + +We've switched the default font from Roboto to Inter. + +https://github.com/owncloud/owncloud-design-system/pull/2270 diff --git a/config/docs.config.js b/config/docs.config.js index 640029372..1c61149be 100644 --- a/config/docs.config.js +++ b/config/docs.config.js @@ -17,7 +17,7 @@ module.exports = { maxWidth: "100%", sidebarWidth: 240, fontFamily: { - base: ["'Roboto'", "sans-serif"], + base: ["Inter", "sans-serif"], monospace: ["Consolas", "'Liberation Mono'", "Menlo", "monospace"], }, }, diff --git a/docs/docs.font.scss b/docs/docs.font.scss new file mode 100644 index 000000000..719bc2abd --- /dev/null +++ b/docs/docs.font.scss @@ -0,0 +1,6 @@ +@font-face { + font-family: Inter; + src: url('../src/assets/fonts/inter.ttf'); + font-weight: 100 900; + font-style: oblique 0deg 12deg; +} diff --git a/docs/docs.styles.scss b/docs/docs.styles.scss index 6b572470f..4cb4096d1 100644 --- a/docs/docs.styles.scss +++ b/docs/docs.styles.scss @@ -3,13 +3,13 @@ * (the odd formatting hence most of the classes are dynamic) */ -@import '../src/assets/tokens/docs'; @import '../src/assets/tokens/ods'; -@import './docs.tokens'; -@import './docs.mixins'; +@import '../src/styles/styles'; +@import './docs.font'; @import './docs.functions'; +@import './docs.mixins'; @import './docs.spacing'; -@import '../src/styles/styles'; +@import './docs.tokens'; /* LOCAL DESIGN TOKENS --------------------------------------------- */ @@ -231,7 +231,7 @@ p[class^="rsg--version"] { @include inset-squish-space($space-xs); margin: $space-xs 0 0; color: $color-bleu-de-france; - font-family: "Roboto", sans-serif; + font-family: $oc-docs-font-face; font-weight: $oc-docs-font-weight-normal; display: inline-block; line-height: $oc-docs-line-height-xsmall; @@ -456,7 +456,7 @@ div[class^="rsg--tab"] { letter-spacing: 1px; font-size: $size-s; font-weight: $oc-docs-font-weight-normal; - font-family: $oc-docs-font-text; + font-family: $oc-docs-font-face; line-height: $oc-docs-line-height-small; @include inset-squish-space($space-s); cursor: pointer; @@ -551,7 +551,7 @@ div[class^="rsg--root"] div[class^="rsg--tabs"] { // Status label is shown in top right corner for each component .status { - font-family: "Roboto", sans-serif; + font-family: $oc-docs-font-face; font-weight: $oc-docs-font-weight-normal; order: 1; align-self: flex-end; diff --git a/docs/docs.tokens.json b/docs/docs.tokens.json deleted file mode 100644 index dd84023e0..000000000 --- a/docs/docs.tokens.json +++ /dev/null @@ -1,444 +0,0 @@ -{ - "aliases": { - "vermilion": { - "value": "7, 83%" - }, - "ucla_gold": { - "value": "43, 100%" - }, - "bleu_de_france": { - "value": "210, 86%" - }, - "oxford_blue": { - "value": "210, 100%" - }, - "rich_black": { - "value": "#001123" - }, - "white": { - "value": "#fff" - } - }, - "props": { - "color_ucla_gold": { - "type": "color", - "category": "color_group_2", - "value": "rgb(255, 186, 10)", - "originalValue": "hsla({!ucla_gold}, 52%, 1)", - "name": "color_ucla_gold" - }, - "color_ucla_gold_darker": { - "type": "color", - "category": "color_group_2", - "value": "rgb(179, 128, 0)", - "originalValue": "hsla({!ucla_gold}, 35%, 1)", - "name": "color_ucla_gold_darker" - }, - "color_vermilion_lighter": { - "type": "color", - "category": "color_group_1", - "value": "rgb(244, 151, 138)", - "originalValue": "hsla({!vermilion}, 75%, 1)", - "name": "color_vermilion_lighter" - }, - "color_vermilion_darker": { - "type": "color", - "category": "color_group_1", - "value": "rgb(154, 31, 14)", - "originalValue": "hsla({!vermilion}, 33%, 1)", - "name": "color_vermilion_darker" - }, - "color_ucla_gold_lighter": { - "type": "color", - "category": "color_group_2", - "value": "rgb(255, 219, 128)", - "originalValue": "hsla({!ucla_gold}, 75%, 1)", - "name": "color_ucla_gold_lighter" - }, - "color_bleu_de_france_dark": { - "type": "color", - "category": "color_group_3", - "value": "rgb(16, 112, 209)", - "originalValue": "hsla({!bleu_de_france}, 44%, 1)", - "name": "color_bleu_de_france_dark" - }, - "color_bleu_de_france_light": { - "type": "color", - "category": "color_group_3", - "value": "rgb(84, 163, 242)", - "originalValue": "hsla({!bleu_de_france}, 64%, 1)", - "name": "color_bleu_de_france_light" - }, - "color_silver": { - "type": "color", - "category": "color_group_4", - "value": "rgb(127, 136, 145)", - "originalValue": "#7F8891", - "name": "color_silver" - }, - "color_white": { - "type": "color", - "category": "color_group_4", - "value": "rgb(255, 255, 255)", - "originalValue": "{!white}", - "name": "color_white" - }, - "color_bleu_de_france": { - "type": "color", - "category": "color_group_3", - "value": "rgb(37, 138, 239)", - "originalValue": "hsla({!bleu_de_france}, 54%, 1)", - "name": "color_bleu_de_france" - }, - "color_bleu_de_france_darker": { - "type": "color", - "category": "color_group_3", - "value": "rgb(12, 87, 161)", - "originalValue": "hsla({!bleu_de_france}, 34%, 1)", - "name": "color_bleu_de_france_darker" - }, - "color_bleu_de_france_lighter": { - "type": "color", - "category": "color_group_3", - "value": "rgb(132, 189, 246)", - "originalValue": "hsla({!bleu_de_france}, 74%, 1)", - "name": "color_bleu_de_france_lighter" - }, - "color_ucla_gold_dark": { - "type": "color", - "category": "color_group_2", - "value": "rgb(230, 164, 0)", - "originalValue": "hsla({!ucla_gold}, 45%, 1)", - "name": "color_ucla_gold_dark" - }, - "color_vermilion_light": { - "type": "color", - "category": "color_group_1", - "value": "rgb(239, 101, 82)", - "originalValue": "hsla({!vermilion}, 63%, 1)", - "name": "color_vermilion_light" - }, - "color_vermilion_dark": { - "type": "color", - "category": "color_group_1", - "value": "rgb(201, 40, 19)", - "originalValue": "hsla({!vermilion}, 43%, 1)", - "name": "color_vermilion_dark" - }, - "color_ucla_gold_light": { - "type": "color", - "category": "color_group_2", - "value": "rgb(255, 204, 77)", - "originalValue": "hsla({!ucla_gold}, 65%, 1)", - "name": "color_ucla_gold_light" - }, - "color_rich_black": { - "type": "color", - "category": "color_group_4", - "value": "rgb(0, 17, 35)", - "originalValue": "{!rich_black}", - "name": "color_rich_black" - }, - "color_cloud": { - "type": "color", - "category": "color_group_4", - "value": "rgb(233, 243, 253)", - "originalValue": "#E9F3FD", - "name": "color_cloud" - }, - "color_oxford_blue": { - "type": "color", - "category": "color_group_4", - "value": "rgb(0, 38, 77)", - "originalValue": "hsla({!oxford_blue}, 15%, 1)", - "name": "color_oxford_blue" - }, - "color_vermilion": { - "type": "color", - "category": "color_group_1", - "value": "rgb(235, 59, 36)", - "originalValue": "hsla({!vermilion}, 53%, 1)", - "name": "color_vermilion" - }, - "size_xxxl": { - "type": "number", - "category": "font-size", - "value": "64px", - "originalValue": "64px", - "name": "size_xxxl" - }, - "size_xxl": { - "type": "number", - "category": "font-size", - "value": "48px", - "originalValue": "48px", - "name": "size_xxl" - }, - "size_xl": { - "type": "number", - "category": "font-size", - "value": "36px", - "originalValue": "36px", - "name": "size_xl" - }, - "size_l": { - "type": "number", - "category": "font-size", - "value": "24px", - "originalValue": "24px", - "name": "size_l" - }, - "size_m": { - "type": "number", - "category": "font-size", - "value": "16px", - "originalValue": "16px", - "name": "size_m" - }, - "size_s": { - "type": "number", - "category": "font-size", - "value": "13px", - "originalValue": "13px", - "name": "size_s" - }, - "size_xs": { - "type": "number", - "category": "font-size", - "value": "11px", - "originalValue": "11px", - "name": "size_xs" - }, - "font_heading": { - "type": "...", - "category": "font", - "value": "'Roboto', sans-serif", - "originalValue": "'Roboto', sans-serif", - "name": "font_heading" - }, - "font_text": { - "type": "...", - "category": "font", - "value": "'Roboto', sans-serif", - "originalValue": "'Roboto', sans-serif", - "name": "font_text" - }, - "weight_bold": { - "type": "...", - "category": "font", - "value": "700", - "originalValue": "700", - "name": "weight_bold" - }, - "weight_semi_bold": { - "type": "...", - "category": "font", - "value": "600", - "originalValue": "600", - "name": "weight_semi_bold" - }, - "weight_normal": { - "type": "...", - "category": "font", - "value": "400", - "originalValue": "400", - "name": "weight_normal" - }, - "weight_light": { - "type": "...", - "category": "font", - "value": "300", - "originalValue": "300", - "name": "weight_light" - }, - "opacity_disabled": { - "type": "number", - "category": "opacity", - "value": "0.5", - "originalValue": "0.5", - "name": "opacity_disabled" - }, - "height_footer": { - "type": "number", - "category": "size", - "value": "64px", - "originalValue": "64px", - "name": "height_footer" - }, - "tappable_square": { - "type": "number", - "category": "size", - "value": "44px", - "originalValue": "44px", - "name": "tappable_square" - }, - "duration_quickly": { - "type": "number", - "category": "time", - "value": "0.08s", - "originalValue": "0.08s", - "name": "duration_quickly" - }, - "duration_slowly": { - "type": "number", - "category": "time", - "value": "0.5s", - "originalValue": "0.5s", - "name": "duration_slowly" - }, - "z_index_modal": { - "type": "number", - "category": "z-index", - "value": "9999", - "originalValue": "9999", - "name": "z_index_modal" - }, - "z_index_sticky": { - "type": "number", - "category": "z-index", - "value": "100", - "originalValue": "100", - "name": "z_index_sticky" - }, - "media_query_m": { - "type": "...", - "category": "media-query", - "value": "(min-width: 768px)", - "originalValue": "(min-width: 768px)", - "name": "media_query_m" - }, - "media_query_l": { - "type": "...", - "category": "media-query", - "value": "(min-width: 1024px)", - "originalValue": "(min-width: 1024px)", - "name": "media_query_l" - }, - "shadow_s": { - "type": "...", - "category": "box-shadow", - "value": "0 0 0 1px rgba(92,106,196,.1)", - "originalValue": "0 0 0 1px rgba(92,106,196,.1)", - "name": "shadow_s" - }, - "spacing_xl": { - "type": "number", - "category": "letter-spacing", - "value": "2px", - "originalValue": "2px", - "name": "spacing_xl" - }, - "spacing_l": { - "type": "number", - "category": "letter-spacing", - "value": "1px", - "originalValue": "1px", - "name": "spacing_l" - }, - "spacing_m": { - "type": "number", - "category": "letter-spacing", - "value": "0", - "originalValue": "0", - "name": "spacing_m" - }, - "spacing_s": { - "type": "number", - "category": "letter-spacing", - "value": "-0.5px", - "originalValue": "-0.5px", - "name": "spacing_s" - }, - "spacing_xs": { - "type": "number", - "category": "letter-spacing", - "value": "-1px", - "originalValue": "-1px", - "name": "spacing_xs" - }, - "radius_default": { - "type": "number", - "category": "border-radius", - "value": "3px", - "originalValue": "3px", - "name": "radius_default" - }, - "radius_circle": { - "type": "number", - "category": "border-radius", - "value": "50%", - "originalValue": "50%", - "name": "radius_circle" - }, - "space_xxl": { - "type": "number", - "category": "space", - "value": "128px", - "originalValue": "128px", - "name": "space_xxl" - }, - "space_xl": { - "type": "number", - "category": "space", - "value": "64px", - "originalValue": "64px", - "name": "space_xl" - }, - "space_l": { - "type": "number", - "category": "space", - "value": "48px", - "originalValue": "48px", - "name": "space_l" - }, - "space_m": { - "type": "number", - "category": "space", - "value": "24px", - "originalValue": "24px", - "name": "space_m" - }, - "space_s": { - "type": "number", - "category": "space", - "value": "16px", - "originalValue": "16px", - "name": "space_s" - }, - "space_xs": { - "type": "number", - "category": "space", - "value": "8px", - "originalValue": "8px", - "name": "space_xs" - }, - "space_xxs": { - "type": "number", - "category": "space", - "value": "4px", - "originalValue": "4px", - "name": "space_xxs" - }, - "line_height_m": { - "type": "number", - "category": "line-height", - "value": "1.6", - "originalValue": "1.6", - "name": "line_height_m" - }, - "line_height_s": { - "type": "number", - "category": "line-height", - "value": "1.3", - "originalValue": "1.3", - "name": "line_height_s" - }, - "line_height_xs": { - "type": "number", - "category": "line-height", - "value": "1", - "originalValue": "1", - "name": "line_height_xs" - } - } -} diff --git a/docs/docs.tokens.scss b/docs/docs.tokens.scss index 044d0e26f..a3d2f6a0c 100644 --- a/docs/docs.tokens.scss +++ b/docs/docs.tokens.scss @@ -4,6 +4,8 @@ Remove this file if you want docs to use your renamed global tokens. --------------------------------------------- */ +@import '../src/assets/tokens/docs'; + $color-ucla-gold: rgb(255, 186, 10) !default; $color-ucla-gold-darker: rgb(179, 128, 0) !default; $color-vermilion-lighter: rgb(244, 151, 138) !default; @@ -33,8 +35,8 @@ $size-m: 16px !default; $size-s: 13px !default; $size-xs: 11px !default; -$font-heading: "Roboto", sans-serif !default; -$font-text: "Roboto", sans-serif !default; +$font-heading: $oc-docs-font-face !default; +$font-text: $oc-docs-font-face !default; $weight-bold: 700 !default; $weight-semi-bold: 600 !default; diff --git a/docs/faq.md b/docs/faq.md index 431be56cd..9e1b55a0c 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -58,9 +58,7 @@ Icons are inside `src/assets/icons` directory, so you can just add any icons tha ## How do I change the default typeface/font? -ownCloud Design System uses Typekit’s [Web Font Loader](https://github.com/typekit/webfontloader) which is easy to configure. To load your own font files, see [Getting Started with WebFontLoader](https://github.com/typekit/webfontloader#get-started). Currently, the app is loading _Roboto_ and a few different weights from Google Fonts. See `src/utils/webFontLoader.js` for an example. - -If you want to bundle your fonts into the project itself, that’s possible as well. I’ve created a separate branch with an example of this. See the needed changes in [this commit](https://github.com/owncloud/owncloud-design-system/commit/a7b3badb618fb5e0e1c999940b8ea82e86aea190). +ownCloud Design System uses Typekit’s [Web Font Loader](https://github.com/typekit/webfontloader) which is easy to configure. To load your own font files, see [Getting Started with WebFontLoader](https://github.com/typekit/webfontloader#get-started). Currently, the design system bundles and loads _Inter_. See `src/utils/webFontLoader.js` for an example. ## How to use design tokens in JavaScript? diff --git a/docs/text.md b/docs/text.md index 65ea5cab0..b0c1e5838 100644 --- a/docs/text.md +++ b/docs/text.md @@ -9,9 +9,15 @@ Use one of the following classes to enforce a certain wrapping behaviour. | .oc-text-truncate | Doesn't break to new lines. Text will be truncated, showing an ellipsis instead if necessary. | | .oc-text-break | Text will break to new lines at word ends if it exceeds one line. | -## Text size +## Text sizes -| Class | Description | -| ------------- | --------------------------------------------------------------- | -| .oc-text-initial | Sets the font size to 1rem, the document default. Allows for the combination of correct HTML tags (e.g. headings) without relying on huge font sizes. | -| .oc-text-lead | Sets a large font size to symbolise that the text is important. | +The ownCloud Design System uses a default font size which can be set on the html root element and then lets you use the +following text size classes to choose a size relative to the default font size. + +| Class | Description | +|-----------------|-----------------------------------------------------------------------------------------------------| +| .oc-text-xsmall | Sets the font size to 0.72rem. Value can be overwritten by setting the `oc-font-size-xsmall` token. | +| .oc-text-small | Sets the font size to 0.86rem. Value can be overwritten by setting the `oc-font-size-small` token. | +| .oc-text-medium | Sets the font size to 1rem. Value can be overwritten by setting the `oc-font-size-medium` token. | +| .oc-text-large | Sets the font size to 1.14rem. Value can be overwritten by setting the `oc-font-size-large` token. | +| .oc-text-xlarge | Sets the font size to 1.29rem. Value can be overwritten by setting the `oc-font-size-xlarge` token. | diff --git a/src/assets/fonts/inter.css b/src/assets/fonts/inter.css new file mode 100644 index 000000000..058ade4fb --- /dev/null +++ b/src/assets/fonts/inter.css @@ -0,0 +1,6 @@ +@font-face { + font-family: Inter; + src: url('inter.ttf') format('truetype'); + font-weight: 100 900; + font-style: oblique 0deg 12deg; +} diff --git a/src/assets/fonts/inter.ttf b/src/assets/fonts/inter.ttf new file mode 100644 index 000000000..ec3164efa Binary files /dev/null and b/src/assets/fonts/inter.ttf differ diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue index 420d234d9..09e21a9bf 100644 --- a/src/components/atoms/OcButton/OcButton.vue +++ b/src/components/atoms/OcButton/OcButton.vue @@ -203,7 +203,7 @@ export default { background-color: transparent; border-style: none; color: $color; - font-size: 1rem; + font-size: var(--oc-font-size-medium); font-weight: normal; min-height: 0; padding: 0; @@ -258,13 +258,12 @@ export default { @include oc-button-line-height(1); align-items: center; - border: 1px solid; - border-color: transparent; + border: 1px solid transparent; box-sizing: border-box; color: var(--oc-color-text-inverse); display: inline-flex; font-weight: 400; - padding: 0.5rem 0.75rem; + padding: 0.4rem 0.7rem; text-align: center; text-decoration: none; @@ -323,21 +322,21 @@ export default { &-s { @include oc-button-line-height(0.7); - font-size: 0.9rem; + font-size: var(--oc-font-size-small); min-height: 1.2rem; } &-m { @include oc-button-line-height(1); - font-size: 1.125rem; + font-size: var(--oc-font-size-medium); min-height: $global-control-height; } &-l { @include oc-button-line-height(1.5); - font-size: 1.5rem; + font-size: var(--oc-font-size-xlarge); min-height: 2rem; } @@ -363,13 +362,6 @@ export default { @extend .oc-background-primary-gradient; color: var(--oc-color-swatch-inverse-default) !important; - border: 1px solid - linear-gradient( - 90deg, - var(--oc-color-swatch-primary-muted) 0%, - var(--oc-color-swatch-primary-gradient) 100% - ) !important; - span > svg { fill: var(--oc-color-swatch-inverse-default) !important; } diff --git a/src/components/atoms/OcResourceIcon/OcResourceIcon.vue b/src/components/atoms/OcResourceIcon/OcResourceIcon.vue index d9d770d43..018471568 100644 --- a/src/components/atoms/OcResourceIcon/OcResourceIcon.vue +++ b/src/components/atoms/OcResourceIcon/OcResourceIcon.vue @@ -71,6 +71,7 @@ export default { .oc-resource-icon { display: inline-flex; align-items: center; + vertical-align: middle; &-file svg { height: 70%; } diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue index 1165d1f4f..47e155642 100644 --- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue +++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue @@ -219,7 +219,7 @@ export default { a, button, span { - font-size: 1rem; + font-size: var(--oc-font-size-medium); } } diff --git a/src/components/molecules/OcInfoDrop/OcInfoDrop.vue b/src/components/molecules/OcInfoDrop/OcInfoDrop.vue index 2d530ca66..01affa701 100644 --- a/src/components/molecules/OcInfoDrop/OcInfoDrop.vue +++ b/src/components/molecules/OcInfoDrop/OcInfoDrop.vue @@ -135,11 +135,11 @@ export default { vertical-align: middle; } .info-drop-content { - font-size: var(--oc-font-size-small); + font-size: var(--oc-font-size-medium); color: var(--oc-color-text-default); } .info-more-link { - font-size: var(--oc-font-size-small) !important; + font-size: var(--oc-font-size-medium) !important; } .info-header { align-items: center; diff --git a/src/components/organisms/OcAccordion/OcAccordion.vue b/src/components/organisms/OcAccordion/OcAccordion.vue index 7584072f3..e4c19b326 100644 --- a/src/components/organisms/OcAccordion/OcAccordion.vue +++ b/src/components/organisms/OcAccordion/OcAccordion.vue @@ -159,7 +159,7 @@ export default { @extend .oc-mb-rm; display: block; - font-size: var(--oc-font-size-medium); + font-size: var(--oc-font-size-large); &-arrow-icon { position: absolute; diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss index 3c16c5d48..4c366889d 100644 --- a/src/styles/theme/background.scss +++ b/src/styles/theme/background.scss @@ -12,10 +12,6 @@ linear-gradient(90deg, var(--oc-color-swatch-primary-muted) 0%, var(--oc-color-swatch-primary-gradient) 100%); - border-color: - linear-gradient(90deg, - var(--oc-color-swatch-primary-muted) 0%, - var(--oc-color-swatch-primary-gradient) 100%) !important; } /* stylelint-enable */ diff --git a/src/styles/theme/oc-form.scss b/src/styles/theme/oc-form.scss index 0210e1472..3233c6988 100644 --- a/src/styles/theme/oc-form.scss +++ b/src/styles/theme/oc-form.scss @@ -48,15 +48,15 @@ $form-disabled-color: var(--oc-color-text-muted) !default; $form-placeholder-color: var(--oc-color-text-muted) !default; -$form-small-height: var(--oc-font-size-default) !default; -$form-small-padding-horizontal: 8px !default; +$form-small-height: var(--oc-font-size-small) !default; +$form-small-padding-horizontal: var(--oc-space-small) !default; $form-small-line-height: $form-small-height !default; -$form-small-font-size: var(--oc-font-size-default) !default; +$form-small-font-size: var(--oc-font-size-small) !default; $form-large-height: var(--oc-font-size-large) !default; -$form-large-padding-horizontal: 12px !default; +$form-large-padding-horizontal: var(--oc-space-medium) !default; $form-large-line-height: $form-large-height !default; -$form-large-font-size: var(--oc-font-size-default) !default; +$form-large-font-size: var(--oc-font-size-large) !default; $form-danger-color: var(--oc-color-swatch-danger-default) !default; $form-success-color: var(--oc-color-swatch-success-default) !default; diff --git a/src/styles/theme/oc-text.scss b/src/styles/theme/oc-text.scss index 0b00659f2..d14c2cc4e 100644 --- a/src/styles/theme/oc-text.scss +++ b/src/styles/theme/oc-text.scss @@ -10,7 +10,11 @@ p { } html * { - font-family: Roboto, sans-serif; + font-family: var(--oc-font-family); +} + +html { + font-size: var(--oc-font-size-default); } a { @@ -22,19 +26,17 @@ a { } } -.oc-text-bold { - font-weight: 600 !important; -} - -.oc-text-muted { - color: var(--oc-color-text-muted); -} - .oc-heading-divider { border-bottom: calc(0.2px + 0.05em) solid var(--oc-color-border); padding-bottom: calc(5px + 0.1em); } +/* -------------------------- */ + +/* --- wrapping behaviour --- */ + +/* -------------------------- */ + /* * Prevent text from wrapping onto multiple lines */ @@ -75,48 +77,123 @@ td.oc-text-break { word-break: break-all; } -.oc-text-meta { - color: var(--oc-color-text-muted); - font-size: 0.875rem; - line-height: 1.4; -} +/* ----------------------- */ + +/* --- different sizes --- */ -.oc-text-initial { - font-size: 1rem; +/* ----------------------- */ + +/* + * x-small text size as defined by the `oc-font-size-xsmall` theme token. + * By default 0.72rem. + */ +.oc-text-xsmall { + font-size: var(--oc-font-size-xsmall); } +/* + * x-small text size as defined by the `oc-font-size-small` theme token. + * By default 0.86rem. + */ .oc-text-small { - font-size: 0.875rem; - line-height: 1.5; + font-size: var(--oc-font-size-small); } -.oc-text-normal { - font-weight: 400; +/* + * medium text size as defined by the `oc-font-size-medium` theme token. + * By default 1rem. This is the base font size as defined on the html document. + */ +.oc-text-medium { + font-size: var(--oc-font-size-medium); } +/* + * large text size as defined by the `oc-font-size-large` theme token. + * By default 1.14rem. + */ .oc-text-large { - font-size: 1.5rem; - line-height: 1.5; + font-size: var(--oc-font-size-large); } -.oc-text-lead { - color: var(--oc-color-text-default); - font-size: 1.5rem; - line-height: 1.5; +/* + * x-large text size as defined by the `oc-font-size-xlarge` theme token. + * By default 1.29rem. + */ +.oc-text-xlarge { + font-size: var(--oc-font-size-xlarge); +} + +/* ------------------------- */ + +/* --- different weights --- */ + +/* ------------------------- */ + +/* + * Normal font weight. + */ +.oc-text-normal { + font-weight: 400; +} + +/* + * Bold font weight. + */ +.oc-text-bold { + font-weight: 600; } +/* ----------------- */ + +/* --- alignment --- */ + +/* ----------------- */ + +/* + * Align horizontally centered. + */ .oc-text-center { text-align: center; } +/* + * Align horizontally left. + */ .oc-text-left { text-align: left; } +/* + * Align horizontally right. + */ .oc-text-right { text-align: right; } +/* ------------------------- */ + +/* --- special modifiers --- */ + +/* ------------------------- */ + +/* + * Give text a muted color and small size. + */ +.oc-text-meta { + color: var(--oc-color-text-muted); + font-size: var(--oc-font-size-small); +} + +/* + * Give text a muted color. + */ +.oc-text-muted { + color: var(--oc-color-text-muted); +} + +/* + * Transform text to all uppercase + */ .oc-text-uppercase { text-transform: uppercase !important; } diff --git a/src/system.js b/src/system.js index c52fcd482..7a81ae399 100644 --- a/src/system.js +++ b/src/system.js @@ -7,6 +7,7 @@ import "./styles/styles.scss" import { getSizeClass } from "./utils/sizeClasses.js" +import "./utils/webFontLoader.js" const exportContext = ctx => ctx.keys().reduce((acc, key) => { diff --git a/src/tokens/docs/font.yaml b/src/tokens/docs/font.yaml index 87d25aec9..2c231ac65 100644 --- a/src/tokens/docs/font.yaml +++ b/src/tokens/docs/font.yaml @@ -1,7 +1,7 @@ --- font: - text: - value: "'Roboto', sans-serif" + face: + value: 'Inter, sans-serif' weight: bold: value: '700' diff --git a/src/tokens/ods/font.yaml b/src/tokens/ods/font.yaml index 70ed036c9..3ded5e36b 100644 --- a/src/tokens/ods/font.yaml +++ b/src/tokens/ods/font.yaml @@ -1,11 +1,17 @@ --- font: + family: + value: 'Inter, sans-serif' size: default: - value: 1rem + value: 0.875rem + xsmall: + value: 0.72rem small: - value: 0.88rem + value: 0.86rem medium: - value: 1.25rem + value: 1rem large: - value: 1.5rem + value: 1.14rem + xlarge: + value: 1.29rem diff --git a/src/tokens/ods/size.yaml b/src/tokens/ods/size.yaml index 74d59e782..9e7b03b3b 100644 --- a/src/tokens/ods/size.yaml +++ b/src/tokens/ods/size.yaml @@ -5,12 +5,12 @@ size: value: 150px max-height: logo: - value: 65px + value: 60px height: small: value: 50px table-row: - value: 49px + value: 40px width: xsmall: value: 100px @@ -19,6 +19,6 @@ size: medium: value: 300px icon-default: - value: 24px + value: 22px form-check-default: - value: 16px + value: 14px diff --git a/src/utils/webFontLoader.js b/src/utils/webFontLoader.js index 86b1afe9e..8af81b1c1 100644 --- a/src/utils/webFontLoader.js +++ b/src/utils/webFontLoader.js @@ -5,7 +5,8 @@ import WebFont from "webfontloader" WebFont.load({ - google: { - families: ["Roboto:300,400,400i,600,700"], + custom: { + families: ["Inter"], + urls: ["/fonts/inter.css"], }, })