@webtui/theme-nord

A port of the Nord color palette to WebTUI

Provides additional variants for the listed components in the base WebTUI library

Installation

Install the theme with your preferred package manager

bun i @webtui/theme-nord
npm i @webtui/theme-nord
yarn add @webtui/theme-nord
pnpm i @webtui/theme-nord

Ensure you import the theme after all the other stylesheets from @webtui/css

@layer base, utils, components;

@import '@webtui/css/base.css';
@import '@webtui/css/components/typography.css';
/* ... */

@import '@webtui/theme-nord';

Components

• Typography
• Badge
• Button

Typography

• Colors headings from h1 to h6
• inline <a> tags are underlined and colored to be var(--nord7)
• inline <code> tags are colored to be var(--nord12)

<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>

<p><a href="https://example.com">Link</a> <code>Inline Code</code></p>

Badge

Adds additional variants to badges matching all custom accent colors

<span is-="badge" variant-="nord0">nord0</span>
<span is-="badge" variant-="nord1">nord1</span>
<!-- ... -->
<span is-="badge" variant-="nord14">nord14</span>
<span is-="badge" variant-="nord15">nord15</span>

Button

Adds additional variants to buttons matching all custom accent colors

<button variant-="nord0">nord0</button>
<button variant-="nord1">nord1</button>
<!-- ... -->
<button variant-="nord14">nord14</button>
<button variant-="nord15">nord15</button>

CSS Variables

Adds the following CSS variables to the base layer

:root {
    /* Polar Night */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;

    /* Snow Storm */
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;

    /* Frost */
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;

    /* Aurora */
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;
}

The base background/foreground colors use the following CSS variables from the Nord palette

:root {
    --background0: var(--nord0);
    --background1: var(--nord1);
    --background2: var(--nord2);
    --background3: var(--nord3);

    --foreground0: var(--nord6);
    --foreground1: var(--nord5);
    --foreground2: var(--nord4);
}