@marwes-ui/presets 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +4 -2
  2. package/dist/chunk-62D3F6GN.js +49 -0
  3. package/dist/chunk-62D3F6GN.js.map +1 -0
  4. package/dist/firstEdition/index.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/package.json +2 -2
  7. package/src/firstEdition/accordion.css +4 -4
  8. package/src/firstEdition/avatar.css +19 -15
  9. package/src/firstEdition/badge.css +27 -59
  10. package/src/firstEdition/button.css +5 -5
  11. package/src/firstEdition/card.css +5 -5
  12. package/src/firstEdition/date-picker.css +228 -0
  13. package/src/firstEdition/dialog.css +1 -1
  14. package/src/firstEdition/index.ts +29 -1
  15. package/src/firstEdition/molecules/accordion-field.css +4 -5
  16. package/src/firstEdition/molecules/checkbox-field.css +1 -1
  17. package/src/firstEdition/molecules/checkbox-group-field.css +2 -2
  18. package/src/firstEdition/molecules/input-field.css +17 -20
  19. package/src/firstEdition/molecules/radio-group-field.css +2 -2
  20. package/src/firstEdition/molecules/slider-field.css +4 -4
  21. package/src/firstEdition/molecules/switch-field.css +2 -2
  22. package/src/firstEdition/radio.css +2 -2
  23. package/src/firstEdition/rich-text.css +1 -1
  24. package/src/firstEdition/select.css +41 -2
  25. package/src/firstEdition/skeleton.css +95 -0
  26. package/src/firstEdition/slider.css +1 -1
  27. package/src/firstEdition/spinner.css +149 -2
  28. package/src/firstEdition/stat-tile.css +170 -0
  29. package/src/firstEdition/styles.css +3 -0
  30. package/src/firstEdition/switch.css +2 -2
  31. package/src/firstEdition/tab.css +9 -9
  32. package/src/firstEdition/toast.css +137 -82
  33. package/dist/chunk-2JNIKK66.js +0 -21
  34. package/dist/chunk-2JNIKK66.js.map +0 -1
