Update divider style (#5029)

# Motivation

To ensure consistent styling for dividers on the
proposal/proposal-details page, we have updated the style in this PR.

# Changes

- Use `--elements-divider` for the universe selector divider.
- Use `--elements-divider` for `Separator` component.
- Replace `--line ` with `--elements-divider` color for custom borders
(found with `border.*1px`)

**Side effect changes**: the proposals progress bar background and the
default tag background were slightly changed.

# Tests

- Approved by designer.

# Todos

- [x] Add entry to changelog (if necessary).

# Screenshots

<img width="555" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/3c8b4dea-6a54-40e8-9b77-32e35c08a315">

<img width="666" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/77f8f814-e76c-43ac-a786-1a09062f90fb">

<img width="861" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/a51d592f-3f0f-477a-8f11-0cb3336e4316">

<img width="1155" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/506ccf87-b2b1-4dc0-8811-b730a5cb9fd0">

<img width="664" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/4f9919d7-5d77-4b5e-91da-7409f3a7b900">

<img width="1161" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/49045382-2192-4de6-a1f3-2d6a3cee1207">

<img width="1188" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/05d4630b-24fc-4898-8455-e0237de4df8f">

<img width="1286" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/b6244da5-c4fe-4037-beef-381cb8e4ef74">

<img width="1196" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/8dfcabb6-c1ca-46dd-9ae7-e523b98701b9">

<img width="1158" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/1e1d6cc7-f0cb-4897-9618-98f3ad7eb906">



<img width="1174" alt="image"
src="https://github.com/dfinity/nns-dapp/assets/98811342/6e03fdb8-e6e7-4e1f-aaa9-0f0aa283fe10">

CHANGELOG-Nns-Dapp.md

@@ -23,6 +23,7 @@ here after a successful release.
 
 * Rename proposal navigation buttons to "Previous" and "Next".
 * Put project icon before title in page summary.
+* Updated colors of element dividers.
 
 #### Fixed
 

frontend/src/lib/components/canisters/ConfirmCyclesCanister.svelte

@@ -94,7 +94,7 @@
 
     &:after {
       content: "";
-      border-bottom: 1px solid var(--line);
+      border-bottom: 1px solid var(--elements-divider);
       padding: var(--padding) 0 0;
       width: 100%;
     }

frontend/src/lib/components/neuron-detail/Ballots/Ballots.svelte

@@ -68,7 +68,7 @@
   li {
     padding: var(--padding-2x) 0;
 
-    border-top: 1px solid currentColor;
+    border-top: 1px solid var(--elements-divider);
     &:first-child {
       border-top: none;
     }

frontend/src/lib/components/proposal-detail/ProposalSummary.svelte

@@ -130,7 +130,6 @@
     }
 
     :global(hr) {
-      color: var(--line);
       margin: var(--padding-3x) 0;
     }
   }

frontend/src/lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte

@@ -45,7 +45,7 @@
 
   .container {
     padding-bottom: var(--padding-2x);
-    border-bottom: 1px solid var(--tertiary);
+    border-bottom: 1px solid var(--elements-divider);
 
     &:last-of-type {
       border-bottom: none;

frontend/src/lib/components/transaction/TransactionSummary.svelte

@@ -95,12 +95,12 @@
     }
 
     &:before {
-      border-top: 1px solid var(--line);
+      border-top: 1px solid var(--elements-divider);
       padding: 0 0 var(--padding);
     }
 
     &:after {
-      border-bottom: 1px solid var(--line);
+      border-bottom: 1px solid var(--elements-divider);
       padding: var(--padding) 0 0;
     }
   }

frontend/src/lib/components/ui/Separator.svelte

@@ -11,7 +11,7 @@
 
 <style lang="scss">
   hr {
-    color: var(--line);
+    color: var(--elements-divider);
     margin: var(--padding-4x) 0;
   }
 

frontend/src/lib/components/ui/TagsList.svelte

@@ -20,7 +20,7 @@
     padding: 0 0 calc(2 * var(--padding));
 
     &:not(:last-of-type) {
-      border-bottom: 1px solid var(--line);
+      border-bottom: 1px solid var(--elements-divider);
     }
   }
 </style>