@terraware/web-components 3.9.11 → 3.9.12

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 (28) hide show
  1. package/components/AntSwitch/styles.scss +3 -3
  2. package/components/Autocomplete/styles.scss +52 -52
  3. package/components/Button/styles.scss +141 -141
  4. package/components/DatePicker/styles.scss +31 -31
  5. package/components/DialogBox/styles.scss +35 -35
  6. package/components/EditableTable/index.d.ts +86 -0
  7. package/components/EditableTable/index.d.ts.map +1 -0
  8. package/components/EditableTable/index.js +179 -0
  9. package/components/ErrorBox/styles.scss +16 -16
  10. package/components/Icon/styles.scss +9 -9
  11. package/components/Map/styles.scss +20 -20
  12. package/components/Markdown/styles.scss +37 -37
  13. package/components/Message/styles.scss +63 -63
  14. package/components/MultiSelect/styles.scss +66 -66
  15. package/components/Navbar/styles.scss +39 -39
  16. package/components/Pill/styles.scss +10 -10
  17. package/components/PillList/styles.scss +2 -2
  18. package/components/PopoverMultiSelect/styles.scss +4 -4
  19. package/components/ProgressCircle/styles.scss +24 -24
  20. package/components/Select/styles.scss +107 -107
  21. package/components/Textfield/styles.scss +108 -108
  22. package/components/TimelineSlider/styles.scss +18 -18
  23. package/components/ViewPhotosDialog/styles.scss +3 -3
  24. package/license-report.html +1 -1
  25. package/package.json +2 -1
  26. package/stories/EditableTable.stories.d.ts +14 -0
  27. package/stories/EditableTable.stories.d.ts.map +1 -0
  28. package/style-dictionary-dist/terraware.scss +2 -1
package/components/Select/styles.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:math';
2
2
 
3
- @import '../../style-dictionary-dist/terraware.scss';
3
+ @use '../../style-dictionary-dist/terraware.scss';
4
4
 
5
5
  @font-face {
6
6
  font-family: 'Inter';
@@ -21,71 +21,71 @@
21
21
  }
22
22
 
23
23
  .textfield-label {
24
- font-family: $tw-fnt-frm-fld-label-font-family;
25
- font-size: $tw-fnt-frm-fld-label-font-size;
26
- font-weight: $tw-fnt-frm-fld-label-font-weight;
27
- line-height: $tw-fnt-frm-fld-label-line-height;
28
- color: $tw-clr-txt-secondary;
29
- margin-bottom: $tw-spc-base-xx-small;
24
+ font-family: terraware.$tw-fnt-frm-fld-label-font-family;
25
+ font-size: terraware.$tw-fnt-frm-fld-label-font-size;
26
+ font-weight: terraware.$tw-fnt-frm-fld-label-font-weight;
27
+ line-height: terraware.$tw-fnt-frm-fld-label-line-height;
28
+ color: terraware.$tw-clr-txt-secondary;
29
+ margin-bottom: terraware.$tw-spc-base-xx-small;
30
30
  display: block;
31
31
  width: 100%;
32
32
  max-width: 100%;
33
33
  }
34
34
 
35
35
  .textfield-help-text {
36
- font-family: $tw-fnt-frm-fld-help-text-font-family;
37
- font-size: $tw-fnt-frm-fld-help-text-font-size;
38
- font-weight: $tw-fnt-frm-fld-help-text-font-weight;
39
- line-height: $tw-fnt-frm-fld-help-text-line-height;
40
- color: $tw-clr-txt-secondary;
36
+ font-family: terraware.$tw-fnt-frm-fld-help-text-font-family;
37
+ font-size: terraware.$tw-fnt-frm-fld-help-text-font-size;
38
+ font-weight: terraware.$tw-fnt-frm-fld-help-text-font-weight;
39
+ line-height: terraware.$tw-fnt-frm-fld-help-text-line-height;
40
+ color: terraware.$tw-clr-txt-secondary;
41
41
  display: block;
42
42
  width: 100%;
43
43
  max-width: 100%;
44
- margin-top: $tw-spc-base-xx-small;
44
+ margin-top: terraware.$tw-spc-base-xx-small;
45
45
  }
46
46
 
