@simplybusiness/mobius 9.3.4 → 10.0.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 (45) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/package.json +2 -2
  3. package/src/components/Accordion/Accordion.css +79 -71
  4. package/src/components/Accordion/AccordionList.css +25 -23
  5. package/src/components/Alert/Alert.css +46 -44
  6. package/src/components/Box/Box.css +4 -2
  7. package/src/components/Breadcrumbs/Breadcrumbs.css +25 -23
  8. package/src/components/Button/Button.css +227 -219
  9. package/src/components/Button/Button.story.styles.css +9 -7
  10. package/src/components/Checkbox/Checkbox.css +106 -104
  11. package/src/components/Checkbox/CheckboxGroup.css +22 -20
  12. package/src/components/Combobox/Combobox.css +96 -94
  13. package/src/components/Container/Container.css +11 -9
  14. package/src/components/Divider/Divider.css +14 -12
  15. package/src/components/Drawer/Drawer.css +157 -155
  16. package/src/components/DropdownMenu/DropdownMenu.css +54 -52
  17. package/src/components/DropdownMenu/DropdownMenu.story.styles.css +11 -9
  18. package/src/components/ErrorMessage/ErrorMessage.css +30 -28
  19. package/src/components/ExpandableText/ExpandableText.css +11 -9
  20. package/src/components/Fieldset/Fieldset.css +13 -11
  21. package/src/components/Flex/Flex.css +5 -3
  22. package/src/components/Grid/Grid.story.styles.css +18 -16
  23. package/src/components/Icon/Icon.css +37 -35
  24. package/src/components/Label/Label.css +13 -11
  25. package/src/components/Link/Link.css +29 -27
  26. package/src/components/List/List.css +47 -45
  27. package/src/components/LoadingIndicator/LoadingIndicator.css +4 -2
  28. package/src/components/Modal/Modal.css +122 -120
  29. package/src/components/NumberField/NumberField.css +58 -56
  30. package/src/components/PasswordField/PasswordField.css +27 -25
  31. package/src/components/Popover/Popover.css +32 -30
  32. package/src/components/Popover/Popover.story.styles.css +24 -22
  33. package/src/components/Progress/Progress.css +25 -23
  34. package/src/components/Radio/Radio.css +167 -163
  35. package/src/components/Segment/Segment.css +163 -161
  36. package/src/components/Select/Select.css +82 -80
  37. package/src/components/Slider/Slider.css +113 -111
  38. package/src/components/Stack/Stack.css +24 -22
  39. package/src/components/Switch/Switch.css +58 -56
  40. package/src/components/Table/Table.css +52 -50
  41. package/src/components/Text/Text.css +92 -90
  42. package/src/components/TextArea/TextArea.css +41 -39
  43. package/src/components/TextField/TextField.css +132 -130
  44. package/src/components/Title/Title.css +32 -30
  45. package/src/components/Toast/Toast.css +234 -232
