Extending (adding or overriding) colours isn't working
rickysullivan opened this issue · 7 comments
I stumbled across Cirrus UI framework in my search for a scss based utility framework that I could use in Astro projects.
I wasn't able to add a new colour as described in the docs: https://www.cirrus-ui.com/fundamentals/colors#extending-colors
Here is my config:
@use 'cirrus-ui/src/cirrus-ext' as * with
(
$config: (
extend: (
colors: (
// Will not override
'blue': ('500': #ff6600),
// Will not extend
'magenta':
(
'100': #fef7f4,
'200': #fbe0dd,
'300': #f2afb3,
'400': #ec798b,
'500': #dc5472,
'600': #bc3263,
'700': #98184d,
'800': #73123f,
'900': #560e39
),
),
),
)
);
And a reproducible demo: https://stackblitz.com/edit/github-clzbm4
Oh, I found the bug.
The docs aren't correct.
They're missing the extended key.
Cirrus/src/internal/_config.scss
Line 88 in b3e1dc8
@use 'cirrus-ui/src/cirrus-ext' as * with
(
$config: (
extend: (
colors: (
extended: (
'blue': ('500': #ff6600),
'magenta':
(
'100': #fef7f4,
'200': #fbe0dd,
'300': #f2afb3,
'400': #ec798b,
'500': #dc5472,
'600': #bc3263,
'700': #98184d,
'800': #73123f,
'900': #560e39
),
),
),
),
)
);
Hey @rickysullivan! Thanks for reporting this. I have updated the documentation with the correct config.
Was having an issue with setting the primary colour too. Going to get back to investigating that tonight.
Solved it.
https://stackblitz.com/edit/github-clzbm4-scxbta?file=src%2Fstyles%2Fmain.scss
One more quick question @Spiderpig86.
If you set:
...
semantic: (
'primary': #336200,
'link': #336200,
)
...
Shouldn't that change all links by default?
a {
color: #5e5cc7;
font-weight: 600;
padding: 2px;
text-decoration: none;
transition: all 0.3s;
}
@Spiderpig86 Any thoughts to using semantic.link
for site-wide link colours?
I think that makes sense. I can add this change for the next version.
@Spiderpig86 Any clue as to when the next version is going to be released?