@stndrds/constants 1.0.0-alpha.213 → 1.0.0-alpha.214

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 (5) hide show
  1. package/dist/index.d.mts +32 -122
  2. package/dist/index.d.ts +32 -122
  3. package/dist/index.js +32 -114
  4. package/dist/index.mjs +32 -114
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -41,139 +41,49 @@ declare function getDefaultAttributeIcon(type: string): IconName;
41
41
  declare function cn(...inputs: ClassValue[]): string;
42
42
 
43
43
  interface Color {
44
- /** Background color - works on both light and dark mode */
44
+ /** Background color - adapts to light/dark mode via CSS light-dark() */
45
45
  background: string;
46
- /** Border color - subtle, works on both modes */
46
+ /** Border color - adapts to light/dark mode via CSS light-dark() */
47
47
  border: string;
48
- /** Text color - high contrast, readable on the background */
48
+ /** Text color - dark shade in light mode, light shade in dark mode */
49
49
  text: string;
50
- /** Icon color - vibrant, the main accent */
50
+ /** Icon color - vibrant, the main accent, same in both modes */
51
51
  icon: string;
52
52
  }
53
53
  /**
54
54
  * Universal color palette designed to work in both light and dark modes.
55
55
  *
56
56
  * Design principles:
57
- * - Background: Semi-transparent with alpha for adaptability
58
- * - Border: Medium saturation, visible on both modes
59
- * - Text: Same as icon for consistency (vibrant, readable)
60
- * - Icon: The main vibrant color, good contrast on both modes
57
+ * - Background: semi-transparent tint, stronger alpha in dark mode so the
58
+ * tint stays visible over dark surfaces
59
+ * - Border: medium saturation, slightly stronger in dark mode
60
+ * - Text: high-contrast colored shade per mode (WCAG-friendly), for cases
61
+ * where colored text is wanted (e.g. rich-text colors)
62
+ * - Icon: the main vibrant color, used for dots/icons carrying the hue
63
+ *
64
+ * Note: tag labels themselves use the neutral theme foreground (Notion-style),
65
+ * not `text` — see packages/ui Tag component.
61
66
  */
