📦 @breadstone/mosaik-themes

| Package Status | Source | |----------------|--------| | | 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
Package path: libs/mosaik-themes
Version: see npm
License: MIT

📦 Installation

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

🔧 Usage

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

Or import SCSS bundles:

@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

yarn nx run mosaik-themes:publish

📄 License

MIT © Breadstone