package/src/components/Toast/Toast.css CHANGED
@@ -1,233 +1,235 @@
1
- /* Toaster container positioning (keep Sonner's positioning logic) */
2
- [data-sonner-toaster] {
3
- font-family: var(--font-family);
4
- }
5
-
6
- /* Base toast styles */
7
- .mobius-toast {
8
- position: relative;
9
- font-family: var(--font-family);
10
- font-size: var(--font-size-regular);
11
- line-height: var(--line-height-normal);
12
- color: var(--color-text);
13
- background-color: var(--color-background);
14
- border: 2px solid var(--color-border);
15
- border-radius: var(--radius-1);
16
- box-shadow: var(--shadow-md);
17
- padding: var(--size-md);
18
- display: flex;
19
- align-items: flex-start;
20
- gap: var(--size-sm);
21
- width: var(--toast-width);
22
- max-width: calc(100vw - var(--size-lg) * 2);
23
- box-sizing: border-box;
24
- }
25
-
26
- /* Variant styles */
27
- .mobius-toast.--info {
28
- border-color: var(--color-info);
29
- background-color: var(--color-info-background);
30
- }
31
-
32
- .mobius-toast.--success {
33
- border-color: var(--color-valid);
34
- background-color: var(--color-valid-background);
35
- }
36
-
37
- .mobius-toast.--warning {
38
- border-color: var(--color-warning);
39
- background-color: var(--color-warning-background);
40
- }
41
-
42
- .mobius-toast.--error {
43
- border-color: var(--color-error);
44
- background-color: var(--color-error-background);
45
- }
46
-
47
- /* Icon */
48
- .mobius-toast__icon {
49
- flex-shrink: 0;
50
- display: flex;
51
- align-items: center;
52
- padding-top: 2px;
53
- }
54
-
55
- .mobius-toast__icon .mobius-icon {
56
- width: 1.25em;
57
- height: 1.25em;
58
- }
59
-
60
- /* Body wrapper for content + actions */
61
- .mobius-toast__body {
62
- display: flex;
63
- flex-direction: column;
64
- gap: var(--size-sm);
65
- flex: 1;
66
- min-width: 0;
67
- padding-right: var(--size-lg);
68
- }
69
-
70
- /* Content wrapper (title + description) */
71
- .mobius-toast__content {
72
- display: flex;
73
- flex-direction: column;
74
- gap: var(--size-xxs);
75
- }
76
-
77
- /* Title */
78
- .mobius-toast__title {
79
- font-size: var(--font-size-regular);
80
- font-weight: 600;
81
- line-height: var(--line-height-normal);
82
- color: var(--color-text);
83
- margin: 0;
84
- }
85
-
86
- /* Description */
87
- .mobius-toast__description {
88
- font-size: var(--font-size-regular);
89
- line-height: var(--line-height-normal);
90
- color: var(--color-text);
91
- margin: 0;
92
- }
93
-
94
- /* Actions wrapper - separate row for buttons */
95
- .mobius-toast__actions {
96
- display: flex;
97
- justify-content: flex-end;
98
- gap: var(--size-xs);
99
- flex-wrap: wrap;
100
- }
101
-
102
- /* Shared button styles */
103
- .mobius-toast__action,
104
- .mobius-toast__cancel {
105
- font-family: var(--font-family);
106
- font-size: var(--font-size-small);
107
- font-weight: 600;
108
- padding: var(--size-xs) var(--size-sm);
109
- border-radius: var(--radius-1);
110
- cursor: pointer;
111
- transition: background-color 0.15s ease;
112
- flex-shrink: 0;
113
- display: inline-flex;
114
- align-items: center;
115
- justify-content: center;
116
- }
117
-
118
- /* Action button (primary) */
119
- .mobius-toast__action {
120
- background-color: var(--button-primary-color);
121
- color: var(--button-primary-content-color);
122
- border: none;
123
- }
124
-
125
- .mobius-toast__action:hover {
126
- filter: brightness(0.9);
127
- }
128
-
129
- /* Action button variant colors */
130
- .mobius-toast.--info .mobius-toast__action {
131
- background-color: var(--color-info);
132
- }
133
-
134
- .mobius-toast.--success .mobius-toast__action {
135
- background-color: var(--color-valid);
136
- }
137
-
138
- .mobius-toast.--warning .mobius-toast__action {
139
- background-color: var(--color-warning);
140
- }
141
-
142
- .mobius-toast.--error .mobius-toast__action {
143
- background-color: var(--color-error);
144
- }
145
-
146
- /* Cancel button (secondary) */
147
- .mobius-toast__cancel {
148
- background-color: transparent;
149
- color: var(--color-text);
150
- border: 1px solid var(--color-border);
151
- }
152
-
153
- .mobius-toast__cancel:hover {
154
- background-color: var(--color-background-hover);
155
- }
156
-
157
- /* Cancel button variant border colors */
158
- .mobius-toast.--info .mobius-toast__cancel {
159
- border-color: var(--color-info);
160
- color: var(--color-info);
161
- }
162
-
163
- .mobius-toast.--success .mobius-toast__cancel {
164
- border-color: var(--color-valid);
165
- color: var(--color-valid);
166
- }
167
-
168
- .mobius-toast.--warning .mobius-toast__cancel {
169
- border-color: var(--color-warning);
170
- color: var(--color-warning);
171
- }
172
-
173
- .mobius-toast.--error .mobius-toast__cancel {
174
- border-color: var(--color-error);
175
- color: var(--color-error);
176
- }
177
-
178
- /* Close button */
179
- .mobius-toast__close {
180
- position: absolute;
181
- top: var(--size-md);
182
- right: var(--size-sm);
183
- background: transparent;
184
- border: none;
185
- border-radius: var(--radius-1);
186
- cursor: pointer;
187
- padding: var(--size-xxs);
188
- width: var(--size-md);
189
- height: var(--size-md);
190
- display: flex;
191
- align-items: center;
192
- justify-content: center;
193
- color: var(--color-text-muted);
194
- transition: color 0.15s ease;
195
- }
196
-
197
- .mobius-toast__close:hover {
198
- color: var(--color-text);
199
- }
200
-
201
- /* Close icon */
202
- .mobius-toast__close-icon {
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- }
207
-
208
- .mobius-toast__close-icon .mobius-icon {
209
- width: 1.25em;
210
- height: 1.25em;
211
- }
212
-
213
- /* Close button variant colors */
214
- .mobius-toast.--info .mobius-toast__close {
215
- color: var(--color-info);
216
- }
217
-
218
- .mobius-toast.--success .mobius-toast__close {
219
- color: var(--color-valid);
220
- }
221
-
222
- .mobius-toast.--warning .mobius-toast__close {
223
- color: var(--color-warning);
224
- }
225
-
226
- .mobius-toast.--error .mobius-toast__close {
227
- color: var(--color-error);
228
- }
229
-
230
- /* Close button hover - darken slightly */
231
- .mobius-toast .mobius-toast__close:hover {
232
- filter: brightness(0.8);
1
+ @layer atoms {
2
+ /* Toaster container positioning (keep Sonner's positioning logic) */
3
+ [data-sonner-toaster] {
4
+ font-family: var(--font-family);
5
+ }
6
+
7
+ /* Base toast styles */
8
+ .mobius-toast {
9
+ position: relative;
10
+ font-family: var(--font-family);
11
+ font-size: var(--font-size-regular);
12
+ line-height: var(--line-height-normal);
13
+ color: var(--color-text);
14
+ background-color: var(--color-background);
15
+ border: 2px solid var(--color-border);
16
+ border-radius: var(--radius-1);
17
+ box-shadow: var(--shadow-md);
18
+ padding: var(--size-md);
19
+ display: flex;
20
+ align-items: flex-start;
21
+ gap: var(--size-sm);
22
+ width: var(--toast-width);
23
+ max-width: calc(100vw - var(--size-lg) * 2);
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ /* Variant styles */
28
+ .mobius-toast.--info {
29
+ border-color: var(--color-info);
30
+ background-color: var(--color-info-background);
31
+ }
32
+
33
+ .mobius-toast.--success {
34
+ border-color: var(--color-valid);
35
+ background-color: var(--color-valid-background);
36
+ }
37
+
38
+ .mobius-toast.--warning {
39
+ border-color: var(--color-warning);
40
+ background-color: var(--color-warning-background);
41
+ }
42
+
43
+ .mobius-toast.--error {
44
+ border-color: var(--color-error);
45
+ background-color: var(--color-error-background);
46
+ }
47
+
48
+ /* Icon */
49
+ .mobius-toast__icon {
50
+ flex-shrink: 0;
51
+ display: flex;
52
+ align-items: center;
53
+ padding-top: 2px;
54
+ }
55
+
56
+ .mobius-toast__icon .mobius-icon {
57
+ width: 1.25em;
58
+ height: 1.25em;
59
+ }
60
+
61
+ /* Body wrapper for content + actions */
62
+ .mobius-toast__body {
63
+ display: flex;
64
+ flex-direction: column;
65
+ gap: var(--size-sm);
66
+ flex: 1;
67
+ min-width: 0;
68
+ padding-right: var(--size-lg);
69
+ }
70
+
71
+ /* Content wrapper (title + description) */
72
+ .mobius-toast__content {
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: var(--size-xxs);
76
+ }
77
+
78
+ /* Title */
79
+ .mobius-toast__title {
80
+ font-size: var(--font-size-regular);
81
+ font-weight: 600;
82
+ line-height: var(--line-height-normal);
83
+ color: var(--color-text);
84
+ margin: 0;
85
+ }
86
+
87
+ /* Description */
88
+ .mobius-toast__description {
89
+ font-size: var(--font-size-regular);
90
+ line-height: var(--line-height-normal);
91
+ color: var(--color-text);
92
+ margin: 0;
93
+ }
94
+
95
+ /* Actions wrapper - separate row for buttons */
96
+ .mobius-toast__actions {
97
+ display: flex;
98
+ justify-content: flex-end;
99
+ gap: var(--size-xs);
100
+ flex-wrap: wrap;
101
+ }
102
+
103
+ /* Shared button styles */
104
+ .mobius-toast__action,
105
+ .mobius-toast__cancel {
106
+ font-family: var(--font-family);
107
+ font-size: var(--font-size-small);
108
+ font-weight: 600;
109
+ padding: var(--size-xs) var(--size-sm);
110
+ border-radius: var(--radius-1);
111
+ cursor: pointer;
112
+ transition: background-color 0.15s ease;
113
+ flex-shrink: 0;
114
+ display: inline-flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ }
118
+
119
+ /* Action button (primary) */
120
+ .mobius-toast__action {
121
+ background-color: var(--button-primary-color);
122
+ color: var(--button-primary-content-color);
123
+ border: none;
124
+ }
125
+
126
+ .mobius-toast__action:hover {
127
+ filter: brightness(0.9);
128
+ }
129
+
130
+ /* Action button variant colors */
131
+ .mobius-toast.--info .mobius-toast__action {
132
+ background-color: var(--color-info);
133
+ }
134
+
135
+ .mobius-toast.--success .mobius-toast__action {
136
+ background-color: var(--color-valid);
137
+ }
138
+
139
+ .mobius-toast.--warning .mobius-toast__action {
140
+ background-color: var(--color-warning);
141
+ }
142
+
143
+ .mobius-toast.--error .mobius-toast__action {
144
+ background-color: var(--color-error);
145
+ }
146
+
147
+ /* Cancel button (secondary) */
148
+ .mobius-toast__cancel {
149
+ background-color: transparent;
150
+ color: var(--color-text);
151
+ border: 1px solid var(--color-border);
152
+ }
153
+
154
+ .mobius-toast__cancel:hover {
155
+ background-color: var(--color-background-hover);
156
+ }
157
+
158
+ /* Cancel button variant border colors */
159
+ .mobius-toast.--info .mobius-toast__cancel {
160
+ border-color: var(--color-info);
161
+ color: var(--color-info);
162
+ }
163
+
164
+ .mobius-toast.--success .mobius-toast__cancel {
165
+ border-color: var(--color-valid);
166
+ color: var(--color-valid);
167
+ }
168
+
169
+ .mobius-toast.--warning .mobius-toast__cancel {
170
+ border-color: var(--color-warning);
171
+ color: var(--color-warning);
172
+ }
173
+
174
+ .mobius-toast.--error .mobius-toast__cancel {
175
+ border-color: var(--color-error);
176
+ color: var(--color-error);
177
+ }
178
+
179
+ /* Close button */
180
+ .mobius-toast__close {
181
+ position: absolute;
182
+ top: var(--size-md);
183
+ right: var(--size-sm);
184
+ background: transparent;
185
+ border: none;
186
+ border-radius: var(--radius-1);
187
+ cursor: pointer;
188
+ padding: var(--size-xxs);
189
+ width: var(--size-md);
190
+ height: var(--size-md);
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ color: var(--color-text-muted);
195
+ transition: color 0.15s ease;
196
+ }
197
+
198
+ .mobius-toast__close:hover {
199
+ color: var(--color-text);
200
+ }
201
+
202
+ /* Close icon */
203
+ .mobius-toast__close-icon {
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
207
+ }
208
+
209
+ .mobius-toast__close-icon .mobius-icon {
210
+ width: 1.25em;
211
+ height: 1.25em;
212
+ }
213
+
214
+ /* Close button variant colors */
215
+ .mobius-toast.--info .mobius-toast__close {
216
+ color: var(--color-info);
217
+ }
218
+
219
+ .mobius-toast.--success .mobius-toast__close {
220
+ color: var(--color-valid);
221
+ }
222
+
223
+ .mobius-toast.--warning .mobius-toast__close {
224
+ color: var(--color-warning);
225
+ }
226
+
227
+ .mobius-toast.--error .mobius-toast__close {
228
+ color: var(--color-error);
229
+ }
230
+
231
+ /* Close button hover - darken slightly */
232
+ .mobius-toast .mobius-toast__close:hover {
233
+ filter: brightness(0.8);
234
+ }
233
235
  }