62
67
  declare const COLORS: {
63
- readonly gray: {
64
- readonly background: "rgba(107, 114, 128, 0.15)";
65
- readonly border: "rgba(107, 114, 128, 0.3)";
66
- readonly text: "#6B7280";
67
- readonly icon: "#6B7280";
68
- };
69
- readonly slate: {
70
- readonly background: "rgba(100, 116, 139, 0.15)";
71
- readonly border: "rgba(100, 116, 139, 0.3)";
72
- readonly text: "#64748B";
73
- readonly icon: "#64748B";
74
- };
75
- readonly blue: {
76
- readonly background: "rgba(59, 130, 246, 0.15)";
77
- readonly border: "rgba(59, 130, 246, 0.3)";
78
- readonly text: "#3B82F6";
79
- readonly icon: "#3B82F6";
80
- };
81
- readonly sky: {
82
- readonly background: "rgba(14, 165, 233, 0.15)";
83
- readonly border: "rgba(14, 165, 233, 0.3)";
84
- readonly text: "#0EA5E9";
85
- readonly icon: "#0EA5E9";
86
- };
87
- readonly indigo: {
88
- readonly background: "rgba(99, 102, 241, 0.15)";
89
- readonly border: "rgba(99, 102, 241, 0.3)";
90
- readonly text: "#6366F1";
91
- readonly icon: "#6366F1";
92
- };
93
- readonly green: {
94
- readonly background: "rgba(34, 197, 94, 0.15)";
95
- readonly border: "rgba(34, 197, 94, 0.3)";
96
- readonly text: "#22C55E";
97
- readonly icon: "#22C55E";
98
- };
99
- readonly emerald: {
100
- readonly background: "rgba(16, 185, 129, 0.15)";
101
- readonly border: "rgba(16, 185, 129, 0.3)";
102
- readonly text: "#10B981";
103
- readonly icon: "#10B981";
104
- };
105
- readonly teal: {
106
- readonly background: "rgba(20, 184, 166, 0.15)";
107
- readonly border: "rgba(20, 184, 166, 0.3)";
108
- readonly text: "#14B8A6";
109
- readonly icon: "#14B8A6";
110
- };
111
- readonly red: {
112
- readonly background: "rgba(239, 68, 68, 0.15)";
113
- readonly border: "rgba(239, 68, 68, 0.3)";
114
- readonly text: "#EF4444";
115
- readonly icon: "#EF4444";
116
- };
117
- readonly rose: {
118
- readonly background: "rgba(244, 63, 94, 0.15)";
119
- readonly border: "rgba(244, 63, 94, 0.3)";
120
- readonly text: "#F43F5E";
121
- readonly icon: "#F43F5E";
122
- };
123
- readonly yellow: {
124
- readonly background: "rgba(234, 179, 8, 0.15)";
125
- readonly border: "rgba(234, 179, 8, 0.3)";
126
- readonly text: "#EAB308";
127
- readonly icon: "#EAB308";
128
- };
129
- readonly amber: {
130
- readonly background: "rgba(245, 158, 11, 0.15)";
131
- readonly border: "rgba(245, 158, 11, 0.3)";
132
- readonly text: "#F59E0B";
133
- readonly icon: "#F59E0B";
134
- };
135
- readonly orange: {
136
- readonly background: "rgba(249, 115, 22, 0.15)";
137
- readonly border: "rgba(249, 115, 22, 0.3)";
138
- readonly text: "#F97316";
139
- readonly icon: "#F97316";
140
- };
141
- readonly purple: {
142
- readonly background: "rgba(168, 85, 247, 0.15)";
143
- readonly border: "rgba(168, 85, 247, 0.3)";
144
- readonly text: "#A855F7";
145
- readonly icon: "#A855F7";
146
- };
147
- readonly violet: {
148
- readonly background: "rgba(139, 92, 246, 0.15)";
149
- readonly border: "rgba(139, 92, 246, 0.3)";
150
- readonly text: "#8B5CF6";
151
- readonly icon: "#8B5CF6";
152
- };
153
- readonly fuchsia: {
154
- readonly background: "rgba(217, 70, 239, 0.15)";
155
- readonly border: "rgba(217, 70, 239, 0.3)";
156
- readonly text: "#D946EF";
157
- readonly icon: "#D946EF";
158
- };
159
- readonly pink: {
160
- readonly background: "rgba(236, 72, 153, 0.15)";
161
- readonly border: "rgba(236, 72, 153, 0.3)";
162
- readonly text: "#EC4899";
163
- readonly icon: "#EC4899";
164
- };
165
- readonly cyan: {
166
- readonly background: "rgba(6, 182, 212, 0.15)";
167
- readonly border: "rgba(6, 182, 212, 0.3)";
168
- readonly text: "#06B6D4";
169
- readonly icon: "#06B6D4";
170
- };
171
- readonly lime: {
172
- readonly background: "rgba(132, 204, 22, 0.15)";
173
- readonly border: "rgba(132, 204, 22, 0.3)";
174
- readonly text: "#84CC16";
175
- readonly icon: "#84CC16";
176
- };
68
+ gray: Color;
69
+ slate: Color;
70
+ blue: Color;
71
+ sky: Color;
72
+ indigo: Color;
73
+ green: Color;
74
+ emerald: Color;
75
+ teal: Color;
76
+ red: Color;
77
+ rose: Color;
78
+ yellow: Color;
79
+ amber: Color;
80
+ orange: Color;
81
+ purple: Color;
82
+ violet: Color;
83
+ fuchsia: Color;
84
+ pink: Color;
85
+ cyan: Color;
86
+ lime: Color;
177
87
  };
