Fix some color mix-ups

Author: shgysk8zer0

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.2.7] - 2025-04-21
+
+### Fixed
+- Fix some color mix-ups
+
 ## [v0.2.6] - 2024-11-26
 
 ### Changed

button.js

@@ -358,7 +358,7 @@ export const btnOutlineWarning = css`.btn.btn-outline-warning {
 	border-color: currentColor;
 }
 
-.btn.btn-outline-warning:not(${DISABLED}), .btn.btn-outline-warning:focus-visible {
+.btn.btn-outline-warning:hover:not(${DISABLED}), .btn.btn-outline-warning:focus-visible {
 	background-color: var(--aegis-btn-warning-hover, ${btnWarningHover});
 	border-color: ${yellow[7]};
 	color: var(--aegis-color-light, ${colorLight});

package-lock.json

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

package.json

@@ -9,6 +9,10 @@ export const properties = css`${Object.entries(customProperties).map(
 	}`
 ).join('\n\n')}`;
 
+// Only needed when using a bundled component - Prefer using global `@property` or `:root`
+export const propertiesComponent = css`:host {
+	${Object.entries(customProperties).map(([name, { initialValue }]) => `--aegis-${name}: ${initialValue};\n`).join('\n')}
+}`;
 
 export const propertiesLegacy = css`:root {
 	${Object.entries(customProperties).map(([name, { initialValue }]) => `--aegis-${name}: ${initialValue};\n`).join('\n')}

properties.js

@@ -35,8 +35,8 @@ export const lightTheme = lightCSS`:root:not([data-theme="dark"]) {
 
 export const componentBase = css`:host {
 	color-scheme: light dark;
-	color: var(--aegis-color-light, ${dark});
-	background-color: var(--aegis-bg-light, ${light});
+	color: var(--aegis-color-light, ${light});
+	background-color: var(--aegis-bg-light, ${dark});
 	font-family: system-ui;
 }
 
@@ -105,6 +105,6 @@ export const componentDarkTheme = darkCSS`:host(:not([theme="light"])) {
 
 export const componentLightTheme = lightCSS`:host(:not([theme="dark"])) {
 	color-scheme: light;
-	color: var(--aegis-color-light, ${light});
-	background-color: var(--aegis-bg-light, ${dark});
+	color: var(--aegis-color-light, ${dark});
+	background-color: var(--aegis-bg-light, ${light});
 }`;