@momentum-design/components 0.53.5 → 0.53.6

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 (7) hide show
  1. package/dist/browser/index.js +62 -34
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/button/button.styles.js +62 -34
  4. package/dist/custom-elements.json +336 -336
  5. package/dist/react/index.d.ts +2 -2
  6. package/dist/react/index.js +2 -2
  7. package/package.json +1 -1
package/dist/components/button/button.styles.js CHANGED
@@ -12,7 +12,7 @@ const styles = css `
12
12
  --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
13
13
  --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
14
14
  --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
15
-
15
+
16
16
  --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
17
17
  --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
18
18
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
@@ -27,6 +27,11 @@ const styles = css `
27
27
  --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
28
28
  --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
29
29
 
30
+ --mdc-button-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
31
+ --mdc-button-active-hover-background-color: var(--mds-color-theme-button-secondary-active-hover);
32
+ --mdc-button-active-pressed-background-color: var(--mds-color-theme-button-secondary-active-pressed);
33
+ --mdc-button-active-disabled-background-color: var(--mds-color-theme-button-secondary-active-disabled);
34
+
30
35
  --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
31
36
  --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
32
37
  --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
@@ -36,17 +41,17 @@ const styles = css `
36
41
  --mdc-button-postfix-icon-size: 1rem;
37
42
  }
38
43
 
39
- :host([size="64"]) {
44
+ :host([size='64']) {
40
45
  --mdc-button-prefix-icon-size: 2rem;
41
46
  --mdc-button-postfix-icon-size: 2rem;
42
47
  }
43
48
 
44
- :host([size="52"]) {
49
+ :host([size='52']) {
45
50
  --mdc-button-prefix-icon-size: 1.75rem;
46
51
  --mdc-button-postfix-icon-size: 1.75rem;
47
52
  }
48
53
 
49
- :host([size="40"]) {
54
+ :host([size='40']) {
50
55
  --mdc-button-prefix-icon-size: 1.25rem;
51
56
  --mdc-button-postfix-icon-size: 1.25rem;
52
57
  }
@@ -60,101 +65,124 @@ const styles = css `
60
65
  --mdc-icon-size: var(--mdc-button-postfix-icon-size);
61
66
  }
62
67
 
