nshades

This vite plugin will generate shades for any given hex color

In your Vite project...

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

/** @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>