@3mo/theme - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/Accent.d.ts

@@ -13,3 +13,4 @@ import { LocalStorage } from '@a11d/local-storage';
     injectCss(): void;
+    private get onAccentColorBase();
 }
 //# sourceMappingURL=Accent.d.ts.map

dist/Accent.js

@@ -53,5 +53,14 @@ import { css, unsafeCSS } from '@a11d/lit';
 					--mo-color-accent-gradient-3: ${unsafeCSS(thirdColor === null || thirdColor === void 0 ? void 0 : thirdColor.rgb)};
+					--mo-color-on-accent-base: ${unsafeCSS(this.onAccentColorBase)};
 				}
 			`, this.styleElement);
     }
+    get onAccentColorBase() {
+        if (!this.medianColor) {
+            return '0 0 0';
+        }
+        const { r, g, b } = this.medianColor;
+        const sum = Math.round((r * 299 + g * 587 + b * 114) / 1000);
+        return sum > 128 ? '0 0 0' : '255 255 255';
+    }
 }

dist/Background.js

@@ -7,3 +7,3 @@ import { LocalStorage } from '@a11d/local-storage';
     Background["Dark"] = "dark";
-})(Background = Background || (Background = {}));
+})(Background || (Background = {}));
 export class BackgroundStorage extends LocalStorage {
@@ -10,0 +10,0 @@ constructor() {

dist/styles.css.js

@@ -51,5 +51,5 @@ import { css } from '@a11d/lit';
 		/* TODO: Replace with @color-contrast when available: https://caniuse.com/mdn-css_types_color_color-contrast */
-		/* More info: https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ */
-		--mo-color-on-accent-base-value: calc(((((var(--mo-color-accent-base-r) * 299) + (var(--mo-color-accent-base-g) * 587) + (var(--mo-color-accent-base-b) * 114)) / 1000) - 128) * -1000);
-		--mo-color-on-accent-base: var(--mo-color-on-accent-base-value), var(--mo-color-on-accent-base-value), var(--mo-color-on-accent-base-value);
+		/* The solution presented in https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ doesn't work in Chrome as of late-2023 */
+		/* --mo-color-on-accent-base-value: calc(((((var(--mo-color-accent-base-r) * 299) + (var(--mo-color-accent-base-g) * 587) + (var(--mo-color-accent-base-b) * 114)) / 1000) - 128) * -1000); */
+		/* --mo-color-on-accent-base: var(--mo-color-on-accent-base-value), var(--mo-color-on-accent-base-value), var(--mo-color-on-accent-base-value); */
 		--mo-color-on-accent: rgb(var(--mo-color-on-accent-base));
@@ -56,0 +56,0 @@ --mo-color-accent-base: var(--mo-color-accent-base-r), var(--mo-color-accent-base-g), var(--mo-color-accent-base-b);

dist/Theme.js

 import { BackgroundStorage } from './Background.js';
 import { AccentStorage } from './Accent.js';
-class Theme {
+export class Theme {
 }
 Theme.background = new BackgroundStorage;
 Theme.accent = new AccentStorage;
-export { Theme };

package.json

 {
 	"name": "@3mo/theme",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"description": "Tools & tokens for theming 3MO components & applications.",
@@ -5,0 +5,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77993

increased by1.09%

Lines of code

268

increased by3.47%

No dependency changes