@mastorscdn/core 1.0.2 → 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.
- package/README.md +10 -10
- package/dist/mastors-core.css +3678 -156
- package/dist/mastors-core.css.map +1 -1
- package/dist/mastors-core.min.css +1 -1
- package/package.json +1 -1
- package/scss/config/_settings.scss +218 -22
- package/scss/tokens/_colors.scss +342 -24
|
@@ -1,29 +1,225 @@
|
|
|
1
1
|
// =============================================================================
|
|
2
2
|
// Mastors-Core | Config: Settings
|
|
3
|
-
// Global feature flags and
|
|
4
|
-
//
|
|
5
|
-
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
3
|
+
// Global feature flags, configuration switches, and brand token overrides.
|
|
4
|
+
//
|
|
5
|
+
// All variables are marked !default so a consumer can override any of them
|
|
6
|
+
// via @use '@mastorscdn/core' with ( $variable: value ).
|
|
7
|
+
//
|
|
8
|
+
// mc.config.js / mc.config.ts equivalent:
|
|
9
|
+
// Copy the relevant @use block into your bundler's preprocessorOptions.
|
|
10
|
+
// Full reference: https://mastorscdn.kehem.com/config
|
|
11
|
+
// =============================================================================
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
// =============================================================================
|
|
15
|
+
// 1. FEATURE FLAGS
|
|
16
|
+
// Toggle entire subsystems on or off. Disabling a flag completely removes
|
|
17
|
+
// that subsystem's CSS output from the compiled bundle.
|
|
18
|
+
// =============================================================================
|
|
19
|
+
|
|
20
|
+
// --- Theme subsystems ---
|
|
21
|
+
$enable-dark-theme: true !default; // [data-theme="dark"] overrides
|
|
22
|
+
$enable-light-theme: true !default; // [data-theme="light"] overrides
|
|
23
|
+
$enable-custom-themes: false !default; // Custom theme registry support
|
|
24
|
+
|
|
25
|
+
// --- CSS output ---
|
|
26
|
+
$enable-css-variables: true !default; // Emit all tokens as CSS custom properties
|
|
27
|
+
$enable-utilities: true !default; // Utility class generators
|
|
28
|
+
$enable-reset: true !default; // Modern CSS reset
|
|
29
|
+
$enable-base: true !default; // Base element defaults
|
|
30
|
+
$enable-accessibility: true !default; // A11y helpers (skip link, sr-only, etc.)
|
|
31
|
+
$enable-print-styles: false !default; // @media print stylesheet
|
|
32
|
+
|
|
33
|
+
// --- Motion & interaction ---
|
|
34
|
+
$enable-reduced-motion: true !default; // prefers-reduced-motion: reduce overrides
|
|
35
|
+
$enable-smooth-scroll: true !default; // html { scroll-behavior: smooth }
|
|
36
|
+
$enable-focus-visible: true !default; // :focus-visible ring system
|
|
37
|
+
$enable-hover-effects: true !default; // hover/active transform utilities
|
|
38
|
+
$enable-transitions: true !default; // Transition utilities
|
|
39
|
+
$enable-animations: true !default; // Keyframe animation helpers (pulse, spin, etc.)
|
|
40
|
+
|
|
41
|
+
// --- Component helpers ---
|
|
42
|
+
$enable-container: true !default; // .mastors-container & .mastors-container-fluid
|
|
43
|
+
$enable-skeleton: true !default; // .mastors-skeleton shimmer
|
|
44
|
+
$enable-glassmorphism: false !default; // Include glassmorphism utility classes
|
|
45
|
+
$enable-neumorphism: false !default; // Include neumorphism utility classes
|
|
46
|
+
|
|
47
|
+
// --- Extended color palette ---
|
|
48
|
+
$enable-extended-palette: true !default; // rose, pink, teal, emerald, indigo… scales
|
|
49
|
+
$enable-chart-colors: true !default; // chart-1…chart-10 data-vis palette
|
|
50
|
+
$enable-dark-surfaces: true !default; // surface-dark-* tokens
|
|
51
|
+
$enable-scrim-colors: true !default; // scrim-light / scrim-dark / scrim-heavy
|
|
52
|
+
|
|
53
|
+
// --- Utility granularity ---
|
|
54
|
+
$enable-negative-spacing: false !default; // Negative margin utilities (-m-4, etc.)
|
|
55
|
+
$enable-arbitrary-values: false !default; // Reserved for future arbitrary-value support
|
|
56
|
+
$enable-important: true !default; // Add !important to utility classes
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
// =============================================================================
|
|
60
|
+
// 2. BRAND TOKEN OVERRIDES
|
|
61
|
+
// Override the default brand colors without touching token files.
|
|
62
|
+
// These cascade into $mastors-colors and all CSS variable output automatically.
|
|
63
|
+
//
|
|
64
|
+
// Example (Tailwind-style config equivalent):
|
|
65
|
+
// @use '@mastorscdn/core' with (
|
|
66
|
+
// $brand-primary: #0f4c75,
|
|
67
|
+
// $brand-secondary: #1b4332,
|
|
68
|
+
// );
|
|
69
|
+
// =============================================================================
|
|
70
|
+
|
|
71
|
+
// --- Primary brand color (maps to 'primary' token) ---
|
|
72
|
+
$brand-primary: null !default; // e.g. #0f4c75 — overrides color('primary')
|
|
73
|
+
$brand-primary-light: null !default; // e.g. #3a7ca5 — overrides color('primary-light')
|
|
74
|
+
$brand-primary-dark: null !default; // e.g. #093a5c — overrides color('primary-dark')
|
|
75
|
+
|
|
76
|
+
// --- Secondary brand color ---
|
|
77
|
+
$brand-secondary: null !default; // e.g. #1b4332
|
|
78
|
+
$brand-secondary-light: null !default;
|
|
79
|
+
$brand-secondary-dark: null !default;
|
|
80
|
+
|
|
81
|
+
// --- Accent color ---
|
|
82
|
+
$brand-accent: null !default; // e.g. #f97316
|
|
83
|
+
$brand-accent-light: null !default;
|
|
84
|
+
$brand-accent-dark: null !default;
|
|
85
|
+
|
|
86
|
+
// --- Status color overrides ---
|
|
87
|
+
$brand-success: null !default; // Override success green
|
|
88
|
+
$brand-warning: null !default; // Override warning amber
|
|
89
|
+
$brand-danger: null !default; // Override danger red
|
|
90
|
+
$brand-info: null !default; // Override info cyan
|
|
91
|
+
|
|
92
|
+
// --- Surface / background overrides ---
|
|
93
|
+
$brand-surface: null !default; // e.g. #fafafa
|
|
94
|
+
$brand-surface-raised: null !default;
|
|
95
|
+
$brand-bg-body: null !default; // e.g. #ffffff or #0a0a0a for dark-first
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
// =============================================================================
|
|
99
|
+
// 3. TYPOGRAPHY
|
|
100
|
+
// Global font-family, size, line-height, and weight configuration.
|
|
101
|
+
// =============================================================================
|
|
102
|
+
|
|
103
|
+
$font-family-sans: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) !default;
|
|
104
|
+
$font-family-serif: (Georgia, Cambria, 'Times New Roman', Times, serif) !default;
|
|
105
|
+
$font-family-mono: ('JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace) !default;
|
|
106
|
+
$font-family-base: $font-family-sans !default;
|
|
107
|
+
$font-family-heading: $font-family-sans !default;
|
|
108
|
+
|
|
109
|
+
$font-size-base: 1rem !default; // 16px
|
|
110
|
+
$font-size-sm: 0.875rem !default; // 14px
|
|
111
|
+
$font-size-lg: 1.125rem !default; // 18px
|
|
112
|
+
|
|
113
|
+
$line-height-base: 1.6 !default;
|
|
114
|
+
$line-height-tight: 1.25 !default;
|
|
115
|
+
$line-height-loose: 2.0 !default;
|
|
116
|
+
$line-height-heading: 1.2 !default;
|
|
117
|
+
|
|
118
|
+
$font-weight-light: 300 !default;
|
|
119
|
+
$font-weight-normal: 400 !default;
|
|
120
|
+
$font-weight-medium: 500 !default;
|
|
121
|
+
$font-weight-semibold: 600 !default;
|
|
122
|
+
$font-weight-bold: 700 !default;
|
|
123
|
+
$font-weight-black: 900 !default;
|
|
124
|
+
|
|
125
|
+
$letter-spacing-tight: -0.025em !default;
|
|
126
|
+
$letter-spacing-normal: 0 !default;
|
|
127
|
+
$letter-spacing-wide: 0.025em !default;
|
|
128
|
+
$letter-spacing-wider: 0.05em !default;
|
|
129
|
+
$letter-spacing-widest: 0.1em !default;
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
// =============================================================================
|
|
133
|
+
// 4. SPACING & LAYOUT
|
|
134
|
+
// Base unit used by spacing scale generators. Change $spacing-unit to
|
|
135
|
+
// rebase the entire spacing system (default 1rem = 16px).
|
|
136
|
+
// =============================================================================
|
|
137
|
+
|
|
138
|
+
$spacing-unit: 1rem !default; // Base spacing unit
|
|
139
|
+
$spacing-scale-max: 96 !default; // Largest step in spacing scale (96 = 24rem)
|
|
140
|
+
|
|
141
|
+
$container-padding-x: 1rem !default; // Horizontal padding for .mastors-container
|
|
142
|
+
$container-center: true !default; // Auto-center containers with margin: auto
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
// =============================================================================
|
|
146
|
+
// 5. BORDER & RADIUS DEFAULTS
|
|
147
|
+
// =============================================================================
|
|
148
|
+
|
|
149
|
+
$border-width-default: 1px !default; // Default border width
|
|
150
|
+
$border-style-default: solid !default; // Default border style
|
|
151
|
+
$border-color-default: null !default; // null = use semantic('border-default')
|
|
152
|
+
|
|
153
|
+
$border-radius-default: null !default; // null = use radius('md') = 8px
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
// =============================================================================
|
|
157
|
+
// 6. SHADOW DEFAULTS
|
|
158
|
+
// =============================================================================
|
|
159
|
+
|
|
160
|
+
$shadow-default: null !default; // null = use shadow('md')
|
|
161
|
+
$shadow-color-default: rgba(0,0,0,0.10) !default;
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
// =============================================================================
|
|
165
|
+
// 7. FOCUS RING
|
|
166
|
+
// Customise the global :focus-visible ring appearance.
|
|
167
|
+
// =============================================================================
|
|
168
|
+
|
|
169
|
+
$focus-ring-color: null !default; // null = brand-primary / color('primary')
|
|
170
|
+
$focus-ring-width: 3px !default;
|
|
171
|
+
$focus-ring-offset: 2px !default;
|
|
172
|
+
$focus-ring-style: solid !default;
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
// =============================================================================
|
|
176
|
+
// 8. Z-INDEX OVERRIDES
|
|
177
|
+
// Override individual layers in the z-index stack.
|
|
178
|
+
// =============================================================================
|
|
179
|
+
|
|
180
|
+
$z-dropdown: null !default; // null = token default (100)
|
|
181
|
+
$z-sticky: null !default; // null = token default (200)
|
|
182
|
+
$z-fixed: null !default; // null = token default (300)
|
|
183
|
+
$z-modal: null !default; // null = token default (500)
|
|
184
|
+
$z-tooltip: null !default; // null = token default (700)
|
|
185
|
+
$z-toast: null !default; // null = token default (800)
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
// =============================================================================
|
|
189
|
+
// 9. BREAKPOINT OVERRIDES
|
|
190
|
+
// Override individual breakpoint values.
|
|
191
|
+
// null = use token default from tokens/_breakpoints.scss
|
|
192
|
+
// =============================================================================
|
|
193
|
+
|
|
194
|
+
$bp-sm: null !default; // default 576px
|
|
195
|
+
$bp-md: null !default; // default 768px
|
|
196
|
+
$bp-lg: null !default; // default 992px
|
|
197
|
+
$bp-xl: null !default; // default 1200px
|
|
198
|
+
$bp-2xl: null !default; // default 1400px
|
|
199
|
+
$bp-3xl: null !default; // default 1600px
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
// =============================================================================
|
|
203
|
+
// 10. MOTION OVERRIDES
|
|
204
|
+
// =============================================================================
|
|
205
|
+
|
|
206
|
+
$duration-normal: null !default; // null = token default (200ms)
|
|
207
|
+
$easing-default: null !default; // null = token default (ease-in-out)
|
|
208
|
+
$transition-default: null !default; // null = token default (colors)
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
// =============================================================================
|
|
212
|
+
// 11. GLOBAL IDENTIFIERS
|
|
213
|
+
// =============================================================================
|
|
214
|
+
|
|
215
|
+
// CSS custom property prefix: --{prefix}-color-primary etc.
|
|
20
216
|
$mastors-prefix: 'mastors' !default;
|
|
21
217
|
|
|
22
|
-
//
|
|
23
|
-
$mastors-root-selector: ':root'
|
|
218
|
+
// Root selector where CSS variables are emitted
|
|
219
|
+
$mastors-root-selector: ':root' !default;
|
|
24
220
|
|
|
25
|
-
//
|
|
221
|
+
// HTML attribute used for theme switching
|
|
26
222
|
$mastors-theme-attr: 'data-theme' !default;
|
|
27
223
|
|
|
28
|
-
//
|
|
29
|
-
$mastors-debug: false
|
|
224
|
+
// Debug mode: adds data-mastors-debug attributes and outlines
|
|
225
|
+
$mastors-debug: false !default;
|
package/scss/tokens/_colors.scss
CHANGED
|
@@ -1,40 +1,292 @@
|
|
|
1
1
|
// =============================================================================
|
|
2
2
|
// Mastors-Core | Tokens: Colors
|
|
3
|
-
// Complete color palette — primitive
|
|
3
|
+
// Complete color palette — primitive, extended, semantic, chart & overlay
|
|
4
4
|
// =============================================================================
|
|
5
5
|
|
|
6
6
|
$mastors-colors: (
|
|
7
|
-
|
|
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
|
-
//
|
|
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
|
-
//
|
|
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
|
-
//
|
|
305
|
+
// ── Surface ──────────────────────────────────────────────────────────────
|
|
54
306
|
'surface': #ffffff,
|
|
55
307
|
'surface-raised': #f9fafb,
|
|
56
308
|
'surface-overlay': #f3f4f6,
|
|
57
309
|
'surface-sunken': #e5e7eb,
|
|
58
310
|
|
|
59
|
-
//
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
'text-
|
|
68
|
-
'text-
|
|
69
|
-
'text-
|
|
70
|
-
|
|
71
|
-
'
|
|
72
|
-
'
|
|
73
|
-
'
|
|
74
|
-
'
|
|
75
|
-
|
|
76
|
-
'
|
|
77
|
-
'
|
|
78
|
-
'
|
|
79
|
-
|
|
80
|
-
'
|
|
81
|
-
'
|
|
82
|
-
|
|
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;
|