178
88
  type ColorId = keyof typeof COLORS;
179
89
  type ColorBackground = (typeof COLORS)[ColorId]["background"];
package/dist/index.d.ts CHANGED
@@ -41,139 +41,49 @@ declare function getDefaultAttributeIcon(type: string): IconName;
41
41
  declare function cn(...inputs: ClassValue[]): string;
42
42
 
43
43
  interface Color {
44
- /** Background color - works on both light and dark mode */
44
+ /** Background color - adapts to light/dark mode via CSS light-dark() */
45
45
  background: string;
46
- /** Border color - subtle, works on both modes */
46
+ /** Border color - adapts to light/dark mode via CSS light-dark() */
47
47
  border: string;
48
- /** Text color - high contrast, readable on the background */
48
+ /** Text color - dark shade in light mode, light shade in dark mode */
49
49
  text: string;
50
- /** Icon color - vibrant, the main accent */
50
+ /** Icon color - vibrant, the main accent, same in both modes */
51
51
  icon: string;
52
52
  }
53
53
  /**
54
54
  * Universal color palette designed to work in both light and dark modes.
55
55
  *
56
56
  * Design principles:
57
- * - Background: Semi-transparent with alpha for adaptability
58
- * - Border: Medium saturation, visible on both modes
59
- * - Text: Same as icon for consistency (vibrant, readable)
60
- * - Icon: The main vibrant color, good contrast on both modes
57
+ * - Background: semi-transparent tint, stronger alpha in dark mode so the
58
+ * tint stays visible over dark surfaces
59
+ * - Border: medium saturation, slightly stronger in dark mode
60
+ * - Text: high-contrast colored shade per mode (WCAG-friendly), for cases
61
+ * where colored text is wanted (e.g. rich-text colors)
62
+ * - Icon: the main vibrant color, used for dots/icons carrying the hue
63
+ *
64
+ * Note: tag labels themselves use the neutral theme foreground (Notion-style),
65
+ * not `text` — see packages/ui Tag component.
61
66
  */
