Mauve Zone Theme

A dreamy take on the Nord theme with purple and mauve.

Installation

Install the CSS package via npm:

npm install @kung-fu/mauvedream

Usage

The Mauve Dream theme consists of three CSS files that work together:

• mauvedream.css - Color palette variables
• dark/mauvedream.css - Dark theme styles using the color palette
• mauvedream-ui.css - Optional minimalist UI framework

Basic Usage

Include all three CSS files in your HTML:

<link rel="stylesheet" href="node_modules/@kung-fu/mauvedream/dist/mauvedream.css">

The distributed CSS file includes all three components combined and minified.

Individual Files

If you prefer to use individual files:

<link rel="stylesheet" href="path/to/mauvedream.css">
<link rel="stylesheet" href="path/to/mauvedream-ui.css">
<link rel="stylesheet" href="path/to/dark/mauvedream.css">

Components

The Mauve Dream theme includes styling for various UI components:

Typography

Basic HTML elements are styled automatically:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph text with <a href="#">links</a> and <code>inline code</code></p>
<blockquote>
  <p>Blockquote with left border styling</p>
</blockquote>

Buttons

<button>Standard Button</button>
<button class="primary">Primary Button</button>
<button disabled>Disabled Button</button>
<a href="#" class="button">Link Button</a>

Form Elements

<fieldset>
  <legend>Form Section</legend>
  <div class="form-row">
    <label for="text-input">Text Input:</label>
    <input type="text" id="text-input" placeholder="Enter text">
  </div>
  <div class="form-row">
    <label for="select">Select:</label>
    <select id="select">
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</fieldset>

Badges

<span class="badge">Default</span>
<span class="badge success">Success</span>
<span class="badge info">Info</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Callouts

<div class="callout">
  <h4>Default Callout</h4>
  <p>General information or context</p>
</div>

<div class="callout info">
  <h4>Information</h4>
  <p>Helpful tips or guidance</p>
</div>

<div class="callout success">
  <h4>Success</h4>
  <p>Successful action confirmation</p>
</div>

<div class="callout warning">
  <h4>Warning</h4>
  <p>Potential issues or consequences</p>
</div>

<div class="callout danger">
  <h4>Danger</h4>
  <p>Critical issues requiring attention</p>
</div>

Alerts

<div class="alert">
  <h4>Default Alert</h4>
  <p>Standard alert content</p>
</div>

<div class="alert info">
  <h4>Information Alert</h4>
  <p>Additional information or tips</p>
</div>

<div class="alert success">
  <h4>Success Alert</h4>
  <p>Successful operations</p>
</div>

<div class="alert warning">
  <h4>Warning Alert</h4>
  <p>Important warnings</p>
</div>

<div class="alert danger">
  <h4>Danger Alert</h4>
  <p>Critical issues or errors</p>
</div>

Cards & Panels

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
  <button>Card Action</button>
</div>

<div class="panel">
  <h3>Panel Title</h3>
  <p>Panel content goes here</p>
</div>

Status Indicators

<h4 class="error">Error Message</h4>
<h4 class="warning">Warning Message</h4>
<h4 class="success">Success Message</h4>
<h4 class="info">Information Message</h4>
<h4 class="modified">Modified Status</h4>

Tables

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Description</td>
      <td class="success">Active</td>
    </tr>
  </tbody>
</table>

Layout Components

<!-- Sidebar layout -->
<aside class="sidebar">
  <div class="sidebar-content">
    <h3>Navigation</h3>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
    </ul>
  </div>
</aside>

<div class="container with-sidebar">
  <section class="section">
    <h2>Main Content</h2>
    <p>Content goes here</p>
  </section>
</div>