Add color palette with various shades of colors via @property

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v3.3.4] - 2026-05-28
+
+### Added
+- Add color palette with various shades of colors via `@property`
+
 ## [v0.3.3] - 2026-04-27
 
 ### Added

createSheets.js

@@ -5,7 +5,7 @@ globalThis.reportError ??= console.error;
 const scripts = [
 	'./animations.js', './button.js', './forms.js', './misc.js', './properties.js', './reset.js',
 	'./scrollbar.js', './styles.js', './theme.js', './properties-legacy.js', './presentation.js',
-	'./layers.js', './custom-button.js',
+	'./layers.js', './custom-button.js', './palette.js',
 ];
 
 class CSSStyleSheet {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/styles",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Pre-made and reusable styles for `@aegisjsproject/core`",
   "keywords": [
     "aegis",

palette.js

@@ -0,0 +1,16 @@
+import { red, blue, indigo, purple, pink, orange, yellow, teal, green, cyan, gray } from './palette/bootstrap.js';
+
+const palette = new CSSStyleSheet();
+const palettes = Object.entries({ red, blue, indigo, purple, pink, orange, yellow, teal, green, cyan, gray });
+
+palette.replace(
+	palettes.map(
+		([label, colors]) => colors.map((shade, weight) => `@property --${label}-${(weight + 1) * 100} {
+			syntax: "<color>";
+			inherits: true;
+			initial-value: ${shade};
+		}`).join('\n')
+	).join('\n')
+);
+
+export { palette };

test/index.js

@@ -2,6 +2,7 @@ import { css } from '@aegisjsproject/parsers/css.js';
 import { componentBase, componentBorder } from '../theme.js';
 import { presentation } from '../presentation.js';
 import props from '../css/properties.css' with { type: 'css' };
+import palette from '../css/palette.css' with { type: 'css' };
 import theme from '../css/theme.css' with { type: 'css' };
 import btn from '../css/button.css' with { type: 'css' };
 import layers from '../css/layers.css' with { type: 'css' };
@@ -12,31 +13,39 @@ const { reset } = await import('@aegisjsproject/styles');
 
 // document.head.append(await sheetToLink(propertiesLegacy));
 
-document.adoptedStyleSheets = [layers, btn, reset, props, theme, presentation, animations];
+document.adoptedStyleSheets = [layers, palette, props, btn, reset, theme, presentation, animations];
 
 document.getElementById('toggle').addEventListener('click', async () => {
 	switch(document.documentElement.dataset.theme) {
 		case 'light':
-			document.documentElement.dataset.theme = 'dark';
+			await cookieStore.set({
+				name: 'theme',
+				value: 'dark',
+				path: '/test/',
+				sameSite: 'strict',
+				secure: true,
+			});
 			break;
 
 		case 'dark':
-			document.documentElement.dataset.theme = 'auto';
+			await cookieStore.set({
+				name: 'theme',
+				value: 'auto',
+				path: '/test/',
+				sameSite: 'strict',
+				secure: true,
+			});
 			break;
 
 		default:
-			document.documentElement.dataset.theme = 'light';
+			await cookieStore.set({
+				name: 'theme',
+				value: 'light',
+				path: '/test/',
+				sameSite: 'strict',
+				secure: true,
+			});
 	}
-
-	document.getElementById('cur').textContent = document.documentElement.dataset.theme;
-
-	await cookieStore.set({
-		name: 'theme',
-		value: document.documentElement.dataset.theme,
-		path: '/test/',
-		sameSite: 'strict',
-		secure: true,
-	});
 });
 
 cookieStore.get('theme').then(cookie => {
@@ -46,6 +55,20 @@ cookieStore.get('theme').then(cookie => {
 	}
 });
 
+cookieStore.addEventListener('change', ({ changed, deleted }) => {
+	if (deleted.some(cookie => cookie.name === 'theme')) {
+		delete document.documentElement.dataset.theme;
+		document.getElementById('cur').textContent = 'auto';
+	} else {
+		const { value } = changed.find( cookie => cookie.name === 'theme') ?? {};
+
+		if (typeof value === 'string') {
+			document.documentElement.dataset.theme = value;
+			document.getElementById('cur').textContent = value;
+		}
+	}
+});
+
 customElements.define('test-el', class TestElement extends HTMLElement {
 	#shadow;