62
67
  declare const COLORS: {
63
- readonly gray: {
64
- readonly background: "rgba(107, 114, 128, 0.15)";
65
- readonly border: "rgba(107, 114, 128, 0.3)";
66
- readonly text: "#6B7280";
67
- readonly icon: "#6B7280";
68
- };
69
- readonly slate: {
70
- readonly background: "rgba(100, 116, 139, 0.15)";
71
- readonly border: "rgba(100, 116, 139, 0.3)";
72
- readonly text: "#64748B";
73
- readonly icon: "#64748B";
74
- };
75
- readonly blue: {
76
- readonly background: "rgba(59, 130, 246, 0.15)";
77
- readonly border: "rgba(59, 130, 246, 0.3)";
78
- readonly text: "#3B82F6";
79
- readonly icon: "#3B82F6";
80
- };
81
- readonly sky: {
82
- readonly background: "rgba(14, 165, 233, 0.15)";
83
- readonly border: "rgba(14, 165, 233, 0.3)";
84
- readonly text: "#0EA5E9";
85
- readonly icon: "#0EA5E9";
86
- };
87
- readonly indigo: {
88
- readonly background: "rgba(99, 102, 241, 0.15)";
89
- readonly border: "rgba(99, 102, 241, 0.3)";
90
- readonly text: "#6366F1";
91
- readonly icon: "#6366F1";
92
- };
93
- readonly green: {
94
- readonly background: "rgba(34, 197, 94, 0.15)";
95
- readonly border: "rgba(34, 197, 94, 0.3)";
96
- readonly text: "#22C55E";
97
- readonly icon: "#22C55E";
98
- };
99
- readonly emerald: {
100
- readonly background: "rgba(16, 185, 129, 0.15)";
101
- readonly border: "rgba(16, 185, 129, 0.3)";
102
- readonly text: "#10B981";
103
- readonly icon: "#10B981";
104
- };
105
- readonly teal: {
106
- readonly background: "rgba(20, 184, 166, 0.15)";
107
- readonly border: "rgba(20, 184, 166, 0.3)";
108
- readonly text: "#14B8A6";
109
- readonly icon: "#14B8A6";
110
- };
111
- readonly red: {
112
- readonly background: "rgba(239, 68, 68, 0.15)";
113
- readonly border: "rgba(239, 68, 68, 0.3)";
114
- readonly text: "#EF4444";
115
- readonly icon: "#EF4444";
116
- };
117
- readonly rose: {
118
- readonly background: "rgba(244, 63, 94, 0.15)";
119
- readonly border: "rgba(244, 63, 94, 0.3)";
120
- readonly text: "#F43F5E";
121
- readonly icon: "#F43F5E";
122
- };
123
- readonly yellow: {
124
- readonly background: "rgba(234, 179, 8, 0.15)";
125
- readonly border: "rgba(234, 179, 8, 0.3)";
126
- readonly text: "#EAB308";
127
- readonly icon: "#EAB308";
128
- };
129
- readonly amber: {
130
- readonly background: "rgba(245, 158, 11, 0.15)";
131
- readonly border: "rgba(245, 158, 11, 0.3)";
132
- readonly text: "#F59E0B";
133
- readonly icon: "#F59E0B";
134
- };
135
- readonly orange: {
136
- readonly background: "rgba(249, 115, 22, 0.15)";
137
- readonly border: "rgba(249, 115, 22, 0.3)";
138
- readonly text: "#F97316";
139
- readonly icon: "#F97316";
140
- };
141
- readonly purple: {
142
- readonly background: "rgba(168, 85, 247, 0.15)";
143
- readonly border: "rgba(168, 85, 247, 0.3)";
144
- readonly text: "#A855F7";
145
- readonly icon: "#A855F7";
146
- };
147
- readonly violet: {
148
- readonly background: "rgba(139, 92, 246, 0.15)";
149
- readonly border: "rgba(139, 92, 246, 0.3)";
150
- readonly text: "#8B5CF6";
151
- readonly icon: "#8B5CF6";
152
- };
153
- readonly fuchsia: {
154
- readonly background: "rgba(217, 70, 239, 0.15)";
155
- readonly border: "rgba(217, 70, 239, 0.3)";
156
- readonly text: "#D946EF";
157
- readonly icon: "#D946EF";
158
- };
159
- readonly pink: {
160
- readonly background: "rgba(236, 72, 153, 0.15)";
161
- readonly border: "rgba(236, 72, 153, 0.3)";
162
- readonly text: "#EC4899";
163
- readonly icon: "#EC4899";
164
- };
165
- readonly cyan: {
166
- readonly background: "rgba(6, 182, 212, 0.15)";
167
- readonly border: "rgba(6, 182, 212, 0.3)";
168
- readonly text: "#06B6D4";
169
- readonly icon: "#06B6D4";
170
- };
171
- readonly lime: {
172
- readonly background: "rgba(132, 204, 22, 0.15)";
173
- readonly border: "rgba(132, 204, 22, 0.3)";
174
- readonly text: "#84CC16";
175
- readonly icon: "#84CC16";
176
- };
68
+ gray: Color;
69
+ slate: Color;
70
+ blue: Color;
71
+ sky: Color;
72
+ indigo: Color;
73
+ green: Color;
74
+ emerald: Color;
75
+ teal: Color;
76
+ red: Color;
77
+ rose: Color;
78
+ yellow: Color;
79
+ amber: Color;
80
+ orange: Color;
81
+ purple: Color;
82
+ violet: Color;
83
+ fuchsia: Color;
84
+ pink: Color;
85
+ cyan: Color;
86
+ lime: Color;
177
87
  };
