@szum-tech/design-system 1.1.8 → 1.3.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.
package/README.md
CHANGED
|
@@ -23,14 +23,14 @@ Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/p
|
|
|
23
23
|
|
|
24
24
|
```sh
|
|
25
25
|
npm install @szum-tech/design-system
|
|
26
|
-
npm install -D tailwindcss tailwind-scrollbar
|
|
26
|
+
npm install -D tailwindcss tailwind-scrollbar @tailwindcss/container-queries
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
**yarn:**
|
|
30
30
|
|
|
31
31
|
```sh
|
|
32
32
|
yarn add @szum-tech/design-system
|
|
33
|
-
yarn add -D tailwindcss tailwind-scrollbar
|
|
33
|
+
yarn add -D tailwindcss tailwind-scrollbar @tailwindcss/container-queries
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
## Configuration
|
package/dist/index.js
CHANGED
|
@@ -12,7 +12,7 @@ var React2__default = /*#__PURE__*/_interopDefaultLegacy(React2);
|
|
|
12
12
|
// src/components/index.tsx
|
|
13
13
|
function Button() {
|
|
14
14
|
return /* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
15
|
-
className: "scroll rounded-lg border border-
|
|
15
|
+
className: "scroll rounded-lg border border-primary-500 bg-primary-300 p-4",
|
|
16
16
|
children: "button"
|
|
17
17
|
});
|
|
18
18
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import React2 from 'react';
|
|
|
4
4
|
// src/components/index.tsx
|
|
5
5
|
function Button() {
|
|
6
6
|
return /* @__PURE__ */ jsx("button", {
|
|
7
|
-
className: "scroll rounded-lg border border-
|
|
7
|
+
className: "scroll rounded-lg border border-primary-500 bg-primary-300 p-4",
|
|
8
8
|
children: "button"
|
|
9
9
|
});
|
|
10
10
|
}
|
package/package.json
CHANGED
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
"url": "https://github.com/JanSzewczyk/design-system/issues"
|
|
5
5
|
},
|
|
6
6
|
"description": "Szum-Tech design system with tailwindcss support",
|
|
7
|
+
"dependencies": {
|
|
8
|
+
"tailwindcss": "^3.2.4"
|
|
9
|
+
},
|
|
7
10
|
"devDependencies": {
|
|
8
11
|
"@babel/core": "^7.19.6",
|
|
9
12
|
"@semantic-release/changelog": "^6.0.1",
|
|
@@ -17,6 +20,7 @@
|
|
|
17
20
|
"@storybook/addon-essentials": "^6.5.13",
|
|
18
21
|
"@storybook/addon-interactions": "^6.5.13",
|
|
19
22
|
"@storybook/addon-links": "^6.5.13",
|
|
23
|
+
"@storybook/addon-postcss": "^2.0.0",
|
|
20
24
|
"@storybook/addons": "^6.5.13",
|
|
21
25
|
"@storybook/builder-webpack5": "^6.5.13",
|
|
22
26
|
"@storybook/core-events": "^6.5.13",
|
|
@@ -24,6 +28,7 @@
|
|
|
24
28
|
"@storybook/react": "^6.5.13",
|
|
25
29
|
"@storybook/testing-library": "^0.0.13",
|
|
26
30
|
"@storybook/theming": "^6.5.13",
|
|
31
|
+
"@tailwindcss/container-queries": "^0.1.0",
|
|
27
32
|
"@testing-library/react": "^13.4.0",
|
|
28
33
|
"@testing-library/user-event": "^14.4.3",
|
|
29
34
|
"@types/prettier": "^2.7.1",
|
|
@@ -44,7 +49,6 @@
|
|
|
44
49
|
"semantic-release": "^19.0.5",
|
|
45
50
|
"storybook-dark-mode": "^1.1.2",
|
|
46
51
|
"tailwind-scrollbar": "^2.0.1",
|
|
47
|
-
"tailwindcss": "^3.2.1",
|
|
48
52
|
"tsup": "^6.3.0",
|
|
49
53
|
"typescript": "^4.8.4"
|
|
50
54
|
},
|
|
@@ -78,10 +82,10 @@
|
|
|
78
82
|
"url": "git+https://github.com/JanSzewczyk/design-system.git"
|
|
79
83
|
},
|
|
80
84
|
"scripts": {
|
|
81
|
-
"build": "tsup src/index.tsx --format esm,cjs --dts --treeshake --external react",
|
|
85
|
+
"build": "tsup src/index.tsx --format esm,cjs --dts --treeshake --external react,react-dom",
|
|
82
86
|
"clean": "rm -rf node_modules && rm -rf dist",
|
|
83
87
|
"dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
|
|
84
|
-
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
|
|
88
|
+
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react,react-dom",
|
|
85
89
|
"dev:css": "tailwindcss -w -i tailwindcss/global.css -o src/styles/default.css",
|
|
86
90
|
"storybook": "start-storybook -p 6006",
|
|
87
91
|
"semantic-release": "semantic-release",
|
|
@@ -91,10 +95,11 @@
|
|
|
91
95
|
},
|
|
92
96
|
"sideEffects": false,
|
|
93
97
|
"types": "./dist/index.d.ts",
|
|
94
|
-
"version": "1.
|
|
98
|
+
"version": "1.3.0",
|
|
95
99
|
"peerDependencies": {
|
|
100
|
+
"@tailwindcss/container-queries": "^0.1.0",
|
|
96
101
|
"react": "^18.2.0",
|
|
97
102
|
"tailwind-scrollbar": "^2.0.1",
|
|
98
|
-
"tailwindcss": "^3.2.
|
|
103
|
+
"tailwindcss": "^3.2.4"
|
|
99
104
|
}
|
|
100
105
|
}
|
|
@@ -2,80 +2,91 @@
|
|
|
2
2
|
module.exports = {
|
|
3
3
|
darkMode: "class",
|
|
4
4
|
theme: {
|
|
5
|
+
colors: {
|
|
6
|
+
black: "rgb(var(--black) / <alpha-value>)",
|
|
7
|
+
error: {
|
|
8
|
+
100: "rgb(var(--error-100) / <alpha-value>)",
|
|
9
|
+
200: "rgb(var(--error-200) / <alpha-value>)",
|
|
10
|
+
300: "rgb(var(--error-300) / <alpha-value>)",
|
|
11
|
+
400: "rgb(var(--error-400) / <alpha-value>)",
|
|
12
|
+
500: "rgb(var(--error-500) / <alpha-value>)",
|
|
13
|
+
600: "rgb(var(--error-600) / <alpha-value>)",
|
|
14
|
+
700: "rgb(var(--error-700) / <alpha-value>)",
|
|
15
|
+
800: "rgb(var(--error-800) / <alpha-value>)",
|
|
16
|
+
900: "rgb(var(--error-900) / <alpha-value>)"
|
|
17
|
+
},
|
|
18
|
+
gray: {
|
|
19
|
+
100: "rgb(var(--gray-100) / <alpha-value>)",
|
|
20
|
+
200: "rgb(var(--gray-200) / <alpha-value>)",
|
|
21
|
+
300: "rgb(var(--gray-300) / <alpha-value>)",
|
|
22
|
+
400: "rgb(var(--gray-400) / <alpha-value>)",
|
|
23
|
+
500: "rgb(var(--gray-500) / <alpha-value>)",
|
|
24
|
+
600: "rgb(var(--gray-600) / <alpha-value>)",
|
|
25
|
+
700: "rgb(var(--gray-700) / <alpha-value>)",
|
|
26
|
+
800: "rgb(var(--gray-800) / <alpha-value>)",
|
|
27
|
+
900: "rgb(var(--gray-900) / <alpha-value>)"
|
|
28
|
+
},
|
|
29
|
+
primary: {
|
|
30
|
+
100: "rgb(var(--primary-100) / <alpha-value>)",
|
|
31
|
+
200: "rgb(var(--primary-200) / <alpha-value>)",
|
|
32
|
+
300: "rgb(var(--primary-300) / <alpha-value>)",
|
|
33
|
+
400: "rgb(var(--primary-400) / <alpha-value>)",
|
|
34
|
+
500: "rgb(var(--primary-500) / <alpha-value>)",
|
|
35
|
+
600: "rgb(var(--primary-600) / <alpha-value>)",
|
|
36
|
+
700: "rgb(var(--primary-700) / <alpha-value>)",
|
|
37
|
+
800: "rgb(var(--primary-800) / <alpha-value>)",
|
|
38
|
+
900: "rgb(var(--primary-900) / <alpha-value>)"
|
|
39
|
+
},
|
|
40
|
+
success: {
|
|
41
|
+
100: "rgb(var(--success-100) / <alpha-value>)",
|
|
42
|
+
200: "rgb(var(--success-200) / <alpha-value>)",
|
|
43
|
+
300: "rgb(var(--success-300) / <alpha-value>)",
|
|
44
|
+
400: "rgb(var(--success-400) / <alpha-value>)",
|
|
45
|
+
500: "rgb(var(--success-500) / <alpha-value>)",
|
|
46
|
+
600: "rgb(var(--success-600) / <alpha-value>)",
|
|
47
|
+
700: "rgb(var(--success-700) / <alpha-value>)",
|
|
48
|
+
800: "rgb(var(--success-800) / <alpha-value>)",
|
|
49
|
+
900: "rgb(var(--success-900) / <alpha-value>)"
|
|
50
|
+
},
|
|
51
|
+
transparent: "transparent",
|
|
52
|
+
typography: {
|
|
53
|
+
DEFAULT: "rgb(var(--text-color) / <alpha-value>)",
|
|
54
|
+
primary: "rgb(var(--text-color) / 1)",
|
|
55
|
+
secondary: "rgb(var(--text-color) / 0.60)",
|
|
56
|
+
disabled: "rgb(var(--text-color) / 0.43)"
|
|
57
|
+
},
|
|
58
|
+
warning: {
|
|
59
|
+
100: "rgb(var(--warning-100) / <alpha-value>)",
|
|
60
|
+
200: "rgb(var(--warning-200) / <alpha-value>)",
|
|
61
|
+
300: "rgb(var(--warning-300) / <alpha-value>)",
|
|
62
|
+
400: "rgb(var(--warning-400) / <alpha-value>)",
|
|
63
|
+
500: "rgb(var(--warning-500) / <alpha-value>)",
|
|
64
|
+
600: "rgb(var(--warning-600) / <alpha-value>)",
|
|
65
|
+
700: "rgb(var(--warning-700) / <alpha-value>)",
|
|
66
|
+
800: "rgb(var(--warning-800) / <alpha-value>)",
|
|
67
|
+
900: "rgb(var(--warning-900) / <alpha-value>)"
|
|
68
|
+
},
|
|
69
|
+
white: "rgb(var(--white) / <alpha-value>)"
|
|
70
|
+
},
|
|
71
|
+
fontFamily: {
|
|
72
|
+
sans: ["'Open Sans', sans-serif"],
|
|
73
|
+
code: ["'JetBrains Mono', monospace"]
|
|
74
|
+
},
|
|
75
|
+
fontSize: {
|
|
76
|
+
xs: "0.75rem",
|
|
77
|
+
sm: "0.875rem",
|
|
78
|
+
base: "1rem",
|
|
79
|
+
xl: "1.25rem",
|
|
80
|
+
"2xl": "1.5rem",
|
|
81
|
+
"3xl": "2.125rem",
|
|
82
|
+
"4xl": "3rem",
|
|
83
|
+
"5xl": "3.75rem",
|
|
84
|
+
"6xl": "6rem"
|
|
85
|
+
},
|
|
5
86
|
extend: {
|
|
6
87
|
borderRadius: {
|
|
7
88
|
"1/2": "50%"
|
|
8
89
|
},
|
|
9
|
-
colors: {
|
|
10
|
-
black: "rgb(var(--black) / <alpha-value>)",
|
|
11
|
-
error: {
|
|
12
|
-
100: "rgb(var(--error-100) / <alpha-value>)",
|
|
13
|
-
200: "rgb(var(--error-200) / <alpha-value>)",
|
|
14
|
-
300: "rgb(var(--error-300) / <alpha-value>)",
|
|
15
|
-
400: "rgb(var(--error-400) / <alpha-value>)",
|
|
16
|
-
500: "rgb(var(--error-500) / <alpha-value>)",
|
|
17
|
-
600: "rgb(var(--error-600) / <alpha-value>)",
|
|
18
|
-
700: "rgb(var(--error-700) / <alpha-value>)",
|
|
19
|
-
800: "rgb(var(--error-800) / <alpha-value>)",
|
|
20
|
-
900: "rgb(var(--error-900) / <alpha-value>)"
|
|
21
|
-
},
|
|
22
|
-
gray: {
|
|
23
|
-
100: "rgb(var(--gray-100) / <alpha-value>)",
|
|
24
|
-
200: "rgb(var(--gray-200) / <alpha-value>)",
|
|
25
|
-
300: "rgb(var(--gray-300) / <alpha-value>)",
|
|
26
|
-
400: "rgb(var(--gray-400) / <alpha-value>)",
|
|
27
|
-
500: "rgb(var(--gray-500) / <alpha-value>)",
|
|
28
|
-
600: "rgb(var(--gray-600) / <alpha-value>)",
|
|
29
|
-
700: "rgb(var(--gray-700) / <alpha-value>)",
|
|
30
|
-
800: "rgb(var(--gray-800) / <alpha-value>)",
|
|
31
|
-
900: "rgb(var(--gray-900) / <alpha-value>)"
|
|
32
|
-
},
|
|
33
|
-
primary: {
|
|
34
|
-
100: "rgb(var(--primary-100) / <alpha-value>)",
|
|
35
|
-
200: "rgb(var(--primary-200) / <alpha-value>)",
|
|
36
|
-
300: "rgb(var(--primary-300) / <alpha-value>)",
|
|
37
|
-
400: "rgb(var(--primary-400) / <alpha-value>)",
|
|
38
|
-
500: "rgb(var(--primary-500) / <alpha-value>)",
|
|
39
|
-
600: "rgb(var(--primary-600) / <alpha-value>)",
|
|
40
|
-
700: "rgb(var(--primary-700) / <alpha-value>)",
|
|
41
|
-
800: "rgb(var(--primary-800) / <alpha-value>)",
|
|
42
|
-
900: "rgb(var(--primary-900) / <alpha-value>)"
|
|
43
|
-
},
|
|
44
|
-
success: {
|
|
45
|
-
100: "rgb(var(--success-100) / <alpha-value>)",
|
|
46
|
-
200: "rgb(var(--success-200) / <alpha-value>)",
|
|
47
|
-
300: "rgb(var(--success-300) / <alpha-value>)",
|
|
48
|
-
400: "rgb(var(--success-400) / <alpha-value>)",
|
|
49
|
-
500: "rgb(var(--success-500) / <alpha-value>)",
|
|
50
|
-
600: "rgb(var(--success-600) / <alpha-value>)",
|
|
51
|
-
700: "rgb(var(--success-700) / <alpha-value>)",
|
|
52
|
-
800: "rgb(var(--success-800) / <alpha-value>)",
|
|
53
|
-
900: "rgb(var(--success-900) / <alpha-value>)"
|
|
54
|
-
},
|
|
55
|
-
transparent: "transparent",
|
|
56
|
-
typography: {
|
|
57
|
-
DEFAULT: "rgb(var(--text-color) / <alpha-value>)",
|
|
58
|
-
primary: "rgb(var(--text-color) / 1)",
|
|
59
|
-
secondary: "rgb(var(--text-color) / 0.60)",
|
|
60
|
-
disabled: "rgb(var(--text-color) / 0.43)"
|
|
61
|
-
},
|
|
62
|
-
warning: {
|
|
63
|
-
100: "rgb(var(--warning-100) / <alpha-value>)",
|
|
64
|
-
200: "rgb(var(--warning-200) / <alpha-value>)",
|
|
65
|
-
300: "rgb(var(--warning-300) / <alpha-value>)",
|
|
66
|
-
400: "rgb(var(--warning-400) / <alpha-value>)",
|
|
67
|
-
500: "rgb(var(--warning-500) / <alpha-value>)",
|
|
68
|
-
600: "rgb(var(--warning-600) / <alpha-value>)",
|
|
69
|
-
700: "rgb(var(--warning-700) / <alpha-value>)",
|
|
70
|
-
800: "rgb(var(--warning-800) / <alpha-value>)",
|
|
71
|
-
900: "rgb(var(--warning-900) / <alpha-value>)"
|
|
72
|
-
},
|
|
73
|
-
white: "rgb(var(--white) / <alpha-value>)"
|
|
74
|
-
},
|
|
75
|
-
fontFamily: {
|
|
76
|
-
sans: ["'Open Sans', sans-serif"],
|
|
77
|
-
code: ["'JetBrains Mono', monospace"]
|
|
78
|
-
},
|
|
79
90
|
letterSpacing: {
|
|
80
91
|
1: "0.25rem",
|
|
81
92
|
2: "0.5rem",
|
|
@@ -87,5 +98,10 @@ module.exports = {
|
|
|
87
98
|
}
|
|
88
99
|
}
|
|
89
100
|
},
|
|
90
|
-
plugins: [
|
|
101
|
+
plugins: [
|
|
102
|
+
require("@tailwindcss/container-queries"),
|
|
103
|
+
require("tailwind-scrollbar"),
|
|
104
|
+
require("./plugins/components/scroll"),
|
|
105
|
+
require("./plugins/components/typography")
|
|
106
|
+
]
|
|
91
107
|
};
|
|
File without changes
|
|
@@ -0,0 +1,48 @@
|
|
|
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-7 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
|
+
});
|