@terraware/web-components 1.0.46 → 1.0.48

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 (21) hide show
  1. package/components/Autocomplete/styles.scss +3 -2
  2. package/components/Button/styles.scss +59 -58
  3. package/components/DatePicker/styles.scss +9 -8
  4. package/components/DialogBox/styles.scss +7 -6
  5. package/components/ErrorBox/styles.scss +5 -4
  6. package/components/Message/styles.scss +31 -30
  7. package/components/Navbar/styles.scss +21 -20
  8. package/components/ProgressCircle/styles.scss +6 -5
  9. package/components/Select/styles.scss +37 -36
  10. package/components/Textfield/styles.scss +30 -29
  11. package/components/table/index.d.ts.map +1 -1
  12. package/components/table/index.js +7 -2
  13. package/license-report.html +1 -1
  14. package/package.json +1 -1
  15. package/stories/Theme.stories.d.ts.map +1 -1
  16. package/style-dictionary-dist2/TerrawareTheme2.d.ts +355 -0
  17. package/style-dictionary-dist2/TerrawareTheme2.d.ts.map +1 -0
  18. package/style-dictionary-dist2/TerrawareTheme2.js +186 -0
  19. package/style-dictionary-dist2/terraware.scss +171 -0
  20. package/theme.d.ts.map +1 -1
  21. package/theme.js +3 -1
package/components/Navbar/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/navbar_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -6,7 +7,7 @@
6
7
  }
7
8
 
8
9
  .navbar {
9
- background-color: $tw-clr-nvgtn-side-nav-item-fill;
10
+ background-color: $tw-clr-bg-hover;
10
11
  height: 100%;
11
12
  position: fixed;
12
13
  z-index: 1100;
@@ -15,7 +16,7 @@
15
16
  flex-direction: column;
16
17
 
17
18
  .logo {
18
- background-color: $tw-clr-nvgtn-side-nav-item-fill;
19
+ background-color: $tw-clr-bg-hover;
19
20
  padding-bottom: $tw-spc-base-small 0;
20
21
  margin-bottom: $tw-spc-base-small 0;
21
22
 
@@ -25,10 +26,10 @@
25
26
  }
26
27
  }
27
28
  .nav-section {
28
- background-color: $tw-clr-nvgtn-side-nav-section-fill;
29
+ background-color: $tw-clr-bg-hover;
29
30
  padding: $tw-spc-base-x-small $tw-spc-base-small;
30
31
  .divider {
31
- border-top: $tw-sz-dvdr-stroke solid $tw-clr-dvdr-fill;
32
+ border-top: $tw-sz-dvdr-stroke solid $tw-clr-brdr-tertiary;
32
33
  }
33
34
 
34
35
  &--title {
@@ -37,7 +38,7 @@
37
38
  font-weight: $tw-fnt-nvgtn-side-nav-section-title-font-weight;
38
39
  line-height: $tw-fnt-nvgtn-side-nav-section-title-line-height;
39
40
  text-transform: $tw-fnt-nvgtn-side-nav-section-title-text-transform;
40
- color: $tw-clr-nvgtn-side-nav-section-title;
41
+ color: $tw-clr-txt;
41
42
  display: block;
42
43
  margin-top: $tw-spc-base-small;
43
44
  }
@@ -48,8 +49,8 @@
48
49
  font-size: $tw-fnt-nvgtn-side-nav-item-label-font-size;
49
50
  font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
50
51
  line-height: $tw-fnt-nvgtn-side-nav-item-label-line-height;
51
- color: $tw-clr-nvgtn-side-nav-item-label;
52
- background-color: $tw-clr-nvgtn-side-nav-item-fill;
52
+ color: $tw-clr-txt;
53
+ background-color: $tw-clr-bg-hover;
53
54
 
54
55
  .nav-item-content {
55
56
  padding: $tw-sz-base-small;
@@ -71,14 +72,14 @@
71
72
  }
72
73
 
73
74
  &:hover {
74
- background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
75
+ background-color: $tw-clr-bg-secondary;
75
76
  // .nav-item {
76
- // background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
77
+ // background-color: $tw-clr-bg-secondary;
77
78
  // }
78
79
  }
79
80
 
80
81
  &:active {
81
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
82
+ background-color: $tw-clr-bg-secondary-hover;
82
83
  }
83
84
 
84
85
  button {
@@ -89,27 +90,27 @@
89
90
  }
90
91
 
91
92
  &--children-selected {
92
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
93
+ background-color: $tw-clr-bg-secondary-hover;
93
94
 
94
95
  &:hover {
95
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
96
+ background-color: $tw-clr-bg-secondary-hover;
96
97
 
97
98
  & > .nav-item-content {
98
- background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
99
+ background-color: $tw-clr-bg-secondary;
99
100
  }
100
101
  }
101
102
 
102
103
  .nav-item {
103
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
104
+ background-color: $tw-clr-bg-secondary-hover;
104
105
 
105
106
  &:hover {
106
- background-color: $tw-clr-nvgtn-side-nav-item-fill-hover;
107
+ background-color: $tw-clr-bg-secondary;
107
108
  }
108
109
  }
109
110
  }
110
111
 
111
112
  &--selected {
112
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
113
+ background-color: $tw-clr-bg-secondary-hover;
113
114
  position: relative;
114
115
  }
115
116
 
@@ -121,11 +122,11 @@
121
122
  top: 0;
122
123
  bottom: 0;
123
124
  width: $tw-sz-nvgtn-side-nav-item-indicator;
124
- background-color: $tw-clr-nvgtn-side-nav-item-indicator-fill;
125
+ background-color: $tw-clr-bg-selected;
125
126
  }
