@marwes-ui/presets 1.2.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 (8) hide show
  1. package/package.json +2 -2
  2. package/src/firstEdition/accordion.css +1 -1
  3. package/src/firstEdition/avatar.css +18 -14
  4. package/src/firstEdition/badge.css +27 -59
  5. package/src/firstEdition/spinner.css +149 -2
  6. package/src/firstEdition/stat-tile.css +54 -21
  7. package/src/firstEdition/tab.css +8 -8
  8. package/src/firstEdition/toast.css +136 -81
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marwes-ui/presets",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -30,7 +30,7 @@
30
30
  ],
31
31
  "dependencies": {
32
32
  "@fontsource/instrument-sans": "5.2.8",
33
- "@marwes-ui/core": "1.2.0"
33
+ "@marwes-ui/core": "1.3.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "rimraf": "6.1.2",
package/src/firstEdition/accordion.css CHANGED
@@ -129,7 +129,7 @@
129
129
  --mw-accordion-title: var(--mw-color-text);
130
130
  --mw-accordion-icon: var(--mw-color-text-muted);
131
131
  --mw-accordion-content: var(--mw-color-text-muted);
132
- --mw-accordion-surface: var(--mw-color-surface-elevated);
132
+ --mw-accordion-surface: var(--mw-color-background, #0f0f0f);
133
133
  --mw-accordion-surface-hover: var(--mw-color-surface-subtle);
134
134
  --mw-accordion-surface-pressed: var(--mw-color-border);
135
135
  --mw-accordion-border: var(--mw-color-border-subtle);
package/src/firstEdition/avatar.css CHANGED
@@ -2,6 +2,8 @@
2
2
  * Avatar component styles
3
3
  * Figma refs:
4
4
  * - .figma/marwes/components/avatar.json
5
+ * - .figma/marwes/components/avatar-badge.json
6
+ * - .figma/marwes/components/avatar-group.json
5
7
  * - .figma/marwes/pages/-avatar/-avatar_1574-27460.json
6
8
  * - .figma/marwes/pages/-avatar/-avatar-dark_1574-27570.json
7
9
  *
@@ -68,9 +70,9 @@
68
70
  }
69
71
 
70
72
  .mw-avatar--icon {
71
- --mw-avatar-surface: var(--mw-color-surface-elevated);
72
- --mw-avatar-border-width: 1px;
73
- --mw-avatar-border-color: var(--mw-color-border);
73
+ --mw-avatar-surface: var(--mw-color-surface, #f8f8f8);
74
+ --mw-avatar-border-width: 0px;
75
+ --mw-avatar-border-color: transparent;
74
76
  --mw-avatar-label: var(--mw-color-text-muted);
75
77
  }
76
78
 
@@ -105,8 +107,8 @@
105
107
  }
106
108
 
107
109
  .mw-theme--dark .mw-avatar--icon {
108
- --mw-avatar-surface: var(--mw-color-surface-elevated);
109
- --mw-avatar-border-color: var(--mw-color-border);
110
+ --mw-avatar-surface: var(--mw-color-surface, #1a1a1a);
111
+ --mw-avatar-border-color: transparent;
110
112
  --mw-avatar-label: var(--mw-color-text-muted);
111
113
  }
112
114
 
@@ -152,10 +154,11 @@
152
154
 
153
155
  .mw-avatar-group {
154
156
  --mw-avatar-group-overlap: 12px;
155
- --mw-avatar-group-stroke: var(--mw-color-surface, #f9fafb);
156
- --mw-avatar-group-stroke-width: 2.5px;
157
- --mw-avatar-group-counter-surface: var(--mw-color-surface, #f9fafb);
158
- --mw-avatar-group-counter-label: var(--mw-color-text-muted);
157
+ --mw-avatar-group-stroke: var(--mw-color-surface-elevated, #ffffff);
158
+ --mw-avatar-group-stroke-width: 2px;
159
+ --mw-avatar-group-counter-surface: var(--mw-color-surface-inverted, #141414);
160
+ --mw-avatar-group-counter-stroke: var(--mw-avatar-group-stroke);
161
+ --mw-avatar-group-counter-label: var(--mw-color-text-inverted, #ffffff);
159
162
 
160
163
  min-inline-size: 0;
161
164
  display: inline-flex;
@@ -187,18 +190,19 @@
187
190
  height: 40px;
188
191
  border-radius: 9999px;
189
192
  background: var(--mw-avatar-group-counter-surface);
190
- box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-counter-surface);
193
+ box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-counter-stroke);
191
194
  color: var(--mw-avatar-group-counter-label);
192
195
  font-family: var(--mw-font-primary, inherit);
193
196
  font-size: 12px;
194
197
  font-weight: 500;
195
- line-height: 16px;
198
+ line-height: 12px;
196
199
  letter-spacing: -0.36px;
197
200
  box-sizing: border-box;
198
201
  }
199
202
 
200
203
  .mw-theme--dark .mw-avatar-group {
201
- --mw-avatar-group-stroke: var(--mw-color-surface, #141414);
202
- --mw-avatar-group-counter-surface: var(--mw-color-surface, #141414);
203
- --mw-avatar-group-counter-label: var(--mw-color-text-muted);
204
+ --mw-avatar-group-stroke: var(--mw-avatar-group-dark-stroke, #000000);
205
+ --mw-avatar-group-counter-surface: var(--mw-color-surface-inverted, #ffffff);
206
+ --mw-avatar-group-counter-stroke: var(--mw-avatar-group-stroke);
207
+ --mw-avatar-group-counter-label: var(--mw-color-text-inverted, #141414);
204
208
  }
package/src/firstEdition/badge.css CHANGED
@@ -38,49 +38,33 @@
38
38
  ============================================ */
39
39
 
40
40
  .mw-badge--neutral {
41
- --mw-badge-surface: var(--mw-color-surface-subtle);
42
- --mw-badge-border: var(--mw-color-border-subtle);
43
- --mw-badge-label: var(--mw-color-text-muted);
41
+ --mw-badge-surface: var(--mw-color-surface-subtle, #f5f5f5);
42
+ --mw-badge-border: var(--mw-color-border-subtle, #d8d8d8);
43
+ --mw-badge-label: var(--mw-color-text-muted, #595959);
44
44
  }
45
45
 
46
46
  .mw-badge--info {
47
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-info-base) 12%, var(--mw-color-surface));
48
- --mw-badge-border: color-mix(
49
- in srgb,
50
- var(--mw-color-info-base) 45%,
51
- var(--mw-color-border-subtle)
52
- );
53
- --mw-badge-label: var(--mw-color-info-base);
47
+ --mw-badge-surface: var(--mw-color-status-info-background, #eeeeff);
48
+ --mw-badge-border: var(--mw-color-status-info-border-strong, #5859fc);
49
+ --mw-badge-label: var(--mw-color-status-info-text, #1b1d97);
54
50
  }
55
51
 
56
52
  .mw-badge--success {
57
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-success-base) 12%, var(--mw-color-surface));
58
- --mw-badge-border: color-mix(
59
- in srgb,
60
- var(--mw-color-success-base) 45%,
61
- var(--mw-color-border-subtle)
62
- );
63
- --mw-badge-label: var(--mw-color-success-base);
53
+ --mw-badge-surface: var(--mw-color-status-success-background, #e6f4ed);
54
+ --mw-badge-border: var(--mw-color-status-success-border-strong, #2e9970);
55
+ --mw-badge-label: var(--mw-color-status-success-text, #006633);
64
56
  }
65
57
 
66
58
  .mw-badge--warning {
67
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-warning-base) 16%, var(--mw-color-surface));
68
- --mw-badge-border: color-mix(
69
- in srgb,
70
- var(--mw-color-warning-base) 50%,
71
- var(--mw-color-border-subtle)
72
- );
73
- --mw-badge-label: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
59
+ --mw-badge-surface: var(--mw-color-status-warning-background, #fff8e6);
60
+ --mw-badge-border: var(--mw-color-status-warning-border-strong, #e46f00);
61
+ --mw-badge-label: var(--mw-color-status-warning-text, #b45309);
74
62
  }
75
63
 
76
64
  .mw-badge--error {
77
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-danger-base) 12%, var(--mw-color-surface));
78
- --mw-badge-border: color-mix(
79
- in srgb,
80
- var(--mw-color-danger-base) 45%,
81
- var(--mw-color-border-subtle)
82
- );
83
- --mw-badge-label: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
65
+ --mw-badge-surface: var(--mw-color-status-error-background, #ffe8eb);
66
+ --mw-badge-border: var(--mw-color-status-error-border-strong, #ff2847);
67
+ --mw-badge-label: var(--mw-color-status-error-text, #a8031f);
84
68
  }
85
69
 
86
70
  /* ============================================
@@ -94,43 +78,27 @@
94
78
  }
95
79
 
96
80
  .mw-theme--dark .mw-badge--info {
97
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-info-base) 18%, var(--mw-color-surface));
98
- --mw-badge-border: color-mix(
99
- in srgb,
100
- var(--mw-color-info-base) 55%,
101
- var(--mw-color-border-subtle)
102
- );
103
- --mw-badge-label: color-mix(in srgb, var(--mw-color-info-base) 80%, var(--mw-color-text));
81
+ --mw-badge-surface: var(--mw-color-status-info-background, #040519);
82
+ --mw-badge-border: var(--mw-color-status-info-border-strong, #252599);
83
+ --mw-badge-label: var(--mw-color-status-info-text, #ababfd);
104
84
  }
105
85
 
106
86
  .mw-theme--dark .mw-badge--success {
107
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-success-base) 18%, var(--mw-color-surface));
108
- --mw-badge-border: color-mix(
109
- in srgb,
110
- var(--mw-color-success-base) 55%,
111
- var(--mw-color-border-subtle)
112
- );
113
- --mw-badge-label: var(--mw-color-success-base);
87
+ --mw-badge-surface: var(--mw-color-status-success-background, #001a0c);
88
+ --mw-badge-border: var(--mw-color-status-success-border-strong, #006d48);
89
+ --mw-badge-label: var(--mw-color-status-success-text, #90caad);
114
90
  }
115
91
 
116
92
  .mw-theme--dark .mw-badge--warning {
117
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-warning-base) 20%, var(--mw-color-surface));
118
- --mw-badge-border: color-mix(
119
- in srgb,
120
- var(--mw-color-warning-base) 60%,
121
- var(--mw-color-border-subtle)
122
- );
123
- --mw-badge-label: var(--mw-color-warning-base);
93
+ --mw-badge-surface: var(--mw-color-status-warning-background, #221004);
94
+ --mw-badge-border: var(--mw-color-status-warning-border-strong, #b45308);
95
+ --mw-badge-label: var(--mw-color-status-warning-text, #fcc94a);
124
96
  }
125
97
 
126
98
  .mw-theme--dark .mw-badge--error {
127
- --mw-badge-surface: color-mix(in srgb, var(--mw-color-danger-base) 18%, var(--mw-color-surface));
128
- --mw-badge-border: color-mix(
129
- in srgb,
130
- var(--mw-color-danger-base) 55%,
131
- var(--mw-color-border-subtle)
132
- );
133
- --mw-badge-label: color-mix(in srgb, var(--mw-color-danger-base) 70%, var(--mw-color-text));
99
+ --mw-badge-surface: var(--mw-color-status-error-background, #240006);
100
+ --mw-badge-border: var(--mw-color-status-error-border-strong, #ff2847);
101
+ --mw-badge-label: var(--mw-color-status-error-text, #ff5566);
134
102
  }
135
103
 
136
104
  .mw-badge-group__items {
package/src/firstEdition/spinner.css CHANGED
@@ -34,10 +34,17 @@
34
34
  transform-origin: center;
35
35
  }
36
36
 
37
- .mw-spinner--cross .mw-spinner__svg {
37
+ /* ── Segment-shift variants (no SVG rotation, individual opacity cycling) ── */
38
+
39
+ .mw-spinner--cross .mw-spinner__svg,
40
+ .mw-spinner--dots-round .mw-spinner__svg,
41
+ .mw-spinner--dots-square .mw-spinner__svg,
42
+ .mw-spinner--lines .mw-spinner__svg {
38
43
  animation: none;
39
44
  }
40
45
 
46
+ /* Cross — 4 segments */
47
+
41
48
  .mw-spinner--cross .mw-spinner__svg rect {
42
49
  animation: mw-spinner-cross-shift var(--mw-spinner-rotation-duration) steps(4, end) infinite;
43
50
  }
@@ -54,6 +61,108 @@
54
61
  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
55
62
  }
56
63
 
64
+ /* Dots-round — 8 circle segments */
65
+
66
+ .mw-spinner--dots-round .mw-spinner__svg circle {
67
+ animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
68
+ }
69
+
70
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(2) {
71
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
72
+ }
73
+
74
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(3) {
75
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
76
+ }
77
+
78
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(4) {
79
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
80
+ }
81
+
82
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(5) {
83
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
84
+ }
85
+
86
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(6) {
87
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
88
+ }
89
+
90
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(7) {
91
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
92
+ }
93
+
94
+ .mw-spinner--dots-round .mw-spinner__svg circle:nth-child(8) {
95
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
96
+ }
97
+
98
+ /* Dots-square — 8 rect segments */
99
+
100
+ .mw-spinner--dots-square .mw-spinner__svg rect {
101
+ animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
102
+ }
103
+
104
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(2) {
105
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
106
+ }
107
+
108
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(3) {
109
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
110
+ }
111
+
112
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(4) {
113
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
114
+ }
115
+
116
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(5) {
117
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
118
+ }
119
+
120
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(6) {
121
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
122
+ }
123
+
124
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(7) {
125
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
126
+ }
127
+
128
+ .mw-spinner--dots-square .mw-spinner__svg rect:nth-child(8) {
129
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
130
+ }
131
+
132
+ /* Lines — 8 rect segments */
133
+
134
+ .mw-spinner--lines .mw-spinner__svg rect {
135
+ animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
136
+ }
137
+
138
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(2) {
139
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
140
+ }
141
+
142
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(3) {
143
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
144
+ }
145
+
146
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(4) {
147
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
148
+ }
149
+
150
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(5) {
151
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
152
+ }
153
+
154
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(6) {
155
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
156
+ }
157
+
158
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(7) {
159
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
160
+ }
161
+
162
+ .mw-spinner--lines .mw-spinner__svg rect:nth-child(8) {
163
+ animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
164
+ }
165
+
57
166
  @keyframes mw-spinner-rotate {
58
167
  from {
59
168
  transform: rotate(0deg);
@@ -83,12 +192,50 @@
83
192
  }
84
193
  }
85
194
 
195
+ @keyframes mw-spinner-segment-shift-8 {
196
+ 0%,
197
+ 100% {
198
+ opacity: 1;
199
+ }
200
+
201
+ 12.5% {
202
+ opacity: 0.875;
203
+ }
204
+
205
+ 25% {
206
+ opacity: 0.75;
207
+ }
208
+
209
+ 37.5% {
210
+ opacity: 0.625;
211
+ }
212
+
213
+ 50% {
214
+ opacity: 0.5;
215
+ }
216
+
217
+ 62.5% {
218
+ opacity: 0.375;
219
+ }
220
+
221
+ 75% {
222
+ opacity: 0.25;
223
+ }
224
+
225
+ 87.5% {
226
+ opacity: 0.125;
227
+ }
228
+ }
229
+
86
230
  @media (prefers-reduced-motion: reduce) {
87
231
  .mw-spinner__svg {
88
232
  animation-duration: 1600ms;
89
233
  }
90
234
 
91
- .mw-spinner--cross .mw-spinner__svg rect {
235
+ .mw-spinner--cross .mw-spinner__svg rect,
236
+ .mw-spinner--dots-round .mw-spinner__svg circle,
237
+ .mw-spinner--dots-square .mw-spinner__svg rect,
238
+ .mw-spinner--lines .mw-spinner__svg rect {
92
239
  animation-duration: 1600ms;
93
240
  }
94
241
  }
package/src/firstEdition/stat-tile.css CHANGED
@@ -23,41 +23,42 @@
23
23
  padding: var(--mw-spacing-sp-24, 24px);
24
24
  color: var(--mw-stat-tile-text);
25
25
  background: var(--mw-stat-tile-surface);
26
- border: 1px solid var(--mw-stat-tile-border);
26
+ border: none;
27
27
  border-radius: var(--mw-stat-tile-radius);
28
+ box-shadow: inset 0 0 0 1px var(--mw-stat-tile-border);
28
29
  font-family: var(--mw-font-primary, inherit);
29
30
  }
30
31
 
31
32
  .mw-stat-tile--brand {
32
- --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #eeeeff);
33
- --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #ababfd);
34
- --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #1b1d97);
35
- --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #1b1d97);
36
- --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #2527ca);
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);
37
38
  }
38
39
 
39
40
  .mw-stat-tile--success {
40
- --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #e6f4ed);
41
- --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #90caad);
42
- --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #006633);
43
- --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #006633);
44
- --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #006d48);
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);
45
46
  }
46
47
 
47
48
  .mw-stat-tile--warning {
48
- --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #fff8e6);
49
- --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #fde08a);
50
- --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #b45309);
51
- --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #b45309);
52
- --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #b45309);
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);
53
54
  }
54
55
 
55
56
  .mw-stat-tile--danger {
56
- --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #ffe8eb);
57
- --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #ff8a95);
58
- --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #a8031f);
59
- --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #a8031f);
60
- --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #a8031f);
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);
61
62
  }
62
63
 
63
64
  .mw-stat-tile__header {
@@ -135,3 +136,35 @@
135
136
  --mw-stat-tile-text: var(--mw-color-text, #f9fafb);
136
137
  --mw-stat-tile-muted: var(--mw-color-text-muted, #a3a3a3);
137
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/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);
@@ -70,10 +70,10 @@
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
@@ -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: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
221
- --mw-toast-action: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
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: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
229
- --mw-toast-action: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
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
  }