@new-ui/typography 0.1.0 → 0.1.1
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.
- package/.github/workflows/ci.yml +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/_components.scss +39 -17
- package/src/_variables.scss +12 -12
package/.github/workflows/ci.yml
CHANGED
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:
|
|
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;--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;--desktop-heading-01:64px;--desktop-heading-02:50px;--desktop-heading-03:40px;--desktop-heading-04:36px;--desktop-heading-05:28px;--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,w3CCCA,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 --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 --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 --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 --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 --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 --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 --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 --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
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:
|
|
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
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
--mobile-heading-05: 26px;
|
|
23
23
|
--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;
|
|
@@ -57,13 +57,13 @@
|
|
|
57
57
|
--desktop-heading-05: 28px;
|
|
58
58
|
--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;
|