178
88
  type ColorId = keyof typeof COLORS;
179
89
  type ColorBackground = (typeof COLORS)[ColorId]["background"];
package/dist/index.js CHANGED
@@ -295,130 +295,48 @@ function cn(...inputs) {
295
295
  }
296
296
 
297
297
  // src/colors.ts
298
+ var lightDark = (light, dark) => `light-dark(${light}, ${dark})`;
299
+ function defineColor(vivid, textLight, textDark) {
300
+ const r = Number.parseInt(vivid.slice(1, 3), 16);
301
+ const g = Number.parseInt(vivid.slice(3, 5), 16);
302
+ const b = Number.parseInt(vivid.slice(5, 7), 16);
303
+ const alpha = (a) => `rgba(${r}, ${g}, ${b}, ${a})`;
304
+ return {
305
+ background: lightDark(alpha(0.15), alpha(0.22)),
306
+ border: lightDark(alpha(0.3), alpha(0.42)),
307
+ text: lightDark(textLight, textDark),
308
+ icon: vivid
309
+ };
310
+ }
298
311
  var COLORS = {
299
312
  // Neutral & Gray tones
300
- gray: {
301
- background: "rgba(107, 114, 128, 0.15)",
302
- border: "rgba(107, 114, 128, 0.3)",
303
- text: "#6B7280",
304
- icon: "#6B7280"
305
- },
306
- slate: {
307
- background: "rgba(100, 116, 139, 0.15)",
308
- border: "rgba(100, 116, 139, 0.3)",
309
- text: "#64748B",
310
- icon: "#64748B"
311
- },
313
+ gray: defineColor("#6B7280", "#374151", "#D1D5DB"),
314
+ slate: defineColor("#64748B", "#334155", "#CBD5E1"),
312
315
  // Blue tones (Info, In Progress)
313
- blue: {
314
- background: "rgba(59, 130, 246, 0.15)",
315
- border: "rgba(59, 130, 246, 0.3)",
316
- text: "#3B82F6",
317
- icon: "#3B82F6"
318
- },
319
- sky: {
320
- background: "rgba(14, 165, 233, 0.15)",
321
- border: "rgba(14, 165, 233, 0.3)",
322
- text: "#0EA5E9",
323
- icon: "#0EA5E9"
324
- },
325
- indigo: {
326
- background: "rgba(99, 102, 241, 0.15)",
327
- border: "rgba(99, 102, 241, 0.3)",
328
- text: "#6366F1",
329
- icon: "#6366F1"
330
- },
316
+ blue: defineColor("#3B82F6", "#1D4ED8", "#93C5FD"),
317
+ sky: defineColor("#0EA5E9", "#0369A1", "#7DD3FC"),
318
+ indigo: defineColor("#6366F1", "#4338CA", "#A5B4FC"),
331
319
  // Green tones (Success, Done, Active)
332
- green: {
333
- background: "rgba(34, 197, 94, 0.15)",
334
- border: "rgba(34, 197, 94, 0.3)",
335
- text: "#22C55E",
336
- icon: "#22C55E"
337
- },
338
- emerald: {
339
- background: "rgba(16, 185, 129, 0.15)",
340
- border: "rgba(16, 185, 129, 0.3)",
341
- text: "#10B981",
342
- icon: "#10B981"
343
- },
344
- teal: {
345
- background: "rgba(20, 184, 166, 0.15)",
346
- border: "rgba(20, 184, 166, 0.3)",
347
- text: "#14B8A6",
348
- icon: "#14B8A6"
349
- },
320
+ green: defineColor("#22C55E", "#15803D", "#86EFAC"),
321
+ emerald: defineColor("#10B981", "#047857", "#6EE7B7"),
322
+ teal: defineColor("#14B8A6", "#0F766E", "#5EEAD4"),
350
323
  // Red tones (Error, Danger, Cancelled)
351
- red: {
352
- background: "rgba(239, 68, 68, 0.15)",
353
- border: "rgba(239, 68, 68, 0.3)",
354
- text: "#EF4444",
355
- icon: "#EF4444"
356
- },
357
- rose: {
358
- background: "rgba(244, 63, 94, 0.15)",
359
- border: "rgba(244, 63, 94, 0.3)",
360
- text: "#F43F5E",
361
- icon: "#F43F5E"
362
- },
324
+ red: defineColor("#EF4444", "#B91C1C", "#FCA5A5"),
325
+ rose: defineColor("#F43F5E", "#BE123C", "#FDA4AF"),
363
326
  // Yellow/Orange tones (Warning, Pending)
364
- yellow: {
365
- background: "rgba(234, 179, 8, 0.15)",
366
- border: "rgba(234, 179, 8, 0.3)",
367
- text: "#EAB308",
368
- icon: "#EAB308"
369
- },
370
- amber: {
371
- background: "rgba(245, 158, 11, 0.15)",
372
- border: "rgba(245, 158, 11, 0.3)",
373
- text: "#F59E0B",
374
- icon: "#F59E0B"
375
- },
376
- orange: {
377
- background: "rgba(249, 115, 22, 0.15)",
378
- border: "rgba(249, 115, 22, 0.3)",
379
- text: "#F97316",
380
- icon: "#F97316"
381
- },
327
+ yellow: defineColor("#EAB308", "#A16207", "#FDE047"),
328
+ amber: defineColor("#F59E0B", "#B45309", "#FCD34D"),
329
+ orange: defineColor("#F97316", "#C2410C", "#FDBA74"),
382
330
  // Purple tones (Special, Featured)
383
- purple: {
384
- background: "rgba(168, 85, 247, 0.15)",
385
- border: "rgba(168, 85, 247, 0.3)",
386
- text: "#A855F7",
387
- icon: "#A855F7"
388
- },
389
- violet: {
390
- background: "rgba(139, 92, 246, 0.15)",
391
- border: "rgba(139, 92, 246, 0.3)",
392
- text: "#8B5CF6",
393
- icon: "#8B5CF6"
394
- },
395
- fuchsia: {
396
- background: "rgba(217, 70, 239, 0.15)",
397
- border: "rgba(217, 70, 239, 0.3)",
398
- text: "#D946EF",
399
- icon: "#D946EF"
400
- },
331
+ purple: defineColor("#A855F7", "#7E22CE", "#D8B4FE"),
332
+ violet: defineColor("#8B5CF6", "#6D28D9", "#C4B5FD"),
333
+ fuchsia: defineColor("#D946EF", "#A21CAF", "#F0ABFC"),
401
334
  // Pink tones (Accent)
402
- pink: {
403
- background: "rgba(236, 72, 153, 0.15)",
404
- border: "rgba(236, 72, 153, 0.3)",
405
- text: "#EC4899",
406
- icon: "#EC4899"
407
- },
335
+ pink: defineColor("#EC4899", "#BE185D", "#F9A8D4"),
408
336
  // Cyan (Alternative Info)
409
- cyan: {
410
- background: "rgba(6, 182, 212, 0.15)",
411
- border: "rgba(6, 182, 212, 0.3)",
412
- text: "#06B6D4",
413
- icon: "#06B6D4"
414
- },
337
+ cyan: defineColor("#06B6D4", "#0E7490", "#67E8F9"),
415
338
  // Lime (Alternative Success)
416
- lime: {
417
- background: "rgba(132, 204, 22, 0.15)",
418
- border: "rgba(132, 204, 22, 0.3)",
419
- text: "#84CC16",
420
- icon: "#84CC16"
421
- }
339
+ lime: defineColor("#84CC16", "#4D7C0F", "#BEF264")
422
340
  };
