design-system-components icon indicating copy to clipboard operation
design-system-components copied to clipboard

Implement a mixin system for easy overrides

Open HurricaneInteractive opened this issue 5 years ago • 0 comments

Feature Request

  • [x] I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
  • [x] I’ve read and agree to the Code of Conduct.
  • [x] I’ve searched for any related issues and avoided creating a duplicate issue.
  • [x] I've searched the community forums to check for related issues or feature requests

Other request?

This feature is currently in uikit. It provides scss mixins for component classes which makes overriding the defaults a lot easier and speeds up development of websites quite a bit (I've found it faster personally). This would require a bit of refactoring and discussion around the mixin naming convention but I think it will provide a lot of benefits. Taking a button for example;

.au-btn {
  /* current button styling */
  @if mixin-exists(AU-btn) {
    @include AU-btn();
  }
}

/* custom scss */
@mixin AU-btn() {
  font-size: 21px;
  /* other override styling */
}

Additional context

This comes after I raised a discussion on the community forum about how overriding the design system styling was a little frustrating, the discussion can be found here

HurricaneInteractive avatar Apr 15 '19 00:04 HurricaneInteractive