JSPM – nshades@1.0.0

Package Exports

nshades
nshades/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nshades) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This vite plugin will generate shades for any given hex color

In your Vite project...

import { sveltekit } from "@sveltejs/kit/vite";
import { shades } from "shades";

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [
        sveltekit(),
        shades({
            primary: "#f0f2ee", // The first key is the default color
            _dark: "#f0f2ee", // "_" inverse the shades value (50 is darker than 950) 
            danger: "#ff0000"
        })
    ]
};

export default config;

And now in your css...

<!-- This button will use the default palette which is the "primary" palette in this case -->
<button>My Button</button>

<!-- This class will override the "--color-xxx" css variables -->
<button class="danger">
    <i class="fa fa-xmark"></i>
    Dangerous Action
</button>

<style>
    button {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: max-content;
        padding: 0.5rem 1rem;
        border-radius: 1.5rem;

        background-color: var(--color-100);
        color: var(--on-color-100);

        border: none;
        transition-property: scale, opacity;
    }

    button:active {
        opacity: 0.9;
        scale: 0.99;
    }

    button:disabled {
        pointer-events: none;
        opacity: 0.5;
    }
</style>