@vp-autox/material3

Material3

A library developed in Sass based on Google's Material Design 3

Install

npm install @vp-autox/material3

yarn add @vp-autox/material3

pnpm add @vp-autox/material3

bun add @vp-autox/material3

How to use?

@use '@vp-autox/material3' as vp-autox;

$theme: (
  primary: '#0f62fe',
);

@include vp-autox.themes($theme);

@use '@vp-autox/material3' as vp-autox;

$theme: (
  primary: '#0F62FE',
  secondary: '#00344B',
  // optional
  tertiary: '#0ADAFE',
  // optional
  neutral: '#939094',
  // optional
  error: '#B3261E',
  // optional
  customColors:
    (
      // optional
      (
          name: 'info',
          value: '#4F616E',
          blend: true,
        ),
    ),
);

@include vp-autox.themes($theme);

Colors

All variables are in the target 'body' by default

$options: (
  target: '.my-theme',
  isDark: true,
);

@include vp-autox.themes($theme, $options);

body {
  backgroud-color: var(--surface);
  color: var(--on-surface);
}