@new-ui/typography 0.1.3 → 0.1.4
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/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/_components.scss +1 -1
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;--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
|
|
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,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"}
|
|
1
|
+
{"mappings":"AEAA,45CCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAUA,iGAUA,4GChEA,wJAME,oCANF,sIAaA,yJAME,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
package/src/_components.scss
CHANGED
|
@@ -17,7 +17,7 @@ $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(--lh-desktop
|
|
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) {
|