@mysetup/typography 2.0.10 → 2.0.13

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 (2) hide show
  1. package/dist/styles.css +111 -46
  2. package/package.json +68 -69
package/dist/styles.css CHANGED
@@ -1,74 +1,139 @@
1
-
2
-
3
- @layer base {
1
+ .headline1 {
2
+ font-size: 30px;
3
+ line-height: 36px;
4
+ }
5
+ @media (min-width: 1024px) {
4
6
  .headline1 {
5
- @apply lg:text-[34px] lg:leading-[42px] text-[30px] leading-[36px];
7
+ font-size: 34px;
8
+ line-height: 42px;
6
9
  }
10
+ }
7
11
 
12
+ .headline2 {
13
+ font-size: 22px;
14
+ line-height: 26px;
15
+ }
16
+ @media (min-width: 1024px) {
8
17
  .headline2 {
9
- @apply lg:text-[28px] lg:leading-[36px] text-[22px] leading-[26px];
18
+ font-size: 28px;
19
+ line-height: 36px;
10
20
  }
21
+ }
11
22
 
23
+ .headline3 {
24
+ font-size: 20px;
25
+ line-height: 25px;
26
+ }
27
+ @media (min-width: 1024px) {
12
28
  .headline3 {
13
- @apply lg:text-[24px] lg:leading-[28px] text-[20px] leading-[25px];
29
+ font-size: 24px;
30
+ line-height: 28px;
14
31
  }
32
+ }
15
33
 
34
+ .headline4 {
35
+ font-size: 15px;
36
+ line-height: 22px;
37
+ text-transform: uppercase;
38
+ }
39
+ @media (min-width: 1024px) {
16
40
  .headline4 {
17
- @apply lg:text-[17px] lg:leading-[23px] uppercase text-[15px] leading-[22px];
41
+ font-size: 17px;
42
+ line-height: 23px;
18
43
  }
44
+ }
19
45
 
46
+ .headline5 {
47
+ font-size: 15px;
48
+ line-height: 22px;
49
+ }
50
+ @media (min-width: 1024px) {
20
51
  .headline5 {
21
- @apply lg:text-[17px] lg:leading-[25px] text-[15px] leading-[22px];
52
+ font-size: 17px;
53
+ line-height: 25px;
22
54
  }
55
+ }
23
56
 
57
+ .headline6 {
58
+ font-size: 13px;
59
+ line-height: 20px;
60
+ }
61
+ @media (min-width: 1024px) {
24
62
  .headline6 {
25
- @apply lg:text-[16px] lg:leading-[24px] text-[13px] leading-[20px];
63
+ font-size: 16px;
64
+ line-height: 24px;
26
65
  }
66
+ }
27
67
 
68
+ .headline7 {
69
+ font-size: 11px;
70
+ line-height: 26px;
71
+ }
72
+ @media (min-width: 1024px) {
28
73
  .headline7 {
29
- @apply lg:text-[12px] lg:leading-[18px] text-[11px] leading-[26px];
74
+ font-size: 12px;
75
+ line-height: 18px;
30
76
  }
77
+ }
31
78
 
32
- .paragraph {
33
- @apply text-[14px] leading-[21px] tracking-[0.3px];
34
- }
79
+ .paragraph {
80
+ font-size: 14px;
81
+ line-height: 21px;
82
+ letter-spacing: 0.3px;
83
+ }
35
84
 
36
- .paragraph-small {
37
- @apply text-[12px] leading-[18px] tracking-[0.6px];
38
- }
85
+ .paragraph-small {
86
+ font-size: 12px;
87
+ line-height: 18px;
88
+ letter-spacing: 0.6px;
89
+ }
39
90
 
40
- .eyebrow {
41
- @apply text-[11px] leading-[21px] tracking-[1.09px];
42
- }
91
+ .eyebrow {
92
+ font-size: 11px;
93
+ line-height: 21px;
94
+ letter-spacing: 1.09px;
95
+ }
43
96
 
44
- .disclaimer {
45
- @apply text-[12px] leading-[18px] tracking-[0.13px];
46
- }
97
+ .disclaimer {
98
+ font-size: 12px;
99
+ line-height: 18px;
100
+ letter-spacing: 0.13px;
101
+ }
47
102
 
48
- .disclaimer-small {
49
- @apply text-[10px] leading-[18px] tracking-[0.11px];
50
- }
51
- .usecode {
52
- @apply text-[14px] leading-[21px] tracking-[0.3px];
53
- }
54
- .quotes {
55
- @apply text-[24px] leading-[21px] tracking-[0.3px] italic;
56
- }
103
+ .disclaimer-small {
104
+ font-size: 10px;
105
+ line-height: 18px;
106
+ letter-spacing: 0.11px;
107
+ }
57
108
 
58
- /*Update leading for headline display classes*/
59
- [class*="headline"].display {
60
- font-family: var(--font-display);
61
- @apply leading-[44px];
62
- }
109
+ .usecode {
110
+ font-size: 14px;
111
+ line-height: 21px;
112
+ letter-spacing: 0.3px;
113
+ }
63
114
 
64
- /*TODO - TEMP Style - Remove once links SB component is created*/
65
- .link {
66
- @apply text-[14px] leading-[21px];
67
- }
68
- .link-small {
69
- @apply !text-[10px] leading-[21px];
70
- }
71
- .text-default-color {
72
- @apply text-[#3F51B5];
73
- }
115
+ .quotes {
116
+ font-size: 24px;
117
+ line-height: 21px;
118
+ letter-spacing: 0.3px;
119
+ font-style: italic;
120
+ }
121
+
122
+ [class*="headline"].display {
123
+ font-family: var(--font-display);
124
+ line-height: 44px;
125
+ }
126
+
127
+ .link {
128
+ font-size: 14px;
129
+ line-height: 21px;
130
+ }
131
+
132
+ .link-small {
133
+ font-size: 10px !important;
134
+ line-height: 21px;
135
+ }
136
+
137
+ .text-default-color {
138
+ color: #3F51B5;
74
139
  }
package/package.json CHANGED
@@ -1,71 +1,70 @@
1
1
  {
2
- "name": "@mysetup/typography",
3
- "version": "2.0.10",
4
- "description": "React typography components and CSS styles for UI applications.",
5
- "author": "krishnaraj <krishnaraj.webdev@gmail.com>",
6
- "license": "MIT",
7
- "keywords": [
8
- "react",
9
- "typography",
10
- "components",
11
- "css",
12
- "typescript"
13
- ],
14
- "publishConfig": {
15
- "access": "public"
2
+ "name": "@mysetup/typography",
3
+ "version": "2.0.13",
4
+ "description": "React typography components and CSS styles for UI applications.",
5
+ "author": "krishnaraj <krishnaraj.webdev@gmail.com>",
6
+ "license": "MIT",
7
+ "keywords": [
8
+ "react",
9
+ "typography",
10
+ "components",
11
+ "css",
12
+ "typescript"
13
+ ],
14
+ "publishConfig": {
15
+ "access": "public"
16
+ },
17
+ "main": "dist/index.js",
18
+ "types": "dist/index.d.ts",
19
+ "sideEffects": [
20
+ "./dist/styles.css"
21
+ ],
22
+ "files": [
23
+ "dist",
24
+ "README.md"
25
+ ],
26
+ "exports": {
27
+ ".": {
28
+ "types": "./dist/index.d.ts",
29
+ "import": "./dist/index.js",
30
+ "require": "./dist/index.js"
16
31
  },
17
- "main": "dist/index.js",
18
- "types": "dist/index.d.ts",
19
- "sideEffects": [
20
- "./dist/styles.css"
21
- ],
22
- "files": [
23
- "dist",
24
- "README.md"
25
- ],
26
- "exports": {
27
- ".": {
28
- "types": "./dist/index.d.ts",
29
- "import": "./dist/index.js",
30
- "require": "./dist/index.js"
31
- },
32
- "./styles.css": "./dist/styles.css",
33
- "./package.json": "./package.json"
34
- },
35
- "scripts": {
36
- "build": "node ../scripts/package-fs.cjs remove dist && tsc -p tsconfig.build.json && node ../scripts/package-fs.cjs ensure-leading-text dist/index.js \"\\\"use client\\\";\" && node ../scripts/package-fs.cjs copy-file styles.css dist/styles.css",
37
- "lint": "node ../scripts/run-eslint.cjs .",
38
- "typecheck": "tsc --noEmit",
39
- "test": "jest",
40
- "test:coverage": "jest --coverage",
41
- "format": "prettier --write \"**/*.{ts,tsx,md,js,mjs,json}\"",
42
- "checks": "pnpm typecheck && pnpm lint && pnpm test && pnpm build",
43
- "clean": "node ../scripts/package-fs.cjs remove node_modules .swc dist pnpm-lock.yaml && echo \"Cleaned\""
44
- },
45
- "dependencies": {
46
- "@mysetup/classnames": "workspace:^"
47
- },
48
- "peerDependencies": {
49
- "react": "^18.3.1 || ^19.0.0"
50
- },
51
- "devDependencies": {
52
- "@mysetup/eslint-config": "workspace:^",
53
- "@mysetup/jest-config": "workspace:^",
54
- "@mysetup/prettier-config": "workspace:^",
55
- "@mysetup/tsconfig": "workspace:^",
56
- "@testing-library/react": "^16.2.0",
57
- "@types/jest": "^29.5.14",
58
- "@types/jest-axe": "^3.5.9",
59
- "@types/react": "^18.3.1",
60
- "jest": "^29.7.0",
61
- "jest-axe": "^9.0.0",
62
- "react": "^18.3.1",
63
- "react-dom": "^18.3.1",
64
- "typescript": "5.5.4"
65
- },
66
- "prettier": "@mysetup/prettier-config",
67
- "engines": {
68
- "node": ">=20.15.1"
69
- },
70
- "packageManager": "pnpm@9.9.0"
71
- }
32
+ "./styles.css": "./dist/styles.css",
33
+ "./package.json": "./package.json"
34
+ },
35
+ "dependencies": {
36
+ "@mysetup/classnames": "2.0.10"
37
+ },
38
+ "peerDependencies": {
39
+ "react": "^18.3.1 || ^19.0.0"
40
+ },
41
+ "devDependencies": {
42
+ "@mysetup/eslint-config": "2.0.11",
43
+ "@mysetup/jest-config": "2.0.10",
44
+ "@mysetup/prettier-config": "2.0.10",
45
+ "@mysetup/tsconfig": "2.0.10",
46
+ "@testing-library/react": "^16.2.0",
47
+ "@types/jest": "^29.5.14",
48
+ "@types/jest-axe": "^3.5.9",
49
+ "@types/react": "^18.3.1",
50
+ "jest": "^29.7.0",
51
+ "jest-axe": "^9.0.0",
52
+ "react": "^18.3.1",
53
+ "react-dom": "^18.3.1",
54
+ "typescript": "5.5.4"
55
+ },
56
+ "prettier": "@mysetup/prettier-config",
57
+ "engines": {
58
+ "node": ">=20.15.1"
59
+ },
60
+ "scripts": {
61
+ "build": "node ../scripts/package-fs.cjs remove dist && tsc -p tsconfig.build.json && node ../scripts/package-fs.cjs ensure-leading-text dist/index.js \"\\\"use client\\\";\" && node ../scripts/package-fs.cjs copy-file styles.css dist/styles.css",
62
+ "lint": "node ../scripts/run-eslint.cjs .",
63
+ "typecheck": "tsc --noEmit",
64
+ "test": "jest",
65
+ "test:coverage": "jest --coverage",
66
+ "format": "prettier --write \"**/*.{ts,tsx,md,js,mjs,json}\"",
67
+ "checks": "pnpm typecheck && pnpm lint && pnpm test && pnpm build",
68
+ "clean": "node ../scripts/package-fs.cjs remove node_modules .swc dist pnpm-lock.yaml && echo \"Cleaned\""
69
+ }
70
+ }