@szum-tech/design-system 1.5.4 → 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 +3 -3
- package/package.json +7 -7
- package/theme/global.css +126 -0
- package/{tailwindcss → theme}/main-preset.js +80 -10
- package/tailwindcss/global.css +0 -13
- package/tailwindcss/palette.css +0 -113
- package/tailwindcss/plugins/components/scroll.js +0 -10
- package/tailwindcss/plugins/components/typography.js +0 -48
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,22 +90,22 @@
|
|
|
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 &&
|
|
96
|
-
"clear:build": "rm -rf components && rm -rf contexts && rm -rf hooks && rm -rf
|
|
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.*",
|
|
97
97
|
"dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
|
|
98
98
|
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react,react-dom",
|
|
99
|
-
"dev:css": "tailwindcss -w -i
|
|
99
|
+
"dev:css": "tailwindcss -w -i src/theme/global.css -o src/styles/default.css",
|
|
100
100
|
"semantic-release": "semantic-release",
|
|
101
101
|
"storybook": "storybook dev -p 6006 -s public",
|
|
102
|
-
"storybook:prebuild": "tailwindcss -i
|
|
102
|
+
"storybook:prebuild": "tailwindcss -i src/theme/global.css -o src/styles/default.css",
|
|
103
103
|
"storybook:build": "storybook build --docs",
|
|
104
104
|
"storybook:serve": "serve storybook-static"
|
|
105
105
|
},
|
|
106
106
|
"sideEffects": false,
|
|
107
107
|
"types": "./index.d.ts",
|
|
108
|
-
"version": "1.5.
|
|
108
|
+
"version": "1.5.5",
|
|
109
109
|
"peerDependencies": {
|
|
110
110
|
"@tailwindcss/container-queries": "^0.1.0",
|
|
111
111
|
"react": "^18.2.0",
|
package/theme/global.css
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
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=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
|
+
|
|
4
|
+
@tailwind base;
|
|
5
|
+
@tailwind components;
|
|
6
|
+
@tailwind utilities;
|
|
7
|
+
|
|
8
|
+
@layer base {
|
|
9
|
+
:root {
|
|
10
|
+
--white: 250 250 250; /* rgb(250 250 250) */
|
|
11
|
+
--black: 28 28 28; /* rgb(28, 28, 28) */
|
|
12
|
+
|
|
13
|
+
--text-color: 28 28 28; /* rgb(28 28 28) */
|
|
14
|
+
|
|
15
|
+
--primary-100: 153 206 255; /* rgb(153, 206, 255) 60% */
|
|
16
|
+
--primary-200: 115 187 255; /* rgb(115, 187, 255) 45% */
|
|
17
|
+
--primary-300: 77 169 255; /* rgb(77, 169, 255) 30% */
|
|
18
|
+
--primary-400: 38 150 255; /* rgb(38, 150, 255) 15% */
|
|
19
|
+
--primary-500: 0 132 255; /* rgb(0, 132, 255) */
|
|
20
|
+
--primary-600: 0 112 217; /* rgb(0, 112, 217) 15% */
|
|
21
|
+
--primary-700: 0 92 179; /* rgb(0, 92, 179) 30% */
|
|
22
|
+
--primary-800: 0 73 140; /* rgb(0, 73, 140) 45% */
|
|
23
|
+
--primary-900: 0 53 102; /* rgb(0, 53, 102) 60% */
|
|
24
|
+
|
|
25
|
+
--success-100: 125 255 162; /* rgb(125, 255, 162) */
|
|
26
|
+
--success-200: 77 255 127; /* rgb(77, 255, 127) */
|
|
27
|
+
--success-300: 28 255 92; /* rgb(28, 255, 92) */
|
|
28
|
+
--success-400: 0 235 66; /* rgb(0, 235, 66) */
|
|
29
|
+
--success-500: 0 186 52; /* rgb(0, 186, 52) */
|
|
30
|
+
--success-600: 0 158 44; /* rgb(0, 158, 44) */
|
|
31
|
+
--success-700: 0 130 36; /* rgb(0, 130, 36) */
|
|
32
|
+
--success-800: 0 102 29; /* rgb(0, 102, 29) */
|
|
33
|
+
--success-900: 0 74 21; /* rgb(0, 74, 21) */
|
|
34
|
+
|
|
35
|
+
--warning-100: 255 207 151; /* rgb(255, 207, 151) */
|
|
36
|
+
--warning-200: 255 189 111; /* rgb(255, 189, 111) */
|
|
37
|
+
--warning-300: 255 171 72; /* rgb(255, 171, 72) */
|
|
38
|
+
--warning-400: 255 153 33; /* rgb(255, 153, 33) */
|
|
39
|
+
--warning-500: 249 134 0; /* rgb(249, 134, 0) */
|
|
40
|
+
--warning-600: 212 114 0; /* rgb(212, 114, 0) */
|
|
41
|
+
--warning-700: 174 94 0; /* rgb(174, 94, 0) */
|
|
42
|
+
--warning-800: 137 74 0; /* rgb(137, 74, 0) */
|
|
43
|
+
--warning-900: 100 54 0; /* rgb(100, 54, 0) */
|
|
44
|
+
|
|
45
|
+
--error-100: 246 171 171; /* rgb(246, 171, 171) */
|
|
46
|
+
--error-200: 243 139 139; /* rgb(243, 139, 139) */
|
|
47
|
+
--error-300: 240 107 107; /* rgb(240, 107, 107) */
|
|
48
|
+
--error-400: 236 76 76; /* rgb(236, 76, 76) */
|
|
49
|
+
--error-500: 233 44 44; /* rgb(233, 44, 44) */
|
|
50
|
+
--error-600: 213 22 22; /* rgb(213, 22, 22) */
|
|
51
|
+
--error-700: 176 18 18; /* rgb(176, 18, 18) */
|
|
52
|
+
--error-800: 138 14 14; /* rgb(138, 14, 14) */
|
|
53
|
+
--error-900: 100 10 10; /* rgb(100, 10, 10) */
|
|
54
|
+
|
|
55
|
+
--gray-100: 75 75 75; /* rgb(75, 75, 75) 70% */
|
|
56
|
+
--gray-200: 100 100 100; /* rgb(100, 100, 100) 60% */
|
|
57
|
+
--gray-300: 125 125 125; /* rgb(125, 125, 125) 50% */
|
|
58
|
+
--gray-400: 150 150 150; /* rgb(150, 150, 150) 40% */
|
|
59
|
+
--gray-500: 175 175 175; /* rgb(175, 175, 175) 30% */
|
|
60
|
+
--gray-600: 200 200 200; /* rgb(200, 200, 200) 20% */
|
|
61
|
+
--gray-700: 212 212 212; /* rgb(212, 212, 212) 15% */
|
|
62
|
+
--gray-800: 225 225 225; /* rgb(225, 225, 225) 10% */
|
|
63
|
+
--gray-900: 237 237 237; /* rgb(237, 237, 237) 5% */
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dark {
|
|
67
|
+
--white: 250 250 250; /* rgb(250, 250, 250) */
|
|
68
|
+
--black: 28 28 28; /* rgb(28, 28, 28) */
|
|
69
|
+
|
|
70
|
+
--text-color: 242 242 242; /* rgb(242, 242, 242) */
|
|
71
|
+
|
|
72
|
+
--primary-100: 161 210 255; /* rgb(161, 210, 255) */
|
|
73
|
+
--primary-200: 126 193 255; /* rgb(126,193,255) */
|
|
74
|
+
--primary-300: 91 177 255; /* rgb(91,177,255) */
|
|
75
|
+
--primary-400: 56 160 255; /* rgb(56, 160, 255) */
|
|
76
|
+
--primary-500: 21 143 255; /* rgb(21, 143, 255) */
|
|
77
|
+
--primary-600: 0 122 235; /* rgb(0,122,235) */
|
|
78
|
+
--primary-700: 0 101 193; /* rgb(0, 101, 193) */
|
|
79
|
+
--primary-800: 0 79 152; /* rgb(0, 79, 152) */
|
|
80
|
+
--primary-900: 0 58 110; /* rgb(0, 58, 110) */
|
|
81
|
+
|
|
82
|
+
--success-100: 152 244 178; /* rgb(152, 244, 178) */
|
|
83
|
+
--success-200: 114 240 149; /* rgb(114, 240, 149) */
|
|
84
|
+
--success-300: 75 235 120; /* rgb(75, 235, 120) */
|
|
85
|
+
--success-400: 36 231 91; /* rgb(36, 231, 91) */
|
|
86
|
+
--success-500: 22 203 73; /* rgb(22, 203, 73) */
|
|
87
|
+
--success-600: 19 173 62; /* rgb(19, 173, 62) */
|
|
88
|
+
--success-700: 15 142 51; /* rgb(15, 142, 51) */
|
|
89
|
+
--success-800: 12 112 40; /* rgb(12, 112, 40) */
|
|
90
|
+
--success-900: 9 81 29; /* rgb(9, 81, 29) */
|
|
91
|
+
|
|
92
|
+
--warning-100: 255 217 171; /* rgb(255, 217, 171) */
|
|
93
|
+
--warning-200: 255 202 139; /* rgb(255, 202, 139) */
|
|
94
|
+
--warning-300: 255 188 108; /* rgb(255, 188, 108) */
|
|
95
|
+
--warning-400: 255 173 77; /* rgb(255, 173, 77) */
|
|
96
|
+
--warning-500: 255 159 45; /* rgb(255, 159, 45) */
|
|
97
|
+
--warning-600: 255 138 0; /* rgb(255, 138, 0) */
|
|
98
|
+
--warning-700: 210 114 0; /* rgb(210, 114, 0) */
|
|
99
|
+
--warning-800: 165 90 0; /* rgb(165, 90, 0) */
|
|
100
|
+
--warning-900: 120 65 0; /* rgb(120, 65, 0) */
|
|
101
|
+
|
|
102
|
+
--error-100: 252 179 179; /* rgb(252, 179, 179) */
|
|
103
|
+
--error-200: 251 150 150; /* rgb(251, 150, 150) */
|
|
104
|
+
--error-300: 249 122 121; /* rgb(249, 122, 121) */
|
|
105
|
+
--error-400: 248 93 93; /* rgb(248, 93, 93) */
|
|
106
|
+
--error-500: 247 65 64; /* rgb(247, 65, 64) */
|
|
107
|
+
--error-600: 245 20 19; /* rgb(245, 20, 19) */
|
|
108
|
+
--error-700: 209 10 9; /* rgb(209, 10, 9) */
|
|
109
|
+
--error-800: 164 8 7; /* rgb(164, 8, 7) */
|
|
110
|
+
--error-900: 119 6 5; /* rgb(119, 6, 5) */
|
|
111
|
+
|
|
112
|
+
--gray-100: 187 187 187; /* rgb(187, 187, 187) 70% */
|
|
113
|
+
--gray-200: 164 164 164; /* rgb(164, 164, 164) 60% */
|
|
114
|
+
--gray-300: 141 141 141; /* rgb(141, 141, 141) 50% */
|
|
115
|
+
--gray-400: 119 119 119; /* rgb(119, 119, 119) 40% */
|
|
116
|
+
--gray-500: 96 96 96; /* rgb(96, 96, 96) 30% */
|
|
117
|
+
--gray-600: 73 73 73; /* rgb(73, 73, 73) 20% */
|
|
118
|
+
--gray-700: 62 62 62; /* rgb(62, 62, 62) 15% */
|
|
119
|
+
--gray-800: 51 51 51; /* rgb(51, 51, 51) 10% */
|
|
120
|
+
--gray-900: 39 39 39; /* rgb(39, 39, 39) 5% */
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
body {
|
|
124
|
+
@apply font-poppins scroll bg-gray-900 text-typography-primary antialiased;
|
|
125
|
+
}
|
|
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
|
};
|
package/tailwindcss/global.css
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
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=Open+Sans:wght@300;400;500;600;700;800&display=swap");
|
|
3
|
-
@import "palette.css";
|
|
4
|
-
|
|
5
|
-
@tailwind base;
|
|
6
|
-
@tailwind components;
|
|
7
|
-
@tailwind utilities;
|
|
8
|
-
|
|
9
|
-
@layer base {
|
|
10
|
-
body {
|
|
11
|
-
@apply scroll bg-gray-900 font-sans text-typography-primary antialiased;
|
|
12
|
-
}
|
|
13
|
-
}
|
package/tailwindcss/palette.css
DELETED
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--white: 250 250 250; /* rgb(250 250 250) */
|
|
3
|
-
--black: 28 28 28; /* rgb(28, 28, 28) */
|
|
4
|
-
|
|
5
|
-
--text-color: 28 28 28; /* rgb(28 28 28) */
|
|
6
|
-
|
|
7
|
-
--primary-100: 153 206 255; /* rgb(153, 206, 255) 60% */
|
|
8
|
-
--primary-200: 115 187 255; /* rgb(115, 187, 255) 45% */
|
|
9
|
-
--primary-300: 77 169 255; /* rgb(77, 169, 255) 30% */
|
|
10
|
-
--primary-400: 38 150 255; /* rgb(38, 150, 255) 15% */
|
|
11
|
-
--primary-500: 0 132 255; /* rgb(0, 132, 255) */
|
|
12
|
-
--primary-600: 0 112 217; /* rgb(0, 112, 217) 15% */
|
|
13
|
-
--primary-700: 0 92 179; /* rgb(0, 92, 179) 30% */
|
|
14
|
-
--primary-800: 0 73 140; /* rgb(0, 73, 140) 45% */
|
|
15
|
-
--primary-900: 0 53 102; /* rgb(0, 53, 102) 60% */
|
|
16
|
-
|
|
17
|
-
--success-100: 125 255 162; /* rgb(125, 255, 162) */
|
|
18
|
-
--success-200: 77 255 127; /* rgb(77, 255, 127) */
|
|
19
|
-
--success-300: 28 255 92; /* rgb(28, 255, 92) */
|
|
20
|
-
--success-400: 0 235 66; /* rgb(0, 235, 66) */
|
|
21
|
-
--success-500: 0 186 52; /* rgb(0, 186, 52) */
|
|
22
|
-
--success-600: 0 158 44; /* rgb(0, 158, 44) */
|
|
23
|
-
--success-700: 0 130 36; /* rgb(0, 130, 36) */
|
|
24
|
-
--success-800: 0 102 29; /* rgb(0, 102, 29) */
|
|
25
|
-
--success-900: 0 74 21; /* rgb(0, 74, 21) */
|
|
26
|
-
|
|
27
|
-
--warning-100: 255 207 151; /* rgb(255, 207, 151) */
|
|
28
|
-
--warning-200: 255 189 111; /* rgb(255, 189, 111) */
|
|
29
|
-
--warning-300: 255 171 72; /* rgb(255, 171, 72) */
|
|
30
|
-
--warning-400: 255 153 33; /* rgb(255, 153, 33) */
|
|
31
|
-
--warning-500: 249 134 0; /* rgb(249, 134, 0) */
|
|
32
|
-
--warning-600: 212 114 0; /* rgb(212, 114, 0) */
|
|
33
|
-
--warning-700: 174 94 0; /* rgb(174, 94, 0) */
|
|
34
|
-
--warning-800: 137 74 0; /* rgb(137, 74, 0) */
|
|
35
|
-
--warning-900: 100 54 0; /* rgb(100, 54, 0) */
|
|
36
|
-
|
|
37
|
-
--error-100: 246 171 171; /* rgb(246, 171, 171) */
|
|
38
|
-
--error-200: 243 139 139; /* rgb(243, 139, 139) */
|
|
39
|
-
--error-300: 240 107 107; /* rgb(240, 107, 107) */
|
|
40
|
-
--error-400: 236 76 76; /* rgb(236, 76, 76) */
|
|
41
|
-
--error-500: 233 44 44; /* rgb(233, 44, 44) */
|
|
42
|
-
--error-600: 213 22 22; /* rgb(213, 22, 22) */
|
|
43
|
-
--error-700: 176 18 18; /* rgb(176, 18, 18) */
|
|
44
|
-
--error-800: 138 14 14; /* rgb(138, 14, 14) */
|
|
45
|
-
--error-900: 100 10 10; /* rgb(100, 10, 10) */
|
|
46
|
-
|
|
47
|
-
--gray-100: 75 75 75; /* rgb(75, 75, 75) 70% */
|
|
48
|
-
--gray-200: 100 100 100; /* rgb(100, 100, 100) 60% */
|
|
49
|
-
--gray-300: 125 125 125; /* rgb(125, 125, 125) 50% */
|
|
50
|
-
--gray-400: 150 150 150; /* rgb(150, 150, 150) 40% */
|
|
51
|
-
--gray-500: 175 175 175; /* rgb(175, 175, 175) 30% */
|
|
52
|
-
--gray-600: 200 200 200; /* rgb(200, 200, 200) 20% */
|
|
53
|
-
--gray-700: 212 212 212; /* rgb(212, 212, 212) 15% */
|
|
54
|
-
--gray-800: 225 225 225; /* rgb(225, 225, 225) 10% */
|
|
55
|
-
--gray-900: 237 237 237; /* rgb(237, 237, 237) 5% */
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.dark {
|
|
59
|
-
--white: 250 250 250; /* rgb(250, 250, 250) */
|
|
60
|
-
--black: 28 28 28; /* rgb(28, 28, 28) */
|
|
61
|
-
|
|
62
|
-
--text-color: 242 242 242; /* rgb(242, 242, 242) */
|
|
63
|
-
|
|
64
|
-
--primary-100: 161 210 255; /* rgb(161, 210, 255) */
|
|
65
|
-
--primary-200: 126 193 255; /* rgb(126,193,255) */
|
|
66
|
-
--primary-300: 91 177 255; /* rgb(91,177,255) */
|
|
67
|
-
--primary-400: 56 160 255; /* rgb(56, 160, 255) */
|
|
68
|
-
--primary-500: 21 143 255; /* rgb(21, 143, 255) */
|
|
69
|
-
--primary-600: 0 122 235; /* rgb(0,122,235) */
|
|
70
|
-
--primary-700: 0 101 193; /* rgb(0, 101, 193) */
|
|
71
|
-
--primary-800: 0 79 152; /* rgb(0, 79, 152) */
|
|
72
|
-
--primary-900: 0 58 110; /* rgb(0, 58, 110) */
|
|
73
|
-
|
|
74
|
-
--success-100: 152 244 178; /* rgb(152, 244, 178) */
|
|
75
|
-
--success-200: 114 240 149; /* rgb(114, 240, 149) */
|
|
76
|
-
--success-300: 75 235 120; /* rgb(75, 235, 120) */
|
|
77
|
-
--success-400: 36 231 91; /* rgb(36, 231, 91) */
|
|
78
|
-
--success-500: 22 203 73; /* rgb(22, 203, 73) */
|
|
79
|
-
--success-600: 19 173 62; /* rgb(19, 173, 62) */
|
|
80
|
-
--success-700: 15 142 51; /* rgb(15, 142, 51) */
|
|
81
|
-
--success-800: 12 112 40; /* rgb(12, 112, 40) */
|
|
82
|
-
--success-900: 9 81 29; /* rgb(9, 81, 29) */
|
|
83
|
-
|
|
84
|
-
--warning-100: 255 217 171; /* rgb(255, 217, 171) */
|
|
85
|
-
--warning-200: 255 202 139; /* rgb(255, 202, 139) */
|
|
86
|
-
--warning-300: 255 188 108; /* rgb(255, 188, 108) */
|
|
87
|
-
--warning-400: 255 173 77; /* rgb(255, 173, 77) */
|
|
88
|
-
--warning-500: 255 159 45; /* rgb(255, 159, 45) */
|
|
89
|
-
--warning-600: 255 138 0; /* rgb(255, 138, 0) */
|
|
90
|
-
--warning-700: 210 114 0; /* rgb(210, 114, 0) */
|
|
91
|
-
--warning-800: 165 90 0; /* rgb(165, 90, 0) */
|
|
92
|
-
--warning-900: 120 65 0; /* rgb(120, 65, 0) */
|
|
93
|
-
|
|
94
|
-
--error-100: 252 179 179; /* rgb(252, 179, 179) */
|
|
95
|
-
--error-200: 251 150 150; /* rgb(251, 150, 150) */
|
|
96
|
-
--error-300: 249 122 121; /* rgb(249, 122, 121) */
|
|
97
|
-
--error-400: 248 93 93; /* rgb(248, 93, 93) */
|
|
98
|
-
--error-500: 247 65 64; /* rgb(247, 65, 64) */
|
|
99
|
-
--error-600: 245 20 19; /* rgb(245, 20, 19) */
|
|
100
|
-
--error-700: 209 10 9; /* rgb(209, 10, 9) */
|
|
101
|
-
--error-800: 164 8 7; /* rgb(164, 8, 7) */
|
|
102
|
-
--error-900: 119 6 5; /* rgb(119, 6, 5) */
|
|
103
|
-
|
|
104
|
-
--gray-100: 187 187 187; /* rgb(187, 187, 187) 70% */
|
|
105
|
-
--gray-200: 164 164 164; /* rgb(164, 164, 164) 60% */
|
|
106
|
-
--gray-300: 141 141 141; /* rgb(141, 141, 141) 50% */
|
|
107
|
-
--gray-400: 119 119 119; /* rgb(119, 119, 119) 40% */
|
|
108
|
-
--gray-500: 96 96 96; /* rgb(96, 96, 96) 30% */
|
|
109
|
-
--gray-600: 73 73 73; /* rgb(73, 73, 73) 20% */
|
|
110
|
-
--gray-700: 62 62 62; /* rgb(62, 62, 62) 15% */
|
|
111
|
-
--gray-800: 51 51 51; /* rgb(51, 51, 51) 10% */
|
|
112
|
-
--gray-900: 39 39 39; /* rgb(39, 39, 39) 5% */
|
|
113
|
-
}
|
|
@@ -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
|
-
});
|