UNPKG

@ou-imdt/css

Version:

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

bitbucket.org/lts-imd/css

226 lines (167 loc) • 9.99 kB

Markdown

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />  # IMD Semantic Palette A set of consistent colours to be used for semantic meanings 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. __Simple usage example__ <div class="information">I am some information.</div> <details class="compact"> <summary>HTML</summary> ```html <div class="information">I am some information.</div> ``` </details> ## Semantic Names and use cases These colours are intended to be used to visually imply a semantic meaning in a consistent way. - __Neutral__ Used to visually section off content when there is no relevant semantic meaning. - __Information__ Used to signal information that may be useful, e.g. Help. - __Success__ Used to signal when something has succeeded, e.g. Saving data. - __Warning__ Used to signal special attention is needed, e.g. When user input is incorrect. - __Danger__ Used to signal something has gone wrong, e.g. error message These semantic classes should be paired with feedback icons so colour is not the only indicator. | Semantic Name | UTF8 | Font Awesome | | ------------- | --------------- | ------------ | | Neutral | | | | Information | i | <i class="fa-solid fa-circle-info"></i> (fa-circle-info) | | Success | A check or tick | <i class="fa-solid fa-circle-check"></i> (fa-circle-check) | | Warning | Exclamation | <i class="fa-solid fa-circle-exclamation"></i> (fa-circle-exclamation) | | Danger | Exclamation | <i class="fa-solid fa-triangle-exclamation"></i> (fa-triangle-exclamation) | ### 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="neutral card">neutral</div> <div class="information card">information</div> <div class="success card">success</div> <div class="warning card">warning</div> <div class="danger card">danger</div> </div> <details class="compact"> <summary>HTML</summary> ```html <div class="grid"> <div class="neutral card">neutral</div> <div class="information card">information</div> <div class="success card">success</div> <div class="warning card">warning</div> <div class="danger card">danger</div> </div> ``` </details> __The default classes above is the same as adding a colour class and the `.fg` and `.bg` modifier classes.__ ## Semantic palette & semantic icons Below are examples of using the font awesome icons with the semantic palette. <strong><mark>NOTE: After version "2.6.0" the `.sem-icon` class has been removed in order to decouple font awesome from css and reduce interactive bubdle size.</mark></strong> <div class="grid"> <div class="neutral card">neutral (it's not missing, there is no icon for neutral)</div> <div class="information card"><i class="fa fa-circle-info"></i> information</div> <div class="success card sem-icon"><i class="fa fa-circle-check"></i> success</div> <div class="warning card sem-icon"><i class="fa fa-circle-exclamation"></i> warning</div> <div class="danger card sem-icon"><i class="fa fa-triangle-exclamation"></i> danger</div> </div> <details class="compact"> <summary>HTML</summary> ```html <div class="grid"> <div class="neutral card sem-icon">neutral (it's not missing, there is no icon for neutral)</div> <div class="information card sem-icon">information</div> <div class="success card sem-icon">success</div> <div class="warning card sem-icon">warning</div> <div class="danger card sem-icon">danger</div> </div> ``` </details> ### 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 'success 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> #### Neutral <div class="grid"> <div class="card neutral">.neutral</div> <div class="card neutral border">.neutral .border</div> <div class="card neutral border fg">.neutral .border .fg</div> <div class="card neutral border fg bg">.neutral .border .fg .bg</div> <div class="card neutral border-color fg bg">.neutral .border-color .fg .bg</div> <div class="card neutral border-color fg">.neutral .border-color .fg</div> <div class="card neutral bg-color">.neutral .bg-color</div> <div class="card neutral bg-color use-true-color">.neutral .bg-color .use-true-color</div> <div class="card neutral bg use-true-color">.neutral .bg .use-true-color</div> <div class="card neutral border fg use-true-color">.neutral .border .use-true-color</div> <div class="card neutral border fg bg use-true-color">.neutral .border .bg .fg .use-true-color</div> </div> #### Infromation <div class="grid"> <div class="card information">.information</div> <div class="card information border">.information .border</div> <div class="card information border fg">.information .border .fg</div> <div class="card information border fg bg">.information .border .fg .bg</div> <div class="card information border-color fg bg">.information .border-color .fg .bg</div> <div class="card information border-color fg">.information .border-color .fg</div> <div class="card information bg-color">.information .bg-color</div> <div class="card information bg-color use-true-color">.information .bg-color .use-true-color</div> <div class="card information bg use-true-color">.information .bg .use-true-color</div> <div class="card information border fg use-true-color">.information .border .use-true-color</div> <div class="card information border fg bg use-true-color">.information .border .bg .fg .use-true-color</div> </div> #### Success <div class="grid"> <div class="card success">.success</div> <div class="card success border">.success .border</div> <div class="card success border fg">.success .border .fg</div> <div class="card success border fg bg">.success .border .fg .bg</div> <div class="card success border-color fg bg">.success .border-color .fg .bg</div> <div class="card success border-color fg">.success .border-color .fg</div> <div class="card success bg-color">.success .bg-color</div> <div class="card success bg-color use-true-color">.success .bg-color .use-true-color</div> <div class="card success bg use-true-color">.success .bg .use-true-color</div> <div class="card success border fg use-true-color">.success .border .use-true-color</div> <div class="card success border fg bg use-true-color">.success .border .bg .fg .use-true-color</div> </div> #### Warning <div class="grid"> <div class="card warning">.warning</div> <div class="card warning border">.warning .border</div> <div class="card warning border fg">.warning .border .fg</div> <div class="card warning border fg bg">.warning .border .fg .bg</div> <div class="card warning border-color fg bg">.warning .border-color .fg .bg</div> <div class="card warning border-color fg">.warning .border-color .fg</div> <div class="card warning bg-color">.warning .bg-color</div> <div class="card warning bg-color use-true-color">.warning .bg-color .use-true-color</div> <div class="card warning bg use-true-color">.warning .bg .use-true-color</div> <div class="card warning border fg use-true-color">.warning .border .use-true-color</div> <div class="card warning border fg bg use-true-color">.warning .border .bg .fg .use-true-color</div> </div> #### Danger <div class="grid"> <div class="card danger">.danger</div> <div class="card danger border">.danger .border</div> <div class="card danger border fg">.danger .border .fg</div> <div class="card danger border fg bg">.danger .border .fg .bg</div> <div class="card danger border-color fg bg">.danger .border-color .fg .bg</div> <div class="card danger border-color fg">.danger .border-color .fg</div> <div class="card danger bg-color">.danger .bg-color</div> <div class="card danger bg-color use-true-color">.danger .bg-color .use-true-color</div> <div class="card danger bg use-true-color">.danger .bg .use-true-color</div> <div class="card danger border fg use-true-color">.danger .border .use-true-color</div> <div class="card danger border fg bg use-true-color">.danger .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) ```