@ou-imdt/css/docs/utility/imd-palette-accent.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# IMD Accent Palette

A set of consistent colours to be used for general accent usage in interactive widgets.

The utility classes apply minor adjustments to colour based on modifier classes to ensure contrast rules are met.

These are outside of standard branding colours in order to prevent conflicts of brand colours and meanings for accessibility and usability purposes.

__Semantic and accent palettes do not work in tandem__; typically if an item requires a semantic class or could have one, it should not have any other colour applied to it beyond the default to avoid confusion.

__Simple usage example__

<div class="accent1">Using accent 1</div>

<details class="compact">
  <summary>HTML</summary>

```html
<div class="accent1">Using accent 1</div>
```

</details>


### Usage Warnings
Accent colours are intended as 'accents' to emphasis something visually for a __reason__. An example of this would be having a reset button a different colour from every other button to make it clear, without reading, that user should pay attention. Another example would be utilising the accents for grouping or categorization visually. Accents shouldn't be added arbitrarily; having every element, button or control have a different colour is not just visually confusing and in some cases overwhelming, but it stops accent colours from being useful from a user-interface standpoint.

### Classes

By default using any of the semantic classes will set the background colour and text colour for that semantic class.

<div class="grid">
  <div class="accent1 card">accent1</div>
  <div class="accent2 card">accent2</div>
  <div class="accent3 card">accent3</div>
  <div class="accent4 card">accent4</div>
  <div class="accent5 card">accent5</div>
  <div class="accent6 card">accent6</div>
</div>

__The default classes above is the equivelent of applying a colour class and the `.fg` and `.bg` modifier classes.__


### Modifier Classes

If any of the modifier classes are applied `.bg`, `.fg`, `.border`, `.bg-color`, `border-color`, `.stroke`, `.fill, .use-true-color` the default style is removed and only the colour classes are used.

For example, if you only wanted the text to change colour and not the background you would apply 'accent bg'.


<mark>
  <strong>IMPORTANT:</strong> DO NOT use the `.use-true-color` for anything involving text. It removes contrast adjustments for background and foreground colours. Use at your own risk and double check contrast when using this modifier.
</mark>


#### Accent1 
<div class="grid">
  <div class="card accent1">.accent1</div>
  <div class="card accent1 border">.accent1 .border</div>
  <div class="card accent1 border fg">.accent1 .border .fg</div>
  <div class="card accent1 border fg bg">.accent1 .border .fg .bg</div>
  <div class="card accent1 border-color fg bg">.accent1 .border-color .fg .bg</div>
  <div class="card accent1 border-color fg">.accent1 .border-color .fg</div>
  <div class="card accent1 bg-color">.accent1 .bg-color</div>

  <div class="card accent1 bg-color use-true-color">.accent1 .bg-color .use-true-color</div>
  <div class="card accent1 bg use-true-color">.accent1 .bg .use-true-color</div>
  <div class="card accent1 border fg use-true-color">.accent1 .border .use-true-color</div>
  <div class="card accent1 border fg bg use-true-color">.accent1 .border .bg .fg .use-true-color</div>
</div>

#### Accent2 
<div class="grid">
  <div class="card accent2">.accent2</div>
  <div class="card accent2 border">.accent2 .border</div>
  <div class="card accent2 border fg">.accent2 .border .fg</div>
  <div class="card accent2 border fg bg">.accent2 .border .fg .bg</div>
  <div class="card accent2 border-color fg bg">.accent2 .border-color .fg .bg</div>
  <div class="card accent2 border-color fg">.accent2 .border-color .fg</div>
  <div class="card accent2 bg-color">.accent2 .bg-color</div>

  <div class="card accent2 bg-color use-true-color">.accent2 .bg-color .use-true-color</div>
  <div class="card accent2 bg use-true-color">.accent2 .bg .use-true-color</div>
  <div class="card accent2 border fg use-true-color">.accent2 .border .use-true-color</div>
  <div class="card accent2 border fg bg use-true-color">.accent2 .border .bg .fg .use-true-color</div>
