css does not respect Apigee Kickstart color scheming

[m-khan23]

Try it now functionality comes with its own scheme of colors (pink - #f44336) going against the Drupal theme colors. There is no option to adjust this either. It should be 'color: var(--ak-accent-color)' or some variation of this

[arunz6161]

@m-khan23 - Are you using kickstart ? If yes, we will move this over to kickstart queue and work it there.

[cnovak]

@m-khan23 can you explain what Drupal theme colors you are comparing the "try it now" colors? The reason is that SmartDocs OpenAPI spec renderer is created in Angular, which we are embedding into Drupal. I believe you are saying that the color scheme should match the default of the Kickstart theme and also be easily adjustable. Is that correct?

[m-khan23]

Yes that is correct. In other words, out of the box, I would expect the theme to respect var(--ak-accent-color) and var(--ak-accent-color-light) - makes for a good experience.

I made the following overrides (a bit wonky) but they get the job done:

/* 12/18/19 --> Start of addition (Mohammad) */

.mat-toolbar.mat-primary {
background: #eaeaea !important;
color: white !important;
}

.mat-fab, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {
background-color: var(--ak-accent-color) !important;
color: white !important;
}

.mat-primary:disabled {
background: rgba(0,0,0,.38) !important;
color: gray !important;
}

/* 12/18/19 --> End of Addition */

[m-khan23]

Sorry, I just realized I wrote 'Drupal' instead of 'Apigee Kickstart'.

[cnovak]

Moving to Kickstart project so that we can create a CSS file with good comments in the Kickstart theme that takes care of this and can be a source of self documentation for users to know how to make other color changes to the SmartDocs embedded app.