47
47
  .textfield-value {
48
- background-color: $tw-clr-bg;
49
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
50
- padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
51
- border-radius: $tw-sz-base-x-small;
52
- border-width: $tw-sz-frm-fld-text-input-stroke;
48
+ background-color: terraware.$tw-clr-bg;
49
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
50
+ padding: #{terraware.$tw-spc-base-x-small - terraware.$tw-sz-frm-fld-text-input-stroke};
51
+ border-radius: terraware.$tw-sz-base-x-small;
52
+ border-width: terraware.$tw-sz-frm-fld-text-input-stroke;
53
53
  display: flex;
54
54
 
55
55
  &:hover {
56
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
56
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-hover;
57
57
  }
58
58
 
59
59
  &:active {
60
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
61
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
60
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-active;
61
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-active;
62
62
  }
63
63
 
64
64
  &:focus-within {
65
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
66
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
67
- outline-offset: -$tw-sz-frm-fld-text-input-stroke;
65
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-active;
66
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-active;
67
+ outline-offset: -(terraware.$tw-sz-frm-fld-text-input-stroke);
68
68
  }
69
69
 
70
70
  input {
71
71
  border: none;
72
72
  width: 100%;
73
- font-family: $tw-fnt-frm-fld-text-value-font-family;
74
- font-size: $tw-fnt-frm-fld-text-value-font-size;
75
- font-weight: $tw-fnt-frm-fld-text-value-font-weight;
76
- line-height: $tw-fnt-frm-fld-text-value-line-height;
77
- color: $tw-clr-txt;
73
+ font-family: terraware.$tw-fnt-frm-fld-text-value-font-family;
74
+ font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
75
+ font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
76
+ line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
77
+ color: terraware.$tw-clr-txt;
78
78
  cursor: pointer;
79
79
  background: transparent;
80
80
  padding-top: 0;
81
81
  padding-bottom: 0;
82
82
 
83
83
  &::placeholder {
84
- font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
85
- font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
86
- font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
87
- line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
88
- color: $tw-clr-txt-tertiary;
84
+ font-family: terraware.$tw-fnt-frm-fld-text-placeholder-font-family;
85
+ font-size: terraware.$tw-fnt-frm-fld-text-placeholder-font-size;
86
+ font-weight: terraware.$tw-fnt-frm-fld-text-placeholder-font-weight;
87
+ line-height: terraware.$tw-fnt-frm-fld-text-placeholder-line-height;
88
+ color: terraware.$tw-clr-txt-tertiary;
89
89
  }
90
90
 
91
91
  &:focus-visible {
@@ -94,102 +94,102 @@
94
94
  }
95
95
 
96
96
  &--display {
97
- font-family: $tw-fnt-frm-fld-text-value-font-family;
98
- font-size: $tw-fnt-frm-fld-text-value-font-size;
99
- font-weight: $tw-fnt-frm-fld-text-value-font-weight;
100
- line-height: $tw-fnt-frm-fld-text-value-line-height;
101
- padding: $tw-spc-base-x-small 0;
97
+ font-family: terraware.$tw-fnt-frm-fld-text-value-font-family;
98
+ font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
99
+ font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
100
+ line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
101
+ padding: terraware.$tw-spc-base-x-small 0;
102
102
  margin: 0;
103
103
  }
104
104
 
105
105
  &--disabled {
106
- opacity: $tw-opcty-semantic-off;
106
+ opacity: terraware.$tw-opcty-semantic-off;
107
107
  pointer-events: none;
108
108
 
109
109
  &:hover {
110
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
110
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
111
111
  }
112
112
 
113
113
  &:active {
114
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
114
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
115
115
  outline: 0;
116
116
  }
117
117
 
118
118
  &:focus-within {
119
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
119
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
120
120
  outline: 0;
121
121
  }
122
122
  }
123
123
 
124
124
  &--icon-right {
125
- width: $tw-fnt-frm-fld-text-value-line-height;
126
- height: $tw-fnt-frm-fld-text-value-line-height;
127
- fill: $tw-clr-icn;
128
- margin-left: $tw-spc-base-x-small;
125
+ width: terraware.$tw-fnt-frm-fld-text-value-line-height;
126
+ height: terraware.$tw-fnt-frm-fld-text-value-line-height;
127
+ fill: terraware.$tw-clr-icn;
128
+ margin-left: terraware.$tw-spc-base-x-small;
129
129
  flex-shrink: 0;
130
130
  }
131
131
 
132
132
  &--icon-left {
133
- width: $tw-fnt-frm-fld-text-value-line-height;
134
- height: $tw-fnt-frm-fld-text-value-line-height;
135
- fill: $tw-clr-icn-secondary;
136
- margin-right: $tw-spc-base-x-small;
133
+ width: terraware.$tw-fnt-frm-fld-text-value-line-height;
134
+ height: terraware.$tw-fnt-frm-fld-text-value-line-height;
135
+ fill: terraware.$tw-clr-icn-secondary;
136
+ margin-right: terraware.$tw-spc-base-x-small;
137
137
  }
138
138
 
139
139
  &--error {
140
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
141
- background-color: $tw-clr-bg-danger-tertiary;
140
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger;
141
+ background-color: terraware.$tw-clr-bg-danger-tertiary;
142
142
 
143
143
  &:hover {
144
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-hover;
144
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger-hover;
145
145
  }
146
146
 
147
147
  &:active {
148
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
149
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
148
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger-active;
149
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-danger-active;
150
150
  }
151
151
 
152
152
  &:focus-within {
153
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
154
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
155
- outline-offset: -$tw-sz-frm-fld-text-input-stroke;
153
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger-active;
154
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-danger-active;
155
+ outline-offset: -(terraware.$tw-sz-frm-fld-text-input-stroke);
156
156
  }
157
157
  }
158
158
 
159
159
  &--warning {
160
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
161
- background-color: $tw-clr-bg-warning-tertiary;
160
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-warning;
161
+ background-color: terraware.$tw-clr-bg-warning-tertiary;
162
162
 
163
163
  &:hover {
164
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-hover;
164
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-warning-hover;
165
165
  }
166
166
 
167
167
  &:active {
168
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
169
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
168
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-warning-active;
169
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-warning-active;
170
170
  }
171
171
 
172
172
  &:focus-within {
173
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
174
- outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
175
- outline-offset: -$tw-sz-frm-fld-text-input-stroke;
173
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-warning-active;
174
+ outline: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-warning-active;
175
+ outline-offset: -(terraware.$tw-sz-frm-fld-text-input-stroke);
176
176
  }
177
177
  }
178
178
 
179
179
  &--readonly {
180
- background-color: $tw-clr-bg-secondary;
180
+ background-color: terraware.$tw-clr-bg-secondary;
181
181
 
182
182
  &:hover {
183
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
183
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
184
184
  }
185
185
 
186
186
  &:active {
187
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
187
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
188
188
  outline: 0;
189
189
  }
190
190
 
191
191
  &:focus-within {
192
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
192
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-secondary;
193
193
  outline: 0;
194
194
  }
195
195
  }
@@ -203,42 +203,42 @@
203
203
  position: relative;
204
204
  display: flex;
205
205
  width: 100%;
206
- margin-top: $tw-spc-base-xx-small;
206
+ margin-top: terraware.$tw-spc-base-xx-small;
207
207
  }
208
208
 
209
209
  .textfield-error-text {
210
- font-family: $tw-fnt-frm-fld-error-text-font-family;
211
- font-size: $tw-fnt-frm-fld-error-text-font-size;
212
- font-weight: $tw-fnt-frm-fld-error-text-font-weight;
213
- line-height: $tw-fnt-frm-fld-error-text-line-height;
214
- color: $tw-clr-txt-danger;
210
+ font-family: terraware.$tw-fnt-frm-fld-error-text-font-family;
211
+ font-size: terraware.$tw-fnt-frm-fld-error-text-font-size;
212
+ font-weight: terraware.$tw-fnt-frm-fld-error-text-font-weight;
213
+ line-height: terraware.$tw-fnt-frm-fld-error-text-line-height;
214
+ color: terraware.$tw-clr-txt-danger;
215
215
  display: block;
216
216
  width: 100%;
217
217
  max-width: 100%;
218
218
 
219
219
  &--icon {
220
- fill: $tw-clr-icn-danger;
221
- width: $tw-fnt-frm-fld-error-text-line-height;
222
- height: $tw-fnt-frm-fld-error-text-line-height;
223
- margin-right: $tw-spc-base-x-small;
220
+ fill: terraware.$tw-clr-icn-danger;
221
+ width: terraware.$tw-fnt-frm-fld-error-text-line-height;
222
+ height: terraware.$tw-fnt-frm-fld-error-text-line-height;
223
+ margin-right: terraware.$tw-spc-base-x-small;
224
224
  }
225
225
  }
226
226
 
227
227
  .textfield-warning-text {
228
- font-family: $tw-fnt-frm-fld-warning-text-font-family;
229
- font-size: $tw-fnt-frm-fld-warning-text-font-size;
230
- font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
231
- line-height: $tw-fnt-frm-fld-warning-text-line-height;
232
- color: $tw-clr-txt-warning;
228
+ font-family: terraware.$tw-fnt-frm-fld-warning-text-font-family;
229
+ font-size: terraware.$tw-fnt-frm-fld-warning-text-font-size;
230
+ font-weight: terraware.$tw-fnt-frm-fld-warning-text-font-weight;
231
+ line-height: terraware.$tw-fnt-frm-fld-warning-text-line-height;
232
+ color: terraware.$tw-clr-txt-warning;
233
233
  display: block;
234
234
  width: 100%;
235
235
  max-width: 100%;
236
236
 
237
237
  &--icon {
238
- fill: $tw-clr-icn-warning;
239
- width: $tw-fnt-frm-fld-error-text-line-height;
240
- height: $tw-fnt-frm-fld-error-text-line-height;
241
- margin-right: $tw-spc-base-x-small;
238
+ fill: terraware.$tw-clr-icn-warning;
239
+ width: terraware.$tw-fnt-frm-fld-error-text-line-height;
240
+ height: terraware.$tw-fnt-frm-fld-error-text-line-height;
241
+ margin-right: terraware.$tw-spc-base-x-small;
242
242
  }
243
243
  }
244
244
 
@@ -248,11 +248,11 @@
248
248
  position: absolute;
249
249
  top: 44px;
250
250
  list-style-type: none;
251
- padding: $tw-spc-base-x-small 0;
252
- background: $tw-clr-bg;
253
- border: 1px solid $tw-clr-brdr-secondary;
254
- margin: $tw-spc-base-xx-small 0 0;
255
- border-radius: $tw-sz-base-x-small;
251
+ padding: terraware.$tw-spc-base-x-small 0;
252
+ background: terraware.$tw-clr-bg;
253
+ border: 1px solid terraware.$tw-clr-brdr-secondary;
254
+ margin: terraware.$tw-spc-base-xx-small 0 0;
255
+ border-radius: terraware.$tw-sz-base-x-small;
256
256
  max-height: 300px;
257
257
  overflow-y: auto;
258
258
 
@@ -267,31 +267,31 @@
267
267
  }
