@removify/tailwind-preset 0.0.5 → 0.0.7

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 (12) hide show
  1. package/bin/index.js +2 -0
  2. package/dist/chunk-UJDFJG2Z.js +114 -0
  3. package/dist/cli.cjs +163 -0
  4. package/dist/cli.d.cts +2 -0
  5. package/dist/cli.d.ts +2 -0
  6. package/dist/cli.js +30 -0
  7. package/dist/index.cjs +81 -8
  8. package/dist/index.d.cts +111 -1
  9. package/dist/index.d.ts +111 -1
  10. package/dist/index.js +77 -115
  11. package/package.json +13 -3
  12. package/readme.md +12 -4
package/bin/index.js ADDED
@@ -0,0 +1,2 @@
1
+ #!/usr/bin/env node
2
+ import '../dist/cli.js';
package/dist/chunk-UJDFJG2Z.js ADDED
@@ -0,0 +1,114 @@
1
+ // src/theme/colors.ts
2
+ var colors = {
3
+ inherit: "inherit",
4
+ current: "currentColor",
5
+ transparent: "transparent",
6
+ danger: "#EA3529",
7
+ warning: "#FFA037",
8
+ success: "#15A46E",
9
+ info: "#3EC2C9",
10
+ special: "#686DF4",
11
+ black: "#000000",
12
+ white: "#FFFFFF",
13
+ overlay: "#00000080",
14
+ primary: {
15
+ 50: "#E8F1F6",
16
+ 100: "#BED9E6",
17
+ 200: "#95C0D5",
18
+ 300: "#6CA7C3",
19
+ 400: "#448DB1",
20
+ 500: "#1C749F",
21
+ 600: "#166085",
22
+ 700: "#104C6A",
23
+ 800: "#0B384E",
24
+ 900: "#062432"
25
+ },
26
+ secondary: {
27
+ 50: "#FFEFEF",
28
+ 100: "#FFD3D2",
29
+ 200: "#FFB7B5",
30
+ 300: "#FF9B99",
31
+ 400: "#FF807E",
32
+ 500: "#FF6663",
33
+ 600: "#D25350",
34
+ 700: "#A6403E",
35
+ 800: "#792E2C",
36
+ 900: "#4D1C1B"
37
+ },
38
+ green: {
39
+ 50: "#E7F7F1",
40
+ 100: "#BCE7D7",
41
+ 200: "#91D7BD",
42
+ 300: "#67C7A3",
43
+ 400: "#3EB688",
44
+ 500: "#15A46E",
45
+ 600: "#10895B",
46
+ 700: "#0B6D48",
47
+ 800: "#075035",
48
+ 900: "#043322"
49
+ },
50
+ fuchsia: {
51
+ 50: "#FAEBFD",
52
+ 100: "#F0C7FA",
53
+ 200: "#E6A3F6",
54
+ 300: "#DB81F2",
55
+ 400: "#D05FED",
56
+ 500: "#C53DE7",
57
+ 600: "#A431C0",
58
+ 700: "#822599",
59
+ 800: "#5F1A71",
60
+ 900: "#3D1048"
61
+ },
62
+ indigo: {
63
+ 50: "#EFF0FF",
64
+ 100: "#D3D5FE",
65
+ 200: "#B8BAFC",
66
+ 300: "#9DA0FA",
67
+ 400: "#8286F7",
68
+ 500: "#686DF4",
69
+ 600: "#5459CB",
70
+ 700: "#4145A1",
71
+ 800: "#2F3276",
72
+ 900: "#1D1F4B"
73
+ },
74
+ neutral: {
75
+ 50: "#F1F2F5",
76
+ 100: "#EAEDF2",
77
+ 200: "#E1E5EA",
78
+ 300: "#D5DBE2",
79
+ 400: "#CAD1D9",
80
+ 500: "#BEC7D1",
81
+ 600: "#9DA4AD",
82
+ 700: "#7B8188",
83
+ 800: "#5A5F64",
84
+ 900: "#393C3F"
85
+ },
86
+ orange: {
87
+ 50: "#FFF6EA",
88
+ 100: "#FFE5C5",
89
+ 200: "#FFD3A0",
90
+ 300: "#FFC27C",
91
+ 400: "#FFB159",
92
+ 500: "#FFA037",
93
+ 600: "#D2842B",
94
+ 700: "#A66821",
95
+ 800: "#794C17",
96
+ 900: "#4D300E"
97
+ },
98
+ seafoam: {
99
+ 50: "#EBFAFA",
100
+ 100: "#C7EFF1",
101
+ 200: "#A4E5E8",
102
+ 300: "#82DADE",
103
+ 400: "#60CED4",
104
+ 500: "#3EC2C9",
105
+ 600: "#32A1A7",
106
+ 700: "#268085",
107
+ 800: "#1B5E62",
108
+ 900: "#113C3E"
109
+ }
110
+ };
111
+
112
+ export {
113
+ colors
114
+ };
package/dist/cli.cjs ADDED
@@ -0,0 +1,163 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __copyProps = (to, from, except, desc) => {
9
+ if (from && typeof from === "object" || typeof from === "function") {
10
+ for (let key of __getOwnPropNames(from))
11
+ if (!__hasOwnProp.call(to, key) && key !== except)
12
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
13
+ }
14
+ return to;
15
+ };
16
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
17
+ // If the importer is in node compatibility mode or this is not an ESM
18
+ // file that has been converted to a CommonJS file using a Babel-
19
+ // compatible transform (i.e. "__esModule" has not been set), then set
20
+ // "default" to the CommonJS "module.exports" for node compatibility.
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
24
+
25
+ // src/cli.ts
26
+ var import_helpers = require("yargs/helpers");
27
+ var import_yargs = __toESM(require("yargs"), 1);
28
+ var import_node_process = __toESM(require("process"), 1);
29
+
30
+ // src/theme/colors.ts
31
+ var colors = {
32
+ inherit: "inherit",
33
+ current: "currentColor",
34
+ transparent: "transparent",
35
+ danger: "#EA3529",
36
+ warning: "#FFA037",
37
+ success: "#15A46E",
38
+ info: "#3EC2C9",
39
+ special: "#686DF4",
40
+ black: "#000000",
41
+ white: "#FFFFFF",
42
+ overlay: "#00000080",
43
+ primary: {
44
+ 50: "#E8F1F6",
45
+ 100: "#BED9E6",
46
+ 200: "#95C0D5",
47
+ 300: "#6CA7C3",
48
+ 400: "#448DB1",
49
+ 500: "#1C749F",
50
+ 600: "#166085",
51
+ 700: "#104C6A",
52
+ 800: "#0B384E",
53
+ 900: "#062432"
54
+ },
55
+ secondary: {
56
+ 50: "#FFEFEF",
57
+ 100: "#FFD3D2",
58
+ 200: "#FFB7B5",
59
+ 300: "#FF9B99",
60
+ 400: "#FF807E",
61
+ 500: "#FF6663",
62
+ 600: "#D25350",
63
+ 700: "#A6403E",
64
+ 800: "#792E2C",
65
+ 900: "#4D1C1B"
66
+ },
67
+ green: {
68
+ 50: "#E7F7F1",
69
+ 100: "#BCE7D7",
70
+ 200: "#91D7BD",
71
+ 300: "#67C7A3",
72
+ 400: "#3EB688",
73
+ 500: "#15A46E",
74
+ 600: "#10895B",
75
+ 700: "#0B6D48",
76
+ 800: "#075035",
77
+ 900: "#043322"
78
+ },
79
+ fuchsia: {
80
+ 50: "#FAEBFD",
81
+ 100: "#F0C7FA",
82
+ 200: "#E6A3F6",
83
+ 300: "#DB81F2",
84
+ 400: "#D05FED",
85
+ 500: "#C53DE7",
86
+ 600: "#A431C0",
87
+ 700: "#822599",
88
+ 800: "#5F1A71",
89
+ 900: "#3D1048"
90
+ },
91
+ indigo: {
92
+ 50: "#EFF0FF",
93
+ 100: "#D3D5FE",
94
+ 200: "#B8BAFC",
95
+ 300: "#9DA0FA",
96
+ 400: "#8286F7",
97
+ 500: "#686DF4",
98
+ 600: "#5459CB",
99
+ 700: "#4145A1",
100
+ 800: "#2F3276",
101
+ 900: "#1D1F4B"
102
+ },
103
+ neutral: {
104
+ 50: "#F1F2F5",
105
+ 100: "#EAEDF2",
106
+ 200: "#E1E5EA",
107
+ 300: "#D5DBE2",
108
+ 400: "#CAD1D9",
109
+ 500: "#BEC7D1",
110
+ 600: "#9DA4AD",
111
+ 700: "#7B8188",
112
+ 800: "#5A5F64",
113
+ 900: "#393C3F"
114
+ },
115
+ orange: {
116
+ 50: "#FFF6EA",
117
+ 100: "#FFE5C5",
118
+ 200: "#FFD3A0",
119
+ 300: "#FFC27C",
120
+ 400: "#FFB159",
121
+ 500: "#FFA037",
122
+ 600: "#D2842B",
123
+ 700: "#A66821",
124
+ 800: "#794C17",
125
+ 900: "#4D300E"
126
+ },
127
+ seafoam: {
128
+ 50: "#EBFAFA",
129
+ 100: "#C7EFF1",
130
+ 200: "#A4E5E8",
131
+ 300: "#82DADE",
132
+ 400: "#60CED4",
133
+ 500: "#3EC2C9",
134
+ 600: "#32A1A7",
135
+ 700: "#268085",
136
+ 800: "#1B5E62",
137
+ 900: "#113C3E"
138
+ }
139
+ };
140
+
141
+ // src/cli.ts
142
+ var css = String.raw;
143
+ var argv = (0, import_yargs.default)((0, import_helpers.hideBin)(import_node_process.default.argv)).scriptName("@removify/tailwind-preset").usage("$0 [options] > src/style.css").help().options({ override: { type: "boolean", default: false, alias: "o" } }).parseSync();
144
+ var theme = css`@import "tailwindcss";
145
+ @theme {
146
+ `;
147
+ if (argv.override) {
148
+ theme += css` --color-*: initial;
149
+ `;
150
+ }
151
+ for (const [key, value] of Object.entries(colors)) {
152
+ if (typeof value === "object") {
153
+ for (const [subKey, subValue] of Object.entries(value)) {
154
+ theme += css` --color-${key}-${subKey}: ${subValue};
155
+ `;
156
+ }
157
+ } else {
158
+ theme += css` --color-${key}: ${value};
159
+ `;
160
+ }
161
+ }
162
+ theme += css`}`;
163
+ console.log(theme);
package/dist/cli.d.cts ADDED
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/dist/cli.d.ts ADDED
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/dist/cli.js ADDED
@@ -0,0 +1,30 @@
1
+ import {
2
+ colors
3
+ } from "./chunk-UJDFJG2Z.js";
4
+
5
+ // src/cli.ts
6
+ import { hideBin } from "yargs/helpers";
7
+ import yargs from "yargs";
8
+ import process from "process";
9
+ var css = String.raw;
10
+ var argv = yargs(hideBin(process.argv)).scriptName("@removify/tailwind-preset").usage("$0 [options] > src/style.css").help().options({ override: { type: "boolean", default: false, alias: "o" } }).parseSync();
11
+ var theme = css`@import "tailwindcss";
12
+ @theme {
13
+ `;
14
+ if (argv.override) {
15
+ theme += css` --color-*: initial;
16
+ `;
17
+ }
18
+ for (const [key, value] of Object.entries(colors)) {
19
+ if (typeof value === "object") {
20
+ for (const [subKey, subValue] of Object.entries(value)) {
21
+ theme += css` --color-${key}-${subKey}: ${subValue};
22
+ `;
23
+ }
24
+ } else {
25
+ theme += css` --color-${key}: ${value};
26
+ `;
27
+ }
28
+ }
29
+ theme += css`}`;
30
+ console.log(theme);
package/dist/index.cjs CHANGED
@@ -22,9 +22,13 @@ var src_exports = {};
22
22
  __export(src_exports, {
23
23
  colors: () => colors,
24
24
  config: () => config,
25
- default: () => src_default
25
+ default: () => src_default,
26
+ fontSizes: () => fontSizes,
27
+ shadows: () => shadows
26
28
  });
