@aws-amplify/ui 6.15.3 → 6.15.5

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 (31) hide show
  1. package/dist/esm/helpers/authenticator/textUtil.mjs +5 -2
  2. package/dist/esm/i18n/sentencePunctuation.mjs +72 -0
  3. package/dist/esm/machines/authenticator/actors/signUp.mjs +5 -0
  4. package/dist/esm/machines/authenticator/guards.mjs +3 -0
  5. package/dist/index.js +83 -2
  6. package/dist/styles/base.css +4 -4
  7. package/dist/styles/base.layer.css +4 -4
  8. package/dist/styles/button.css +58 -50
  9. package/dist/styles/button.layer.css +58 -50
  10. package/dist/styles/checkbox.css +3 -3
  11. package/dist/styles/checkbox.layer.css +3 -3
  12. package/dist/styles/fieldset.css +3 -1
  13. package/dist/styles/fieldset.layer.css +3 -1
  14. package/dist/styles/input.css +18 -16
  15. package/dist/styles/input.layer.css +18 -16
  16. package/dist/styles/loader.css +4 -2
  17. package/dist/styles/loader.layer.css +4 -2
  18. package/dist/styles/select.css +7 -5
  19. package/dist/styles/select.layer.css +7 -5
  20. package/dist/styles/stepperField.css +4 -4
  21. package/dist/styles/stepperField.layer.css +4 -4
  22. package/dist/styles/table.css +5 -3
  23. package/dist/styles/table.layer.css +5 -3
  24. package/dist/styles/textArea.css +7 -5
  25. package/dist/styles/textArea.layer.css +7 -5
  26. package/dist/styles/toggleButton.css +31 -21
  27. package/dist/styles/toggleButton.layer.css +31 -21
  28. package/dist/styles.css +144 -114
  29. package/dist/styles.layer.css +144 -114
  30. package/dist/types/i18n/sentencePunctuation.d.ts +32 -0
  31. package/package.json +2 -2
package/dist/styles/fieldset.css CHANGED
@@ -4,7 +4,6 @@
4
4
  flex-direction: var(--amplify-components-fieldset-flex-direction);
5
5
  gap: var(--amplify-components-fieldset-gap);
6
6
  /* Sizes */
7
- /* Variations */
8
7
  }