268
268
 
269
269
  .select-value {
270
- font-family: $tw-fnt-frm-fld-select-value-font-family;
271
- font-size: $tw-fnt-frm-fld-select-value-font-size;
272
- font-weight: $tw-fnt-frm-fld-select-value-font-weight;
273
- line-height: $tw-fnt-frm-fld-select-value-line-height;
274
- padding: $tw-spc-base-x-small $tw-spc-base-small;
270
+ font-family: terraware.$tw-fnt-frm-fld-select-value-font-family;
271
+ font-size: terraware.$tw-fnt-frm-fld-select-value-font-size;
272
+ font-weight: terraware.$tw-fnt-frm-fld-select-value-font-weight;
273
+ line-height: terraware.$tw-fnt-frm-fld-select-value-line-height;
274
+ padding: terraware.$tw-spc-base-x-small terraware.$tw-spc-base-small;
275
275
  cursor: pointer;
276
276
 
277
277
  &:hover {
278
- background-color: $tw-clr-bg-selected-ghost-hover;
279
- color: $tw-clr-txt;
278
+ background-color: terraware.$tw-clr-bg-selected-ghost-hover;
279
+ color: terraware.$tw-clr-txt;
280
280
  }
281
281
 
282
282
  &:active {
283
- background-color: $tw-clr-bg-selected-ghost-active;
284
- color: $tw-clr-txt;
283
+ background-color: terraware.$tw-clr-bg-selected-ghost-active;
284
+ color: terraware.$tw-clr-txt;
285
285
  }
286
286
 
287
287
  &--selected,
288
288
  &--selected:hover {
289
- background-color: $tw-clr-bg-selected;
290
- color: $tw-clr-txt-on-selected;
289
+ background-color: terraware.$tw-clr-bg-selected;
290
+ color: terraware.$tw-clr-txt-on-selected;
291
291
  }
292
292
 
293
293
  &--disabled {
294
- opacity: $tw-opcty-semantic-off;
294
+ opacity: terraware.$tw-opcty-semantic-off;
295
295
  }
296
296
  }
297
297
  }