27
29
  module.exports = __toCommonJS(src_exports);
30
+
31
+ // src/theme/colors.ts
28
32
  var colors = {
29
33
  inherit: "inherit",
30
34
  current: "currentColor",
@@ -134,25 +138,94 @@ var colors = {
134
138
  900: "#113C3E"
135
139
  }
136
140
  };
141
+
142
+ // src/theme/shadows.ts
143
+ var shadows = {
144
+ "elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
145
+ "elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
146
+ "elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
147
+ "elevation-3": "0 6px 12px 0 rgba(0, 0, 0, 0.10)",
148
+ "elevation-4": "0 8px 16px 0 rgba(0, 0, 0, 0.10)",
149
+ "elevation-5": "0 12px 24px 0 rgba(0, 0, 0, 0.10)"
150
+ };
151
+
152
+ // src/theme/fontSize.ts
153
+ var fontSizes = {
154
+ "2xs": ["0.6875rem", "1rem"],
155
+ "xs": ["0.75rem", "1rem"],
156
+ "sm": ["0.875rem", "1.25rem"],
157
+ "base": ["1rem", "1.5rem"],
158
+ "lg": ["1.25rem", "1.625rem"],
159
+ "display1": ["3.75rem", {
160
+ fontWeight: 700,
161
+ lineHeight: "5rem",
162
+ letterSpacing: "-0.0625rem"
163
+ }],
164
+ "display2": ["3.25rem", {
165
+ fontWeight: 700,
166
+ lineHeight: "4.25rem",
167
+ letterSpacing: "-0.05rem"
168
+ }],
169
+ "display3": ["2.75rem", {
170
+ fontWeight: 700,
171
+ lineHeight: "3.625rem",
172
+ letterSpacing: "-0.0375rem"
173
+ }],
174
+ "h1": ["3rem", {
175
+ fontWeight: 700,
176
+ lineHeight: "3.75rem",
177
+ letterSpacing: "-0.0125rem"
178
+ }],
179
+ "h2": ["2.5rem", {
180
+ fontWeight: 700,
181
+ lineHeight: "3.25rem",
182
+ letterSpacing: "-0.0125rem"
183
+ }],
184
+ "h3": ["2.25rem", {
185
+ fontWeight: 700,
186
+ lineHeight: "3rem",
187
+ letterSpacing: "-0.0125rem"
188
+ }],
189
+ "h4": ["2rem", {
190
+ fontWeight: 700,
191
+ lineHeight: "2.625rem",
192
+ letterSpacing: "-0.0125rem"
193
+ }],
194
+ "h5": ["1.5rem", {
195
+ fontWeight: 700,
196
+ lineHeight: "2rem",
197
+ letterSpacing: "-0.0125rem"
198
+ }],
199
+ "h6": ["1.25rem", {
200
+ fontWeight: 700,
201
+ lineHeight: "1.625rem",
202
+ letterSpacing: "-0.0125rem"
203
+ }]
204
+ };
205
+
206
+ // src/index.ts
207
+ var theme = {
208
+ colors,
209
+ boxShadow: shadows,
210
+ fontSize: fontSizes
211
+ };
137
212
  function config(extend = false) {
138
213
  if (extend) {
139
214
  return {
140
215
  theme: {
141
- extend: {
142
- colors
143
- }
216
+ extend: theme
144
217
  }
145
218
  };
146
219
  }
147
220
  return {
148
- theme: {
149
- colors
150
- }
221
+ theme
151
222
  };
152
223
  }
