diff --git a/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue b/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue index f312f445..127992b5 100644 --- a/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue +++ b/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue @@ -119,7 +119,7 @@ export default { cursor: pointer; } &:hover:not(.bimdata-breadcrumb__step--last) { - font-weight: bold; + font-weight: 700; text-decoration: underline; } &::before { @@ -128,7 +128,7 @@ export default { height: 0; overflow: hidden; visibility: hidden; - font-weight: bold; + font-weight: 700; text-decoration: underline; } } diff --git a/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss b/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss index 1c329c70..92bae935 100644 --- a/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss +++ b/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss @@ -18,7 +18,7 @@ &.active { .bimdata-btn { - font-weight: bold; + font-weight: 700; } } } diff --git a/src/BIMDataComponents/BIMDataPagination/_BIMDataPagination.scss b/src/BIMDataComponents/BIMDataPagination/_BIMDataPagination.scss index 0840f1cc..44745604 100644 --- a/src/BIMDataComponents/BIMDataPagination/_BIMDataPagination.scss +++ b/src/BIMDataComponents/BIMDataPagination/_BIMDataPagination.scss @@ -9,7 +9,7 @@ &.active { .bimdata-btn { - font-weight: bold; + font-weight: 700; } } } diff --git a/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss b/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss index 2bcf7d6a..7b169bbc 100644 --- a/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss +++ b/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss @@ -101,7 +101,7 @@ &.option-group { color: var(--color-granite); - font-weight: bold; + font-weight: 700; &:hover { background-color: transparent; cursor: default; diff --git a/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss b/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss index de0bbc09..10a17d94 100644 --- a/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss +++ b/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss @@ -24,7 +24,7 @@ } th { - font-weight: bold; + font-weight: 700; color: var(--color-primary); } @@ -39,7 +39,7 @@ align-items: center; padding: var(--spacing-unit); font-size: 1rem; - font-weight: bold; + font-weight: 700; background-color: var(--color-silver-light); } } diff --git a/src/BIMDataComponents/BIMDataText/BIMDataText.vue b/src/BIMDataComponents/BIMDataText/BIMDataText.vue index e59bb54f..c0095292 100644 --- a/src/BIMDataComponents/BIMDataText/BIMDataText.vue +++ b/src/BIMDataComponents/BIMDataText/BIMDataText.vue @@ -20,7 +20,7 @@ export default { }, fontWeight: { type: String, - default: "primary-font", + default: "400", }, lineHeight: { type: String, @@ -55,16 +55,14 @@ export default { }, computed: { classes() { - return { - [`${this.color}`]: this.color, - [`${this.fontWeight}`]: this.fontWeight, - }; + return `${this.color}`; }, style() { return { - "font-size": `${this.calcFontSize}`, - "line-height": `${this.calcLineHeight}`, + fontSize: `${this.calcFontSize}`, + lineHeight: `${this.calcLineHeight}`, display: `${this.display}`, + fontWeight: `${this.fontWeight}`, margin: `${this.margin}`, padding: `${this.padding}`, }; diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.scss b/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.scss index 5bbefbd1..7582f982 100644 --- a/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.scss +++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.scss @@ -87,7 +87,7 @@ &__name { font-size: 12px; - font-weight: bold; + font-weight: 700; color: $color-granite; word-break: break-word; -webkit-line-clamp: 2; diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue index 0d738844..1eede459 100644 --- a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue +++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue @@ -158,7 +158,7 @@ export default { max-width: 350px; &__title { - font-weight: bold; + font-weight: 700; font-size: 120%; } diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue index c21a85b4..77ae7715 100644 --- a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue +++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue @@ -172,7 +172,7 @@ export default { max-width: 350px; &__title { - font-weight: bold; + font-weight: 700; font-size: 120%; } diff --git a/src/assets/css/_BIMDataFonts.css b/src/assets/css/_BIMDataFonts.css index 6706cc4b..080c470c 100644 --- a/src/assets/css/_BIMDataFonts.css +++ b/src/assets/css/_BIMDataFonts.css @@ -1,14 +1,14 @@ @font-face { - font-family: "robotobold"; + font-family: "roboto"; src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"), url("../fonts/roboto-bold-webfont.woff2") format("woff"); - font-weight: 700; + font-weight: 600 700; font-style: bold; font-display: fallback; } @font-face { - font-family: "robotomedium"; + font-family: "robot"; src: url("../fonts/roboto-medium-webfont.woff2") format("woff2"), url("../fonts/roboto-medium-webfont.woff") format("woff"); font-weight: 500; @@ -17,10 +17,10 @@ } @font-face { - font-family: "robotoregular"; + font-family: "roboto"; src: url("../fonts/roboto-regular-webfont.woff2") format("woff2"), url("../fonts/roboto-regular-webfont.woff") format("woff"); - font-weight: 400; + font-weight: 100 400; font-style: normal; font-display: fallback; } diff --git a/src/assets/css/_BIMDataVariables.css b/src/assets/css/_BIMDataVariables.css index f9c4c330..587e203a 100644 --- a/src/assets/css/_BIMDataVariables.css +++ b/src/assets/css/_BIMDataVariables.css @@ -61,7 +61,5 @@ html { --size-btn-options: 45px; /* base FONTS -------------------------------------- */ - --primary-font: "robotoregular", sans-serif; - --primary-font-medium: "robotomedium", sans-serif; - --primary-font-bold: "robotobold", sans-serif; + --primary-font: "roboto", sans-serif; } diff --git a/src/assets/css/utilities/_text.css b/src/assets/css/utilities/_text.css index 967054be..bc894910 100644 --- a/src/assets/css/utilities/_text.css +++ b/src/assets/css/utilities/_text.css @@ -17,9 +17,3 @@ .primary-font { font-family: var(--primary-font); } -.primary-font-medium { - font-family: var(--primary-font-medium); -} -.primary-font-bold { - font-family: var(--primary-font-bold); -} diff --git a/src/assets/scss/BIMData.scss b/src/assets/scss/BIMData.scss index 3efc7045..f217f351 100644 --- a/src/assets/scss/BIMData.scss +++ b/src/assets/scss/BIMData.scss @@ -1,3 +1,5 @@ +@import "./BIMDataFonts.scss"; + // import GLOBAL STYLE @import "./BIMDataVariables.scss"; @import "./BIMDataGlobal.scss"; diff --git a/src/assets/scss/_BIMDataFonts.scss b/src/assets/scss/_BIMDataFonts.scss index d654e769..0f686f4d 100644 --- a/src/assets/scss/_BIMDataFonts.scss +++ b/src/assets/scss/_BIMDataFonts.scss @@ -1,26 +1,26 @@ @font-face { - font-family: "robotobold"; + font-family: "roboto"; src: url("~@/assets/fonts/roboto-bold-webfont.woff2") format("woff2"), url("~@/assets/fonts/roboto-bold-webfont.woff2") format("woff"); - font-weight: 700; - font-style: normal; + font-weight: 600 700; + font-style: bold; font-display: fallback; } @font-face { - font-family: "robotomedium"; + font-family: "roboto"; src: url("~@/assets/fonts/roboto-medium-webfont.woff2") format("woff2"), url("~@/assets/fonts/roboto-medium-webfont.woff") format("woff"); font-weight: 500; - font-style: normal; + font-style: medium; font-display: fallback; } @font-face { - font-family: "robotoregular"; + font-family: "roboto"; src: url("~@/assets/fonts/roboto-regular-webfont.woff2") format("woff2"), url("~@/assets/fonts/roboto-regular-webfont.woff") format("woff"); - font-weight: 400; + font-weight: 100 400; font-style: normal; font-display: fallback; } diff --git a/src/assets/scss/_BIMDataVariables.scss b/src/assets/scss/_BIMDataVariables.scss index 17c13b80..7d342887 100644 --- a/src/assets/scss/_BIMDataVariables.scss +++ b/src/assets/scss/_BIMDataVariables.scss @@ -31,9 +31,7 @@ $spacing-unit: 12px; $size-btn-options: 45px; /* base FONTS -------------------------------------- */ -$primary-font: "robotoregular", sans-serif; -$primary-font-medium: "robotomedium", sans-serif; -$primary-font-bold: "robotobold", sans-serif; +$primary-font: "roboto", sans-serif; html { /* base COLORS ------------------------------------------- */ @@ -102,7 +100,5 @@ html { --size-btn-options: 45px; /* base FONTS -------------------------------------- */ - --primary-font: "robotoregular", sans-serif; - --primary-font-medium: "robotomedium", sans-serif; - --primary-font-bold: "robotobold", sans-serif; + --primary-font: "roboto", sans-serif; } diff --git a/src/assets/scss/utilities/_text.scss b/src/assets/scss/utilities/_text.scss index d1836cfb..1aae62fd 100644 --- a/src/assets/scss/utilities/_text.scss +++ b/src/assets/scss/utilities/_text.scss @@ -12,16 +12,10 @@ .bimdata-link { color: var(--color-primary); border-bottom: 1px solid var(--color-primary); - font-weight: bold; + font-weight: 700; } /* BIMDATA FONT WEIGHT */ .primary-font { - font-family: "robotoregular", sans-serif; -} -.primary-font-medium { - font-family: "robotomedium", sans-serif; -} -.primary-font-bold { - font-family: "robotobold", sans-serif; + font-family: "roboto", sans-serif; } diff --git a/src/web/_DesignSystem-global.scss b/src/web/_DesignSystem-global.scss index cf705b9a..ec16f45e 100644 --- a/src/web/_DesignSystem-global.scss +++ b/src/web/_DesignSystem-global.scss @@ -89,5 +89,5 @@ pre[class*="language-"] { margin: 0 2px; border-radius: 2px; color: var(--color-primary); - font-weight: bold; + font-weight: 700; } diff --git a/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss b/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss index 50c68985..afd67626 100644 --- a/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss +++ b/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss @@ -11,7 +11,7 @@ align-items: center; background-color: var(--color-silver-light); color: var(--color-primary); - font-weight: bold; + font-weight: 700; } .demo-parameters { diff --git a/src/web/views/Components/Table/Table.vue b/src/web/views/Components/Table/Table.vue index d1cfdb2d..e78b3865 100644 --- a/src/web/views/Components/Table/Table.vue +++ b/src/web/views/Components/Table/Table.vue @@ -350,7 +350,7 @@ export default { &__label { margin-bottom: 12px; - font-weight: bold; + font-weight: 700; } } diff --git a/src/web/views/Components/Text/Text.vue b/src/web/views/Components/Text/Text.vue index bda6a2ac..cebd55a4 100644 --- a/src/web/views/Components/Text/Text.vue +++ b/src/web/views/Components/Text/Text.vue @@ -25,10 +25,7 @@ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. @@ -180,7 +177,7 @@ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - <BIMDataText component="span" color="color-primary" fontWeight="primary-font-bold">reprehenderit</BIMDataText> + <BIMDataText component="span" color="color-primary" fontWeight="700">reprehenderit</BIMDataText> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." @@ -222,18 +219,14 @@ export default { placeholder: false, disabled: false, selectedTextOptionscolor: "color-granite-light", - selectedTextFontWeight: "primary-font", + selectedTextFontWeight: "400", selectedTextComponent: "p", displayText: "inline-block", fontSizeText: "", lineHeightText: "", marginText: "", paddingText: "", - fontWeightText: [ - "primary-font", - "primary-font-medium", - "primary-font-bold", - ], + fontWeightText: ["400", "500", "700"], componentsText: ["h1", "h2", "h3", "h4", "h5", "p"], textOptions: { color: [ @@ -252,54 +245,62 @@ export default { ], }, propsData: [ - ["Props", "Type", "Default value", "Description"], + ["Props", "Type", "Default value", "Description", "Example"], [ "component", "String", "p", - "Use this prop to use a particular title / text block. For example: h1, h2, p, span...", + "Use this prop to use a particular title / text block.", + "h1, h2, p, span...", ], [ "display", "String", "inline-block", "Use this prop to customize the display of the text block", + "", ], [ "fontWeight", "String", - "primary-font", - "Use this prop to customize the font-weight of the text block", + "400", + "Use this prop to customize the font-weight of the text block.", + "400 for regular ; 500 for medium and 700 for bold.", ], [ "fontSize", "String", "14px", "Use this prop to customize the font-size of the text block. By default, a font-size is assigned for each h1, h2, h3, h4, h5 and p. But if you use this prop you can override it", + "", ], [ "lineHeight", "String", "18px", "Use this prop to customize the line-height of the text block. By default, a line-height is assigned for each h1, h2, h3, h4, h5 and p. But if you use this prop you can override it", + "", ], [ "margin", "String", "0px", "Use this prop to customize the margin of the text block.", + "", ], [ "padding", "String", "0px", "Use this prop to customize the padding of the text block.", + "", ], [ "color", "String", "color-granite-light", "Use this prop to customize the color of the text block. To know the authorized values, refer to the 'COLOR UTILITY CLASS' line of the Guidelines & Utilities ; Colors page.", + "", ], ], }; @@ -331,7 +332,7 @@ export default { } }, getFontWeight() { - if (this.selectedTextFontWeight != "primary-font") { + if (this.selectedTextFontWeight != "400") { return `fontWeight="${this.selectedTextFontWeight}"`; } }, diff --git a/src/web/views/Guidelines/Typography/Typography.vue b/src/web/views/Guidelines/Typography/Typography.vue index 17bc1473..6ad08b47 100644 --- a/src/web/views/Guidelines/Typography/Typography.vue +++ b/src/web/views/Guidelines/Typography/Typography.vue @@ -32,8 +32,8 @@ Use this css classes in html class : 
@@ -41,22 +41,6 @@
-
- Use this scss variables like a 'font-family' property - : - - - 
-              @import "node_modules/@bimdata/design-system/dist/scss/BIMDataVariables.scss"
-
- -
@@ -110,17 +94,9 @@ export default { ["h5", "16px / 1.1em", "20px / 1.4em"], ["p", "14px / 1em", "18px / 1.3em"], ], - weightClass: [ + fontFamilyClass: [ ["Class Name", "Output value"], - ["primary-font", "font-family: 'robotoregular', sans-serif;"], - ["primary-font-medium", "font-family: 'robotomedium', sans-serif;"], - ["primary-font-bold", "font-family: 'robotobold', sans-serif;"], - ], - weightUtilities: [ - ["Font weight utility class", "Output value"], - ["$primary-font", "'robotoregular', sans-serif"], - ["$primary-font-medium", "'robotomedium', sans-serif"], - ["$primary-font-bold", "'robotobold', sans-serif"], + ["primary-font", "font-family: 'roboto', sans-serif;"], ], }; }, diff --git a/src/web/views/Guidelines/Typography/_Typography.scss b/src/web/views/Guidelines/Typography/_Typography.scss index 5b755c62..0a312af7 100644 --- a/src/web/views/Guidelines/Typography/_Typography.scss +++ b/src/web/views/Guidelines/Typography/_Typography.scss @@ -22,12 +22,12 @@ } &:nth-child(2) { p { - font-family: var(--primary-font-medium); + font-weight: 500; } } &:nth-child(3) { p { - font-family: var(--primary-font-bold); + font-weight: 700; } } } diff --git a/src/web/views/Guidelines/Utilities/Utilities.vue b/src/web/views/Guidelines/Utilities/Utilities.vue index 333047eb..8a1a7369 100644 --- a/src/web/views/Guidelines/Utilities/Utilities.vue +++ b/src/web/views/Guidelines/Utilities/Utilities.vue @@ -167,12 +167,10 @@ export default { ["text-left", "text-align: left;"], ["text-center", "text-align: center;"], ["text-right", "text-align: right;"], - ["primary-font", "font-family: 'robotoregular', sans-serif;"], - ["primary-font-medium", "font-family: 'robotomedium', sans-serif;"], - ["primary-font-bold", "font-family: 'robotobold', sans-serif;"], + ["primary-font", "font-family: 'roboto', sans-serif;"], [ "bimdata-link", - "color: #2f374a; border-bottom: 1px solid #2f374a; font-weight: bold;", + "color: #2f374a; border-bottom: 1px solid #2f374a; font-weight: 700;", ], ], }; diff --git a/src/web/views/Guidelines/Variables/Variables.vue b/src/web/views/Guidelines/Variables/Variables.vue index db22687d..1371305b 100644 --- a/src/web/views/Guidelines/Variables/Variables.vue +++ b/src/web/views/Guidelines/Variables/Variables.vue @@ -144,9 +144,7 @@ export default { ], variablesFontSummary: [ ["SCSS Variable Name", "CSS Variable Name", "Output value"], - ["$primary-font", "--primary-font", "'robotoregular';"], - ["$primary-font-medium", "--primary-font-medium", "'robotomedium';"], - ["$primary-font-bold", "--primary-font-bold", "'robotobold';"], + ["$primary-font", "--primary-font", "'roboto';"], ], }; }, diff --git a/src/web/views/Home/Home.vue b/src/web/views/Home/Home.vue index 7002b3c7..50edaed4 100644 --- a/src/web/views/Home/Home.vue +++ b/src/web/views/Home/Home.vue @@ -12,10 +12,10 @@