@servicetitan/design-system 11.9.0 → 12.1.0

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 (77) hide show
  1. package/dist/components/AnvilSelect/AnvilSelect.css +4 -4
  2. package/dist/components/AnvilSelect/AnvilSelect.d.ts +3 -0
  3. package/dist/components/AnvilSelect/AnvilSelect.js +2 -1
  4. package/dist/components/AnvilSelect/AnvilSelect.js.map +1 -1
  5. package/dist/components/AnvilSelect/components/Trigger.css +19 -19
  6. package/dist/components/AnvilSelect/components/Trigger.css.map +1 -1
  7. package/dist/components/AnvilSelect/index.css +19 -19
  8. package/dist/components/AnvilSelect/index.css.map +1 -1
  9. package/dist/components/Breadcrumb/Breadcrumb.css +1 -1
  10. package/dist/components/Breadcrumb/index.css +1 -1
  11. package/dist/components/Button/Button.css +9 -9
  12. package/dist/components/Button/index.css +9 -9
  13. package/dist/components/ButtonToggle/ButtonToggle.css +4 -4
  14. package/dist/components/ButtonToggle/index.css +4 -4
  15. package/dist/components/Card/CardSection.css +4 -4
  16. package/dist/components/Card/index.css +4 -4
  17. package/dist/components/Checkbox/Checkbox.css +8 -8
  18. package/dist/components/Checkbox/index.css +8 -8
  19. package/dist/components/DatePicker/DatePicker.css +8 -8
  20. package/dist/components/DatePicker/index.css +8 -8
  21. package/dist/components/Eyebrow/Eyebrow.css +1 -1
  22. package/dist/components/Eyebrow/index.css +1 -1
  23. package/dist/components/Form/Form.css +4 -4
  24. package/dist/components/Form/index.css +4 -4
  25. package/dist/components/FormField/FormField.css +9 -9
  26. package/dist/components/FormField/index.css +9 -9
  27. package/dist/components/Frame/Frame.css +2 -2
  28. package/dist/components/Frame/Frame.js +12 -0
  29. package/dist/components/Frame/Frame.js.map +1 -1
  30. package/dist/components/Frame/index.css +2 -2
  31. package/dist/components/Icon/Icon.css +9 -9
  32. package/dist/components/Icon/index.css +9 -9
  33. package/dist/components/InlineEdit/InlineEdit.css +2 -2
  34. package/dist/components/InlineEdit/index.css +2 -2
  35. package/dist/components/Input/Input.css +7 -7
  36. package/dist/components/Input/index.css +7 -7
  37. package/dist/components/Label/Label.css +2 -2
  38. package/dist/components/Label/index.css +2 -2
  39. package/dist/components/Link/Link.css +1 -1
  40. package/dist/components/Link/index.css +1 -1
  41. package/dist/components/Modal/Modal.js.map +1 -1
  42. package/dist/components/MoreDetails/MoreDetails.css +1 -1
  43. package/dist/components/MoreDetails/index.css +1 -1
  44. package/dist/components/ProgressBar/ProgressBar.css +3 -3
  45. package/dist/components/ProgressBar/index.css +3 -3
  46. package/dist/components/ProgressTracker/ProgressTrackerStep.css +1 -1
  47. package/dist/components/ProgressTracker/index.css +1 -1
  48. package/dist/components/Radio/Radio.css +9 -9
  49. package/dist/components/Radio/index.css +9 -9
  50. package/dist/components/Select/Select.css +5 -5
  51. package/dist/components/Select/index.css +5 -5
  52. package/dist/components/Tab/Tab.css +3 -3
  53. package/dist/components/Tab/index.css +3 -3
  54. package/dist/components/Table/Table.css +9 -9
  55. package/dist/components/Table/index.css +9 -9
  56. package/dist/components/Tag/Tag.css +1 -1
  57. package/dist/components/Tag/index.css +1 -1
  58. package/dist/components/TextArea/TextArea.css +4 -4
  59. package/dist/components/TextArea/index.css +4 -4
  60. package/dist/components/Togglebox/Togglebox.css +1 -1
  61. package/dist/components/Togglebox/index.css +1 -1
  62. package/dist/components/index.css +90 -90
  63. package/dist/components/index.css.map +1 -1
  64. package/dist/global/index.css +1 -1
  65. package/dist/global/version.css +1 -1
  66. package/dist/system-light.css +5 -5
  67. package/dist/system-light.min.css +1 -1
  68. package/dist/system.css +99 -99
  69. package/dist/system.css.map +1 -1
  70. package/dist/system.min.css +2 -2
  71. package/dist/themes/index.css +8 -8
  72. package/dist/themes/kendo/index.css +8 -8
  73. package/dist/utilities/ThemeProvider.js +2 -2
  74. package/dist/utilities/ThemeProvider.js.map +1 -1
  75. package/dist/utilities/usePrefersColorScheme.js +2 -2
  76. package/dist/utilities/usePrefersColorScheme.js.map +1 -1
  77. package/package.json +10 -8