</div>

#### Accent3 
<div class="grid">
  <div class="card accent3">.accent3</div>
  <div class="card accent3 border">.accent3 .border</div>
  <div class="card accent3 border fg">.accent3 .border .fg</div>
  <div class="card accent3 border fg bg">.accent3 .border .fg .bg</div>
  <div class="card accent3 border-color fg bg">.accent3 .border-color .fg .bg</div>
  <div class="card accent3 border-color fg">.accent3 .border-color .fg</div>
  <div class="card accent3 bg-color">.accent3 .bg-color</div>

  <div class="card accent3 bg-color use-true-color">.accent3 .bg-color .use-true-color</div>
  <div class="card accent3 bg use-true-color">.accent3 .bg .use-true-color</div>
  <div class="card accent3 border fg use-true-color">.accent3 .border .use-true-color</div>
  <div class="card accent3 border fg bg use-true-color">.accent3 .border .bg .fg .use-true-color</div>
</div>

#### Accent4 
<div class="grid">
  <div class="card accent4">.accent4</div>
  <div class="card accent4 border">.accent4 .border</div>
  <div class="card accent4 border fg">.accent4 .border .fg</div>
  <div class="card accent4 border fg bg">.accent4 .border .fg .bg</div>
  <div class="card accent4 border-color fg bg">.accent4 .border-color .fg .bg</div>
  <div class="card accent4 border-color fg">.accent4 .border-color .fg</div>
  <div class="card accent4 bg-color">.accent4 .bg-color</div>

  <div class="card accent4 bg-color use-true-color">.accent4 .bg-color .use-true-color</div>
  <div class="card accent4 bg use-true-color">.accent4 .bg .use-true-color</div>
  <div class="card accent4 border fg use-true-color">.accent4 .border .use-true-color</div>
  <div class="card accent4 border fg bg use-true-color">.accent4 .border .bg .fg .use-true-color</div>
</div>

#### Accent5 
<div class="grid">
  <div class="card accent5">.accent5</div>
  <div class="card accent5 border">.accent5 .border</div>
  <div class="card accent5 border fg">.accent5 .border .fg</div>
  <div class="card accent5 border fg bg">.accent5 .border .fg .bg</div>
  <div class="card accent5 border-color fg bg">.accent5 .border-color .fg .bg</div>
  <div class="card accent5 border-color fg">.accent5 .border-color .fg</div>
  <div class="card accent5 bg-color">.accent5 .bg-color</div>

  <div class="card accent5 bg-color use-true-color">.accent5 .bg-color .use-true-color</div>
  <div class="card accent5 bg use-true-color">.accent5 .bg .use-true-color</div>
  <div class="card accent5 border fg use-true-color">.accent5 .border .use-true-color</div>
  <div class="card accent5 border fg bg use-true-color">.accent5 .border .bg .fg .use-true-color</div>
</div>

#### Accent6
<div class="grid">
  <div class="card accent6">.accent6</div>
  <div class="card accent6 border">.accent6 .border</div>
  <div class="card accent6 border fg">.accent6 .border .fg</div>
  <div class="card accent6 border fg bg">.accent6 .border .fg .bg</div>
  <div class="card accent6 border-color fg bg">.accent6 .border-color .fg .bg</div>
  <div class="card accent6 border-color fg">.accent6 .border-color .fg</div>
  <div class="card accent6 bg-color">.accent6 .bg-color</div>

  <div class="card accent6 bg-color use-true-color">.accent6 .bg-color .use-true-color</div>
  <div class="card accent6 bg use-true-color">.accent6 .bg .use-true-color</div>
  <div class="card accent6 border fg use-true-color">.accent6 .border .use-true-color</div>
  <div class="card accent6 border fg bg use-true-color">.accent6 .border .bg .fg .use-true-color</div>
</div>

### Using in JS

CSS custom properties can be access in JavaScript. Below is an example of accessing the IMD Palette.

