@szum-tech/design-system 1.5.3 → 1.5.5
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
CHANGED
|
@@ -46,13 +46,13 @@ After installing the [@szum-tech/design-system](https://www.npmjs.com/package/@s
|
|
|
46
46
|
module.exports = {
|
|
47
47
|
content: [
|
|
48
48
|
"...",
|
|
49
|
-
"./node_modules/@szum-tech/design-system
|
|
49
|
+
"./node_modules/@szum-tech/design-system/{components,hooks,contexts}/**/*{js,ts,jsx,tsx}"
|
|
50
50
|
],
|
|
51
51
|
theme: {
|
|
52
52
|
extend: {}
|
|
53
53
|
},
|
|
54
54
|
plugins: [],
|
|
55
|
-
presets: [require("@szum-tech/design-system/
|
|
55
|
+
presets: [require("@szum-tech/design-system/theme/main-preset")]
|
|
56
56
|
};
|
|
57
57
|
```
|
|
58
58
|
|
|
@@ -61,7 +61,7 @@ module.exports = {
|
|
|
61
61
|
> Import CSS file from `@szum-tech/design-system/theme` with colors palette for dark and light theme and default styles (see file with [theme styles](https://github.com/JanSzewczyk/design-system/blob/main/src/theme/global.css))
|
|
62
62
|
|
|
63
63
|
```css
|
|
64
|
-
@import "@szum-tech/design-system/
|
|
64
|
+
@import "@szum-tech/design-system/theme/global.css";
|
|
65
65
|
|
|
66
66
|
@tailwind base;
|
|
67
67
|
@tailwind components;
|
package/package.json
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"components/**",
|
|
63
63
|
"hooks/**",
|
|
64
64
|
"contexts/**",
|
|
65
|
-
"
|
|
65
|
+
"theme/**"
|
|
66
66
|
],
|
|
67
67
|
"homepage": "https://github.com/JanSzewczyk/design-system#readme",
|
|
68
68
|
"keywords": [
|
|
@@ -90,25 +90,26 @@
|
|
|
90
90
|
"url": "git+https://github.com/JanSzewczyk/design-system.git"
|
|
91
91
|
},
|
|
92
92
|
"scripts": {
|
|
93
|
-
"build": "tsup",
|
|
93
|
+
"build": "tsup && cpy './src/theme/global.css' './theme' --flat",
|
|
94
94
|
"typecheck": "tsc --noEmit",
|
|
95
|
-
"clean": "rm -rf node_modules &&
|
|
95
|
+
"clean": "rm -rf node_modules && yarn clear:build",
|
|
96
|
+
"clear:build": "rm -rf components && rm -rf contexts && rm -rf hooks && rm -rf theme && rm -rf index.*",
|
|
96
97
|
"dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
|
|
97
98
|
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react,react-dom",
|
|
98
|
-
"dev:css": "tailwindcss -w -i
|
|
99
|
+
"dev:css": "tailwindcss -w -i src/theme/global.css -o src/styles/default.css",
|
|
99
100
|
"semantic-release": "semantic-release",
|
|
100
101
|
"storybook": "storybook dev -p 6006 -s public",
|
|
101
|
-
"storybook:prebuild": "tailwindcss -i
|
|
102
|
+
"storybook:prebuild": "tailwindcss -i src/theme/global.css -o src/styles/default.css",
|
|
102
103
|
"storybook:build": "storybook build --docs",
|
|
103
104
|
"storybook:serve": "serve storybook-static"
|
|
104
105
|
},
|
|
105
106
|
"sideEffects": false,
|
|
106
107
|
"types": "./index.d.ts",
|
|
107
|
-
"version": "1.5.
|
|
108
|
+
"version": "1.5.5",
|
|
108
109
|
"peerDependencies": {
|
|
109
110
|
"@tailwindcss/container-queries": "^0.1.0",
|
|
110
111
|
"react": "^18.2.0",
|
|
111
|
-
"tailwind-scrollbar": "^2.0
|
|
112
|
-
"tailwindcss": "^3.2.
|
|
112
|
+
"tailwind-scrollbar": "^2.1.0",
|
|
113
|
+
"tailwindcss": "^3.2.7"
|
|
113
114
|
}
|
|
114
115
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap");
|
|
2
|
-
@import url("https://fonts.googleapis.com/css2?family=
|
|
2
|
+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
|
3
3
|
|
|
4
4
|
@tailwind base;
|
|
5
5
|
@tailwind components;
|
|
@@ -121,6 +121,6 @@
|
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
body {
|
|
124
|
-
@apply scroll bg-gray-900
|
|
124
|
+
@apply font-poppins scroll bg-gray-900 text-typography-primary antialiased;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
@@ -1,21 +1,91 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
4
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
// src/theme/plugins/components/scroll.js
|
|
8
|
+
var require_scroll = __commonJS({
|
|
9
|
+
"src/theme/plugins/components/scroll.js"(exports2, module2) {
|
|
10
|
+
"use strict";
|
|
11
|
+
var plugin = require("tailwindcss/plugin");
|
|
12
|
+
module2.exports = plugin(function({ addComponents }) {
|
|
13
|
+
addComponents({
|
|
14
|
+
".scroll": {
|
|
15
|
+
"@apply scrollbar scrollbar-thin scrollbar-thumb-gray-600/100 hover:scrollbar-thumb-gray-600/80": {}
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// src/theme/plugins/components/typography.js
|
|
23
|
+
var require_typography = __commonJS({
|
|
24
|
+
"src/theme/plugins/components/typography.js"(exports2, module2) {
|
|
25
|
+
"use strict";
|
|
26
|
+
var plugin = require("tailwindcss/plugin");
|
|
27
|
+
module2.exports = plugin(function({ addComponents }) {
|
|
28
|
+
addComponents({
|
|
29
|
+
".typography-heading-1": {
|
|
30
|
+
"@apply font-poppins text-6xl font-light leading-relaxed -tracking-[.01562em]": {}
|
|
31
|
+
},
|
|
32
|
+
".typography-heading-2": {
|
|
33
|
+
"@apply leading-[1.2] font-poppins text-5xl font-light -tracking-[.00833em]": {}
|
|
34
|
+
},
|
|
35
|
+
".typography-heading-3": {
|
|
36
|
+
"@apply font-poppins text-4xl font-normal leading-[1.167] tracking-normal": {}
|
|
37
|
+
},
|
|
38
|
+
".typography-heading-4": {
|
|
39
|
+
"@apply font-poppins text-3xl font-normal leading-[1.235] tracking-[.00735em]": {}
|
|
40
|
+
},
|
|
41
|
+
".typography-heading-5": {
|
|
42
|
+
"@apply font-poppins text-2xl font-normal leading-[1.334] tracking-normal": {}
|
|
43
|
+
},
|
|
44
|
+
".typography-heading-6": {
|
|
45
|
+
"@apply font-poppins text-xl font-normal font-medium leading-[1.6] tracking-[.0075em]": {}
|
|
46
|
+
},
|
|
47
|
+
".typography-subtitle-1": {
|
|
48
|
+
"@apply font-poppins text-base leading-7 tracking-[.00938em]": {}
|
|
49
|
+
},
|
|
50
|
+
".typography-subtitle-2": {
|
|
51
|
+
"@apply font-poppins text-sm font-medium leading-[1.57] tracking-[.00714em]": {}
|
|
52
|
+
},
|
|
53
|
+
".typography-body-1": {
|
|
54
|
+
"@apply font-poppins text-base font-normal leading-normal tracking-[.00938em]": {}
|
|
55
|
+
},
|
|
56
|
+
".typography-body-2": {
|
|
57
|
+
"@apply font-poppins text-sm font-normal leading-[1.43] tracking-[.01071em]": {}
|
|
58
|
+
},
|
|
59
|
+
".typography-button": {
|
|
60
|
+
"@apply font-poppins text-sm font-medium leading-[1.75] tracking-[.02857em]": {}
|
|
61
|
+
},
|
|
62
|
+
".typography-caption": {
|
|
63
|
+
"@apply font-poppins text-xs font-normal leading-[1.66] tracking-[.03333em]": {}
|
|
64
|
+
},
|
|
65
|
+
".typography-overline": {
|
|
66
|
+
"@apply font-poppins text-xs font-normal uppercase leading-[2.66] tracking-[.08333em]": {}
|
|
67
|
+
},
|
|
68
|
+
".typography-code": {
|
|
69
|
+
"@apply font-code text-base font-bold leading-5 tracking-wide": {}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// src/theme/main-preset.js
|
|
77
|
+
var screens = {
|
|
2
78
|
sm: "640px",
|
|
3
79
|
// => @media (min-width: 640px) { ... }
|
|
4
|
-
|
|
5
80
|
md: "768px",
|
|
6
81
|
// => @media (min-width: 768px) { ... }
|
|
7
|
-
|
|
8
82
|
lg: "1024px",
|
|
9
83
|
// => @media (min-width: 1024px) { ... }
|
|
10
|
-
|
|
11
84
|
xl: "1280px",
|
|
12
85
|
// => @media (min-width: 1280px) { ... }
|
|
13
|
-
|
|
14
86
|
"2xl": "1536px"
|
|
15
87
|
// => @media (min-width: 1536px) { ... }
|
|
16
88
|
};
|
|
17
|
-
|
|
18
|
-
/** @type {import('tailwindcss').Config} */
|
|
19
89
|
module.exports = {
|
|
20
90
|
darkMode: "class",
|
|
21
91
|
theme: {
|
|
@@ -86,7 +156,7 @@ module.exports = {
|
|
|
86
156
|
white: "rgb(var(--white) / <alpha-value>)"
|
|
87
157
|
},
|
|
88
158
|
fontFamily: {
|
|
89
|
-
|
|
159
|
+
poppins: ["'Poppins', sans-serif"],
|
|
90
160
|
code: ["'JetBrains Mono', monospace"]
|
|
91
161
|
},
|
|
92
162
|
fontSize: {
|
|
@@ -119,7 +189,7 @@ module.exports = {
|
|
|
119
189
|
plugins: [
|
|
120
190
|
require("@tailwindcss/container-queries"),
|
|
121
191
|
require("tailwind-scrollbar"),
|
|
122
|
-
|
|
123
|
-
|
|
192
|
+
require_scroll(),
|
|
193
|
+
require_typography()
|
|
124
194
|
]
|
|
125
195
|
};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
const plugin = require("tailwindcss/plugin");
|
|
2
|
-
|
|
3
|
-
module.exports = plugin(function ({ addComponents }) {
|
|
4
|
-
addComponents({
|
|
5
|
-
".typography-heading-1": {
|
|
6
|
-
"@apply font-sans text-6xl font-light leading-relaxed -tracking-[.01562em]": {}
|
|
7
|
-
},
|
|
8
|
-
".typography-heading-2": {
|
|
9
|
-
"@apply leading-[1.2] font-sans text-5xl font-light -tracking-[.00833em]": {}
|
|
10
|
-
},
|
|
11
|
-
".typography-heading-3": {
|
|
12
|
-
"@apply font-sans text-4xl font-normal leading-[1.167] tracking-normal": {}
|
|
13
|
-
},
|
|
14
|
-
".typography-heading-4": {
|
|
15
|
-
"@apply font-sans text-3xl font-normal leading-[1.235] tracking-[.00735em]": {}
|
|
16
|
-
},
|
|
17
|
-
".typography-heading-5": {
|
|
18
|
-
"@apply font-sans text-2xl font-normal leading-[1.334] tracking-normal": {}
|
|
19
|
-
},
|
|
20
|
-
".typography-heading-6": {
|
|
21
|
-
"@apply font-sans text-xl font-normal font-medium leading-[1.6] tracking-[.0075em]": {}
|
|
22
|
-
},
|
|
23
|
-
".typography-subtitle-1": {
|
|
24
|
-
"@apply font-sans text-base leading-7 tracking-[.00938em]": {}
|
|
25
|
-
},
|
|
26
|
-
".typography-subtitle-2": {
|
|
27
|
-
"@apply font-sans text-sm font-medium leading-[1.57] tracking-[.00714em]": {}
|
|
28
|
-
},
|
|
29
|
-
".typography-body-1": {
|
|
30
|
-
"@apply font-sans text-base font-normal leading-normal tracking-[.00938em]": {}
|
|
31
|
-
},
|
|
32
|
-
".typography-body-2": {
|
|
33
|
-
"@apply font-sans text-sm font-normal leading-[1.43] tracking-[.01071em]": {}
|
|
34
|
-
},
|
|
35
|
-
".typography-button": {
|
|
36
|
-
"@apply font-sans text-sm font-medium leading-[1.75] tracking-[.02857em]": {}
|
|
37
|
-
},
|
|
38
|
-
".typography-caption": {
|
|
39
|
-
"@apply font-sans text-xs font-normal leading-[1.66] tracking-[.03333em]": {}
|
|
40
|
-
},
|
|
41
|
-
".typography-overline": {
|
|
42
|
-
"@apply font-sans text-xs font-normal uppercase leading-[2.66] tracking-[.08333em]": {}
|
|
43
|
-
},
|
|
44
|
-
".typography-code": {
|
|
45
|
-
"@apply font-code text-base font-bold leading-5 tracking-wide": {}
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
});
|