@new-ui/typography 0.1.4 → 0.1.6
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/README.md +5 -15
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
- package/src/_components.scss +1 -1
- package/src/_variables.scss +17 -0
package/README.md
CHANGED
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
# New UI Typography
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Text Styles for Figma
|
|
6
|
-
[Get a Figma copy](https://www.figma.com/community/file/1186085071546203382)
|
|
7
|
-
|
|
8
3
|
## Install
|
|
9
4
|
Install New UI Typography from your terminal via npm.
|
|
5
|
+
|
|
10
6
|
```
|
|
11
7
|
npm i @new-ui/typography
|
|
12
8
|
```
|
|
13
9
|
|
|
14
10
|
To get started quickly, you can use the CDN files.
|
|
11
|
+
|
|
15
12
|
```html
|
|
16
13
|
<!-- Place this at the html head -->
|
|
17
14
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/typography@<version>/dist/index.css">
|
|
@@ -24,14 +21,7 @@ To get started quickly, you can use the CDN files.
|
|
|
24
21
|
@import "@new-ui/typography";
|
|
25
22
|
```
|
|
26
23
|
|
|
27
|
-
##
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
- All classes associated with the design system are prefixed with a global namespace followed by a hyphen: `nu-`
|
|
31
|
-
- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax
|
|
32
|
-
* `c-` for UI components, such as `.nu-c-h1` or `.nu-c-card`
|
|
33
|
-
* `l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`
|
|
34
|
-
* `u-` for utilities, such as `.nu-u-mb-<spacing-token>` or `.nu-u-margin-bottom-pt2`
|
|
35
|
-
* `is-` and has- for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes - would apply to
|
|
36
|
-
* `js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle - state-based classes to an element.
|
|
24
|
+
## Guides
|
|
25
|
+
- [Get a Figma copy](https://www.figma.com/community/file/1325646289622213496/new-ui)
|
|
26
|
+
- [Read our typography guide](https://new-ui.com/docs/foundations/typography)
|
|
37
27
|
|
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
|
|
1
|
+
:root{--system-ui:system-ui,sans-serif;--transitional:Charter,"Bitstream Charter","Sitka Text",Cambria,serif;--old-style:"Iowan Old Style","Palatino Linotype","URW Palladio L",P052,serif;--humanist:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif;--geometric-humanist:Avenir,Montserrat,Corbel,"URW Gothic",source-sans-pro,sans-serif;--classical-humanist:Optima,Candara,"Noto Sans",source-sans-pro,sans-serif;--neo-grotesque:Inter,Roboto,"Helvetica Neue","Arial Nova","Nimbus Sans",Arial,sans-serif;--monospace-slab-serif:"Nimbus Mono PS","Courier New",monospace;--monospace-code:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;--industrial:Bahnschrift,"DIN Alternate","Franklin Gothic Medium","Nimbus Sans Narrow",sans-serif-condensed,sans-serif;--rounded-sans:ui-rounded,"Hiragino Maru Gothic ProN",Quicksand,Comfortaa,Manjari,"Arial Rounded MT","Arial Rounded MT Bold",Calibri,source-sans-pro,sans-serif;--slab-serif:Rockwell,"Rockwell Nova","Roboto Slab","DejaVu Serif","Sitka Small",serif;--antique:Superclarendon,"Bookman Old Style","URW Bookman","URW Bookman L","Georgia Pro",Georgia,serif;--didone:Didot,"Bodoni MT","Noto Serif Display","URW Palladio L",P052,Sylfaen,serif;--handwritten:"Segoe Print","Bradley Hand",Chilanka,TSCu_Comic,casual,cursive;--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,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"}
|
|
1
|
+
{"mappings":"AEAA,2sFCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAUA,iGAUA,4GChEA,wJAME,oCANF,sIAaA,wJAME,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 --system-ui: system-ui, sans-serif;\n --transitional: Charter, \"Bitstream Charter\", \"Sitka Text\", Cambria, serif;\n --old-style: \"Iowan Old Style\", \"Palatino Linotype\", \"URW Palladio L\", P052, serif;\n --humanist: Seravek, \"Gill Sans Nova\", Ubuntu, Calibri, \"DejaVu Sans\", source-sans-pro, sans-serif;\n --geometric-humanist: Avenir, Montserrat, Corbel, \"URW Gothic\", source-sans-pro, sans-serif;\n --classical-humanist: Optima, Candara, \"Noto Sans\", source-sans-pro, sans-serif;\n --neo-grotesque: Inter, Roboto, \"Helvetica Neue\", \"Arial Nova\", \"Nimbus Sans\", Arial, sans-serif;\n --monospace-slab-serif: \"Nimbus Mono PS\", \"Courier New\", monospace;\n --monospace-code: ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;\n --industrial: Bahnschrift, \"DIN Alternate\", \"Franklin Gothic Medium\", \"Nimbus Sans Narrow\", sans-serif-condensed, sans-serif;\n --rounded-sans: ui-rounded, \"Hiragino Maru Gothic ProN\", Quicksand, Comfortaa, Manjari, \"Arial Rounded MT\", \"Arial Rounded MT Bold\", Calibri, source-sans-pro, sans-serif;\n --slab-serif: Rockwell, \"Rockwell Nova\", \"Roboto Slab\", \"DejaVu Serif\", \"Sitka Small\", serif;\n --antique: Superclarendon, \"Bookman Old Style\", \"URW Bookman\", \"URW Bookman L\", \"Georgia Pro\", Georgia, serif;\n --didone: Didot, \"Bodoni MT\", \"Noto Serif Display\", \"URW Palladio L\", P052, Sylfaen, serif;\n --handwritten: \"Segoe Print\", \"Bradley Hand\", Chilanka, TSCu_Comic, casual, cursive;\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 /* System Font Stacks */\n --system-ui: system-ui, sans-serif;\n --transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;\n --old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;\n --humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;\n --geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;\n --classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;\n --neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;\n --monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;\n --monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;\n --industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;\n --rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;\n --slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;\n --antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;\n --didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;\n --handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;\n\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.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Modular typographic scale for your apps and websites.",
|
|
5
5
|
"source": "src/index.scss",
|
|
6
6
|
"main": "dist/index.css",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"desktop",
|
|
27
27
|
"mobile"
|
|
28
28
|
],
|
|
29
|
-
"author": "
|
|
29
|
+
"author": "@planetabhi",
|
|
30
30
|
"license": "MIT",
|
|
31
31
|
"bugs": {
|
|
32
32
|
"url": "https://github.com/NewDesignFile/typography/issues"
|
package/src/_components.scss
CHANGED
package/src/_variables.scss
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
|
+
/* System Font Stacks */
|
|
3
|
+
--system-ui: system-ui, sans-serif;
|
|
4
|
+
--transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
|
5
|
+
--old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
|
6
|
+
--humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
7
|
+
--geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
|
8
|
+
--classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
|
|
9
|
+
--neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
|
10
|
+
--monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
|
|
11
|
+
--monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
12
|
+
--industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
|
13
|
+
--rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
|
14
|
+
--slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
|
15
|
+
--antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
|
16
|
+
--didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
|
17
|
+
--handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
|
|
18
|
+
|
|
2
19
|
/* Mobile */
|
|
3
20
|
--mobile-heading-01: 32px;
|
|
4
21
|
--mobile-heading-02: 28px;
|