diff --git a/stylus/cozy-ui/build.styl b/stylus/cozy-ui/build.styl index fd4bf4fc25..5a35b236d7 100644 --- a/stylus/cozy-ui/build.styl +++ b/stylus/cozy-ui/build.styl @@ -832,6 +832,26 @@ Display an chip that represents complex identity Styleguide utilities.text.warn */ +/* + Line-height + + Sets various line-height to a text + + Markup: +
Aliquam etiam natoque
+ + .u-lh-tiny - Sets a tiny line-height (1) + .u-lh-xsmall - Sets a xsmall line-height (1.1) + .u-lh-small - Sets a small line-height (1.2) + .u-lh-medium - Sets a medium line-height (1.3) + .u-lh-large - Sets a large line-height (1.4) + .u-lh-xlarge - Sets a large line-height (1.5) + + Weight: 6 + + Styleguide utilities.text.line-height +*/ + /* Font-size @@ -847,7 +867,7 @@ Display an chip that represents complex identity .u-fz-medium - Sets a medium font-size (16px) .u-fz-large - Sets a large font-size (18px) - Weight: 6 + Weight: 7 Styleguide utilities.text.fontsize */ @@ -864,7 +884,7 @@ Display an chip that represents complex identity .u-fs-normal - Sets a normal font style .u-fs-italic - Sets an italic font style - Weight: 7 + Weight: 8 Styleguide utilities.text.fontstyle */ @@ -883,7 +903,7 @@ Display an chip that represents complex identity .u-ta-center - Sets a center alignment .u-ta-justify - Sets a justify alignment - Weight: 8 + Weight: 9 Styleguide utilities.text.alignment */ @@ -899,7 +919,7 @@ Display an chip that represents complex identity .u-ellipsis - Ellipsis at the end - Weight: 9 + Weight: 10 Styleguide utilities.text.ellipsis */ @@ -916,7 +936,7 @@ Display an chip that represents complex identity .u-midellipsis - Ellipsis in the middle - Weight: 10 + Weight: 11 Styleguide utilities.text.midellipsis */ diff --git a/stylus/tools/mixins.styl b/stylus/tools/mixins.styl index 66710ac7dd..88081ccd7d 100644 --- a/stylus/tools/mixins.styl +++ b/stylus/tools/mixins.styl @@ -87,13 +87,21 @@ reset() padding 0 border 0 -global(selector, placeholder) - if cssmodules == true - :global({selector}) - @extend {placeholder} // @stylint ignore - else - {selector} - @extend {placeholder} // @stylint ignore +global(selector, placeholder, type = extend) + if type == extend + if cssmodules == true + :global({selector}) + @extend {placeholder} // @stylint ignore + else + {selector} + @extend {placeholder} // @stylint ignore + else if type == mixin + if cssmodules == true + :global({selector}) + {placeholder}() // @stylint ignore + else + {selector} + {placeholder}() // @stylint ignore cssModulesUtils(props, breakpoints) for kProp, vProp in props diff --git a/stylus/utilities/text.styl b/stylus/utilities/text.styl index 4d45f5125e..a3adf724b7 100644 --- a/stylus/utilities/text.styl +++ b/stylus/utilities/text.styl @@ -52,25 +52,55 @@ $midellipsis text-overflow '[...]' // @stylint off +lh-tiny() + line-height 1!important + +lh-xsmall() + line-height 1.1!important + +lh-small() + line-height 1.2!important + +lh-medium() + line-height 1.3!important + +lh-large() + line-height 1.4!important + +lh-xlarge() + line-height 1.5!important + +global('.u-lh-tiny', lh-tiny, mixin) + +global('.u-lh-xsmall', lh-xsmall, mixin) + +global('.u-lh-small', lh-small, mixin) + +global('.u-lh-medium', lh-medium, mixin) + +global('.u-lh-large', lh-large, mixin) + +global('.u-lh-xlarge', lh-xlarge, mixin) + fz-tiny() font-size rem(12)!important - line-height 1.3!important + lh-medium() fz-xsmall() font-size rem(13)!important - line-height 1.4!important + lh-large() fz-small() font-size rem(14)!important - line-height 1.4!important + lh-large() fz-medium() font-size rem(16)!important - line-height 1.5!important + lh-xlarge() fz-large() font-size rem(18)!important - line-height 1.5!important + lh-xlarge() fontsize = { 'fz-tiny': 'fz-tiny',