---
# System prepended metadata

title: CSS colors PR

---

# CSS colors PR


## :tophat: What? Why?

After we merged #10974 , we found lots of places that weren't using the CSS primary/secondary variables colors, and they were using the foundation ones. This PR fixes them.

It also introduces these rules on the spellchecker so we don't make this same mistake in the future. 

Thet testing for all these issues should be:

1. Change the primary and secondary color
2. Follow the steps for the bug
3. Check also that this change doesn't introduce a bug in the admin panel, as these colors **should not be changed** in the admin panel. I mention this because it's something that I detected on some of these changes and I might have missed a leak somewhere.

## :pushpin: Related Issues
 
- Related to #10974
 
## Solved bugs

### 0. Links 

#### Testing

1. See the links in pretty much all the places of the app

#### :camera: Screenshots

##### Before

![Screenshot of processes list without the secondary color in the links](https://hackmd.io/_uploads/rkLnBlwwn.png)


##### After

![Screenshot of processes list with the secondary color in the links](https://hackmd.io/_uploads/SyVQUlvP2.png)

### 1. Attachments modal progress bar

#### Testing

1. Enable Attachments in a Proposals component
2. Go to create a new Proposal
3. Add an attachment

#### :camera: Screenshots

##### Before 

![Screenshot of upload modal form without the primary color](https://hackmd.io/_uploads/HyplIewvh.png)


##### After


![Screenshot of upload modal form with the primary color](https://hackmd.io/_uploads/H1UIUgwvn.png)

### 2. Autocomplete suggestions

#### Testing

1. Enable the Here.com API or some other autocomplete provider
2. Enable the "Participants can create meetings" in a Meetings component
3. Go to create a new "In person" Meeting
4. Fill the "Address" field

#### :camera: Screenshots

##### Before

![Screenshot of the autocomplete suggestions without the secondary color in the links](https://hackmd.io/_uploads/BJonBxDPh.png)


##### After

![Screenshot of the autocomplete suggestions with the secondary color in the links](https://hackmd.io/_uploads/B1iV8eDv3.png)

### 3. Button shadow

#### Testing

1. Go to a Proposal 
2. See the "Endorse" button

#### :camera: Screenshots

##### Before

![Screenshot of the endorse button without the secondary color in it](https://hackmd.io/_uploads/HJ3-IxwP2.png)

##### After

![Screenshot of the endorse button with the secondary color in it](https://hackmd.io/_uploads/SJUo8evwn.png)


### 4. Assemblies' organization chart

#### Testing

1. Go to /assemblies
2. Scroll to the bottom of the page 

#### :camera: Screenshots

##### Before

![Screenshot of the assemblies' organization chart without the secondary color](https://hackmd.io/_uploads/S1WqE8Dvh.png)


##### After

![Screenshot of the assemblies' organization chart with the secondary color](https://hackmd.io/_uploads/SkVcNIvw3.png)

---

These are just some of the changes introduced by this PR. I actually stopped looking for these places as I've seen things like 

https://github.com/decidim/decidim/blob/9ced3d0f5bc9c90ac85d30c4f184fad20716a562/decidim-core/app/packs/stylesheets/decidim/extras/_impersonation-bar.scss#L6

Ok, a link in the impersonation-bar, lets go see it:

https://github.com/decidim/decidim/blob/develop/decidim-core/app/views/layouts/decidim/_impersonation_warning.html.erb

:face_with_one_eyebrow_raised: 