Color Contrasts for APEX Template Component Plugins

Color Contrasts for APEX Template Component Plugins

Matt Mulvaney's photo
Matt Mulvaney
·

4 min read

This is a write-up of a lesson I learned the hard way.

Backstory

I created a plugin called Cards List UI and released it as version 23.1.1.

There's no universal versioning system for Plugins. However, I like the first two numbers to represent the version of APEX its currently supported at e.g 23.1. Then use the third number, e.g. 1, to represent the version of the plugin for this version of APEX

Here's what it looks like:

Doesn't like so bad? However for some reason, I'd chosen black for the Primary Button and I wanted a more Theme consistent color. It also narked me that the cards didn't ping off the page.

Also I later noticed that when I changed the style to Vita - Dark, all hell broke loose.

You can see that the color contrast for the text against the background is all wrong

Problem

The problem was in the CSS. I had effectively hard-coded the colors into the Plugin and they had keeled over when different theme styles were used.

Not only that, but the box shadow was hard-coded too. This is another issue as the center card on the first picture has some shading around the bottom, but not noticeable in the second picture.

.rw-Button-primary {
  background-color: #141a31;
  color: #fff;
}

.rw-Button-primary:hover {
  background-color: var(--ut-palette-primary);
}

.btn-secondary {
  background-color: #ffffff;
  color: #141a31;
}

.btn-secondary:hover {
  color: #fff;
}

.luf-allCardsContainer {
  background-color: #fff;
  border-color: #f1f1f1;
}

.luf-eachCard {
  background-color: #fff;
  border-color: #f1f1f1;
}

.luf-eachCard:hover {
  box-shadow: 0 4px 10px #00000030;
}

.luf-cardSubTitle {
  color: #151926;
}

.luf-userActions {
  background-color: #f1f1f1;
  border-radius: 0 0 5px 5px;
}

The Solution

The solution was right in front of me the whole time. If you open the Universal Theme Application and click Reference > CSS Variables > Sample Component Preview. It actually tells you which CSS Variables to use for Borders, Box Shadow, Foreground / Background Colors, Titles, Subtitles and much more.

Here is a little preview of what it shows:

I'm a little bit surprised no-one has taken this code and built their own Template-Component Plugin with it 🕵️‍♂️

The Fix

The fix was to introduce these CSS Variables in to the Plugin's CSS file. Here is a shortened version of the full file.

:root {
  --luf-btn-color: var(--ut-palette-primary-contrast);
  --luf-btn-background-color: var(--ut-palette-primary);
  --luf-btn-normal-color: var(--a-button-state-text-color, var(--a-button-type-text-color, var(--a-button-text-color, inherit)));
  --luf-btn-normal-background-color: var(--a-button-state-background-color,var(--a-button-type-background-color,var(--a-button-background-color,transparent)));
  --luf-btn-text-color: var(--a-button-state-text-color,var(--a-button-type-text-color,var(--a-button-text-color,inherit)));
  --luf-btn-border-color: var(--a-button-state-border-color,var(--a-button-type-border-color,var(--a-button-border-color)));
  --luf-btn-box-shadow: var(--a-button-state-shadow,var(--a-button-type-shadow,var(--a-button-shadow,none)));
  --luf-card-background-color: var(--ut-component-background-color);
  --luf-card-border-color: var(--ut-component-border-color);
  --luf-card-box-shadow:    var(--ut-shadow-md);
  --luf-card-title-color: var(--ut-component-text-title-color);
  --luf-user-actions-background-color: var(--ut-component-highlight-background-color);
}

.rw-Button-primary {
  background: var(--luf-btn-normal-background-color);
  color: var(--luf-btn-normal-color);
  border-color: var(--luf-btn-border-color);
}

.rw-Button-primary:hover {
  background: var(--a-button-hover-background-color);
}

.luf-btn-is-hot {
  color: var(--luf-btn-color);
  background: var(--luf-btn-background-color);
}

.luf-eachCard {
  background: var(--luf-card-background-color);
  border-color: var(--luf-card-border-color);
}

.luf-eachCard:hover {
   box-shadow: var(--luf-card-box-shadow);
}

.luf-cardTitle {
  color: var(--luf-card-title-color);
}

.luf-cardSubTitle {
  color: var(--luf-card-title-color);
}

.luf-userActions {
  background: var(--luf-user-actions-background-color);
}

As you can see I coded it slightly different to the example in the Universal Theme Application. The differences are:

  • All Universal Theme CSS Variables were given a new variable name & added to a :root section at the top of the file

  • All Class attributes uses my unique luf variables from the root section.

  • I took some button variables from when I examined APEX pages.

I think its a pretty decent approach with having the variables at the top of the file - it just made it so much easier making tweaks to the colors from one place only.

Results

Here is Vita

Changes:

  • The border color made the card stand out.

  • Button is now Hot

  • The hover-over button (normal & hot) is now consistent with APEX buttons. i.e the background color is ever so slightly lighter. You can check this in your own apps, just hover the mouse over any button to see the background color lighter.

  • Box shadow is now consistent with APEX UT

Now let's check Vita - Dark

Observations:

  • Border Color still good

  • Box Shadow is noticeable

  • Card Text is now readable

Let's try Redwood Light

Observations:

  • Border Color on the cards is well defined

  • Box Shadow is very noticeable now

  • Border color on buttons are very noticeable now

ENJOY!

Whats the picture? a cloud-free day on The Stray. Visit Yorkshire!

orclapexcolor