9
8
  .amplify-fieldset--small {
10
9
  gap: var(--amplify-components-fieldset-small-gap);
@@ -12,6 +11,9 @@
12
11
  .amplify-fieldset--large {
13
12
  gap: var(--amplify-components-fieldset-large-gap);
14
13
  }
14
+ .amplify-fieldset {
15
+ /* Variations */
16
+ }
15
17
  .amplify-fieldset--outlined {
16
18
  border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
17
19
  padding: var(--amplify-components-fieldset-outlined-padding);
package/dist/styles/fieldset.layer.css CHANGED
@@ -5,7 +5,6 @@
5
5
  flex-direction: var(--amplify-components-fieldset-flex-direction);
6
6
  gap: var(--amplify-components-fieldset-gap);
7
7
  /* Sizes */
8
- /* Variations */
9
8
  }
10
9
  .amplify-fieldset--small {
11
10
  gap: var(--amplify-components-fieldset-small-gap);
@@ -13,6 +12,9 @@
13
12
  .amplify-fieldset--large {
14
13
  gap: var(--amplify-components-fieldset-large-gap);
15
14
  }
15
+ .amplify-fieldset {
16
+ /* Variations */
17
+ }
16
18
  .amplify-fieldset--outlined {
17
19
  border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
18
20
  padding: var(--amplify-components-fieldset-outlined-padding);
package/dist/styles/input.css CHANGED
@@ -17,22 +17,6 @@
17
17
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
18
18
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
19
19
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
20
- -webkit-user-select: text;
21
- -moz-user-select: text;
22
- user-select: text;
23
- display: inline-block;
24
- --amplify-components-fieldcontrol-color: var(
25
- --amplify-components-input-color
26
- );
27
- --amplify-components-fieldcontrol-border-color: var(
28
- --amplify-components-input-border-color
29
- );
30
- --amplify-components-fieldcontrol-font-size: var(
31
- --amplify-components-input-font-size
32
- );
33
- --amplify-components-fieldcontrol-focus-border-color: var(
34
- --amplify-components-input-focus-border-color
35
- );
36
20
  }
37
21
  .amplify-input:focus {
38
22
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -81,4 +65,22 @@
81
65
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
82
66
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
83
67
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
68
+ }
69
+ .amplify-input {
70
+ -webkit-user-select: text;
71
+ -moz-user-select: text;
72
+ user-select: text;
73
+ display: inline-block;
74
+ --amplify-components-fieldcontrol-color: var(
75
+ --amplify-components-input-color
76
+ );
77
+ --amplify-components-fieldcontrol-border-color: var(
78
+ --amplify-components-input-border-color
79
+ );
80
+ --amplify-components-fieldcontrol-font-size: var(
81
+ --amplify-components-input-font-size
82
+ );
83
+ --amplify-components-fieldcontrol-focus-border-color: var(
84
+ --amplify-components-input-focus-border-color
85
+ );
84
86
  }
package/dist/styles/input.layer.css CHANGED
@@ -18,22 +18,6 @@
18
18
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
19
19
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
20
20
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
21
- -webkit-user-select: text;
22
- -moz-user-select: text;
23
- user-select: text;
24
- display: inline-block;
25
- --amplify-components-fieldcontrol-color: var(
26
- --amplify-components-input-color
27
- );
28
- --amplify-components-fieldcontrol-border-color: var(
29
- --amplify-components-input-border-color
30
- );
31
- --amplify-components-fieldcontrol-font-size: var(
32
- --amplify-components-input-font-size
33
- );
34
- --amplify-components-fieldcontrol-focus-border-color: var(
35
- --amplify-components-input-focus-border-color
36
- );
37
21
  }
38
22
  .amplify-input:focus {
39
23
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -83,4 +67,22 @@
83
67
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
84
68
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
85
69
  }
70
+ .amplify-input {
71
+ -webkit-user-select: text;
72
+ -moz-user-select: text;
73
+ user-select: text;
74
+ display: inline-block;
75
+ --amplify-components-fieldcontrol-color: var(
76
+ --amplify-components-input-color
77
+ );
78
+ --amplify-components-fieldcontrol-border-color: var(
79
+ --amplify-components-input-border-color
80
+ );
81
+ --amplify-components-fieldcontrol-font-size: var(
82
+ --amplify-components-input-font-size
83
+ );
84
+ --amplify-components-fieldcontrol-focus-border-color: var(
85
+ --amplify-components-input-focus-border-color
86
+ );
87
+ }
86
88
  }
package/dist/styles/loader.css CHANGED
@@ -17,8 +17,6 @@
17
17
  animation-timing-function: linear;
18
18
  animation-iteration-count: infinite;
19
19
  animation-duration: var(--amplify-components-loader-animation-duration);
20
- stroke: var(--amplify-components-loader-stroke-filled);
21
- stroke-linecap: var(--amplify-components-loader-stroke-linecap);
22
20
  }
23
21
  @media (prefers-reduced-motion) {
24
22
  .amplify-loader circle:last-of-type {
@@ -27,6 +25,10 @@
27
25
  stroke-dashoffset: 50%;
28
26
  }
29
27
  }
28
+ .amplify-loader circle:last-of-type {
29
+ stroke: var(--amplify-components-loader-stroke-filled);
30
+ stroke-linecap: var(--amplify-components-loader-stroke-linecap);
31
+ }
30
32
  .amplify-loader line:last-of-type {
31
33
  stroke: var(--amplify-components-loader-linear-stroke-filled);
32
34
  stroke-dasharray: 50% 200%;
package/dist/styles/loader.layer.css CHANGED
@@ -18,8 +18,6 @@
18
18
  animation-timing-function: linear;
19
19
  animation-iteration-count: infinite;
20
20
  animation-duration: var(--amplify-components-loader-animation-duration);
21
- stroke: var(--amplify-components-loader-stroke-filled);
22
- stroke-linecap: var(--amplify-components-loader-stroke-linecap);
23
21
  }
