Customizing Doxa

Mapping Colors and Color helpers

Doxa comes with several base color role variables out of the box that are available for use in your css. Under the hood, these variables are stored in a sass map and iterated over to create color helper classes.

Using Sass's @use with statement , you can either customize the Doxa variables yourself, or create your own roles and map them to Doxa.

Override Doxa Helper Roles

In your variables sass file:

$my-cool-color: #FF0000;
@use "@atria-digital-marketing/doxa/scss" with (
  $primary: $my-cool-color,
);

And now the Doxa variable $primary will be mapped to the color #FF000;. In addition, all color helpers that use the primary role, like has-text-primary will be #FF000.

Creating Custom Helper Roles

You can also create custom helpers:

$my-cool-color-helpers: (
    "cool-helper": #D62246,
    "another-cool-helper":#4B1D3F
); 

@use "@atria-digital-marketing/doxa/scss" with (
  $custom-color-helpers: $my-cool-color-helpers,
);

Now both "cool-helper" and "another-cool-helper" will be mapped onto all of bulma's color helper classes. For example: button button--is-cool-helper and has-background-another-cool-helper will be available.

Mapping doxa base elements

Doxa currently has experimental support for mapping and customizing some elements base classes. Current base classes that can be overidden at the configuration level:

• button
• copy
• eyebrow
• link
• arrow

So if you want to override parts of Doxa's base button styling, you can do the following, using Doxa's $custom-base-styles variable:

@use "@atria-digital-marketing/doxa/scss" with (
  $custom-base-styles: (
        "button": (
            border:1px solid red,
            text-transform: capitalize,
        ),
    )
  )
);

This will overwrite the base doxa buttons to use capitalized case and have a 1px red border.

Note: this will not overwrite ALL styling for the base button class, just the properties you define in $custom-base-styles.