@mysetup/typography 1.4.0 → 1.5.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 +1 -1
  2. package/dist/Typography/Typography.d.ts.map +1 -1
  3. package/dist/Typography/Typography.js +1 -1
  4. package/dist/styles.scss +105 -0
  5. package/package.json +2 -2
  6. package/dist/styles.css +0 -76
package/dist/Typography/Typography.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "../styles.css";
1
+ import "../styles.scss";
2
2
  import { type ReactNode, type ElementType, type HTMLAttributes } from "react";
3
3
  export declare const TypographyVariant: {
4
4
  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,eAAe,CAAC;AACvB,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,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"}
package/dist/Typography/Typography.js CHANGED
@@ -23,7 +23,7 @@ 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.css");
26
+ require("../styles.scss");
27
27
  var react_1 = require("react");
28
28
  var classnames_1 = require("@mysetup/classnames");
29
29
  exports.TypographyVariant = {
package/dist/styles.scss ADDED
@@ -0,0 +1,105 @@
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mysetup/typography",
3
- "version": "1.4.0",
3
+ "version": "1.5.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.css' 'dist/'",
19
+ "build": "rm -rf ./dist && tsc -p tsconfig.build.json && cp 'styles.scss' 'dist/'",
20
20
  "lint": "eslint .",
21
21
  "typecheck": "tsc --noEmit",
22
22
  "test": "jest",
package/dist/styles.css DELETED
@@ -1,76 +0,0 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- @layer base {
6
- .headline1 {
7
- @apply lg:text-[34px] lg:leading-[42px] text-[30px] leading-[36px];
8
- }
9
-
10
- .headline2 {
11
- @apply lg:text-[28px] lg:leading-[36px] text-[22px] leading-[26px];
12
- }
13
-
14
- .headline3 {
15
- @apply lg:text-[24px] lg:leading-[28px] text-[20px] leading-[25px];
16
- }
17
-
18
- .headline4 {
19
- @apply lg:text-[17px] lg:leading-[23px] uppercase text-[15px] leading-[22px];
20
- }
21
-
22
- .headline5 {
23
- @apply lg:text-[17px] lg:leading-[25px] text-[15px] leading-[22px];
24
- }
25
-
26
- .headline6 {
27
- @apply lg:text-[16px] lg:leading-[24px] text-[13px] leading-[20px];
28
- }
29
-
30
- .headline7 {
31
- @apply lg:text-[12px] lg:leading-[18px] text-[11px] leading-[26px];
32
- }
33
-
34
- .paragraph {
35
- @apply text-[14px] leading-[21px] tracking-[0.3px];
36
- }
37
-
38
- .paragraph-small {
39
- @apply text-[12px] leading-[18px] tracking-[0.6px];
40
- }
41
-
42
- .eyebrow {
43
- @apply text-[11px] leading-[21px] tracking-[1.09px];
44
- }
45
-
46
- .disclaimer {
47
- @apply text-[12px] leading-[18px] tracking-[0.13px];
48
- }
49
-
50
- .disclaimer-small {
51
- @apply text-[10px] leading-[18px] tracking-[0.11px];
52
- }
53
- .usecode {
54
- @apply text-[14px] leading-[21px] tracking-[0.3px];
55
- }
56
- .quotes {
57
- @apply text-[24px] leading-[21px] tracking-[0.3px] italic;
58
- }
59
-
60
- /*Update leading for headline display classes*/
61
- [class*="headline"].display {
62
- font-family: var(--font-display);
63
- @apply leading-[44px];
64
- }
65
-
66
- /*TODO - TEMP Style - Remove once links SB component is created*/
67
- .link {
68
- @apply text-[14px] leading-[21px];
69
- }
70
- .link-small {
71
- @apply !text-[10px] leading-[21px];
72
- }
73
- .text-default-color {
74
- @apply text-[#3F51B5];
75
- }
76
- }