153
224
  var src_default = config();
154
225
  // Annotate the CommonJS export names for ESM import in node:
155
226
  0 && (module.exports = {
156
227
  colors,
157
- config
228
+ config,
229
+ fontSizes,
230
+ shadows
158
231
  });
package/dist/index.d.cts CHANGED
@@ -110,7 +110,117 @@ declare const colors: {
110
110
  900: string;
111
111
  };
112
112
  };
113
+
114
+ declare const shadows: {
115
+ 'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
116
+ 'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
117
+ 'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
118
+ 'elevation-3': "0 6px 12px 0 rgba(0, 0, 0, 0.10)";
119
+ 'elevation-4': "0 8px 16px 0 rgba(0, 0, 0, 0.10)";
120
+ 'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
121
+ };
122
+
123
+ declare const fontSizes: {
124
+ '2xs': ["0.6875rem", "1rem"];
125
+ xs: ["0.75rem", "1rem"];
126
+ sm: ["0.875rem", "1.25rem"];
127
+ base: ["1rem", "1.5rem"];
128
+ lg: ["1.25rem", "1.625rem"];
129
+ display1: ["3.75rem", {
130
+ fontWeight: number;
131
+ lineHeight: "5rem";
132
+ letterSpacing: "-0.0625rem";
133
+ }];
134
+ display2: ["3.25rem", {
135
+ fontWeight: number;
136
+ lineHeight: "4.25rem";
137
+ letterSpacing: "-0.05rem";
138
+ }];
139
+ display3: ["2.75rem", {
140
+ fontWeight: number;
141
+ lineHeight: "3.625rem";
142
+ letterSpacing: "-0.0375rem";
143
+ }];
144
+ h1: ["3rem", {
145
+ fontWeight: number;
146
+ lineHeight: "3.75rem";
147
+ letterSpacing: "-0.0125rem";
148
+ }];
149
+ h2: ["2.5rem", {
150
+ fontWeight: number;
151
+ lineHeight: "3.25rem";
152
+ letterSpacing: "-0.0125rem";
153
+ }];
154
+ h3: ["2.25rem", {
155
+ fontWeight: number;
156
+ lineHeight: "3rem";
157
+ letterSpacing: "-0.0125rem";
158
+ }];
159
+ h4: ["2rem", {
160
+ fontWeight: number;
161
+ lineHeight: "2.625rem";
162
+ letterSpacing: "-0.0125rem";
163
+ }];
164
+ h5: ["1.5rem", {
165
+ fontWeight: number;
166
+ lineHeight: "2rem";
167
+ letterSpacing: "-0.0125rem";
168
+ }];
169
+ h6: ["1.25rem", {
170
+ fontWeight: number;
171
+ lineHeight: "1.625rem";
172
+ letterSpacing: "-0.0125rem";
173
+ }];
174
+ };
175
+
176
+ type ColorsNames = 'primary' | 'secondary' | 'green' | 'fuchsia' | 'indigo' | 'neutral' | 'orange' | 'seafoam';
177
+ type ColorsVariations = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
178
+ interface MainColors {
179
+ black: string;
180
+ white: string;
181
+ inherit: 'inherit';
182
+ current: 'currentColor';
183
+ transparent: 'transparent';
184
+ }
185
+ interface DefaultColors {
186
+ danger: string;
187
+ warning: string;
188
+ success: string;
189
+ info: string;
190
+ special: string;
191
+ overlay: string;
192
+ }
193
+ type Colors = DefaultColors & MainColors & Record<ColorsNames, {
194
+ [K in ColorsVariations]: string;
195
+ }>;
196
+ type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
197
+
198
+ type BorderSize = 0 | `${number}px`;
199
+ type RgbValue = number;
200
+ type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
201
+ type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
202
+ type Shadows = {
203
+ [K in ShadowSize as `elevation-${K}`]?: Shadow;
204
+ };
205
+
206
+ type FontValue = `${number}px` | `${number}rem`;
207
+ type FontSize = [FontValue, FontValue] | FontValue | [
208
+ FontValue,
209
+ {
210
+ lineHeight?: FontValue;
211
+ letterSpacing?: FontValue;
212
+ fontWeight?: number;
213
+ }
214
+ ];
215
+ type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | `${number}xl`;
216
+ type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
217
+ type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
218
+ type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
219
+ type FontSizes = {
220
+ [K in FontSizeKeys]?: FontSize;
221
+ };
222
+
113
223
  declare function config(extend?: boolean): Partial<Config>;
