btn-primary background color does not change after primary extended

[roonie007]

Describe the bug After setting up a custom primary color:

@use "cirrus-ui/src/cirrus-ext" as * with (
  $config: (
    extend: (
      colors: (
        semantic: (
          "primary": #1e272e,
        ),
      ),
    ),
  )
);

bg-primary is working as expected but when using btn-primary on button, the background color does not change to the extended color.

[Spiderpig86]

For customizing control themes, there is an entry within the configuration called control-themes which is where you can specify which colors are used to generate themed variants for form controls such as check boxes, toggles, etc.

Defaults are set here: https://github.com/Spiderpig86/Cirrus/blob/master/src/internal/_config.scss#L206

Currently it does not support buttons, but I'll add that for 0.7.1.

[roonie007]

@Spiderpig86 perfect, I am currently using a custom made workaround so I will wait for the 0.7.1 :)

[Ponkhy]

@Spiderpig86 perfect, I am currently using a custom made workaround so I will wait for the 0.7.1 :)

Hey! May i ask how your workaround looks like? Cause i'm facing the same issue right now.

[roonie007]

@Spiderpig86 perfect, I am currently using a custom made workaround so I will wait for the 0.7.1 :)

Hey! May i ask how your workaround looks like? Cause i'm facing the same issue right now.

@Ponkhy, here is it

// I created a Map that contains my brand colors
$u-colors: (
  plain: rgba(var(--btn-fg), var(--color-opacity)),
  'white': white,
  'black': black,
  primary: #1e272e,
  success: #27ae60,
  danger: #e74c3c,
);

// and then I did extend cirrus colors
@use 'cirrus-ui/src/cirrus-ext' as * with (
  $config: (
    extend: (
      colors: (
        semantic: (
          'primary': map.get($u-colors, primary),
          'success': map.get($u-colors, success),
          'danger': map.get($u-colors, danger),
        ),
      ),
    ),
  )
);

// and finally generate the needed classes
@each $name, $color in $u-colors {
  .animated.loading.loading-#{$name}::after {
    border-left-color: $color;
    border-bottom-color: $color;
  }

  .btn-#{$name}:not(.outline) {
    background-color: $color !important;
  }

  .btn-#{$name}.outline:hover {
    background-color: $color !important;
  }

  .btn-#{$name}.outline {
    border-color: $color !important;
  }
}

and here is the result :D in different buttons styles

[Ponkhy]

Perfect! Thank you very much!