diff --git a/stylus/components/accordion.styl b/stylus/components/accordion.styl
index a5d02210e8..b0fbf0d773 100644
--- a/stylus/components/accordion.styl
+++ b/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
diff --git a/stylus/components/action-menu.styl b/stylus/components/action-menu.styl
index 01d1db8a95..44aa53fbd6 100644
--- a/stylus/components/action-menu.styl
+++ b/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)
diff --git a/stylus/components/button.styl b/stylus/components/button.styl
index 0e55d1c639..4601054cad 100644
--- a/stylus/components/button.styl
+++ b/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
diff --git a/stylus/components/chip.styl b/stylus/components/chip.styl
index 4826b1da7d..4e021916a6 100644
--- a/stylus/components/chip.styl
+++ b/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)
diff --git a/stylus/components/forms.styl b/stylus/components/forms.styl
index 3e615207b0..18a4567fa0 100644
--- a/stylus/components/forms.styl
+++ b/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)
diff --git a/stylus/components/modals.styl b/stylus/components/modals.styl
index 25d94d62b0..25f53e272a 100644
--- a/stylus/components/modals.styl
+++ b/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)
diff --git a/stylus/components/popover.styl b/stylus/components/popover.styl
index 38daf060f9..ed9739cbdf 100644
--- a/stylus/components/popover.styl
+++ b/stylus/components/popover.styl
@@ -10,7 +10,7 @@
$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)
@@ -18,7 +18,7 @@ $popover
hr
margin rem(5) 0
border 0
- border-top rem(1) solid var(--silver)
+ border-top rem(1) solid var(--dividerColor)
a
button
diff --git a/stylus/components/table.styl b/stylus/components/table.styl
index 2448be2647..5535b7ccb0 100644
--- a/stylus/components/table.styl
+++ b/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
diff --git a/stylus/components/tabs.styl b/stylus/components/tabs.styl
index 56a021a302..0ab674c77e 100644
--- a/stylus/components/tabs.styl
+++ b/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
diff --git a/stylus/components/wizard.styl b/stylus/components/wizard.styl
index e80d4ec596..05ae78385f 100644
--- a/stylus/components/wizard.styl
+++ b/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
diff --git a/stylus/cozy-ui/build.styl b/stylus/cozy-ui/build.styl
index 303568f720..a177f70def 100644
--- a/stylus/cozy-ui/build.styl
+++ b/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
diff --git a/stylus/objects/sidebar.styl b/stylus/objects/sidebar.styl
index 1b874e230d..f4f04de192 100644
--- a/stylus/objects/sidebar.styl
+++ b/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