423
341
  var getColor = (id) => {
424
342
  return COLORS[id];
package/dist/index.mjs CHANGED
@@ -191,130 +191,48 @@ function cn(...inputs) {
191
191
  }
192
192
 
193
193
  // src/colors.ts
194
+ var lightDark = (light, dark) => `light-dark(${light}, ${dark})`;
195
+ function defineColor(vivid, textLight, textDark) {
196
+ const r = Number.parseInt(vivid.slice(1, 3), 16);
197
+ const g = Number.parseInt(vivid.slice(3, 5), 16);
198
+ const b = Number.parseInt(vivid.slice(5, 7), 16);
199
+ const alpha = (a) => `rgba(${r}, ${g}, ${b}, ${a})`;
200
+ return {
201
+ background: lightDark(alpha(0.15), alpha(0.22)),
202
+ border: lightDark(alpha(0.3), alpha(0.42)),
203
+ text: lightDark(textLight, textDark),
204
+ icon: vivid
205
+ };
206
+ }
194
207
  var COLORS = {
195
208
  // Neutral & Gray tones
196
- gray: {
197
- background: "rgba(107, 114, 128, 0.15)",
198
- border: "rgba(107, 114, 128, 0.3)",
199
- text: "#6B7280",
200
- icon: "#6B7280"
201
- },
202
- slate: {
203
- background: "rgba(100, 116, 139, 0.15)",
204
- border: "rgba(100, 116, 139, 0.3)",
205
- text: "#64748B",
206
- icon: "#64748B"
207
- },
209
+ gray: defineColor("#6B7280", "#374151", "#D1D5DB"),
210
+ slate: defineColor("#64748B", "#334155", "#CBD5E1"),
208
211
  // Blue tones (Info, In Progress)
209
- blue: {
210
- background: "rgba(59, 130, 246, 0.15)",
211
- border: "rgba(59, 130, 246, 0.3)",
212
- text: "#3B82F6",
213
- icon: "#3B82F6"
214
- },
215
- sky: {
216
- background: "rgba(14, 165, 233, 0.15)",
217
- border: "rgba(14, 165, 233, 0.3)",
218
- text: "#0EA5E9",
219
- icon: "#0EA5E9"
220
- },
221
- indigo: {
222
- background: "rgba(99, 102, 241, 0.15)",
223
- border: "rgba(99, 102, 241, 0.3)",
224
- text: "#6366F1",
225
- icon: "#6366F1"
226
- },
212
+ blue: defineColor("#3B82F6", "#1D4ED8", "#93C5FD"),
213
+ sky: defineColor("#0EA5E9", "#0369A1", "#7DD3FC"),
214
+ indigo: defineColor("#6366F1", "#4338CA", "#A5B4FC"),
227
215
  // Green tones (Success, Done, Active)
228
- green: {
229
- background: "rgba(34, 197, 94, 0.15)",
230
- border: "rgba(34, 197, 94, 0.3)",
231
- text: "#22C55E",
232
- icon: "#22C55E"
233
- },
234
- emerald: {
235
- background: "rgba(16, 185, 129, 0.15)",
236
- border: "rgba(16, 185, 129, 0.3)",
237
- text: "#10B981",
238
- icon: "#10B981"
239
- },
240
- teal: {
241
- background: "rgba(20, 184, 166, 0.15)",
242
- border: "rgba(20, 184, 166, 0.3)",
243
- text: "#14B8A6",
244
- icon: "#14B8A6"
245
- },
216
+ green: defineColor("#22C55E", "#15803D", "#86EFAC"),
217
+ emerald: defineColor("#10B981", "#047857", "#6EE7B7"),
218
+ teal: defineColor("#14B8A6", "#0F766E", "#5EEAD4"),
246
219
  // Red tones (Error, Danger, Cancelled)
247
- red: {
248
- background: "rgba(239, 68, 68, 0.15)",
249
- border: "rgba(239, 68, 68, 0.3)",
250
- text: "#EF4444",
251
- icon: "#EF4444"
252
- },
253
- rose: {
254
- background: "rgba(244, 63, 94, 0.15)",
255
- border: "rgba(244, 63, 94, 0.3)",
256
- text: "#F43F5E",
257
- icon: "#F43F5E"
258
- },
220
+ red: defineColor("#EF4444", "#B91C1C", "#FCA5A5"),
221
+ rose: defineColor("#F43F5E", "#BE123C", "#FDA4AF"),
259
222
  // Yellow/Orange tones (Warning, Pending)
260
- yellow: {
261
- background: "rgba(234, 179, 8, 0.15)",
262
- border: "rgba(234, 179, 8, 0.3)",
263
- text: "#EAB308",
264
- icon: "#EAB308"
265
- },
266
- amber: {
267
- background: "rgba(245, 158, 11, 0.15)",
268
- border: "rgba(245, 158, 11, 0.3)",
269
- text: "#F59E0B",
270
- icon: "#F59E0B"
271
- },
272
- orange: {
273
- background: "rgba(249, 115, 22, 0.15)",
274
- border: "rgba(249, 115, 22, 0.3)",
275
- text: "#F97316",
276
- icon: "#F97316"
277
- },
223
+ yellow: defineColor("#EAB308", "#A16207", "#FDE047"),
224
+ amber: defineColor("#F59E0B", "#B45309", "#FCD34D"),
225
+ orange: defineColor("#F97316", "#C2410C", "#FDBA74"),
278
226
  // Purple tones (Special, Featured)
279
- purple: {
280
- background: "rgba(168, 85, 247, 0.15)",
281
- border: "rgba(168, 85, 247, 0.3)",
282
- text: "#A855F7",
283
- icon: "#A855F7"
284
- },
285
- violet: {
286
- background: "rgba(139, 92, 246, 0.15)",
287
- border: "rgba(139, 92, 246, 0.3)",
288
- text: "#8B5CF6",
289
- icon: "#8B5CF6"
290
- },
291
- fuchsia: {
292
- background: "rgba(217, 70, 239, 0.15)",
293
- border: "rgba(217, 70, 239, 0.3)",
294
- text: "#D946EF",
295
- icon: "#D946EF"
296
- },
227
+ purple: defineColor("#A855F7", "#7E22CE", "#D8B4FE"),
228
+ violet: defineColor("#8B5CF6", "#6D28D9", "#C4B5FD"),
229
+ fuchsia: defineColor("#D946EF", "#A21CAF", "#F0ABFC"),
297
230
  // Pink tones (Accent)
298
- pink: {
299
- background: "rgba(236, 72, 153, 0.15)",
300
- border: "rgba(236, 72, 153, 0.3)",
301
- text: "#EC4899",
302
- icon: "#EC4899"
303
- },
231
+ pink: defineColor("#EC4899", "#BE185D", "#F9A8D4"),
304
232
  // Cyan (Alternative Info)
305
- cyan: {
306
- background: "rgba(6, 182, 212, 0.15)",
307
- border: "rgba(6, 182, 212, 0.3)",
308
- text: "#06B6D4",
309
- icon: "#06B6D4"
310
- },
233
+ cyan: defineColor("#06B6D4", "#0E7490", "#67E8F9"),
311
234
  // Lime (Alternative Success)
312
- lime: {
313
- background: "rgba(132, 204, 22, 0.15)",
314
- border: "rgba(132, 204, 22, 0.3)",
315
- text: "#84CC16",
316
- icon: "#84CC16"
317
- }
235
+ lime: defineColor("#84CC16", "#4D7C0F", "#BEF264")
318
236
  };
319
237
  var getColor = (id) => {
320
238
  return COLORS[id];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stndrds/constants",
3
- "version": "1.0.0-alpha.213",
3
+ "version": "1.0.0-alpha.214",
4
4
  "description": "Currency and country data with ISO codes",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",