Custom CSS?

I have definitely considered parameterizing the theme in its entirety -- but before I open that can of worms -- would you be willing to share the CSS you would like to inject? I may just adopt it into the repo as another base theme.

There is currently a way for themes or modules to override colors and border widths, by setting a global editoria11yOptionsOverride variable with an override for the default theme parameters. Editoria11y-drupal.js checks for this global before drawing the elements.

Would look something like this:

var editoria11yOptionsOverride = true;
var editoria11yOptions = function (parameterBag) {
  let options = parameterBag;
  options['sleekTheme'] = {
        bg: '#fffffe',
        bgHighlight: '#7b1919',
        text: '#20160c',
        primary: '#276499',
        primaryText: '#fffdf7',
        secondary: '#20160c',
        button: 'transparent', // deprecate?
        panelBar: '#fffffe',
        panelBarText: '#20160c',
        panelBarShadow: 'inset 0 -1px #0002, -1px 0 #0002',
        panelBorder: 0,
        activeTab: '#276499',
        activeTabText: '#fffffe',
        outlineWidth: 0,
        borderRadius: 1,
        ok: '#1f5381',
        warning: '#fad859',
        alert: '#b80519',
        focusRing: '#007aff',
      };
  return options;
}

I...should document that, but let's finish this conversation first, since we might think of a better way to handle this.

i'll look into it, and see get back to you.

I work with @mweiler so I'll jump in here.

The biggest thing is size of the floating icon in the bottom. We'd like it significantly bigger, something like:

.shut #toggle {
    min-width: 72px;
    height: 72px;
}

.pass.shut #toggle {
    font-size: 64px;
}

Then increase the text of the tip wrapper to match the font size of everything else on our site, instead of set at 14px, and its colour to match our main font colour (in our case defined as a variable for our exact black).

.wrapper {
  font-size: 1rem;
  color: var(--black);
}

I might also look at changing the colours to match our brand colours - and from your previous comment maybe I can already do that - but that's not a high priority.

Great; thank you. I'll take a look next time I'm in the code. I may just pull the whole theme out into a separate object.

OK this is going to work. I want to test the new branch more before tagging a release, but it will add params that let you pick a base font size and family, as well as add custom CSS to any of the Web components.

I'm hoping to push this by the end of the week.

Alright -- tagged a release with hopefully all you need. I added instructions for inserting custom parameters to the module description, and added the list of params to a new theming section in the main library's configuration notes.

Automatically closed - issue fixed for 2 weeks with no activity.

Hi folks -- just wanted to revisit this, because the parameters have changed. Please check the 2.1.11 release notes → for details.