@bvs-tech/material 0.0.1 → 0.0.2
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/package.json +1 -1
- package/styles/_mixins.scss +131 -0
- package/styles/_tokens.scss +272 -0
- package/styles/styles.scss +3 -0
- package/styles/tokens/_colors.scss +227 -0
- package/styles/tokens/_shadows.scss +47 -0
- package/styles/tokens/_spacing.scss +19 -0
- package/styles/tokens/_typography.scss +33 -0
package/package.json
CHANGED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
@use 'sass:color';
|
|
2
|
+
@use './tokens' as *;
|
|
3
|
+
|
|
4
|
+
// ============================================================
|
|
5
|
+
// MIXINS – BVSTech Design System
|
|
6
|
+
// ============================================================
|
|
7
|
+
|
|
8
|
+
// --- RESPONSIVE MEDIA QUERIES ---
|
|
9
|
+
@mixin respond-to($breakpoint) {
|
|
10
|
+
@if $breakpoint == 'sm' {
|
|
11
|
+
@media (min-width: 640px) { @content; }
|
|
12
|
+
} @else if $breakpoint == 'md' {
|
|
13
|
+
@media (min-width: 768px) { @content; }
|
|
14
|
+
} @else if $breakpoint == 'lg' {
|
|
15
|
+
@media (min-width: 1024px) { @content; }
|
|
16
|
+
} @else if $breakpoint == 'xl' {
|
|
17
|
+
@media (min-width: 1280px) { @content; }
|
|
18
|
+
} @else if $breakpoint == '2xl' {
|
|
19
|
+
@media (min-width: 1536px) { @content; }
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin respond-below($breakpoint) {
|
|
24
|
+
@if $breakpoint == 'sm' {
|
|
25
|
+
@media (max-width: 639px) { @content; }
|
|
26
|
+
} @else if $breakpoint == 'md' {
|
|
27
|
+
@media (max-width: 767px) { @content; }
|
|
28
|
+
} @else if $breakpoint == 'lg' {
|
|
29
|
+
@media (max-width: 1023px) { @content; }
|
|
30
|
+
} @else if $breakpoint == 'xl' {
|
|
31
|
+
@media (max-width: 1279px) { @content; }
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// --- FLEXBOX HELPERS ---
|
|
36
|
+
@mixin flex-center {
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@mixin flex-between {
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@mixin flex-column {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@mixin flex-row {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: row;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// --- TYPOGRAPHY UTILITIES ---
|
|
59
|
+
@mixin text-style($size: $font-size-base, $weight: $font-weight-regular, $line-height: $line-height-normal) {
|
|
60
|
+
font-size: $size;
|
|
61
|
+
font-weight: $weight;
|
|
62
|
+
line-height: $line-height;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin truncate {
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
white-space: nowrap;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@mixin line-clamp($lines: 2) {
|
|
72
|
+
display: -webkit-box;
|
|
73
|
+
-webkit-box-orient: vertical;
|
|
74
|
+
-webkit-line-clamp: $lines;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// --- VISUAL EFFECTS ---
|
|
79
|
+
@mixin elevation($level: 'base') {
|
|
80
|
+
@if $level == 'sm' {
|
|
81
|
+
box-shadow: $shadow-sm;
|
|
82
|
+
} @else if $level == 'base' {
|
|
83
|
+
box-shadow: $shadow-base;
|
|
84
|
+
} @else if $level == 'md' {
|
|
85
|
+
box-shadow: $shadow-md;
|
|
86
|
+
} @else if $level == 'lg' {
|
|
87
|
+
box-shadow: $shadow-lg;
|
|
88
|
+
} @else if $level == 'xl' {
|
|
89
|
+
box-shadow: $shadow-xl;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@mixin focus-ring($color: $color-brand) {
|
|
94
|
+
outline: 2px solid $color;
|
|
95
|
+
outline-offset: 2px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@mixin transition($property: all, $duration: $transition-base) {
|
|
99
|
+
transition: $property $duration;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// --- CUSTOM SCROLLBARS ---
|
|
103
|
+
@mixin custom-scrollbar($size: 6px, $thumb: var(--bvs-color-neutral-300), $track: var(--bvs-color-neutral-100)) {
|
|
104
|
+
&::-webkit-scrollbar {
|
|
105
|
+
width: $size;
|
|
106
|
+
height: $size;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&::-webkit-scrollbar-track {
|
|
110
|
+
background: $track;
|
|
111
|
+
border-radius: $radius-full;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&::-webkit-scrollbar-thumb {
|
|
115
|
+
background: $thumb;
|
|
116
|
+
border-radius: $radius-full;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// --- ACCESSIBILITY (Screen Reader Only) ---
|
|
121
|
+
@mixin sr-only {
|
|
122
|
+
position: absolute;
|
|
123
|
+
width: 1px;
|
|
124
|
+
height: 1px;
|
|
125
|
+
padding: 0;
|
|
126
|
+
margin: -1px;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
clip-path: inset(50%);
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
border-width: 0;
|
|
131
|
+
}
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// DESIGN TOKENS ENTRYPOINT
|
|
3
|
+
// ============================================================
|
|
4
|
+
|
|
5
|
+
@use 'sass:map';
|
|
6
|
+
|
|
7
|
+
@use './tokens/colors' as *;
|
|
8
|
+
@use './tokens/spacing' as *;
|
|
9
|
+
@use './tokens/typography' as *;
|
|
10
|
+
@use './tokens/shadows' as *;
|
|
11
|
+
|
|
12
|
+
// ============================================================
|
|
13
|
+
// CSS VARIABLE INJECTION (Runtime Presets)
|
|
14
|
+
// ============================================================
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
// Primitives
|
|
18
|
+
@each $key, $value in $palette-primary {
|
|
19
|
+
--bvs-color-primary-#{$key}: #{$value};
|
|
20
|
+
}
|
|
21
|
+
@each $key, $value in $palette-secondary {
|
|
22
|
+
--bvs-color-secondary-#{$key}: #{$value};
|
|
23
|
+
}
|
|
24
|
+
@each $key, $value in $palette-neutral {
|
|
25
|
+
--bvs-color-neutral-#{$key}: #{$value};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
--bvs-color-success-light: #{map.get($palette-success, "light")};
|
|
29
|
+
--bvs-color-success: #{map.get($palette-success, "base")};
|
|
30
|
+
--bvs-color-success-dark: #{map.get($palette-success, "dark")};
|
|
31
|
+
|
|
32
|
+
--bvs-color-warning-light: #{map.get($palette-warning, "light")};
|
|
33
|
+
--bvs-color-warning: #{map.get($palette-warning, "base")};
|
|
34
|
+
--bvs-color-warning-dark: #{map.get($palette-warning, "dark")};
|
|
35
|
+
|
|
36
|
+
--bvs-color-error-light: #{map.get($palette-error, "light")};
|
|
37
|
+
--bvs-color-error: #{map.get($palette-error, "base")};
|
|
38
|
+
--bvs-color-error-dark: #{map.get($palette-error, "dark")};
|
|
39
|
+
|
|
40
|
+
--bvs-color-info-light: #{map.get($palette-info, "light")};
|
|
41
|
+
--bvs-color-info: #{map.get($palette-info, "base")};
|
|
42
|
+
--bvs-color-info-dark: #{map.get($palette-info, "dark")};
|
|
43
|
+
|
|
44
|
+
// Spacing (8pt Grid)
|
|
45
|
+
@each $key, $value in $spacing {
|
|
46
|
+
--bvs-space-#{$key}: #{$value};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Typography Sizes
|
|
50
|
+
@each $key, $value in $font-sizes {
|
|
51
|
+
--bvs-font-size-#{$key}: #{$value};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Typography Weights
|
|
55
|
+
@each $key, $value in $font-weights {
|
|
56
|
+
--bvs-font-weight-#{$key}: #{$value};
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Line Heights
|
|
60
|
+
@each $key, $value in $line-heights {
|
|
61
|
+
--bvs-line-height-#{$key}: #{$value};
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Shadows
|
|
65
|
+
@each $key, $value in $shadows {
|
|
66
|
+
--bvs-shadow-#{$key}: #{$value};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Border Radius
|
|
70
|
+
@each $key, $value in $radius {
|
|
71
|
+
--bvs-radius-#{$key}: #{$value};
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// Breakpoints
|
|
75
|
+
@each $key, $value in $breakpoints {
|
|
76
|
+
--bvs-breakpoint-#{$key}: #{$value};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Transitions
|
|
80
|
+
@each $key, $value in $transitions {
|
|
81
|
+
--bvs-transition-#{$key}: #{$value};
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Z-Indices
|
|
85
|
+
@each $key, $value in $z-index {
|
|
86
|
+
--bvs-z-#{$key}: #{$value};
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Default Preset Fallbacks (Light default theme)
|
|
90
|
+
@each $key, $value in $theme-default-light {
|
|
91
|
+
--bvs-color-#{$key}: #{$value};
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// ------------------------------------------------------------
|
|
96
|
+
// Preset theme bindings based on DOM data-attributes
|
|
97
|
+
// ------------------------------------------------------------
|
|
98
|
+
|
|
99
|
+
// 1. Default Brand Theme
|
|
100
|
+
[data-brand="default"] {
|
|
101
|
+
&[data-theme="light"] {
|
|
102
|
+
@each $key, $value in $theme-default-light {
|
|
103
|
+
--bvs-color-#{$key}: #{$value};
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
&[data-theme="dark"] {
|
|
107
|
+
@each $key, $value in $theme-default-dark {
|
|
108
|
+
--bvs-color-#{$key}: #{$value};
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// 2. Emerald Brand Theme
|
|
114
|
+
[data-brand="emerald"] {
|
|
115
|
+
&[data-theme="light"] {
|
|
116
|
+
@each $key, $value in $theme-emerald-light {
|
|
117
|
+
--bvs-color-#{$key}: #{$value};
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
&[data-theme="dark"] {
|
|
121
|
+
@each $key, $value in $theme-emerald-dark {
|
|
122
|
+
--bvs-color-#{$key}: #{$value};
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// 3. Sunset Brand Theme
|
|
128
|
+
[data-brand="sunset"] {
|
|
129
|
+
&[data-theme="light"] {
|
|
130
|
+
@each $key, $value in $theme-sunset-light {
|
|
131
|
+
--bvs-color-#{$key}: #{$value};
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
&[data-theme="dark"] {
|
|
135
|
+
@each $key, $value in $theme-sunset-dark {
|
|
136
|
+
--bvs-color-#{$key}: #{$value};
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// 4. Amethyst Brand Theme
|
|
142
|
+
[data-brand="amethyst"] {
|
|
143
|
+
&[data-theme="light"] {
|
|
144
|
+
@each $key, $value in $theme-amethyst-light {
|
|
145
|
+
--bvs-color-#{$key}: #{$value};
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
&[data-theme="dark"] {
|
|
149
|
+
@each $key, $value in $theme-amethyst-dark {
|
|
150
|
+
--bvs-color-#{$key}: #{$value};
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// 5. Ruby Brand Theme
|
|
156
|
+
[data-brand="ruby"] {
|
|
157
|
+
&[data-theme="light"] {
|
|
158
|
+
@each $key, $value in $theme-ruby-light {
|
|
159
|
+
--bvs-color-#{$key}: #{$value};
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
&[data-theme="dark"] {
|
|
163
|
+
@each $key, $value in $theme-ruby-dark {
|
|
164
|
+
--bvs-color-#{$key}: #{$value};
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// ------------------------------------------------------------
|
|
170
|
+
// SASS Variables Wrapping CSS Custom Properties
|
|
171
|
+
// ------------------------------------------------------------
|
|
172
|
+
|
|
173
|
+
$color-brand: var(--bvs-color-brand);
|
|
174
|
+
$color-brand-hover: var(--bvs-color-brand-hover);
|
|
175
|
+
$color-brand-active: var(--bvs-color-brand-active);
|
|
176
|
+
|
|
177
|
+
$color-surface: var(--bvs-color-surface);
|
|
178
|
+
$color-surface-subtle: var(--bvs-color-surface-subtle);
|
|
179
|
+
$color-surface-muted: var(--bvs-color-surface-muted);
|
|
180
|
+
|
|
181
|
+
$color-text-primary: var(--bvs-color-text-primary);
|
|
182
|
+
$color-text-secondary: var(--bvs-color-text-secondary);
|
|
183
|
+
$color-text-disabled: var(--bvs-color-text-disabled);
|
|
184
|
+
|
|
185
|
+
$color-border: var(--bvs-color-border);
|
|
186
|
+
$color-border-strong: var(--bvs-color-border-strong);
|
|
187
|
+
|
|
188
|
+
// Semantic Alert Colors
|
|
189
|
+
$color-success-light: var(--bvs-color-success-light);
|
|
190
|
+
$color-success: var(--bvs-color-success);
|
|
191
|
+
$color-success-dark: var(--bvs-color-success-dark);
|
|
192
|
+
|
|
193
|
+
$color-warning-light: var(--bvs-color-warning-light);
|
|
194
|
+
$color-warning: var(--bvs-color-warning);
|
|
195
|
+
$color-warning-dark: var(--bvs-color-warning-dark);
|
|
196
|
+
|
|
197
|
+
$color-error-light: var(--bvs-color-error-light);
|
|
198
|
+
$color-error: var(--bvs-color-error);
|
|
199
|
+
$color-error-dark: var(--bvs-color-error-dark);
|
|
200
|
+
|
|
201
|
+
$color-info-light: var(--bvs-color-info-light);
|
|
202
|
+
$color-info: var(--bvs-color-info);
|
|
203
|
+
$color-info-dark: var(--bvs-color-info-dark);
|
|
204
|
+
|
|
205
|
+
// Spacings
|
|
206
|
+
$space-0: var(--bvs-space-0);
|
|
207
|
+
$space-1: var(--bvs-space-1);
|
|
208
|
+
$space-2: var(--bvs-space-2);
|
|
209
|
+
$space-3: var(--bvs-space-3);
|
|
210
|
+
$space-4: var(--bvs-space-4);
|
|
211
|
+
$space-5: var(--bvs-space-5);
|
|
212
|
+
$space-6: var(--bvs-space-6);
|
|
213
|
+
$space-8: var(--bvs-space-8);
|
|
214
|
+
$space-10: var(--bvs-space-10);
|
|
215
|
+
$space-12: var(--bvs-space-12);
|
|
216
|
+
$space-16: var(--bvs-space-16);
|
|
217
|
+
$space-20: var(--bvs-space-20);
|
|
218
|
+
$space-24: var(--bvs-space-24);
|
|
219
|
+
|
|
220
|
+
// Typography
|
|
221
|
+
$font-sans: var(--bvs-font-family-sans);
|
|
222
|
+
$font-mono: var(--bvs-font-family-mono);
|
|
223
|
+
|
|
224
|
+
$font-size-xs: var(--bvs-font-size-xs);
|
|
225
|
+
$font-size-sm: var(--bvs-font-size-sm);
|
|
226
|
+
$font-size-base: var(--bvs-font-size-base);
|
|
227
|
+
$font-size-lg: var(--bvs-font-size-lg);
|
|
228
|
+
$font-size-xl: var(--bvs-font-size-xl);
|
|
229
|
+
$font-size-2xl: var(--bvs-font-size-2xl);
|
|
230
|
+
$font-size-3xl: var(--bvs-font-size-3xl);
|
|
231
|
+
$font-size-4xl: var(--bvs-font-size-4xl);
|
|
232
|
+
|
|
233
|
+
$font-weight-light: var(--bvs-font-weight-light);
|
|
234
|
+
$font-weight-regular: var(--bvs-font-weight-regular);
|
|
235
|
+
$font-weight-medium: var(--bvs-font-weight-medium);
|
|
236
|
+
$font-weight-semibold: var(--bvs-font-weight-semibold);
|
|
237
|
+
$font-weight-bold: var(--bvs-font-weight-bold);
|
|
238
|
+
|
|
239
|
+
$line-height-tight: var(--bvs-line-height-tight);
|
|
240
|
+
$line-height-normal: var(--bvs-line-height-normal);
|
|
241
|
+
$line-height-loose: var(--bvs-line-height-loose);
|
|
242
|
+
|
|
243
|
+
// Shadows & Radius
|
|
244
|
+
$shadow-sm: var(--bvs-shadow-sm);
|
|
245
|
+
$shadow-base: var(--bvs-shadow-base);
|
|
246
|
+
$shadow-md: var(--bvs-shadow-md);
|
|
247
|
+
$shadow-lg: var(--bvs-shadow-lg);
|
|
248
|
+
$shadow-xl: var(--bvs-shadow-xl);
|
|
249
|
+
|
|
250
|
+
$radius-none: var(--bvs-radius-none);
|
|
251
|
+
$radius-sm: var(--bvs-radius-sm);
|
|
252
|
+
$radius-base: var(--bvs-radius-base);
|
|
253
|
+
$radius-md: var(--bvs-radius-md);
|
|
254
|
+
$radius-lg: var(--bvs-radius-lg);
|
|
255
|
+
$radius-xl: var(--bvs-radius-xl);
|
|
256
|
+
$radius-2xl: var(--bvs-radius-2xl);
|
|
257
|
+
$radius-full: var(--bvs-radius-full);
|
|
258
|
+
|
|
259
|
+
// Transitions
|
|
260
|
+
$transition-fast: var(--bvs-transition-fast);
|
|
261
|
+
$transition-base: var(--bvs-transition-base);
|
|
262
|
+
$transition-slow: var(--bvs-transition-slow);
|
|
263
|
+
$transition-slower: var(--bvs-transition-slower);
|
|
264
|
+
|
|
265
|
+
// Z-Indices
|
|
266
|
+
$z-dropdown: var(--bvs-z-dropdown);
|
|
267
|
+
$z-sticky: var(--bvs-z-sticky);
|
|
268
|
+
$z-fixed: var(--bvs-z-fixed);
|
|
269
|
+
$z-modal: var(--bvs-z-modal);
|
|
270
|
+
$z-popover: var(--bvs-z-popover);
|
|
271
|
+
$z-tooltip: var(--bvs-z-tooltip);
|
|
272
|
+
$z-toast: var(--bvs-z-toast);
|
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// PRIMITIVE COLORS
|
|
3
|
+
// ============================================================
|
|
4
|
+
|
|
5
|
+
@use 'sass:map';
|
|
6
|
+
|
|
7
|
+
// Primary Palette (Blues)
|
|
8
|
+
$palette-primary: (
|
|
9
|
+
"50": #eff6ff,
|
|
10
|
+
"100": #dbeafe,
|
|
11
|
+
"200": #bfdbfe,
|
|
12
|
+
"300": #93c5fd,
|
|
13
|
+
"400": #60a5fa,
|
|
14
|
+
"500": #3b82f6,
|
|
15
|
+
"600": #2563eb,
|
|
16
|
+
"700": #1d4ed8,
|
|
17
|
+
"800": #1e40af,
|
|
18
|
+
"900": #1e3a8a
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
// Secondary/Accent (Purples)
|
|
22
|
+
$palette-secondary: (
|
|
23
|
+
"50": #f5f3ff,
|
|
24
|
+
"100": #ede9fe,
|
|
25
|
+
"200": #ddd6fe,
|
|
26
|
+
"300": #c4b5fd,
|
|
27
|
+
"400": #a78bfa,
|
|
28
|
+
"500": #8b5cf6,
|
|
29
|
+
"600": #7c3aed,
|
|
30
|
+
"700": #6d28d9,
|
|
31
|
+
"800": #5b21b6,
|
|
32
|
+
"900": #4c1d95
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
// Neutrals (Slate/Greys)
|
|
36
|
+
$palette-neutral: (
|
|
37
|
+
"0": #ffffff,
|
|
38
|
+
"50": #f8fafc,
|
|
39
|
+
"100": #f1f5f9,
|
|
40
|
+
"200": #e2e8f0,
|
|
41
|
+
"300": #cbd5e1,
|
|
42
|
+
"400": #94a3b8,
|
|
43
|
+
"500": #64748b,
|
|
44
|
+
"600": #475569,
|
|
45
|
+
"700": #334155,
|
|
46
|
+
"800": #1e293b,
|
|
47
|
+
"900": #0f172a,
|
|
48
|
+
"950": #090d16,
|
|
49
|
+
"1000": #000000
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
// Success (Greens)
|
|
53
|
+
$palette-success: (
|
|
54
|
+
"light": #d1fae5,
|
|
55
|
+
"base": #10b981,
|
|
56
|
+
"dark": #065f46
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
// Warning (Ambers)
|
|
60
|
+
$palette-warning: (
|
|
61
|
+
"light": #fef3c7,
|
|
62
|
+
"base": #f59e0b,
|
|
63
|
+
"dark": #92400e
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
// Error (Reds)
|
|
67
|
+
$palette-error: (
|
|
68
|
+
"light": #fee2e2,
|
|
69
|
+
"base": #ef4444,
|
|
70
|
+
"dark": #991b1b
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
// Info (Sky/Cyans)
|
|
74
|
+
$palette-info: (
|
|
75
|
+
"light": #e0f2fe,
|
|
76
|
+
"base": #0ea5e9,
|
|
77
|
+
"dark": #075985
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
// ============================================================
|
|
81
|
+
// SEMANTIC COLOR MAPS (5 Brands, Light & Dark)
|
|
82
|
+
// ============================================================
|
|
83
|
+
|
|
84
|
+
// 1. Default (Corporate Blue)
|
|
85
|
+
$theme-default-light: (
|
|
86
|
+
"brand": map.get($palette-primary, "600"),
|
|
87
|
+
"brand-hover": map.get($palette-primary, "700"),
|
|
88
|
+
"brand-active": map.get($palette-primary, "800"),
|
|
89
|
+
"surface": map.get($palette-neutral, "0"),
|
|
90
|
+
"surface-subtle": map.get($palette-neutral, "50"),
|
|
91
|
+
"surface-muted": map.get($palette-neutral, "100"),
|
|
92
|
+
"text-primary": map.get($palette-neutral, "900"),
|
|
93
|
+
"text-secondary": map.get($palette-neutral, "600"),
|
|
94
|
+
"text-disabled": map.get($palette-neutral, "400"),
|
|
95
|
+
"border": map.get($palette-neutral, "200"),
|
|
96
|
+
"border-strong": map.get($palette-neutral, "400")
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
$theme-default-dark: (
|
|
100
|
+
"brand": map.get($palette-primary, "400"),
|
|
101
|
+
"brand-hover": map.get($palette-primary, "300"),
|
|
102
|
+
"brand-active": map.get($palette-primary, "200"),
|
|
103
|
+
"surface": map.get($palette-neutral, "950"),
|
|
104
|
+
"surface-subtle": map.get($palette-neutral, "900"),
|
|
105
|
+
"surface-muted": map.get($palette-neutral, "800"),
|
|
106
|
+
"text-primary": map.get($palette-neutral, "50"),
|
|
107
|
+
"text-secondary": map.get($palette-neutral, "400"),
|
|
108
|
+
"text-disabled": map.get($palette-neutral, "600"),
|
|
109
|
+
"border": map.get($palette-neutral, "900"),
|
|
110
|
+
"border-strong": map.get($palette-neutral, "700")
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
// 2. Emerald (Green/Finance)
|
|
114
|
+
$theme-emerald-light: (
|
|
115
|
+
"brand": map.get($palette-success, "base"),
|
|
116
|
+
"brand-hover": map.get($palette-success, "dark"),
|
|
117
|
+
"brand-active": #044331,
|
|
118
|
+
"surface": map.get($palette-neutral, "0"),
|
|
119
|
+
"surface-subtle": map.get($palette-neutral, "50"),
|
|
120
|
+
"surface-muted": map.get($palette-neutral, "100"),
|
|
121
|
+
"text-primary": map.get($palette-neutral, "900"),
|
|
122
|
+
"text-secondary": map.get($palette-neutral, "600"),
|
|
123
|
+
"text-disabled": map.get($palette-neutral, "400"),
|
|
124
|
+
"border": map.get($palette-neutral, "200"),
|
|
125
|
+
"border-strong": map.get($palette-neutral, "400")
|
|
126
|
+
);
|
|
127
|
+
|
|
128
|
+
$theme-emerald-dark: (
|
|
129
|
+
"brand": #34d399,
|
|
130
|
+
"brand-hover": map.get($palette-success, "base"),
|
|
131
|
+
"brand-active": map.get($palette-success, "dark"),
|
|
132
|
+
"surface": #03100b,
|
|
133
|
+
"surface-subtle": #061f17,
|
|
134
|
+
"surface-muted": #0c2d22,
|
|
135
|
+
"text-primary": map.get($palette-neutral, "50"),
|
|
136
|
+
"text-secondary": #a7f3d0,
|
|
137
|
+
"text-disabled": #065f46,
|
|
138
|
+
"border": #0a261d,
|
|
139
|
+
"border-strong": map.get($palette-success, "dark")
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
// 3. Sunset (Orange/Energy)
|
|
143
|
+
$theme-sunset-light: (
|
|
144
|
+
"brand": #ea580c, // Orange 600
|
|
145
|
+
"brand-hover": #c2410c, // Orange 700
|
|
146
|
+
"brand-active": #9a3412, // Orange 800
|
|
147
|
+
"surface": map.get($palette-neutral, "0"),
|
|
148
|
+
"surface-subtle": map.get($palette-neutral, "50"),
|
|
149
|
+
"surface-muted": map.get($palette-neutral, "100"),
|
|
150
|
+
"text-primary": map.get($palette-neutral, "900"),
|
|
151
|
+
"text-secondary": map.get($palette-neutral, "600"),
|
|
152
|
+
"text-disabled": map.get($palette-neutral, "400"),
|
|
153
|
+
"border": map.get($palette-neutral, "200"),
|
|
154
|
+
"border-strong": map.get($palette-neutral, "400")
|
|
155
|
+
);
|
|
156
|
+
|
|
157
|
+
$theme-sunset-dark: (
|
|
158
|
+
"brand": #f97316, // Orange 500
|
|
159
|
+
"brand-hover": #fb923c, // Orange 400
|
|
160
|
+
"brand-active": #fdba74, // Orange 300
|
|
161
|
+
"surface": #120905,
|
|
162
|
+
"surface-subtle": #27140c,
|
|
163
|
+
"surface-muted": #3d1d11,
|
|
164
|
+
"text-primary": map.get($palette-neutral, "50"),
|
|
165
|
+
"text-secondary": #fed7aa,
|
|
166
|
+
"text-disabled": #9a3412,
|
|
167
|
+
"border": #2b140b,
|
|
168
|
+
"border-strong": #9a3412
|
|
169
|
+
);
|
|
170
|
+
|
|
171
|
+
// 4. Amethyst (Purple/Premium)
|
|
172
|
+
$theme-amethyst-light: (
|
|
173
|
+
"brand": map.get($palette-secondary, "600"),
|
|
174
|
+
"brand-hover": map.get($palette-secondary, "700"),
|
|
175
|
+
"brand-active": map.get($palette-secondary, "800"),
|
|
176
|
+
"surface": map.get($palette-neutral, "0"),
|
|
177
|
+
"surface-subtle": map.get($palette-neutral, "50"),
|
|
178
|
+
"surface-muted": map.get($palette-neutral, "100"),
|
|
179
|
+
"text-primary": map.get($palette-neutral, "900"),
|
|
180
|
+
"text-secondary": map.get($palette-neutral, "600"),
|
|
181
|
+
"text-disabled": map.get($palette-neutral, "400"),
|
|
182
|
+
"border": map.get($palette-neutral, "200"),
|
|
183
|
+
"border-strong": map.get($palette-neutral, "400")
|
|
184
|
+
);
|
|
185
|
+
|
|
186
|
+
$theme-amethyst-dark: (
|
|
187
|
+
"brand": map.get($palette-secondary, "400"),
|
|
188
|
+
"brand-hover": map.get($palette-secondary, "300"),
|
|
189
|
+
"brand-active": map.get($palette-secondary, "200"),
|
|
190
|
+
"surface": #0d0717,
|
|
191
|
+
"surface-subtle": #1e1135,
|
|
192
|
+
"surface-muted": #2e1b4e,
|
|
193
|
+
"text-primary": map.get($palette-neutral, "50"),
|
|
194
|
+
"text-secondary": map.get($palette-secondary, "200"),
|
|
195
|
+
"text-disabled": map.get($palette-secondary, "700"),
|
|
196
|
+
"border": #201138,
|
|
197
|
+
"border-strong": map.get($palette-secondary, "600")
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
// 5. Ruby (Red/Alert)
|
|
201
|
+
$theme-ruby-light: (
|
|
202
|
+
"brand": map.get($palette-error, "base"),
|
|
203
|
+
"brand-hover": map.get($palette-error, "dark"),
|
|
204
|
+
"brand-active": #7f1d1d,
|
|
205
|
+
"surface": map.get($palette-neutral, "0"),
|
|
206
|
+
"surface-subtle": map.get($palette-neutral, "50"),
|
|
207
|
+
"surface-muted": map.get($palette-neutral, "100"),
|
|
208
|
+
"text-primary": map.get($palette-neutral, "900"),
|
|
209
|
+
"text-secondary": map.get($palette-neutral, "600"),
|
|
210
|
+
"text-disabled": map.get($palette-neutral, "400"),
|
|
211
|
+
"border": map.get($palette-neutral, "200"),
|
|
212
|
+
"border-strong": map.get($palette-neutral, "400")
|
|
213
|
+
);
|
|
214
|
+
|
|
215
|
+
$theme-ruby-dark: (
|
|
216
|
+
"brand": #f87171, // Red 400
|
|
217
|
+
"brand-hover": map.get($palette-error, "base"),
|
|
218
|
+
"brand-active": map.get($palette-error, "dark"),
|
|
219
|
+
"surface": #140505,
|
|
220
|
+
"surface-subtle": #2d0c0c,
|
|
221
|
+
"surface-muted": #471515,
|
|
222
|
+
"text-primary": map.get($palette-neutral, "50"),
|
|
223
|
+
"text-secondary": #fecaca,
|
|
224
|
+
"text-disabled": #991b1b,
|
|
225
|
+
"border": #360f0f,
|
|
226
|
+
"border-strong": #991b1b
|
|
227
|
+
);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// SHADOWS & ELEVATIONS
|
|
3
|
+
// ============================================================
|
|
4
|
+
|
|
5
|
+
$shadows: (
|
|
6
|
+
"sm": (0 1px 2px 0 rgba(0, 0, 0, 0.05)),
|
|
7
|
+
"base": (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)),
|
|
8
|
+
"md": (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)),
|
|
9
|
+
"lg": (0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)),
|
|
10
|
+
"xl": (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1))
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
$radius: (
|
|
14
|
+
"none": 0,
|
|
15
|
+
"sm": 0.125rem, // 2px
|
|
16
|
+
"base": 0.25rem, // 4px
|
|
17
|
+
"md": 0.375rem, // 6px
|
|
18
|
+
"lg": 0.5rem, // 8px
|
|
19
|
+
"xl": 0.75rem, // 12px
|
|
20
|
+
"2xl": 1rem, // 16px
|
|
21
|
+
"full": 9999px
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
$breakpoints: (
|
|
25
|
+
"sm": 640px,
|
|
26
|
+
"md": 768px,
|
|
27
|
+
"lg": 1024px,
|
|
28
|
+
"xl": 1280px,
|
|
29
|
+
"2xl": 1536px
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
$z-index: (
|
|
33
|
+
"dropdown": 1000,
|
|
34
|
+
"sticky": 1020,
|
|
35
|
+
"fixed": 1030,
|
|
36
|
+
"modal": 1040,
|
|
37
|
+
"popover": 1050,
|
|
38
|
+
"tooltip": 1060,
|
|
39
|
+
"toast": 1070
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
$transitions: (
|
|
43
|
+
"fast": 150ms ease-in-out,
|
|
44
|
+
"base": 200ms ease-in-out,
|
|
45
|
+
"slow": 300ms ease-in-out,
|
|
46
|
+
"slower": 500ms ease-in-out
|
|
47
|
+
);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// SPACING SCALE (8pt Grid System)
|
|
3
|
+
// ============================================================
|
|
4
|
+
|
|
5
|
+
$spacing: (
|
|
6
|
+
"0": 0,
|
|
7
|
+
"1": 0.25rem, // 4px
|
|
8
|
+
"2": 0.5rem, // 8px
|
|
9
|
+
"3": 0.75rem, // 12px
|
|
10
|
+
"4": 1rem, // 16px
|
|
11
|
+
"5": 1.25rem, // 20px
|
|
12
|
+
"6": 1.5rem, // 24px
|
|
13
|
+
"8": 2rem, // 32px
|
|
14
|
+
"10": 2.5rem, // 40px
|
|
15
|
+
"12": 3rem, // 48px
|
|
16
|
+
"16": 4rem, // 64px
|
|
17
|
+
"20": 5rem, // 80px
|
|
18
|
+
"24": 6rem // 96px
|
|
19
|
+
);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// TYPOGRAPHY SYSTEM
|
|
3
|
+
// ============================================================
|
|
4
|
+
|
|
5
|
+
$font-families: (
|
|
6
|
+
"sans": ('Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif),
|
|
7
|
+
"mono": ('JetBrains Mono', 'Fira Code', 'Courier New', monospace)
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
$font-sizes: (
|
|
11
|
+
"xs": 0.75rem, // 12px
|
|
12
|
+
"sm": 0.875rem, // 14px
|
|
13
|
+
"base": 1rem, // 16px
|
|
14
|
+
"lg": 1.125rem, // 18px
|
|
15
|
+
"xl": 1.25rem, // 20px
|
|
16
|
+
"2xl": 1.5rem, // 24px
|
|
17
|
+
"3xl": 1.875rem, // 30px
|
|
18
|
+
"4xl": 2.25rem // 36px
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
$font-weights: (
|
|
22
|
+
"light": 300,
|
|
23
|
+
"regular": 400,
|
|
24
|
+
"medium": 500,
|
|
25
|
+
"semibold": 600,
|
|
26
|
+
"bold": 700
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
$line-heights: (
|
|
30
|
+
"tight": 1.25,
|
|
31
|
+
"normal": 1.5,
|
|
32
|
+
"loose": 1.75
|
|
33
|
+
);
|