Merge pull request #6171 from Semantic-Org/add-font-weights

Add font weight global variables

RELEASE-NOTES.md

@@ -5,6 +5,7 @@
 **Major Enhancements**
 - **Icons** - Font Awesome 5 is now included in Semantic UI **Thanks @hammy2899** #6085
 - **Search** - Category search can now work with local search by adding a `category` property to any result and specifying `type: 'category'`
+- **Theming** - Added global variables for reassigning `normal` and `bold` font weights for custom font stacks.
 - **Search** - Category results now has `exact` matching
 - **Modal** - Modal has been rewritten to use `flexbox`. No need to call `refresh()` to recalculate vertical centering.
 - **Modal** - Modals now have a setting `centered` which can be used to disable vertical centering. This can be useful for modals with content that changes dynamically to prevent content from jumping in position.
@@ -14,7 +15,8 @@
 - **Dimmer** - Dimmers now have centered content with a single wrapping `content` element.
 - **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg)
 - **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/)
-- **Popup** - Popup `arrowBackground` now inherits from `background` #6059 **Thanks @devsli**
+- **Popup** - `arrowBackground` now inherits from `background` #6059 **Thanks @devsli**
+- **Popup** - Adds new variable `headerFontWeight`
 
 **Bugs**
 - **Modal** - Modal `autofocus` setting now checks to see if currently focused element is in modal, avoiding issues where focus could be set in `onVisible` or `onShow`

src/definitions/collections/table.less

@@ -186,7 +186,7 @@
   }
   .ui.table:not(.unstackable) th:first-child,
   .ui.table:not(.unstackable) td:first-child {
-    font-weight: bold;
+    font-weight: @responsiveCellHeaderFontWeight;
   }
 
   /* Definition Table */
