Topic: create custom scss for text, border, background color

IT_Santini priority asked 6 months ago


Expected behavior Working fine with class like border, bg-colors, bg-opacity, text-colors, table-stripe, etc

Actual behavior Cannot set class "border", "border-primary", "bg-primary-50"

Resources (screenshots, code snippets etc.) cannot create snippet for this, but here is my scss code: // CORE FUNCTIONS @import './bootstrap-rtl-fix/functions'; @import './free/functions';

// CORE VARIABLES @import './custom/variables'; @import './free/variables'; @import './bootstrap-rtl-fix/variables'; @import './bootstrap-rtl-fix/maps';

// BOOTSTRAP CORE @import './bootstrap-rtl-fix/mixins'; @import './bootstrap-rtl-fix/utilities';

$all-colors: map-merge-multiple($reds, $blues, $light-blues, $greens, $yellows, $oranges, $grays, $blue-grays, $colors, $theme-colors);

$utilities: map-merge( $utilities, ( "color": map-merge( map-get($utilities, "color"), ( values: map-merge( map-get(map-get($utilities, "color"), "values"), ( $all-colors ), ), ), ), "background-color": map-merge( map-get($utilities, "background-color"), ( values: map-merge( map-get(map-get($utilities, "background-color"), "values"), ( $all-colors ), ), ), ), ) );

// Utilities @import './free/utilities'; @import './bootstrap-rtl-fix/utilities/api';

// MDB CORE @import './free/mixins'; @import './free/utilities';


Grzegorz Bujański staff answered 6 months ago


There is no color like primary 50 in full palette.

Colors from the full palette can be found here: https://mdbootstrap.com/docs/standard/content-styles/colors/#section-full-palette

You can use bg-blue-50 or bg-light-blue-50. But we don't have any other predefined primary colors like primary 50.


IT_Santini priority commented 6 months ago

I'm sorry my example above is not really clear, I wan't to achieve is how to generate something like this: .border-red-100 .border-red-200 .border-red-300 etc.. .border-green-100 .border-green-200 .border-green-300 etc... also generate button colors set such as: .btn-red-100 .btn-red-200 .btn-red-300 etc.. .btn-green-100 .btn-green-200 .btn-green-300 etc... and also table colors set such as: .table-red-100 .table-red-200 .table-red-300 etc.. .table-green-100 .table-green-200 .table-green-300 etc...


IT_Santini priority answered 6 months ago


What if I want to generate background theme colors with opacity? for example: - .bg-primary-10 (opacity 10%) - .bg-primary-25 (opacity 25%) - .bg-primary-50 (opacity 50%) - .bg-primary-75 (opacity 75%)


Grzegorz Bujański staff commented 6 months ago

You don't have to. You can use the opacity class. For example bg-primary opacity-10, bg-primary opacity-75 etc.


Grzegorz Bujański staff answered 6 months ago


Try this:

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
    "background-color": map-merge(
        map-get($utilities, "background-color"),
        (
          values: map-merge(
            map-get(map-get($utilities, "background-color"), "values"),
            (
              $all-colors
            ),
          ),
        ),
    ),
    "border-color": map-merge(
        map-get($utilities, "border-color"),
        (
          values: map-merge(
            map-get(map-get($utilities, "border-color"), "values"),
            (
              $all-colors
            ),
          ),
        ),
    ),
  ),
);

@each $color, $value in $all-colors {
    @include table-variant($color, $value);
  }

  @each $color, $value in $all-colors {
  .btn-#{$color} {
      @include button-variant($value, $value);
  }
}

Dylan DeMarco priority commented 3 months ago

Hi @Grzegorz I tried including the code above into my styles.scss but it still doesn't seem to make the end results available with classes such as "bg-red-50". Redefining primary seems to work but misses some cases like buttons in data tables. Should I start a new support thread or would you mind providing a complete example here of how styles.scss should look to make this code work^


Grzegorz Bujański staff commented 3 months ago

You can continue this in this thread as it addresses the same issue as I understand it. What does your code look like now?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.2
  • Device: Laptop
  • Browser: Chrome
  • OS: Win 11
  • Provided sample code: No
  • Provided link: No
Tags