fix(components): update borders for components (#5204)

* fix(components): update borders for components

* fix(comps): update all borders with neutral-50

* chore: revert for disabled states

Author: Amarnath510

ui/components/combobox/base/_index.scss

@@ -496,7 +496,7 @@ input[readonly][role="combobox"] {
       display: flex;
       position: relative;
       background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
-      border: 1px solid var(--slds-g-color-border-base-1, #{$color-border});
+      border: 1px solid var(--slds-g-color-border-base-4, #{$color-border});
       border-top: 0;
       border-bottom-left-radius: $border-radius-medium;
       border-bottom-right-radius: $border-radius-medium;
@@ -589,7 +589,7 @@ input[readonly][role="combobox"] {
 .slds-has-object-switcher {
   flex-direction: row;
   background: var(--slds-g-color-neutral-base-100, #{$color-background-input});
-  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: $border-radius-medium;
 
   .slds-combobox {

ui/components/expression/base/_index.scss

@@ -78,7 +78,7 @@
   */
 .slds-expression__group {
   background: var(--slds-g-color-neutral-base-95, #{$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: $border-radius-medium;
   padding: $spacing-small;
   margin-top: $spacing-small;

ui/components/expression/filters/_index.scss

@@ -101,7 +101,7 @@
  */
 .slds-filters__group {
   background: var(--slds-g-color-neutral-base-95, #{$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: $border-radius-medium;
   padding: $spacing-small;
 }

ui/components/feeds/comment/_deprecate.scss

@@ -23,7 +23,7 @@
 
       &:before {
         content: '';
-        background: var(--slds-g-color-border-base-1, #{$color-border});
+        background: var(--slds-g-color-border-base-4, #{$color-border});
         height: 100%;
         width: $border-width-thin;
         position: absolute;

ui/components/feeds/post/_index.scss

@@ -10,8 +10,8 @@
  */
 .slds-feed__item-comments {
   background: var(--slds-g-color-neutral-base-95, #{$color-background-post});
-  border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
-  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+  border-top: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
+  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
 
   .slds-comment {
     padding: $var-spacing-vertical-x-small $spacing-medium;
@@ -30,7 +30,7 @@
   padding: $spacing-small $spacing-medium;
 
   @include mq-medium-max {
-    border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+    border-top: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
   }
 
   @include mq-large-min {
@@ -90,7 +90,7 @@
   order: 1;
 
   @include mq-small-max {
-    border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+    border-top: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
     margin: 0 ($spacing-small * -1) ($spacing-small * -1);
     padding: 0 $spacing-medium;
   }
@@ -197,7 +197,7 @@
   // class .slds-region--narrow
   .slds-post__footer-actions-list {
     order: 1;
-    border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+    border-top: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
     margin: 0 ($spacing-small * -1) ($spacing-small * -1);
     padding: 0 $spacing-medium;
   }

ui/components/menus/dropdown/_index.scss

@@ -111,7 +111,7 @@
   max-width: $size-medium;
   margin-top: $spacing-xxx-small;
   margin-bottom: $spacing-xxx-small;
-  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: $border-radius-medium;
   padding: $spacing-xx-small 0;
   font-size: $font-size-2;

ui/components/pills/base/_deprecate.scss

@@ -15,7 +15,7 @@
     display: flex;
     min-height: calc(#{$height-input} + 2px);
     padding: $spacing-xxx-small;
-    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: $border-radius-medium;
     background-color: var(--slds-g-color-neutral-base-100, #{$color-background-input});
 

ui/components/pills/base/_index.scss

@@ -22,7 +22,7 @@
   padding-left: var(--slds-c-pill-spacing-inline-start, var(--sds-c-pill-spacing-inline-start, $spacing-xxx-small));
   border-width: var(--slds-c-pill-sizing-border, var(--sds-c-pill-sizing-border, $border-width-thin));
   border-style: solid;
-  border-color: var(--slds-c-pill-color-border, var(--sds-c-pill-color-border, var(--slds-g-color-border-base-1, #{$color-border})));
+  border-color: var(--slds-c-pill-color-border, var(--sds-c-pill-color-border, var(--slds-g-color-border-base-4, #{$color-border})));
   border-radius: var(--slds-c-pill-radius-border, var(--sds-c-pill-radius-border, $border-radius-medium));
   background-color: var(--slds-c-pill-color-background, var(--sds-c-pill-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-pill})));
   box-shadow: var(--slds-c-pill-shadow);
@@ -89,7 +89,7 @@
   padding-left: var(--slds-c-pill-container-spacing-inline-start, var(--sds-c-pill-container-spacing-inline-start, $spacing-xxx-small));
   border-width: var(--slds-c-pill-sizing-border, var(--sds-c-pill-sizing-border, $border-width-thin));
   border-style: solid;
-  border-color: var(--slds-c-pill-color-border, var(--sds-c-pill-color-border, var(--slds-g-color-border-base-1, #{$color-border})));
+  border-color: var(--slds-c-pill-color-border, var(--sds-c-pill-color-border, var(--slds-g-color-border-base-4, #{$color-border})));
   border-radius: var(--slds-c-pill-radius-border, var(--sds-c-pill-radius-border, $border-radius-medium));
   background-color: var(--slds-c-pill-container-color-background, var(--sds-c-pill-container-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-input})));
 
@@ -199,7 +199,7 @@
   padding-left: var(--slds-c-pill-spacing-inline-start, var(--sds-c-pill-spacing-inline-start, $spacing-xxx-small));
   border-width: var(--slds-c-pill-sizing-border, var(--sds-c-pill-sizing-border, $border-width-thin));
   border-style: solid;
-  border-color: var(--slds-c-pill-color-border, var(--sds-c-pill-color-border, var(--slds-g-color-border-base-1, #{$color-border})));
+  border-color: var(--slds-c-pill-color-border, var(--sds-c-pill-color-border, var(--slds-g-color-border-base-4, #{$color-border})));
   border-radius: var(--slds-c-pill-radius-border, var(--sds-c-pill-radius-border, $border-radius-medium));
   white-space: nowrap;
   overflow: hidden;

ui/components/rich-text-editor/base/_index.scss

@@ -11,7 +11,7 @@
  * @variant
  */
 .slds-rich-text-editor {
-  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: $border-radius-medium;
 }
 
@@ -41,7 +41,7 @@
   padding: $spacing-x-small $spacing-x-small $spacing-xx-small $spacing-x-small;
   border-top-left-radius: $border-radius-medium;
   border-top-right-radius: $border-radius-medium;
-  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
   background-color: var(--slds-g-color-neutral-base-95, #{$color-background});
 }
 
@@ -75,7 +75,7 @@
  */
 .slds-rich-text-editor__toolbar_bottom {
   border-radius: 0 0 $border-radius-medium $border-radius-medium;
-  border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
+  border-top: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
   border-bottom: 0;
 }