package/src/firstEdition/stat-tile.css ADDED
@@ -0,0 +1,170 @@
1
+ /*
2
+ * Stat Tile component styles
3
+ * Figma refs:
4
+ * - stat tile component: 1411:6857
5
+ * - color/tone instances: 2512:27384, 2512:27391, 2512:27405, 2512:27412
6
+ * - trend part: 2695:25437
7
+ */
8
+
9
+ .mw-stat-tile {
10
+ --mw-stat-tile-surface: var(--mw-color-surface-elevated, #ffffff);
11
+ --mw-stat-tile-border: var(--mw-color-border-subtle, #d8d8d8);
12
+ --mw-stat-tile-text: var(--mw-color-text, #141414);
13
+ --mw-stat-tile-muted: var(--mw-color-text-muted, #595959);
14
+ --mw-stat-tile-trend: var(--mw-stat-tile-muted);
15
+ --mw-stat-tile-radius: 24px;
16
+
17
+ display: flex;
18
+ width: var(--mw-stat-tile-width, 280px);
19
+ min-width: 0;
20
+ box-sizing: border-box;
21
+ flex-direction: column;
22
+ gap: var(--mw-spacing-sp-8, 8px);
23
+ padding: var(--mw-spacing-sp-24, 24px);
24
+ color: var(--mw-stat-tile-text);
25
+ background: var(--mw-stat-tile-surface);
26
+ border: none;
27
+ border-radius: var(--mw-stat-tile-radius);
28
+ box-shadow: inset 0 0 0 1px var(--mw-stat-tile-border);
29
+ font-family: var(--mw-font-primary, inherit);
30
+ }
31
+
32
+ .mw-stat-tile--brand {
33
+ --mw-stat-tile-surface: var(--mw-color-status-info-background, #eeeeff);
34
+ --mw-stat-tile-border: var(--mw-color-status-info-border-strong, #5859fc);
35
+ --mw-stat-tile-text: var(--mw-color-status-info-text, #1b1d97);
36
+ --mw-stat-tile-muted: var(--mw-color-status-info-text, #1b1d97);
37
+ --mw-stat-tile-trend: var(--mw-color-status-info-icon, #2f31fc);
38
+ }
39
+
40
+ .mw-stat-tile--success {
41
+ --mw-stat-tile-surface: var(--mw-color-status-success-background, #e6f4ed);
42
+ --mw-stat-tile-border: var(--mw-color-status-success-border-strong, #2e9970);
43
+ --mw-stat-tile-text: var(--mw-color-status-success-text, #006633);
44
+ --mw-stat-tile-muted: var(--mw-color-status-success-text, #006633);
45
+ --mw-stat-tile-trend: var(--mw-color-status-success-icon, #006d48);
46
+ }
47
+
48
+ .mw-stat-tile--warning {
49
+ --mw-stat-tile-surface: var(--mw-color-status-warning-background, #fff8e6);
50
+ --mw-stat-tile-border: var(--mw-color-status-warning-border-strong, #e46f00);
51
+ --mw-stat-tile-text: var(--mw-color-status-warning-text, #b45309);
52
+ --mw-stat-tile-muted: var(--mw-color-status-warning-text, #b45309);
53
+ --mw-stat-tile-trend: var(--mw-color-status-warning-text, #b45309);
54
+ }
55
+
56
+ .mw-stat-tile--danger {
57
+ --mw-stat-tile-surface: var(--mw-color-status-error-background, #ffe8eb);
58
+ --mw-stat-tile-border: var(--mw-color-status-error-border-strong, #ff2847);
59
+ --mw-stat-tile-text: var(--mw-color-status-error-text, #a8031f);
60
+ --mw-stat-tile-muted: var(--mw-color-status-error-text, #a8031f);
61
+ --mw-stat-tile-trend: var(--mw-color-status-error-text, #a8031f);
62
+ }
63
+
64
+ .mw-stat-tile__header {
65
+ display: flex;
66
+ min-width: 0;
67
+ align-items: center;
68
+ justify-content: space-between;
69
+ gap: var(--mw-spacing-sp-8, 8px);
70
+ }
71
+
72
+ .mw-stat-tile__label {
73
+ min-width: 0;
74
+ overflow: hidden;
75
+ color: var(--mw-stat-tile-muted);
76
+ font-size: 12px;
77
+ font-weight: 500;
78
+ letter-spacing: -0.03em;
79
+ line-height: 12px;
80
+ text-overflow: ellipsis;
81
+ white-space: nowrap;
82
+ }
83
+
84
+ .mw-stat-tile__trend {
85
+ display: inline-flex;
86
+ flex: 0 0 auto;
87
+ align-items: center;
88
+ gap: var(--mw-spacing-sp-4, 4px);
89
+ box-sizing: border-box;
90
+ color: var(--mw-stat-tile-trend);
91
+ font-size: 12px;
92
+ font-weight: 500;
93
+ line-height: 16px;
94
+ }
95
+
96
+ .mw-stat-tile__trend-icon {
97
+ display: inline-flex;
98
+ width: 12px;
99
+ height: 12px;
100
+ align-items: center;
101
+ justify-content: center;
102
+ font-size: 12px;
103
+ line-height: 12px;
104
+ }
105
+
106
+ .mw-stat-tile__value {
107
+ min-width: 0;
108
+ overflow-wrap: anywhere;
109
+ color: var(--mw-stat-tile-text);
110
+ font-size: 28px;
111
+ font-weight: 600;
112
+ letter-spacing: -0.03em;
113
+ line-height: 30px;
114
+ }
115
+
116
+ .mw-stat-tile__subtitle {
117
+ min-width: 0;
118
+ overflow: hidden;
119
+ color: var(--mw-stat-tile-muted);
120
+ font-size: 12px;
121
+ font-weight: 400;
122
+ line-height: 16px;
123
+ text-overflow: ellipsis;
124
+ white-space: nowrap;
125
+ }
126
+
127
+ .mw-theme--dark
128
+ .mw-stat-tile:not(
129
+ .mw-stat-tile--brand,
130
+ .mw-stat-tile--success,
131
+ .mw-stat-tile--warning,
132
+ .mw-stat-tile--danger
133
+ ) {
134
+ --mw-stat-tile-surface: var(--mw-color-surface-elevated, #2e2e2e);
135
+ --mw-stat-tile-border: var(--mw-color-border-subtle, #474747);
136
+ --mw-stat-tile-text: var(--mw-color-text, #f9fafb);
137
+ --mw-stat-tile-muted: var(--mw-color-text-muted, #a3a3a3);
138
+ }
139
+
140
+ .mw-theme--dark .mw-stat-tile--brand {
141
+ --mw-stat-tile-surface: var(--mw-color-status-info-background, #040519);
142
+ --mw-stat-tile-border: var(--mw-color-status-info-border-strong, #252599);
143
+ --mw-stat-tile-text: var(--mw-color-status-info-text, #ababfd);
144
+ --mw-stat-tile-muted: var(--mw-color-status-info-text, #ababfd);
145
+ --mw-stat-tile-trend: var(--mw-color-status-info-icon, #8182fc);
146
+ }
147
+
148
+ .mw-theme--dark .mw-stat-tile--success {
149
+ --mw-stat-tile-surface: var(--mw-color-status-success-background, #001a0c);
150
+ --mw-stat-tile-border: var(--mw-color-status-success-border-strong, #006d48);
151
+ --mw-stat-tile-text: var(--mw-color-status-success-text, #90caad);
152
+ --mw-stat-tile-muted: var(--mw-color-status-success-text, #90caad);
153
+ --mw-stat-tile-trend: var(--mw-color-status-success-icon, #5db189);
154
+ }
155
+
156
+ .mw-theme--dark .mw-stat-tile--warning {
157
+ --mw-stat-tile-surface: var(--mw-color-status-warning-background, #221004);
158
+ --mw-stat-tile-border: var(--mw-color-status-warning-border-strong, #b45308);
159
+ --mw-stat-tile-text: var(--mw-color-status-warning-text, #fcc94a);
160
+ --mw-stat-tile-muted: var(--mw-color-status-warning-text, #fcc94a);
161
+ --mw-stat-tile-trend: var(--mw-color-status-warning-icon, #f9b21a);
162
+ }
163
+
164
+ .mw-theme--dark .mw-stat-tile--danger {
165
+ --mw-stat-tile-surface: var(--mw-color-status-error-background, #240006);
166
+ --mw-stat-tile-border: var(--mw-color-status-error-border-strong, #ff2847);
167
+ --mw-stat-tile-text: var(--mw-color-status-error-text, #ff5566);
168
+ --mw-stat-tile-muted: var(--mw-color-status-error-text, #ff5566);
169
+ --mw-stat-tile-trend: var(--mw-color-status-error-icon, #ff2847);
170
+ }
package/src/firstEdition/styles.css CHANGED
@@ -24,6 +24,9 @@
24
24
  @import "./checkbox.css";
25
25
  @import "./divider.css";
26
26
  @import "./spinner.css";
27
+ @import "./skeleton.css";
28
+ @import "./stat-tile.css";
29
+ @import "./date-picker.css";
27
30
  @import "./spacing.css";
28
31
  @import "./radio.css";
29
32
  @import "./switch.css";
package/src/firstEdition/switch.css CHANGED
@@ -3,8 +3,8 @@
3
3
  * Figma: 1364:11442 (light) / 1369:4001 (dark)
4
4
  *
5
5
  * Tokens (from Figma nodes.json):
6
- * switch/track-off (light): #e5e7eb (dark): #374151
7
- * switch/track-on (light): #2f31fc (dark): #2f31fc (= primary-base)
6
+ * switch/track-off (light): #d8d8d8 (dark): #474747
7
+ * switch/track-on (light): #2f31fc (dark): #5859fc (= primary-base)
8
8
  * switch/thumb-off (light): #f9fafb (dark): #141414
9
9
  * switch/thumb-on (light): #ffffff (dark): #ffffff
10
10
  * switch/label (light): #141414 (dark): #f9fafb
package/src/firstEdition/tab.css CHANGED
@@ -7,10 +7,10 @@
7
7
  */
8
8
 
9
9
  .mw-tab {
10
- --mw-tab-surface: var(--mw-color-surface-elevated);
11
- --mw-tab-surface-hover: var(--mw-color-surface-subtle);
12
- --mw-tab-surface-pressed: var(--mw-color-border-subtle);
13
- --mw-tab-label: var(--mw-color-text-muted);
10
+ --mw-tab-surface: transparent;
11
+ --mw-tab-surface-hover: color-mix(in srgb, var(--mw-color-text, #000000) 5%, transparent);
12
+ --mw-tab-surface-pressed: color-mix(in srgb, var(--mw-color-text, #000000) 10%, transparent);
13
+ --mw-tab-label: var(--mw-color-text, #141414);
14
14
  --mw-tab-label-active: var(--mw-color-text, #141414);
15
15
  --mw-tab-label-disabled: var(--mw-color-text-disabled);
16
16
  --mw-tab-indicator: var(--mw-color-primary-base, #2f31fc);
@@ -65,15 +65,15 @@
65
65
 
66
66
  .mw-tab:focus-visible {
67
67
  outline: none;
68
- box-shadow: inset 0 0 0 2px var(--mw-color-focus, #2684ff);
68
+ box-shadow: inset 0 0 0 2px var(--mw-color-focus, #2f31fc);
69
69
  z-index: 1;
70
70
  }
71
71
 
72
72
  .mw-theme--dark .mw-tab {
73
- --mw-tab-surface: var(--mw-color-surface-elevated);
74
- --mw-tab-surface-hover: var(--mw-color-surface-subtle);
75
- --mw-tab-surface-pressed: var(--mw-color-border);
76
- --mw-tab-label: var(--mw-color-text-muted);
73
+ --mw-tab-surface: transparent;
74
+ --mw-tab-surface-hover: color-mix(in srgb, var(--mw-color-text, #ffffff) 5%, transparent);
75
+ --mw-tab-surface-pressed: color-mix(in srgb, var(--mw-color-text, #ffffff) 10%, transparent);
76
+ --mw-tab-label: var(--mw-color-text);
77
77
  --mw-tab-label-active: var(--mw-color-text);
78
78
  --mw-tab-label-disabled: var(--mw-color-text-disabled);
79
79
  --mw-tab-indicator: var(--mw-color-primary-base, #5859fc);
package/src/firstEdition/toast.css CHANGED
@@ -95,7 +95,7 @@
95
95
 
96
96
  .mw-toast__action-button:focus-visible,
97
97
  .mw-toast__action :where(a, button):focus-visible {
98
- outline: 2px solid var(--mw-color-focus, #2684ff);
98
+ outline: 2px solid var(--mw-color-focus, #2f31fc);
99
99
  outline-offset: 2px;
100
100
  border-radius: 2px;
101
101
  }
@@ -143,22 +143,17 @@
143
143
  .mw-toast--subtle {
144
144
  --mw-toast-surface: var(--mw-color-surface-elevated);
145
145
  --mw-toast-border: var(--mw-color-border);
146
- --mw-toast-icon: var(--mw-color-text-muted);
146
+ --mw-toast-icon: var(--mw-color-text-muted, #595959);
147
147
  --mw-toast-text: var(--mw-color-text);
148
148
  --mw-toast-action: var(--mw-color-text);
149
149
  }
150
150
 
151
- .mw-toast--subtle[data-intent="error"],
152
- .mw-toast--subtle[data-intent="brand"] {
153
- --mw-toast-icon: var(--mw-color-text);
154
- }
155
-
156
151
  .mw-toast--outline {
157
152
  --mw-toast-surface: var(--mw-color-surface-elevated);
158
- --mw-toast-border: var(--mw-color-primary-base);
159
- --mw-toast-icon: var(--mw-color-primary-base);
160
- --mw-toast-text: var(--mw-color-primary-base);
161
- --mw-toast-action: var(--mw-color-primary-base);
153
+ --mw-toast-border: var(--mw-color-border-brand, #2f31fc);
154
+ --mw-toast-icon: var(--mw-color-text-brand, #2f31fc);
155
+ --mw-toast-text: var(--mw-color-text-brand, #2f31fc);
156
+ --mw-toast-action: var(--mw-color-text-brand, #2f31fc);
162
157
  }
163
158
 
164
159
  .mw-toast--outline[data-intent="neutral"] {
@@ -169,32 +164,46 @@
169
164
  }
170
165
 
171
166
  .mw-toast--outline[data-intent="success"] {
172
- --mw-toast-border: var(--mw-color-success-base);
173
- --mw-toast-icon: var(--mw-color-success-base);
174
- --mw-toast-text: var(--mw-color-success-base);
175
- --mw-toast-action: var(--mw-color-success-base);
167
+ --mw-toast-border: var(--mw-color-status-success-border-strong, #2e9970);
168
+ --mw-toast-icon: var(--mw-color-status-success-icon, #006d48);
169
+ --mw-toast-text: var(--mw-color-status-success-text, #006633);
170
+ --mw-toast-action: var(--mw-color-status-success-text, #006633);
176
171
  }
177
172
 
178
173
  .mw-toast--outline[data-intent="warning"] {
179
- --mw-toast-border: var(--mw-color-warning-base);
180
- --mw-toast-icon: var(--mw-color-warning-base);
181
- --mw-toast-text: var(--mw-color-warning-base);
182
- --mw-toast-action: var(--mw-color-warning-base);
174
+ --mw-toast-border: var(--mw-color-status-warning-border-strong, #e46f00);
175
+ --mw-toast-icon: var(--mw-color-status-warning-icon, #d97706);
176
+ --mw-toast-text: var(--mw-color-status-warning-text, #b45309);
177
+ --mw-toast-action: var(--mw-color-status-warning-text, #b45309);
178
+ }
179
+
180
+ .mw-toast--outline[data-intent="info"] {
181
+ --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
182
+ --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
183
+ --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
184
+ --mw-toast-action: var(--mw-color-status-info-text, #1b1d97);
185
+ }
186
+
187
+ .mw-toast--outline[data-intent="brand"] {
188
+ --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
189
+ --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
190
+ --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
191
+ --mw-toast-action: var(--mw-color-status-info-text, #1b1d97);
183
192
  }
184
193
 
185
194
  .mw-toast--outline[data-intent="error"] {
186
- --mw-toast-border: var(--mw-color-danger-base);
187
- --mw-toast-icon: var(--mw-color-danger-base);
188
- --mw-toast-text: var(--mw-color-danger-base);
189
- --mw-toast-action: var(--mw-color-danger-base);
195
+ --mw-toast-border: var(--mw-color-status-error-border-strong, #ff2847);
196
+ --mw-toast-icon: var(--mw-color-status-error-icon, #d90429);
197
+ --mw-toast-text: var(--mw-color-status-error-text, #a8031f);
198
+ --mw-toast-action: var(--mw-color-status-error-text, #a8031f);
190
199
  }
191
200
 
192
201
  .mw-toast--rich {
193
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-primary-base) 12%, var(--mw-color-surface));
194
- --mw-toast-border: var(--mw-color-primary-base);
195
- --mw-toast-icon: var(--mw-color-primary-base);
196
- --mw-toast-text: var(--mw-color-primary-base);
197
- --mw-toast-action: var(--mw-color-primary-base);
202
+ --mw-toast-surface: var(--mw-color-status-info-background, #eeeeff);
203
+ --mw-toast-border: var(--mw-color-border-brand, #2f31fc);
204
+ --mw-toast-icon: var(--mw-color-text-brand, #2f31fc);
205
+ --mw-toast-text: var(--mw-color-text-brand, #2f31fc);
206
+ --mw-toast-action: var(--mw-color-text-brand, #2f31fc);
198
207
  }
199
208
 
200
209
  .mw-toast--rich[data-intent="neutral"] {
@@ -206,27 +215,43 @@
206
215
  }
207
216
 
208
217
  .mw-toast--rich[data-intent="success"] {
209
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-success-base) 12%, var(--mw-color-surface));
210
- --mw-toast-border: var(--mw-color-success-base);
211
- --mw-toast-icon: var(--mw-color-success-base);
212
- --mw-toast-text: var(--mw-color-success-base);
213
- --mw-toast-action: var(--mw-color-success-base);
218
+ --mw-toast-surface: var(--mw-color-status-success-background, #e6f4ed);
219
+ --mw-toast-border: var(--mw-color-status-success-border-strong, #2e9970);
220
+ --mw-toast-icon: var(--mw-color-status-success-icon, #006d48);
221
+ --mw-toast-text: var(--mw-color-status-success-text, #006633);
222
+ --mw-toast-action: var(--mw-color-status-success-icon, #006d48);
214
223
  }
215
224
 
216
225
  .mw-toast--rich[data-intent="warning"] {
217
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-warning-base) 16%, var(--mw-color-surface));
218
- --mw-toast-border: var(--mw-color-warning-base);
219
- --mw-toast-icon: var(--mw-color-warning-base);
220
- --mw-toast-text: var(--mw-color-warning-base);
221
- --mw-toast-action: var(--mw-color-warning-base);
226
+ --mw-toast-surface: var(--mw-color-status-warning-background, #fff8e6);
227
+ --mw-toast-border: var(--mw-color-status-warning-border-strong, #e46f00);
228
+ --mw-toast-icon: var(--mw-color-status-warning-icon, #d97706);
229
+ --mw-toast-text: var(--mw-color-status-warning-text, #b45309);
230
+ --mw-toast-action: var(--mw-color-status-warning-text, #b45309);
231
+ }
232
+
233
+ .mw-toast--rich[data-intent="info"] {
234
+ --mw-toast-surface: var(--mw-color-status-info-background, #eeeeff);
235
+ --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
236
+ --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
237
+ --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
238
+ --mw-toast-action: var(--mw-color-info-hover, #2527ca);
239
+ }
240
+
241
+ .mw-toast--rich[data-intent="brand"] {
242
+ --mw-toast-surface: var(--mw-color-status-info-background, #eeeeff);
243
+ --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
244
+ --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
245
+ --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
246
+ --mw-toast-action: var(--mw-color-info-hover, #2527ca);
222
247
  }
223
248
 
224
249
  .mw-toast--rich[data-intent="error"] {
225
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-danger-base) 12%, var(--mw-color-surface));
226
- --mw-toast-border: var(--mw-color-danger-base);
227
- --mw-toast-icon: var(--mw-color-danger-base);
228
- --mw-toast-text: var(--mw-color-danger-base);
229
- --mw-toast-action: var(--mw-color-danger-base);
250
+ --mw-toast-surface: var(--mw-color-status-error-background, #ffe8eb);
251
+ --mw-toast-border: var(--mw-color-status-error-border-strong, #ff2847);
252
+ --mw-toast-icon: var(--mw-color-status-error-icon, #d90429);
253
+ --mw-toast-text: var(--mw-color-status-error-text, #a8031f);
254
+ --mw-toast-action: var(--mw-color-status-error-text, #a8031f);
230
255
  }
231
256
 
232
257
  /* --------------------------------------------
@@ -234,19 +259,19 @@
234
259
  -------------------------------------------- */
235
260
 
236
261
  .mw-theme--dark .mw-toast--subtle {
237
- --mw-toast-surface: var(--mw-color-surface-elevated);
262
+ --mw-toast-surface: var(--mw-color-background, #0f0f0f);
238
263
  --mw-toast-border: var(--mw-color-border);
239
- --mw-toast-icon: var(--mw-color-text-muted);
264
+ --mw-toast-icon: var(--mw-color-text-muted, #a3a3a3);
240
265
  --mw-toast-text: var(--mw-color-text);
241
266
  --mw-toast-action: var(--mw-color-text);
242
267
  }
243
268
 
244
269
  .mw-theme--dark .mw-toast--outline {
245
- --mw-toast-surface: var(--mw-color-surface-elevated);
246
- --mw-toast-border: var(--mw-color-primary-base);
247
- --mw-toast-icon: var(--mw-color-primary-base);
248
- --mw-toast-text: var(--mw-color-text);
249
- --mw-toast-action: var(--mw-color-text);
270
+ --mw-toast-surface: var(--mw-color-background, #0f0f0f);
271
+ --mw-toast-border: var(--mw-color-border-brand, #5859fc);
272
+ --mw-toast-icon: var(--mw-color-text-brand, #8182fc);
273
+ --mw-toast-text: var(--mw-color-text-brand, #8182fc);
274
+ --mw-toast-action: var(--mw-color-text-brand, #8182fc);
250
275
  }
251
276
 
252
277
  .mw-theme--dark .mw-toast--outline[data-intent="neutral"] {
@@ -257,32 +282,46 @@
257
282
  }
258
283
 
259
284
  .mw-theme--dark .mw-toast--outline[data-intent="success"] {
260
- --mw-toast-border: var(--mw-color-success-base);
261
- --mw-toast-icon: var(--mw-color-success-base);
262
- --mw-toast-text: var(--mw-color-text);
263
- --mw-toast-action: var(--mw-color-text);
285
+ --mw-toast-border: var(--mw-color-status-success-border-strong, #006d48);
286
+ --mw-toast-icon: var(--mw-color-status-success-icon, #5db189);
287
+ --mw-toast-text: var(--mw-color-status-success-text, #90caad);
288
+ --mw-toast-action: var(--mw-color-status-success-text, #90caad);
264
289
  }
265
290
 
266
291
  .mw-theme--dark .mw-toast--outline[data-intent="warning"] {
267
- --mw-toast-border: var(--mw-color-warning-base);
268
- --mw-toast-icon: var(--mw-color-warning-base);
269
- --mw-toast-text: var(--mw-color-text);
270
- --mw-toast-action: var(--mw-color-text);
292
+ --mw-toast-border: var(--mw-color-toast-warning-border, #b45309);
293
+ --mw-toast-icon: var(--mw-color-status-warning-icon, #f9b21a);
294
+ --mw-toast-text: var(--mw-color-status-warning-text, #fcc94a);
295
+ --mw-toast-action: var(--mw-color-status-warning-text, #fcc94a);
296
+ }
297
+
298
+ .mw-theme--dark .mw-toast--outline[data-intent="info"] {
299
+ --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
300
+ --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
301
+ --mw-toast-text: var(--mw-color-text-brand, #8182fc);
302
+ --mw-toast-action: var(--mw-color-text-brand, #8182fc);
303
+ }
304
+
305
+ .mw-theme--dark .mw-toast--outline[data-intent="brand"] {
306
+ --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
307
+ --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
308
+ --mw-toast-text: var(--mw-color-text-brand, #8182fc);
309
+ --mw-toast-action: var(--mw-color-text-brand, #8182fc);
271
310
  }
272
311
 
273
312
  .mw-theme--dark .mw-toast--outline[data-intent="error"] {
274
- --mw-toast-border: var(--mw-color-danger-base);
275
- --mw-toast-icon: var(--mw-color-danger-base);
276
- --mw-toast-text: var(--mw-color-text);
277
- --mw-toast-action: var(--mw-color-text);
313
+ --mw-toast-border: var(--mw-color-status-error-border-strong, #ff2847);
314
+ --mw-toast-icon: var(--mw-color-status-error-icon, #ff2847);
315
+ --mw-toast-text: var(--mw-color-status-error-text, #ff5566);
316
+ --mw-toast-action: var(--mw-color-status-error-text, #ff5566);
278
317
  }
279
318
 
280
319
  .mw-theme--dark .mw-toast--rich {
281
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-primary-base) 18%, var(--mw-color-surface));
282
- --mw-toast-border: var(--mw-color-primary-base);
283
- --mw-toast-icon: var(--mw-color-primary-base);
284
- --mw-toast-text: var(--mw-color-text);
285
- --mw-toast-action: var(--mw-color-text);
320
+ --mw-toast-surface: var(--mw-color-status-info-background, #040519);
321
+ --mw-toast-border: var(--mw-color-border-brand, #5859fc);
322
+ --mw-toast-icon: var(--mw-color-text-brand, #8182fc);
323
+ --mw-toast-text: var(--mw-color-text-brand, #8182fc);
324
+ --mw-toast-action: var(--mw-color-text-brand, #8182fc);
286
325
  }
287
326
 
288
327
  .mw-theme--dark .mw-toast--rich[data-intent="neutral"] {
@@ -294,25 +333,41 @@
294
333
  }
295
334
 
296
335
  .mw-theme--dark .mw-toast--rich[data-intent="success"] {
297
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-success-base) 18%, var(--mw-color-surface));
298
- --mw-toast-border: var(--mw-color-success-base);
299
- --mw-toast-icon: var(--mw-color-success-base);
300
- --mw-toast-text: var(--mw-color-text);
301
- --mw-toast-action: var(--mw-color-text);
336
+ --mw-toast-surface: var(--mw-color-status-success-background, #001a0c);
337
+ --mw-toast-border: var(--mw-color-status-success-border-strong, #006d48);
338
+ --mw-toast-icon: var(--mw-color-status-success-icon, #5db189);
339
+ --mw-toast-text: var(--mw-color-status-success-text, #90caad);
340
+ --mw-toast-action: var(--mw-color-status-success-icon, #5db189);
302
341
  }
303
342
 
304
343
  .mw-theme--dark .mw-toast--rich[data-intent="warning"] {
305
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-warning-base) 20%, var(--mw-color-surface));
306
- --mw-toast-border: var(--mw-color-warning-base);
307
- --mw-toast-icon: var(--mw-color-warning-base);
308
- --mw-toast-text: var(--mw-color-text);
309
- --mw-toast-action: var(--mw-color-text);
344
+ --mw-toast-surface: var(--mw-color-status-warning-background, #221004);
345
+ --mw-toast-border: var(--mw-color-toast-warning-border, #b45309);
346
+ --mw-toast-icon: var(--mw-color-status-warning-icon, #f9b21a);
347
+ --mw-toast-text: var(--mw-color-status-warning-text, #fcc94a);
348
+ --mw-toast-action: var(--mw-color-status-warning-icon, #f9b21a);
349
+ }
350
+
351
+ .mw-theme--dark .mw-toast--rich[data-intent="info"] {
352
+ --mw-toast-surface: var(--mw-color-status-info-background, #040519);
353
+ --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
354
+ --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
355
+ --mw-toast-text: var(--mw-color-text-brand, #8182fc);
356
+ --mw-toast-action: var(--mw-color-text-brand, #8182fc);
357
+ }
358
+
359
+ .mw-theme--dark .mw-toast--rich[data-intent="brand"] {
360
+ --mw-toast-surface: var(--mw-color-status-info-background, #040519);
361
+ --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
362
+ --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
363
+ --mw-toast-text: var(--mw-color-text-brand, #8182fc);
364
+ --mw-toast-action: var(--mw-color-text-brand, #8182fc);
310
365
  }
311
366
 
312
367
  .mw-theme--dark .mw-toast--rich[data-intent="error"] {
313
- --mw-toast-surface: color-mix(in srgb, var(--mw-color-danger-base) 18%, var(--mw-color-surface));
314
- --mw-toast-border: var(--mw-color-danger-base);
315
- --mw-toast-icon: var(--mw-color-danger-base);
316
- --mw-toast-text: var(--mw-color-text);
317
- --mw-toast-action: var(--mw-color-text);
368
+ --mw-toast-surface: var(--mw-color-status-error-background, #240006);
369
+ --mw-toast-border: var(--mw-color-status-error-border-strong, #ff2847);
370
+ --mw-toast-icon: var(--mw-color-status-error-icon, #ff2847);
371
+ --mw-toast-text: var(--mw-color-status-error-text, #ff5566);
372
+ --mw-toast-action: var(--mw-color-status-error-icon, #ff2847);
318
373
  }
package/dist/chunk-2JNIKK66.js DELETED
@@ -1,21 +0,0 @@
1
- import '@fontsource/instrument-sans/400.css';
2
- import '@fontsource/instrument-sans/500.css';
3
- import '@fontsource/instrument-sans/600.css';
4
-
5
- // src/firstEdition/index.ts
6
- var firstEditionTheme = {
7
- color: {
8
- primary: {
9
- base: "#2F31FC",
10
- label: "#FFFFFF",
11
- labelDisabled: "rgba(255,255,255,0.5)"
12
- },
13
- success: "#00875A"
14
- },
15
- font: { primary: "'Instrument Sans', Inter, system-ui, sans-serif" },
16
- ui: { radius: 4, density: "comfortable" }
17
- };
18
-
19
- export { firstEditionTheme };
20
- //# sourceMappingURL=chunk-2JNIKK66.js.map
21
- //# sourceMappingURL=chunk-2JNIKK66.js.map
package/dist/chunk-2JNIKK66.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/firstEdition/index.ts"],"names":[],"mappings":";;;;;AAOO,IAAM,iBAAA,GAAgC;AAAA,EAC3C,KAAA,EAAO;AAAA,IACL,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO,SAAA;AAAA,MACP,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM,EAAE,OAAA,EAAS,iDAAA,EAAkD;AAAA,EACnE,EAAA,EAAI,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,aAAA;AAC5B","file":"chunk-2JNIKK66.js","sourcesContent":["import type { ThemeInput } from \"@marwes-ui/core\"\nimport \"@fontsource/instrument-sans/400.css\"\nimport \"@fontsource/instrument-sans/500.css\"\nimport \"@fontsource/instrument-sans/600.css\"\n\n// Explicit ThemeInput for consumers that still want to import the preset object.\n// MarwesProvider uses the same first edition baseline when no theme is provided.\nexport const firstEditionTheme: ThemeInput = {\n color: {\n primary: {\n base: \"#2F31FC\",\n label: \"#FFFFFF\",\n labelDisabled: \"rgba(255,255,255,0.5)\",\n },\n success: \"#00875A\",\n },\n font: { primary: \"'Instrument Sans', Inter, system-ui, sans-serif\" },\n ui: { radius: 4, density: \"comfortable\" },\n}\n"]}