@@ -888,7 +888,7 @@
 .ui.sortable.table thead th:after {
   display: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: @normal;
   text-decoration: inherit;
   content: '';
   height: 1em;

src/definitions/elements/header.less

@@ -48,7 +48,7 @@
 
 .ui.header .sub.header {
   display: block;
-  font-weight: normal;
+  font-weight: @normal;
   padding: 0em;
   margin: @subHeaderMargin;
   font-size: @subHeaderFontSize;

src/definitions/elements/icon.less

@@ -28,7 +28,7 @@
   src: @fallbackSRC;
   src: @src;
   font-style: normal;
-  font-weight: normal;
+  font-weight: @normal;
   font-variant: normal;
   text-decoration: inherit;
   text-transform: none;
@@ -45,7 +45,7 @@ i.icon {
 
   font-family: 'Icons';
   font-style: normal;
-  font-weight: normal;
+  font-weight: @normal;
   text-decoration: inherit;
   text-align: center;
 

src/definitions/elements/input.less

@@ -29,7 +29,7 @@
 
 .ui.input {
   position: relative;
-  font-weight: normal;
+  font-weight: @normal;
   font-style: normal;
   display: inline-flex;
   color: @inputColor;

src/definitions/elements/list.less

@@ -563,7 +563,7 @@ ul.ui.list li:before,
   position: absolute;
   top: auto;
   left: auto;
-  font-weight: normal;
+  font-weight: @normal;
   margin-left: @bulletOffset;
   content: @bulletCharacter;
   opacity: @bulletOpacity;

src/definitions/modules/popup.less

@@ -52,7 +52,7 @@
   font-family: @headerFont;
   font-size: @headerFontSize;
   line-height: @headerLineHeight;
-  font-weight: bold;
+  font-weight: @headerFontWeight;
 }
 .ui.popup > .header + .content {
   padding-top: @headerDistance;

src/definitions/modules/rating.less

@@ -36,7 +36,7 @@
   padding: 0em;
   margin: 0em;
   text-align: center;
-  font-weight: normal;
+  font-weight: @normal;
   font-style: normal;
   flex: 1 0 auto;
   cursor: @iconCursor;

src/definitions/modules/search.less

@@ -34,7 +34,7 @@
 
   text-shadow: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: @normal;
 
   line-height: @promptLineHeight;
   padding: @promptPadding;

src/themes/default/collections/breadcrumb.variables

@@ -30,4 +30,4 @@
        States
 --------------------*/
 
-@activeFontWeight: bold;
+@activeFontWeight: @bold;

src/themes/default/collections/form.variables

@@ -23,7 +23,7 @@
 @labelDistance: @4px;
 @labelMargin: 0em 0em @labelDistance 0em;
 @labelFontSize: @relativeSmall;
-@labelFontWeight: bold;
+@labelFontWeight: @bold;
 @labelTextTransform: none;
 @labelColor: @textColor;
 

src/themes/default/collections/menu.variables

@@ -13,7 +13,7 @@
 @background: #FFFFFF;
 @fontFamily: @pageFont;
 @itemBackground: none;
-@fontWeight: normal;
+@fontWeight: @normal;
 @borderWidth: 1px;
 @border: @borderWidth solid @borderColor;
 @boxShadow: @subtleShadow;
@@ -29,7 +29,7 @@
   box-shadow @defaultDuration @defaultEasing,
   color @defaultDuration @defaultEasing
 ;
-@itemFontWeight: normal;
+@itemFontWeight: @normal;
 @itemTextColor: @textColor;
 
 /* Divider */
@@ -64,8 +64,8 @@
 
 /* Header */
 @headerBackground: '';
-@headerWeight: bold;
-@headerTextTransform: normal;
+@headerWeight: @bold;
+@headerTextTransform: @normal;
 
 /* Vertical Icon */
 @verticalIconFloat: right;
@@ -74,7 +74,7 @@
 /* Vertical Header */
 @verticalHeaderMargin: 0em 0em 0.5em;
 @verticalHeaderFontSize: @relativeMedium;
-@verticalHeaderFontWeight: bold;
+@verticalHeaderFontWeight: @bold;
 
 /* Pointing Arrow */
 @arrowSize: @relative8px;
@@ -136,7 +136,7 @@
 @dropdownItemBackground: transparent;
 @dropdownItemColor: @textColor;
 @dropdownItemTextTransform: none;
-@dropdownItemFontWeight: normal;
+@dropdownItemFontWeight: @normal;
 @dropdownItemBoxShadow: none;
 @dropdownItemTransition: none;
 
@@ -169,7 +169,7 @@
 /* Active Item */
 @activeItemBackground: @transparentBlack;
 @activeItemTextColor: @selectedTextColor;
-@activeItemFontWeight: normal;
+@activeItemFontWeight: @normal;
 @activeIconOpacity: 1;
 @activeItemBoxShadow: none;
 
@@ -184,12 +184,12 @@
 /* Active Dropdown */
 @dropdownActiveItemBackground: @subtleTransparentBlack;
 @dropdownActiveItemColor: @selectedTextColor;
-@dropdownActiveItemFontWeight: bold;
+@dropdownActiveItemFontWeight: @bold;
 
 /* Active Sub Menu */
 @subMenuActiveBackground: transparent;
 @subMenuActiveTextColor: @activeItemTextColor;
-@subMenuActiveFontWeight: bold;
+@subMenuActiveFontWeight: @bold;
 
 
 /*--------------
@@ -252,7 +252,7 @@
 
 @secondaryPointingActiveBorderColor: @black;
 @secondaryPointingActiveTextColor: @selectedTextColor;
-@secondaryPointingActiveFontWeight: bold;
+@secondaryPointingActiveFontWeight: @bold;
 
 @secondaryPointingActiveDropdownBorderColor: transparent;
 
@@ -285,8 +285,8 @@
 @tieredActiveItemBackground: #FCFCFC;
 @tieredActiveMenuBackground: #FCFCFC;
 
-@tieredSubMenuTextTransform: normal;
-@tieredSubMenuFontWeight: normal;
+@tieredSubMenuTextTransform: @normal;
+@tieredSubMenuFontWeight: @normal;
 
 @tieredSubMenuColor: @lightTextColor;
 
@@ -326,7 +326,7 @@
 @tabularActiveBackground: none @white;
 @tabularActiveColor: @selectedTextColor;
 @tabularActiveBoxShadow: none;
-@tabularActiveWeight: bold;
+@tabularActiveWeight: @bold;
 
 
 
@@ -346,7 +346,7 @@
 @textMenuItemSpacing: @relative7px;
 @textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
 @textMenuItemColor: @mutedTextColor;
-@textMenuItemFontWeight: normal;
+@textMenuItemFontWeight: @normal;
 @textMenuItemMargin: 0em 0em;
 @textMenuItemPadding: @relative5px @textMenuItemSpacing;
 @textMenuItemTransition: opacity @defaultDuration @defaultEasing;
@@ -355,12 +355,12 @@
 @textMenuSubMenuItemMargin: 0em;
 @textMenuSubMenuItemPadding: @relative7px 0em;
 
-@textMenuActiveItemFontWeight: normal;
+@textMenuActiveItemFontWeight: @normal;
 @textMenuActiveItemColor: @selectedTextColor;
 
 @textMenuHeaderSize: @relativeSmall;
 @textMenuHeaderColor: @darkTextColor;
-@textMenuHeaderFontWeight: bold;
+@textMenuHeaderFontWeight: @bold;
 @textMenuHeaderTextTransform: uppercase;
 
 @textVerticalMenuMargin: @relativeMedium 0em;

src/themes/default/collections/message.variables

@@ -33,7 +33,7 @@
 
 /* Header */
 @headerFontSize: @relativeLarge;
-@headerFontWeight: bold;
+@headerFontWeight: @bold;
 @headerDisplay: block;
 @headerDistance: 0rem;
 @headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em;

src/themes/default/collections/table.variables

@@ -47,7 +47,7 @@
 @headerVerticalPadding: @relativeSmall;
 @headerHorizontalPadding: @cellHorizontalPadding;
 @headerFontStyle: none;
-@headerFontWeight: bold;
+@headerFontWeight: @bold;
 @headerTextTransform: none;
 @headerBoxShadow: none;
 
@@ -61,8 +61,8 @@
 @footerColor: @textColor;
 @footerVerticalPadding: @cellVerticalPadding;
 @footerHorizontalPadding: @cellHorizontalPadding;
-@footerFontStyle: normal;
-@footerFontWeight: normal;
+@footerFontStyle: @normal;
+@footerFontWeight: @normal;
 @footerTextTransform: none;
 
 /* Responsive Size */
@@ -73,6 +73,7 @@
 @responsiveCellVerticalPadding: 0.25em;
 @responsiveCellHorizontalPadding: 0.75em;
 @responsiveCellBoxShadow: none !important;
+@responsiveCellHeaderFontWeight: @bold;
 
 /*-------------------
        Types
@@ -83,14 +84,14 @@
 
 @definitionHeaderBackground: transparent;
 @definitionHeaderColor: @unselectedTextColor;
-@definitionHeaderFontWeight: normal;
+@definitionHeaderFontWeight: @normal;
 
 @definitionFooterBackground: @definitionHeaderBackground;
 @definitionFooterColor: @definitionHeaderColor;
 @definitionFooterFontWeight: @definitionHeaderFontWeight;
 
 @definitionColumnBackground: @subtleTransparentBlack;
-@definitionColumnFontWeight: bold;
+@definitionColumnFontWeight: @bold;
 @definitionColumnColor: @selectedTextColor;
 @definitionColumnFontSize: @relativeMedium;
 @definitionColumnTextTransform: '';
@@ -213,7 +214,7 @@
 
 @invertedDefinitionColumnBackground: @subtleTransparentWhite;
 @invertedDefinitionColumnColor: @invertedSelectedTextColor;
-@invertedDefinitionColumnFontWeight: bold;
+@invertedDefinitionColumnFontWeight: @bold;
 
 /* Basic */
 @basicTableBackground: transparent;

src/themes/default/elements/button.variables

@@ -22,7 +22,7 @@
 @textTransform: none;
 @tapColor: transparent;
 @fontFamily: @pageFont;
-@fontWeight: bold;
+@fontWeight: @bold;
 @textColor: rgba(0, 0, 0, 0.6);
 @textShadow: none;
 @invertedTextShadow: @textShadow;
@@ -152,8 +152,8 @@
 
 @orBackgroundColor: @white;
 @orTextShadow: @invertedTextShadow;
-@orTextStyle: normal;
-@orTextWeight: bold;
+@orTextStyle: @normal;
+@orTextWeight: @bold;
 @orTextColor: @lightTextColor;
 
 
@@ -198,7 +198,7 @@
 @basicColoredBorderSize: 1px;
 
 @basicBackground: transparent none;
-@basicFontWeight: normal;
+@basicFontWeight: @normal;
 @basicBorder: 1px solid @borderColor;
 @basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset;
 @basicLoadingColor: @offWhite;

src/themes/default/elements/divider.variables

@@ -16,7 +16,7 @@
 
 /* Text */
 @letterSpacing: 0.05em;
-@fontWeight: bold;
+@fontWeight: @bold;
 @color: @darkTextColor;
 @textTransform: uppercase;
 
@@ -50,4 +50,4 @@
 @sectionMargin: 2rem;
 
 /* Sizes */
-@medium: 1rem;
+@medium: 1rem;

src/themes/default/elements/header.variables

@@ -24,7 +24,7 @@
 /* Sub Heading */
 @subHeadingDistance: @2px;
 @subHeadingFontSize: @relativeTiny;
-@subHeadingFontWeight: bold;
+@subHeadingFontWeight: @bold;
 @subHeadingTextTransform: uppercase;
 @subHeadingColor: '';
 

src/themes/default/elements/label.variables

@@ -16,7 +16,7 @@
 @horizontalPadding: 0.833em;
 @borderRadius: @absoluteBorderRadius;
 @textTransform: none;
-@fontWeight: bold;
+@fontWeight: @bold;
 @borderWidth: 1px;
 @border: 0px solid transparent;
 
@@ -45,7 +45,7 @@
 @imageHeight: (1em + @verticalPadding * 2);
 
 /* Detail */
-@detailFontWeight: bold;
+@detailFontWeight: @bold;
 @detailOpacity: 0.8;
 @detailIconDistance: 0.25em;
 @detailMargin: 1em;
@@ -208,7 +208,7 @@
 
 /* Corner Text */
 @cornerTextWidth: 3em;
-@cornerTextWeight: bold;
+@cornerTextWeight: @bold;
 @cornerTextSize: 1em;
 
 /* Horizontal */

src/themes/default/elements/list.variables

@@ -52,7 +52,7 @@
 
 /* Header */
 @itemHeaderFontFamily: @headerFont;
-@itemHeaderFontWeight: bold;
+@itemHeaderFontWeight: @bold;
 @itemHeaderColor: @textColor;
 
 /* Description */

src/themes/default/elements/step.variables

@@ -47,14 +47,14 @@
 
 /* Title */
 @titleFontFamily: @headerFont;
-@titleFontWeight: bold;
+@titleFontWeight: @bold;
 @titleFontSize: @relativeLarge;
 @titleColor: @darkTextColor;
 
 /* Description */
 @descriptionDistance: 0.25em;
 @descriptionFontSize: @relativeSmall;
-@descriptionFontWeight: normal;
+@descriptionFontWeight: @normal;
 @descriptionColor: @textColor;
 
 
@@ -98,7 +98,7 @@
 @attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
 
 @orderedFontFamily: inherit;
-@orderedFontWeight: bold;
+@orderedFontWeight: @bold;
 
 /*-------------------
        States

src/themes/default/globals/site.variables

@@ -20,6 +20,10 @@
 @googleProtocol    : 'https://';
 @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
 
+
+@bold              : bold;
+@normal            : normal;
+
 /*-------------------
       Base Sizes
 --------------------*/
@@ -57,7 +61,7 @@
   Page Heading
 ---------------*/
 
-@headerFontWeight : bold;
+@headerFontWeight : @bold;
 @headerLineHeight : unit((18 / 14), em);
 
 @h1 : unit((28 / 14), rem);

src/themes/default/modules/accordion.overrides

@@ -25,4 +25,4 @@
 .ui.accordion .title .dropdown.icon:before,
 .ui.accordion .accordion .title .dropdown.icon:before {
   content: '\f0da'/*rtl:'\f0d9'*/;
-}
+}

src/themes/default/modules/accordion.variables

@@ -74,7 +74,7 @@
 /* Styled Title */
 @styledTitleMargin: 0em;
 @styledTitlePadding: 0.75em 1em;
-@styledTitleFontWeight: bold;
+@styledTitleFontWeight: @bold;
 @styledTitleColor: @unselectedTextColor;
 @styledTitleTransition: background-color @defaultDuration @defaultEasing;
 @styledTitleBorder: 1px solid @borderColor;

src/themes/default/modules/dropdown.variables

@@ -56,7 +56,7 @@
 @itemVerticalPadding: @mini;
 @itemHorizontalPadding: @large;
 @itemPadding: @itemVerticalPadding @itemHorizontalPadding;
-@itemFontWeight: normal;
+@itemFontWeight: @normal;
 @itemLineHeight: 1em;
 @itemLineHeightOffset: (@itemLineHeight - 1em);
 @itemTextTransform: none;
@@ -74,7 +74,7 @@
 /* Menu Header */
 @menuHeaderColor: @darkTextColor;
 @menuHeaderFontSize: @relative11px;
-@menuHeaderFontWeight: bold;
+@menuHeaderFontWeight: @bold;
 @menuHeaderTextTransform: uppercase;
 @menuHeaderMargin: 1rem 0rem 0.75rem;
 @menuHeaderPadding: 0em @itemHorizontalPadding;
@@ -112,7 +112,7 @@
 
 /* Message */
 @messagePadding: @selectionItemPadding;
-@messageFontWeight: normal;
+@messageFontWeight: @normal;
 @messageColor: @unselectedTextColor;
 
 /* Floated Content */
@@ -198,7 +198,7 @@
 @selectionFocusMenuBoxShadow: @raisedShadow;
 
 /* Visible */
-@selectionVisibleTextFontWeight: normal;
+@selectionVisibleTextFontWeight: @normal;
 @selectionVisibleTextColor: @hoveredTextColor;
 
 @selectionVisibleBorderColor: @focusedFormMutedBorderColor;
@@ -234,7 +234,7 @@
 /* Inline */
 @inlineIconMargin: 0em @relative7px 0em @relative3px;
 @inlineTextColor: inherit;
-@inlineTextFontWeight: bold;
+@inlineTextFontWeight: @bold;
 @inlineMenuDistance: @relative3px;
 @inlineMenuBorderRadius: @borderRadius;
 
@@ -294,7 +294,7 @@
 @activeItemZIndex: @menuZIndex + 1;
 @activeItemBackground: transparent;
 @activeItemBoxShadow: none;
-@activeItemFontWeight: bold;
+@activeItemFontWeight: @bold;
 @activeItemColor: @selectedTextColor;
 
 /* Selected */

src/themes/default/modules/modal.variables

@@ -33,7 +33,7 @@
 @headerColor: @darkTextColor;
 @headerFontSize: @huge;
 @headerBoxShadow: none;
-@headerFontWeight: bold;
+@headerFontWeight: @bold;
 @headerFontFamily: @headerFont;
 @headerBorder: 1px solid @borderColor;
 

src/themes/default/modules/popup.variables

@@ -17,8 +17,8 @@
 
 @verticalPadding: 0.833em;
 @horizontalPadding: 1em;
-@fontWeight: normal;
-@fontStyle: normal;
+@fontWeight: @normal;
+@fontStyle: @normal;
 @borderRadius: @defaultBorderRadius;
 
 /*-------------------
@@ -35,6 +35,7 @@
 
 /* Header */
 @headerFontFamily: @headerFont;
+@headerFontWeight: @bold;
 @headerFontSize: @relativeLarge;
 @headerDistance: @relative7px;
 @headerLineHeight: 1.2;

src/themes/default/modules/progress.variables

@@ -42,7 +42,7 @@
 @progressOffset: -0.5em;
 @progressColor: @invertedLightTextColor;
 @progressTextShadow: none;
-@progressFontWeight: bold;
+@progressFontWeight: @bold;
 @progressTextAlign: left;
 
 /* Label */
@@ -57,7 +57,7 @@
 @labelOffset: (@labelHeight - 1.3em);
 @labelColor: @textColor;
 @labelTextShadow: none;
-@labelFontWeight: bold;
+@labelFontWeight: @bold;
 @labelTextAlign: center;
 @labelTransition: color 0.4s @defaultEasing;
 

src/themes/default/modules/search.variables

@@ -49,7 +49,7 @@
 /* Result Content */
 @resultTitleFont: @headerFont;
 @resultTitleMargin: -@headerLineHeightOffset 0em 0em;
-@resultTitleFontWeight: bold;
+@resultTitleFontWeight: @bold;
 @resultTitleFontSize: @relativeMedium;
 @resultTitleColor: @darkTextColor;
 
@@ -66,7 +66,7 @@
 @messageVerticalPadding: 1em;
 @messageHorizontalPadding: 1em;
 @messageHeaderFontSize: @medium;
-@messageHeaderFontWeight: bold;
+@messageHeaderFontWeight: @bold;
 @messageHeaderColor: @textColor;
 @messageDescriptionDistance: 0.25rem;
 @messageDescriptionFontSize: 1em;
@@ -77,7 +77,7 @@
 @actionBackground: @darkWhite;
 @actionPadding: @relativeSmall @relativeMedium;
 @actionColor: @textColor;
-@actionFontWeight: bold;
+@actionFontWeight: @bold;
 @actionAlign: center;
 
 
@@ -154,5 +154,5 @@
 @categoryNameFontSize: 1em;
 @categoryNameWhitespace: nowrap;
 @categoryNamePadding: 0.4em 1em;
-@categoryNameFontWeight: bold;
+@categoryNameFontWeight: @bold;
 @categoryNameColor: @lightTextColor;

src/themes/default/views/ad.variables

@@ -7,7 +7,7 @@
 
 @testBackground: @lightBlack;
 @testColor: @white;
-@testFontWeight: bold;
+@testFontWeight: @bold;
 @testText: 'Ad';
 @testFontSize: @relativeMedium;
-@testMobileFontSize: @relativeTiny;
+@testMobileFontSize: @relativeTiny;

src/themes/default/views/card.variables

@@ -71,7 +71,7 @@
 
 /* Header */
 @headerMargin: '';
-@headerFontWeight: bold;
+@headerFontWeight: @bold;
 @headerFontSize: @relativeBig;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
 @headerColor: @darkTextColor;

src/themes/default/views/comment.variables

@@ -48,7 +48,7 @@
 @authorFontSize: 1em;
 @authorColor: @textColor;
 @authorHoverColor: @linkHoverColor;
-@authorFontWeight: bold;
+@authorFontWeight: @bold;
 
 /* Metadata */
 @metadataDisplay: inline-block;

src/themes/default/views/feed.variables

@@ -54,13 +54,13 @@
 @datePadding: 0em;
 @dateColor: @lightTextColor;
 @dateFontSize: @relativeMedium;
-@dateFontWeight: normal;
-@dateFontStyle: normal;
+@dateFontWeight: @normal;
+@dateFontStyle: @normal;
 
 /* Summary */
 @summaryMargin: 0em;
 @summaryFontSize: @relativeMedium;
-@summaryFontWeight: bold;
+@summaryFontWeight: @bold;
 @summaryColor: @textColor;
 
 /* Summary Image */
@@ -81,7 +81,7 @@
 @summaryDateColor: @dateColor;
 
 /* User */
-@userFontWeight: bold;
+@userFontWeight: @bold;
 @userDistance: 0em;
 @userImageWidth: @summaryImageWidth;
 @userImageHeight: @summaryImageHeight;

src/themes/default/views/item.variables

@@ -68,7 +68,7 @@
 
 /* Header */
 @headerMargin: -@lineHeightOffset 0em 0em;
-@headerFontWeight: bold;
+@headerFontWeight: @bold;
 @headerFontSize: @relativeBig;
 @headerColor: @darkTextColor;
 

src/themes/default/views/statistic.variables

@@ -25,7 +25,7 @@
 
 /* Value */
 @valueFont: @pageFont;
-@valueFontWeight: normal;
+@valueFontWeight: @normal;
 @valueLineHeight: 1em;
 @valueColor: @black;
 @valueTextTransform: uppercase;
@@ -35,7 +35,7 @@
 @topLabelDistance: 0rem;
 @bottomLabelDistance: 0rem;
 @labelFont: @headerFont;
-@labelFontWeight: bold;
+@labelFontWeight: @bold;
 @labelColor: @textColor;
 @labelLineHeight: @relativeLarge;
 @labelTextTransform: uppercase;
@@ -43,7 +43,7 @@
 /* Text */
 @textValueLineHeight: 1em;
 @textValueMinHeight: 2em;
-@textValueFontWeight: bold;
+@textValueFontWeight: @bold;
 
 /* Label Image */
 @imageHeight: 3rem;
@@ -95,4 +95,4 @@
 
 @hugeTextValueSize: 2.5rem;
 @hugeValueSize: 6rem;
-@hugeHorizontalValueSize: 5rem;
+@hugeHorizontalValueSize: 5rem;