24
22
  @media (prefers-reduced-motion) {
25
23
  .amplify-loader circle:last-of-type {
@@ -28,6 +26,10 @@
28
26
  stroke-dashoffset: 50%;
29
27
  }
30
28
  }
29
+ .amplify-loader circle:last-of-type {
30
+ stroke: var(--amplify-components-loader-stroke-filled);
31
+ stroke-linecap: var(--amplify-components-loader-stroke-linecap);
32
+ }
31
33
  .amplify-loader line:last-of-type {
32
34
  stroke: var(--amplify-components-loader-linear-stroke-filled);
33
35
  stroke-dasharray: 50% 200%;
package/dist/styles/select.css CHANGED
@@ -41,11 +41,6 @@
41
41
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
42
42
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
43
43
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
44
- background-color: var(--amplify-components-select-background-color);
45
- color: var(--amplify-components-select-color);
46
- min-width: var(--amplify-components-select-min-width);
47
- padding-inline-end: var(--amplify-components-select-padding-inline-end);
48
- white-space: var(--amplify-components-select-white-space);
49
44
  }
50
45
  .amplify-select:focus {
51
46
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -95,6 +90,13 @@
95
90
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
96
91
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
97
92
  }
93
+ .amplify-select {
94
+ background-color: var(--amplify-components-select-background-color);
95
+ color: var(--amplify-components-select-color);
96
+ min-width: var(--amplify-components-select-min-width);
97
+ padding-inline-end: var(--amplify-components-select-padding-inline-end);
98
+ white-space: var(--amplify-components-select-white-space);
99
+ }
98
100
  .amplify-select option {
99
101
  background-color: var(--amplify-components-select-option-background-color);
100
102
  color: var(--amplify-components-select-option-color);
package/dist/styles/select.layer.css CHANGED
@@ -42,11 +42,6 @@
42
42
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
43
43
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
44
44
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
45
- background-color: var(--amplify-components-select-background-color);
46
- color: var(--amplify-components-select-color);
47
- min-width: var(--amplify-components-select-min-width);
48
- padding-inline-end: var(--amplify-components-select-padding-inline-end);
49
- white-space: var(--amplify-components-select-white-space);
50
45
  }
51
46
  .amplify-select:focus {
52
47
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -96,6 +91,13 @@
96
91
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
97
92
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
98
93
  }
94
+ .amplify-select {
95
+ background-color: var(--amplify-components-select-background-color);
96
+ color: var(--amplify-components-select-color);
97
+ min-width: var(--amplify-components-select-min-width);
98
+ padding-inline-end: var(--amplify-components-select-padding-inline-end);
99
+ white-space: var(--amplify-components-select-white-space);
100
+ }
99
101
  .amplify-select option {
100
102
  background-color: var(--amplify-components-select-option-background-color);
101
103
  color: var(--amplify-components-select-option-color);
package/dist/styles/stepperField.css CHANGED
@@ -63,14 +63,14 @@
63
63
  border-inline-start: none;
64
64
  }
65
65
 
66
- .amplify-stepperfield__input {
67
- -moz-appearance: textfield;
68
- text-align: var(--amplify-components-stepperfield-input-text-align);
69
- }
70
66
  .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
71
67
  -webkit-appearance: none;
72
68
  margin: 0;
73
69
  }
70
+ .amplify-stepperfield__input {
71
+ -moz-appearance: textfield;
72
+ text-align: var(--amplify-components-stepperfield-input-text-align);
73
+ }
74
74
  .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
75
75
  border-inline-start: none;
76
76
  border-inline-end: none;
package/dist/styles/stepperField.layer.css CHANGED
@@ -64,14 +64,14 @@
64
64
  border-inline-start: none;
65
65
  }
66
66
 
67
- .amplify-stepperfield__input {
68
- -moz-appearance: textfield;
69
- text-align: var(--amplify-components-stepperfield-input-text-align);
70
- }
71
67
  .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
72
68
  -webkit-appearance: none;
73
69
  margin: 0;
74
70
  }
71
+ .amplify-stepperfield__input {
72
+ -moz-appearance: textfield;
73
+ text-align: var(--amplify-components-stepperfield-input-text-align);
74
+ }
75
75
  .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
