@mastorscdn/core 1.0.1 → 1.0.3

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.
@@ -1,40 +1,292 @@
1
1
  // =============================================================================
2
2
  // Mastors-Core | Tokens: Colors
3
- // Complete color palette — primitive + extended
3
+ // Complete color palette — primitive, extended, semantic, chart & overlay
4
4
  // =============================================================================
5
5
 
6
6
  $mastors-colors: (
7
- // --- Brand ---
7
+
8
+ // ── Brand — primary (blue) ──────────────────────────────────────────────
9
+ 'primary-50': #eff6ff,
10
+ 'primary-100': #dbeafe,
11
+ 'primary-200': #bfdbfe,
12
+ 'primary-300': #93c5fd,
13
+ 'primary-400': #60a5fa,
8
14
  'primary': #2563eb,
15
+ 'primary-500': #2563eb,
16
+ 'primary-600': #2563eb,
9
17
  'primary-light': #60a5fa,
10
18
  'primary-dark': #1d4ed8,
19
+ 'primary-700': #1d4ed8,
20
+ 'primary-800': #1e40af,
21
+ 'primary-900': #1e3a8a,
22
+ 'primary-950': #172554,
11
23
 
24
+ // ── Brand — secondary (violet) ──────────────────────────────────────────
25
+ 'secondary-50': #f5f3ff,
26
+ 'secondary-100': #ede9fe,
27
+ 'secondary-200': #ddd6fe,
28
+ 'secondary-300': #c4b5fd,
29
+ 'secondary-400': #a78bfa,
12
30
  'secondary': #7c3aed,
31
+ 'secondary-500': #7c3aed,
32
+ 'secondary-600': #7c3aed,
13
33
  'secondary-light': #a78bfa,
14
34
  'secondary-dark': #5b21b6,
35
+ 'secondary-700': #5b21b6,
36
+ 'secondary-800': #4c1d95,
37
+ 'secondary-900': #3b0764,
38
+ 'secondary-950': #2e1065,
15
39
 
40
+ // ── Brand — accent (sky) ────────────────────────────────────────────────
41
+ 'accent-50': #f0f9ff,
42
+ 'accent-100': #e0f2fe,
43
+ 'accent-200': #bae6fd,
44
+ 'accent-300': #7dd3fc,
45
+ 'accent-400': #38bdf8,
16
46
  'accent': #0ea5e9,
47
+ 'accent-500': #0ea5e9,
48
+ 'accent-600': #0ea5e9,
17
49
  'accent-light': #38bdf8,
18
50
  'accent-dark': #0284c7,
51
+ 'accent-700': #0284c7,
52
+ 'accent-800': #075985,
53
+ 'accent-900': #0c4a6e,
54
+ 'accent-950': #082f49,
19
55
 
20
- // --- Status ---
56
+ // ── Status — success (green) ─────────────────────────────────────────────
57
+ 'success-50': #f0fdf4,
58
+ 'success-100': #dcfce7,
59
+ 'success-200': #bbf7d0,
60
+ 'success-300': #86efac,
61
+ 'success-400': #4ade80,
21
62
  'success': #16a34a,
63
+ 'success-500': #22c55e,
22
64
  'success-light': #4ade80,
23
65
  'success-dark': #15803d,
66
+ 'success-600': #16a34a,
67
+ 'success-700': #15803d,
68
+ 'success-800': #166534,
69
+ 'success-900': #14532d,
70
+ 'success-950': #052e16,
24
71
 
72
+ // ── Status — warning (amber) ─────────────────────────────────────────────
73
+ 'warning-50': #fffbeb,
74
+ 'warning-100': #fef3c7,
75
+ 'warning-200': #fde68a,
76
+ 'warning-300': #fcd34d,
77
+ 'warning-400': #fbbf24,
25
78
  'warning': #d97706,
79
+ 'warning-500': #f59e0b,
26
80
  'warning-light': #fbbf24,
27
81
  'warning-dark': #b45309,
82
+ 'warning-600': #d97706,
83
+ 'warning-700': #b45309,
84
+ 'warning-800': #92400e,
85
+ 'warning-900': #78350f,
86
+ 'warning-950': #451a03,
28
87
 
88
+ // ── Status — danger (red) ────────────────────────────────────────────────
89
+ 'danger-50': #fef2f2,
90
+ 'danger-100': #fee2e2,
91
+ 'danger-200': #fecaca,
92
+ 'danger-300': #fca5a5,
93
+ 'danger-400': #f87171,
29
94
  'danger': #dc2626,
95
+ 'danger-500': #ef4444,
30
96
  'danger-light': #f87171,
31
97
  'danger-dark': #b91c1c,
98
+ 'danger-600': #dc2626,
99
+ 'danger-700': #b91c1c,
100
+ 'danger-800': #991b1b,
101
+ 'danger-900': #7f1d1d,
102
+ 'danger-950': #450a0a,
32
103
 
104
+ // ── Status — info (cyan) ─────────────────────────────────────────────────
105
+ 'info-50': #ecfeff,
106
+ 'info-100': #cffafe,
107
+ 'info-200': #a5f3fc,
108
+ 'info-300': #67e8f9,
109
+ 'info-400': #22d3ee,
33
110
  'info': #0891b2,
111
+ 'info-500': #06b6d4,
34
112
  'info-light': #22d3ee,
35
113
  'info-dark': #0e7490,
114
+ 'info-600': #0891b2,
115
+ 'info-700': #0e7490,
116
+ 'info-800': #155e75,
117
+ 'info-900': #164e63,
118
+ 'info-950': #083344,
119
+
120
+ // ── Extended palette — rose ──────────────────────────────────────────────
121
+ 'rose-50': #fff1f2,
122
+ 'rose-100': #ffe4e6,
123
+ 'rose-200': #fecdd3,
124
+ 'rose-300': #fda4af,
125
+ 'rose-400': #fb7185,
126
+ 'rose-500': #f43f5e,
127
+ 'rose-600': #e11d48,
128
+ 'rose-700': #be123c,
129
+ 'rose-800': #9f1239,
130
+ 'rose-900': #881337,
131
+ 'rose-950': #4c0519,
132
+
133
+ // ── Extended palette — pink ──────────────────────────────────────────────
134
+ 'pink-50': #fdf2f8,
135
+ 'pink-100': #fce7f3,
136
+ 'pink-200': #fbcfe8,
137
+ 'pink-300': #f9a8d4,
138
+ 'pink-400': #f472b6,
139
+ 'pink-500': #ec4899,
140
+ 'pink-600': #db2777,
141
+ 'pink-700': #be185d,
142
+ 'pink-800': #9d174d,
143
+ 'pink-900': #831843,
144
+ 'pink-950': #500724,
145
+
146
+ // ── Extended palette — fuchsia ───────────────────────────────────────────
147
+ 'fuchsia-50': #fdf4ff,
148
+ 'fuchsia-100': #fae8ff,
149
+ 'fuchsia-200': #f5d0fe,
150
+ 'fuchsia-300': #f0abfc,
151
+ 'fuchsia-400': #e879f9,
152
+ 'fuchsia-500': #d946ef,
153
+ 'fuchsia-600': #c026d3,
154
+ 'fuchsia-700': #a21caf,
155
+ 'fuchsia-800': #86198f,
156
+ 'fuchsia-900': #701a75,
157
+ 'fuchsia-950': #4a044e,
158
+
159
+ // ── Extended palette — purple ────────────────────────────────────────────
160
+ 'purple-50': #faf5ff,
161
+ 'purple-100': #f3e8ff,
162
+ 'purple-200': #e9d5ff,
163
+ 'purple-300': #d8b4fe,
164
+ 'purple-400': #c084fc,
165
+ 'purple-500': #a855f7,
166
+ 'purple-600': #9333ea,
167
+ 'purple-700': #7e22ce,
168
+ 'purple-800': #6b21a8,
169
+ 'purple-900': #581c87,
170
+ 'purple-950': #3b0764,
171
+
172
+ // ── Extended palette — indigo ────────────────────────────────────────────
173
+ 'indigo-50': #eef2ff,
174
+ 'indigo-100': #e0e7ff,
175
+ 'indigo-200': #c7d2fe,
176
+ 'indigo-300': #a5b4fc,
177
+ 'indigo-400': #818cf8,
178
+ 'indigo-500': #6366f1,
179
+ 'indigo-600': #4f46e5,
180
+ 'indigo-700': #4338ca,
181
+ 'indigo-800': #3730a3,
182
+ 'indigo-900': #312e81,
183
+ 'indigo-950': #1e1b4b,
184
+
185
+ // ── Extended palette — teal ──────────────────────────────────────────────
186
+ 'teal-50': #f0fdfa,
187
+ 'teal-100': #ccfbf1,
188
+ 'teal-200': #99f6e4,
189
+ 'teal-300': #5eead4,
190
+ 'teal-400': #2dd4bf,
191
+ 'teal-500': #14b8a6,
192
+ 'teal-600': #0d9488,
193
+ 'teal-700': #0f766e,
194
+ 'teal-800': #115e59,
195
+ 'teal-900': #134e4a,
196
+ 'teal-950': #042f2e,
197
+
198
+ // ── Extended palette — emerald ───────────────────────────────────────────
199
+ 'emerald-50': #ecfdf5,
200
+ 'emerald-100': #d1fae5,
201
+ 'emerald-200': #a7f3d0,
202
+ 'emerald-300': #6ee7b7,
203
+ 'emerald-400': #34d399,
204
+ 'emerald-500': #10b981,
205
+ 'emerald-600': #059669,
206
+ 'emerald-700': #047857,
207
+ 'emerald-800': #065f46,
208
+ 'emerald-900': #064e3b,
209
+ 'emerald-950': #022c22,
210
+
211
+ // ── Extended palette — lime ──────────────────────────────────────────────
212
+ 'lime-50': #f7fee7,
213
+ 'lime-100': #ecfccb,
214
+ 'lime-200': #d9f99d,
215
+ 'lime-300': #bef264,
216
+ 'lime-400': #a3e635,
217
+ 'lime-500': #84cc16,
218
+ 'lime-600': #65a30d,
219
+ 'lime-700': #4d7c0f,
220
+ 'lime-800': #3f6212,
221
+ 'lime-900': #365314,
222
+ 'lime-950': #1a2e05,
223
+
224
+ // ── Extended palette — yellow ────────────────────────────────────────────
225
+ 'yellow-50': #fefce8,
226
+ 'yellow-100': #fef9c3,
227
+ 'yellow-200': #fef08a,
228
+ 'yellow-300': #fde047,
229
+ 'yellow-400': #facc15,
230
+ 'yellow-500': #eab308,
231
+ 'yellow-600': #ca8a04,
232
+ 'yellow-700': #a16207,
233
+ 'yellow-800': #854d0e,
234
+ 'yellow-900': #713f12,
235
+ 'yellow-950': #422006,
236
+
237
+ // ── Extended palette — orange ────────────────────────────────────────────
238
+ 'orange-50': #fff7ed,
239
+ 'orange-100': #ffedd5,
240
+ 'orange-200': #fed7aa,
241
+ 'orange-300': #fdba74,
242
+ 'orange-400': #fb923c,
243
+ 'orange-500': #f97316,
244
+ 'orange-600': #ea580c,
245
+ 'orange-700': #c2410c,
246
+ 'orange-800': #9a3412,
247
+ 'orange-900': #7c2d12,
248
+ 'orange-950': #431407,
249
+
250
+ // ── Extended palette — stone (warm neutral) ──────────────────────────────
251
+ 'stone-50': #fafaf9,
252
+ 'stone-100': #f5f5f4,
253
+ 'stone-200': #e7e5e4,
254
+ 'stone-300': #d6d3d1,
255
+ 'stone-400': #a8a29e,
256
+ 'stone-500': #78716c,
257
+ 'stone-600': #57534e,
258
+ 'stone-700': #44403c,
259
+ 'stone-800': #292524,
260
+ 'stone-900': #1c1917,
261
+ 'stone-950': #0c0a09,
36
262
 
37
- // --- Neutrals ---
263
+ // ── Extended palette — zinc (cool neutral) ───────────────────────────────
264
+ 'zinc-50': #fafafa,
265
+ 'zinc-100': #f4f4f5,
266
+ 'zinc-200': #e4e4e7,
267
+ 'zinc-300': #d4d4d8,
268
+ 'zinc-400': #a1a1aa,
269
+ 'zinc-500': #71717a,
270
+ 'zinc-600': #52525b,
271
+ 'zinc-700': #3f3f46,
272
+ 'zinc-800': #27272a,
273
+ 'zinc-900': #18181b,
274
+ 'zinc-950': #09090b,
275
+
276
+ // ── Extended palette — slate ─────────────────────────────────────────────
277
+ 'slate-50': #f8fafc,
278
+ 'slate-100': #f1f5f9,
279
+ 'slate-200': #e2e8f0,
280
+ 'slate-300': #cbd5e1,
281
+ 'slate-400': #94a3b8,
282
+ 'slate-500': #64748b,
283
+ 'slate-600': #475569,
284
+ 'slate-700': #334155,
285
+ 'slate-800': #1e293b,
286
+ 'slate-900': #0f172a,
287
+ 'slate-950': #020617,
288
+
289
+ // ── Neutrals (original, kept for compatibility) ──────────────────────────
38
290
  'white': #ffffff,
39
291
  'black': #000000,
40
292
 
@@ -50,34 +302,100 @@ $mastors-colors: (
50
302
  'neutral-900': #111827,
51
303
  'neutral-950': #030712,
52
304
 
53
- // --- Surface ---
305
+ // ── Surface ──────────────────────────────────────────────────────────────
54
306
  'surface': #ffffff,
55
307
  'surface-raised': #f9fafb,
56
308
  'surface-overlay': #f3f4f6,
57
309
  'surface-sunken': #e5e7eb,
58
310
 
59
- // --- Transparent ---
311
+ // ── Dark surface (for dark-mode theming) ─────────────────────────────────
312
+ 'surface-dark': #18181b,
313
+ 'surface-dark-raised': #27272a,
314
+ 'surface-dark-overlay': #3f3f46,
315
+ 'surface-dark-sunken': #09090b,
316
+
317
+ // ── Overlay / scrim ──────────────────────────────────────────────────────
318
+ 'scrim-light': rgba(0, 0, 0, 0.30),
319
+ 'scrim-dark': rgba(0, 0, 0, 0.60),
320
+ 'scrim-heavy': rgba(0, 0, 0, 0.80),
321
+
322
+ // ── Chart palette (data visualisation) ───────────────────────────────────
323
+ 'chart-1': #2563eb,
324
+ 'chart-2': #7c3aed,
325
+ 'chart-3': #0ea5e9,
326
+ 'chart-4': #10b981,
327
+ 'chart-5': #f59e0b,
328
+ 'chart-6': #ef4444,
329
+ 'chart-7': #ec4899,
330
+ 'chart-8': #14b8a6,
331
+ 'chart-9': #84cc16,
332
+ 'chart-10': #6366f1,
333
+
334
+ // ── Transparent ──────────────────────────────────────────────────────────
60
335
  'transparent': transparent,
336
+
61
337
  ) !default;
62
338
 
63
339
  // --- Semantic Color Map ---
64
340
  $mastors-semantic: (
65
- 'text-primary': #111827,
66
- 'text-secondary': #374151,
67
- 'text-muted': #6b7280,
68
- 'text-disabled': #9ca3af,
69
- 'text-inverse': #ffffff,
70
-
71
- 'bg-body': #ffffff,
72
- 'bg-subtle': #f9fafb,
73
- 'bg-muted': #f3f4f6,
74
- 'bg-inverse': #111827,
75
-
76
- 'border-default': #e5e7eb,
77
- 'border-strong': #d1d5db,
78
- 'border-focus': #2563eb,
79
-
80
- 'link': #2563eb,
81
- 'link-hover': #1d4ed8,
82
- 'link-visited': #7c3aed,
341
+
342
+ // ── Text ─────────────────────────────────────────────────────────────────
343
+ 'text-primary': #111827,
344
+ 'text-secondary': #374151,
345
+ 'text-muted': #6b7280,
346
+ 'text-disabled': #9ca3af,
347
+ 'text-placeholder': #9ca3af,
348
+ 'text-inverse': #ffffff,
349
+ 'text-on-primary': #ffffff,
350
+ 'text-on-secondary': #ffffff,
351
+ 'text-on-accent': #ffffff,
352
+ 'text-on-success': #ffffff,
353
+ 'text-on-warning': #1c1917,
354
+ 'text-on-danger': #ffffff,
355
+ 'text-on-info': #ffffff,
356
+ 'text-code': #6366f1,
357
+ 'text-heading': #030712,
358
+
359
+ // ── Background ───────────────────────────────────────────────────────────
360
+ 'bg-body': #ffffff,
361
+ 'bg-subtle': #f9fafb,
362
+ 'bg-muted': #f3f4f6,
363
+ 'bg-inverse': #111827,
364
+ 'bg-primary': #2563eb,
365
+ 'bg-primary-subtle': #eff6ff,
366
+ 'bg-secondary': #7c3aed,
367
+ 'bg-secondary-subtle': #f5f3ff,
368
+ 'bg-success': #16a34a,
369
+ 'bg-success-subtle': #f0fdf4,
370
+ 'bg-warning': #d97706,
371
+ 'bg-warning-subtle': #fffbeb,
372
+ 'bg-danger': #dc2626,
373
+ 'bg-danger-subtle': #fef2f2,
374
+ 'bg-info': #0891b2,
375
+ 'bg-info-subtle': #ecfeff,
376
+
377
+ // ── Border ───────────────────────────────────────────────────────────────
378
+ 'border-default': #e5e7eb,
379
+ 'border-strong': #d1d5db,
380
+ 'border-subtle': #f3f4f6,
381
+ 'border-focus': #2563eb,
382
+ 'border-primary': #2563eb,
383
+ 'border-success': #16a34a,
384
+ 'border-warning': #d97706,
385
+ 'border-danger': #dc2626,
386
+ 'border-info': #0891b2,
387
+
388
+ // ── Link ─────────────────────────────────────────────────────────────────
389
+ 'link': #2563eb,
390
+ 'link-hover': #1d4ed8,
391
+ 'link-visited': #7c3aed,
392
+ 'link-active': #1e40af,
393
+
394
+ // ── Interactive ──────────────────────────────────────────────────────────
395
+ 'ring-focus': rgba(37, 99, 235, 0.40),
396
+ 'ring-danger': rgba(220, 38, 38, 0.40),
397
+ 'ring-success': rgba(22, 163, 74, 0.40),
398
+ 'overlay-light': rgba(255, 255, 255, 0.08),
399
+ 'overlay-dark': rgba(0, 0, 0, 0.08),
400
+
83
401
  ) !default;
@@ -23,13 +23,13 @@
23
23
  .border-none { border-style: none !important; }
24
24
 
25
25
  // Shorthand
26
- .border { border: 1px solid var(--mastors-border-default) !important; }
27
- .border-t { border-top: 1px solid var(--mastors-border-default) !important; }
28
- .border-r { border-right: 1px solid var(--mastors-border-default) !important; }
29
- .border-b { border-bottom: 1px solid var(--mastors-border-default) !important; }
30
- .border-l { border-left: 1px solid var(--mastors-border-default) !important; }
26
+ .border { border: 1px solid var(--#{cfg.$mastors-prefix}-border-default) !important; }
27
+ .border-t { border-top: 1px solid var(--#{cfg.$mastors-prefix}-border-default) !important; }
28
+ .border-r { border-right: 1px solid var(--#{cfg.$mastors-prefix}-border-default) !important; }
29
+ .border-b { border-bottom: 1px solid var(--#{cfg.$mastors-prefix}-border-default) !important; }
30
+ .border-l { border-left: 1px solid var(--#{cfg.$mastors-prefix}-border-default) !important; }
31
31
 
32
32
  // Outline
33
33
  .outline-none { outline: none !important; }
34
- .outline { outline: 2px solid var(--mastors-border-focus) !important; }
34
+ .outline { outline: 2px solid var(--#{cfg.$mastors-prefix}-border-focus) !important; }
35
35
  }