```js
function getImdColors() {
  const R = document.querySelector(':root');
  const style = getComputedStyle(R);
  const accents = [ "--accent1", "--accent2", "--accent3", "--accent4", "--accent5", "--accent6"];
  const semantics = [ "--neutral", "--success", "--information", "--warning", "--danger" ];

  const colours = [...accents, ...semantics].reduce((acc, cur) => {
    const key = cur.replace("--", "");
    acc[key] = style.getPropertyValue(cur);
    return acc;
  }, {});

   return colours;
} 

const palette = getImdColors();
console.log(palette.success)

```

### Using with buttons

Buttons have two styles and meant to be used with either only the accent class 'e.g. accent1' or the accent class and the 'bg-color' modifier class.

Other modifier classes may work, but wont handle the border of the hover state.


<div class="card flex">    
  <button>Standard Button</button>
  <button class="accent1">accent1</button>
  <button class="accent1 bg-color">accent1 bg-color</button>
  <button class="accent2">accent2</button>
  <button class="accent2 bg-color">accent2 bg-color</button>
  <button class="accent3">accent3</button>
  <button class="accent3 bg-color">accent3 bg-color</button>
  <button class="accent4">accent4</button>
  <button class="accent4 bg-color">accent4 bg-color</button>
  <button class="accent5">accent5</button>
  <button class="accent5 bg-color">accent5 bg-color</button>
  <button class="accent6">accent6</button>
  <button class="accent6 bg-color">accent6 bg-color</button>
</div>

### Disabled palette buttons

<div class="card flex">    
  <button>Standard Button</button>
  <button disabled>Standard Button</button>
  <button class="accent1">accent1</button>
  <button class="accent1" disabled>accent1</button>
  <button class="accent1 bg-color">accent1 bg-color</button>
  <button class="accent1 bg-color" disabled>accent1 bg-color</button>
</div>


<details class="compact">
  <summary>HTML</summary>

  ```html
  <button>Standard Button</button>
  <div class="card flex">    
    <button class="accent1">accent1</button>
    <button class="accent1 bg-color">accent1 bg-color</button>
    <button class="accent2">accent2</button>
    <button class="accent2 bg-color">accent2 bg-color</button>
    <button class="accent3">accent3</button>
    <button class="accent3 bg-color">accent3 bg-color</button>
    <button class="accent4">accent4</button>
    <button class="accent4 bg-color">accent4 bg-color</button>
    <button class="accent5">accent5</button>
    <button class="accent5 bg-color">accent5 bg-color</button>
  </div>
  ```
  html```
  <div class="card flex">    
    <button>Standard Button</button>
    <button disabled>Standard Button</button>
    <button class="accent1">accent1</button>
    <button class="accent1" disabled>accent1</button>
    <button class="accent1 bg-color">accent1 bg-color</button>
    <button class="accent1 bg-color" disabled>accent1 bg-color</button>
  </div>
 ```

</details>

### Using with details element

<details>
  <summary>default</summary>
  default
</details>
  
<details class="accent1">
  <summary>accent1</summary>
  accent 1
</details>

<details class="accent1 bg-color">
  <summary>accent1 bg-color</summary>
  accent 1
</details>

<details class="compact">
  <summary>HTML</summary>

  ```html
  <button>Standard Button</button>
  <div class="card flex">    
    <button class="accent1">accent1</button>
    <button class="accent1 bg-color">accent1 bg-color</button>
    <button class="accent2">accent2</button>
    <button class="accent2 bg-color">accent2 bg-color</button>
    <button class="accent3">accent3</button>
    <button class="accent3 bg-color">accent3 bg-color</button>
    <button class="accent4">accent4</button>
    <button class="accent4 bg-color">accent4 bg-color</button>
    <button class="accent5">accent5</button>
    <button class="accent5 bg-color">accent5 bg-color</button>
  </div>
  ```

</details>

### Using for form element accent color

By default

