@new-ui/typography 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/.github/workflows/ci.yml +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +1 -1
  5. package/src/_components.scss +39 -17
  6. package/src/_variables.scss +24 -24
package/.github/workflows/ci.yml CHANGED
@@ -12,7 +12,7 @@ jobs:
12
12
  - uses: actions/setup-node@v3
13
13
  with:
14
14
  node-version: 18.11.0
15
- - run: npm install
15
+ - run: npm install && npm run build
16
16
  - uses: JS-DevTools/npm-publish@v1
17
17
  with:
18
18
  token: ${{ secrets.NPM_TOKEN }}
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- :root{--mobile-heading-01:32px;--mobile-heading-02:28px;--mobile-heading-03:24px;--mobile-heading-04:20px;--mobile-heading-05:18px;--mobile-heading-06:16px;--mobile-body-xl:16px;--mobile-body:14px;--mobile-body-sm:12px;--mobile-caption:12px;--mobile-helper-text:12px;--mobile-code:14px;--mobile-heading-01:40px;--mobile-heading-02:36px;--mobile-heading-03:30px;--mobile-heading-04:28px;--mobile-heading-05:26px;--mobile-heading-06:24px;--mobile-body-xl:24px;--mobile-body:20px;--mobile-body-sm:16px;--mobile-caption:16px;--mobile-helper-text:16px;--mobile-code:20px;--mobile-tracking-heading-01:-.8px;--mobile-tracking-heading-02:-.4px;--mobile-tracking-heading-03:-.4px;--desktop-heading-01:54px;--desktop-heading-02:42px;--desktop-heading-03:32px;--desktop-heading-04:28px;--desktop-heading-05:20px;--desktop-heading-06:18px;--desktop-body-xl:18px;--desktop-body:16px;--desktop-body-sm:14px;--desktop-caption:12px;--desktop-helper-text:12px;--desktop-code:14px;--desktop-heading-01:64px;--desktop-heading-02:50px;--desktop-heading-03:40px;--desktop-heading-04:36px;--desktop-heading-05:28px;--desktop-heading-06:26px;--desktop-body-xl:26px;--desktop-body:24px;--desktop-body-sm:20px;--desktop-caption:16px;--desktop-helper-text:16px;--desktop-code:20px;--desktop-tracking-heading-01:-1.2px;--desktop-tracking-heading-02:-.8px;--desktop-tracking-heading-03:-.4px}.nu-u-fw-bold{font-weight:700}.nu-u-fw-semi-bold{font-weight:500}.nu-u-fw-normal{font-weight:400}.nu-u-text--uppercase{text-transform:uppercase}.nu-u-text--lowercase{text-transform:lowercase}.nu-u-text--capitalize{text-transform:capitalize}.nu-u-text--underline{text-decoration:underline}.nu-u-text--left{text-align:left}.nu-u-text--right{text-align:right}.nu-u-text--center{text-align:center}.nu-u-text--justify{text-align:justify}.nu-u-serif{font-family:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif}.nu-u-sans-serif{font-family:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif}.nu-u-code{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace}.nu-c-h1{font-weight:700;font-size:var(--desktop-heading-01);line-height:var(--desktop-heading-01);letter-spacing:var(--desktop-tracking-heading-01)}@media screen and (max-width:600px){.nu-c-h1{font-size:var(--mobile-heading-01);line-height:var(--mobile-heading-01);letter-spacing:var(--mobile-tracking-heading-01)}}.nu-c-h2{font-weight:700;font-size:var(--desktop--heading-02);line-height:var(--desktop--heading-02);letter-spacing:var(--desktop-tracking-heading-02)}@media screen and (max-width:600px){.nu-c-h2{font-size:var(--mobile-heading-02);line-height:var(--mobile-heading-02);letter-spacing:var(--mobile-tracking-heading-02)}}.nu-c-h3{font-weight:700;font-size:var(--desktop-heading-03);line-height:var(--desktop-heading-03);letter-spacing:var(--desktop-tracking-heading-03)}@media screen and (max-width:600px){.nu-c-h3{font-size:var(--mobile-heading-03);line-height:var(--mobile-heading-03);letter-spacing:var(--mobile-tracking-heading-03)}}.nu-c-h4{font-weight:700;font-size:var(--desktop-heading-04);line-height:var(--desktop-heading-04)}@media screen and (max-width:600px){.nu-c-h4{font-size:var(--mobile-heading-04);line-height:var(--mobile-heading-04)}}.nu-c-h5{font-weight:700;font-size:var(--desktop-heading-05);line-height:var(--desktop-heading-05)}@media screen and (max-width:600px){.nu-c-h5{font-size:var(--mobile-heading-05);line-height:var(--mobile-heading-05)}}.nu-c-h6{font-weight:700;font-size:var(--desktop-heading-06);line-height:var(--desktop-heading-06)}@media screen and (max-width:600px){.nu-c-h6{font-size:var(--mobile-heading-06);line-height:var(--mobile-heading-06)}}.nu-c-fs-lead{font-size:var(--desktop-body-xl)}@media screen and (max-width:600px){.nu-c-fs-lead{font-size:var(--mobile-body-xl)}}.nu-c-caption{text-transform:uppercase;font-weight:500;font-size:var(--desktop-caption);line-height:var(--desktop-caption)}@media screen and (max-width:600px){.nu-c-caption{font-size:var(--mobile-caption);line-height:var(--mobile-caption)}}.nu-c-helper-text{font-size:var(--desktop-helper-text);line-height:var(--desktop-helper-text)}@media screen and (max-width:600px){.nu-c-helper-text{font-size:var(--mobile-helper-text);line-height:var(--mobile-helper-text)}}.nu-c-code{font-size:var(--desktop-code);line-height:var(--desktop-code)}@media screen and (max-width:600px){.nu-c-code{font-size:var(--mobile-code);line-height:var(--mobile-code)}}
1
+ :root{--mobile-heading-01:32px;--mobile-heading-02:28px;--mobile-heading-03:24px;--mobile-heading-04:20px;--mobile-heading-05:18px;--mobile-heading-06:16px;--mobile-body-xl:16px;--mobile-body:14px;--mobile-body-sm:12px;--mobile-caption:12px;--mobile-helper-text:12px;--mobile-code:14px;--lh-mobile-heading-01:40px;--lh-mobile-heading-02:36px;--lh-mobile-heading-03:30px;--lh-mobile-heading-04:28px;--lh-mobile-heading-05:26px;--lh-mobile-heading-06:24px;--lh-mobile-body-xl:24px;--lh-mobile-body:20px;--lh-mobile-body-sm:16px;--lh-mobile-caption:16px;--lh-mobile-helper-text:16px;--lh-mobile-code:20px;--mobile-tracking-heading-01:-.8px;--mobile-tracking-heading-02:-.4px;--mobile-tracking-heading-03:-.4px;--desktop-heading-01:54px;--desktop-heading-02:42px;--desktop-heading-03:32px;--desktop-heading-04:28px;--desktop-heading-05:20px;--desktop-heading-06:18px;--desktop-body-xl:18px;--desktop-body:16px;--desktop-body-sm:14px;--desktop-caption:12px;--desktop-helper-text:12px;--desktop-code:14px;--lh-desktop-heading-01:64px;--lh-desktop-heading-02:50px;--lh-desktop-heading-03:40px;--lh-desktop-heading-04:36px;--lh-desktop-heading-05:28px;--lh-desktop-heading-06:26px;--lh-desktop-body-xl:26px;--lh-desktop-body:24px;--lh-desktop-body-sm:20px;--lh-desktop-caption:16px;--lh-desktop-helper-text:16px;--lh-desktop-code:20px;--desktop-tracking-heading-01:-1.2px;--desktop-tracking-heading-02:-.8px;--desktop-tracking-heading-03:-.4px}.nu-u-fw-bold{font-weight:700}.nu-u-fw-semi-bold{font-weight:500}.nu-u-fw-normal{font-weight:400}.nu-u-text--uppercase{text-transform:uppercase}.nu-u-text--lowercase{text-transform:lowercase}.nu-u-text--capitalize{text-transform:capitalize}.nu-u-text--underline{text-decoration:underline}.nu-u-text--left{text-align:left}.nu-u-text--right{text-align:right}.nu-u-text--center{text-align:center}.nu-u-text--justify{text-align:justify}.nu-u-serif{font-family:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif}.nu-u-sans-serif{font-family:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif}.nu-u-code{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace}.nu-c-h1{font-weight:700;font-size:var(--desktop-heading-01);line-height:var(--lh-desktop-heading-01);letter-spacing:var(--desktop-tracking-heading-01)}@media screen and (max-width:600px){.nu-c-h1{font-size:var(--mobile-heading-01);line-height:var(--lh-mobile-heading-01);letter-spacing:var(--mobile-tracking-heading-01)}}.nu-c-h2{font-weight:700;font-size:var(--desktop--heading-02);line-height:var(--lh-desktop--heading-02);letter-spacing:var(--desktop-tracking-heading-02)}@media screen and (max-width:600px){.nu-c-h2{font-size:var(--mobile-heading-02);line-height:var(--lh-mobile-heading-02);letter-spacing:var(--mobile-tracking-heading-02)}}.nu-c-h3{font-weight:700;font-size:var(--desktop-heading-03);line-height:var(--lh-desktop-heading-03);letter-spacing:var(--desktop-tracking-heading-03)}@media screen and (max-width:600px){.nu-c-h3{font-size:var(--mobile-heading-03);line-height:var(--lh-mobile-heading-03);letter-spacing:var(--mobile-tracking-heading-03)}}.nu-c-h4{font-weight:700;font-size:var(--desktop-heading-04);line-height:var(--lh-desktop-heading-04)}@media screen and (max-width:600px){.nu-c-h4{font-size:var(--mobile-heading-04);line-height:var(--lh-mobile-heading-04)}}.nu-c-h5{font-weight:700;font-size:var(--desktop-heading-05);line-height:var(--lh-desktop-heading-05)}@media screen and (max-width:600px){.nu-c-h5{font-size:var(--mobile-heading-05);line-height:var(--lh-mobile-heading-05)}}.nu-c-h6{font-weight:500;font-size:var(--desktop-heading-06);line-height:var(--lh-desktop-heading-06)}@media screen and (max-width:600px){.nu-c-h6{font-size:var(--mobile-heading-06);line-height:var(--lh-mobile-heading-06)}}.nu-c-fs-lead{font-size:var(--desktop-body-xl);line-height:var(--lh-desktop-body-xl)}@media screen and (max-width:600px){.nu-c-fs-lead{font-size:var(--mobile-body-xl);line-height:var(--lh-mobile-body-xl)}}.nu-c-fs-normal{font-size:var(--desktop-body);line-height:var(--lh-desktop-body)}@media screen and (max-width:600px){.nu-c-fs-normal{font-size:var(--mobile-body);line-height:var(--lh-mobile-body)}}.nu-c-fs-small{font-size:var(--desktop-body-sm);line-height:var(--lh-desktop-body-sm)}@media screen and (max-width:600px){.nu-c-fs-small{font-size:var(--mobile-body-sm);line-height:var(--lh-mobile-body-sm)}}.nu-c-caption{text-transform:uppercase;font-weight:500;font-size:var(--desktop-caption);line-height:var(--lh-desktop-caption)}@media screen and (max-width:600px){.nu-c-caption{font-size:var(--mobile-caption);line-height:var(--lh-mobile-caption)}}.nu-c-helper-text{font-size:var(--desktop-helper-text);line-height:var(--lh-desktop-helper-text)}@media screen and (max-width:600px){.nu-c-helper-text{font-size:var(--mobile-helper-text);line-height:var(--lh-mobile-helper-text)}}.nu-c-code{font-size:var(--desktop-code);line-height:var(--desktop-code)}@media screen and (max-width:600px){.nu-c-code{font-size:var(--mobile-code);line-height:var(--mobile-code)}}
2
2
  /*# sourceMappingURL=index.css.map */
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AEAA,o1CCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAUA,iGAUA,4GChEA,qJAME,oCANF,mIAaA,uJAME,oCANF,mIAaA,qJAME,oCANF,mIAaA,mGAKE,oCALF,kFAWA,mGAKE,oCALF,kFAWA,mGAKE,oCALF,kFAWA,+CAGE,oCAHF,+CAQA,2HAME,oCANF,iFAYA,8FAIE,oCAJF,6FAUA,yEAIE,oCAJF","sources":["index.css","src/index.scss","src/_variables.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --mobile-heading-01: 32px;\n --mobile-heading-02: 28px;\n --mobile-heading-03: 24px;\n --mobile-heading-04: 20px;\n --mobile-heading-05: 18px;\n --mobile-heading-06: 16px;\n --mobile-body-xl: 16px;\n --mobile-body: 14px;\n --mobile-body-sm: 12px;\n --mobile-caption: 12px;\n --mobile-helper-text: 12px;\n --mobile-code: 14px;\n --mobile-heading-01: 40px;\n --mobile-heading-02: 36px;\n --mobile-heading-03: 30px;\n --mobile-heading-04: 28px;\n --mobile-heading-05: 26px;\n --mobile-heading-06: 24px;\n --mobile-body-xl: 24px;\n --mobile-body: 20px;\n --mobile-body-sm: 16px;\n --mobile-caption: 16px;\n --mobile-helper-text: 16px;\n --mobile-code: 20px;\n --mobile-tracking-heading-01: -.8px;\n --mobile-tracking-heading-02: -.4px;\n --mobile-tracking-heading-03: -.4px;\n --desktop-heading-01: 54px;\n --desktop-heading-02: 42px;\n --desktop-heading-03: 32px;\n --desktop-heading-04: 28px;\n --desktop-heading-05: 20px;\n --desktop-heading-06: 18px;\n --desktop-body-xl: 18px;\n --desktop-body: 16px;\n --desktop-body-sm: 14px;\n --desktop-caption: 12px;\n --desktop-helper-text: 12px;\n --desktop-code: 14px;\n --desktop-heading-01: 64px;\n --desktop-heading-02: 50px;\n --desktop-heading-03: 40px;\n --desktop-heading-04: 36px;\n --desktop-heading-05: 28px;\n --desktop-heading-06: 26px;\n --desktop-body-xl: 26px;\n --desktop-body: 24px;\n --desktop-body-sm: 20px;\n --desktop-caption: 16px;\n --desktop-helper-text: 16px;\n --desktop-code: 20px;\n --desktop-tracking-heading-01: -1.2px;\n --desktop-tracking-heading-02: -.8px;\n --desktop-tracking-heading-03: -.4px;\n}\n\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n.nu-u-serif {\n font-family: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;\n}\n\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h1 {\n font-size: var(--mobile-heading-01);\n line-height: var(--mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop--heading-02);\n line-height: var(--desktop--heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h2 {\n font-size: var(--mobile-heading-02);\n line-height: var(--mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h3 {\n font-size: var(--mobile-heading-03);\n line-height: var(--mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--desktop-heading-04);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h4 {\n font-size: var(--mobile-heading-04);\n line-height: var(--mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--desktop-heading-05);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h5 {\n font-size: var(--mobile-heading-05);\n line-height: var(--mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 700;\n font-size: var(--desktop-heading-06);\n line-height: var(--desktop-heading-06);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h6 {\n font-size: var(--mobile-heading-06);\n line-height: var(--mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-fs-lead {\n font-size: var(--mobile-body-xl);\n }\n}\n\n.nu-c-caption {\n text-transform: uppercase;\n font-weight: 500;\n font-size: var(--desktop-caption);\n line-height: var(--desktop-caption);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-caption {\n font-size: var(--mobile-caption);\n line-height: var(--mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--desktop-helper-text);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-helper-text {\n font-size: var(--mobile-helper-text);\n line-height: var(--mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-code {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n\n/*# sourceMappingURL=index.css.map */\n","@import 'variables';\n@import 'utilities';\n@import 'components';",":root {\n /* Mobile */\n --mobile-heading-01: 32px;\n --mobile-heading-02: 28px;\n --mobile-heading-03: 24px;\n --mobile-heading-04: 20px;\n --mobile-heading-05: 18px;\n --mobile-heading-06: 16px;\n\n --mobile-body-xl: 16px;\n --mobile-body: 14px;\n --mobile-body-sm: 12px;\n\n --mobile-caption: 12px;\n --mobile-helper-text: 12px;\n --mobile-code: 14px;\n\n --mobile-heading-01: 40px;\n --mobile-heading-02: 36px;\n --mobile-heading-03: 30px;\n --mobile-heading-04: 28px;\n --mobile-heading-05: 26px;\n --mobile-heading-06: 24px;\n\n --mobile-body-xl: 24px;\n --mobile-body: 20px;\n --mobile-body-sm: 16px;\n\n --mobile-caption: 16px;\n --mobile-helper-text: 16px;\n --mobile-code: 20px;\n\n --mobile-tracking-heading-01: -0.8px;\n --mobile-tracking-heading-02: -0.4px;\n --mobile-tracking-heading-03: -0.4px;\n\n /* Desktop */\n --desktop-heading-01: 54px;\n --desktop-heading-02: 42px;\n --desktop-heading-03: 32px;\n --desktop-heading-04: 28px;\n --desktop-heading-05: 20px;\n --desktop-heading-06: 18px;\n\n --desktop-body-xl: 18px;\n --desktop-body: 16px;\n --desktop-body-sm: 14px;\n\n --desktop-caption: 12px;\n --desktop-helper-text: 12px;\n --desktop-code: 14px;\n\n --desktop-heading-01: 64px;\n --desktop-heading-02: 50px;\n --desktop-heading-03: 40px;\n --desktop-heading-04: 36px;\n --desktop-heading-05: 28px;\n --desktop-heading-06: 26px;\n\n --desktop-body-xl: 26px;\n --desktop-body: 24px;\n --desktop-body-sm: 20px;\n\n --desktop-caption: 16px;\n --desktop-helper-text: 16px;\n --desktop-code: 20px;\n\n --desktop-tracking-heading-01: -1.2px;\n --desktop-tracking-heading-02: -0.8px;\n --desktop-tracking-heading-03: -0.4px;\n}","/* Font Weights */\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n/* Utilities */\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n/* Font family */\n.nu-u-serif {\n font-family: Didot,\n 'Bodoni MT',\n 'Noto Serif Display',\n 'URW Palladio L',\n P052,\n Sylfaen,\n serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter,\n Roboto,\n 'Helvetica Neue',\n 'Arial Nova',\n 'Nimbus Sans',\n Arial,\n sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace,\n 'Cascadia Code',\n 'Source Code Pro',\n Menlo,\n Consolas,\n 'DejaVu Sans Mono',\n monospace;\n}","$mobile-breakpoint: 600px;\n\n/* Components */\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-01);\n line-height: var(--mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop--heading-02);\n line-height: var(--desktop--heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-02);\n line-height: var(--mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-03);\n line-height: var(--mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--desktop-heading-04);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-04);\n line-height: var(--mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--desktop-heading-05);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-05);\n line-height: var(--mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 700;\n font-size: var(--desktop-heading-06);\n line-height: var(--desktop-heading-06);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-06);\n line-height: var(--mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-xl);\n }\n}\n\n.nu-c-caption {\n font-weight: 500;\n text-transform: uppercase;\n font-size: var(--desktop-caption);\n line-height: var(--desktop-caption);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-caption);\n line-height: var(--mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--desktop-helper-text);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-helper-text);\n line-height: var(--mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n"],"names":[],"version":3,"file":"index.css.map"}
1
+ {"mappings":"AEAA,45CCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAUA,iGAUA,4GChEA,wJAME,oCANF,sIAaA,0JAME,oCANF,sIAaA,wJAME,oCANF,sIAaA,sGAKE,oCALF,qFAWA,sGAKE,oCALF,qFAWA,sGAKE,oCALF,qFAWA,qFAIE,oCAJF,oFAUA,iFAIE,oCAJF,gFAUA,sFAIE,oCAJF,qFAUA,8HAME,oCANF,oFAYA,iGAIE,oCAJF,gGAUA,yEAIE,oCAJF","sources":["index.css","src/index.scss","src/_variables.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --mobile-heading-01: 32px;\n --mobile-heading-02: 28px;\n --mobile-heading-03: 24px;\n --mobile-heading-04: 20px;\n --mobile-heading-05: 18px;\n --mobile-heading-06: 16px;\n --mobile-body-xl: 16px;\n --mobile-body: 14px;\n --mobile-body-sm: 12px;\n --mobile-caption: 12px;\n --mobile-helper-text: 12px;\n --mobile-code: 14px;\n --lh-mobile-heading-01: 40px;\n --lh-mobile-heading-02: 36px;\n --lh-mobile-heading-03: 30px;\n --lh-mobile-heading-04: 28px;\n --lh-mobile-heading-05: 26px;\n --lh-mobile-heading-06: 24px;\n --lh-mobile-body-xl: 24px;\n --lh-mobile-body: 20px;\n --lh-mobile-body-sm: 16px;\n --lh-mobile-caption: 16px;\n --lh-mobile-helper-text: 16px;\n --lh-mobile-code: 20px;\n --mobile-tracking-heading-01: -.8px;\n --mobile-tracking-heading-02: -.4px;\n --mobile-tracking-heading-03: -.4px;\n --desktop-heading-01: 54px;\n --desktop-heading-02: 42px;\n --desktop-heading-03: 32px;\n --desktop-heading-04: 28px;\n --desktop-heading-05: 20px;\n --desktop-heading-06: 18px;\n --desktop-body-xl: 18px;\n --desktop-body: 16px;\n --desktop-body-sm: 14px;\n --desktop-caption: 12px;\n --desktop-helper-text: 12px;\n --desktop-code: 14px;\n --lh-desktop-heading-01: 64px;\n --lh-desktop-heading-02: 50px;\n --lh-desktop-heading-03: 40px;\n --lh-desktop-heading-04: 36px;\n --lh-desktop-heading-05: 28px;\n --lh-desktop-heading-06: 26px;\n --lh-desktop-body-xl: 26px;\n --lh-desktop-body: 24px;\n --lh-desktop-body-sm: 20px;\n --lh-desktop-caption: 16px;\n --lh-desktop-helper-text: 16px;\n --lh-desktop-code: 20px;\n --desktop-tracking-heading-01: -1.2px;\n --desktop-tracking-heading-02: -.8px;\n --desktop-tracking-heading-03: -.4px;\n}\n\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n.nu-u-serif {\n font-family: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;\n}\n\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--lh-desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h1 {\n font-size: var(--mobile-heading-01);\n line-height: var(--lh-mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop--heading-02);\n line-height: var(--lh-desktop--heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h2 {\n font-size: var(--mobile-heading-02);\n line-height: var(--lh-mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--lh-desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h3 {\n font-size: var(--mobile-heading-03);\n line-height: var(--lh-mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--lh-desktop-heading-04);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h4 {\n font-size: var(--mobile-heading-04);\n line-height: var(--lh-mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--lh-desktop-heading-05);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h5 {\n font-size: var(--mobile-heading-05);\n line-height: var(--lh-mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 500;\n font-size: var(--desktop-heading-06);\n line-height: var(--lh-desktop-heading-06);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-h6 {\n font-size: var(--mobile-heading-06);\n line-height: var(--lh-mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n line-height: var(--lh-desktop-body-xl);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-fs-lead {\n font-size: var(--mobile-body-xl);\n line-height: var(--lh-mobile-body-xl);\n }\n}\n\n.nu-c-fs-normal {\n font-size: var(--desktop-body);\n line-height: var(--lh-desktop-body);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-fs-normal {\n font-size: var(--mobile-body);\n line-height: var(--lh-mobile-body);\n }\n}\n\n.nu-c-fs-small {\n font-size: var(--desktop-body-sm);\n line-height: var(--lh-desktop-body-sm);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-fs-small {\n font-size: var(--mobile-body-sm);\n line-height: var(--lh-mobile-body-sm);\n }\n}\n\n.nu-c-caption {\n text-transform: uppercase;\n font-weight: 500;\n font-size: var(--desktop-caption);\n line-height: var(--lh-desktop-caption);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-caption {\n font-size: var(--mobile-caption);\n line-height: var(--lh-mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--lh-desktop-helper-text);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-helper-text {\n font-size: var(--mobile-helper-text);\n line-height: var(--lh-mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n}\n\n@media screen and (max-width: 600px) {\n .nu-c-code {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n\n/*# sourceMappingURL=index.css.map */\n","@import 'variables';\n@import 'utilities';\n@import 'components';",":root {\n /* Mobile */\n --mobile-heading-01: 32px;\n --mobile-heading-02: 28px;\n --mobile-heading-03: 24px;\n --mobile-heading-04: 20px;\n --mobile-heading-05: 18px;\n --mobile-heading-06: 16px;\n\n --mobile-body-xl: 16px;\n --mobile-body: 14px;\n --mobile-body-sm: 12px;\n\n --mobile-caption: 12px;\n --mobile-helper-text: 12px;\n --mobile-code: 14px;\n\n --lh-mobile-heading-01: 40px;\n --lh-mobile-heading-02: 36px;\n --lh-mobile-heading-03: 30px;\n --lh-mobile-heading-04: 28px;\n --lh-mobile-heading-05: 26px;\n --lh-mobile-heading-06: 24px;\n\n --lh-mobile-body-xl: 24px;\n --lh-mobile-body: 20px;\n --lh-mobile-body-sm: 16px;\n\n --lh-mobile-caption: 16px;\n --lh-mobile-helper-text: 16px;\n --lh-mobile-code: 20px;\n\n --mobile-tracking-heading-01: -0.8px;\n --mobile-tracking-heading-02: -0.4px;\n --mobile-tracking-heading-03: -0.4px;\n\n /* Desktop */\n --desktop-heading-01: 54px;\n --desktop-heading-02: 42px;\n --desktop-heading-03: 32px;\n --desktop-heading-04: 28px;\n --desktop-heading-05: 20px;\n --desktop-heading-06: 18px;\n\n --desktop-body-xl: 18px;\n --desktop-body: 16px;\n --desktop-body-sm: 14px;\n\n --desktop-caption: 12px;\n --desktop-helper-text: 12px;\n --desktop-code: 14px;\n\n --lh-desktop-heading-01: 64px;\n --lh-desktop-heading-02: 50px;\n --lh-desktop-heading-03: 40px;\n --lh-desktop-heading-04: 36px;\n --lh-desktop-heading-05: 28px;\n --lh-desktop-heading-06: 26px;\n\n --lh-desktop-body-xl: 26px;\n --lh-desktop-body: 24px;\n --lh-desktop-body-sm: 20px;\n\n --lh-desktop-caption: 16px;\n --lh-desktop-helper-text: 16px;\n --lh-desktop-code: 20px;\n\n --desktop-tracking-heading-01: -1.2px;\n --desktop-tracking-heading-02: -0.8px;\n --desktop-tracking-heading-03: -0.4px;\n}","/* Font Weights */\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n/* Utilities */\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n/* Font family */\n.nu-u-serif {\n font-family: Didot,\n 'Bodoni MT',\n 'Noto Serif Display',\n 'URW Palladio L',\n P052,\n Sylfaen,\n serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter,\n Roboto,\n 'Helvetica Neue',\n 'Arial Nova',\n 'Nimbus Sans',\n Arial,\n sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace,\n 'Cascadia Code',\n 'Source Code Pro',\n Menlo,\n Consolas,\n 'DejaVu Sans Mono',\n monospace;\n}","$mobile-breakpoint: 600px;\n\n/* Components */\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--lh-desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-01);\n line-height: var(--lh-mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop--heading-02);\n line-height: var(--lh-desktop--heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-02);\n line-height: var(--lh-mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--lh-desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-03);\n line-height: var(--lh-mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--lh-desktop-heading-04);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-04);\n line-height: var(--lh-mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--lh-desktop-heading-05);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-05);\n line-height: var(--lh-mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 500;\n font-size: var(--desktop-heading-06);\n line-height: var(--lh-desktop-heading-06);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-06);\n line-height: var(--lh-mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n line-height: var(--lh-desktop-body-xl);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-xl);\n line-height: var(--lh-mobile-body-xl);\n }\n}\n\n.nu-c-fs-normal {\n font-size: var(--desktop-body);\n line-height: var(--lh-desktop-body);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body);\n line-height: var(--lh-mobile-body);\n }\n}\n\n.nu-c-fs-small {\n font-size: var(--desktop-body-sm);\n line-height: var(--lh-desktop-body-sm);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-sm);\n line-height: var(--lh-mobile-body-sm);\n }\n}\n\n.nu-c-caption {\n font-weight: 500;\n text-transform: uppercase;\n font-size: var(--desktop-caption);\n line-height: var(--lh-desktop-caption);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-caption);\n line-height: var(--lh-mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--lh-desktop-helper-text);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-helper-text);\n line-height: var(--lh-mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n"],"names":[],"version":3,"file":"index.css.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@new-ui/typography",
3
- "version": "0.1.0",
3
+ "version": "0.1.3",
4
4
  "description": "Modular typographic scale for your apps and websites.",
5
5
  "source": "src/index.scss",
6
6
  "main": "dist/index.css",
package/src/_components.scss CHANGED
@@ -4,12 +4,12 @@ $mobile-breakpoint: 600px;
4
4
  .nu-c-h1 {
5
5
  font-weight: 700;
6
6
  font-size: var(--desktop-heading-01);
7
- line-height: var(--desktop-heading-01);
7
+ line-height: var(--lh-desktop-heading-01);
8
8
  letter-spacing: var(--desktop-tracking-heading-01);
9
9
 
10
10
  @media screen and (max-width: $mobile-breakpoint) {
11
11
  font-size: var(--mobile-heading-01);
12
- line-height: var(--mobile-heading-01);
12
+ line-height: var(--lh-mobile-heading-01);
13
13
  letter-spacing: var(--mobile-tracking-heading-01);
14
14
  }
15
15
  }
@@ -17,12 +17,12 @@ $mobile-breakpoint: 600px;
17
17
  .nu-c-h2 {
18
18
  font-weight: 700;
19
19
  font-size: var(--desktop--heading-02);
20
- line-height: var(--desktop--heading-02);
20
+ line-height: var(--lh-desktop--heading-02);
21
21
  letter-spacing: var(--desktop-tracking-heading-02);
22
22
 
23
23
  @media screen and (max-width: $mobile-breakpoint) {
24
24
  font-size: var(--mobile-heading-02);
25
- line-height: var(--mobile-heading-02);
25
+ line-height: var(--lh-mobile-heading-02);
26
26
  letter-spacing: var(--mobile-tracking-heading-02);
27
27
  }
28
28
  }
@@ -30,12 +30,12 @@ $mobile-breakpoint: 600px;
30
30
  .nu-c-h3 {
31
31
  font-weight: 700;
32
32
  font-size: var(--desktop-heading-03);
33
- line-height: var(--desktop-heading-03);
33
+ line-height: var(--lh-desktop-heading-03);
34
34
  letter-spacing: var(--desktop-tracking-heading-03);
35
35
 
36
36
  @media screen and (max-width: $mobile-breakpoint) {
37
37
  font-size: var(--mobile-heading-03);
38
- line-height: var(--mobile-heading-03);
38
+ line-height: var(--lh-mobile-heading-03);
39
39
  letter-spacing: var(--mobile-tracking-heading-03);
40
40
  }
41
41
  }
@@ -43,41 +43,63 @@ $mobile-breakpoint: 600px;
43
43
  .nu-c-h4 {
44
44
  font-weight: 700;
45
45
  font-size: var(--desktop-heading-04);
46
- line-height: var(--desktop-heading-04);
46
+ line-height: var(--lh-desktop-heading-04);
47
47
 
48
48
  @media screen and (max-width: $mobile-breakpoint) {
49
49
  font-size: var(--mobile-heading-04);
50
- line-height: var(--mobile-heading-04);
50
+ line-height: var(--lh-mobile-heading-04);
51
51
  }
52
52
  }
53
53
 
54
54
  .nu-c-h5 {
55
55
  font-weight: 700;
56
56
  font-size: var(--desktop-heading-05);
57
- line-height: var(--desktop-heading-05);
57
+ line-height: var(--lh-desktop-heading-05);
58
58
 
59
59
  @media screen and (max-width: $mobile-breakpoint) {
60
60
  font-size: var(--mobile-heading-05);
61
- line-height: var(--mobile-heading-05);
61
+ line-height: var(--lh-mobile-heading-05);
62
62
  }
63
63
  }
64
64
 
65
65
  .nu-c-h6 {
66
- font-weight: 700;
66
+ font-weight: 500;
67
67
  font-size: var(--desktop-heading-06);
68
- line-height: var(--desktop-heading-06);
68
+ line-height: var(--lh-desktop-heading-06);
69
69
 
70
70
  @media screen and (max-width: $mobile-breakpoint) {
71
71
  font-size: var(--mobile-heading-06);
72
- line-height: var(--mobile-heading-06);
72
+ line-height: var(--lh-mobile-heading-06);
73
73
  }
74
74
  }
75
75
 
76
76
  .nu-c-fs-lead {
77
77
  font-size: var(--desktop-body-xl);
78
+ line-height: var(--lh-desktop-body-xl);
78
79
 
79
80
  @media screen and (max-width: $mobile-breakpoint) {
80
81
  font-size: var(--mobile-body-xl);
82
+ line-height: var(--lh-mobile-body-xl);
83
+ }
84
+ }
85
+
86
+ .nu-c-fs-normal {
87
+ font-size: var(--desktop-body);
88
+ line-height: var(--lh-desktop-body);
89
+
90
+ @media screen and (max-width: $mobile-breakpoint) {
91
+ font-size: var(--mobile-body);
92
+ line-height: var(--lh-mobile-body);
93
+ }
94
+ }
95
+
96
+ .nu-c-fs-small {
97
+ font-size: var(--desktop-body-sm);
98
+ line-height: var(--lh-desktop-body-sm);
99
+
100
+ @media screen and (max-width: $mobile-breakpoint) {
101
+ font-size: var(--mobile-body-sm);
102
+ line-height: var(--lh-mobile-body-sm);
81
103
  }
82
104
  }
83
105
 
@@ -85,21 +107,21 @@ $mobile-breakpoint: 600px;
85
107
  font-weight: 500;
86
108
  text-transform: uppercase;
87
109
  font-size: var(--desktop-caption);
88
- line-height: var(--desktop-caption);
110
+ line-height: var(--lh-desktop-caption);
89
111
 
90
112
  @media screen and (max-width: $mobile-breakpoint) {
91
113
  font-size: var(--mobile-caption);
92
- line-height: var(--mobile-caption);
114
+ line-height: var(--lh-mobile-caption);
93
115
  }
94
116
  }
95
117
 
96
118
  .nu-c-helper-text {
97
119
  font-size: var(--desktop-helper-text);
98
- line-height: var(--desktop-helper-text);
120
+ line-height: var(--lh-desktop-helper-text);
99
121
 
100
122
  @media screen and (max-width: $mobile-breakpoint) {
101
123
  font-size: var(--mobile-helper-text);
102
- line-height: var(--mobile-helper-text);
124
+ line-height: var(--lh-mobile-helper-text);
103
125
  }
104
126
  }
105
127
 
package/src/_variables.scss CHANGED
@@ -15,20 +15,20 @@
15
15
  --mobile-helper-text: 12px;
16
16
  --mobile-code: 14px;
17
17
 
18
- --mobile-heading-01: 40px;
19
- --mobile-heading-02: 36px;
20
- --mobile-heading-03: 30px;
21
- --mobile-heading-04: 28px;
22
- --mobile-heading-05: 26px;
23
- --mobile-heading-06: 24px;
18
+ --lh-mobile-heading-01: 40px;
19
+ --lh-mobile-heading-02: 36px;
20
+ --lh-mobile-heading-03: 30px;
21
+ --lh-mobile-heading-04: 28px;
22
+ --lh-mobile-heading-05: 26px;
23
+ --lh-mobile-heading-06: 24px;
24
24
 
25
- --mobile-body-xl: 24px;
26
- --mobile-body: 20px;
27
- --mobile-body-sm: 16px;
25
+ --lh-mobile-body-xl: 24px;
26
+ --lh-mobile-body: 20px;
27
+ --lh-mobile-body-sm: 16px;
28
28
 
29
- --mobile-caption: 16px;
30
- --mobile-helper-text: 16px;
31
- --mobile-code: 20px;
29
+ --lh-mobile-caption: 16px;
30
+ --lh-mobile-helper-text: 16px;
31
+ --lh-mobile-code: 20px;
32
32
 
33
33
  --mobile-tracking-heading-01: -0.8px;
34
34
  --mobile-tracking-heading-02: -0.4px;
@@ -50,20 +50,20 @@
50
50
  --desktop-helper-text: 12px;
51
51
  --desktop-code: 14px;
52
52
 
53
- --desktop-heading-01: 64px;
54
- --desktop-heading-02: 50px;
55
- --desktop-heading-03: 40px;
56
- --desktop-heading-04: 36px;
57
- --desktop-heading-05: 28px;
58
- --desktop-heading-06: 26px;
53
+ --lh-desktop-heading-01: 64px;
54
+ --lh-desktop-heading-02: 50px;
55
+ --lh-desktop-heading-03: 40px;
56
+ --lh-desktop-heading-04: 36px;
57
+ --lh-desktop-heading-05: 28px;
58
+ --lh-desktop-heading-06: 26px;
59
59
 
60
- --desktop-body-xl: 26px;
61
- --desktop-body: 24px;
62
- --desktop-body-sm: 20px;
60
+ --lh-desktop-body-xl: 26px;
61
+ --lh-desktop-body: 24px;
62
+ --lh-desktop-body-sm: 20px;
63
63
 
64
- --desktop-caption: 16px;
65
- --desktop-helper-text: 16px;
66
- --desktop-code: 20px;
64
+ --lh-desktop-caption: 16px;
65
+ --lh-desktop-helper-text: 16px;
66
+ --lh-desktop-code: 20px;
67
67
 
68
68
  --desktop-tracking-heading-01: -1.2px;
69
69
  --desktop-tracking-heading-02: -0.8px;