@apptify-labs/tokens 1.0.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.
Files changed (13) hide show
  1. package/.turbo/turbo-build.log +16 -0
  2. package/dist/index.d.mts +151 -0
  3. package/dist/index.d.ts +151 -0
  4. package/dist/index.js +246 -0
  5. package/dist/index.mjs +212 -0
  6. package/package.json +15 -0
  7. package/src/colors.ts +72 -0
  8. package/src/index.ts +5 -0
  9. package/src/radius.ts +11 -0
  10. package/src/shadows.ts +9 -0
  11. package/src/spacing.ts +27 -0
  12. package/src/typography.ts +34 -0
  13. package/tsconfig.json +15 -0
package/.turbo/turbo-build.log ADDED
@@ -0,0 +1,16 @@
1
+ $ tsup src/index.ts --format cjs,esm --dts --clean
2
+ CLI Building entry: src/index.ts
3
+ CLI Using tsconfig: tsconfig.json
4
+ CLI tsup v8.5.1
5
+ CLI Target: es2022
6
+ CLI Cleaning output folder
7
+ CJS Build start
8
+ ESM Build start
9
+ ESM dist/index.mjs 3.55 KB
10
+ ESM ⚡️ Build success in 31ms
11
+ CJS dist/index.js 4.75 KB
12
+ CJS ⚡️ Build success in 31ms
13
+ DTS Build start
14
+ DTS ⚡️ Build success in 282ms
15
+ DTS dist/index.d.ts 4.37 KB
16
+ DTS dist/index.d.mts 4.37 KB
package/dist/index.d.mts ADDED
@@ -0,0 +1,151 @@
1
+ declare const colors: {
2
+ readonly primary: {
3
+ readonly 50: "#F4F7FF";
4
+ readonly 100: "#E8EFFF";
5
+ readonly 200: "#D0DFFF";
6
+ readonly 300: "#A9C5FF";
7
+ readonly 400: "#7CA0FF";
8
+ readonly 500: "#4B76FF";
9
+ readonly 600: "#2B52E8";
10
+ readonly 700: "#1E3CC9";
11
+ readonly 800: "#1C31A2";
12
+ readonly 900: "#1B2C81";
13
+ };
14
+ readonly secondary: {
15
+ readonly 50: "#F9FAFB";
16
+ readonly 100: "#F3F4F6";
17
+ readonly 200: "#E5E7EB";
18
+ readonly 300: "#D1D5DB";
19
+ readonly 400: "#9CA3AF";
20
+ readonly 500: "#6B7280";
21
+ readonly 600: "#4B5563";
22
+ readonly 700: "#374151";
23
+ readonly 800: "#1F2937";
24
+ readonly 900: "#111827";
25
+ };
26
+ readonly success: {
27
+ readonly 50: "#ECFDF5";
28
+ readonly 100: "#D1FAE5";
29
+ readonly 500: "#10B981";
30
+ readonly 600: "#059669";
31
+ readonly 700: "#047857";
32
+ };
33
+ readonly warning: {
34
+ readonly 50: "#FFFBEB";
35
+ readonly 100: "#FEF3C7";
36
+ readonly 500: "#F59E0B";
37
+ readonly 600: "#D97706";
38
+ readonly 700: "#B45309";
39
+ };
40
+ readonly danger: {
41
+ readonly 50: "#FEF2F2";
42
+ readonly 100: "#FEE2E2";
43
+ readonly 500: "#EF4444";
44
+ readonly 600: "#DC2626";
45
+ readonly 700: "#B91C1C";
46
+ };
47
+ readonly info: {
48
+ readonly 50: "#F0F9FF";
49
+ readonly 100: "#E0F2FE";
50
+ readonly 500: "#0EA5E9";
51
+ readonly 600: "#0284C7";
52
+ readonly 700: "#0369A1";
53
+ };
54
+ readonly neutral: {
55
+ readonly 50: "#F8FAFC";
56
+ readonly 100: "#F1F5F9";
57
+ readonly 200: "#E2E8F0";
58
+ readonly 300: "#CBD5E1";
59
+ readonly 400: "#94A3B8";
60
+ readonly 500: "#64748B";
61
+ readonly 600: "#475569";
62
+ readonly 700: "#334155";
63
+ readonly 800: "#1E293B";
64
+ readonly 900: "#0F172A";
65
+ readonly 950: "#020617";
66
+ };
67
+ };
68
+
69
+ declare const spacing: {
70
+ readonly px: "1px";
71
+ readonly 0: "0px";
72
+ readonly 0.5: "0.125rem";
73
+ readonly 1: "0.25rem";
74
+ readonly 1.5: "0.375rem";
75
+ readonly 2: "0.5rem";
76
+ readonly 2.5: "0.625rem";
77
+ readonly 3: "0.75rem";
78
+ readonly 3.5: "0.875rem";
79
+ readonly 4: "1rem";
80
+ readonly 5: "1.25rem";
81
+ readonly 6: "1.5rem";
82
+ readonly 7: "1.75rem";
83
+ readonly 8: "2rem";
84
+ readonly 9: "2.25rem";
85
+ readonly 10: "2.5rem";
86
+ readonly 12: "3rem";
87
+ readonly 14: "3.5rem";
88
+ readonly 16: "4rem";
89
+ readonly 20: "5rem";
90
+ readonly 24: "6rem";
91
+ readonly 28: "7rem";
92
+ readonly 32: "8rem";
93
+ readonly 36: "9rem";
94
+ readonly 40: "10rem";
95
+ };
96
+
97
+ declare const fontFamilies: {
98
+ readonly sans: "Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
99
+ readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
100
+ };
101
+ declare const fontSizes: {
102
+ readonly xs: "0.75rem";
103
+ readonly sm: "0.875rem";
104
+ readonly base: "1rem";
105
+ readonly lg: "1.125rem";
106
+ readonly xl: "1.25rem";
107
+ readonly "2xl": "1.5rem";
108
+ readonly "3xl": "1.875rem";
109
+ readonly "4xl": "2.25rem";
110
+ readonly "5xl": "3rem";
111
+ };
112
+ declare const fontWeights: {
113
+ readonly light: "300";
114
+ readonly regular: "400";
115
+ readonly medium: "500";
116
+ readonly semibold: "600";
117
+ readonly bold: "700";
118
+ readonly extrabold: "800";
119
+ };
120
+ declare const lineHeights: {
121
+ readonly none: "1";
122
+ readonly tight: "1.25";
123
+ readonly snug: "1.375";
124
+ readonly normal: "1.5";
125
+ readonly relaxed: "1.625";
126
+ readonly loose: "2";
127
+ };
128
+
129
+ declare const radius: {
130
+ readonly none: "0px";
131
+ readonly xs: "0.125rem";
132
+ readonly sm: "0.25rem";
133
+ readonly md: "0.375rem";
134
+ readonly lg: "0.5rem";
135
+ readonly xl: "0.75rem";
136
+ readonly "2xl": "1rem";
137
+ readonly "3xl": "1.5rem";
138
+ readonly full: "9999px";
139
+ };
140
+
141
+ declare const shadows: {
142
+ readonly none: "none";
143
+ readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
144
+ readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
145
+ readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
146
+ readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
147
+ readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
148
+ readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)";
149
+ };
150
+
151
+ export { colors, fontFamilies, fontSizes, fontWeights, lineHeights, radius, shadows, spacing };
package/dist/index.d.ts ADDED
@@ -0,0 +1,151 @@
1
+ declare const colors: {
2
+ readonly primary: {
3
+ readonly 50: "#F4F7FF";
4
+ readonly 100: "#E8EFFF";
5
+ readonly 200: "#D0DFFF";
6
+ readonly 300: "#A9C5FF";
7
+ readonly 400: "#7CA0FF";
8
+ readonly 500: "#4B76FF";
9
+ readonly 600: "#2B52E8";
10
+ readonly 700: "#1E3CC9";
11
+ readonly 800: "#1C31A2";
12
+ readonly 900: "#1B2C81";
13
+ };
14
+ readonly secondary: {
15
+ readonly 50: "#F9FAFB";
16
+ readonly 100: "#F3F4F6";
17
+ readonly 200: "#E5E7EB";
18
+ readonly 300: "#D1D5DB";
19
+ readonly 400: "#9CA3AF";
20
+ readonly 500: "#6B7280";
21
+ readonly 600: "#4B5563";
22
+ readonly 700: "#374151";
23
+ readonly 800: "#1F2937";
24
+ readonly 900: "#111827";
25
+ };
26
+ readonly success: {
27
+ readonly 50: "#ECFDF5";
28
+ readonly 100: "#D1FAE5";
29
+ readonly 500: "#10B981";
30
+ readonly 600: "#059669";
31
+ readonly 700: "#047857";
32
+ };
33
+ readonly warning: {
34
+ readonly 50: "#FFFBEB";
35
+ readonly 100: "#FEF3C7";
36
+ readonly 500: "#F59E0B";
37
+ readonly 600: "#D97706";
38
+ readonly 700: "#B45309";
39
+ };
40
+ readonly danger: {
41
+ readonly 50: "#FEF2F2";
42
+ readonly 100: "#FEE2E2";
43
+ readonly 500: "#EF4444";
44
+ readonly 600: "#DC2626";
45
+ readonly 700: "#B91C1C";
46
+ };
47
+ readonly info: {
48
+ readonly 50: "#F0F9FF";
49
+ readonly 100: "#E0F2FE";
50
+ readonly 500: "#0EA5E9";
51
+ readonly 600: "#0284C7";
52
+ readonly 700: "#0369A1";
53
+ };
54
+ readonly neutral: {
55
+ readonly 50: "#F8FAFC";
56
+ readonly 100: "#F1F5F9";
57
+ readonly 200: "#E2E8F0";
58
+ readonly 300: "#CBD5E1";
59
+ readonly 400: "#94A3B8";
60
+ readonly 500: "#64748B";
61
+ readonly 600: "#475569";
62
+ readonly 700: "#334155";
63
+ readonly 800: "#1E293B";
64
+ readonly 900: "#0F172A";
65
+ readonly 950: "#020617";
66
+ };
67
+ };
68
+
69
+ declare const spacing: {
70
+ readonly px: "1px";
71
+ readonly 0: "0px";
72
+ readonly 0.5: "0.125rem";
73
+ readonly 1: "0.25rem";
74
+ readonly 1.5: "0.375rem";
75
+ readonly 2: "0.5rem";
76
+ readonly 2.5: "0.625rem";
77
+ readonly 3: "0.75rem";
78
+ readonly 3.5: "0.875rem";
79
+ readonly 4: "1rem";
80
+ readonly 5: "1.25rem";
81
+ readonly 6: "1.5rem";
82
+ readonly 7: "1.75rem";
83
+ readonly 8: "2rem";
84
+ readonly 9: "2.25rem";
85
+ readonly 10: "2.5rem";
86
+ readonly 12: "3rem";
87
+ readonly 14: "3.5rem";
88
+ readonly 16: "4rem";
89
+ readonly 20: "5rem";
90
+ readonly 24: "6rem";
91
+ readonly 28: "7rem";
92
+ readonly 32: "8rem";
93
+ readonly 36: "9rem";
94
+ readonly 40: "10rem";
95
+ };
96
+
97
+ declare const fontFamilies: {
98
+ readonly sans: "Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
99
+ readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
100
+ };
101
+ declare const fontSizes: {
102
+ readonly xs: "0.75rem";
103
+ readonly sm: "0.875rem";
104
+ readonly base: "1rem";
105
+ readonly lg: "1.125rem";
106
+ readonly xl: "1.25rem";
107
+ readonly "2xl": "1.5rem";
108
+ readonly "3xl": "1.875rem";
109
+ readonly "4xl": "2.25rem";
110
+ readonly "5xl": "3rem";
111
+ };
112
+ declare const fontWeights: {
113
+ readonly light: "300";
114
+ readonly regular: "400";
115
+ readonly medium: "500";
116
+ readonly semibold: "600";
117
+ readonly bold: "700";
118
+ readonly extrabold: "800";
119
+ };
120
+ declare const lineHeights: {
121
+ readonly none: "1";
122
+ readonly tight: "1.25";
123
+ readonly snug: "1.375";
124
+ readonly normal: "1.5";
125
+ readonly relaxed: "1.625";
126
+ readonly loose: "2";
127
+ };
128
+
129
+ declare const radius: {
130
+ readonly none: "0px";
131
+ readonly xs: "0.125rem";
132
+ readonly sm: "0.25rem";
133
+ readonly md: "0.375rem";
134
+ readonly lg: "0.5rem";
135
+ readonly xl: "0.75rem";
136
+ readonly "2xl": "1rem";
137
+ readonly "3xl": "1.5rem";
138
+ readonly full: "9999px";
139
+ };
140
+
141
+ declare const shadows: {
142
+ readonly none: "none";
143
+ readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
144
+ readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
145
+ readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
146
+ readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
147
+ readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
148
+ readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)";
149
+ };
150
+
151
+ export { colors, fontFamilies, fontSizes, fontWeights, lineHeights, radius, shadows, spacing };
package/dist/index.js ADDED
@@ -0,0 +1,246 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ colors: () => colors,
24
+ fontFamilies: () => fontFamilies,
25
+ fontSizes: () => fontSizes,
26
+ fontWeights: () => fontWeights,
27
+ lineHeights: () => lineHeights,
28
+ radius: () => radius,
29
+ shadows: () => shadows,
30
+ spacing: () => spacing
31
+ });
32
+ module.exports = __toCommonJS(index_exports);
33
+
34
+ // src/colors.ts
35
+ var colors = {
36
+ // Brand Colors
37
+ primary: {
38
+ 50: "#F4F7FF",
39
+ 100: "#E8EFFF",
40
+ 200: "#D0DFFF",
41
+ 300: "#A9C5FF",
42
+ 400: "#7CA0FF",
43
+ 500: "#4B76FF",
44
+ // Main brand color (Vibrant Indigo-Blue)
45
+ 600: "#2B52E8",
46
+ 700: "#1E3CC9",
47
+ 800: "#1C31A2",
48
+ 900: "#1B2C81"
49
+ },
50
+ secondary: {
51
+ 50: "#F9FAFB",
52
+ 100: "#F3F4F6",
53
+ 200: "#E5E7EB",
54
+ 300: "#D1D5DB",
55
+ 400: "#9CA3AF",
56
+ 500: "#6B7280",
57
+ // Slate-Grey secondary
58
+ 600: "#4B5563",
59
+ 700: "#374151",
60
+ 800: "#1F2937",
61
+ 900: "#111827"
62
+ },
63
+ // Semantic Colors
64
+ success: {
65
+ 50: "#ECFDF5",
66
+ 100: "#D1FAE5",
67
+ 500: "#10B981",
68
+ // Emerald success
69
+ 600: "#059669",
70
+ 700: "#047857"
71
+ },
72
+ warning: {
73
+ 50: "#FFFBEB",
74
+ 100: "#FEF3C7",
75
+ 500: "#F59E0B",
76
+ // Amber warning
77
+ 600: "#D97706",
78
+ 700: "#B45309"
79
+ },
80
+ danger: {
81
+ 50: "#FEF2F2",
82
+ 100: "#FEE2E2",
83
+ 500: "#EF4444",
84
+ // Rose/Red danger
85
+ 600: "#DC2626",
86
+ 700: "#B91C1C"
87
+ },
88
+ info: {
89
+ 50: "#F0F9FF",
90
+ 100: "#E0F2FE",
91
+ 500: "#0EA5E9",
92
+ // Sky info
93
+ 600: "#0284C7",
94
+ 700: "#0369A1"
95
+ },
96
+ // Neutral Scales (Sleek Slate)
97
+ neutral: {
98
+ 50: "#F8FAFC",
99
+ 100: "#F1F5F9",
100
+ 200: "#E2E8F0",
101
+ 300: "#CBD5E1",
102
+ 400: "#94A3B8",
103
+ 500: "#64748B",
104
+ 600: "#475569",
105
+ 700: "#334155",
106
+ 800: "#1E293B",
107
+ 900: "#0F172A",
108
+ 950: "#020617"
109
+ }
110
+ };
111
+
112
+ // src/spacing.ts
113
+ var spacing = {
114
+ px: "1px",
115
+ 0: "0px",
116
+ 0.5: "0.125rem",
117
+ // 2px
118
+ 1: "0.25rem",
119
+ // 4px
120
+ 1.5: "0.375rem",
121
+ // 6px
122
+ 2: "0.5rem",
123
+ // 8px
124
+ 2.5: "0.625rem",
125
+ // 10px
126
+ 3: "0.75rem",
127
+ // 12px
128
+ 3.5: "0.875rem",
129
+ // 14px
130
+ 4: "1rem",
131
+ // 16px
132
+ 5: "1.25rem",
133
+ // 20px
134
+ 6: "1.5rem",
135
+ // 24px
136
+ 7: "1.75rem",
137
+ // 28px
138
+ 8: "2rem",
139
+ // 32px
140
+ 9: "2.25rem",
141
+ // 36px
142
+ 10: "2.5rem",
143
+ // 40px
144
+ 12: "3rem",
145
+ // 48px
146
+ 14: "3.5rem",
147
+ // 56px
148
+ 16: "4rem",
149
+ // 64px
150
+ 20: "5rem",
151
+ // 80px
152
+ 24: "6rem",
153
+ // 96px
154
+ 28: "7rem",
155
+ // 112px
156
+ 32: "8rem",
157
+ // 128px
158
+ 36: "9rem",
159
+ // 144px
160
+ 40: "10rem"
161
+ // 160px
162
+ };
163
+
164
+ // src/typography.ts
165
+ var fontFamilies = {
166
+ sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
167
+ mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
168
+ };
169
+ var fontSizes = {
170
+ xs: "0.75rem",
171
+ // 12px
172
+ sm: "0.875rem",
173
+ // 14px
174
+ base: "1rem",
175
+ // 16px
176
+ lg: "1.125rem",
177
+ // 18px
178
+ xl: "1.25rem",
179
+ // 20px
180
+ "2xl": "1.5rem",
181
+ // 24px
182
+ "3xl": "1.875rem",
183
+ // 30px
184
+ "4xl": "2.25rem",
185
+ // 36px
186
+ "5xl": "3rem"
187
+ // 48px
188
+ };
189
+ var fontWeights = {
190
+ light: "300",
191
+ regular: "400",
192
+ medium: "500",
193
+ semibold: "600",
194
+ bold: "700",
195
+ extrabold: "800"
196
+ };
197
+ var lineHeights = {
198
+ none: "1",
199
+ tight: "1.25",
200
+ snug: "1.375",
201
+ normal: "1.5",
202
+ relaxed: "1.625",
203
+ loose: "2"
204
+ };
205
+
206
+ // src/radius.ts
207
+ var radius = {
208
+ none: "0px",
209
+ xs: "0.125rem",
210
+ // 2px
211
+ sm: "0.25rem",
212
+ // 4px
213
+ md: "0.375rem",
214
+ // 6px
215
+ lg: "0.5rem",
216
+ // 8px
217
+ xl: "0.75rem",
218
+ // 12px
219
+ "2xl": "1rem",
220
+ // 16px
221
+ "3xl": "1.5rem",
222
+ // 24px
223
+ full: "9999px"
224
+ };
225
+
226
+ // src/shadows.ts
227
+ var shadows = {
228
+ none: "none",
229
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
230
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
231
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
232
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
233
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
234
+ inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)"
235
+ };
236
+ // Annotate the CommonJS export names for ESM import in node:
237
+ 0 && (module.exports = {
238
+ colors,
239
+ fontFamilies,
240
+ fontSizes,
241
+ fontWeights,
242
+ lineHeights,
243
+ radius,
244
+ shadows,
245
+ spacing
246
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,212 @@
1
+ // src/colors.ts
2
+ var colors = {
3
+ // Brand Colors
4
+ primary: {
5
+ 50: "#F4F7FF",
6
+ 100: "#E8EFFF",
7
+ 200: "#D0DFFF",
8
+ 300: "#A9C5FF",
9
+ 400: "#7CA0FF",
10
+ 500: "#4B76FF",
11
+ // Main brand color (Vibrant Indigo-Blue)
12
+ 600: "#2B52E8",
13
+ 700: "#1E3CC9",
14
+ 800: "#1C31A2",
15
+ 900: "#1B2C81"
16
+ },
17
+ secondary: {
18
+ 50: "#F9FAFB",
19
+ 100: "#F3F4F6",
20
+ 200: "#E5E7EB",
21
+ 300: "#D1D5DB",
22
+ 400: "#9CA3AF",
23
+ 500: "#6B7280",
24
+ // Slate-Grey secondary
25
+ 600: "#4B5563",
26
+ 700: "#374151",
27
+ 800: "#1F2937",
28
+ 900: "#111827"
29
+ },
30
+ // Semantic Colors
31
+ success: {
32
+ 50: "#ECFDF5",
33
+ 100: "#D1FAE5",
34
+ 500: "#10B981",
35
+ // Emerald success
36
+ 600: "#059669",
37
+ 700: "#047857"
38
+ },
39
+ warning: {
40
+ 50: "#FFFBEB",
41
+ 100: "#FEF3C7",
42
+ 500: "#F59E0B",
43
+ // Amber warning
44
+ 600: "#D97706",
45
+ 700: "#B45309"
46
+ },
47
+ danger: {
48
+ 50: "#FEF2F2",
49
+ 100: "#FEE2E2",
50
+ 500: "#EF4444",
51
+ // Rose/Red danger
52
+ 600: "#DC2626",
53
+ 700: "#B91C1C"
54
+ },
55
+ info: {
56
+ 50: "#F0F9FF",
57
+ 100: "#E0F2FE",
58
+ 500: "#0EA5E9",
59
+ // Sky info
60
+ 600: "#0284C7",
61
+ 700: "#0369A1"
62
+ },
63
+ // Neutral Scales (Sleek Slate)
64
+ neutral: {
65
+ 50: "#F8FAFC",
66
+ 100: "#F1F5F9",
67
+ 200: "#E2E8F0",
68
+ 300: "#CBD5E1",
69
+ 400: "#94A3B8",
70
+ 500: "#64748B",
71
+ 600: "#475569",
72
+ 700: "#334155",
73
+ 800: "#1E293B",
74
+ 900: "#0F172A",
75
+ 950: "#020617"
76
+ }
77
+ };
78
+
79
+ // src/spacing.ts
80
+ var spacing = {
81
+ px: "1px",
82
+ 0: "0px",
83
+ 0.5: "0.125rem",
84
+ // 2px
85
+ 1: "0.25rem",
86
+ // 4px
87
+ 1.5: "0.375rem",
88
+ // 6px
89
+ 2: "0.5rem",
90
+ // 8px
91
+ 2.5: "0.625rem",
92
+ // 10px
93
+ 3: "0.75rem",
94
+ // 12px
95
+ 3.5: "0.875rem",
96
+ // 14px
97
+ 4: "1rem",
98
+ // 16px
99
+ 5: "1.25rem",
100
+ // 20px
101
+ 6: "1.5rem",
102
+ // 24px
103
+ 7: "1.75rem",
104
+ // 28px
105
+ 8: "2rem",
106
+ // 32px
107
+ 9: "2.25rem",
108
+ // 36px
109
+ 10: "2.5rem",
110
+ // 40px
111
+ 12: "3rem",
112
+ // 48px
113
+ 14: "3.5rem",
114
+ // 56px
115
+ 16: "4rem",
116
+ // 64px
117
+ 20: "5rem",
118
+ // 80px
119
+ 24: "6rem",
120
+ // 96px
121
+ 28: "7rem",
122
+ // 112px
123
+ 32: "8rem",
124
+ // 128px
125
+ 36: "9rem",
126
+ // 144px
127
+ 40: "10rem"
128
+ // 160px
129
+ };
130
+
131
+ // src/typography.ts
132
+ var fontFamilies = {
133
+ sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
134
+ mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
135
+ };
136
+ var fontSizes = {
137
+ xs: "0.75rem",
138
+ // 12px
139
+ sm: "0.875rem",
140
+ // 14px
141
+ base: "1rem",
142
+ // 16px
143
+ lg: "1.125rem",
144
+ // 18px
145
+ xl: "1.25rem",
146
+ // 20px
147
+ "2xl": "1.5rem",
148
+ // 24px
149
+ "3xl": "1.875rem",
150
+ // 30px
151
+ "4xl": "2.25rem",
152
+ // 36px
153
+ "5xl": "3rem"
154
+ // 48px
155
+ };
156
+ var fontWeights = {
157
+ light: "300",
158
+ regular: "400",
159
+ medium: "500",
160
+ semibold: "600",
161
+ bold: "700",
162
+ extrabold: "800"
163
+ };
164
+ var lineHeights = {
165
+ none: "1",
166
+ tight: "1.25",
167
+ snug: "1.375",
168
+ normal: "1.5",
169
+ relaxed: "1.625",
170
+ loose: "2"
171
+ };
172
+
173
+ // src/radius.ts
174
+ var radius = {
175
+ none: "0px",
176
+ xs: "0.125rem",
177
+ // 2px
178
+ sm: "0.25rem",
179
+ // 4px
180
+ md: "0.375rem",
181
+ // 6px
182
+ lg: "0.5rem",
183
+ // 8px
184
+ xl: "0.75rem",
185
+ // 12px
186
+ "2xl": "1rem",
187
+ // 16px
188
+ "3xl": "1.5rem",
189
+ // 24px
190
+ full: "9999px"
191
+ };
192
+
193
+ // src/shadows.ts
194
+ var shadows = {
195
+ none: "none",
196
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
197
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
198
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
199
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
200
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
201
+ inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)"
202
+ };
203
+ export {
204
+ colors,
205
+ fontFamilies,
206
+ fontSizes,
207
+ fontWeights,
208
+ lineHeights,
209
+ radius,
210
+ shadows,
211
+ spacing
212
+ };
package/package.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "@apptify-labs/tokens",
3
+ "version": "1.0.0",
4
+ "main": "./dist/index.js",
5
+ "module": "./dist/index.mjs",
6
+ "types": "./dist/index.d.ts",
7
+ "devDependencies": {
8
+ "tsup": "^8.0.2",
9
+ "typescript": "^5.3.3"
10
+ },
11
+ "scripts": {
12
+ "build": "tsup src/index.ts --format cjs,esm --dts --clean",
13
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
14
+ }
15
+ }
package/src/colors.ts ADDED
@@ -0,0 +1,72 @@
1
+ export const colors = {
2
+ // Brand Colors
3
+ primary: {
4
+ 50: "#F4F7FF",
5
+ 100: "#E8EFFF",
6
+ 200: "#D0DFFF",
7
+ 300: "#A9C5FF",
8
+ 400: "#7CA0FF",
9
+ 500: "#4B76FF", // Main brand color (Vibrant Indigo-Blue)
10
+ 600: "#2B52E8",
11
+ 700: "#1E3CC9",
12
+ 800: "#1C31A2",
13
+ 900: "#1B2C81",
14
+ },
15
+ secondary: {
16
+ 50: "#F9FAFB",
17
+ 100: "#F3F4F6",
18
+ 200: "#E5E7EB",
19
+ 300: "#D1D5DB",
20
+ 400: "#9CA3AF",
21
+ 500: "#6B7280", // Slate-Grey secondary
22
+ 600: "#4B5563",
23
+ 700: "#374151",
24
+ 800: "#1F2937",
25
+ 900: "#111827",
26
+ },
27
+
28
+ // Semantic Colors
29
+ success: {
30
+ 50: "#ECFDF5",
31
+ 100: "#D1FAE5",
32
+ 500: "#10B981", // Emerald success
33
+ 600: "#059669",
34
+ 700: "#047857",
35
+ },
36
+ warning: {
37
+ 50: "#FFFBEB",
38
+ 100: "#FEF3C7",
39
+ 500: "#F59E0B", // Amber warning
40
+ 600: "#D97706",
41
+ 700: "#B45309",
42
+ },
43
+ danger: {
44
+ 50: "#FEF2F2",
45
+ 100: "#FEE2E2",
46
+ 500: "#EF4444", // Rose/Red danger
47
+ 600: "#DC2626",
48
+ 700: "#B91C1C",
49
+ },
50
+ info: {
51
+ 50: "#F0F9FF",
52
+ 100: "#E0F2FE",
53
+ 500: "#0EA5E9", // Sky info
54
+ 600: "#0284C7",
55
+ 700: "#0369A1",
56
+ },
57
+
58
+ // Neutral Scales (Sleek Slate)
59
+ neutral: {
60
+ 50: "#F8FAFC",
61
+ 100: "#F1F5F9",
62
+ 200: "#E2E8F0",
63
+ 300: "#CBD5E1",
64
+ 400: "#94A3B8",
65
+ 500: "#64748B",
66
+ 600: "#475569",
67
+ 700: "#334155",
68
+ 800: "#1E293B",
69
+ 900: "#0F172A",
70
+ 950: "#020617",
71
+ }
72
+ } as const;
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from "./colors";
2
+ export * from "./spacing";
3
+ export * from "./typography";
4
+ export * from "./radius";
5
+ export * from "./shadows";
package/src/radius.ts ADDED
@@ -0,0 +1,11 @@
1
+ export const radius = {
2
+ none: "0px",
3
+ xs: "0.125rem", // 2px
4
+ sm: "0.25rem", // 4px
5
+ md: "0.375rem", // 6px
6
+ lg: "0.5rem", // 8px
7
+ xl: "0.75rem", // 12px
8
+ "2xl": "1rem", // 16px
9
+ "3xl": "1.5rem", // 24px
10
+ full: "9999px",
11
+ } as const;
package/src/shadows.ts ADDED
@@ -0,0 +1,9 @@
1
+ export const shadows = {
2
+ none: "none",
3
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
4
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
5
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
6
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
7
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
8
+ inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
9
+ } as const;
package/src/spacing.ts ADDED
@@ -0,0 +1,27 @@
1
+ export const spacing = {
2
+ px: "1px",
3
+ 0: "0px",
4
+ 0.5: "0.125rem", // 2px
5
+ 1: "0.25rem", // 4px
6
+ 1.5: "0.375rem", // 6px
7
+ 2: "0.5rem", // 8px
8
+ 2.5: "0.625rem", // 10px
9
+ 3: "0.75rem", // 12px
10
+ 3.5: "0.875rem", // 14px
11
+ 4: "1rem", // 16px
12
+ 5: "1.25rem", // 20px
13
+ 6: "1.5rem", // 24px
14
+ 7: "1.75rem", // 28px
15
+ 8: "2rem", // 32px
16
+ 9: "2.25rem", // 36px
17
+ 10: "2.5rem", // 40px
18
+ 12: "3rem", // 48px
19
+ 14: "3.5rem", // 56px
20
+ 16: "4rem", // 64px
21
+ 20: "5rem", // 80px
22
+ 24: "6rem", // 96px
23
+ 28: "7rem", // 112px
24
+ 32: "8rem", // 128px
25
+ 36: "9rem", // 144px
26
+ 40: "10rem", // 160px
27
+ } as const;
package/src/typography.ts ADDED
@@ -0,0 +1,34 @@
1
+ export const fontFamilies = {
2
+ sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
3
+ mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
4
+ } as const;
5
+
6
+ export const fontSizes = {
7
+ xs: "0.75rem", // 12px
8
+ sm: "0.875rem", // 14px
9
+ base: "1rem", // 16px
10
+ lg: "1.125rem", // 18px
11
+ xl: "1.25rem", // 20px
12
+ "2xl": "1.5rem", // 24px
13
+ "3xl": "1.875rem", // 30px
14
+ "4xl": "2.25rem", // 36px
15
+ "5xl": "3rem", // 48px
16
+ } as const;
17
+
18
+ export const fontWeights = {
19
+ light: "300",
20
+ regular: "400",
21
+ medium: "500",
22
+ semibold: "600",
23
+ bold: "700",
24
+ extrabold: "800",
25
+ } as const;
26
+
27
+ export const lineHeights = {
28
+ none: "1",
29
+ tight: "1.25",
30
+ snug: "1.375",
31
+ normal: "1.5",
32
+ relaxed: "1.625",
33
+ loose: "2",
34
+ } as const;
package/tsconfig.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es2022",
4
+ "module": "commonjs",
5
+ "moduleResolution": "node",
6
+ "declaration": true,
7
+ "declarationMap": true,
8
+ "outDir": "./dist",
9
+ "strict": true,
10
+ "esModuleInterop": true,
11
+ "skipLibCheck": true,
12
+ "forceConsistentCasingInFileNames": true
13
+ },
14
+ "include": ["src/**/*"]
15
+ }