<fieldset>
  <legend>Checkboxes</legend>
  <label for="c0"><input type="checkbox" id="c0" checked /> Standard checkbox</label>
  <label for="c1"><input class="accent1" type="checkbox" id="c1" checked /> Accent1 checkbox</label>
  <label for="c2"><input class="accent2" type="checkbox" id="c2" checked /> Accent2 checkbox</label>
  <label for="c3"><input class="accent3" type="checkbox" id="c3" checked /> Accent3 checkbox</label>
  <label for="c4"><input class="accent4" type="checkbox" id="c4" checked /> Accent4 checkbox</label>
  <label for="c5"><input class="accent5" type="checkbox" id="c5" checked /> Accent5 checkbox</label>
  <label for="c6"><input class="accent6" type="checkbox" id="c6" checked /> Accent6 checkbox</label>
</fieldset>

<details class="compact">
  <summary>HTML</summary>

  ```html
<label for="c0"><input type="checkbox" id="c0" checked /> Standard checkbox</label>
<label for="c1"><input class="accent1" type="checkbox" id="c1" checked /> Accent1 checkbox</label>
<label for="c2"><input class="accent2" type="checkbox" id="c2" checked /> Accent2 checkbox</label>
<label for="c3"><input class="accent3" type="checkbox" id="c3" checked /> Accent3 checkbox</label>
<label for="c4"><input class="accent4" type="checkbox" id="c4" checked /> Accent4 checkbox</label>
<label for="c5"><input class="accent5" type="checkbox" id="c5" checked /> Accent5 checkbox</label>
<label for="c6"><input class="accent6" type="checkbox" id="c6" checked /> Accent6 checkbox</label>
  ```
</details>

***

<fieldset>
  <legend>Radio</legend>
  <label for="r0"><input type="radio" id="r0" name="r0" /> Standard radio</label>
  <label for="r1"><input class="accent1" type="radio" id="r1" name="r0" /> Accent1 radio</label>
  <label for="r2"><input class="accent2" type="radio" id="r2" name="r0" /> Accent2 radio</label>
  <label for="r3"><input class="accent3" type="radio" id="r3" name="r0" /> Accent3 radio</label>
  <label for="r4"><input class="accent4" type="radio" id="r4" name="r0" /> Accent4 radio</label>
  <label for="r5"><input class="accent5" type="radio" id="r5" name="r0" /> Accent5 radio</label>
  <label for="r6"><input class="accent6" type="radio" id="r6" name="r0" /> Accent6 radio</label>
</fieldset>

<details class="compact">
  <summary>HTML</summary>

  ```html
<label for="r0"><input type="radio" id="r0" checked /> Standard radio</label>
<label for="r1"><input class="accent1" type="radio" id="r1" checked /> Accent1 radio</label>
<label for="r2"><input class="accent2" type="radio" id="r2" checked /> Accent2 radio</label>
<label for="r3"><input class="accent3" type="radio" id="r3" checked /> Accent3 radio</label>
<label for="r4"><input class="accent4" type="radio" id="r4" checked /> Accent4 radio</label>
<label for="r5"><input class="accent5" type="radio" id="r5" checked /> Accent5 radio</label>
<label for="r6"><input class="accent6" type="radio" id="r6" checked /> Accent6 radio</label>
  ```
</details>

***

<fieldset>
  <legend>Progress</legend>
  <label for="p0"> Standard progress</label>
  <progress id="p0" value="70" max="100">70 %</progress>
  <label for="p1"> Accent1 progress</label>
  <progress class="accent1" id="p1" value="70" max="100">70 %</progress>
  <label for="p2"> Accent2 progress</label>
  <progress class="accent2" id="p2" value="70" max="100">70 %</progress>
  <label for="p3"> Accent3 progress</label>
  <progress class="accent3" id="p3" value="70" max="100">70 %</progress>
  <label for="p4"> Accent4 progress</label>
  <progress class="accent4" id="p4" value="70" max="100">70 %</progress>
  <label for="p5"> Accent5 progress</label>
  <progress class="accent5" id="p5" value="70" max="100">70 %</progress>
  <label for="p6"> Accent6 progress</label>
  <progress class="accent6" id="p6" value="70" max="100">70 %</progress>
