@ou-imdt/css NPM

IMDT CSS

The IMDT CSS library styles native elements with light, extendable CSS.

For more extensive notes and to demo styles please pull and run this repository locally via a webserver with 'dist' as the root.

Setup

npm i @ou-imdt/css -S

Once installed you can import via CSS OR JavaScript (assuming that a build system such as Vite, Webpack is used).

// importing in JS 
import "@ou-imdt/css";

//importing themes via js (optional addition)
import "@ou-imdt/css/dist/themes/brand.css";

// importing datavis palette vis js (optional addition)
import "@ou-imdt/css/dist/datavis-palette.css";

/* importing in  CSS (Recommended) */
@import url('@ou-imdt/css');

/* importing themes via js (optional addition) */
@import url('@ou-imdt/css/dist/themes/brand.css');

/* importing datavis palette vis js (optional addition) */
@import url('@ou-imdt/css/dist/datavis-palette.css');

If using plain HTML without NPM or a build system, you can copy 'dist' from the repository. This is not recomended usage.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <link rel="stylesheet" href="./dist/index.css">
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

Usage

The intention is after setup users will either override css via classes or custom properties on a case by case basis as needed.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <link rel="stylesheet" href="./index.css">
  <style>
    h1 {
      --h1-color: orange;
    }

    .custom-h1 {
      font-style: italic;
    }
  </style>
</head>
<body>
    <h1 class="custom-h1">Hello world</h1>
</body>
</html>

Themeing

The default style is based on an OSEP (VLE) design supplied by Andrew Hall, a UX designer, it should be noted that some 'brand' styles have been explicityly removed from the VLE so are not implemented by default in our style. They are availaible in an optional theme called 'brand.css'

Additional themes (or custom themes) can be created with the following syntax:

