@mohasinac/tokens 0.1.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 (6) hide show
  1. package/dist/index.cjs +144 -0
  2. package/dist/index.d.cts +213 -0
  3. package/dist/index.d.ts +213 -0
  4. package/dist/index.js +114 -0
  5. package/package.json +33 -0
  6. package/src/tokens.css +221 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,144 @@
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
+ RADIUS: () => RADIUS,
25
+ SHADOWS: () => SHADOWS,
26
+ TOKENS: () => TOKENS,
27
+ Z_INDEX: () => Z_INDEX,
28
+ token: () => token
29
+ });
30
+ module.exports = __toCommonJS(index_exports);
31
+ var COLORS = {
32
+ primary: {
33
+ DEFAULT: "#84e122",
34
+ 50: "#f3ffe3",
35
+ 100: "#e4ffc5",
36
+ 200: "#c8ff90",
37
+ 300: "#a3f550",
38
+ 400: "#84e122",
39
+ 500: "#65c408",
40
+ 600: "#509c02",
41
+ 700: "#3e7708",
42
+ 800: "#345e0d",
43
+ 900: "#2c5011",
44
+ 950: "#142d03"
45
+ },
46
+ secondary: {
47
+ DEFAULT: "#e91e8c",
48
+ 50: "#fdf0f8",
49
+ 100: "#fce2f2",
50
+ 200: "#fac6e6",
51
+ 300: "#f79dd2",
52
+ 400: "#f063b9",
53
+ 500: "#e91e8c",
54
+ 600: "#d4107a",
55
+ 700: "#b00d66",
56
+ 800: "#900f56",
57
+ 900: "#771249",
58
+ 950: "#480525"
59
+ },
60
+ cobalt: {
61
+ DEFAULT: "#3570fc",
62
+ 50: "#eef5ff",
63
+ 100: "#d9e8ff",
64
+ 200: "#bcd4ff",
65
+ 300: "#8eb9ff",
66
+ 400: "#5992ff",
67
+ 500: "#3570fc",
68
+ 600: "#1a55f2",
69
+ 700: "#1343de",
70
+ 800: "#1536b4",
71
+ 900: "#18318e",
72
+ 950: "#111e58"
73
+ },
74
+ accent: {
75
+ DEFAULT: "#8393b2",
76
+ 50: "#f5f7fa",
77
+ 100: "#eaeef4",
78
+ 200: "#d1dae6",
79
+ 300: "#adb9cf",
80
+ 400: "#8393b2",
81
+ 500: "#657599",
82
+ 600: "#505f7f",
83
+ 700: "#424d67",
84
+ 800: "#394257",
85
+ 900: "#333b4b",
86
+ 950: "#222730"
87
+ },
88
+ semantic: {
89
+ success: "#059669",
90
+ warning: "#d97706",
91
+ error: "#dc2626",
92
+ info: "#0284c7"
93
+ }
94
+ };
95
+ var RADIUS = {
96
+ sm: "0.25rem",
97
+ md: "0.375rem",
98
+ lg: "0.5rem",
99
+ xl: "0.75rem",
100
+ "2xl": "1rem",
101
+ "3xl": "1.5rem",
102
+ card: "1rem",
103
+ btn: "0.75rem",
104
+ full: "9999px"
105
+ };
106
+ var SHADOWS = {
107
+ sm: "0 1px 2px 0 rgba(0,0,0,0.05)",
108
+ md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
109
+ lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
110
+ xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
111
+ soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)",
112
+ glow: "0 0 20px rgba(80, 156, 2, 0.45)",
113
+ glowPink: "0 0 20px rgba(233, 30, 140, 0.5)"
114
+ };
115
+ var Z_INDEX = {
116
+ dropdown: 30,
117
+ searchBackdrop: 35,
118
+ navbar: 40,
119
+ bottomNav: 40,
120
+ overlay: 45,
121
+ sidebar: 50,
122
+ titleBar: 50,
123
+ modal: 60,
124
+ toast: 70
125
+ };
126
+ function token(name) {
127
+ return `var(--lir-${name})`;
128
+ }
129
+ var TOKENS = {
130
+ colors: COLORS,
131
+ radius: RADIUS,
132
+ shadows: SHADOWS,
133
+ zIndex: Z_INDEX,
134
+ token
135
+ };
136
+ // Annotate the CommonJS export names for ESM import in node:
137
+ 0 && (module.exports = {
138
+ COLORS,
139
+ RADIUS,
140
+ SHADOWS,
141
+ TOKENS,
142
+ Z_INDEX,
143
+ token
144
+ });
package/dist/index.d.cts ADDED
@@ -0,0 +1,213 @@
1
+ /**
2
+ * @mohasinac/tokens — TypeScript constants
3
+ *
4
+ * Mirrors the CSS custom properties in tokens.css as typed TS values.
5
+ * Use these when you need token values in JS (e.g. canvas drawing, charting,
6
+ * or building the tailwind.config.js color palette from a single source).
7
+ *
8
+ * In CSS/Tailwind prefer `var(--lir-*)` references over these constants.
9
+ */
10
+ declare const COLORS: {
11
+ readonly primary: {
12
+ readonly DEFAULT: "#84e122";
13
+ readonly 50: "#f3ffe3";
14
+ readonly 100: "#e4ffc5";
15
+ readonly 200: "#c8ff90";
16
+ readonly 300: "#a3f550";
17
+ readonly 400: "#84e122";
18
+ readonly 500: "#65c408";
19
+ readonly 600: "#509c02";
20
+ readonly 700: "#3e7708";
21
+ readonly 800: "#345e0d";
22
+ readonly 900: "#2c5011";
23
+ readonly 950: "#142d03";
24
+ };
25
+ readonly secondary: {
26
+ readonly DEFAULT: "#e91e8c";
27
+ readonly 50: "#fdf0f8";
28
+ readonly 100: "#fce2f2";
29
+ readonly 200: "#fac6e6";
30
+ readonly 300: "#f79dd2";
31
+ readonly 400: "#f063b9";
32
+ readonly 500: "#e91e8c";
33
+ readonly 600: "#d4107a";
34
+ readonly 700: "#b00d66";
35
+ readonly 800: "#900f56";
36
+ readonly 900: "#771249";
37
+ readonly 950: "#480525";
38
+ };
39
+ readonly cobalt: {
40
+ readonly DEFAULT: "#3570fc";
41
+ readonly 50: "#eef5ff";
42
+ readonly 100: "#d9e8ff";
43
+ readonly 200: "#bcd4ff";
44
+ readonly 300: "#8eb9ff";
45
+ readonly 400: "#5992ff";
46
+ readonly 500: "#3570fc";
47
+ readonly 600: "#1a55f2";
48
+ readonly 700: "#1343de";
49
+ readonly 800: "#1536b4";
50
+ readonly 900: "#18318e";
51
+ readonly 950: "#111e58";
52
+ };
53
+ readonly accent: {
54
+ readonly DEFAULT: "#8393b2";
55
+ readonly 50: "#f5f7fa";
56
+ readonly 100: "#eaeef4";
57
+ readonly 200: "#d1dae6";
58
+ readonly 300: "#adb9cf";
59
+ readonly 400: "#8393b2";
60
+ readonly 500: "#657599";
61
+ readonly 600: "#505f7f";
62
+ readonly 700: "#424d67";
63
+ readonly 800: "#394257";
64
+ readonly 900: "#333b4b";
65
+ readonly 950: "#222730";
66
+ };
67
+ readonly semantic: {
68
+ readonly success: "#059669";
69
+ readonly warning: "#d97706";
70
+ readonly error: "#dc2626";
71
+ readonly info: "#0284c7";
72
+ };
73
+ };
74
+ declare const RADIUS: {
75
+ readonly sm: "0.25rem";
76
+ readonly md: "0.375rem";
77
+ readonly lg: "0.5rem";
78
+ readonly xl: "0.75rem";
79
+ readonly "2xl": "1rem";
80
+ readonly "3xl": "1.5rem";
81
+ readonly card: "1rem";
82
+ readonly btn: "0.75rem";
83
+ readonly full: "9999px";
84
+ };
85
+ declare const SHADOWS: {
86
+ readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
87
+ readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
88
+ readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
89
+ readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
90
+ readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
91
+ readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
92
+ readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
93
+ };
94
+ declare const Z_INDEX: {
95
+ readonly dropdown: 30;
96
+ readonly searchBackdrop: 35;
97
+ readonly navbar: 40;
98
+ readonly bottomNav: 40;
99
+ readonly overlay: 45;
100
+ readonly sidebar: 50;
101
+ readonly titleBar: 50;
102
+ readonly modal: 60;
103
+ readonly toast: 70;
104
+ };
105
+ /**
106
+ * Returns a CSS custom property reference for the given token name.
107
+ *
108
+ * @example
109
+ * token("color-primary") // "var(--lir-color-primary)"
110
+ * token("radius-card") // "var(--lir-radius-card)"
111
+ * token("shadow-glow") // "var(--lir-shadow-glow)"
112
+ */
113
+ declare function token(name: string): string;
114
+ declare const TOKENS: {
115
+ readonly colors: {
116
+ readonly primary: {
117
+ readonly DEFAULT: "#84e122";
118
+ readonly 50: "#f3ffe3";
119
+ readonly 100: "#e4ffc5";
120
+ readonly 200: "#c8ff90";
121
+ readonly 300: "#a3f550";
122
+ readonly 400: "#84e122";
123
+ readonly 500: "#65c408";
124
+ readonly 600: "#509c02";
125
+ readonly 700: "#3e7708";
126
+ readonly 800: "#345e0d";
127
+ readonly 900: "#2c5011";
128
+ readonly 950: "#142d03";
129
+ };
130
+ readonly secondary: {
131
+ readonly DEFAULT: "#e91e8c";
132
+ readonly 50: "#fdf0f8";
133
+ readonly 100: "#fce2f2";
134
+ readonly 200: "#fac6e6";
135
+ readonly 300: "#f79dd2";
136
+ readonly 400: "#f063b9";
137
+ readonly 500: "#e91e8c";
138
+ readonly 600: "#d4107a";
139
+ readonly 700: "#b00d66";
140
+ readonly 800: "#900f56";
141
+ readonly 900: "#771249";
142
+ readonly 950: "#480525";
143
+ };
144
+ readonly cobalt: {
145
+ readonly DEFAULT: "#3570fc";
146
+ readonly 50: "#eef5ff";
147
+ readonly 100: "#d9e8ff";
148
+ readonly 200: "#bcd4ff";
149
+ readonly 300: "#8eb9ff";
150
+ readonly 400: "#5992ff";
151
+ readonly 500: "#3570fc";
152
+ readonly 600: "#1a55f2";
153
+ readonly 700: "#1343de";
154
+ readonly 800: "#1536b4";
155
+ readonly 900: "#18318e";
156
+ readonly 950: "#111e58";
157
+ };
158
+ readonly accent: {
159
+ readonly DEFAULT: "#8393b2";
160
+ readonly 50: "#f5f7fa";
161
+ readonly 100: "#eaeef4";
162
+ readonly 200: "#d1dae6";
163
+ readonly 300: "#adb9cf";
164
+ readonly 400: "#8393b2";
165
+ readonly 500: "#657599";
166
+ readonly 600: "#505f7f";
167
+ readonly 700: "#424d67";
168
+ readonly 800: "#394257";
169
+ readonly 900: "#333b4b";
170
+ readonly 950: "#222730";
171
+ };
172
+ readonly semantic: {
173
+ readonly success: "#059669";
174
+ readonly warning: "#d97706";
175
+ readonly error: "#dc2626";
176
+ readonly info: "#0284c7";
177
+ };
178
+ };
179
+ readonly radius: {
180
+ readonly sm: "0.25rem";
181
+ readonly md: "0.375rem";
182
+ readonly lg: "0.5rem";
183
+ readonly xl: "0.75rem";
184
+ readonly "2xl": "1rem";
185
+ readonly "3xl": "1.5rem";
186
+ readonly card: "1rem";
187
+ readonly btn: "0.75rem";
188
+ readonly full: "9999px";
189
+ };
190
+ readonly shadows: {
191
+ readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
192
+ readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
193
+ readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
194
+ readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
195
+ readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
196
+ readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
197
+ readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
198
+ };
199
+ readonly zIndex: {
200
+ readonly dropdown: 30;
201
+ readonly searchBackdrop: 35;
202
+ readonly navbar: 40;
203
+ readonly bottomNav: 40;
204
+ readonly overlay: 45;
205
+ readonly sidebar: 50;
206
+ readonly titleBar: 50;
207
+ readonly modal: 60;
208
+ readonly toast: 70;
209
+ };
210
+ readonly token: typeof token;
211
+ };
212
+
213
+ export { COLORS, RADIUS, SHADOWS, TOKENS, Z_INDEX, token };
package/dist/index.d.ts ADDED
@@ -0,0 +1,213 @@
1
+ /**
2
+ * @mohasinac/tokens — TypeScript constants
3
+ *
4
+ * Mirrors the CSS custom properties in tokens.css as typed TS values.
5
+ * Use these when you need token values in JS (e.g. canvas drawing, charting,
6
+ * or building the tailwind.config.js color palette from a single source).
7
+ *
8
+ * In CSS/Tailwind prefer `var(--lir-*)` references over these constants.
9
+ */
10
+ declare const COLORS: {
11
+ readonly primary: {
12
+ readonly DEFAULT: "#84e122";
13
+ readonly 50: "#f3ffe3";
14
+ readonly 100: "#e4ffc5";
15
+ readonly 200: "#c8ff90";
16
+ readonly 300: "#a3f550";
17
+ readonly 400: "#84e122";
18
+ readonly 500: "#65c408";
19
+ readonly 600: "#509c02";
20
+ readonly 700: "#3e7708";
21
+ readonly 800: "#345e0d";
22
+ readonly 900: "#2c5011";
23
+ readonly 950: "#142d03";
24
+ };
25
+ readonly secondary: {
26
+ readonly DEFAULT: "#e91e8c";
27
+ readonly 50: "#fdf0f8";
28
+ readonly 100: "#fce2f2";
29
+ readonly 200: "#fac6e6";
30
+ readonly 300: "#f79dd2";
31
+ readonly 400: "#f063b9";
32
+ readonly 500: "#e91e8c";
33
+ readonly 600: "#d4107a";
34
+ readonly 700: "#b00d66";
35
+ readonly 800: "#900f56";
36
+ readonly 900: "#771249";
37
+ readonly 950: "#480525";
38
+ };
39
+ readonly cobalt: {
40
+ readonly DEFAULT: "#3570fc";
41
+ readonly 50: "#eef5ff";
42
+ readonly 100: "#d9e8ff";
43
+ readonly 200: "#bcd4ff";
44
+ readonly 300: "#8eb9ff";
45
+ readonly 400: "#5992ff";
46
+ readonly 500: "#3570fc";
47
+ readonly 600: "#1a55f2";
48
+ readonly 700: "#1343de";
49
+ readonly 800: "#1536b4";
50
+ readonly 900: "#18318e";
51
+ readonly 950: "#111e58";
52
+ };
53
+ readonly accent: {
54
+ readonly DEFAULT: "#8393b2";
55
+ readonly 50: "#f5f7fa";
56
+ readonly 100: "#eaeef4";
57
+ readonly 200: "#d1dae6";
58
+ readonly 300: "#adb9cf";
59
+ readonly 400: "#8393b2";
60
+ readonly 500: "#657599";
61
+ readonly 600: "#505f7f";
62
+ readonly 700: "#424d67";
63
+ readonly 800: "#394257";
64
+ readonly 900: "#333b4b";
65
+ readonly 950: "#222730";
66
+ };
67
+ readonly semantic: {
68
+ readonly success: "#059669";
69
+ readonly warning: "#d97706";
70
+ readonly error: "#dc2626";
71
+ readonly info: "#0284c7";
72
+ };
73
+ };
74
+ declare const RADIUS: {
75
+ readonly sm: "0.25rem";
76
+ readonly md: "0.375rem";
77
+ readonly lg: "0.5rem";
78
+ readonly xl: "0.75rem";
79
+ readonly "2xl": "1rem";
80
+ readonly "3xl": "1.5rem";
81
+ readonly card: "1rem";
82
+ readonly btn: "0.75rem";
83
+ readonly full: "9999px";
84
+ };
85
+ declare const SHADOWS: {
86
+ readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
87
+ readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
88
+ readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
89
+ readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
90
+ readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
91
+ readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
92
+ readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
93
+ };
94
+ declare const Z_INDEX: {
95
+ readonly dropdown: 30;
96
+ readonly searchBackdrop: 35;
97
+ readonly navbar: 40;
98
+ readonly bottomNav: 40;
99
+ readonly overlay: 45;
100
+ readonly sidebar: 50;
101
+ readonly titleBar: 50;
102
+ readonly modal: 60;
103
+ readonly toast: 70;
104
+ };
105
+ /**
106
+ * Returns a CSS custom property reference for the given token name.
107
+ *
108
+ * @example
109
+ * token("color-primary") // "var(--lir-color-primary)"
110
+ * token("radius-card") // "var(--lir-radius-card)"
111
+ * token("shadow-glow") // "var(--lir-shadow-glow)"
112
+ */
113
+ declare function token(name: string): string;
114
+ declare const TOKENS: {
115
+ readonly colors: {
116
+ readonly primary: {
117
+ readonly DEFAULT: "#84e122";
118
+ readonly 50: "#f3ffe3";
119
+ readonly 100: "#e4ffc5";
120
+ readonly 200: "#c8ff90";
121
+ readonly 300: "#a3f550";
122
+ readonly 400: "#84e122";
123
+ readonly 500: "#65c408";
124
+ readonly 600: "#509c02";
125
+ readonly 700: "#3e7708";
126
+ readonly 800: "#345e0d";
127
+ readonly 900: "#2c5011";
128
+ readonly 950: "#142d03";
129
+ };
130
+ readonly secondary: {
131
+ readonly DEFAULT: "#e91e8c";
132
+ readonly 50: "#fdf0f8";
133
+ readonly 100: "#fce2f2";
134
+ readonly 200: "#fac6e6";
135
+ readonly 300: "#f79dd2";
136
+ readonly 400: "#f063b9";
137
+ readonly 500: "#e91e8c";
138
+ readonly 600: "#d4107a";
139
+ readonly 700: "#b00d66";
140
+ readonly 800: "#900f56";
141
+ readonly 900: "#771249";
142
+ readonly 950: "#480525";
143
+ };
144
+ readonly cobalt: {
145
+ readonly DEFAULT: "#3570fc";
146
+ readonly 50: "#eef5ff";
147
+ readonly 100: "#d9e8ff";
148
+ readonly 200: "#bcd4ff";
149
+ readonly 300: "#8eb9ff";
150
+ readonly 400: "#5992ff";
151
+ readonly 500: "#3570fc";
152
+ readonly 600: "#1a55f2";
153
+ readonly 700: "#1343de";
154
+ readonly 800: "#1536b4";
155
+ readonly 900: "#18318e";
156
+ readonly 950: "#111e58";
157
+ };
158
+ readonly accent: {
159
+ readonly DEFAULT: "#8393b2";
160
+ readonly 50: "#f5f7fa";
161
+ readonly 100: "#eaeef4";
162
+ readonly 200: "#d1dae6";
163
+ readonly 300: "#adb9cf";
164
+ readonly 400: "#8393b2";
165
+ readonly 500: "#657599";
166
+ readonly 600: "#505f7f";
167
+ readonly 700: "#424d67";
168
+ readonly 800: "#394257";
169
+ readonly 900: "#333b4b";
170
+ readonly 950: "#222730";
171
+ };
172
+ readonly semantic: {
173
+ readonly success: "#059669";
174
+ readonly warning: "#d97706";
175
+ readonly error: "#dc2626";
176
+ readonly info: "#0284c7";
177
+ };
178
+ };
179
+ readonly radius: {
180
+ readonly sm: "0.25rem";
181
+ readonly md: "0.375rem";
182
+ readonly lg: "0.5rem";
183
+ readonly xl: "0.75rem";
184
+ readonly "2xl": "1rem";
185
+ readonly "3xl": "1.5rem";
186
+ readonly card: "1rem";
187
+ readonly btn: "0.75rem";
188
+ readonly full: "9999px";
189
+ };
190
+ readonly shadows: {
191
+ readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
192
+ readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
193
+ readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
194
+ readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
195
+ readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
196
+ readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
197
+ readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
198
+ };
199
+ readonly zIndex: {
200
+ readonly dropdown: 30;
201
+ readonly searchBackdrop: 35;
202
+ readonly navbar: 40;
203
+ readonly bottomNav: 40;
204
+ readonly overlay: 45;
205
+ readonly sidebar: 50;
206
+ readonly titleBar: 50;
207
+ readonly modal: 60;
208
+ readonly toast: 70;
209
+ };
210
+ readonly token: typeof token;
211
+ };
212
+
213
+ export { COLORS, RADIUS, SHADOWS, TOKENS, Z_INDEX, token };
package/dist/index.js ADDED
@@ -0,0 +1,114 @@
1
+ // src/index.ts
2
+ var COLORS = {
3
+ primary: {
4
+ DEFAULT: "#84e122",
5
+ 50: "#f3ffe3",
6
+ 100: "#e4ffc5",
7
+ 200: "#c8ff90",
8
+ 300: "#a3f550",
9
+ 400: "#84e122",
10
+ 500: "#65c408",
11
+ 600: "#509c02",
12
+ 700: "#3e7708",
13
+ 800: "#345e0d",
14
+ 900: "#2c5011",
15
+ 950: "#142d03"
16
+ },
17
+ secondary: {
18
+ DEFAULT: "#e91e8c",
19
+ 50: "#fdf0f8",
20
+ 100: "#fce2f2",
21
+ 200: "#fac6e6",
22
+ 300: "#f79dd2",
23
+ 400: "#f063b9",
24
+ 500: "#e91e8c",
25
+ 600: "#d4107a",
26
+ 700: "#b00d66",
27
+ 800: "#900f56",
28
+ 900: "#771249",
29
+ 950: "#480525"
30
+ },
31
+ cobalt: {
32
+ DEFAULT: "#3570fc",
33
+ 50: "#eef5ff",
34
+ 100: "#d9e8ff",
35
+ 200: "#bcd4ff",
36
+ 300: "#8eb9ff",
37
+ 400: "#5992ff",
38
+ 500: "#3570fc",
39
+ 600: "#1a55f2",
40
+ 700: "#1343de",
41
+ 800: "#1536b4",
42
+ 900: "#18318e",
43
+ 950: "#111e58"
44
+ },
45
+ accent: {
46
+ DEFAULT: "#8393b2",
47
+ 50: "#f5f7fa",
48
+ 100: "#eaeef4",
49
+ 200: "#d1dae6",
50
+ 300: "#adb9cf",
51
+ 400: "#8393b2",
52
+ 500: "#657599",
53
+ 600: "#505f7f",
54
+ 700: "#424d67",
55
+ 800: "#394257",
56
+ 900: "#333b4b",
57
+ 950: "#222730"
58
+ },
59
+ semantic: {
60
+ success: "#059669",
61
+ warning: "#d97706",
62
+ error: "#dc2626",
63
+ info: "#0284c7"
64
+ }
65
+ };
66
+ var RADIUS = {
67
+ sm: "0.25rem",
68
+ md: "0.375rem",
69
+ lg: "0.5rem",
70
+ xl: "0.75rem",
71
+ "2xl": "1rem",
72
+ "3xl": "1.5rem",
73
+ card: "1rem",
74
+ btn: "0.75rem",
75
+ full: "9999px"
76
+ };
77
+ var SHADOWS = {
78
+ sm: "0 1px 2px 0 rgba(0,0,0,0.05)",
79
+ md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
80
+ lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
81
+ xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
82
+ soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)",
83
+ glow: "0 0 20px rgba(80, 156, 2, 0.45)",
84
+ glowPink: "0 0 20px rgba(233, 30, 140, 0.5)"
85
+ };
86
+ var Z_INDEX = {
87
+ dropdown: 30,
88
+ searchBackdrop: 35,
89
+ navbar: 40,
90
+ bottomNav: 40,
91
+ overlay: 45,
92
+ sidebar: 50,
93
+ titleBar: 50,
94
+ modal: 60,
95
+ toast: 70
96
+ };
97
+ function token(name) {
98
+ return `var(--lir-${name})`;
99
+ }
100
+ var TOKENS = {
101
+ colors: COLORS,
102
+ radius: RADIUS,
103
+ shadows: SHADOWS,
104
+ zIndex: Z_INDEX,
105
+ token
106
+ };
107
+ export {
108
+ COLORS,
109
+ RADIUS,
110
+ SHADOWS,
111
+ TOKENS,
112
+ Z_INDEX,
113
+ token
114
+ };
package/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "@mohasinac/tokens",
3
+ "version": "0.1.0",
4
+ "description": "Design tokens for @mohasinac/* packages — CSS custom properties and TS constants",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "type": "module",
9
+ "main": "./dist/index.cjs",
10
+ "module": "./dist/index.js",
11
+ "types": "./dist/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.cjs"
17
+ },
18
+ "./tokens.css": "./src/tokens.css"
19
+ },
20
+ "files": [
21
+ "dist",
22
+ "src/tokens.css"
23
+ ],
24
+ "scripts": {
25
+ "build": "tsup src/index.ts --format esm,cjs --dts",
26
+ "lint": "eslint src"
27
+ },
28
+ "devDependencies": {
29
+ "tsup": "^8.5.0",
30
+ "typescript": "^5.9.3",
31
+ "eslint": "^9.37.0"
32
+ }
33
+ }
package/src/tokens.css ADDED
@@ -0,0 +1,221 @@
1
+ /*
2
+ * @mohasinac/tokens — Design tokens as CSS custom properties
3
+ *
4
+ * All values are prefixed --lir-* for the @mohasinac/* package system.
5
+ * Consumer projects override only what they need to rebrand:
6
+ *
7
+ * /* my-brand/globals.css * /
8
+ * @import "@mohasinac/tokens/tokens.css";
9
+ * :root {
10
+ * --lir-color-primary: #your-primary;
11
+ * --lir-color-secondary: #your-secondary;
12
+ * }
13
+ *
14
+ * Default values reflect the letitrip.in brand (Beyblade-inspired lime + magenta palette).
15
+ */
16
+
17
+ /* ─── Colour — Brand ─────────────────────────────────────────────────────── */
18
+ :root {
19
+ /* Primary — Lime Green (Beyblade green blades) */
20
+ --lir-color-primary: #84e122;
21
+ --lir-color-primary-50: #f3ffe3;
22
+ --lir-color-primary-100: #e4ffc5;
23
+ --lir-color-primary-200: #c8ff90;
24
+ --lir-color-primary-300: #a3f550;
25
+ --lir-color-primary-400: #84e122;
26
+ --lir-color-primary-500: #65c408;
27
+ --lir-color-primary-600: #509c02;
28
+ --lir-color-primary-700: #3e7708;
29
+ --lir-color-primary-800: #345e0d;
30
+ --lir-color-primary-900: #2c5011;
31
+ --lir-color-primary-950: #142d03;
32
+
33
+ /* Secondary — Hot Pink / Magenta (dark mode accent, pink Beyblade blades) */
34
+ --lir-color-secondary: #e91e8c;
35
+ --lir-color-secondary-50: #fdf0f8;
36
+ --lir-color-secondary-100: #fce2f2;
37
+ --lir-color-secondary-200: #fac6e6;
38
+ --lir-color-secondary-300: #f79dd2;
39
+ --lir-color-secondary-400: #f063b9;
40
+ --lir-color-secondary-500: #e91e8c;
41
+ --lir-color-secondary-600: #d4107a;
42
+ --lir-color-secondary-700: #b00d66;
43
+ --lir-color-secondary-800: #900f56;
44
+ --lir-color-secondary-900: #771249;
45
+ --lir-color-secondary-950: #480525;
46
+
47
+ /* Cobalt — Blue accent (links, nav) */
48
+ --lir-color-cobalt: #3570fc;
49
+ --lir-color-cobalt-50: #eef5ff;
50
+ --lir-color-cobalt-100: #d9e8ff;
51
+ --lir-color-cobalt-200: #bcd4ff;
52
+ --lir-color-cobalt-300: #8eb9ff;
53
+ --lir-color-cobalt-400: #5992ff;
54
+ --lir-color-cobalt-500: #3570fc;
55
+ --lir-color-cobalt-600: #1a55f2;
56
+ --lir-color-cobalt-700: #1343de;
57
+ --lir-color-cobalt-800: #1536b4;
58
+ --lir-color-cobalt-900: #18318e;
59
+ --lir-color-cobalt-950: #111e58;
60
+
61
+ /* Accent — Metallic Steel (frame silver) */
62
+ --lir-color-accent: #8393b2;
63
+ --lir-color-accent-50: #f5f7fa;
64
+ --lir-color-accent-100: #eaeef4;
65
+ --lir-color-accent-200: #d1dae6;
66
+ --lir-color-accent-300: #adb9cf;
67
+ --lir-color-accent-400: #8393b2;
68
+ --lir-color-accent-500: #657599;
69
+ --lir-color-accent-600: #505f7f;
70
+ --lir-color-accent-700: #424d67;
71
+ --lir-color-accent-800: #394257;
72
+ --lir-color-accent-900: #333b4b;
73
+ --lir-color-accent-950: #222730;
74
+ }
75
+
76
+ /* ─── Colour — Semantic (light mode defaults) ────────────────────────────── */
77
+ :root {
78
+ --lir-color-bg: #fafafa; /* zinc-50 */
79
+ --lir-color-surface: #ffffff; /* white */
80
+ --lir-color-surface-elevated: #ffffff;
81
+ --lir-color-surface-input: #ffffff;
82
+
83
+ --lir-color-border: #e4e4e7; /* zinc-200 */
84
+ --lir-color-border-subtle: #f4f4f5; /* zinc-100 */
85
+
86
+ --lir-color-text: #18181b; /* zinc-900 */
87
+ --lir-color-text-muted: #71717a; /* zinc-500 */
88
+ --lir-color-text-faint: #a1a1aa; /* zinc-400 */
89
+ --lir-color-text-on-primary: #ffffff;
90
+ --lir-color-text-on-dark: #ffffff;
91
+
92
+ --lir-color-success: #059669; /* emerald-600 */
93
+ --lir-color-warning: #d97706; /* amber-600 */
94
+ --lir-color-error: #dc2626; /* red-600 */
95
+ --lir-color-info: #0284c7; /* sky-600 */
96
+
97
+ --lir-color-focus-ring: #65c408; /* primary-500 */
98
+ }
99
+
100
+ /* ─── Colour — Semantic (dark mode overrides) ────────────────────────────── */
101
+ .dark {
102
+ --lir-color-bg: #020617; /* slate-950 */
103
+ --lir-color-surface: #0f172a; /* slate-900 */
104
+ --lir-color-surface-elevated: rgba(15, 23, 42, 0.9);
105
+ --lir-color-surface-input: rgba(30, 41, 59, 0.6); /* slate-800/60 */
106
+
107
+ --lir-color-border: #334155; /* slate-700 */
108
+ --lir-color-border-subtle: rgba(30, 41, 59, 0.6); /* slate-800/60 */
109
+
110
+ --lir-color-text: #fafafa; /* zinc-50 */
111
+ --lir-color-text-muted: #a1a1aa; /* zinc-400 */
112
+ --lir-color-text-faint: #71717a; /* zinc-500 */
113
+
114
+ --lir-color-success: #34d399; /* emerald-400 */
115
+ --lir-color-warning: #fbbf24; /* amber-400 */
116
+ --lir-color-error: #f87171; /* red-400 */
117
+ --lir-color-info: #38bdf8; /* sky-400 */
118
+
119
+ --lir-color-focus-ring: #f063b9; /* secondary-400 */
120
+ }
121
+
122
+ /* ─── Typography ─────────────────────────────────────────────────────────── */
123
+ :root {
124
+ --lir-font-sans: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
125
+ --lir-font-display: var(--font-display), "Poppins", ui-sans-serif, system-ui, sans-serif;
126
+ --lir-font-editorial: var(--font-editorial), "Georgia", serif;
127
+ --lir-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
128
+
129
+ --lir-text-2xs: 0.625rem; /* 10px */
130
+ --lir-text-xs: 0.75rem; /* 12px */
131
+ --lir-text-sm: 0.875rem; /* 14px */
132
+ --lir-text-base: 1rem; /* 16px */
133
+ --lir-text-lg: 1.125rem; /* 18px */
134
+ --lir-text-xl: 1.25rem; /* 20px */
135
+ --lir-text-2xl: 1.5rem; /* 24px */
136
+ --lir-text-3xl: 1.875rem; /* 30px */
137
+ --lir-text-4xl: 2.25rem; /* 36px */
138
+ --lir-text-5xl: 3rem; /* 48px */
139
+
140
+ --lir-leading-tight: 1.15;
141
+ --lir-leading-snug: 1.375;
142
+ --lir-leading-normal: 1.5;
143
+ --lir-leading-relaxed: 1.7;
144
+
145
+ --lir-tracking-tighter: -0.02em;
146
+ --lir-tracking-tight: -0.011em;
147
+ --lir-tracking-normal: 0em;
148
+ --lir-tracking-wide: 0.025em;
149
+ --lir-tracking-wider: 0.05em;
150
+ }
151
+
152
+ /* ─── Spacing ────────────────────────────────────────────────────────────── */
153
+ :root {
154
+ --lir-space-1: 0.25rem; /* 4px */
155
+ --lir-space-2: 0.5rem; /* 8px */
156
+ --lir-space-3: 0.75rem; /* 12px */
157
+ --lir-space-4: 1rem; /* 16px */
158
+ --lir-space-5: 1.25rem; /* 20px */
159
+ --lir-space-6: 1.5rem; /* 24px */
160
+ --lir-space-8: 2rem; /* 32px */
161
+ --lir-space-10: 2.5rem; /* 40px */
162
+ --lir-space-12: 3rem; /* 48px */
163
+ --lir-space-16: 4rem; /* 64px */
164
+ --lir-space-20: 5rem; /* 80px */
165
+ --lir-space-18: 4.5rem; /* 72px — custom */
166
+ --lir-space-24: 6rem; /* 96px */
167
+ }
168
+
169
+ /* ─── Border Radius ──────────────────────────────────────────────────────── */
170
+ :root {
171
+ --lir-radius-sm: 0.25rem; /* 4px */
172
+ --lir-radius-md: 0.375rem; /* 6px */
173
+ --lir-radius-lg: 0.5rem; /* 8px */
174
+ --lir-radius-xl: 0.75rem; /* 12px */
175
+ --lir-radius-2xl: 1rem; /* 16px */
176
+ --lir-radius-3xl: 1.5rem; /* 24px */
177
+ --lir-radius-card: 1rem; /* 16px — alias */
178
+ --lir-radius-btn: 0.75rem; /* 12px — rounded-xl */
179
+ --lir-radius-full: 9999px;
180
+ }
181
+
182
+ /* ─── Shadow ─────────────────────────────────────────────────────────────── */
183
+ :root {
184
+ --lir-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
185
+ --lir-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
186
+ --lir-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
187
+ --lir-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
188
+ --lir-shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
189
+ --lir-shadow-glow: 0 0 20px rgba(80, 156, 2, 0.45);
190
+ --lir-shadow-glow-pink: 0 0 20px rgba(233, 30, 140, 0.5);
191
+ }
192
+
193
+ /* ─── Z-index ────────────────────────────────────────────────────────────── */
194
+ :root {
195
+ --lir-z-dropdown: 30;
196
+ --lir-z-search-backdrop: 35;
197
+ --lir-z-navbar: 40;
198
+ --lir-z-bottom-nav: 40;
199
+ --lir-z-sidebar: 50;
200
+ --lir-z-title-bar: 50;
201
+ --lir-z-overlay: 45;
202
+ --lir-z-modal: 60;
203
+ --lir-z-toast: 70;
204
+
205
+ /* Layout dimensions */
206
+ --lir-navbar-height: 2.5rem; /* h-10 = 40px (mobile), h-12 = 48px (md) */
207
+ --lir-sidebar-width: 20rem; /* w-80 = 320px */
208
+ --lir-bottom-nav-height: 3.5rem; /* h-14 = 56px */
209
+ --lir-title-bar-height: 3rem; /* h-12 = 48px */
210
+ }
211
+
212
+ /* ─── Transition ─────────────────────────────────────────────────────────── */
213
+ :root {
214
+ --lir-duration-fast: 150ms;
215
+ --lir-duration-base: 200ms;
216
+ --lir-duration-slow: 300ms;
217
+ --lir-duration-slower: 400ms;
218
+ --lir-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
219
+ --lir-ease-in: cubic-bezier(0.4, 0, 1, 1);
220
+ --lir-ease-out: cubic-bezier(0, 0, 0.2, 1);
221
+ }