[OP-145] --op-border-color rename (#212)

This PR updates the border color token name to recategorize it as a color token

src/addons/tom-select.scss

@@ -9,7 +9,7 @@
     border: none;
     border-radius: var(--op-radius-large);
     background-color: var(--op-color-neutral-plus-max);
-    box-shadow: var(--op-border-all) var(--op-border-color);
+    box-shadow: var(--op-border-all) var(--op-color-border);
     color: var(--op-color-neutral-on-plus-max);
     font-size: var(--op-font-x-small);
     font-weight: var(--op-font-weight-light);
@@ -30,7 +30,7 @@
     margin: 0;
     border-bottom-left-radius: var(--op-radius-large);
     border-bottom-right-radius: var(--op-radius-large);
-    box-shadow: var(--op-border-all) var(--op-border-color);
+    box-shadow: var(--op-border-all) var(--op-color-border);
     contain: paint;
 
     .option,

src/components/card.scss

@@ -2,7 +2,7 @@
   position: relative;
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
@@ -17,31 +17,31 @@
 
   &.card--shadow-x-small {
     box-shadow:
-      var(--op-border-all) var(--op-border-color),
+      var(--op-border-all) var(--op-color-border),
       var(--op-shadow-x-small);
   }
 
   &.card--shadow-small {
     box-shadow:
-      var(--op-border-all) var(--op-border-color),
+      var(--op-border-all) var(--op-color-border),
       var(--op-shadow-small);
   }
 
   &.card--shadow-medium {
     box-shadow:
-      var(--op-border-all) var(--op-border-color),
+      var(--op-border-all) var(--op-color-border),
       var(--op-shadow-medium);
   }
 
   &.card--shadow-large {
     box-shadow:
-      var(--op-border-all) var(--op-border-color),
+      var(--op-border-all) var(--op-color-border),
       var(--op-shadow-large);
   }
 
   &.card--shadow-x-large {
     box-shadow:
-      var(--op-border-all) var(--op-border-color),
+      var(--op-border-all) var(--op-color-border),
       var(--op-shadow-x-large);
   }
 

src/components/confirm-dialog.scss

@@ -42,7 +42,7 @@
   width: var(--_op-confirm-dialog-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
@@ -63,7 +63,7 @@
   }
 
   .confirm-dialog__body {
-    box-shadow: var(--op-border-all) var(--op-border-color);
+    box-shadow: var(--op-border-all) var(--op-color-border);
   }
 
   .confirm-dialog__footer {

src/components/divider.scss

@@ -12,7 +12,7 @@
   --__op-divider-height: var(--_op-divider-height-small);
   --__op-divider-padding: 0;
 
-  background-color: var(--op-border-color);
+  background-color: var(--op-color-border);
 
   // Size Modifiers
   &.divider--small {

src/components/modal.scss

@@ -46,7 +46,7 @@
   width: var(--_op-modal-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
@@ -71,7 +71,7 @@
 
   .modal__body {
     max-height: var(--_op-modal-max-height);
-    box-shadow: var(--op-border-all) var(--op-border-color);
+    box-shadow: var(--op-border-all) var(--op-color-border);
     overflow-y: auto;
   }
 

src/components/side_panel.scss

@@ -17,11 +17,11 @@
 
   // Modifiers
   &.side-panel--border-left {
-    box-shadow: var(--op-border-left) var(--op-border-color);
+    box-shadow: var(--op-border-left) var(--op-color-border);
   }
 
   &.side-panel--border-right {
-    box-shadow: var(--op-border-right) var(--op-border-color);
+    box-shadow: var(--op-border-right) var(--op-color-border);
   }
 
   &.side-panel--border-left.side-panel--border-right {

src/components/table.scss

@@ -12,13 +12,13 @@
   width: 100%;
   border-radius: var(--op-radius-medium);
   border-collapse: collapse;
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   contain: paint;
   table-layout: auto;
 
   thead {
     background-color: var(--op-color-neutral-plus-eight);
-    box-shadow: inset var(--op-border-top) var(--op-border-color);
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
     color: var(--op-color-neutral-on-plus-eight);
 
     // This Currently does not work in Firefox since it does not support :has yet, but fails gracefully.
@@ -47,11 +47,11 @@
   }
 
   tr:not(:last-child) {
-    box-shadow: inset var(--op-border-top) var(--op-border-color);
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
   }
 
   tfoot tr {
-    box-shadow: var(--op-border-top) var(--op-border-color);
+    box-shadow: var(--op-border-top) var(--op-color-border);
   }
 
   // Layout Modifiers

src/core/tokens/base_tokens.scss

@@ -128,11 +128,11 @@ $breakpoint-x-large: 1440px; // medium laptop
   * @tokens Border Color
   * @presenter Color
   */
-  --op-border-color: var(--op-color-neutral-plus-five);
+  --op-color-border: var(--op-color-neutral-plus-five);
 }
 
 @mixin box-shadows {
-  // E.G. box-shadow: var(--op-border-top) var(--op-border-color);
+  // E.G. box-shadow: var(--op-border-top) var(--op-color-border);
 
   /**
   * @tokens Border Shadow
@@ -144,8 +144,8 @@ $breakpoint-x-large: 1440px; // medium laptop
   --op-border-right: var(--op-border-width) 0 0 0;
   --op-border-bottom: 0 var(--op-border-width) 0 0;
   --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
-  --op-border-y: var(--op-border-top) var(--op-border-color), var(--op-border-bottom) var(--op-border-color);
-  --op-border-x: var(--op-border-left) var(--op-border-color), var(--op-border-right) var(--op-border-color);
+  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
+  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);
 }
 
 @mixin font-scales {

src/stories/Tokens/Border/BorderStroke.mdx

@@ -13,7 +13,7 @@ These can be composed with other box shadows such as [Shadow](?path=/docs/tokens
 These tokens can be applied as a box shadow with any color you wish.
 
 ```css
-box-shadow: var(--op-border-all) var(--op-border-color);
+box-shadow: var(--op-border-all) var(--op-color-border);
 // or
 box-shadow: var(--op-border-left) var(--op-color-primary-base);
 ```
@@ -23,7 +23,7 @@ box-shadow: var(--op-border-left) var(--op-color-primary-base);
 `inset` can be prefixed to invert a border.
 
 ```css
-box-shadow: inset var(--op-border-all) var(--op-border-color);
+box-shadow: inset var(--op-border-all) var(--op-color-border);
 // or
 box-shadow: inset var(--op-border-left) var(--op-color-primary-base);
 ```

src/stories/Tokens/Color/BorderColor.mdx

@@ -12,9 +12,9 @@ Border color tokens can be used to define the color of borders and box shadows.
 These tokens can be applied with a border or box shadow.
 
 ```css
-border-color: var(--op-border-color);
+border-color: var(--op-color-border);
 // or
-box-shadow: var(--op-border-top) var(--op-border-color);
+box-shadow: var(--op-border-top) var(--op-color-border);
 ```
 
 ## Available tokens and their definitions