126
127
 
127
128
  &--icon {
128
- fill: $tw-clr-icon-fill-text;
129
+ fill: $tw-clr-icn;
129
130
  margin-right: $tw-spc-base-x-small;
130
131
  line-height: $tw-sz-icon-small;
131
132
  height: $tw-sz-icon-small;
@@ -138,13 +139,13 @@
138
139
  margin-left: $tw-spc-base-x-small;
139
140
 
140
141
  path {
141
- fill: $tw-clr-icon-fill-passive;
142
+ fill: $tw-clr-icn-secondary;
142
143
  }
143
144
  }
144
145
 
145
146
  .subnavbar .nav-item {
146
147
  padding-right: $tw-spc-base-small;
147
- background-color: $tw-clr-nvgtn-side-nav-item-fill-active;
148
+ background-color: $tw-clr-bg-secondary-hover;
148
149
 
149
150
  &-content {
150
151
  padding-left: calc(#{$tw-spc-base-small} * 2);
package/components/ProgressCircle/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/progressCircle_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  .circle-container {
4
5
  position: relative;
@@ -8,11 +9,11 @@
8
9
  .circle-fill {
9
10
  position: absolute;
10
11
  left: 0;
11
- color: $tw-clr-base-semantic-productive;
12
+ color: $tw-clr-bg-brand;
12
13
  }
13
14
 
14
15
  .circle-track {
15
- color: $tw-clr-base-semantic-productive-bg !important;
16
+ color: $tw-clr-bg-brand-tertiary !important;
16
17
  &--small {
17
18
  width: $tw-spc-base-x-large !important;
18
19
  height: $tw-spc-base-x-large !important;
@@ -65,20 +66,20 @@
65
66
  font-size: $tw-fnt-prgrss-circle-value-small-font-size;
66
67
  font-weight: $tw-fnt-prgrss-circle-value-small-font-weight;
67
68
  line-height: $tw-fnt-prgrss-circle-value-small-line-height;
68
- color: $tw-clr-text-fill;
69
+ color: $tw-clr-txt;
69
70
  }
70
71
  &--medium {
71
72
  font-family: $tw-fnt-prgrss-circle-value-medium-font-family;
72
73
  font-size: $tw-fnt-prgrss-circle-value-medium-font-size;
73
74
  font-weight: $tw-fnt-prgrss-circle-value-medium-font-weight;
74
75
  line-height: $tw-fnt-prgrss-circle-value-medium-line-height;
75
- color: $tw-clr-text-fill;
76
+ color: $tw-clr-txt;
76
77
  }
77
78
  &--large {
78
79
  font-family: $tw-fnt-prgrss-circle-value-large-font-family;
79
80
  font-size: $tw-fnt-prgrss-circle-value-large-font-size;
80
81
  font-weight: $tw-fnt-prgrss-circle-value-large-font-weight;
81
82
  line-height: $tw-fnt-prgrss-circle-value-large-line-height;
82
- color: $tw-clr-text-fill;
83
+ color: $tw-clr-txt;
83
84
  }
84
85
  }
package/components/Select/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '../../style-dictionary-dist/textfield_variables.scss';
2
+ @import '../../style-dictionary-dist2/terraware.scss';
2
3
 
3
4
  @font-face {
4
5
  font-family: 'Inter';
@@ -34,7 +35,7 @@
34
35
  font-size: $tw-fnt-frm-fld-help-text-font-size;
35
36
  font-weight: $tw-fnt-frm-fld-help-text-font-weight;
36
37
  line-height: $tw-fnt-frm-fld-help-text-line-height;
37
- color: $tw-clr-frm-fld-help-text;
38
+ color: $tw-clr-txt-secondary;
38
39
  display: block;
39
40
  width: 100%;
40
41
  max-width: 100%;
@@ -46,7 +47,7 @@
46
47
  font-size: $tw-fnt-frm-fld-text-value-font-size;
47
48
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
48
49
  line-height: $tw-fnt-frm-fld-text-value-line-height;
49
- color: $tw-clr-frm-fld-value;
50
+ color: $tw-clr-txt;
50
51
  padding-top: 0;
51
52
  padding-bottom: 0;
52
53
  &::placeholder {
@@ -62,20 +63,20 @@
62
63
  }
63
64
 
64
65
  .textfield-value {
65
- background-color: $tw-clr-frm-fld-text-input-fill;
66
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
66
+ background-color: $tw-clr-bg;
67
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
67
68
  padding: $tw-spc-base-x-small;
68
69
  border-radius: $tw-rds-frm-fld-text-input;
69
70
  border-width: $tw-sz-frm-fld-text-input-stroke;
70
71
  display: flex;
71
72
 
72
73
  &:hover {
73
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
74
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
74
75
  }
75
76
 
76
77
  &:active {
77
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
78
- outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
78
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
79
+ outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
79
80
  }
80
81
 
81
82
  input {
@@ -85,7 +86,7 @@
85
86
  font-size: $tw-fnt-frm-fld-text-value-font-size;
86
87
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
87
88
  line-height: $tw-fnt-frm-fld-text-value-line-height;
88
- color: $tw-clr-frm-fld-value;
89
+ color: $tw-clr-txt;
89
90
  background: transparent;
90
91
  padding-top: 0;
91
92
  padding-bottom: 0;
@@ -114,62 +115,62 @@
114
115
  opacity: $tw-opcty-semantic-off;
115
116
  pointer-events: none;
116
117
  &:hover {
117
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
118
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
118
119
  }
119
120
 
120
121
  &:active {
121
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
122
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
122
123
  }
123
124
  }
124
125
 
125
126
  &--icon-right {
126
127
  width: $tw-fnt-frm-fld-text-value-line-height;
127
128
  height: $tw-fnt-frm-fld-text-value-line-height;
128
- fill: $tw-clr-frm-fld-value;
129
+ fill: $tw-clr-txt;
129
130
  }
130
131
 
131
132
  &--icon-left {
132
133
  width: $tw-fnt-frm-fld-text-value-line-height;
133
134
  height: $tw-fnt-frm-fld-text-value-line-height;
134
- fill: $tw-clr-frm-fld-value;
135
+ fill: $tw-clr-txt;
135
136
  margin-right: $tw-spc-base-x-small;
136
137
  }
137
138
 
138
139
  &--error {
139
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
140
- background-color: $tw-clr-frm-fld-text-input-fill-error;
140
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
141
+ background-color: $tw-clr-bg-danger-tertiary;
141
142
 
142
143
  &:hover {
143
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
144
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
144
145
  }
145
146
 
146
147
  &:active {
147
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
148
- outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
148
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
149
+ outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
149
150
  }
150
151
  }
151
152
 
152
153
  &--warning {
153
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
154
- background-color: $tw-clr-frm-fld-text-input-fill-warning;
154
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
155
+ background-color: $tw-clr-bg-warning-tertiary;
155
156
 
156
157
  &:hover {
157
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
158
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
158
159
  }
159
160
 
160
161
  &:active {
161
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
162
- outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
162
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
163
+ outline: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
163
164
  }
164
165
  }
165
166
 
166
167
  &--readonly {
167
168
  &:hover {
168
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
169
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
169
170
  }
170
171
 
171
172
  &:active {
172
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
173
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
173
174
  }
174
175
  }
175
176
 
@@ -183,13 +184,13 @@
183
184
  font-size: $tw-fnt-frm-fld-error-text-font-size;
184
185
  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
185
186
  line-height: $tw-fnt-frm-fld-error-text-line-height;
186
- color: $tw-clr-frm-fld-error-text;
187
+ color: $tw-clr-txt-danger;
187
188
  display: block;
188
189
  width: 100%;
189
190
  max-width: 100%;
190
191
 
191
192
  &--icon {
192
- fill: $tw-clr-frm-fld-error-text;
193
+ fill: $tw-clr-txt-danger;
193
194
  width: $tw-fnt-frm-fld-error-text-line-height;
194
195
  height: $tw-fnt-frm-fld-error-text-line-height;
195
196
  margin-right: $tw-spc-base-x-small;
@@ -201,13 +202,13 @@
201
202
  font-size: $tw-fnt-frm-fld-warning-text-font-size;
202
203
  font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
203
204
  line-height: $tw-fnt-frm-fld-warning-text-line-height;
204
- color: $tw-clr-frm-fld-warning-text;
205
+ color: $tw-clr-txt-warning;
205
206
  display: block;
206
207
  width: 100%;
207
208
  max-width: 100%;
208
209
 
209
210
  &--icon {
210
- fill: $tw-clr-frm-fld-warning-text;
211
+ fill: $tw-clr-txt-warning;
211
212
  width: $tw-fnt-frm-fld-error-text-line-height;
212
213
  height: $tw-fnt-frm-fld-error-text-line-height;
213
214
  margin-right: $tw-spc-base-x-small;
@@ -228,8 +229,8 @@
228
229
  top: 42px;
229
230
  list-style-type: none;
230
231
  padding: $tw-spc-base-x-small 0;
231
- background: $tw-clr-frm-fld-select-menu-fill;
232
- border: 1px solid $tw-clr-frm-fld-select-menu-stroke;
232
+ background: $tw-clr-bg;
233
+ border: 1px solid $tw-clr-brdr-secondary;
233
234
  margin: 0;
234
235
  margin-top: $tw-spc-base-xx-small;
235
236
  border-radius: $tw-rds-frm-fld-text-input;
@@ -250,18 +251,18 @@
250
251
  cursor: pointer;
251
252
 
252
253
  &:hover {
253
- background-color: $tw-clr-frm-fld-select-menu-item-fill-hover;
254
- color: $tw-clr-frm-fld-value;
254
+ background-color: $tw-clr-bg-selected-ghost-hover;
255
+ color: $tw-clr-txt;
255
256
  }
256
257
 
257
258
  &:active {
258
- background-color: $tw-clr-frm-fld-select-menu-item-fill-active;
259
- color: $tw-clr-frm-fld-value;
259
+ background-color: $tw-clr-bg-selected-ghost-active;
260
+ color: $tw-clr-txt;
260
261
  }
261
262
 
262
263
  &--selected {
263
- background-color: $tw-clr-frm-fld-select-menu-item-fill-selected;
264
- color: $tw-clr-frm-fld-select-value-selected;
264
+ background-color: $tw-clr-bg-selected;
265
+ color: $tw-clr-txt-on-selected;
265
266
  }
266
267
 
267
268
  &--disabled {
package/components/Textfield/styles.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use 'sass:math';
2
2
 
3
3
  @import '../../style-dictionary-dist/textfield_variables.scss';
4
+ @import '../../style-dictionary-dist2/terraware.scss';
4
5
 
5
6
  @font-face {
6
7
  font-family: 'Inter';
@@ -15,7 +16,7 @@
15
16
  font-size: $tw-fnt-frm-fld-label-font-size;
16
17
  font-weight: $tw-fnt-frm-fld-label-font-weight;
17
18
  line-height: $tw-fnt-frm-fld-label-line-height;
18
- color: $tw-clr-frm-fld-label;
19
+ color: $tw-clr-txt-secondary;
19
20
  margin-bottom: $tw-spc-base-xx-small;
20
21
  display: block;
21
22
  width: 100%;
@@ -29,7 +30,7 @@
29
30
  &--icon-tooltip {
30
31
  width: $tw-fnt-frm-fld-label-line-height;
31
32
  height: $tw-fnt-frm-fld-label-line-height;
32
- fill: $tw-clr-frm-fld-value;
33
+ fill: $tw-clr-txt;
33
34
  }
34
35
  }
35
36
 
@@ -38,7 +39,7 @@
38
39
  font-size: $tw-fnt-frm-fld-help-text-font-size;
39
40
  font-weight: $tw-fnt-frm-fld-help-text-font-weight;
40
41
  line-height: $tw-fnt-frm-fld-help-text-line-height;
41
- color: $tw-clr-frm-fld-help-text;
42
+ color: $tw-clr-txt-secondary;
42
43
  display: block;
43
44
  width: 100%;
44
45
  max-width: 100%;
@@ -50,7 +51,7 @@
50
51
  font-size: $tw-fnt-frm-fld-text-value-font-size;
51
52
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
52
53
  line-height: $tw-fnt-frm-fld-text-value-line-height;
53
- color: $tw-clr-frm-fld-value;
54
+ color: $tw-clr-txt;
54
55
  padding-top: 0;
55
56
  padding-bottom: 0;
56
57
  &::placeholder {
@@ -66,8 +67,8 @@
66
67
  }
67
68
 
68
69
  .textfield-value {
69
- background-color: $tw-clr-frm-fld-text-input-fill;
70
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
70
+ background-color: $tw-clr-bg;
71
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
71
72
  padding: $tw-spc-base-x-small;
72
73
  border-radius: $tw-rds-frm-fld-text-input;
73
74
  border-width: $tw-sz-frm-fld-text-input-stroke;
@@ -76,12 +77,12 @@
76
77
  display: flex;
77
78
 
78
79
  &:hover {
79
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
80
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
80
81
  }
81
82
 
82
83
  &:active {
83
- border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
84
- outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
84
+ border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
85
+ outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-brdr-hover;
85
86
  }
86
87
 
87
88
  input {
@@ -91,7 +92,7 @@
91
92
  font-size: $tw-fnt-frm-fld-text-value-font-size;
92
93
  font-weight: $tw-fnt-frm-fld-text-value-font-weight;
93
94
  line-height: $tw-fnt-frm-fld-text-value-line-height;
94
- color: $tw-clr-frm-fld-value;
95
+ color: $tw-clr-txt;
95
96
  background: transparent;
96
97
  padding-top: 0;
97
98
  padding-bottom: 0;
@@ -119,11 +120,11 @@
119
120
  &--disabled {
120
121
  opacity: $tw-opcty-semantic-off;
121
122
  &:hover {
122
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
123
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
123
124
  }
124
125
 
125
126
  &:active {
126
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
127
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
127
128
  }
128
129
  }
129
130
 
@@ -135,50 +136,50 @@
135
136
  &--icon-right {
136
137
  width: $tw-fnt-frm-fld-text-value-line-height;
137
138
  height: $tw-fnt-frm-fld-text-value-line-height;
138
- fill: $tw-clr-frm-fld-value;
139
+ fill: $tw-clr-txt;
139
140
  }
140
141
 
141
142
  &--icon-left {
142
143
  width: $tw-fnt-frm-fld-text-value-line-height;
143
144
  height: $tw-fnt-frm-fld-text-value-line-height;
144
- fill: $tw-clr-frm-fld-value;
145
+ fill: $tw-clr-txt;
145
146
  margin-right: $tw-spc-base-x-small;
146
147
  }
147
148
 
148
149
  &--error {
149
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
150
- background-color: $tw-clr-frm-fld-text-input-fill-error;
150
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
151
+ background-color: $tw-clr-bg-danger-tertiary;
151
152
 
152
153
  &:hover {
153
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
154
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
154
155
  }
155
156
 
156
157
  &:active {
157
- border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-error;
158
+ border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger;
158
159
  }
159
160
  }
160
161
 
161
162
  &--warning {
162
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
163
- background-color: $tw-clr-frm-fld-text-input-fill-warning;
163
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
164
+ background-color: $tw-clr-bg-warning-tertiary;
164
165
 
165
166
  &:hover {
166
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
167
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
167
168
  }
168
169
 
169
170
  &:active {
170
- border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-warning;
171
+ border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning;
171
172
  }
172
173
  }
173
174
 
174
175
  &--readonly {
175
- background-color: $tw-clr-frm-fld-text-input-fill-read-only;
176
+ background-color: $tw-clr-bg-secondary;
176
177
  &:hover {
177
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
178
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
178
179
  }
179
180
 
180
181
  &:active {
181
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
182
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
182
183
  }
183
184
  }
184
185
  }
@@ -188,13 +189,13 @@
188
189
  font-size: $tw-fnt-frm-fld-error-text-font-size;
189
190
  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
190
191
  line-height: $tw-fnt-frm-fld-error-text-line-height;
191
- color: $tw-clr-frm-fld-error-text;
192
+ color: $tw-clr-txt-danger;
192
193
  display: block;
193
194
  width: 100%;
194
195
  max-width: 100%;
195
196
 
196
197
  &--icon {
197
- fill: $tw-clr-frm-fld-error-text;
198
+ fill: $tw-clr-txt-danger;
198
199
  width: $tw-fnt-frm-fld-error-text-line-height;
199
200
  height: $tw-fnt-frm-fld-error-text-line-height;
200
201
  margin-right: $tw-spc-base-x-small;
@@ -206,13 +207,13 @@
206
207
  font-size: $tw-fnt-frm-fld-warning-text-font-size;
207
208
  font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
208
209
  line-height: $tw-fnt-frm-fld-warning-text-line-height;
209
- color: $tw-clr-frm-fld-warning-text;
210
+ color: $tw-clr-txt-warning;
210
211
  display: block;
211
212
  width: 100%;
212
213
  max-width: 100%;
213
214
 
214
215
  &--icon {
215
- fill: $tw-clr-frm-fld-warning-text;
216
+ fill: $tw-clr-txt-warning;
216
217
  width: $tw-fnt-frm-fld-error-text-line-height;
217
218
  height: $tw-fnt-frm-fld-error-text-line-height;
218
219
  margin-right: $tw-spc-base-x-small;
package/components/table/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
package/components/table/index.js CHANGED
@@ -222,7 +222,12 @@ function EnhancedTable(_ref) {
222
222
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showTopBar && /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbar.default, {
223
223
  numSelected: selectedRows ? selectedRows.length : 0,
224
224
  topBarButtons: topBarButtons
225
- }), /*#__PURE__*/_react.default.createElement(_core.DndContext, {
225
+ }), /*#__PURE__*/_react.default.createElement(_material.TableContainer, {
226
+ id: id,
227
+ sx: {
228
+ overflowX: 'visible'
229
+ }
230
+ }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
226
231
  sensors: sensors,
227
232
  onDragEnd: handleDragEnd
228
233
  }, /*#__PURE__*/_react.default.createElement(_material.Table, {
@@ -292,7 +297,7 @@ function EnhancedTable(_ref) {
292
297
  index: index,
293
298
  row: row
294
299
  }));
295
- })))), showPagination && /*#__PURE__*/_react.default.createElement(_material.Box, {
300
+ }))))), showPagination && /*#__PURE__*/_react.default.createElement(_material.Box, {
296
301
  display: "flex",
297
302
  alignItems: "center",
298
303
  justifyContent: "flex-end",