@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/NumberField/NumberField.css CHANGED
@@ -1,70 +1,72 @@
1
- .mobius-number-field {
2
- box-sizing: border-box;
3
- width: 100%;
1
+ @layer atoms {
2
+ .mobius-number-field {
3
+ box-sizing: border-box;
4
+ width: 100%;
4
5
 
5
- &:where(.--is-optional) > :where(.mobius-label)::after {
6
- content: " (optional)";
7
- }
6
+ &:where(.--is-optional) > :where(.mobius-label)::after {
7
+ content: " (optional)";
8
+ }
8
9
 
9
- &.--hide-spin-buttons {
10
- appearance: textfield;
11
- -moz-appearance: textfield;
10
+ &.--hide-spin-buttons {
11
+ appearance: textfield;
12
+ -moz-appearance: textfield;
12
13
 
13
- &::-webkit-outer-spin-button,
14
- &::-webkit-inner-spin-button {
15
- -webkit-appearance: none;
16
- margin: 0;
14
+ &::-webkit-outer-spin-button,
15
+ &::-webkit-inner-spin-button {
16
+ -webkit-appearance: none;
17
+ margin: 0;
18
+ }
17
19
  }
18
20
  }
19
- }
20
21
 
21
- .mobius-number-field__input-wrapper {
22
- width: 100%;
23
- }
22
+ .mobius-number-field__input-wrapper {
23
+ width: 100%;
24
+ }
24
25
 
25
- .mobius-number-field__input {
26
- box-sizing: border-box;
27
- border: var(--border-default);
28
- border-radius: var(--input-border-radius);
29
- background-color: var(--color-background-input);
30
- padding: var(--input-field-padding);
31
- font-family: var(--font-family);
32
- font-size: var(--font-size-regular);
33
- color: var(--color-text);
34
- outline: none;
35
- margin: 0;
36
- max-width: var(--text-input-max-width);
37
- width: 100%;
26
+ .mobius-number-field__input {
27
+ box-sizing: border-box;
28
+ border: var(--border-default);
29
+ border-radius: var(--input-border-radius);
30
+ background-color: var(--color-background-input);
31
+ padding: var(--input-field-padding);
32
+ font-family: var(--font-family);
33
+ font-size: var(--font-size-regular);
34
+ color: var(--color-text);
35
+ outline: none;
36
+ margin: 0;
37
+ max-width: var(--text-input-max-width);
38
+ width: 100%;
38
39
 
39
- &::placeholder {
40
- color: var(--color-text-medium);
41
- }
40
+ &::placeholder {
41
+ color: var(--color-text-medium);
42
+ }
42
43
 
43
- /* Focused */
44
- &:focus-visible:not(.--is-disabled) {
45
- border-color: var(--color-primary);
46
- background-color: var(--color-background-input-active);
47
- box-shadow: var(--box-shadow-default);
48
- }
44
+ /* Focused */
45
+ &:focus-visible:not(.--is-disabled) {
46
+ border-color: var(--color-primary);
47
+ background-color: var(--color-background-input-active);
48
+ box-shadow: var(--box-shadow-default);
49
+ }
49
50
 
50
- /* Hovered */
51
- &:hover:not(.--is-disabled):not(&.--is-invalid) {
52
- border-color: var(--color-primary);
53
- background-color: var(--color-background-input-active);
54
- }
51
+ /* Hovered */
52
+ &:hover:not(.--is-disabled):not(&.--is-invalid) {
53
+ border-color: var(--color-primary);
54
+ background-color: var(--color-background-input-active);
55
+ }
55
56
 
56
- /* Disabled */
57
- &.--is-disabled {
58
- background-color: var(--color-background-light);
59
- border-color: var(--color-border-medium);
60
- color: var(--color-text-light);
61
- cursor: not-allowed;
62
- }
57
+ /* Disabled */
58
+ &.--is-disabled {
59
+ background-color: var(--color-background-light);
60
+ border-color: var(--color-border-medium);
61
+ color: var(--color-text-light);
62
+ cursor: not-allowed;
63
+ }
63
64
 
64
- /* Invalid */
65
- &.--is-invalid:not(.--is-disabled) {
66
- border-color: var(--color-error);
67
- background-color: var(--color-error-background);
68
- color: var(--color-error);
65
+ /* Invalid */
66
+ &.--is-invalid:not(.--is-disabled) {
67
+ border-color: var(--color-error);
68
+ background-color: var(--color-error-background);
69
+ color: var(--color-error);
70
+ }
69
71
  }
70
72
  }
package/src/components/PasswordField/PasswordField.css CHANGED
@@ -1,31 +1,33 @@
1
- .mobius-password-field {
2
- & .mobius-text-field--has-suffix-inside {
3
- display: flex;
4
- }
1
+ @layer atoms {
2
+ .mobius-password-field {
3
+ & .mobius-text-field--has-suffix-inside {
4
+ display: flex;
5
+ }
5
6
 
6
- & :where(.mobius-password-field__show-button) {
7
- appearance: none;
8
- font-size: var(--font-size-3);
9
- font-family: var(--font-family);
10
- align-self: center;
11
- display: inline-block;
12
- background-color: transparent;
13
- margin: 0 var(--size-xs) 0 0;
14
- padding: 6px var(--size-xs);
15
- cursor: pointer;
16
- border: none;
17
- border-radius: var(--radius-2);
18
- color: var(--color-primary);
19
- transition: var(--transition-standard);
20
- user-select: none;
7
+ & :where(.mobius-password-field__show-button) {
8
+ appearance: none;
9
+ font-size: var(--font-size-3);
10
+ font-family: var(--font-family);
11
+ align-self: center;
12
+ display: inline-block;
13
+ background-color: transparent;
14
+ margin: 0 var(--size-xs) 0 0;
15
+ padding: 6px var(--size-xs);
16
+ cursor: pointer;
17
+ border: none;
18
+ border-radius: var(--radius-2);
19
+ color: var(--color-primary);
20
+ transition: var(--transition-standard);
21
+ user-select: none;
21
22
 
22
- &:focus-visible {
23
- box-shadow: var(--box-shadow-default);
24
- outline: none;
25
- }
23
+ &:focus-visible {
24
+ box-shadow: var(--box-shadow-default);
25
+ outline: none;
26
+ }
26
27
 
27
- &:hover {
28
- background-color: var(--color-background-highlight);
28
+ &:hover {
29
+ background-color: var(--color-background-highlight);
30
+ }
29
31
  }
30
32
  }
31
33
  }
package/src/components/Popover/Popover.css CHANGED
@@ -1,36 +1,38 @@
1
- .mobius-popover__container {
2
- z-index: var(--popover-z-index);
3
- max-width: var(--popover-max-width);
4
- }
1
+ @layer atoms {
2
+ .mobius-popover__container {
3
+ z-index: var(--popover-z-index);
4
+ max-width: var(--popover-max-width);
5
+ }
5
6
 
6
- .mobius-popover {
7
- padding: var(--size-sm);
8
- background-color: var(--color-background-popover);
9
- color: var(--color-text-popover);
10
- border-radius: var(--radius-2);
11
- font-size: var(--font-size-2);
12
- font-weight: var(--font-weight-normal);
13
- font-family: var(--font-family);
14
- line-height: var(--line-height-tight);
15
- }
7
+ .mobius-popover {
8
+ padding: var(--size-sm);
9
+ background-color: var(--color-background-popover);
10
+ color: var(--color-text-popover);
11
+ border-radius: var(--radius-2);
12
+ font-size: var(--font-size-2);
13
+ font-weight: var(--font-weight-normal);
14
+ font-family: var(--font-family);
15
+ line-height: var(--line-height-tight);
16
+ }
16
17
 
17
- .mobius-popover__header {
18
- display: flex;
19
- padding-bottom: var(--size-sm);
20
- }
18
+ .mobius-popover__header {
19
+ display: flex;
20
+ padding-bottom: var(--size-sm);
21
+ }
21
22
 
22
- .mobius-popover__close-button.mobius-button {
23
- padding: 0;
24
- border: none;
25
- margin-left: auto;
26
- background-color: transparent;
27
- color: var(--color-text-popover);
28
- }
23
+ .mobius-popover__close-button.mobius-button {
24
+ padding: 0;
25
+ border: none;
26
+ margin-left: auto;
27
+ background-color: transparent;
28
+ color: var(--color-text-popover);
29
+ }
29
30
 
30
- .mobius-popover__close-icon.mobius-icon {
31
- height: 1.1em;
32
- }
31
+ .mobius-popover__close-icon.mobius-icon {
32
+ height: 1.1em;
33
+ }
33
34
 
34
- .mobius-popover__arrow-icon path {
35
- fill: var(--color-background-popover);
35
+ .mobius-popover__arrow-icon path {
36
+ fill: var(--color-background-popover);
37
+ }
36
38
  }
package/src/components/Popover/Popover.story.styles.css CHANGED
@@ -1,26 +1,28 @@
1
- .popover-example {
2
- max-width: 500px;
3
- min-height: 220px;
4
- margin: 0 auto;
5
- }
1
+ @layer atoms {
2
+ .popover-example {
3
+ max-width: 500px;
4
+ min-height: 220px;
5
+ margin: 0 auto;
6
+ }
6
7
 
7
- .popover-example > .mobius-button {
8
- border: none;
9
- padding: 0;
10
- font-weight: var(--font-weight-normal);
11
- font-size: var(--font-size-2);
12
- color: var(--color-neutral-700);
13
- background-color: transparent;
14
- }
8
+ .popover-example > .mobius-button {
9
+ border: none;
10
+ padding: 0;
11
+ font-weight: var(--font-weight-normal);
12
+ font-size: var(--font-size-2);
13
+ color: var(--color-neutral-700);
14
+ background-color: transparent;
15
+ }
15
16
 
16
- .popover-example .mobius-button span {
17
- text-decoration: underline;
18
- text-decoration-style: dotted;
19
- text-underline-offset: 6px;
20
- margin-bottom: 6px;
21
- }
17
+ .popover-example .mobius-button span {
18
+ text-decoration: underline;
19
+ text-decoration-style: dotted;
20
+ text-underline-offset: 6px;
21
+ margin-bottom: 6px;
22
+ }
22
23
 
23
- .popover-example .mobius-popover__toggle svg {
24
- width: 16px;
25
- margin-left: 4px;
24
+ .popover-example .mobius-popover__toggle svg {
25
+ width: 16px;
26
+ margin-left: 4px;
27
+ }
26
28
  }
package/src/components/Progress/Progress.css CHANGED
@@ -1,30 +1,32 @@
1
- .mobius-progress__track {
2
- background-color: var(--color-background-light);
3
- margin-bottom: var(--size-xs);
4
- height: var(--size-xs);
5
- }
6
-
7
- .mobius-progress__label {
8
- display: block;
9
- margin-bottom: var(--size-xs);
10
- }
11
-
12
- .mobius-progress__bar {
13
- background-color: var(--color-primary);
14
- height: 100%;
15
- }
1
+ @layer atoms {
2
+ .mobius-progress__track {
3
+ background-color: var(--color-background-light);
4
+ margin-bottom: var(--size-xs);
5
+ height: var(--size-xs);
6
+ }
16
7
 
17
- .mobius-progress__track,
18
- .mobius-progress__bar {
19
- border-radius: 999px;
20
- }
8
+ .mobius-progress__label {
9
+ display: block;
10
+ margin-bottom: var(--size-xs);
11
+ }
21
12
 
22
- .mobius-progress {
23
- &.--is-primary .mobius-progress__bar {
13
+ .mobius-progress__bar {
24
14
  background-color: var(--color-primary);
15
+ height: 100%;
25
16
  }
26
17
 
27
- &.--is-secondary .mobius-progress__bar {
28
- background-color: var(--color-secondary);
18
+ .mobius-progress__track,
19
+ .mobius-progress__bar {
20
+ border-radius: 999px;
21
+ }
22
+
23
+ .mobius-progress {
24
+ &.--is-primary .mobius-progress__bar {
25
+ background-color: var(--color-primary);
26
+ }
27
+
28
+ &.--is-secondary .mobius-progress__bar {
29
+ background-color: var(--color-secondary);
30
+ }
29
31
  }
30
32
  }