package/dist/components/Checkbox/Checkbox.css CHANGED
@@ -44,8 +44,8 @@
44
44
  .Field.Field--error .Input > input,
45
45
  .Field.Field--error .TextArea {
46
46
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
47
- border-color: var(--colorsBorderCritical, #e63717);
48
- color: var(--colorsTextCritical, #e63717);
47
+ border-color: var(--colorsBorderCritical, #e13212);
48
+ color: var(--colorsTextCritical, #bf2a00);
49
49
  box-shadow: none;
50
50
  }
51
51
  .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
53
53
  .Field.Field--error .Input > input:focus,
54
54
  .Field.Field--error .TextArea:focus {
55
55
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
56
- border-color: var(--colorsBorderCritical, #e63717);
57
- color: var(--colorsTextCritical, #e63717);
56
+ border-color: var(--colorsBorderCritical, #e13212);
57
+ color: var(--colorsTextCritical, #bf2a00);
58
58
  box-shadow: none;
59
59
  -webkit-appearance: none;
60
60
  }
@@ -219,7 +219,7 @@
219
219
  opacity: 1;
220
220
  }
221
221
  .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
222
- box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
222
+ box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
223
223
  }
224
224
  .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
225
225
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
231
231
  border-color: var(--colorsBorderDefault, #444445);
232
232
  }
233
233
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
234
- border-color: var(--colorsBorderCritical, #e63717);
234
+ border-color: var(--colorsBorderCritical, #e13212);
235
235
  }
236
236
  .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
237
237
  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
238
238
  }
239
239
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
240
- box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
240
+ box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
241
241
  }
242
242
  .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
243
243
  border-color: var(--colorsBorderPrimary, #2270ee);
244
244
  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
245
245
  }
246
246
  .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
247
- border-color: var(--colorsBorderCritical, #e63717);
247
+ border-color: var(--colorsBorderCritical, #e13212);
248
248
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
249
249
  }
250
250
 
package/dist/components/Checkbox/index.css CHANGED
@@ -44,8 +44,8 @@
44
44
  .Field.Field--error .Input > input,
45
45
  .Field.Field--error .TextArea {
46
46
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
47
- border-color: var(--colorsBorderCritical, #e63717);
48
- color: var(--colorsTextCritical, #e63717);
47
+ border-color: var(--colorsBorderCritical, #e13212);
48
+ color: var(--colorsTextCritical, #bf2a00);
49
49
  box-shadow: none;
50
50
  }
51
51
  .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
53
53
  .Field.Field--error .Input > input:focus,
54
54
  .Field.Field--error .TextArea:focus {
55
55
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
56
- border-color: var(--colorsBorderCritical, #e63717);
57
- color: var(--colorsTextCritical, #e63717);
56
+ border-color: var(--colorsBorderCritical, #e13212);
57
+ color: var(--colorsTextCritical, #bf2a00);
58
58
  box-shadow: none;
59
59
  -webkit-appearance: none;
60
60
  }
@@ -219,7 +219,7 @@
219
219
  opacity: 1;
220
220
  }
221
221
  .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
222
- box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
222
+ box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
223
223
  }
224
224
  .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
225
225
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
231
231
  border-color: var(--colorsBorderDefault, #444445);
232
232
  }
233
233
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
234
- border-color: var(--colorsBorderCritical, #e63717);
234
+ border-color: var(--colorsBorderCritical, #e13212);
235
235
  }
236
236
  .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
237
237
  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
238
238
  }
239
239
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
240
- box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
240
+ box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
241
241
  }
242
242
  .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
243
243
  border-color: var(--colorsBorderPrimary, #2270ee);
244
244
  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
245
245
  }
246
246
  .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
247
- border-color: var(--colorsBorderCritical, #e63717);
247
+ border-color: var(--colorsBorderCritical, #e13212);
248
248
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
249
249
  }
250
250
 
package/dist/components/DatePicker/DatePicker.css CHANGED
@@ -44,8 +44,8 @@
44
44
  .Field.Field--error .Input > input,
45
45
  .Field.Field--error .TextArea {
46
46
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
47
- border-color: var(--colorsBorderCritical, #e63717);
48
- color: var(--colorsTextCritical, #e63717);
47
+ border-color: var(--colorsBorderCritical, #e13212);
48
+ color: var(--colorsTextCritical, #bf2a00);
49
49
  box-shadow: none;
50
50
  }
51
51
  .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
53
53
  .Field.Field--error .Input > input:focus,
54
54
  .Field.Field--error .TextArea:focus {
55
55
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
56
- border-color: var(--colorsBorderCritical, #e63717);
57
- color: var(--colorsTextCritical, #e63717);
56
+ border-color: var(--colorsBorderCritical, #e13212);
57
+ color: var(--colorsTextCritical, #bf2a00);
58
58
  box-shadow: none;
59
59
  -webkit-appearance: none;
60
60
  }
@@ -219,7 +219,7 @@
219
219
  opacity: 1;
220
220
  }
221
221
  .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
222
- box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
222
+ box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
223
223
  }
224
224
  .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
225
225
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
231
231
  border-color: var(--colorsBorderDefault, #444445);
232
232
  }
233
233
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
234
- border-color: var(--colorsBorderCritical, #e63717);
234
+ border-color: var(--colorsBorderCritical, #e13212);
235
235
  }
236
236
  .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
237
237
  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
238
238
  }
239
239
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
240
- box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
240
+ box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
241
241
  }
242
242
  .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
243
243
  border-color: var(--colorsBorderPrimary, #2270ee);
244
244
  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
245
245
  }
246
246
  .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
247
- border-color: var(--colorsBorderCritical, #e63717);
247
+ border-color: var(--colorsBorderCritical, #e13212);
248
248
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
249
249
  }
250
250
 
package/dist/components/DatePicker/index.css CHANGED
@@ -44,8 +44,8 @@
44
44
  .Field.Field--error .Input > input,
45
45
  .Field.Field--error .TextArea {
46
46
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
47
- border-color: var(--colorsBorderCritical, #e63717);
48
- color: var(--colorsTextCritical, #e63717);
47
+ border-color: var(--colorsBorderCritical, #e13212);
48
+ color: var(--colorsTextCritical, #bf2a00);
49
49
  box-shadow: none;
50
50
  }
51
51
  .Fields.Fields--error .Field .Input > input:focus,
@@ -53,8 +53,8 @@
53
53
  .Field.Field--error .Input > input:focus,
54
54
  .Field.Field--error .TextArea:focus {
55
55
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
56
- border-color: var(--colorsBorderCritical, #e63717);
57
- color: var(--colorsTextCritical, #e63717);
56
+ border-color: var(--colorsBorderCritical, #e13212);
57
+ color: var(--colorsTextCritical, #bf2a00);
58
58
  box-shadow: none;
59
59
  -webkit-appearance: none;
60
60
  }
@@ -219,7 +219,7 @@
219
219
  opacity: 1;
220
220
  }
221
221
  .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
222
- box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
222
+ box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
223
223
  }
224
224
  .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
225
225
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -231,20 +231,20 @@
231
231
  border-color: var(--colorsBorderDefault, #444445);
232
232
  }
233
233
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
234
- border-color: var(--colorsBorderCritical, #e63717);
234
+ border-color: var(--colorsBorderCritical, #e13212);
235
235
  }
236
236
  .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
237
237
  box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
238
238
  }
239
239
  .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
240
- box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
240
+ box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
241
241
  }
242
242
  .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
243
243
  border-color: var(--colorsBorderPrimary, #2270ee);
244
244
  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
245
245
  }
246
246
  .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
247
- border-color: var(--colorsBorderCritical, #e63717);
247
+ border-color: var(--colorsBorderCritical, #e13212);
248
248
  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
249
249
  }
250
250
 
package/dist/components/Eyebrow/Eyebrow.css CHANGED
@@ -8,7 +8,7 @@
8
8
  font-family: "Nunito Sans", sans-serif;
9
9
  line-height: 1.5;
10
10
  font-size: 12px;
11
- color: var(--colorsTextSubdued, #737475);
11
+ color: var(--colorsTextSubdued, #606162);
12
12
  text-transform: uppercase;
13
13
  letter-spacing: 0.05em;
14
14
  display: block;
package/dist/components/Eyebrow/index.css CHANGED
@@ -8,7 +8,7 @@
8
8
  font-family: "Nunito Sans", sans-serif;
9
9
  line-height: 1.5;
10
10
  font-size: 12px;
11
- color: var(--colorsTextSubdued, #737475);
11
+ color: var(--colorsTextSubdued, #606162);
12
12
  text-transform: uppercase;
13
13
  letter-spacing: 0.05em;
14
14
  display: block;
package/dist/components/Form/Form.css CHANGED
@@ -43,8 +43,8 @@
43
43
  .Field.Field--error .Input > input,
44
44
  .Field.Field--error .TextArea {
45
45
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
46
- border-color: var(--colorsBorderCritical, #e63717);
47
- color: var(--colorsTextCritical, #e63717);
46
+ border-color: var(--colorsBorderCritical, #e13212);
47
+ color: var(--colorsTextCritical, #bf2a00);
48
48
  box-shadow: none;
49
49
  }
50
50
  .Fields.Fields--error .Field .Input > input:focus,
@@ -52,8 +52,8 @@
52
52
  .Field.Field--error .Input > input:focus,
53
53
  .Field.Field--error .TextArea:focus {
54
54
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
55
- border-color: var(--colorsBorderCritical, #e63717);
56
- color: var(--colorsTextCritical, #e63717);
55
+ border-color: var(--colorsBorderCritical, #e13212);
56
+ color: var(--colorsTextCritical, #bf2a00);
57
57
  box-shadow: none;
58
58
  -webkit-appearance: none;
59
59
  }
package/dist/components/Form/index.css CHANGED
@@ -43,8 +43,8 @@
43
43
  .Field.Field--error .Input > input,
44
44
  .Field.Field--error .TextArea {
45
45
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
46
- border-color: var(--colorsBorderCritical, #e63717);
47
- color: var(--colorsTextCritical, #e63717);
46
+ border-color: var(--colorsBorderCritical, #e13212);
47
+ color: var(--colorsTextCritical, #bf2a00);
48
48
  box-shadow: none;
49
49
  }
50
50
  .Fields.Fields--error .Field .Input > input:focus,
@@ -52,8 +52,8 @@
52
52
  .Field.Field--error .Input > input:focus,
53
53
  .Field.Field--error .TextArea:focus {
54
54
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
55
- border-color: var(--colorsBorderCritical, #e63717);
56
- color: var(--colorsTextCritical, #e63717);
55
+ border-color: var(--colorsBorderCritical, #e13212);
56
+ color: var(--colorsTextCritical, #bf2a00);
57
57
  box-shadow: none;
58
58
  -webkit-appearance: none;
59
59
  }
package/dist/components/FormField/FormField.css CHANGED
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  .FormField__errorText {
60
- color: var(--colorsTextCritical, #e63717);
60
+ color: var(--colorsTextCritical, #bf2a00);
61
61
  font-size: 14px;
62
62
  line-height: 1.25;
63
63
  margin-top: 8px;
@@ -67,7 +67,7 @@
67
67
  }
68
68
 
69
69
  .FormField__description {
70
- color: var(--colorsTextSubdued, #737475);
70
+ color: var(--colorsTextSubdued, #606162);
71
71
  font-size: 14px;
72
72
  line-height: 1.25;
73
73
  margin-top: 8px;
@@ -96,23 +96,23 @@
96
96
 
97
97
  /* Errors on Semantic Dropdown */
98
98
  .FormField--error .semantic-anvil-theme .ui.dropdown {
99
- color: var(--colorsTextCritical, #e63717);
99
+ color: var(--colorsTextCritical, #bf2a00);
100
100
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
101
- border-color: var(--colorsBorderCritical, #e63717);
101
+ border-color: var(--colorsBorderCritical, #e13212);
102
102
  }
103
103
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu {
104
- border-color: var(--colorsBorderCritical, #e63717) !important;
104
+ border-color: var(--colorsBorderCritical, #e13212) !important;
105
105
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
106
106
  }
107
107
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
108
- color: var(--colorsTextCritical, #e63717);
108
+ color: var(--colorsTextCritical, #bf2a00);
109
109
  }
110
110
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
111
- background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
111
+ background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
112
112
  }
113
113
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
114
- background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
115
- color: var(--colorsTextCritical, #e63717);
114
+ background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
115
+ color: var(--colorsTextCritical, #bf2a00);
116
116
  }
117
117
  .FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
118
118
  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
package/dist/components/FormField/index.css CHANGED
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  .FormField__errorText {
60
- color: var(--colorsTextCritical, #e63717);
60
+ color: var(--colorsTextCritical, #bf2a00);
61
61
  font-size: 14px;
62
62
  line-height: 1.25;
63
63
  margin-top: 8px;
@@ -67,7 +67,7 @@
67
67
  }
68
68
 
69
69
  .FormField__description {
70
- color: var(--colorsTextSubdued, #737475);
70
+ color: var(--colorsTextSubdued, #606162);
71
71
  font-size: 14px;
72
72
  line-height: 1.25;
73
73
  margin-top: 8px;
@@ -96,23 +96,23 @@
96
96
 
97
97
  /* Errors on Semantic Dropdown */
98
98
  .FormField--error .semantic-anvil-theme .ui.dropdown {
99
- color: var(--colorsTextCritical, #e63717);
99
+ color: var(--colorsTextCritical, #bf2a00);
100
100
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
101
- border-color: var(--colorsBorderCritical, #e63717);
101
+ border-color: var(--colorsBorderCritical, #e13212);
102
102
  }
103
103
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu {
104
- border-color: var(--colorsBorderCritical, #e63717) !important;
104
+ border-color: var(--colorsBorderCritical, #e13212) !important;
105
105
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
106
106
  }
107
107
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
108
- color: var(--colorsTextCritical, #e63717);
108
+ color: var(--colorsTextCritical, #bf2a00);
109
109
  }
110
110
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
111
- background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
111
+ background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
112
112
  }
113
113
  .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
114
- background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
115
- color: var(--colorsTextCritical, #e63717);
114
+ background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
115
+ color: var(--colorsTextCritical, #bf2a00);
116
116
  }
117
117
  .FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
118
118
  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
package/dist/components/Frame/Frame.css CHANGED
@@ -4,10 +4,10 @@
4
4
  color: var(--colorsTextDefault, #141414);
5
5
  /* Make sure font-family goes across entire component */
6
6
  font-family: "Nunito Sans", sans-serif;
7
- height: 100vh;
8
7
  display: flex;
9
8
  flex-direction: column;
10
- min-height: 100vh;
9
+ height: calc(var(--frame-vh, 1vh) * 100);
10
+ min-height: calc(var(--frame-vh, 1vh) * 100);
11
11
  }
12
12
 
13
13
  .Frame__header {
package/dist/components/Frame/Frame.js CHANGED
@@ -11,12 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import React from 'react';
13
13
  import classnames from 'classnames';
14
+ import throttle from 'lodash/throttle';
14
15
  export const Frame = (_a) => {
15
16
  var { children, className, el: El = 'div', header } = _a, props = __rest(_a, ["children", "className", "el", "header"]);
16
17
  React.useEffect(() => {
17
18
  document.body.classList.add('of-hidden');
18
19
  return () => document.body.classList.remove('of-hidden');
19
20
  }, []);
21
+ React.useEffect(() => {
22
+ const calculateHeight = throttle(() => {
23
+ if (document.body.scrollHeight !== window.innerHeight) {
24
+ const vh = window.innerHeight * 0.01;
25
+ document.documentElement.style.setProperty('--frame-vh', `${vh}px`);
26
+ }
27
+ }, 100);
28
+ calculateHeight();
29
+ window.addEventListener('resize', calculateHeight);
30
+ return () => window.removeEventListener('resize', calculateHeight);
31
+ }, []);
20
32
  return (React.createElement(El, Object.assign({ className: classnames('Frame', className), "data-anvil-component": "Frame" }, props),
21
33
  header && React.createElement("div", { className: "Frame__header" }, header),
22
34
  React.createElement("div", { className: "Frame__content" }, children)));
package/dist/components/Frame/Frame.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Frame.js","sourceRoot":"","sources":["../../../src/components/Frame/Frame.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAiBpC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAMrC,EAAE,EAAE;QANiC,EACrC,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,MAAM,OAEN,EADG,KAAK,cAL6B,yCAMrC,CADQ;IAER,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,oBAAC,EAAE,kBACF,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,0BACpB,OAAO,IACxB,KAAK;QAER,MAAM,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC5C,CACL,CAAC;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"Frame.js","sourceRoot":"","sources":["../../../src/components/Frame/Frame.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAiBvC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAMrC,EAAE,EAAE;QANiC,EACrC,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,MAAM,OAEN,EADG,KAAK,cAL6B,yCAMrC,CADQ;IAER,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;YACrC,IAAI,QAAQ,CAAC,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,WAAW,EAAE;gBACtD,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;gBACrC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,YAAY,EACZ,GAAG,EAAE,IAAI,CACT,CAAC;aACF;QACF,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,eAAe,EAAE,CAAC;QAElB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,oBAAC,EAAE,kBACF,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,0BACpB,OAAO,IACxB,KAAK;QAER,MAAM,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC5C,CACL,CAAC;AACH,CAAC,CAAC"}
package/dist/components/Frame/index.css CHANGED
@@ -4,10 +4,10 @@
4
4
  color: var(--colorsTextDefault, #141414);
5
5
  /* Make sure font-family goes across entire component */
6
6
  font-family: "Nunito Sans", sans-serif;
7
- height: 100vh;
8
7
  display: flex;
9
8
  flex-direction: column;
10
- min-height: 100vh;
9
+ height: calc(var(--frame-vh, 1vh) * 100);
10
+ min-height: calc(var(--frame-vh, 1vh) * 100);
11
11
  }
12
12
 
13
13
  .Frame__header {
package/dist/components/Icon/Icon.css CHANGED
@@ -145,7 +145,7 @@ button.Button {
145
145
  }
146
146
 
147
147
  .Button--red {
148
- background-color: var(--colorsSurfaceCritical, #e63717);
148
+ background-color: var(--colorsSurfaceCritical, #e13212);
149
149
  color: var(--colorsTextOnCritical, #ffffff);
150
150
  }
151
151
  .Button--red:hover::before {
@@ -159,27 +159,27 @@ button.Button {
159
159
  }
160
160
  .Button--red.Button--outline {
161
161
  background-color: transparent;
162
- box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
163
- color: var(--colorsTextCritical, #e63717);
162
+ box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
163
+ color: var(--colorsTextCritical, #bf2a00);
164
164
  }
165
165
  .Button--red.Button--outline:hover::before {
166
- background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
166
+ background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
167
167
  }
168
168
  .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
169
- background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
169
+ background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
170
170
  }
171
171
  .Button--red.Button--outline.Button--focus-visible:focus {
172
- box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
172
+ box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
173
173
  }
174
174
  .Button--red.Button--subtle {
175
175
  background-color: transparent;
176
- color: var(--colorsTextCritical, #e63717);
176
+ color: var(--colorsTextCritical, #bf2a00);
177
177
  }
178
178
  .Button--red.Button--subtle:hover::before {
179
- background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
179
+ background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
180
180
  }
181
181
  .Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
182
- background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
182
+ background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
183
183
  }
184
184
 
185
185
  .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
package/dist/components/Icon/index.css CHANGED
@@ -145,7 +145,7 @@ button.Button {
145
145
  }
146
146
 
147
147
  .Button--red {
148
- background-color: var(--colorsSurfaceCritical, #e63717);
148
+ background-color: var(--colorsSurfaceCritical, #e13212);
149
149
  color: var(--colorsTextOnCritical, #ffffff);
150
150
  }
151
151
  .Button--red:hover::before {
@@ -159,27 +159,27 @@ button.Button {
159
159
  }
160
160
  .Button--red.Button--outline {
161
161
  background-color: transparent;
162
- box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
163
- color: var(--colorsTextCritical, #e63717);
162
+ box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
163
+ color: var(--colorsTextCritical, #bf2a00);
164
164
  }
165
165
  .Button--red.Button--outline:hover::before {
166
- background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
166
+ background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
167
167
  }
168
168
  .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
169
- background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
169
+ background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
170
170
  }
171
171
  .Button--red.Button--outline.Button--focus-visible:focus {
172
- box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
172
+ box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
173
173
  }
174
174
  .Button--red.Button--subtle {
175
175
  background-color: transparent;
176
- color: var(--colorsTextCritical, #e63717);
176
+ color: var(--colorsTextCritical, #bf2a00);
177
177
  }
178
178
  .Button--red.Button--subtle:hover::before {
179
- background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
179
+ background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
180
180
  }
181
181
  .Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
182
- background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
182
+ background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
183
183
  }
184
184
 
185
185
  .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
package/dist/components/InlineEdit/InlineEdit.css CHANGED
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  .InlineEdit__content--error {
82
- color: var(--colorsTextCritical, #e63717);
82
+ color: var(--colorsTextCritical, #bf2a00);
83
83
  }
84
84
 
85
85
  .InlineEdit__content--underline .InlineEdit__value::before {
@@ -90,7 +90,7 @@
90
90
  border-bottom: 1px dashed currentColor;
91
91
  }
92
92
  .InlineEdit__content--underline.InlineEdit__content--error::before {
93
- border-bottom-color: var(--colorsBorderCritical, #e63717);
93
+ border-bottom-color: var(--colorsBorderCritical, #e13212);
94
94
  }
95
95
 
96
96
  .InlineEdit__value--placeholder {
package/dist/components/InlineEdit/index.css CHANGED
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  .InlineEdit__content--error {
82
- color: var(--colorsTextCritical, #e63717);
82
+ color: var(--colorsTextCritical, #bf2a00);
83
83
  }
84
84
 
85
85
  .InlineEdit__content--underline .InlineEdit__value::before {
@@ -90,7 +90,7 @@
90
90
  border-bottom: 1px dashed currentColor;
91
91
  }
92
92
  .InlineEdit__content--underline.InlineEdit__content--error::before {
93
- border-bottom-color: var(--colorsBorderCritical, #e63717);
93
+ border-bottom-color: var(--colorsBorderCritical, #e13212);
94
94
  }
95
95
 
96
96
  .InlineEdit__value--placeholder {
package/dist/components/Input/Input.css CHANGED
@@ -178,15 +178,15 @@
178
178
  }
179
179
  .Input.Input--error > .Input__InnerWrapper {
180
180
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
181
- border-color: var(--colorsBorderCritical, #e63717);
181
+ border-color: var(--colorsBorderCritical, #e13212);
182
182
  }
183
183
  .Input.Input--error > .Input__InnerWrapper > input {
184
- color: var(--colorsTextCritical, #e63717);
184
+ color: var(--colorsTextCritical, #bf2a00);
185
185
  box-shadow: none;
186
186
  /* Error Placeholder */
187
187
  }
188
188
  .Input.Input--error > .Input__InnerWrapper > input::placeholder {
189
- color: var(--colorsTextCritical, #e63717);
189
+ color: var(--colorsTextCritical, #bf2a00);
190
190
  opacity: 0.4;
191
191
  }
192
192
  .Input.Input--error > .Input__InnerWrapper > input:autofill {
@@ -202,13 +202,13 @@
202
202
  box-shadow: none !important;
203
203
  }
204
204
  .Input.Input--error > .Input__InnerWrapper > .InputAddon {
205
- color: var(--colorsTextCritical, #e63717);
205
+ color: var(--colorsTextCritical, #bf2a00);
206
206
  }
207
207
  .Input.Input--error:focus-within, .Input.Input--error.Input--focus {
208
208
  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
209
209
  }
210
210
  .Input.Input--error .InputAddon .a-Icon {
211
- color: var(--colorsTextCritical, #e63717);
211
+ color: var(--colorsTextCritical, #bf2a00);
212
212
  }
213
213
  .Input.Input--loading.Input--loading .Spinner {
214
214
  line-height: 1;
@@ -225,7 +225,7 @@
225
225
  border-radius: 0 !important;
226
226
  }
227
227
  .Input > .Input__InnerWrapper .a-Icon {
228
- color: var(--colorsTextSubdued, #737475);
228
+ color: var(--colorsTextSubdued, #606162);
229
229
  transition: opacity 0.3s ease;
230
230
  line-height: inherit;
231
231
  }
@@ -240,7 +240,7 @@
240
240
  font-size: 16px;
241
241
  z-index: 0;
242
242
  /* Differ from Semantic UI */
243
- color: var(--colorsTextSubdued, #737475);
243
+ color: var(--colorsTextSubdued, #606162);
244
244
  height: auto;
245
245
  display: flex;
246
246
  align-items: center;