Merge pull request #1461 from cozy/border-color

stylus/components/accordion.styl

@@ -4,7 +4,7 @@ $accordion
     padding 0
 
 $accordion-item
-    border-bottom: rem(1) solid var(--silver)
+    border-bottom: rem(1) solid var(--dividerColor)
     font-size rem(16)
 
 $accordion-title

stylus/components/action-menu.styl

@@ -26,7 +26,7 @@ $actionmenu--inline
 
 $actionmenu-header
     box-sizing border-box
-    border-bottom rem(1) solid var(--silver)
+    border-bottom rem(1) solid var(--dividerColor)
     padding rem(16)
     min-height rem(64)
     margin-top -($smallScreenPaddingTop)

stylus/components/button.styl

@@ -400,7 +400,7 @@ $actionbtn
         flex-wrap nowrap
 
     [data-action='icon']
-        border-left rem(1) solid var(--silver)
+        border-left rem(1) solid var(--dividerColor)
 
     &:not([disabled]):hover
     &:not([disabled]):focus

stylus/components/chip.styl

@@ -91,7 +91,7 @@ $chip--clickable
 
 $chip-separator
     width rem(1)
-    border-left rem(1) solid var(--silver)
+    border-left rem(1) solid var(--dividerColor)
     display inline-block
     height 40%
     margin-left rem(8)

stylus/components/forms.styl

@@ -92,7 +92,7 @@ $form-text
         box-sizing     border-box
         border-radius  rem(2)
         background     var(--white)
-        border         rem(1) solid var(--silver)
+        border         rem(1) solid var(--dividerColor)
         color          var(--black)
 
         &::placeholder
@@ -117,7 +117,7 @@ $form-textarea
         box-sizing     border-box
         border-radius  rem(2)
         background     var(--white)
-        border         rem(1) solid var(--silver)
+        border         rem(1) solid var(--dividerColor)
         color          var(--black)
 
         &::placeholder
@@ -142,7 +142,7 @@ $form-select
         border-radius        rem(4)
         box-sizing           border-box
         background           var(--white)
-        border               rem(1) solid var(--silver)
+        border               rem(1) solid var(--dividerColor)
         color                var(--black)
         appearance           none
         background-image     embedurl('../../assets/icons/ui/dropdown.svg')
@@ -247,7 +247,7 @@ $input--disabled
 
     &:hover
     &:focus
-        border rem(1) solid var(--silver)
+        border rem(1) solid var(--dividerColor)
 
 $input-text
     display inline-block
@@ -257,7 +257,7 @@ $input-text
     box-sizing border-box
     border-radius rem(3)
     background var(--white)
-    border rem(1) solid var(--silver)
+    border rem(1) solid var(--dividerColor)
     font-size rem(16)
     line-height 1.25
     color var(--charcoalGrey)
@@ -482,7 +482,7 @@ $inputgroup
     align-items stretch
     width 100%
     max-width rem(512)
-    border rem(1) solid var(--silver)
+    border rem(1) solid var(--dividerColor)
     border-radius rem(2)
     &:hover
         border rem(1) solid var(--coolGrey)

stylus/components/modals.styl

@@ -169,7 +169,7 @@ $modal-header-app-icon
     margin-right rem(8)
 
 $modal-content-fixed
-    border-bottom rem(1) solid var(--silver)
+    border-bottom rem(1) solid var(--dividerColor)
     flex 0 0 auto
     padding 0 medium-padding
 
@@ -236,7 +236,7 @@ $modal-footer--button
             min-width calc(50% - .5rem)
 
 $modal-section
-    border-top rem(1) solid var(--silver)
+    border-top rem(1) solid var(--dividerColor)
 
 cross-size=rem(40)
 

stylus/components/popover.styl

@@ -10,15 +10,15 @@
 
 $popover
     z-index           $popover-index
-    border            rem(1) solid var(--silver)
+    border            rem(1) solid var(--dividerColor)
     border-radius     rem(4)
     box-shadow        rem(0 1 3 0) rgba(50, 54, 63, .19), rem(0 6 18 0) rgba(50, 54, 63, .19)
-    background-color  var(--white)
+    background-color  var(--paperBackgroundColor)
 
     hr
         margin      rem(5) 0
         border      0
