# 📦 @breadstone/mosaik-themes

| Package Status | Source |
|----------------|--------|
| [![npm](https://img.shields.io/npm/v/@breadstone/mosaik-themes?label=npm)](https://www.npmjs.com/package/@breadstone/mosaik-themes) | [libs/mosaik-themes](../../libs/mosaik-themes) |

> Theme tokens and style definitions for the Mosaik design system.
> Provides SCSS, CSS, and design tokens for all supported themes.

---

## 📁 Project Structure

Part of the monorepo [`mosaik`](https://github.com/RueDeRennes/mosaik)  
Package path: `libs/mosaik-themes`  
Version: see [npm](https://www.npmjs.com/package/@breadstone/mosaik-themes)  
License: MIT

---

## 📦 Installation

```bash
yarn add @breadstone/mosaik-themes
# or
npm install @breadstone/mosaik-themes
```

---

## 🔧 Usage

```typescript
import * as Themes from '@breadstone/mosaik-themes';
```

Or import SCSS bundles:

```scss
@use '@breadstone/mosaik-themes/scss' as themes;
```

---

## 🎨 Theme Catalog

Each theme ships with a full set of typography, color, elevation, and component tokens. Use the descriptions below to choose the look and feel that best matches your product identity.

### Memphis
- **Visual identity:** Vibrant synthwave palette with bold gradients, neon accents, and confident typography that nods to 1980s Memphis design.
- **Best for:** Creative dashboards, entertainment products, or brand experiences that benefit from playful energy and high contrast visuals.
- **Highlights:** Distinct geometric shapes, animated accent hues, and expressive shadows that make interactive elements pop.

### Joy
- **Visual identity:** Soft, friendly surfaces built around rounded corners, warm pastels, and elevated whites reminiscent of playful consumer apps.
- **Best for:** Customer-facing portals, lifestyle services, and experiences where approachability and warmth are key.
- **Highlights:** Accessible color contrast, generous spacing, and micro-interactions that emphasize delight without overwhelming content.

### Material
- **Visual identity:** Clean, structured presentation inspired by Google Material Design with layered surfaces, subtle shadows, and clear hierarchy.
- **Best for:** Productivity tools, administrative consoles, and enterprise apps that require clarity and consistency at scale.
- **Highlights:** Adaptive typography scale, responsive spacing grid, and surfaces that communicate elevation with restrained depth cues.

### Bootstrap
- **Visual identity:** Familiar, business-friendly styling derived from Bootstrap with balanced contrast, neutral palettes, and minimal embellishment.
- **Best for:** Data-heavy applications, internal tooling, and projects that value recognisable defaults and rapid adoption.
- **Highlights:** Systematic spacing tokens, pragmatic button treatments, and typography tuned for dense layouts.

### Fluent
- **Visual identity:** Microsoft Fluent-inspired language that favors soft corners, translucent layers, and accent colors grounded in modern productivity suites.
- **Best for:** Collaboration suites, communication products, and cross-platform scenarios where Fluent is already part of the design ecosystem.
- **Highlights:** Emphasis on motion-friendly states, calm neutrals paired with vibrant primary accents, and adaptive focus indicators for accessibility.

### Cosmopolitan
- **Visual identity:** Sophisticated, editorial feel with high-contrast typography, elegant serifs, and luxurious accents suitable for premium brands.
- **Best for:** Marketing sites, premium content experiences, and consumer applications that aim for a refined, magazine-like presentation.
- **Highlights:** Tall typographic rhythm, monochrome foundations enriched with metallic accents, and generous whitespace for storytelling.

---

## 🛠 Recommendations

- Combine the theme tokens with any Mosaik component library to guarantee consistent visuals.
- Import SCSS or CSS bundles once at the root of your application and switch themes by toggling the exported CSS custom properties.
- Use the generated design tokens in Figma or other tooling to align designers and engineers.

---

## 📦 Publishing

```bash
yarn nx run mosaik-themes:publish
```

---

## 📄 License

MIT © Breadstone

---