</fieldset>

<details class="compact">
  <summary>HTML</summary>

  ```html
<label for="p0"> Standard progress</label>
<progress id="p0" value="70" max="100">70 %</progress>
<label for="p1"> Accent1 progress</label>
<progress class="accent1" id="p1" value="70" max="100">70 %</progress>
<label for="p2"> Accent2 progress</label>
<progress class="accent2" id="p2" value="70" max="100">70 %</progress>
<label for="p3"> Accent3 progress</label>
<progress class="accent3" id="p3" value="70" max="100">70 %</progress>
<label for="p4"> Accent4 progress</label>
<progress class="accent4" id="p4" value="70" max="100">70 %</progress>
<label for="p5"> Accent5 progress</label>
<progress class="accent5" id="p5" value="70" max="100">70 %</progress>
<label for="p6"> Accent6 progress</label>
<progress class="accent6" id="p6" value="70" max="100">70 %</progress>
  ```
</details>


### Using with icons

Font Awesome icons are always preferred but when edge cases occur where custom, inline icons are needed the palettes can be used with them.


#### Font Awesome Example
<div class="card accent6">
  <i class="fa-solid fa-pen"></i> Font awesome icon (via font)
</div>

<details class="compact">
  <summary>HTML</summary>

```html
<div class="card accent6">
  <i class="fa-solid fa-pen"></i> Font awesome icon (via font)
</div>
```

</details>  

#### Plain Inline SVG
<div class="card">
  <svg style="max-width: 2em"  version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <g id="g4" class="" transform="translate(0)" style="">
  <path class="accent6 fill" id="path2" d="m345.1 41.52-4.3 16.1 88.8 23.78 4.3-16.1-88.8-23.78zm5.1 44.48-42 157c27.3 6.5 44.1 17.1 52.4 29.2l45.8-171.1-20-5.4-31.7 118.4-16.1-4.3 31.7-118.4 15.8 4.2-35.9-9.6zm-162.6 35.5c-6.2 0.2-12.3 1.4-18.5 3.8-34.7 13.6-121.4 91.9-121.4 91.9l-1.1 171.9c49.49-9.8 98.73-11.5 119.5-67.9l38.8-24.2s75.3 40.5 118.6 8.7c23.8-17.3 2.8-39-64-52.7-114.2-23.5-93.3-50.3-93.3-50.3l27.1 8.6-18.6-35 31.6 29.7 7.3-29.7 13.3 17.7 66 24.9 15.2-55.3c-53.7-14.9-87.4-43-120.5-42.1zm214.3 81.6-14.8 55.4c31.5 16.8 71.8-30.1 14.8-55.4zm-17.6 74.8-14.1 57.2c38.3 13.5 82.4-34.3 14.1-57.2zm-39.2 52.2c-15.8 12.3-39 20.6-65.7 20.3l-24.5 91.6c-4.1 15 5.1 31 20.6 35s31.5-5 35.6-20l34-126.9z" fill="#fff"/>
  </g>
  </svg>  
  Inline Svg Icon
</div>

<details class="compact">
  <summary>HTML</summary>

```html
<div class="card accent6 fill">
  <svg style="max-width: 2em"  version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <g id="g4" class="" transform="translate(0)" style="">
  <path id="path2" d="m345.1 41.52-4.3 16.1 88.8 23.78 4.3-16.1-88.8-23.78zm5.1 44.48-42 157c27.3 6.5 44.1 17.1 52.4 29.2l45.8-171.1-20-5.4-31.7 118.4-16.1-4.3 31.7-118.4 15.8 4.2-35.9-9.6zm-162.6 35.5c-6.2 0.2-12.3 1.4-18.5 3.8-34.7 13.6-121.4 91.9-121.4 91.9l-1.1 171.9c49.49-9.8 98.73-11.5 119.5-67.9l38.8-24.2s75.3 40.5 118.6 8.7c23.8-17.3 2.8-39-64-52.7-114.2-23.5-93.3-50.3-93.3-50.3l27.1 8.6-18.6-35 31.6 29.7 7.3-29.7 13.3 17.7 66 24.9 15.2-55.3c-53.7-14.9-87.4-43-120.5-42.1zm214.3 81.6-14.8 55.4c31.5 16.8 71.8-30.1 14.8-55.4zm-17.6 74.8-14.1 57.2c38.3 13.5 82.4-34.3 14.1-57.2zm-39.2 52.2c-15.8 12.3-39 20.6-65.7 20.3l-24.5 91.6c-4.1 15 5.1 31 20.6 35s31.5-5 35.6-20l34-126.9z" fill="#fff"/>
  </g>
  </svg>  
  Inline Svg Icon
</div>
```

