@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/Button/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -16,12 +16,12 @@
16
16
  }
17
17
 
18
18
  &:focus {
19
- outline: $tw-sz-btn-stroke solid $tw-clr-brdr-focus;
19
+ outline: terraware.$tw-sz-btn-stroke solid terraware.$tw-clr-brdr-focus;
20
20
  outline-offset: 2px;
21
21
  }
22
22
 
23
23
  &:disabled {
24
- opacity: $tw-opcty-semantic-off;
24
+ opacity: terraware.$tw-opcty-semantic-off;
25
25
  }
26
26
 
27
27
  .tw-icon {
@@ -29,44 +29,44 @@
29
29
  }
30
30
 
31
31
  &--small {
32
- min-height: $tw-sz-btn-small-height;
33
- font-size: $tw-fnt-btn-label-small-font-size;
34
- font-weight: $tw-fnt-btn-label-small-font-weight;
35
- font-family: $tw-fnt-btn-label-small-font-family;
36
- line-height: $tw-fnt-btn-label-small-line-height;
37
- min-width: $tw-sz-btn-small-min-width;
38
- padding: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2)
39
- calc(#{$tw-sz-btn-small-height}/ 2);
40
- border-radius: calc(#{$tw-sz-btn-small-height} / 2);
32
+ min-height: terraware.$tw-sz-btn-small-height;
33
+ font-size: terraware.$tw-fnt-btn-label-small-font-size;
34
+ font-weight: terraware.$tw-fnt-btn-label-small-font-weight;
35
+ font-family: terraware.$tw-fnt-btn-label-small-font-family;
36
+ line-height: terraware.$tw-fnt-btn-label-small-line-height;
37
+ min-width: terraware.$tw-sz-btn-small-min-width;
38
+ padding: calc((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2)
39
+ calc(#{terraware.$tw-sz-btn-small-height}/ 2);
40
+ border-radius: calc(#{terraware.$tw-sz-btn-small-height} / 2);
41
41
 
42
42
  .tw-icon--small {
43
- height: $tw-fnt-btn-label-small-line-height;
44
- width: $tw-fnt-btn-label-small-line-height;
45
- margin-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
43
+ height: terraware.$tw-fnt-btn-label-small-line-height;
44
+ width: terraware.$tw-fnt-btn-label-small-line-height;
45
+ margin-right: calc((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2);
46
46
 
47
47
  &.icon-spinner {
48
48
  margin-right: 0;
49
49
  }
50
50
  }
51
51
  .icon-right {
52
- height: $tw-fnt-btn-label-small-line-height;
53
- width: $tw-fnt-btn-label-small-line-height;
54
- margin-left: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
52
+ height: terraware.$tw-fnt-btn-label-small-line-height;
53
+ width: terraware.$tw-fnt-btn-label-small-line-height;
54
+ margin-left: calc((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2);
55
55
  margin-right: 0;
56
56
  }
57
57
  &.button-with-icon {
58
58
  padding-left: calc(
59
- (#{$tw-sz-btn-small-height} / 2) - (((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2))
59
+ (#{terraware.$tw-sz-btn-small-height} / 2) - (((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2))
60
60
  );
61
61
  }
62
62
  &.button-with-right-icon {
63
63
  padding-right: calc(
64
- (#{$tw-sz-btn-small-height} / 2) - (((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2))
64
+ (#{terraware.$tw-sz-btn-small-height} / 2) - (((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2))
65
65
  );
66
66
  }
67
67
  &.button-no-label.button-with-icon {
68
- padding-left: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
69
- padding-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
68
+ padding-left: calc((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2);
69
+ padding-right: calc((#{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2);
70
70
  .tw-icon--small {
71
71
  margin-right: 0;
72
72
  }
@@ -74,41 +74,41 @@
74
74
  }
75
75
 
76
76
  &--medium {
77
- min-height: $tw-sz-btn-medium-height;
78
- font-size: $tw-fnt-btn-label-medium-font-size;
79
- font-weight: $tw-fnt-btn-label-medium-font-weight;
80
- font-family: $tw-fnt-btn-label-medium-font-family;
81
- line-height: $tw-fnt-btn-label-medium-line-height;
82
- min-width: $tw-sz-btn-medium-min-width;
83
- padding: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2)
84
- calc(#{$tw-sz-btn-medium-height}/ 2);
85
- border-radius: calc(#{$tw-sz-btn-medium-height} / 2);
77
+ min-height: terraware.$tw-sz-btn-medium-height;
78
+ font-size: terraware.$tw-fnt-btn-label-medium-font-size;
79
+ font-weight: terraware.$tw-fnt-btn-label-medium-font-weight;
80
+ font-family: terraware.$tw-fnt-btn-label-medium-font-family;
81
+ line-height: terraware.$tw-fnt-btn-label-medium-line-height;
82
+ min-width: terraware.$tw-sz-btn-medium-min-width;
83
+ padding: calc((#{terraware.$tw-sz-btn-medium-height} - #{terraware.$tw-fnt-btn-label-medium-line-height}) / 2)
84
+ calc(#{terraware.$tw-sz-btn-medium-height}/ 2);
85
+ border-radius: calc(#{terraware.$tw-sz-btn-medium-height} / 2);
86
86
 
87
87
  .tw-icon--medium {
88
- height: $tw-fnt-btn-label-medium-line-height;
89
- width: $tw-fnt-btn-label-medium-line-height;
90
- margin-right: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
88
+ height: terraware.$tw-fnt-btn-label-medium-line-height;
89
+ width: terraware.$tw-fnt-btn-label-medium-line-height;
90
+ margin-right: calc((#{terraware.$tw-sz-btn-medium-height} - #{terraware.$tw-fnt-btn-label-medium-line-height}) / 2);
91
91
 
92
92
  &.icon-spinner {
93
93
  margin-right: 0;
94
94
  }
95
95
  }
96
96
  .icon-right {
97
- height: $tw-fnt-btn-label-medium-line-height;
98
- width: $tw-fnt-btn-label-medium-line-height;
99
- margin-left: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
97
+ height: terraware.$tw-fnt-btn-label-medium-line-height;
98
+ width: terraware.$tw-fnt-btn-label-medium-line-height;
99
+ margin-left: calc((#{terraware.$tw-sz-btn-medium-height} - #{terraware.$tw-fnt-btn-label-medium-line-height}) / 2);
100
100
  margin-right: 0;
101
101
  }
102
102
  &.button-with-icon {
103
103
  padding-left: calc(
104
- (#{$tw-sz-btn-medium-height} / 2) -
105
- (((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2))
104
+ (#{terraware.$tw-sz-btn-medium-height} / 2) -
105
+ (((#{terraware.$tw-sz-btn-medium-height} - #{terraware.$tw-fnt-btn-label-medium-line-height}) / 2))
106
106
  );
107
107
  }
108
108
  &.button-with-right-icon {
109
109
  padding-right: calc(
110
- (#{$tw-sz-btn-medium-height} / 2) -
111
- (((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2))
110
+ (#{terraware.$tw-sz-btn-medium-height} / 2) -
111
+ (((#{terraware.$tw-sz-btn-medium-height} - #{terraware.$tw-fnt-btn-label-medium-line-height}) / 2))
112
112
  );
113
113
  }
114
114
  &.button-no-label.button-with-icon {
@@ -121,39 +121,39 @@
121
121
  }
122
122
 
123
123
  &--large {
124
- min-height: $tw-sz-btn-large-height;
125
- font-size: $tw-fnt-btn-label-large-font-size;
126
- font-weight: $tw-fnt-btn-label-large-font-weight;
127
- font-family: $tw-fnt-btn-label-large-font-family;
128
- line-height: $tw-fnt-btn-label-large-line-height;
129
- min-width: $tw-sz-btn-large-min-width;
130
- padding: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2)
131
- calc(#{$tw-sz-btn-large-height}/ 2);
132
- border-radius: calc(#{$tw-sz-btn-large-height} / 2);
124
+ min-height: terraware.$tw-sz-btn-large-height;
125
+ font-size: terraware.$tw-fnt-btn-label-large-font-size;
126
+ font-weight: terraware.$tw-fnt-btn-label-large-font-weight;
127
+ font-family: terraware.$tw-fnt-btn-label-large-font-family;
128
+ line-height: terraware.$tw-fnt-btn-label-large-line-height;
129
+ min-width: terraware.$tw-sz-btn-large-min-width;
130
+ padding: calc((#{terraware.$tw-sz-btn-large-height} - #{terraware.$tw-fnt-btn-label-large-line-height}) / 2)
131
+ calc(#{terraware.$tw-sz-btn-large-height}/ 2);
132
+ border-radius: calc(#{terraware.$tw-sz-btn-large-height} / 2);
133
133
 
134
134
  .tw-icon--large {
135
- height: $tw-fnt-btn-label-large-line-height;
136
- width: $tw-fnt-btn-label-large-line-height;
137
- margin-right: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
135
+ height: terraware.$tw-fnt-btn-label-large-line-height;
136
+ width: terraware.$tw-fnt-btn-label-large-line-height;
137
+ margin-right: calc((#{terraware.$tw-sz-btn-large-height} - #{terraware.$tw-fnt-btn-label-large-line-height}) / 2);
138
138
 
139
139
  &.icon-spinner {
140
140
  margin-right: 0;
141
141
  }
142
142
  }
143
143
  .icon-right {
144
- height: $tw-fnt-btn-label-large-line-height;
145
- width: $tw-fnt-btn-label-large-line-height;
146
- margin-left: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
144
+ height: terraware.$tw-fnt-btn-label-large-line-height;
145
+ width: terraware.$tw-fnt-btn-label-large-line-height;
146
+ margin-left: calc((#{terraware.$tw-sz-btn-large-height} - #{terraware.$tw-fnt-btn-label-large-line-height}) / 2);
147
147
  margin-right: 0;
148
148
  }
149
149
  &.button-with-icon {
150
150
  padding-left: calc(
151
- (#{$tw-sz-btn-large-height} / 2) - (((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2))
151
+ (#{terraware.$tw-sz-btn-large-height} / 2) - (((#{terraware.$tw-sz-btn-large-height} - #{terraware.$tw-fnt-btn-label-large-line-height}) / 2))
152
152
  );
153
153
  }
154
154
  &.button-with-right-icon {
155
155
  padding-right: calc(
156
- (#{$tw-sz-btn-large-height} / 2) - (((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2))
156
+ (#{terraware.$tw-sz-btn-large-height} / 2) - (((#{terraware.$tw-sz-btn-large-height} - #{terraware.$tw-fnt-btn-label-large-line-height}) / 2))
157
157
  );
158
158
  }
159
159
  &.button-no-label.button-with-icon {
@@ -166,41 +166,41 @@
166
166
  }
167
167
 
168
168
  &--xlarge {
169
- min-height: $tw-sz-btn-x-large-height;
170
- font-size: $tw-fnt-btn-label-x-large-font-size;
171
- font-weight: $tw-fnt-btn-label-x-large-font-weight;
172
- font-family: $tw-fnt-btn-label-x-large-font-family;
173
- line-height: $tw-fnt-btn-label-x-large-line-height;
174
- min-width: $tw-sz-btn-x-large-min-width;
175
- padding: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2)
176
- calc(#{$tw-sz-btn-x-large-height}/ 2);
177
- border-radius: calc(#{$tw-sz-btn-x-large-height} / 2);
169
+ min-height: terraware.$tw-sz-btn-x-large-height;
170
+ font-size: terraware.$tw-fnt-btn-label-x-large-font-size;
171
+ font-weight: terraware.$tw-fnt-btn-label-x-large-font-weight;
172
+ font-family: terraware.$tw-fnt-btn-label-x-large-font-family;
173
+ line-height: terraware.$tw-fnt-btn-label-x-large-line-height;
174
+ min-width: terraware.$tw-sz-btn-x-large-min-width;
175
+ padding: calc((#{terraware.$tw-sz-btn-x-large-height} - #{terraware.$tw-fnt-btn-label-x-large-line-height}) / 2)
176
+ calc(#{terraware.$tw-sz-btn-x-large-height}/ 2);
177
+ border-radius: calc(#{terraware.$tw-sz-btn-x-large-height} / 2);
178
178
 
179
179
  .tw-icon--xlarge {
180
- height: $tw-fnt-btn-label-x-large-line-height;
181
- width: $tw-fnt-btn-label-x-large-line-height;
182
- margin-right: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
180
+ height: terraware.$tw-fnt-btn-label-x-large-line-height;
181
+ width: terraware.$tw-fnt-btn-label-x-large-line-height;
182
+ margin-right: calc((#{terraware.$tw-sz-btn-x-large-height} - #{terraware.$tw-fnt-btn-label-x-large-line-height}) / 2);
183
183
 
184
184
  &.icon-spinner {
185
185
  margin-right: 0;
186
186
  }
187
187
  }
188
188
  .icon-right {
189
- height: $tw-fnt-btn-label-x-large-line-height;
190
- width: $tw-fnt-btn-label-x-large-line-height;
191
- margin-left: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
189
+ height: terraware.$tw-fnt-btn-label-x-large-line-height;
190
+ width: terraware.$tw-fnt-btn-label-x-large-line-height;
191
+ margin-left: calc((#{terraware.$tw-sz-btn-x-large-height} - #{terraware.$tw-fnt-btn-label-x-large-line-height}) / 2);
192
192
  margin-right: 0;
193
193
  }
194
194
  &.button-with-icon {
195
195
  padding-left: calc(
196
- (#{$tw-sz-btn-x-large-height} / 2) -
197
- (((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2))
196
+ (#{terraware.$tw-sz-btn-x-large-height} / 2) -
197
+ (((#{terraware.$tw-sz-btn-x-large-height} - #{terraware.$tw-fnt-btn-label-x-large-line-height}) / 2))
198
198
  );
199
199
  }
200
200
  &.button-with-right-icon {
201
201
  padding-right: calc(
202
- (#{$tw-sz-btn-x-large-height} / 2) -
203
- (((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2))
202
+ (#{terraware.$tw-sz-btn-x-large-height} / 2) -
203
+ (((#{terraware.$tw-sz-btn-x-large-height} - #{terraware.$tw-fnt-btn-label-x-large-line-height}) / 2))
204
204
  );
205
205
  }
206
206
  &.button-no-label.button-with-icon {
@@ -218,145 +218,145 @@
218
218
  }
219
219
 
220
220
  .productive-primary {
221
- background-color: $tw-clr-bg-brand;
222
- color: $tw-clr-txt-on-brand;
221
+ background-color: terraware.$tw-clr-bg-brand;
222
+ color: terraware.$tw-clr-txt-on-brand;
223
223
 
224
224
  svg {
225
- fill: $tw-clr-icn-on-brand;
225
+ fill: terraware.$tw-clr-icn-on-brand;
226
226
  }
227
227
 
228
228
  &:hover {
229
- background: $tw-clr-bg-brand-hover;
229
+ background: terraware.$tw-clr-bg-brand-hover;
230
230
  }
231
231
 
232
232
  &:active {
233
- background-color: $tw-clr-bg-brand-active;
233
+ background-color: terraware.$tw-clr-bg-brand-active;
234
234
  }
235
235
  }
236
236
 
237
237
  .productive-secondary {
238
- background-color: $tw-clr-bg-brand-ghost;
239
- color: $tw-clr-txt-brand;
238
+ background-color: terraware.$tw-clr-bg-brand-ghost;
239
+ color: terraware.$tw-clr-txt-brand;
240
240
  svg {
241
- fill: $tw-clr-icn-brand;
241
+ fill: terraware.$tw-clr-icn-brand;
242
242
  }
243
243
 
244
- border: $tw-sz-btn-stroke solid $tw-clr-brdr-brand;
244
+ border: terraware.$tw-sz-btn-stroke solid terraware.$tw-clr-brdr-brand;
245
245
  &:hover {
246
- background-color: $tw-clr-bg-brand-ghost-hover;
246
+ background-color: terraware.$tw-clr-bg-brand-ghost-hover;
247
247
  }
248
248
 
249
249
  &:active {
250
- background-color: $tw-clr-bg-brand-ghost-active;
250
+ background-color: terraware.$tw-clr-bg-brand-ghost-active;
251
251
  }
252
252
  }
253
253
 
254
254
  .productive-ghost {
255
- background-color: $tw-clr-bg-brand-ghost;
256
- color: $tw-clr-txt-brand;
255
+ background-color: terraware.$tw-clr-bg-brand-ghost;
256
+ color: terraware.$tw-clr-txt-brand;
257
257
 
258
258
  svg {
259
- fill: $tw-clr-icn-on-brand;
259
+ fill: terraware.$tw-clr-icn-on-brand;
260
260
  }
261
261
 
262
262
  &:hover {
263
- background: $tw-clr-bg-brand-ghost-hover;
263
+ background: terraware.$tw-clr-bg-brand-ghost-hover;
264
264
  }
265
265
 
266
266
  &:active {
267
- background-color: $tw-clr-bg-brand-ghost-active;
267
+ background-color: terraware.$tw-clr-bg-brand-ghost-active;
268
268
  }
269
269
  }
270
270
 
271
271
  .passive-primary {
272
- background-color: $tw-clr-bg-tertiary;
273
- color: $tw-clr-txt;
272
+ background-color: terraware.$tw-clr-bg-tertiary;
273
+ color: terraware.$tw-clr-txt;
274
274
  svg {
275
- fill: $tw-clr-icn;
275
+ fill: terraware.$tw-clr-icn;
276
276
  }
277
277
  &:hover {
278
- background: $tw-clr-bg-tertiary-hover;
278
+ background: terraware.$tw-clr-bg-tertiary-hover;
279
279
  }
280
280
 
281
281
  &:active {
282
- background-color: $tw-clr-bg-tertiary-active;
282
+ background-color: terraware.$tw-clr-bg-tertiary-active;
283
283
  }
284
284
  }
285
285
 
286
286
  .passive-secondary {
287
- background-color: $tw-clr-bg-ghost;
288
- color: $tw-clr-brdr-secondary;
287
+ background-color: terraware.$tw-clr-bg-ghost;
288
+ color: terraware.$tw-clr-brdr-secondary;
289
289
  svg {
290
- fill: $tw-clr-brdr-secondary;
290
+ fill: terraware.$tw-clr-brdr-secondary;
291
291
  }
292
- border: $tw-sz-btn-stroke solid $tw-clr-brdr-secondary;
292
+ border: terraware.$tw-sz-btn-stroke solid terraware.$tw-clr-brdr-secondary;
293
293
  &:hover {
294
- background-color: $tw-clr-bg-ghost-hover;
294
+ background-color: terraware.$tw-clr-bg-ghost-hover;
295
295
  }
296
296
 
297
297
  &:active {
298
- background-color: $tw-clr-bg-ghost-active;
298
+ background-color: terraware.$tw-clr-bg-ghost-active;
299
299
  }
300
300
  }
301
301
 
302
302
  .passive-ghost {
303
- background-color: $tw-clr-bg-ghost;
304
- color: $tw-clr-txt;
303
+ background-color: terraware.$tw-clr-bg-ghost;
304
+ color: terraware.$tw-clr-txt;
305
305
  svg {
306
- fill: $tw-clr-icn;
306
+ fill: terraware.$tw-clr-icn;
307
307
  }
308
308
  &:hover {
309
- background-color: $tw-clr-bg-ghost-hover;
309
+ background-color: terraware.$tw-clr-bg-ghost-hover;
310
310
  }
311
311
 
312
312
  &:active {
313
- background-color: $tw-clr-bg-ghost-active;
313
+ background-color: terraware.$tw-clr-bg-ghost-active;
314
314
  }
315
315
  }
316
316
 
317
317
  .destructive-primary {
318
- background-color: $tw-clr-bg-danger;
319
- color: $tw-clr-txt-on-danger;
318
+ background-color: terraware.$tw-clr-bg-danger;
319
+ color: terraware.$tw-clr-txt-on-danger;
320
320
  svg {
321
- fill: $tw-clr-icn-on-danger;
321
+ fill: terraware.$tw-clr-icn-on-danger;
322
322
  }
323
323
  &:hover {
324
- background: $tw-clr-bg-danger-hover;
324
+ background: terraware.$tw-clr-bg-danger-hover;
325
325
  }
326
326
 
327
327
  &:active {
328
- background-color: $tw-clr-bg-danger-active;
328
+ background-color: terraware.$tw-clr-bg-danger-active;
329
329
  }
330
330
  }
331
331
 
332
332
  .destructive-secondary {
333
- background-color: $tw-clr-bg-danger-ghost;
334
- color: $tw-clr-txt-danger;
333
+ background-color: terraware.$tw-clr-bg-danger-ghost;
334
+ color: terraware.$tw-clr-txt-danger;
335
335
  svg {
336
- fill: $tw-clr-icn-danger;
336
+ fill: terraware.$tw-clr-icn-danger;
337
337
  }
338
- border: $tw-sz-btn-stroke solid $tw-clr-brdr-danger;
338
+ border: terraware.$tw-sz-btn-stroke solid terraware.$tw-clr-brdr-danger;
339
339
  &:hover {
340
- background-color: $tw-clr-bg-danger-ghost-hover;
340
+ background-color: terraware.$tw-clr-bg-danger-ghost-hover;
341
341
  }
342
342
 
343
343
  &:active {
344
- background-color: $tw-clr-bg-danger-ghost-active;
344
+ background-color: terraware.$tw-clr-bg-danger-ghost-active;
345
345
  }
346
346
  }
347
347
 
348
348
  .destructive-ghost {
349
- background-color: $tw-clr-bg-danger-ghost;
350
- color: $tw-clr-txt-danger;
349
+ background-color: terraware.$tw-clr-bg-danger-ghost;
350
+ color: terraware.$tw-clr-txt-danger;
351
351
  svg {
352
- fill: $tw-clr-icn-danger;
352
+ fill: terraware.$tw-clr-icn-danger;
353
353
  }
354
354
  &:hover {
355
- background-color: $tw-clr-bg-danger-ghost-hover;
355
+ background-color: terraware.$tw-clr-bg-danger-ghost-hover;
356
356
  }
357
357
 
358
358
  &:active {
359
- background-color: $tw-clr-bg-danger-ghost-active;
359
+ background-color: terraware.$tw-clr-bg-danger-ghost-active;
360
360
  }
361
361
  }
362
362
 
@@ -365,14 +365,14 @@
365
365
  .destructive-secondary {
366
366
  &--small {
367
367
  padding: calc(
368
- (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
368
+ (#{terraware.$tw-sz-btn-small-height} - (2 * #{terraware.$tw-sz-btn-stroke}) - #{terraware.$tw-fnt-btn-label-small-line-height}) / 2
369
369
  )
370
- calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
370
+ calc((#{terraware.$tw-sz-btn-small-height} - 2 * #{terraware.$tw-sz-btn-stroke}) / 2);
371
371
 
372
372
  &.button-with-icon {
373
373
  padding-left: calc(
374
- (#{$tw-sz-btn-small-height} / 2) - #{$tw-sz-btn-stroke} - ((((
375
- #{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}
374
+ (#{terraware.$tw-sz-btn-small-height} / 2) - #{terraware.$tw-sz-btn-stroke} - ((((
375
+ #{terraware.$tw-sz-btn-small-height} - #{terraware.$tw-fnt-btn-label-small-line-height}
376
376
  ) / 2)))
377
377
  );
378
378
  }
@@ -387,14 +387,14 @@
387
387
 
388
388
  &--medium {
389
389
  padding: calc(
390
- (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
390
+ (#{terraware.$tw-sz-btn-medium-height} - (2 * #{terraware.$tw-sz-btn-stroke}) - #{terraware.$tw-fnt-btn-label-medium-line-height}) / 2
391
391
  )
392
- calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
392
+ calc((#{terraware.$tw-sz-btn-medium-height} - 2 * #{terraware.$tw-sz-btn-stroke}) / 2);
393
393
 
394
394
  &.button-with-icon {
395
395
  padding-left: calc(
396
- (#{$tw-sz-btn-medium-height} / 2) - #{$tw-sz-btn-stroke} - ((((
397
- #{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}
396
+ (#{terraware.$tw-sz-btn-medium-height} / 2) - #{terraware.$tw-sz-btn-stroke} - ((((
397
+ #{terraware.$tw-sz-btn-medium-height} - #{terraware.$tw-fnt-btn-label-medium-line-height}
398
398
  ) / 2)))
399
399
  );
400
400
  }
@@ -409,14 +409,14 @@
409
409
 
410
410
  &--large {
411
411
  padding: calc(
412
- (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
412
+ (#{terraware.$tw-sz-btn-large-height} - (2 * #{terraware.$tw-sz-btn-stroke}) - #{terraware.$tw-fnt-btn-label-large-line-height}) / 2
413
413
  )
414
- calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
414
+ calc((#{terraware.$tw-sz-btn-large-height} - 2 * #{terraware.$tw-sz-btn-stroke}) / 2);
415
415
 
416
416
  &.button-with-icon {
417
417
  padding-left: calc(
418
- (#{$tw-sz-btn-large-height} / 2) - #{$tw-sz-btn-stroke} - ((((
419
- #{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}
418
+ (#{terraware.$tw-sz-btn-large-height} / 2) - #{terraware.$tw-sz-btn-stroke} - ((((
419
+ #{terraware.$tw-sz-btn-large-height} - #{terraware.$tw-fnt-btn-label-large-line-height}
420
420
  ) / 2)))
421
421
  );
422
422
  }
@@ -431,14 +431,14 @@
431
431
 
432
432
  &--xlarge {
433
433
  padding: calc(
434
- (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
434
+ (#{terraware.$tw-sz-btn-x-large-height} - (2 * #{terraware.$tw-sz-btn-stroke}) - #{terraware.$tw-fnt-btn-label-x-large-line-height}) / 2
435
435
  )
436
- calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
436
+ calc((#{terraware.$tw-sz-btn-x-large-height} - 2 * #{terraware.$tw-sz-btn-stroke}) / 2);
437
437
 
438
438
  &.button-with-icon {
439
439
  padding-left: calc(
440
- (#{$tw-sz-btn-x-large-height} / 2) - #{$tw-sz-btn-stroke} - ((((
441
- #{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}
440
+ (#{terraware.$tw-sz-btn-x-large-height} / 2) - #{terraware.$tw-sz-btn-stroke} - ((((
441
+ #{terraware.$tw-sz-btn-x-large-height} - #{terraware.$tw-fnt-btn-label-x-large-line-height}
442
442
  ) / 2)))
443
443
  );
444
444
  }
package/components/DatePicker/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -10,12 +10,12 @@
10
10
  flex-flow: column wrap;
11
11
 
12
12
  .textfield-label {
13
- font-family: $tw-fnt-frm-fld-label-font-family;
14
- font-size: $tw-fnt-frm-fld-label-font-size;
15
- font-weight: $tw-fnt-frm-fld-label-font-weight;
16
- line-height: $tw-fnt-frm-fld-label-line-height;
17
- color: $tw-clr-txt-secondary;
18
- margin-bottom: $tw-spc-base-xx-small;
13
+ font-family: terraware.$tw-fnt-frm-fld-label-font-family;
14
+ font-size: terraware.$tw-fnt-frm-fld-label-font-size;
15
+ font-weight: terraware.$tw-fnt-frm-fld-label-font-weight;
16
+ line-height: terraware.$tw-fnt-frm-fld-label-line-height;
17
+ color: terraware.$tw-clr-txt-secondary;
18
+ margin-bottom: terraware.$tw-spc-base-xx-small;
19
19
  display: block;
20
20
  width: 100%;
21
21
  max-width: 100%;
@@ -23,29 +23,29 @@
23
23
 
24
24
  .textfield-error-text-container {
25
25
  display: flex;
26
- margin-top: $tw-spc-base-x-small;
26
+ margin-top: terraware.$tw-spc-base-x-small;
27
27
 
28
28
  .textfield-error-text {
29
- font-family: $tw-fnt-frm-fld-error-text-font-family;
30
- font-size: $tw-fnt-frm-fld-error-text-font-size;
31
- font-weight: $tw-fnt-frm-fld-error-text-font-weight;
32
- line-height: $tw-fnt-frm-fld-error-text-line-height;
33
- color: $tw-clr-txt-danger;
29
+ font-family: terraware.$tw-fnt-frm-fld-error-text-font-family;
30
+ font-size: terraware.$tw-fnt-frm-fld-error-text-font-size;
31
+ font-weight: terraware.$tw-fnt-frm-fld-error-text-font-weight;
32
+ line-height: terraware.$tw-fnt-frm-fld-error-text-line-height;
33
+ color: terraware.$tw-clr-txt-danger;
34
34
  width: 100%;
35
35
  max-width: 100%;
36
36
 
37
37
  &--icon {
38
- fill: $tw-clr-txt-danger;
39
- width: $tw-fnt-frm-fld-error-text-line-height;
40
- height: $tw-fnt-frm-fld-error-text-line-height;
41
- margin-right: $tw-spc-base-x-small;
38
+ fill: terraware.$tw-clr-txt-danger;
39
+ width: terraware.$tw-fnt-frm-fld-error-text-line-height;
40
+ height: terraware.$tw-fnt-frm-fld-error-text-line-height;
41
+ margin-right: terraware.$tw-spc-base-x-small;
42
42
  }
43
43
  }
44
44
  }
45
45
 
46
46
  .MuiInputBase-root {
47
- border: 1px solid $tw-clr-bg-info;
48
- border-radius: $tw-sz-base-x-small;
47
+ border: 1px solid terraware.$tw-clr-bg-info;
48
+ border-radius: terraware.$tw-sz-base-x-small;
49
49
  position: unset;
50
50
  }
51
51
 
@@ -54,42 +54,42 @@
54
54
  }
55
55
 
56
56
  .MuiIconButton-root {
57
- color: $tw-clr-icn-secondary;
57
+ color: terraware.$tw-clr-icn-secondary;
58
58
  }
59
59
 
60
60
  input {
61
- padding: calc(#{$tw-spc-base-xx-small} * 2.5) calc(#{$tw-spc-base-xx-small} * 3);
62
- background-color: $tw-clr-base-white;
63
- border-radius: $tw-sz-base-x-small 0 0 $tw-sz-base-x-small;
61
+ padding: calc(#{terraware.$tw-spc-base-xx-small} * 2.5) calc(#{terraware.$tw-spc-base-xx-small} * 3);
62
+ background-color: terraware.$tw-clr-base-white;
63
+ border-radius: terraware.$tw-sz-base-x-small 0 0 terraware.$tw-sz-base-x-small;
64
64
  }
65
65
 
66
66
  .MuiOutlinedInput-root {
67
- border-color: $tw-clr-brdr-secondary;
67
+ border-color: terraware.$tw-clr-brdr-secondary;
68
68
 
69
69
  &:hover {
70
- border-color: $tw-clr-brdr-hover;
70
+ border-color: terraware.$tw-clr-brdr-hover;
71
71
  }
72
72
  &.Mui-focused {
73
- border-color: $tw-clr-brdr-hover;
73
+ border-color: terraware.$tw-clr-brdr-hover;
74
74
  }
75
75
  }
76
76
 
77
77
  &--error {
78
78
  .MuiInputBase-root {
79
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
80
- background-color: $tw-clr-bg-danger-tertiary;
79
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger;
80
+ background-color: terraware.$tw-clr-bg-danger-tertiary;
81
81
 
82
82
  &:hover {
83
- border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
83
+ border: terraware.$tw-sz-frm-fld-text-input-stroke solid terraware.$tw-clr-brdr-danger;
84
84
  }
85
85
 
86
86
  &:active {
87
- border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger;
87
+ border: terraware.$tw-sz-frm-fld-text-input-stroke-active solid terraware.$tw-clr-brdr-danger;
88
88
  }
89
89
  }
90
90
 
91
91
  input {
92
- background-color: $tw-clr-bg-danger-tertiary;
92
+ background-color: terraware.$tw-clr-bg-danger-tertiary;
93
93
  }
94
94
  }
95
95
  }