114
224
  declare const _default: Partial<tailwindcss_types_config.Config>;
115
225
 
116
- export { colors, config, _default as default };
226
+ export { type ColorString, type Colors, type FontSizes, type Shadows, colors, config, _default as default, fontSizes, shadows };
package/dist/index.d.ts CHANGED
@@ -110,7 +110,117 @@ declare const colors: {
110
110
  900: string;
111
111
  };
112
112
  };
113
+
114
+ declare const shadows: {
115
+ 'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
116
+ 'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
117
+ 'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
118
+ 'elevation-3': "0 6px 12px 0 rgba(0, 0, 0, 0.10)";
119
+ 'elevation-4': "0 8px 16px 0 rgba(0, 0, 0, 0.10)";
120
+ 'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
121
+ };
122
+
123
+ declare const fontSizes: {
124
+ '2xs': ["0.6875rem", "1rem"];
125
+ xs: ["0.75rem", "1rem"];
126
+ sm: ["0.875rem", "1.25rem"];
127
+ base: ["1rem", "1.5rem"];
128
+ lg: ["1.25rem", "1.625rem"];
129
+ display1: ["3.75rem", {
130
+ fontWeight: number;
131
+ lineHeight: "5rem";
132
+ letterSpacing: "-0.0625rem";
133
+ }];
134
+ display2: ["3.25rem", {
135
+ fontWeight: number;
136
+ lineHeight: "4.25rem";
137
+ letterSpacing: "-0.05rem";
138
+ }];
139
+ display3: ["2.75rem", {
140
+ fontWeight: number;
141
+ lineHeight: "3.625rem";
142
+ letterSpacing: "-0.0375rem";
143
+ }];
144
+ h1: ["3rem", {
145
+ fontWeight: number;
146
+ lineHeight: "3.75rem";
147
+ letterSpacing: "-0.0125rem";
148
+ }];
149
+ h2: ["2.5rem", {
150
+ fontWeight: number;
151
+ lineHeight: "3.25rem";
152
+ letterSpacing: "-0.0125rem";
153
+ }];
154
+ h3: ["2.25rem", {
155
+ fontWeight: number;
156
+ lineHeight: "3rem";
157
+ letterSpacing: "-0.0125rem";
158
+ }];
159
+ h4: ["2rem", {
160
+ fontWeight: number;
161
+ lineHeight: "2.625rem";
162
+ letterSpacing: "-0.0125rem";
163
+ }];
164
+ h5: ["1.5rem", {
165
+ fontWeight: number;
166
+ lineHeight: "2rem";
167
+ letterSpacing: "-0.0125rem";
168
+ }];
169
+ h6: ["1.25rem", {
170
+ fontWeight: number;
171
+ lineHeight: "1.625rem";
172
+ letterSpacing: "-0.0125rem";
173
+ }];
174
+ };
175
+
176
+ type ColorsNames = 'primary' | 'secondary' | 'green' | 'fuchsia' | 'indigo' | 'neutral' | 'orange' | 'seafoam';
177
+ type ColorsVariations = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
178
+ interface MainColors {
179
+ black: string;
180
+ white: string;
181
+ inherit: 'inherit';
182
+ current: 'currentColor';
183
+ transparent: 'transparent';
184
+ }
185
+ interface DefaultColors {
186
+ danger: string;
187
+ warning: string;
188
+ success: string;
189
+ info: string;
190
+ special: string;
191
+ overlay: string;
192
+ }
193
+ type Colors = DefaultColors & MainColors & Record<ColorsNames, {
194
+ [K in ColorsVariations]: string;
195
+ }>;
196
+ type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
197
+
198
+ type BorderSize = 0 | `${number}px`;
199
+ type RgbValue = number;
200
+ type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
201
+ type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
202
+ type Shadows = {
203
+ [K in ShadowSize as `elevation-${K}`]?: Shadow;
204
+ };
205
+
206
+ type FontValue = `${number}px` | `${number}rem`;
207
+ type FontSize = [FontValue, FontValue] | FontValue | [
208
+ FontValue,
209
+ {
210
+ lineHeight?: FontValue;
211
+ letterSpacing?: FontValue;
212
+ fontWeight?: number;
213
+ }
214
+ ];
215
+ type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | `${number}xl`;
216
+ type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
217
+ type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
218
+ type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
219
+ type FontSizes = {
220
+ [K in FontSizeKeys]?: FontSize;
221
+ };
222
+
113
223
  declare function config(extend?: boolean): Partial<Config>;