</details>


#### Inline SVG with utility '.icon' applied
<div class="card accent5">
  <svg class="icon" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <g id="g4" class="" transform="translate(0)" style="">
  <path id="path2" d="m345.1 41.52-4.3 16.1 88.8 23.78 4.3-16.1-88.8-23.78zm5.1 44.48-42 157c27.3 6.5 44.1 17.1 52.4 29.2l45.8-171.1-20-5.4-31.7 118.4-16.1-4.3 31.7-118.4 15.8 4.2-35.9-9.6zm-162.6 35.5c-6.2 0.2-12.3 1.4-18.5 3.8-34.7 13.6-121.4 91.9-121.4 91.9l-1.1 171.9c49.49-9.8 98.73-11.5 119.5-67.9l38.8-24.2s75.3 40.5 118.6 8.7c23.8-17.3 2.8-39-64-52.7-114.2-23.5-93.3-50.3-93.3-50.3l27.1 8.6-18.6-35 31.6 29.7 7.3-29.7 13.3 17.7 66 24.9 15.2-55.3c-53.7-14.9-87.4-43-120.5-42.1zm214.3 81.6-14.8 55.4c31.5 16.8 71.8-30.1 14.8-55.4zm-17.6 74.8-14.1 57.2c38.3 13.5 82.4-34.3 14.1-57.2zm-39.2 52.2c-15.8 12.3-39 20.6-65.7 20.3l-24.5 91.6c-4.1 15 5.1 31 20.6 35s31.5-5 35.6-20l34-126.9z" fill="#fff"/>
  </g>
  </svg>  
  Using with `.icon` utility class
</div>

<details class="compact">
  <summary>HTML</summary>

```html
<div class="card success">
  <svg class="icon" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <g id="g4" class="" transform="translate(0)" style="">
  <path id="path2" d="m345.1 41.52-4.3 16.1 88.8 23.78 4.3-16.1-88.8-23.78zm5.1 44.48-42 157c27.3 6.5 44.1 17.1 52.4 29.2l45.8-171.1-20-5.4-31.7 118.4-16.1-4.3 31.7-118.4 15.8 4.2-35.9-9.6zm-162.6 35.5c-6.2 0.2-12.3 1.4-18.5 3.8-34.7 13.6-121.4 91.9-121.4 91.9l-1.1 171.9c49.49-9.8 98.73-11.5 119.5-67.9l38.8-24.2s75.3 40.5 118.6 8.7c23.8-17.3 2.8-39-64-52.7-114.2-23.5-93.3-50.3-93.3-50.3l27.1 8.6-18.6-35 31.6 29.7 7.3-29.7 13.3 17.7 66 24.9 15.2-55.3c-53.7-14.9-87.4-43-120.5-42.1zm214.3 81.6-14.8 55.4c31.5 16.8 71.8-30.1 14.8-55.4zm-17.6 74.8-14.1 57.2c38.3 13.5 82.4-34.3 14.1-57.2zm-39.2 52.2c-15.8 12.3-39 20.6-65.7 20.3l-24.5 91.6c-4.1 15 5.1 31 20.6 35s31.5-5 35.6-20l34-126.9z" fill="#fff"/>
  </g>
  </svg>  
  Using with `.icon` utility class
</div>
```

</details>