Components

Utilities

Installation

Install m7base using npm:

npm install @bremmdev/m7base

Then import the CSS file in your code:

import '@bremmdev/m7base.css'

Alternatively, you can download this CSS file and include it in your project.

CSS Variables, dark mode and layers

m7base uses CSS custom properties that you can override to customize the design. All color variables are defined separately for light and dark modes.

Light mode colors

:root {
  --color-foreground: oklch(13% 0.028 261.692);
  --color-foreground-inverted: oklch(1 0 0);
  --color-background: oklch(1 0 0);
  --color-accent: oklch(0.58 0.16 85);
  --color-destructive: oklch(50.5% 0.213 27.518);
  --color-border: oklch(37.2% 0.044 257.287);
  --color-surface: oklch(98.4% 0.003 247.858);
  --color-badge: oklch(92.9% 0.013 255.508);
}

Dark mode colors

:root[data-theme="dark"] {
  --color-foreground: oklch(92.9% 0.013 255.508);
  --color-foreground-inverted: oklch(13% 0.028 261.692);
  --color-background: oklch(13% 0.028 261.692);
  --color-accent: oklch(92.4% 0.12 95.746);
  --color-destructive: oklch(64.5% 0.246 16.439);
  --color-border: oklch(45% 0.044 257.287);
  --color-surface: oklch(20.8% 0.042 265.755);
  --color-badge: oklch(27.8% 0.033 256.848);
}

Customizing theme colors

To customize theme colors, override the CSS variables for both light and dark modes:

:root {
  /* Light mode - custom blue accent */
  --color-accent: oklch(55% 0.2 240);
}

:root[data-theme="dark"] {
  /* Dark mode - brighter for visibility */
  --color-accent: oklch(70% 0.18 240);
}

m7base uses CSS layers to organize styles. Override any styles by placing custom CSS in theoverrides layer:

@layer overrides {
  .btn-primary {
    background-color: blue;
  }
}

Layer order: reset → base → components →utilities → overrides