[data-theme="brand"] {
    --base-theme: dark;
    --accent: #d8e7f6;
    --accent-fg: #002158;
    --btn-focus-bg-color: var(#d8e7f6);
    --btn-focus-fg-color: var(#002158);
    --bg1: #333333;
    --fg1: #ffffff;
    --outline: 2px solid #ffc23d;
}

This is applied by linking the theme file in the html head and adding a 'data-theme="{themename}" to the _body element.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./dist/index.css">
  <link rel="stylesheet" href="./dist/themes/brand.css">
  <title>Title</title>
</head>
<body data-theme="brand">
    <h1>Hello world</h1>
</body>
</html>

Utility Classes

.unstyled list class

Lists can be unstyled without bullets, padding, margin or numbering with the '.unstyled' class

<ol class="unstyled">
  <li>Apple</li>
  <li>Oranges</li>
  <li>Pears</li>
  <li>Banana</li>
</ol>

.custom list

This class allows the use of the '--icon' custom property to apply custom bullets.

<ul class="custom">
  <li>first item</li>
  <li style="--icon: '🗸 '; --icon-color: var(--success)">second item with custom marker</li>
  <li style="--icon: '☕'">emoji marker</li>
  <li>
    third item
    <ul>
      <li>I am nested</li>
      <li style="--icon: '\f058'; --icon-font: 'Font Awesome 6 Free'; --icon-color: var(--success)">
        font awesome unicode (use inspector on font awesome site to get code)
      </li>
    </ul>
  </li>
</ul>

.striped class

The striped class can be applied to a parent element ti display alternatively striped children. This is most useful in tables or lists.

<!-- List Example -->
<ul class="unstyled striped">
  <li>Apple</li>
  <li>Oranges</li>
  <li>Pears</li>
  <li>Banana</li>
</ul>


<!-- Table Example -->
<table class="striped" style="--table-tr-hover-bg: coral;--table-tr-hover-fg: black; ">
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

Table .static-headings

Tabled with a fixed height can have their headings set to static so they will scroll with the content, by applying the .static-headings class.

.range class for range inputs

This class applied a concistent style to basic range sliders cross-browser but does not support ticks.

<label for="ranger">Class 'range' applied: </label>
<input type="range" name="ranger" id="ranger" class="range">

.details.icon-end style

Allows for the positioning of the details icon.

<details class="icon-end">
  <summary style="--summary-icon-closed: '\f078'; --summary-icon-open: '\f077';
  --icon-font: 'Font Awesome 6 Free'">
    <strong>Font Awesome Icon at End</strong>
  </summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
    cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
    voluptas beatae a? Nisi, iure nostrum.</p>
</details>

.compact details element

For when a more compact details element is needed.

<details class="compact icon-end">
  <summary>
    <strong>Compact end icon</strong>
  </summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
    cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
    voluptas beatae a? Nisi, iure nostrum.</p>
</details>

.grid & .flex for basic layout

<div class="grid">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
</div>

<div class="flex">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
</div>

.sidebar-left and .sidebar-right when using .grid

  <div class="grid sidebar-left">
      <div class="card">
          <h3>Sidebar</h3>
          <nav>
              <ul class="unstyled">
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
              </ul>
          </nav>
      </div>
      <div class="card">
          <h3>Content</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quas sed praesentium fugiat
              facilis soluta quam qui ad perspiciatis doloremque illo non repellendus, placeat, culpa
              ullam quidem dolorum provident molestias.</p>
      </div>
  </div>
  
  <p><strong>Sidebar on the right.</strong></p>
  
  <div class="grid sidebar-right">
      <div class="card">
          <h3>Sidebar</h3>
          <nav>
              <ul class="unstyled">
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
              </ul>
          </nav>
      </div>
      <div class="card">
          <h3>Content</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quas sed praesentium fugiat
              facilis soluta quam qui ad perspiciatis doloremque illo non repellendus, placeat, culpa
              ullam quidem dolorum provident molestias.</p>
      </div>
  </div>

inline text classes

<span class="bold italic strike underline">I am some happy text 😊</span>

Data Visualisation Palette

There are 20 colours in each palette; the Dark palette is full of dark colours and contrasts with white, the light palette is full of light colours and contrasts with black.

You can use them by apply the classes .palette and either .light or .dark on the parent element.

You can then either apply the colours to children using .bg{1-20} or apply the additional class to the parent palette-auto which will dynamically apply colours to the parent;y immediate children.

There is also .palette.bordered helper class that applied a border to the palette and it's immediate children.

It is recomended, that the palette colours have a seperator of their contrasting colour (dark = white, light = black), this ensures wcag rules for adjacent elements is always met against neighboring visual items (e.g. other segments, page background or border), if this is not possible please consider using patterns or being able to configure it.

<ul class="palette dark bordered">
  <li class="bg1">.bg1</li>
  <li>No class applied</li>
  <li class="bg20">.bg20</li>
</ul>

<ul class="palette palette-auto dark bordered">
  <li>👍</li>
  <li>👍</li>
  <li>👍</li>
</ul>

Patterns can be abblied using pattern.pat{1-20} to palette children or dynamically by applying .pattern-auto to the element with the .palette class

Patterns can be used on both palettes

When applying patterns the helper class .pallete-txt can be used on child elements.

<ul class="palette palette-auto light bordered">
  <li class="pattern pat1">
    <span class="pattern-txt">
      .pattern.pat1
    </span>
  </li>
  <li>No pattern classes</li>
</ul>

<ul class="palette palette-auto pattern-auto dark">
  <li><span class="pattern-txt">👍</span></li>
  <li><span class="pattern-txt">👍</span></li>
  <li><span class="pattern-txt">👍</span></li>
  <li><span class="pattern-txt">👍</span></li>
  <li><span class="pattern-txt">👍</span></li>
</ul>

Custom Properties

All custom properties for native elements are defined in 'src/root.css' file in the repository, but also shown below for convenience. All these variables can be optionally used in themes, but will fallback to defaults.

:root,
:host {

    /* Must be set to ensure chromium calendar icons in inputs display as expected*/
    --base-theme: light;

    /* fg-bg pairs -> ensure contrast for each pair */
    --fg1: var(--core1, #000000);
    --bg1: #ffffff;

    /* accent or brand color */
    --accent: var(--core2);
    /* --accent-fg: var(--bg1);  */
    --border: 2px solid var(--accent);
    --radius: 5px;
    --spacing: 0.5rem;
    --transition: all 0.25s;
    --interactive-cursor: pointer;
    --outline: 1px solid var(--accent);
    --disabled-bg: var(--mono6, #cccccc);

    /* TODO general disabled bg and fg */

    /* Typography */
    --font: Arial, sans-serif;
    --font-alt: courier, monospace;
    --line-height: 1.5;
    /* will adjust line-height dynamically*/
    --letter-spacing: initial;
    --font-size: 1rem;
    /*  H1 to H4  */
    --h-margin: 0.5rem 0;
    --h-weight: bold;
    /* Make sure h colors contrast correctly with bg1 */
    --h-color: var(--core1);
    --h1-color: var(--h-color);
    --h2-color: var(--h-color);
    --h3-color: var(--h-color);
    --h4-color: var(--h-color);
    --h5-color: var(--h-color);
    --h6-color: var(--h-color);

    --h-size: var(--font-size);
    --h1-size: 1.8rem;
    --h2-size: 1.6rem;
    --h3-size: 1.4rem;
    --h4-size: 1.2rem;
    --h5-size: 1.1rem;
    --h6-size: 1rem;

    --h-link-decoration: none;
    --h-link-color: var(--h-color);
    --h-link-hover-color: var(--primary1);
    --h-link-active-color: var(--core1);

    /* Paragraph */
    --p-margin: 0.5rem 0 0.5rem 0;
    --p-padding: 0;
    --p-indent: 0;
    --p-weight: normal;
    --p-align: left;

    /* Inputs */
    --input-weight: normal;
    --input-max-width: 100%;
    --input-display: inline-block;
    --input-padding: 0.1rem 0.3rem;
    --input-border: 2px solid var(--primary2-tint5);
    --input-required-icon: "*";
    --input-disabled-opacity: 1;
    --input-disabled-bg: var(--mono11);
    --input-disabled-fg: var(--mono8);
    --input-disabled-border: 2px solid var(--mono8);
    --input-radius: 3px;
    --input-outline: 2px;

    --input-focus-shadow: none;
    --input-focus-border: 2px solid var(--accent);

    --input-focus-visible-shadow: none;
    --input-focus-visible-border: 2px solid var(--mono1);

    /* small tag */
    --small-font-size: 0.85rem;


    /* Input:Checkbox && Input:Radio (ternary refers to both) */
    --ternary-accent: var(--accent);
    --ternary-width: 1em;
    --ternary-aspect: 1/1;
    --ternary-vertical-align: middle;
    --ternary-outline: none;
    --ternary-focus-shadow: 0 0 0 1px var(--core1);
    --ternary-focus-visible-shadow: 0 0 0 1px var(--core1);
    --ternary-outline: 0;
    --checkbox-radius: 2px;

    /* Textarea */
    --textarea-border: var(--input-border);
    --textarea-padding: var(--input-padding);
    --textarea-width: 100%;

    /* Select */
    --select-padding: 0.3rem 0.2rem;

    /* Links */
    --a-bg: transparent;
    --a-color: var(--secondary1);
    --a-decoration: underline;
    --a-cursor: pointer;

    --a-visited-color: var(--core1);
    --a-visited-decoration: underline;

    --a-focus-color: var(--core1);
    --a-focus-decoration: underline;
    --a-focus-outline: var();

    --a-hover-color: var(--core1);
    --a-hover-decoration: underline;

    --a-active-color: var(--primary3);
    --a-active-decoration: underline;

    --a-focus-visible-color: var(--core1);
    --a-focus-visible-decoration: underline;
    --a-focus-visible-outline: 2px solid var(--core1);
    --a-focus-visible-shadow: 0 0 0 2px var(--mono1);
    --a-focus-visible-bg: var(--secondary6);


    /* Buttons (inc. Input:Button & Input:Submit) */
    --btn-weight: bold;
    --btn-transition: background 0.25s, color 0.25s;
    --btn-spacing: 0.2em;
    --btn-inline-padding: 0.3em;
    --btn-padding: var(--input-padding);
    --btn-bg: var(--mono2, #ffffff);
    --btn-fg: var(--core1, var(--accent));
    --btn-decoration: none;
    --btn-radius: 3px;
    --btn-border: 2px solid var(--core2, var(--accent));
    --btn-outline: 2px var(--secondary1, var(--accent)) solid;
    --btn-outline-offset: 1px;

    --btn-hover-bg: var(--core1);
    --btn-hover-fg: var(--mono2);
    --btn-hover-decoration: underline;
    --btn-hover-decoration-thickness: 1px;
    --btn-hover-underline-offset: 2px;

    --btn-focus-bg: var(--core1);
    --btn-focus-fg: var(--mono2);
    --btn-focus-decoration: underline;
    --btn-focus-decoration-thickness: 1px;
    --btn-focus-underline-offset: 2px;
    --btn-focus-border: 2px solid var(--core2, var(--accent));

    --btn-focus-visible-bg: var(--mono2);
    --btn-focus-visible-fg: var(--core1);
    --btn-focus-visible-decoration: underline;
    --btn-focus-visible-decoration-thickness: 1px;
    --btn-focus-visible-underline-offset: 2px;
    --btn-focus-visible-border: 2px solid var(--mono1, var(--accent));

    --btn-active-fg: var(--accent);
    --btn-active-bg: var(--primary2-tint10);
    --btn-active-decoration: underline;
    --btn-active-decoration-thickness: 1px;
    --btn-active-underline-offset: 2px;
    --btn-active-boxshadow: inset 0 3px 5px -1px var(--mono8);

    --btn-disabled-border: 1px solid #d4d2d2;
    --btn-disabled-bg: var(--mono9);
    --btn-disabled-fg: var(--mono2, #ffffff);
    --btn-disabled-filter: var(--input-disabled-filter);
    --btn-disabled-opacity: var(--input-disabled-opacity);

    /* Label */
    --label-weight: bold;
    --label-fieldset-weight: normal;
    --label-margin: 0.5rem 0 0.5rem 0;
    --label-max-width: 100%;

    /* labels inside a fieldset  */
    --label-display: block;
    --label-implicit-display: inline-flex;

    --fieldset-padding: 0.5rem 0 1rem;
    --fieldset-border: 0;
    --fieldset-legend-weight: bold;

    /* Lists */
    --list-margin: 1rem;
    --list-padding: 0;
    --list-padding-sub: 0 0 0 2rem;
    --list-li-odd-bg: var();
    --list-li-odd-fg: var();
    --list-li-even-bg: var();
    --list-li-even-fg: var();
    --ul-li-list-style: initial;
    --ol-li-list-style: initial;
    --dl-after: ": ";
    --dl-margin: 0.5rem 0;
    --dt-weight: bold;
    --dd-padding: 0 1rem;

    --list-custom-icon: var();
    --list-custom-icon-color: var(--secondary4);
    --list-custom-icon-weight: bold;

    /* Mark */
    --mark-start: attr(data-start);
    --mark-end: attr(data-end);
    --mark-bg: #ffff00;
    --mark-fg: var(--fg1);

    /* S */
    --s-start: attr(data-start);
    --s-end: attr(data-end);

    /* i */
    --i-start: attr(data-start);
    --i-end: attr(data-end);

    /* Pre */
    --pre-font: var(--font-alt);
    --pre-whitespace: pre;
    --pre-border: 1px solid lightgray;
    --pre-width: 100%;
    --pre-margin: 0;
    --pre-fg: var();
    --pre-bg: var();

    /* Code */
    --code-font: var(--font-alt);
    --code-bg: var(--fg1);
    --code-fg: var(--bg1);
    --code-radius: var(--radius);
    --code-font: courier, monospace;
    --code-padding: 0 .3em;

    /* Abbr */
    --abbr-border: none;
    --abbr-border-bottom: 1px dotted;
    --abbr-decoration: none;
    --abbr-transform: uppercase;

    /* U */
    --u-color: var(--fg1);
    --u-style: underline;
    --u-core-style: wavy underline;

    /* figcaption */
    --figcaption-fg: var();
    --figcaption-bg: var();
    /* TODO adjust padding to match img */
    --figcaption-padding: var();
    --figcaption-margin: 0.5rem 0;

    /* caption */
    --caption-side: top;
    --caption-margin: 0.5rem 0;


    /* Table  */
    --table-width: 100%;
    --table-border: none;
    --table-radius: none;
    --table-border-bottom: 2px solid var(--mono4);
    --table-cell-padding: 0.2rem 0.7rem;
    /* --table-display: block; */
    --table-transition: background 0.25s ease, color 0.25s ease;
    --table-margin: 0 0 1rem 0;
    --table-white-space: normal;
    --table-thead-bg: var(--mono4);
    --table-thead-text-align: left;
    --table-thead-fg: white;
    --table-thead-radius: var();
    --table-th-last-radius: var();
    --table-thead-weight: bold;
    --table-thead-border-top: initial;
    --table-thead-border-bottom: var(--table-border);
    --table-thead-position: sticky;
    --table-tfoot-bg: none;
    --table-tfoot-fg: inherit;
    --table-tfoot-weight: inherit;
    --table-tfoot-border-bottom: initial;
    --table-tfoot-border-top: initial;
    --table-tfoot-position: initial;
    --table-tr-bg: inherit;
    --table-tr-fg: inherit;
    --table-tr-odd-bg: inherit;
    --table-tr-odd-fg: inherit;
    --table-tr-even-bg: inherit;
    --table-tr-even-fg: inherit;
    --table-tr-hover-bg: inherit;
    --table-tr-hover-fg: inherit;

    /* Dialog */
    --dialog-padding: var(--spacing);
    --dialog-radius: var(--radius);
    --dialog-bg: var(--bg1);
    --dialog-fg: var(--fg1);
    --dialog-border: var(--border);
    --dialog-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* See 'dialog backdrop workaround' below :root for ::backdrop bg color */

    /* Detail & Summary */
    --details-padding: var(--spacing);
    --details-radius: none;
    --details-border: 2px solid var(--primary2-tint10);
    --details-margin: 0.5rem 0;
    --details-border-radius: 0;
    --summary-bg: var(--primary2-tint10);
    --summary-fg: var(--core1);
    --summary-padding: var(--spacing);
    --summary-margin: calc(var(--spacing) * -1);
    --summary-open-margin-bottom: calc(var(--spacing) * 2);
    --summary-icon-closed: "▼";
    --summary-icon-open: "▲";
    --summary-font-weight: bold;
    --summary-hover-decoration: underline;
    --summary-open-bg: var(--primary2-tint8);
    --summary-open-fg: var(--primary2);
    --summary-hover-bg: var(--primary2-tint8);
    --summary-hover-fg: var(--primary2);
    --summary-focus-bg: var(--secondary6);
    --summary-focus-fg: var(--core1);
    --summary-focus-visible-bg: var(--secondary6);
    --summary-focus-visible-fg: var(--core1);
    --summary-active-boxshadow: var(--btn-active-boxshadow);

    /* Compact variant class */
    --details-compact-border: 0;
    --details-compact-padding: 0 0.2rem;
    --details-compact-margin: 1px 0 0.5rem 0;
    --details-compact-bg: transparent;
    --details-compact-fg: var(--core1);


    /* hr */
    --hr-color: #8FC5DD;
    --hr-border: 1px solid;
    --hr-margin: 1rem 0;

    /* kbd */
    --kbd-bg: ;
    --kbd-fg: ;
    --kbd-radius: var(--radius);
    --kbd-border: 1px solid var(--kbd-fg, --fg1);
    --kbd-font-size: 0.75em;
    --kbd-padding: 0 0.1em;
    --kbd-display: inline-block;
    --kbd-valign: text-top;

    /* time */
    --time-weight: bold;
    --time-font-style: normal;

    /* var */
    --var-weight: normal;
    --var-font-style: italic;

    /* meter & progress */
    --meter-height: 1.8rem;
    --meter-valign: middle;
    --progress-height: 1.8rem;
    --progress-valign: middle;
}

brand-colors.css

A subset of branding colours used in index.css

:root,
:host {
  --core1: #24285C;
  /* Core brand blue */
  --core2: #3A3381;
  /* Core brand blue alternative */

  --mono1: #000000;
  --mono2: #ffffff;
  --mono3: #1A1A1A;
  --mono4: #333333;
  --mono5: #4D4D4D;
  --mono6: #666666;
  --mono7: #808080;
  --mono8: #999999;
  --mono9: #B3B3B3;
  --mono10: #CCCCCC;
  --mono11: #E6E6E6;

  --success: #138575;
  --error: #A31E21;
  /* --warning: #FF9A3C; */

  --primary1: #191C40;
  --primary1-tint1: #1D204A;
  --primary1-tint2: #202453;
  --primary1-tint3: #3A3E6C;
  --primary1-tint4: #50537D;
  --primary1-tint5: #66698D;
  --primary1-tint6: #7C7E9D;
  --primary1-tint7: #9294AE;
  --primary1-tint8: #A7A9BE;
  --primary1-tint9: #BDBFCE;
  --primary1-tint10: #D3D4DE;
  --primary1-tint11: #E9EAEF;
  --primary2: #29245A;
  --primary2-tint1: #2E2967;
  --primary2-tint2: #342E74;
  --primary2-tint3: #4E478E;
  --primary2-tint4: #615C9A;
  --primary2-tint5: #7570A7;
  --primary2-tint6: #8985B3;
  --primary2-tint7: #9D99C0;
  --primary2-tint8: #B0ADCD;
  --primary2-tint9: #C4C2D9;
  --primary2-tint10: #D8D6E6;
  --primary2-tint11: #EBEBF2;
  --primary3: #163B73;
  --primary3-tint1: #194484;
  --primary3-tint2: #1C4D95;
  --primary3-tint3: #3566AE;
  --primary3-tint4: #4C77B7;
  --primary3-tint5: #6288C0;
  --primary3-tint6: #7999C9;
  --primary3-tint7: #8FAAD2;
  --primary3-tint8: #A5BBDB;
  --primary3-tint9: #BFCCE2;
  --primary3-tint10: #D2DDED;
  --primary3-tint11: #E9EEF6;
  --primary4: #0086A3;
  --primary4-tint1: #009ABA;
  --primary4-tint2: #00ADD2;
  --primary4-tint3: #1AC6EB;
  --primary4-tint4: #33CDED;
  --primary4-tint5: #4DD3F0;
  --primary4-tint6: #66D9F2;
  --primary4-tint7: #80E0F4;
  --primary4-tint8: #99E6F6;
  --primary4-tint9: #B3ECF8;
  --primary4-tint10: #CCF2FB;
  --primary4-tint11: #E6F9FD;

  --secondary1: #1F55A5;
  --secondary2: #00C0E9;
  --secondary3: #5AC2B3;
  --secondary4: #F4846A;
  --secondary5: #E5B7D5;
  --secondary6: #FDF289;
}

@infinitebrahmanuniverse/nolb-_ou @everything-registry/sub-chunk-697 @zalastax/nolb-_ou

12 days ago

19 days ago

27 days ago

1 month ago

1 month ago