76
76
  border-inline-start: none;
77
77
  border-inline-end: none;
package/dist/styles/table.css CHANGED
@@ -28,9 +28,6 @@
28
28
  --amplify-components-table-header-border-width
29
29
  )
30
30
  0px var(--amplify-components-table-header-border-width) 0px;
31
- /**
32
- * Data attribute stylings
33
- */
34
31
  }
35
32
  .amplify-table--small {
36
33
  --amplify-internal-table-caption-font-size: var(
@@ -144,6 +141,11 @@
144
141
  .amplify-table__td:last-child {
145
142
  border-right-width: var(--amplify-components-table-data-border-width);
146
143
  }
144
+ .amplify-table {
145
+ /**
146
+ * Data attribute stylings
147
+ */
148
+ }
147
149
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
148
150
  background-color: var(--amplify-components-table-row-hover-background-color);
149
151
  }
package/dist/styles/table.layer.css CHANGED
@@ -29,9 +29,6 @@
29
29
  --amplify-components-table-header-border-width
30
30
  )
31
31
  0px var(--amplify-components-table-header-border-width) 0px;
32
- /**
33
- * Data attribute stylings
34
- */
35
32
  }
36
33
  .amplify-table--small {
37
34
  --amplify-internal-table-caption-font-size: var(
@@ -145,6 +142,11 @@
145
142
  .amplify-table__td:last-child {
146
143
  border-right-width: var(--amplify-components-table-data-border-width);
147
144
  }
145
+ .amplify-table {
146
+ /**
147
+ * Data attribute stylings
148
+ */
149
+ }
148
150
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
149
151
  background-color: var(--amplify-components-table-row-hover-background-color);
150
152
  }
package/dist/styles/textArea.css CHANGED
@@ -17,11 +17,6 @@
17
17
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
18
18
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
19
19
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
20
- -webkit-user-select: text;
21
- -moz-user-select: text;
22
- user-select: text;
23
- white-space: pre-wrap;
24
- max-height: 100%;
25
20
  }
26
21
  .amplify-textarea:focus {
27
22
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -70,4 +65,11 @@
70
65
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
71
66
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
72
67
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
68
+ }
69
+ .amplify-textarea {
70
+ -webkit-user-select: text;
71
+ -moz-user-select: text;
72
+ user-select: text;
73
+ white-space: pre-wrap;
74
+ max-height: 100%;
73
75
  }
package/dist/styles/textArea.layer.css CHANGED
@@ -18,11 +18,6 @@
18
18
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
19
19
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
20
20
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
21
- -webkit-user-select: text;
22
- -moz-user-select: text;
23
- user-select: text;
24
- white-space: pre-wrap;
25
- max-height: 100%;
26
21
  }
27
22
  .amplify-textarea:focus {
28
23
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -72,4 +67,11 @@
72
67
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
73
68
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
74
69
  }
70
+ .amplify-textarea {
71
+ -webkit-user-select: text;
72
+ -moz-user-select: text;
73
+ user-select: text;
74
+ white-space: pre-wrap;
75
+ max-height: 100%;
76
+ }
75
77
  }
package/dist/styles/toggleButton.css CHANGED
@@ -18,6 +18,13 @@
18
18
  --amplify-internal-togglebutton-focus-color: var(
19
19
  --amplify-components-togglebutton-focus-color
20
20
  );
