@mysetup/typography 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Typography/Typography.d.ts +0 -1
  2. package/dist/Typography/Typography.d.ts.map +1 -1
  3. package/dist/Typography/Typography.js +0 -1
  4. package/dist/styles.css +72 -0
  5. package/package.json +2 -2
  6. package/dist/styles.scss +0 -105
package/dist/Typography/Typography.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import "../styles.scss";
2
1
  import { type ReactNode, type ElementType, type HTMLAttributes } from "react";
3
2
  export declare const TypographyVariant: {
4
3
  headline1: string;
package/dist/Typography/Typography.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAc7B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAG/D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3E;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU,4DAOpB,eAAe,2FASjB,CAAC"}
1
+ {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAc7B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAG/D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3E;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU,4DAOpB,eAAe,2FASjB,CAAC"}
package/dist/Typography/Typography.js CHANGED
@@ -23,7 +23,6 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  };
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
25
  exports.Typography = exports.TypographyVariant = void 0;
26
- require("../styles.scss");
27
26
  var react_1 = require("react");
28
27
  var classnames_1 = require("@mysetup/classnames");
29
28
  exports.TypographyVariant = {
package/dist/styles.css ADDED
@@ -0,0 +1,72 @@
1
+ @layer base {
2
+ .headline1 {
3
+ @apply lg:text-[34px] lg:leading-[42px] text-[30px] leading-[36px];
4
+ }
5
+
6
+ .headline2 {
7
+ @apply lg:text-[28px] lg:leading-[36px] text-[22px] leading-[26px];
8
+ }
9
+
10
+ .headline3 {
11
+ @apply lg:text-[24px] lg:leading-[28px] text-[20px] leading-[25px];
12
+ }
13
+
14
+ .headline4 {
15
+ @apply lg:text-[17px] lg:leading-[23px] uppercase text-[15px] leading-[22px];
16
+ }
17
+
18
+ .headline5 {
19
+ @apply lg:text-[17px] lg:leading-[25px] text-[15px] leading-[22px];
20
+ }
21
+
22
+ .headline6 {
23
+ @apply lg:text-[16px] lg:leading-[24px] text-[13px] leading-[20px];
24
+ }
25
+
26
+ .headline7 {
27
+ @apply lg:text-[12px] lg:leading-[18px] text-[11px] leading-[26px];
28
+ }
29
+
30
+ .paragraph {
31
+ @apply text-[14px] leading-[21px] tracking-[0.3px];
32
+ }
33
+
34
+ .paragraph-small {
35
+ @apply text-[12px] leading-[18px] tracking-[0.6px];
36
+ }
37
+
38
+ .eyebrow {
39
+ @apply text-[11px] leading-[21px] tracking-[1.09px];
40
+ }
41
+
42
+ .disclaimer {
43
+ @apply text-[12px] leading-[18px] tracking-[0.13px];
44
+ }
45
+
46
+ .disclaimer-small {
47
+ @apply text-[10px] leading-[18px] tracking-[0.11px];
48
+ }
49
+ .usecode {
50
+ @apply text-[14px] leading-[21px] tracking-[0.3px];
51
+ }
52
+ .quotes {
53
+ @apply text-[24px] leading-[21px] tracking-[0.3px] italic;
54
+ }
55
+
56
+ /*Update leading for headline display classes*/
57
+ [class*="headline"].display {
58
+ font-family: var(--font-display);
59
+ @apply leading-[44px];
60
+ }
61
+
62
+ /*TODO - TEMP Style - Remove once links SB component is created*/
63
+ .link {
64
+ @apply text-[14px] leading-[21px];
65
+ }
66
+ .link-small {
67
+ @apply !text-[10px] leading-[21px];
68
+ }
69
+ .text-default-color {
70
+ @apply text-[#3F51B5];
71
+ }
72
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mysetup/typography",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -16,7 +16,7 @@
16
16
  "./package.json": "./package.json"
17
17
  },
18
18
  "scripts": {
19
- "build": "rm -rf ./dist && tsc -p tsconfig.build.json && cp 'styles.scss' 'dist/'",
19
+ "build": "rm -rf ./dist && tsc -p tsconfig.build.json && cp 'styles.css' 'dist/'",
20
20
  "lint": "eslint .",
21
21
  "typecheck": "tsc --noEmit",
22
22
  "test": "jest",
package/dist/styles.scss DELETED
@@ -1,105 +0,0 @@
1
- // Define a mixin for responsive typography
2
- @mixin responsive-text(
3
- $mobile-size,
4
- $mobile-line,
5
- $desktop-size,
6
- $desktop-line
7
- ) {
8
- font-size: $mobile-size;
9
- line-height: $mobile-line;
10
- @media (min-width: 1024px) {
11
- font-size: $desktop-size;
12
- line-height: $desktop-line;
13
- }
14
- }
15
-
16
- .headline1 {
17
- @include responsive-text(30px, 36px, 34px, 42px);
18
- }
19
-
20
- .headline2 {
21
- @include responsive-text(22px, 26px, 28px, 36px);
22
- }
23
-
24
- .headline3 {
25
- @include responsive-text(20px, 25px, 24px, 28px);
26
- }
27
-
28
- .headline4 {
29
- @include responsive-text(15px, 22px, 17px, 23px);
30
- text-transform: uppercase;
31
- }
32
-
33
- .headline5 {
34
- @include responsive-text(15px, 22px, 17px, 25px);
35
- }
36
-
37
- .headline6 {
38
- @include responsive-text(13px, 20px, 16px, 24px);
39
- }
40
-
41
- .headline7 {
42
- @include responsive-text(11px, 26px, 12px, 18px);
43
- }
44
-
45
- .paragraph {
46
- font-size: 14px;
47
- line-height: 21px;
48
- letter-spacing: 0.3px;
49
- }
50
-
51
- .paragraph-small {
52
- font-size: 12px;
53
- line-height: 18px;
54
- letter-spacing: 0.6px;
55
- }
56
-
57
- .eyebrow {
58
- font-size: 11px;
59
- line-height: 21px;
60
- letter-spacing: 1.09px;
61
- }
62
-
63
- .disclaimer {
64
- font-size: 12px;
65
- line-height: 18px;
66
- letter-spacing: 0.13px;
67
- }
68
-
69
- .disclaimer-small {
70
- font-size: 10px;
71
- line-height: 18px;
72
- letter-spacing: 0.11px;
73
- }
74
-
75
- .usecode {
76
- font-size: 14px;
77
- line-height: 21px;
78
- letter-spacing: 0.3px;
79
- }
80
-
81
- .quotes {
82
- font-size: 24px;
83
- line-height: 21px;
84
- letter-spacing: 0.3px;
85
- font-style: italic;
86
- }
87
-
88
- [class*="headline"].display {
89
- font-family: var(--font-display);
90
- line-height: 44px;
91
- }
92
-
93
- .link {
94
- font-size: 14px;
95
- line-height: 21px;
96
- }
97
-
98
- .link-small {
99
- font-size: 10px !important;
100
- line-height: 21px;
101
- }
102
-
103
- .text-default-color {
104
- color: #3f51b5;
105
- }