-        border-top  rem(1) solid var(--silver)
+        border-top  rem(1) solid var(--dividerColor)
 
     a
     button

stylus/components/table.styl

@@ -35,7 +35,7 @@ $table-row
     flex 0 0 auto
     height rem(48)
     width 100%
-    border-top rem(1) solid var(--silver)
+    border-top rem(1) solid var(--dividerColor)
 
     &:hover
         background-color var(--paleGrey)
@@ -44,7 +44,7 @@ $table-row
             background-color transparent
 
     &:last-child
-        border-bottom rem(1) solid var(--silver)
+        border-bottom rem(1) solid var(--dividerColor)
 
     +medium-screen()
         max-width 100vw

stylus/components/tabs.styl

@@ -4,7 +4,7 @@
 $tabs-base
     $borderBottomWidth=rem(2)
     .coz-tab-list
-        border-bottom  rem(1) solid var(--silver)
+        border-bottom  rem(1) solid var(--dividerColor)
         background var(--tabsBackgroundColor)
         overflow-x auto
         display flex

stylus/components/wizard.styl

@@ -276,7 +276,7 @@ $wizard-brand-with
         left 0
         top 50%
         height rem(24)
-        border-left rem(1) solid var(--silver)
+        border-left rem(1) solid var(--dividerColor)
         transform translateY(-50%)
 
 $wizard-next
@@ -418,7 +418,7 @@ $wizard-dualfield
     display flex
     flex-direction row
     align-items stretch
-    border rem(1) solid var(--silver)
+    border rem(1) solid var(--dividerColor)
     border-radius rem(2)
 
 $wizard-dualfield--focus
@@ -448,7 +448,7 @@ $wizard-protocol
     display flex
     align-items center
     background-color var(--paleGrey)
-    border-right rem(1) solid var(--silver)
+    border-right rem(1) solid var(--dividerColor)
     padding 0 rem(16)
 
     svg
@@ -526,7 +526,7 @@ $wizard-agreements-item
     flex-direction column
     flex 1 1 calc(100% / 6 - .5rem)
     margin rem(16 4 0)
-    border rem(1) solid var(--silver)
+    border rem(1) solid var(--dividerColor)
     border-radius rem(8)
     padding rem(16)
     color var(--slateGrey)
@@ -549,7 +549,7 @@ $wizard-agreements-desc
 
     +medium-screen()
         flex 1 1 100%
-        border-bottom rem(1) solid var(--silver)
+        border-bottom rem(1) solid var(--dividerColor)
         padding-bottom rem(16)
         font-size rem(16)
         line-height 1.5

stylus/cozy-ui/build.styl

@@ -2055,7 +2055,7 @@ Display an chip that represents complex identity
 
  Tells a container how its exceeding content behaves
 
- Markup: <div style="border:1px solid silver;" class="u-mb-2 u-p-half u-w-5 u-h-4 {{modifier_class}}">Non habitant lobortis hac maecenas eleifend donec parturient, lacinia aenean ac varius mattis purus scelerisque, congue montes dapibus tempor semper proin. Ullamcorper malesuada proin nec accumsan fermentum ac suspendisse posuere, lectus tristique tortor lorem faucibus primis sodales.</div>
+ Markup: <div style="border:1px solid var(--dividerColor);" class="u-mb-2 u-p-half u-w-5 u-h-4 {{modifier_class}}">Non habitant lobortis hac maecenas eleifend donec parturient, lacinia aenean ac varius mattis purus scelerisque, congue montes dapibus tempor semper proin. Ullamcorper malesuada proin nec accumsan fermentum ac suspendisse posuere, lectus tristique tortor lorem faucibus primis sodales.</div>
 
  .u-ov-visible - Sets a visible overflow
  .u-ov-hidden - Sets an hidden overflow

stylus/objects/sidebar.styl

@@ -7,13 +7,13 @@
 
 $sidebar
     width rem(220)
-    border-right rem(1) solid var(--silver)
+    border-right rem(1) solid var(--dividerColor)
     background-color var(--paleGrey)
 
     +medium-screen()
         justify-content space-between
         border 0
-        border-top rem(1) solid var(--silver)
+        border-top rem(1) solid var(--dividerColor)
         height rem(48)
         width 100%
         // iPhone X environment tweak