@servicetitan/design-system 11.5.1 → 11.5.2-beta.1

package/dist/components/index.css

@@ -185,6 +185,7 @@ span.Popover {
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus {
   background: var(--colorsSurfacePrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
   cursor: pointer;
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
@@ -203,7 +204,7 @@ span.Popover {
   color: var(--colorsTextOnPrimary, #ffffff);
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__icon .a-Icon > svg {
-  fill: var(--colorsTextOnPrimary, #ffffff) !important;
+  fill: currentColor !important;
 }
 .ActionMenu .ActionMenuItem .ActionMenuItem__icon,
 .ActionMenu .ActionMenuItem .ActionMenuItem__content {
@@ -302,7 +303,6 @@ span.Popover {
   background-color: transparent;
 }
 
-/* Variables */
 /* Form Sizes */
 .Form--mini {
   font-size: 0.8125rem;
@@ -342,25 +342,23 @@ span.Popover {
   width: 100%;
 }
 
-/* Global variables for Input, TextArea, Select */
-/* FormField error */
 /* Backward compatibility with Semantic.React Fields */
 .Fields.Fields--error .Field .Input > input,
 .Fields.Fields--error .Field .TextArea,
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
-  background-color: #ffece9;
-  border-color: #e63717;
-  color: #e63717;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #e63717);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
 .Fields.Fields--error .Field .TextArea:focus,
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
-  background-color: #ffece9;
-  border-color: #e63717;
-  color: #e63717;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #e63717);
   box-shadow: none;
   -webkit-appearance: none;
 }
@@ -466,8 +464,8 @@ span.Popover {
   box-sizing: border-box;
   width: 100%;
   background: var(--colorsSurfaceDefault, #ffffff);
-  border-radius: 3px;
   border: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  border-radius: 3px;
   color: var(--colorsTextDefault, #141414);
   padding: 7px 12px;
   cursor: pointer;
@@ -489,7 +487,7 @@ span.Popover {
   opacity: 0.4;
 }
 .Trigger.Trigger--error .Trigger__placeholder {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #e63717);
   opacity: 0.6;
 }
 .Trigger .Trigger__clear.Button {
@@ -521,7 +519,7 @@ span.Popover {
 
 .Trigger--error {
   border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #e63717);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--error:focus, .Trigger--error:active {
@@ -530,7 +528,7 @@ span.Popover {
 }
 .Trigger--error .Trigger__value,
 .Trigger--error .Button {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #e63717);
 }
 
 .Trigger--disabled {
@@ -542,7 +540,7 @@ span.Popover {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--disabled.Trigger--error .Trigger__clear.Button--disabled.Button--subtle {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #e63717);
 }
 .Trigger--disabled .Trigger__clear.Button--disabled.Button--subtle {
   opacity: 1;
@@ -564,7 +562,7 @@ span.Popover {
   margin-right: 11px;
 }
 .Trigger--error .Trigger__shortLabel {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #e63717);
   border-color: var(--colorsBorderCritical, #e63717);
 }
 .Trigger-open .Trigger__shortLabel, .Trigger:active .Trigger__shortLabel {
@@ -617,7 +615,7 @@ span.Popover {
   color: var(--colorsTextSubdued, #737475);
 }
 .Trigger--error .Trigger__arrow.a-Icon {
-  color: var(--colorsTextCritical, #f94d32);
+  color: var(--colorsTextCritical, #e63717);
 }
 
 .Trigger__value {
@@ -1297,7 +1295,7 @@ button.Button--full {
   border-bottom-right-radius: 0;
 }
 .ButtonGroup--attached .ButtonGroup__InternalWrapper .ButtonGroup__Item:not(:first-child) .Button--solid:not(:focus) {
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
+  box-shadow: inset 1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .ButtonGroup--attached .ButtonGroup__InternalWrapper .ButtonGroup__Item .Button--solid:hover {
   box-shadow: none;
@@ -2545,6 +2543,7 @@ button.Button--full {
 }
 .FilterButton .BodyText {
   color: inherit;
+  white-space: nowrap;
 }
 .FilterButton.FilterButton--focus-visible:focus {
   outline: 0;
@@ -2711,7 +2710,6 @@ button.Button--full {
   color: var(--colorsStatusCritical, #f94d32);
 }
 
-/*** FormField styles ***/
 .FormField {
   box-sizing: border-box;
   clear: both;
@@ -2770,7 +2768,7 @@ button.Button--full {
 }
 
 .FormField__errorText {
-  color: #e63717;
+  color: var(--colorsTextCritical, #e63717);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -2780,7 +2778,7 @@ button.Button--full {
 }
 
 .FormField__description {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -2807,33 +2805,28 @@ button.Button--full {
   opacity: 0.6;
 }
 
-/* Errors
-		On Field(s)
-*/
-.FormField--error {
-  /* Selected */
-  /* Active */
+/* Errors on Semantic Dropdown */
+.FormField--error .semantic-anvil-theme .ui.dropdown {
+  color: var(--colorsTextCritical, #e63717);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
 }
-.FormField--error .ui.dropdown,
-.FormField--error .ui.dropdown .item {
-  background-color: #ffece9;
-  color: #e63717;
+.FormField--error .semantic-anvil-theme .ui.dropdown .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !important;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
-.FormField--error .ui.dropdown,
-.FormField--error .semantic-anvil-theme .ui.selection.dropdown .menu,
-.FormField--error .semantic-anvil-theme .ui.selection.dropdown .menu:hover {
-  border-color: #e63717;
+.FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
+  color: var(--colorsTextCritical, #e63717);
 }
-.FormField--error .ui.multiple.selection.dropdown > .label {
-  background-color: #ffece9;
+.FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
 }
-.FormField--error .ui.dropdown .menu .selected.item,
-.FormField--error .ui.dropdown .menu .item:hover {
-  background-color: #ffd6d0;
-  color: #cf3115;
+.FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
+  color: var(--colorsTextCritical, #e63717);
 }
-.FormField--error .ui.dropdown .menu .active.item {
-  background-color: #ffd6d0 !important;
+.FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
 }
 
 /* Dropdown Block */
@@ -7832,7 +7825,7 @@ button.a-Icon svg {
   content: "";
   display: block;
   position: absolute;
-  background-color: #f5f5f5;
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
   width: 100%;
   height: 100%;
   top: 0;
@@ -7851,11 +7844,11 @@ button.a-Icon svg {
 }
 
 .InlineEdit__content--textcolor {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .InlineEdit__content--error {
-  color: #e63717;
+  color: var(--colorsTextCritical, #e63717);
 }
 
 .InlineEdit__content--underline .InlineEdit__value::before {
@@ -7866,11 +7859,12 @@ button.a-Icon svg {
   border-bottom: 1px dashed currentColor;
 }
 .InlineEdit__content--underline.InlineEdit__content--error::before {
-  border-bottom-color: #f94d32;
+  border-bottom-color: var(--colorsBorderCritical, #e63717);
 }
 
 .InlineEdit__value--placeholder {
-  color: rgba(4, 4, 4, 0.4);
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
 }
 
 .InlineEdit__content--icon .InlineEdit__editIcon {
@@ -7930,7 +7924,7 @@ button.a-Icon svg {
   align-self: flex-end;
 }
 
-/* Input variables are stored in Form.scss */
+/* Variables */
 /* Paddings are set in em's for internal parts of .Input */
 .Input.Input > .ButtonGroup:first-child > .ButtonGroup__InternalWrapper > .ButtonGroup__Item:first-child > .Button, .Input.Input > .Input__InnerWrapper:first-child,
 .Input.Input > .Dropdown:first-child,
@@ -7969,6 +7963,7 @@ button.a-Icon svg {
   border-bottom-right-radius: 0;
 }
 
+/* Styling for :autofill pseudo-class */
 /*** Input styles ***/
 .Input {
   /* Set color on root of component. It can be overridden after the @include */
@@ -7979,8 +7974,7 @@ button.a-Icon svg {
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   display: inline-flex;
-  color: #040404;
-  background-color: #ffffff;
+  color: var(--colorsTextDefault, #141414);
   /* Sizes */
   /*** States ***/
   /* Readonly */
@@ -8024,9 +8018,9 @@ button.a-Icon svg {
   padding: 0;
   max-width: 100%;
   /* ... */
-  background-color: #ffffff;
-  border: 1px solid #dfe0e1;
-  color: #040404;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  color: var(--colorsTextDefault, #141414);
   border-radius: 3px;
   transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
   box-shadow: none;
@@ -8047,101 +8041,99 @@ button.a-Icon svg {
   font-family: inherit;
   font-size: inherit;
   outline: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: left;
   line-height: 1.5;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   /* ... */
   background-color: transparent;
   border: none;
-  color: #040404;
+  color: var(--colorsTextDefault, #141414);
   transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
   box-shadow: none;
   /* Chrome autofill styling */
 }
 .Input > .Input__InnerWrapper > input[readonly] {
-  background-color: #f7f7f7;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 .Input > .Input__InnerWrapper > input::placeholder {
-  color: rgba(4, 4, 4, 0.4);
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.Input > .Input__InnerWrapper > input:autofill {
+  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
 }
-.Input > .Input__InnerWrapper > input::-webkit-autofill {
-  box-shadow: 0 0 0 100px #fffff0 inset !important;
-  border-color: #e5dfa1 !important;
+.Input > .Input__InnerWrapper > input:autofill + .InputAddon {
+  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
+}
+.Input > .Input__InnerWrapper > input:-webkit-autofill {
+  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
+}
+.Input > .Input__InnerWrapper > input:-webkit-autofill + .InputAddon {
+  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
 }
 .Input.Input--readonly > .Input__InnerWrapper {
-  background-color: #f7f7f7;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 .Input.Input--disabled, .Input:not(.Input--disabled) input[disabled] {
   opacity: 0.6;
 }
-.Input.Input--disabled *, .Input:not(.Input--disabled) input[disabled] * {
-  pointer-events: none;
+.Input.Input--disabled > .Input__InnerWrapper, .Input:not(.Input--disabled) input[disabled] {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
-.Input.Input--disabled input, .Input:not(.Input--disabled) input[disabled], .Input.Input--disabled .InputAddon {
-  background-color: #f7f7f7;
+.Input.Input--disabled > .Input__InnerWrapper, .Input.Input--disabled > .Input__InnerWrapper *, .Input:not(.Input--disabled) input[disabled], .Input:not(.Input--disabled) input[disabled] * {
   pointer-events: none;
 }
-.Input.Input--disabled input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
-  color: rgba(4, 4, 4, 0.4);
+.Input.Input--disabled > .Input__InnerWrapper::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
 }
 .Input:focus-within, .Input.Input--focus {
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   border-radius: 3px;
 }
 .Input:focus-within > .Input__InnerWrapper, .Input.Input--focus > .Input__InnerWrapper {
-  background-color: #ffffff;
-  border-color: #2270ee;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Input:focus-within > .Input__InnerWrapper > input, .Input.Input--focus > .Input__InnerWrapper > input {
-  color: #040404;
-}
-.Input:focus-within > .Input__InnerWrapper > input::-webkit-autofill, .Input.Input--focus > .Input__InnerWrapper > input::-webkit-autofill {
-  box-shadow: 0 0 0 100px #fffff0 inset !important;
-  border-color: #d5c315 !important;
-}
-.Input:focus-within > .Input__InnerWrapper > .InputAddon, .Input.Input--focus > .Input__InnerWrapper > .InputAddon {
-  border-color: transparent;
+  color: var(--colorsTextDefault, #141414);
 }
 .Input.Input--error {
   /* Error Focus */
 }
 .Input.Input--error > .Input__InnerWrapper {
-  background-color: #ffece9;
-  border-color: #e63717;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .Input.Input--error > .Input__InnerWrapper > input {
-  color: #e63717;
+  color: var(--colorsTextCritical, #e63717);
   box-shadow: none;
   /* Error Placeholder */
-  /* Error */
 }
-.Input.Input--error > .Input__InnerWrapper > input::-webkit-input-placeholder {
-  color: rgba(230, 55, 23, 0.6);
+.Input.Input--error > .Input__InnerWrapper > input::placeholder {
+  color: var(--colorsTextCritical, #e63717);
+  opacity: 0.4;
 }
-.Input.Input--error > .Input__InnerWrapper > input::-moz-placeholder {
-  color: rgba(230, 55, 23, 0.6);
+.Input.Input--error > .Input__InnerWrapper > input:autofill {
+  box-shadow: none !important;
+}
+.Input.Input--error > .Input__InnerWrapper > input:autofill + .InputAddon {
+  box-shadow: none !important;
 }
-.Input.Input--error > .Input__InnerWrapper > input:-ms-input-placeholder {
-  color: rgba(230, 55, 23, 0.6);
+.Input.Input--error > .Input__InnerWrapper > input:-webkit-autofill {
+  box-shadow: none !important;
 }
-.Input.Input--error > .Input__InnerWrapper > input::-webkit-autofill {
-  box-shadow: 0 0 0 100px #ffece9 inset !important;
-  border-color: #e63717 !important;
+.Input.Input--error > .Input__InnerWrapper > input:-webkit-autofill + .InputAddon {
+  box-shadow: none !important;
 }
 .Input.Input--error > .Input__InnerWrapper > .InputAddon {
-  color: #e63717;
+  color: var(--colorsTextCritical, #e63717);
 }
 .Input.Input--error:focus-within, .Input.Input--error.Input--focus {
-  box-shadow: 0 0 0 3px #ffb2a0;
-}
-.Input.Input--error:focus-within input, .Input.Input--error.Input--focus input {
-  border-color: #e63717;
-}
-.Input.Input--error:focus-within .InputAddon, .Input.Input--error.Input--focus .InputAddon {
-  border-color: #e63717;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
-.Input.Input--error .InputAddon > .a-Icon {
-  color: #e63717;
+.Input.Input--error .InputAddon .a-Icon {
+  color: var(--colorsTextCritical, #e63717);
 }
 .Input.Input--loading.Input--loading .Spinner {
   line-height: 1;
@@ -8160,7 +8152,7 @@ button.a-Icon svg {
   pointer-events: none;
 }
 .Input > .Input__InnerWrapper .a-Icon {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   transition: opacity 0.3s ease;
   line-height: inherit;
 }
@@ -8175,7 +8167,7 @@ button.a-Icon svg {
   font-size: 16px;
   z-index: 0;
   /* Differ from Semantic UI */
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   height: auto;
   display: flex;
   align-items: center;
@@ -10910,6 +10902,10 @@ button.a-Icon svg {
 .Table.k-grid tr.k-state-selected:hover {
   background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
 }
+.Table.k-grid tr.k-alt.k-state-selected > td,
+.Table.k-grid tr.k-state-selected > td {
+  background-color: inherit;
+}
 .Table.k-grid tbody tr.k-state-hover,
 .Table.k-grid tbody tr:hover {
   background-color: var(--colorsSurfaceGrey, #eeeeee);
@@ -11070,7 +11066,10 @@ button.a-Icon svg {
 .Tag.Tag--subtle.Tag--default {
   background-color: transparent;
   box-shadow: 0 0 0 1px #d0d8dd inset;
-  color: #444445;
+  color: var(--colorsTextOnGrey, #444445);
+}
+.Tag.Tag--subtle.Tag--default .Tag__close.Button {
+  color: inherit;
 }
 .Tag.Tag--badge {
   border-radius: 12px;
@@ -11402,20 +11401,21 @@ button.a-Icon svg {
   font-family: inherit;
 }
 
+/* Variables */
+/* Styling for :autofill pseudo-class */
 .TextArea {
-  /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #ffffff;
-  border: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 3px;
   box-shadow: none;
   box-sizing: border-box;
-  color: #040404;
+  color: var(--colorsTextDefault, #141414);
   font-size: 16px;
   outline: none;
   line-height: 1.2857;
@@ -11430,55 +11430,59 @@ button.a-Icon svg {
   /* States */
 }
 .TextArea::placeholder {
-  color: rgba(4, 4, 4, 0.4);
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
 }
 @supports (-moz-appearance: none) {
   .TextArea {
     overflow-x: hidden;
   }
 }
-.TextArea:focus {
-  color: #040404;
-  border-color: #2270ee;
-  background-color: #ffffff;
+.TextArea:focus-within, .TextArea:focus {
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   -webkit-appearance: none;
 }
 .TextArea.TextArea--disabled, .TextArea:not(.TextArea--disabled)[disabled] {
-  background-color: #f7f7f7;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
   opacity: 0.6;
   pointer-events: none;
 }
 .TextArea[disabled], .TextArea[readonly] {
-  background-color: #f7f7f7;
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
 }
 .TextArea[readonly]::placeholder {
-  color: rgba(4, 4, 4, 0.4);
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.TextArea:autofill {
+  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
+}
+.TextArea:-webkit-autofill {
+  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
 }
 
 .TextArea.TextArea--error {
-  background-color: #ffece9;
-  border-color: #e63717;
-  color: #e63717;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #e63717);
   /* Error Placeholder */
-  /* Error */
-}
-.TextArea.TextArea--error:focus {
-  box-shadow: 0 0 0 3px #ffb2a0;
-  color: #e63717;
 }
-.TextArea.TextArea--error::-webkit-input-placeholder {
-  color: rgba(230, 55, 23, 0.6);
+.TextArea.TextArea--error:focus-within, .TextArea.TextArea--error:focus {
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+  color: var(--colorsTextCritical, #e63717);
 }
-.TextArea.TextArea--error::-moz-placeholder {
-  color: rgba(230, 55, 23, 0.6);
+.TextArea.TextArea--error::placeholder {
+  color: var(--colorsTextCritical, #e63717);
+  opacity: 0.4;
 }
-.TextArea.TextArea--error:-ms-input-placeholder {
-  color: rgba(230, 55, 23, 0.6);
+.TextArea.TextArea--error:autofill {
+  box-shadow: none !important;
 }
-.TextArea.TextArea--error::-webkit-autofill {
-  box-shadow: 0 0 0 100px #ffece9 inset !important;
-  border-color: #e63717 !important;
+.TextArea.TextArea--error:-webkit-autofill {
+  box-shadow: none !important;
 }
 
 .Thumbnail {