114
224
  declare const _default: Partial<tailwindcss_types_config.Config>;
115
225
 
116
- export { colors, config, _default as default };
226
+ export { type ColorString, type Colors, type FontSizes, type Shadows, colors, config, _default as default, fontSizes, shadows };
package/dist/index.js CHANGED
@@ -1,132 +1,94 @@
1
+ import {
2
+ colors
3
+ } from "./chunk-UJDFJG2Z.js";
4
+
5
+ // src/theme/shadows.ts
6
+ var shadows = {
7
+ "elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
8
+ "elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
9
+ "elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
10
+ "elevation-3": "0 6px 12px 0 rgba(0, 0, 0, 0.10)",
11
+ "elevation-4": "0 8px 16px 0 rgba(0, 0, 0, 0.10)",
12
+ "elevation-5": "0 12px 24px 0 rgba(0, 0, 0, 0.10)"
13
+ };
14
+
15
+ // src/theme/fontSize.ts
16
+ var fontSizes = {
17
+ "2xs": ["0.6875rem", "1rem"],
18
+ "xs": ["0.75rem", "1rem"],
19
+ "sm": ["0.875rem", "1.25rem"],
20
+ "base": ["1rem", "1.5rem"],
21
+ "lg": ["1.25rem", "1.625rem"],
22
+ "display1": ["3.75rem", {
23
+ fontWeight: 700,
24
+ lineHeight: "5rem",
25
+ letterSpacing: "-0.0625rem"
26
+ }],
27
+ "display2": ["3.25rem", {
28
+ fontWeight: 700,
29
+ lineHeight: "4.25rem",
30
+ letterSpacing: "-0.05rem"
31
+ }],
32
+ "display3": ["2.75rem", {
33
+ fontWeight: 700,
34
+ lineHeight: "3.625rem",
35
+ letterSpacing: "-0.0375rem"
36
+ }],
37
+ "h1": ["3rem", {
38
+ fontWeight: 700,
39
+ lineHeight: "3.75rem",
40
+ letterSpacing: "-0.0125rem"
41
+ }],
42
+ "h2": ["2.5rem", {
43
+ fontWeight: 700,
44
+ lineHeight: "3.25rem",
45
+ letterSpacing: "-0.0125rem"
46
+ }],
47
+ "h3": ["2.25rem", {
48
+ fontWeight: 700,
49
+ lineHeight: "3rem",
50
+ letterSpacing: "-0.0125rem"
51
+ }],
52
+ "h4": ["2rem", {
53
+ fontWeight: 700,
54
+ lineHeight: "2.625rem",
55
+ letterSpacing: "-0.0125rem"
56
+ }],
57
+ "h5": ["1.5rem", {
58
+ fontWeight: 700,
59
+ lineHeight: "2rem",
60
+ letterSpacing: "-0.0125rem"
61
+ }],
62
+ "h6": ["1.25rem", {
63
+ fontWeight: 700,
64
+ lineHeight: "1.625rem",
65
+ letterSpacing: "-0.0125rem"
66
+ }]
67
+ };
68
+
1
69
  // src/index.ts
