Restore "fix(wcag2.1): fix ntcc issues" (#5106) (#5109) (#5110)

Dottenpixel · web-flow · commit e46f58d9c542 · 2022-12-16T01:06:27.000-08:00
This reverts commit e4dbeda.
diff --git a/ui/components/button-icons/base/_index.scss b/ui/components/button-icons/base/_index.scss
@@ -311,7 +311,7 @@
  */
 .slds-button__icon_hint,
 .slds-button__icon--hint {
-  fill: var(--slds-g-color-neutral-base-70, #{$color-text-icon-default-hint});
+  fill: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default-hint});
 }
 
 /**
@@ -346,7 +346,7 @@
 
     .slds-button__icon_hint,
     .slds-button__icon--hint {
-      fill: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});
+      fill: var(--slds-g-color-neutral-base-40, #{$color-text-icon-default});
     }
 
     .slds-button__icon_inverse-hint,
diff --git a/ui/components/carousel/base/_index.scss b/ui/components/carousel/base/_index.scss
@@ -133,7 +133,7 @@
   width: $carousel-indicator-width;
   height: $carousel-indicator-width;
   background: var(--slds-g-color-neutral-base-100, #{$carousel-indicator-color-background});
-  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
   border-radius: 50%;
 
   /**
diff --git a/ui/components/checkbox-button/base/_index.scss b/ui/components/checkbox-button/base/_index.scss
@@ -53,7 +53,7 @@
   &.slds-checkbox-button_is-checked {
     background-color: var(--slds-g-color-neutral-base-95, #{$color-background-button-brand-disabled});
     border-color: var(--slds-g-color-neutral-base-80, #{$color-border-button-brand-disabled});
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-disabled}); // Controls icon fill, not meant for text, faux Styling Hooks
+    color: var(--slds-g-color-neutral-base-80, #{$color-text-button-brand-disabled}); // Controls icon fill, not meant for text, faux Styling Hooks
   }
 }
 
diff --git a/ui/components/checkbox-toggle/base/_index.scss b/ui/components/checkbox-toggle/base/_index.scss
@@ -224,7 +224,7 @@
         // @todo consider shared hooks for inputs
         background-color: var(--slds-g-color-neutral-base-80, #{$color-background-toggle-disabled});
         // @todo consider shared hooks for inputs
-        border-color: var(--slds-g-color-neutral-base-60, #{$color-background-toggle}); // Prevents checked styles from bleeding through
+        border-color: var(--slds-g-color-neutral-base-80, #{$color-background-toggle}); // Prevents checked styles from bleeding through
         pointer-events: none;
 
         &:after {
@@ -247,7 +247,7 @@
 
           &:before {
             // @todo consider shared hooks for inputs
-            background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-checkbox-disabled});
+            background-color: var(--slds-g-color-neutral-base-90, #{$color-background-input-checkbox-disabled});
           }
 
           &:after {
diff --git a/ui/components/checkbox/base/_index.scss b/ui/components/checkbox/base/_index.scss
@@ -166,7 +166,7 @@
         // @todo consider shared hooks for inputs
         border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
         // @todo consider shared hooks for inputs
-        background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
+        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
 
         &:after {
           // @todo consider shared hooks for inputs
diff --git a/ui/components/combobox/base/_index.scss b/ui/components/combobox/base/_index.scss
@@ -186,7 +186,7 @@ input[readonly][role="combobox"] {
   }
 
   &[aria-disabled="true"] {
-    color: var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled});
+    color: var(--slds-g-color-neutral-base-50, #{$color-text-button-default-disabled});
   }
 }
 
diff --git a/ui/components/data-tables/inline-edit/_index.scss b/ui/components/data-tables/inline-edit/_index.scss
@@ -225,6 +225,11 @@
   &:focus .slds-button__icon--edit {
     opacity: 1;
   }
+
+  &[disabled],
+  &:disabled {
+   color: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});
+  }
 }
 
 /**
diff --git a/ui/components/dynamic-icons/trend/_index.scss b/ui/components/dynamic-icons/trend/_index.scss
@@ -69,7 +69,7 @@ $_icon-trend-one: 1.125px;
 }
 
 .slds-icon-trend[data-slds-trend="neutral"] {
-  color: var(--slds-g-color-neutral-base-60, #{$palette-neutral-60});
+  color: var(--slds-g-color-neutral-base-50, #{$palette-neutral-60});
 }
 
 .slds-icon-trend[data-slds-trend="up"] {
diff --git a/ui/components/file-selector/base/_index.scss b/ui/components/file-selector/base/_index.scss
@@ -21,7 +21,7 @@
  */
 .slds-file-selector__dropzone {
   padding: $spacing-xxx-small;
-  border: $border-width-thin dashed var(--slds-g-color-border-base-1, #{$color-border});
+  border: $border-width-thin dashed var(--slds-g-color-border-base-4, #{$color-border});
   border-radius: $border-radius-medium;
 
   /**
@@ -51,12 +51,12 @@
   }
 
   &[disabled] ~ .slds-file-selector__body {
-    color: var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled});
+    color: var(--slds-g-color-neutral-base-10, #{$color-text-button-default-disabled});
 
     > .slds-file-selector__button {
       background: var(--slds-g-color-neutral-base-95, #{$color-background-button-brand-disabled});
       border-color: var(--slds-g-color-neutral-base-80, #{$color-border-button-brand-disabled});
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-disabled});
+      color: var(--slds-g-color-neutral-base-30, #{$color-text-button-brand-disabled});
     }
 
     > .slds-file-selector__body-icon {
diff --git a/ui/components/pills/base/_index.scss b/ui/components/pills/base/_index.scss
@@ -232,4 +232,12 @@
     color: var(--slds-c-pill-error-text-color, var(--sds-c-pill-error-text-color,
       var(--slds-g-color-error-base-40, #{$color-text-error})));
   }
+
+  &:hover {
+    --slds-c-pill-error-text-color: var(--slds-g-color-error-base-30, #{$color-text-error});
+  
+    .slds-pill__icon_container .slds-icon-text-error {
+      --slds-c-icon-color-foreground: var(--slds-g-color-error-base-30, #{$color-text-error});
+    }
+  }
 }
diff --git a/ui/components/popovers/walkthrough/_deprecate.scss b/ui/components/popovers/walkthrough/_deprecate.scss
@@ -53,7 +53,7 @@
     }
 
     .slds-text-title {
-      color: var(--slds-g-color-neutral-base-80, #{$popover-color-text});
+      color: var(--slds-g-color-neutral-base-100, #{$popover-color-text});
     }
 
     .slds-input,
diff --git a/ui/components/popovers/warning/_index.scss b/ui/components/popovers/warning/_index.scss
@@ -22,7 +22,7 @@
 
   .slds-popover__header {
     background-color: var(--slds-g-color-warning-base-60, #{$color-background-warning});
-    color: var(--slds-g-color-neutral-base-20, #{$color-gray-12});
+    color: var(--slds-g-color-neutral-base-10, #{$color-gray-12});
 
     .slds-icon {
       fill: currentColor;
diff --git a/ui/components/progress-indicator/base/_index.scss b/ui/components/progress-indicator/base/_index.scss
@@ -99,7 +99,7 @@
   &.slds-is-completed .slds-progress__marker,
   &.slds-is-active .slds-progress__marker {
     background: var(--slds-g-color-neutral-base-100, #{$progress-color-background});
-    border-color: var(--slds-g-color-brand-base-60, #{$progress-color-border-active});
+    border-color: var(--slds-g-color-brand-base-50, #{$progress-color-border-active});
   }
 
   /**
diff --git a/ui/components/radio-group/base/_index.scss b/ui/components/radio-group/base/_index.scss
@@ -104,7 +104,7 @@
       ~ .slds-radio--faux,
       + .slds-radio__label .slds-radio_faux,
       + .slds-radio__label .slds-radio--faux {
-        background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
+        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
         border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
 
         &:after {
diff --git a/ui/components/select/base/_index.scss b/ui/components/select/base/_index.scss
@@ -36,7 +36,7 @@
 
   &[disabled],
   &.slds-is-disabled {
-    background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
+    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
     border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
     color: var(--slds-g-color-neutral-base-50, #{$color-text-input-disabled});
     cursor: not-allowed;
diff --git a/ui/components/spinners/base/_index.scss b/ui/components/spinners/base/_index.scss
@@ -101,7 +101,7 @@
 .slds-spinner__dot-b:after {
   content: '';
   position: absolute;
-  background: var(--slds-g-color-neutral-base-60, #{$color-background-spinner-dot});
+  background: var(--slds-g-color-neutral-base-50, #{$color-background-spinner-dot});
   border-radius: $border-radius-circle;
   animation-duration: 1000ms;
   animation-iteration-count: infinite;
diff --git a/ui/components/split-view/base/_index.scss b/ui/components/split-view/base/_index.scss
@@ -108,7 +108,7 @@
 
   .slds-indicator_unread,
   .slds-indicator--unread {
-    background: var(--slds-g-color-brand-base-60, #{$color-brand});
+    background: var(--slds-g-color-brand-base-50, #{$color-brand});
   }
 }
 
@@ -170,7 +170,7 @@
   width: 0.75rem;
   background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
   border-radius: 0;
-  border: $border-width-thin solid var(--slds-g-color-neutral-base-80, #{$color-border});
+  border: $border-width-thin solid var(--slds-g-color-neutral-base-50, #{$color-border});
 
   &:hover,
   &:focus {
diff --git a/ui/components/tabs/base/_index.scss b/ui/components/tabs/base/_index.scss
@@ -223,7 +223,7 @@
     line-height: inherit;
     color: var(--slds-c-tabs-item-text-color, var(--sds-c-tabs-item-text-color, var(--slds-g-color-neutral-base-30, #{$color-text-action-label})));
     box-shadow: none;
-
+    --slds-c-button-color-border-active: transparent;
     &:focus {
       text-decoration: underline;
     }
diff --git a/ui/components/visual-picker/coverable-content/_index.scss b/ui/components/visual-picker/coverable-content/_index.scss
@@ -131,7 +131,7 @@
 
       ~ label .slds-visual-picker__figure {
         border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
-        background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
+        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
         box-shadow: none;
 
         &:hover {
diff --git a/ui/dependencies/_forms.scss b/ui/dependencies/_forms.scss
@@ -16,7 +16,7 @@
 }
 
 @mixin form-input-disabled {
-  background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
+  background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
   border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
   cursor: not-allowed;
   user-select: none;
@@ -95,7 +95,7 @@
 }
 
 @mixin input-disabled {
-  background-color: var(--slds-g-color-neutral-base-80, #{$color-background-input-disabled});
+  background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
   border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
   color: var(--slds-g-color-neutral-base-50, #{$color-text-input-disabled});
   cursor: not-allowed;

Original file line number	Diff line number	Diff line change
`@@ -311,7 +311,7 @@`
`311`	`311`	`*/`
`312`	`312`	`.slds-button__icon_hint,`
`313`	`313`	`.slds-button__icon--hint {`
`314`		`- fill: var(--slds-g-color-neutral-base-70, #{$color-text-icon-default-hint});`
	`314`	`+ fill: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default-hint});`
`315`	`315`	`}`
`316`	`316`
`317`	`317`	`/**`
`@@ -346,7 +346,7 @@`
`346`	`346`
`347`	`347`	`.slds-button__icon_hint,`
`348`	`348`	`.slds-button__icon--hint {`
`349`		`- fill: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});`
	`349`	`+ fill: var(--slds-g-color-neutral-base-40, #{$color-text-icon-default});`
`350`	`350`	`}`
`351`	`351`
`352`	`352`	`.slds-button__icon_inverse-hint,`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`	`&.slds-checkbox-button_is-checked {`
`54`	`54`	`background-color: var(--slds-g-color-neutral-base-95, #{$color-background-button-brand-disabled});`
`55`	`55`	`border-color: var(--slds-g-color-neutral-base-80, #{$color-border-button-brand-disabled});`
`56`		`- color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-disabled}); // Controls icon fill, not meant for text, faux Styling Hooks`
	`56`	`+ color: var(--slds-g-color-neutral-base-80, #{$color-text-button-brand-disabled}); // Controls icon fill, not meant for text, faux Styling Hooks`
`57`	`57`	`}`
`58`	`58`	`}`
`59`	`59`
Original file line number	Diff line number	Diff line change
`@@ -186,7 +186,7 @@ input[readonly][role="combobox"] {`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`&[aria-disabled="true"] {`
`189`		`- color: var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled});`
	`189`	`+ color: var(--slds-g-color-neutral-base-50, #{$color-text-button-default-disabled});`
`190`	`190`	`}`
`191`	`191`	`}`
`192`	`192`
Original file line number	Diff line number	Diff line change
`@@ -225,6 +225,11 @@`
`225`	`225`	`&:focus .slds-button__icon--edit {`
`226`	`226`	`opacity: 1;`
`227`	`227`	`}`
	`228`	`+`
	`229`	`+ &[disabled],`
	`230`	`+ &:disabled {`
	`231`	`+ color: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});`
	`232`	`+ }`
`228`	`233`	`}`
`229`	`234`
`230`	`235`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ $_icon-trend-one: 1.125px;`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`.slds-icon-trend[data-slds-trend="neutral"] {`
`72`		`- color: var(--slds-g-color-neutral-base-60, #{$palette-neutral-60});`
	`72`	`+ color: var(--slds-g-color-neutral-base-50, #{$palette-neutral-60});`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.slds-icon-trend[data-slds-trend="up"] {`
Original file line number	Diff line number	Diff line change
`@@ -232,4 +232,12 @@`
`232`	`232`	`color: var(--slds-c-pill-error-text-color, var(--sds-c-pill-error-text-color,`
`233`	`233`	`var(--slds-g-color-error-base-40, #{$color-text-error})));`
`234`	`234`	`}`
	`235`	`+`
	`236`	`+ &:hover {`
	`237`	`+ --slds-c-pill-error-text-color: var(--slds-g-color-error-base-30, #{$color-text-error});`
	`238`	`+`
	`239`	`+ .slds-pill__icon_container .slds-icon-text-error {`
	`240`	`+ --slds-c-icon-color-foreground: var(--slds-g-color-error-base-30, #{$color-text-error});`
	`241`	`+ }`
	`242`	`+ }`
`235`	`243`	`}`