Global link colour overriden when including sass #97
Comments
|
The colour of the links is set by the selected theme. You will need a
This will then set all the CSS custom properties we need for colours: 
Without these classes, I imagine the links will default to black because there is no variable set. |
|
Hi there Andrew, Aha, thanks for this - I've added the tna-template--system-theme class and saw some improvement, and was able to take care of all the outstanding link colour weirdnesses by adding a few The global reset of margin and padding at https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/utilities/_typography.scss#L71-L74 The setting of all images to be display: block; by default in https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/utilities/_reset.scss Would it be impractical to scope all the rules defined by tna-frontend below some "master class" eg ".tna-frontend" that could be applied to any element which uses elements of the design system (or indeed to the html element if being used globally, as with the theme class). It'd make gradual adoption of the design system by existing projects a lot simpler! Thank you! Tim |
|
The resets for images, videos, canvases etc. are only element specificity (0-0-1) which means they can be overwritten with a single class (0-1-0). If we were to scope them inside another class (e.g. The same applies to the The main consumers of TNA Frontend will be creating new services using the library rather than migrating existing ones. Given that there are so many different possible styles and libraries that other services could be using I think we could potentially spend too long trying to make it more seamless for a number of one-time migrations when instead we could be improving and adding to the components we have. We also have to be aware that we are a very small and focused team. I need to have a think about this and what the best way forward is. |
Hi there folks!
I don't fully get what's going on here, but i had a weird issue when including tna-frontend in nationalarchives/ds-caselaw-public-ui in that the tna-frontend css globally overrode our link style with an undefined variable, leading to all links showing as black:
(note that the titles of judgments are black, as are the unselected pagination links, rendering them effectively invisible).
I haven't been able to track down exactly where in tna-frontend that
color: var(--link)directive comes from - bizarrely it also seems to take precedence over other more specific rules in our own codebase - even if i set--linkto our global link colour before including the tna-frontend css, it still seems to take precedence over other more specific selectors in our own css? I've managed to get around this by sprinkling some!importants around our codebase, but would be good to understand a bit better what's actually going on.thank you!
Tim
The text was updated successfully, but these errors were encountered: