Skip to content

Commit

Permalink
Update Readne documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
joshdales committed Oct 6, 2024
1 parent df6b1b9 commit 2fdab08
Showing 1 changed file with 5 additions and 4 deletions.
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,14 @@ Each has numbered `accent` properties and sets the `accent-color` property as we
--accent-6: var(--colour-6);
--accent-7: var(--colour-7);
--accent-8: var(--colour-8);
--accent-9: var(--colour-9);
}
```
The accent variables are often used in the following way on interactive elements:
1. `accent-3` The standard accent colour.
2. `accent-2` The accent used when elements are being viewed (either by focus or hover).
3. `accent-4` The element is being activated or interactive with.
4. `accent-8` Contrast colour with the main accent.
1. `accent-5` The standard accent colour for the element.
2. `accent-4` The accent used when elements are being viewed (either by focus or hover).
3. `accent-3` The element is being activated or interactive with.
4. `accent-8` Contrast colour with the main accent, usually text or background.

If you have a button or input and there is no accent class currently set on the element or a common ancestor then they will fallback to using the neutral colours as their accent.

Expand Down

0 comments on commit 2fdab08

Please sign in to comment.