2
- var colors = {
3
- inherit: "inherit",
4
- current: "currentColor",
5
- transparent: "transparent",
6
- danger: "#EA3529",
7
- warning: "#FFA037",
8
- success: "#15A46E",
9
- info: "#3EC2C9",
10
- special: "#686DF4",
11
- black: "#000000",
12
- white: "#FFFFFF",
13
- overlay: "#00000080",
14
- primary: {
15
- 50: "#E8F1F6",
16
- 100: "#BED9E6",
17
- 200: "#95C0D5",
18
- 300: "#6CA7C3",
19
- 400: "#448DB1",
20
- 500: "#1C749F",
21
- 600: "#166085",
22
- 700: "#104C6A",
23
- 800: "#0B384E",
24
- 900: "#062432"
25
- },
26
- secondary: {
27
- 50: "#FFEFEF",
28
- 100: "#FFD3D2",
29
- 200: "#FFB7B5",
30
- 300: "#FF9B99",
31
- 400: "#FF807E",
32
- 500: "#FF6663",
33
- 600: "#D25350",
34
- 700: "#A6403E",
35
- 800: "#792E2C",
36
- 900: "#4D1C1B"
37
- },
38
- green: {
39
- 50: "#E7F7F1",
40
- 100: "#BCE7D7",
41
- 200: "#91D7BD",
42
- 300: "#67C7A3",
43
- 400: "#3EB688",
44
- 500: "#15A46E",
45
- 600: "#10895B",
46
- 700: "#0B6D48",
47
- 800: "#075035",
48
- 900: "#043322"
49
- },
50
- fuchsia: {
51
- 50: "#FAEBFD",
52
- 100: "#F0C7FA",
53
- 200: "#E6A3F6",
54
- 300: "#DB81F2",
55
- 400: "#D05FED",
56
- 500: "#C53DE7",
57
- 600: "#A431C0",
58
- 700: "#822599",
59
- 800: "#5F1A71",
60
- 900: "#3D1048"
61
- },
62
- indigo: {
63
- 50: "#EFF0FF",
64
- 100: "#D3D5FE",
65
- 200: "#B8BAFC",
66
- 300: "#9DA0FA",
67
- 400: "#8286F7",
68
- 500: "#686DF4",
69
- 600: "#5459CB",
70
- 700: "#4145A1",
71
- 800: "#2F3276",
72
- 900: "#1D1F4B"
73
- },
74
- neutral: {
75
- 50: "#F1F2F5",
76
- 100: "#EAEDF2",
77
- 200: "#E1E5EA",
78
- 300: "#D5DBE2",
79
- 400: "#CAD1D9",
80
- 500: "#BEC7D1",
81
- 600: "#9DA4AD",
82
- 700: "#7B8188",
83
- 800: "#5A5F64",
84
- 900: "#393C3F"
85
- },
86
- orange: {
87
- 50: "#FFF6EA",
88
- 100: "#FFE5C5",
89
- 200: "#FFD3A0",
90
- 300: "#FFC27C",
91
- 400: "#FFB159",
92
- 500: "#FFA037",
93
- 600: "#D2842B",
94
- 700: "#A66821",
95
- 800: "#794C17",
96
- 900: "#4D300E"
97
- },
98
- seafoam: {
99
- 50: "#EBFAFA",
100
- 100: "#C7EFF1",
101
- 200: "#A4E5E8",
102
- 300: "#82DADE",
103
- 400: "#60CED4",
104
- 500: "#3EC2C9",
105
- 600: "#32A1A7",
106
- 700: "#268085",
107
- 800: "#1B5E62",
108
- 900: "#113C3E"
109
- }
70
+ var theme = {
71
+ colors,
72
+ boxShadow: shadows,
73
+ fontSize: fontSizes
110
74
  };
111
75
  function config(extend = false) {
112
76
  if (extend) {
113
77
  return {
114
78
  theme: {
115
- extend: {
116
- colors
117
- }
79
+ extend: theme
118
80
  }
119
81
  };
120
82
  }
121
83
  return {
122
- theme: {
123
- colors
124
- }
84
+ theme
125
85
  };
126
86
  }
127
87
  var src_default = config();
128
88
  export {
129
89
  colors,
130
90
  config,
131
- src_default as default
91
+ src_default as default,
92
+ fontSizes,
93
+ shadows
132
94
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@removify/tailwind-preset",
3
3
  "type": "module",
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "description": "Tailwind CSS preset for Removify",
6
6
  "keywords": [
7
7
  "tailwind"
@@ -14,28 +14,38 @@
14
14
  },
15
15
  "main": "./dist/index.js",
16
16
  "types": "./dist/index.d.ts",
17
+ "bin": "./bin/index.js",
17
18
  "files": [
19
+ "bin",
18
20
  "dist"
19
21
  ],
20
22
  "engines": {
21
23
  "node": ">=18"
22
24
  },
25
+ "peerDependencies": {
26
+ "tailwindcss": "^3.0.0"
27
+ },
28
+ "dependencies": {
29
+ "yargs": "17.7.2"
30
+ },
23
31
  "devDependencies": {
24
32
  "@commitlint/cli": "^18.6.0",
25
33
  "@commitlint/config-conventional": "^18.6.0",
26
34
  "@types/node": "^20.11.10",
35
+ "@types/yargs": "^17.0.32",
27
36
  "bumpp": "^9.3.0",
28
37
  "eslint": "^8.56.0",
29
38
  "eslint-config-removify": "^1.2.11",
30
39
  "husky": "^8.0.3",
31
40
  "lint-staged": "^15.2.0",
41
+ "rimraf": "^5.0.5",
32
42
  "tailwind-config-viewer": "^1.7.3",
33
43
  "tailwindcss": "^3.4.1",
34
44
  "tsup": "^8.0.1",
35
45
  "tsx": "^4.7.0",
36
46
  "typescript": "^5.3.3",
37
47
  "vitest": "^1.2.2",
38
- "removify-tailwind-preset": "npm:@removify/tailwind-preset@0.0.5"
48
+ "@removify/tailwind-preset": "0.0.7"
39
49
  },
40
50
  "lint-staged": {
41
51
  "**/*.{js,ts,vue,html}": [
@@ -44,7 +54,7 @@
44
54
  },
45
55
  "scripts": {
46
56
  "start": "tsx ./src/index.ts",
47
- "build": "tsup src/index.ts --format esm,cjs --clean --dts",
57
+ "build": "rimraf dist && tsup src/index.ts src/cli.ts --format esm,cjs --clean --dts",
48
58
  "watch": "tsup --format esm,cjs --watch",
49
59
  "dev": "tsx watch ./src/index.ts",
50
60
  "test": "vitest",
package/readme.md CHANGED
@@ -5,16 +5,24 @@ This is tailwind preset for removify.
5
5
  ## Usage
6
6
 
7
7
  ```bash
8
- npm install -D removify-tailwind-preset
8
+ npm install -D @removify/tailwind-preset
9
9
 
10
- yarn add -D removify-tailwind-preset
10
+ yarn add -D @removify/tailwind-preset
11
11
 
12
- pnpm add -D removify-tailwind-preset
12
+ pnpm add -D @removify/tailwind-preset
13
+ ```
14
+
15
+ ### Use cli to generate tailwind v4 theme
16
+
17
+ **Note:** Tailwind v4 is in alpha stage, therefor the cli is subjected to change in the future.
18
+
19
+ ```bash
20
+ npx @removify/tailwind-preset > src/style.css
13
21
  ```
14
22
 
15
23
  ```ts
16
24
  // tailwind.config.{t,j}s
17
- import removify from 'removify-tailwind-preset';
25
+ import removify from '@removify/tailwind-preset';
18
26
  import type { Config } from 'tailwindcss';
19
27
 
20
28
  export default {