Extending (adding or overriding) colours isn't working

[rickysullivan]

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

[rickysullivan]

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

extended: (

@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
              ),
          ),
        ),
      ),
    )
  );

[Spiderpig86]

Hey @rickysullivan! Thanks for reporting this. I have updated the documentation with the correct config.

[rickysullivan]

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

[rickysullivan]

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;
}

[rickysullivan]

@Spiderpig86 Any thoughts to using semantic.link for site-wide link colours?

[Spiderpig86]

I think that makes sense. I can add this change for the next version.

[rickysullivan]

@Spiderpig86 Any clue as to when the next version is going to be released?