21
+ }
22
+ .amplify-togglebutton:focus {
23
+ background-color: var(--amplify-internal-togglebutton-focus-background-color);
24
+ border-color: var(--amplify-internal-togglebutton-focus-border-color);
25
+ color: var(--amplify-internal-togglebutton-focus-color);
26
+ }
27
+ .amplify-togglebutton {
21
28
  --amplify-internal-togglebutton-hover-background-color: var(
22
29
  --amplify-components-togglebutton-hover-background-color
23
30
  );
@@ -27,9 +34,21 @@
27
34
  --amplify-internal-togglebutton-hover-color: var(
28
35
  --amplify-internal-togglebutton-color
29
36
  );
37
+ }
38
+ .amplify-togglebutton:hover {
39
+ background-color: var(--amplify-internal-togglebutton-hover-background-color);
40
+ border-color: var(--amplify-internal-togglebutton-hover-border-color);
41
+ color: var(--amplify-internal-togglebutton-hover-color);
42
+ }
43
+ .amplify-togglebutton {
30
44
  --amplify-internal-togglebutton-active-background-color: var(
31
45
  --amplify-components-togglebutton-active-background-color
32
46
  );
47
+ }
48
+ .amplify-togglebutton:active {
49
+ background-color: var(--amplify-internal-togglebutton-active-background-color);
50
+ }
51
+ .amplify-togglebutton {
33
52
  --amplify-internal-togglebutton-disabled-background-color: var(
34
53
  --amplify-components-togglebutton-disabled-background-color
35
54
  );
@@ -40,19 +59,6 @@
40
59
  --amplify-components-togglebutton-disabled-color
41
60
  );
42
61
  }
43
- .amplify-togglebutton:focus {
44
- background-color: var(--amplify-internal-togglebutton-focus-background-color);
45
- border-color: var(--amplify-internal-togglebutton-focus-border-color);
46
- color: var(--amplify-internal-togglebutton-focus-color);
47
- }
48
- .amplify-togglebutton:hover {
49
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
50
- border-color: var(--amplify-internal-togglebutton-hover-border-color);
51
- color: var(--amplify-internal-togglebutton-hover-color);
52
- }
53
- .amplify-togglebutton:active {
54
- background-color: var(--amplify-internal-togglebutton-active-background-color);
55
- }
56
62
  .amplify-togglebutton:disabled {
57
63
  background-color: var(--amplify-internal-togglebutton-disabled-background-color);
58
64
  border-color: var(--amplify-internal-togglebutton-disabled-border-color);
@@ -122,6 +128,11 @@
122
128
  --amplify-internal-togglebutton-focus-color: var(
123
129
  --amplify-internal-togglebutton-primary-focus-color
124
130
  );
131
+ }
132
+ .amplify-togglebutton--primary:focus {
133
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
134
+ }
135
+ .amplify-togglebutton--primary {
125
136
  --amplify-internal-togglebutton-primary-hover-background-color: var(
126
137
  --amplify-components-togglebutton-primary-hover-background-color
127
138
  );
@@ -159,9 +170,6 @@
159
170
  --amplify-internal-togglebutton-primary-disabled-color
160
171
  );
161
172
  }
162
- .amplify-togglebutton--primary:focus {
163
- box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
164
- }
165
173
  .amplify-togglebutton--pressed {
166
174
  --amplify-internal-togglebutton-primary-background-color: var(
167
175
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -190,6 +198,13 @@
190
198
  --amplify-internal-togglebutton-primary-hover-color: var(
191
199
  --amplify-components-togglebutton-primary-pressed-hover-color
192
200
  );
201
+ }
202
+ .amplify-togglebutton--pressed:hover {
203
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
204
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow
205
+ );
206
+ }
207
+ .amplify-togglebutton--pressed {
193
208
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
194
209
  --amplify-components-togglebutton-primary-pressed-background-color
195
210
  );
@@ -200,11 +215,6 @@
200
215
  --amplify-components-togglebutton-primary-pressed-color
201
216
  );
202
217
  }