63
- :host([active]){
68
+ :host([active]) {
69
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
70
+ }
71
+
72
+ :host([active]:not([variant='primary'])) {
73
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
74
+ background: var(--mdc-button-active-background-color);
75
+ }
76
+ :host([active]:not([variant='primary']):hover) {
77
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
78
+ background: var(--mdc-button-active-hover-background-color);
79
+ }
80
+ :host([active]:not([variant='primary']):active),
81
+ :host([active]:not([variant='primary']).pressed) {
82
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
83
+ background: var(--mdc-button-active-pressed-background-color);
84
+ }
85
+ :host([active]:not([variant='primary'])[disabled]),
86
+ :host([active]:not([variant='primary'])[soft-disabled]) {
64
87
  font-weight: var(--mds-font-apps-body-large-bold-font-weight);
88
+ background: var(--mdc-button-active-disabled-background-color);
65
89
  }
66
90
 
67
- :host([variant="primary"]){
91
+ :host([variant='primary']) {
68
92
  background: var(--mdc-button-primary-background-color);
69
93
  color: var(--mdc-button-primary-color);
70
94
  }
71
- :host([variant="primary"]:hover){
95
+ :host([variant='primary']:hover) {
72
96
  background: var(--mdc-button-primary-hover-background-color);
73
97
  }
74
- :host([variant="primary"]:active), :host([variant="primary"].pressed){
98
+ :host([variant='primary']:active),
99
+ :host([variant='primary'].pressed) {
75
100
  background: var(--mdc-button-primary-pressed-background-color);
76
101
  }
77
- :host([variant="primary"][disabled]), :host([variant="primary"][soft-disabled]){
102
+ :host([variant='primary'][disabled]),
103
+ :host([variant='primary'][soft-disabled]) {
78
104
  background: var(--mdc-button-primary-disabled-background-color);
79
105
  color: var(--mdc-button-primary-disabled-color);
80
106
  cursor: auto;
81
107
  }
82
108
 
83
- :host([variant="secondary"]){
109
+ :host([variant='secondary']) {
84
110
  color: var(--mdc-button-secondary-color);
85
111
  border-color: var(--mdc-button-secondary-border-color);
86
112
  }
87
- :host([variant="secondary"]:hover){
113
+ :host([variant='secondary']:hover) {
88
114
  background: var(--mdc-button-secondary-hover-background-color);
89
115
  }
90
- :host([variant="secondary"]:active), :host([variant="secondary"].pressed){
116
+ :host([variant='secondary']:active),
117
+ :host([variant='secondary'].pressed) {
91
118
  background: var(--mdc-button-secondary-pressed-background-color);
92
119
  }
93
- :host([variant="secondary"][disabled]),
94
- :host([variant="secondary"][soft-disabled]){
120
+ :host([variant='secondary'][disabled]),
121
+ :host([variant='secondary'][soft-disabled]) {
95
122
  color: var(--mdc-button-primary-disabled-color);
96
123
  border-color: var(--mdc-button-secondary-disabled-border-color);
97
124
  background: var(--mdc-button-secondary-disabled-background-color);
98
125
  cursor: auto;
99
126
  }
100
127
 
101
- :host([variant="tertiary"]){
128
+ :host([variant='tertiary']) {
102
129
  border-color: transparent;
103
130
  color: var(--mdc-button-tertiary-color);
104
131
  }
105
- :host([variant="tertiary"]:hover){
132
+ :host([variant='tertiary']:hover) {
106
133
  background: var(--mdc-button-tertiary-hover-background-color);
107
134
  }
108
- :host([variant="tertiary"]:active), :host([variant="tertiary"].pressed){
135
+ :host([variant='tertiary']:active),
136
+ :host([variant='tertiary'].pressed) {
109
137
  background: var(--mdc-button-tertiary-pressed-background-color);
110
138
  }
111
- :host([variant="tertiary"][disabled]),
112
- :host([variant="tertiary"][soft-disabled]){
139
+ :host([variant='tertiary'][disabled]),
140
+ :host([variant='tertiary'][soft-disabled]) {
113
141
  color: var(--mdc-button-tertiary-disabled-color);
114
142
  background: var(--mdc-button-tertiary-disabled-background-color);
115
143
  cursor: auto;
116
144
  }
117
145
 
118
- :host([size="64"][data-btn-type='icon']),
119
- :host([size="52"][data-btn-type='icon']),
120
- :host([size="40"][data-btn-type='icon']),
121
- :host([size="32"][data-btn-type='icon']),
122
- :host([size="28"][data-btn-type='icon']),
123
- :host([size="24"][data-btn-type='icon']){
146
+ :host([size='64'][data-btn-type='icon']),
147
+ :host([size='52'][data-btn-type='icon']),
148
+ :host([size='40'][data-btn-type='icon']),
149
+ :host([size='32'][data-btn-type='icon']),
150
+ :host([size='28'][data-btn-type='icon']),
151
+ :host([size='24'][data-btn-type='icon']) {
124
152
  border-radius: 6.25rem;
125
153
  aspect-ratio: 1;
126
154
  padding: unset;
127
155
  }
128
- :host([size="40"]){
156
+ :host([size='40']) {
129
157
  font-size: var(--mds-font-size-body-large);
130
158
  line-height: var(--mdc-button-line-height-size-40);
131
159
  padding: 0 1rem;
132
160
  gap: 0.5rem;
133
161
  }
134
- :host([size="32"]){
162
+ :host([size='32']) {
135
163
  font-size: var(--mds-font-size-body-large);
136
164
  line-height: var(--mdc-button-line-height-size-32);
137
165
  padding: 0 0.75rem;
138
166
  gap: 0.375rem;
139
167
  }
140
- :host([size="28"]){
168
+ :host([size='28']) {
141
169
  font-size: var(--mds-font-size-body-midsize);
142
170
  line-height: var(--mdc-button-line-height-size-28);
143
171
  padding: 0 0.75rem;
144
172
  gap: 0.375rem;
145
173
  }
146
- :host([size="24"]){
174
+ :host([size='24']) {
147
175
  font-size: var(--mds-font-size-body-small);
148
176
  line-height: var(--mdc-button-line-height-size-24);
149
177
  padding: 0 0.625rem;
150
178
  gap: 0.25rem;
151
179
  }
152
- :host([size="20"]){
180
+ :host([size='20']) {
153
181
  padding: 0.0625rem;
154
182
  aspect-ratio: 1;
155
183
  }
156
184
 
157
- :host([color="accent"]){
185
+ :host([color='accent']) {
158
186
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
159
187
  --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
160
188
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
@@ -165,7 +193,7 @@ const styles = css `
165
193
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
166
194
  --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
167
195
  }
168
- :host([color="positive"]){
196
+ :host([color='positive']) {
169
197
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
170
198
  --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
171
199
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
@@ -176,7 +204,7 @@ const styles = css `
176
204
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
177
205
  --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
178
206
  }
179
- :host([color="negative"]){
207
+ :host([color='negative']) {
180
208
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
181
209
  --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
182
210
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
@@ -187,7 +215,7 @@ const styles = css `
187
215
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
188
216
  --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
189
217
  }
190
- :host([color="promotional"]){
218
+ :host([color='promotional']) {
191
219
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
192
220
  --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
193
221
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);