203
- .amplify-togglebutton--pressed:hover {
204
- --amplify-internal-togglebutton-primary-focus-box-shadow: var(
205
- --amplify-components-togglebutton-primary-pressed-hover-box-shadow
206
- );
207
- }
208
218
  .amplify-togglebutton--link {
209
219
  --amplify-internal-togglebutton-link-background-color: var(
210
220
  --amplify-components-togglebutton-link-background-color
package/dist/styles/toggleButton.layer.css CHANGED
@@ -19,6 +19,13 @@
19
19
  --amplify-internal-togglebutton-focus-color: var(
20
20
  --amplify-components-togglebutton-focus-color
21
21
  );
22
+ }
23
+ .amplify-togglebutton:focus {
24
+ background-color: var(--amplify-internal-togglebutton-focus-background-color);
25
+ border-color: var(--amplify-internal-togglebutton-focus-border-color);
26
+ color: var(--amplify-internal-togglebutton-focus-color);
27
+ }
28
+ .amplify-togglebutton {
22
29
  --amplify-internal-togglebutton-hover-background-color: var(
23
30
  --amplify-components-togglebutton-hover-background-color
24
31
  );
@@ -28,9 +35,21 @@
28
35
  --amplify-internal-togglebutton-hover-color: var(
29
36
  --amplify-internal-togglebutton-color
30
37
  );
38
+ }
39
+ .amplify-togglebutton:hover {
40
+ background-color: var(--amplify-internal-togglebutton-hover-background-color);
41
+ border-color: var(--amplify-internal-togglebutton-hover-border-color);
42
+ color: var(--amplify-internal-togglebutton-hover-color);
43
+ }
44
+ .amplify-togglebutton {
31
45
  --amplify-internal-togglebutton-active-background-color: var(
32
46
  --amplify-components-togglebutton-active-background-color
33
47
  );
48
+ }
49
+ .amplify-togglebutton:active {
50
+ background-color: var(--amplify-internal-togglebutton-active-background-color);
51
+ }
52
+ .amplify-togglebutton {
34
53
  --amplify-internal-togglebutton-disabled-background-color: var(
35
54
  --amplify-components-togglebutton-disabled-background-color
36
55
  );
@@ -41,19 +60,6 @@
41
60
  --amplify-components-togglebutton-disabled-color
42
61
  );
43
62
  }
44
- .amplify-togglebutton:focus {
45
- background-color: var(--amplify-internal-togglebutton-focus-background-color);
46
- border-color: var(--amplify-internal-togglebutton-focus-border-color);
47
- color: var(--amplify-internal-togglebutton-focus-color);
48
- }
49
- .amplify-togglebutton:hover {
50
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
51
- border-color: var(--amplify-internal-togglebutton-hover-border-color);
52
- color: var(--amplify-internal-togglebutton-hover-color);
53
- }
54
- .amplify-togglebutton:active {
55
- background-color: var(--amplify-internal-togglebutton-active-background-color);
56
- }
57
63
  .amplify-togglebutton:disabled {
58
64
  background-color: var(--amplify-internal-togglebutton-disabled-background-color);
59
65
  border-color: var(--amplify-internal-togglebutton-disabled-border-color);
@@ -123,6 +129,11 @@
123
129
  --amplify-internal-togglebutton-focus-color: var(
124
130
  --amplify-internal-togglebutton-primary-focus-color
125
131
  );
132
+ }
133
+ .amplify-togglebutton--primary:focus {
134
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
135
+ }
136
+ .amplify-togglebutton--primary {
126
137
  --amplify-internal-togglebutton-primary-hover-background-color: var(
127
138
  --amplify-components-togglebutton-primary-hover-background-color
128
139
  );
@@ -160,9 +171,6 @@
160
171
  --amplify-internal-togglebutton-primary-disabled-color
161
172
  );
162
173
  }
163
- .amplify-togglebutton--primary:focus {
164
- box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
165
- }
166
174
  .amplify-togglebutton--pressed {
167
175
  --amplify-internal-togglebutton-primary-background-color: var(
168
176
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -191,6 +199,13 @@
191
199
  --amplify-internal-togglebutton-primary-hover-color: var(
192
200
  --amplify-components-togglebutton-primary-pressed-hover-color
193
201
  );
202
+ }
203
+ .amplify-togglebutton--pressed:hover {
204
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
205
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow
206
+ );
207
+ }
208
+ .amplify-togglebutton--pressed {
194
209
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
195
210
  --amplify-components-togglebutton-primary-pressed-background-color
196
211
  );
@@ -201,11 +216,6 @@
201
216
  --amplify-components-togglebutton-primary-pressed-color
202
217
  );
203
218
  }
204
- .amplify-togglebutton--pressed:hover {
205
- --amplify-internal-togglebutton-primary-focus-box-shadow: var(
206
- --amplify-components-togglebutton-primary-pressed-hover-box-shadow
207
- );
208
- }
209
219
  .amplify-togglebutton--link {
210
220
  --amplify-internal-togglebutton-link-background-color: var(
211
221
  --amplify-components-togglebutton-link-background-color