@3mo/theme - npm Package Compare versions

Comparing version 0.0.20 to 0.1.0

dist/Accent.d.ts

 import { LocalStorage } from '@a11d/local-storage';
 import { Color } from '@3mo/color';
-import { ColorSet } from './ColorSet.js';
-export declare class AccentStorage extends LocalStorage<Color | ColorSet | undefined> {
+export declare class AccentStorage extends LocalStorage<Color | undefined> {
     private styleElement?;
     constructor();
-    get value(): Color | ColorSet | undefined;
-    set value(value: Color | ColorSet | undefined);
-    private parseColor;
-    private parseColorSet;
-    get medianColor(): Color | undefined;
+    get value(): Color | undefined;
+    set value(value: Color | undefined);
     injectCss(): void;
@@ -13,0 +9,0 @@ private get onAccentColorBase();

dist/Accent.js

@@ -5,59 +5,35 @@ import { css, isServer, unsafeCSS } from '@a11d/lit';
 import { Color } from '@3mo/color';
-import { ColorSet } from './ColorSet.js';
 export class AccentStorage extends LocalStorage {
     constructor() {
         super('Theme.Accent', new Color('rgb(0, 119, 200)'));
-        this.parseColor = (value) => {
-            if (typeof value === 'object' && value !== null && '$type' in value && value.$type === 'Color' && 'color' in value) {
-                return new Color(value.color);
-            }
-            return undefined;
-        };
-        this.parseColorSet = (value) => {
-            if (typeof value === 'object' && value !== null && '$type' in value && value.$type === 'ColorSet' && 'colors' in value) {
-                return new ColorSet(...value.colors.map(c => c.color));
-            }
-            return undefined;
-        };
         this.injectCss();
     }
     get value() {
-        let value = super.value;
-        value = this.parseColor(value) || this.parseColorSet(value);
+        const value = super.value;
+        const color = typeof value === 'object' && value !== null && 'color' in value
+            ? new Color(value.color)
+            : undefined;
         if (!isServer && !value) {
             window.localStorage.removeItem(this.name);
         }
-        return value || this.defaultValue;
+        return color || this.defaultValue;
     }
     set value(value) {
-        value['$type'] = value instanceof ColorSet ? 'ColorSet' : 'Color';
         super.value = value;
         this.injectCss();
     }
-    get medianColor() {
-        return this.value instanceof ColorSet ? this.value.medianColor : this.value;
-    }
     injectCss() {
-        const value = this.value;
-        const medianColor = this.medianColor;
-        const firstColor = value instanceof ColorSet ? value.colors[0] : value;
-        const secondColor = value instanceof ColorSet ? value.colors[1] : value;
-        const thirdColor = value instanceof ColorSet ? value.colors[2] : value;
         this.styleElement = RootCssInjector.inject(css `
 				:root {
-					--mo-color-accent-base-r:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.r)};
-					--mo-color-accent-base-g:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.g)};
-					--mo-color-accent-base-b:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.b)};
-					--mo-color-accent-gradient-1: ${unsafeCSS(firstColor === null || firstColor === void 0 ? void 0 : firstColor.rgb)};
-					--mo-color-accent-gradient-2: ${unsafeCSS(secondColor === null || secondColor === void 0 ? void 0 : secondColor.rgb)};
-					--mo-color-accent-gradient-3: ${unsafeCSS(thirdColor === null || thirdColor === void 0 ? void 0 : thirdColor.rgb)};
-					--mo-color-on-accent-base: ${unsafeCSS(this.onAccentColorBase)};
+					--mo-color-accent: ${unsafeCSS(this.value?.rgb)};
+					--mo-color-on-accent: rgb(${unsafeCSS(this.onAccentColorBase)});
 				}
 			`, this.styleElement);
     }
+    /* TODO: Replace with @color-contrast when available: https://caniuse.com/mdn-css_types_color_color-contrast */
     get onAccentColorBase() {
-        if (!this.medianColor) {
+        if (!this.value) {
             return '0 0 0';
         }
-        const { r, g, b } = this.medianColor;
+        const { r, g, b } = this.value;
         const sum = Math.round((r * 299 + g * 587 + b * 114) / 1000);
@@ -64,0 +40,0 @@ return sum > 128 ? '0 0 0' : '255 255 255';

dist/index.d.ts

@@ -1,2 +0,1 @@
-export * from './ColorSet.js';
 export * from './Background.js';
@@ -3,0 +2,0 @@ export * from './Accent.js';

dist/index.js

@@ -1,2 +0,1 @@
-export * from './ColorSet.js';
 export * from './Background.js';
@@ -3,0 +2,0 @@ export * from './Accent.js';

dist/styles.css.js

@@ -6,9 +6,6 @@ import { css } from '@a11d/lit';
 		color-scheme: light;
-		--mo-color-background-base: 255, 255, 255;
-		--mo-color-foreground-base: 0, 0, 0;
-		--mo-color-background: rgb(220, 221, 225);
 		--mo-color-foreground: black;
-		--mo-color-foreground-transparent: rgb(48, 48, 48);
-		--mo-color-surface-base: 255, 255, 255;
-		--mo-color-gray-base: 121, 121, 121;
+		--mo-color-background: color-mix(in srgb, rgb(220, 220, 220), var(--mo-color-accent) var(--mo-color-background-leak-percent, 14%));
+		--mo-color-gray: rgb(121, 121, 121);
+		--mo-color-surface: color-mix(in srgb, white, var(--mo-color-accent) var(--mo-color-surface-leak-percent, 6%));
 		--mo-shadow-base: 95, 81, 78;
@@ -19,9 +16,6 @@ }
 		color-scheme: dark;
-		--mo-color-background-base: 0, 0, 0;
-		--mo-color-foreground-base: 255, 255, 255;
-		--mo-color-background: rgb(16, 17, 20);
-		--mo-color-surface-base: 42, 43, 47;
 		--mo-color-foreground: white;
-		--mo-color-foreground-transparent: rgb(220, 220, 220);
-		--mo-color-gray-base: 165, 165, 165;
+		--mo-color-background: color-mix(in srgb, rgb(12, 13, 17), var(--mo-color-accent) var(--mo-color-background-leak-percent, 4%));
+		--mo-color-gray: rgb(165, 165, 165);
+		--mo-color-surface: color-mix(in srgb, rgb(27, 28, 32), var(--mo-color-accent) var(--mo-color-surface-leak-percent, 8%));
 		--mo-shadow-base: 0, 1, 3;
@@ -33,32 +27,21 @@ }
 		--mo-border-radius: 4px;
+
 		/* Shadows */
 		--mo-shadow: rgba(var(--mo-shadow-base), .4) 0 1px 2px 0, rgba(var(--mo-shadow-base), .2) 0 1px 3px 1px;
 		--mo-shadow-deep: 0px 5px 5px -3px rgba(var(--mo-shadow-base), 0.2), 0px 8px 10px 1px rgba(var(--mo-shadow-base), 0.14), 0px 3px 14px 2px rgba(var(--mo-shadow-base), 0.12);
+
 		/* Colors */
-		--mo-color-on-surface: rgba(var(--mo-color-foreground-base), 0.87);
-		--mo-color-gray: rgb(var(--mo-color-gray-base));
-		--mo-color-gray-transparent: rgba(var(--mo-color-gray-base), 0.5);
-		--mo-color-transparent-gray-alpha: .04;
-		--mo-color-transparent-gray-1: rgba(var(--mo-color-foreground-base), calc(var(--mo-color-transparent-gray-alpha) * 1)); /* 4% */
-		--mo-color-transparent-gray-2: rgba(var(--mo-color-foreground-base), calc(var(--mo-color-transparent-gray-alpha) * 2)); /* 8% */
-		--mo-color-transparent-gray-3: rgba(var(--mo-color-foreground-base), calc(var(--mo-color-transparent-gray-alpha) * 3)); /* 12% */
+		--mo-color-on-surface: color-mix(in srgb, var(--mo-color-foreground), transparent 13%);
+		--mo-color-gray-transparent: color-mix(in srgb, var(--mo-color-gray), transparent 50%);
+		--mo-color-transparent-gray-alpha: 4%;
+		--mo-color-transparent-gray-1: color-mix(in srgb, var(--mo-color-foreground), transparent calc(100% - var(--mo-color-transparent-gray-alpha) * 1)); /* 4% */
+		--mo-color-transparent-gray-2: color-mix(in srgb, var(--mo-color-foreground), transparent calc(100% - var(--mo-color-transparent-gray-alpha) * 2)); /* 8% */
+		--mo-color-transparent-gray-3: color-mix(in srgb, var(--mo-color-foreground), transparent calc(100% - var(--mo-color-transparent-gray-alpha) * 3)); /* 12% */
 		--mo-color-transparent-gray: var(--mo-color-transparent-gray-1);
-		--mo-color-green-base : 93, 170, 96;
-		--mo-color-green: rgb(var(--mo-color-green-base));
-		--mo-color-yellow-base: 232, 152, 35;
-		--mo-color-yellow: rgb(var(--mo-color-yellow-base));
-		--mo-color-red-base: 221, 61, 49;
-		--mo-color-red: rgb(var(--mo-color-red-base));
-		--mo-color-blue-base: 0, 119, 200;
-		/* TODO: Replace with @color-contrast when available: https://caniuse.com/mdn-css_types_color_color-contrast */
-		/* 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));
-		--mo-color-accent-base: var(--mo-color-accent-base-r), var(--mo-color-accent-base-g), var(--mo-color-accent-base-b);
-		--mo-color-accent: rgb(var(--mo-color-accent-base));
-		--mo-color-accent-transparent: rgba(var(--mo-color-accent-base), 0.25);
-		--mo-color-accent-gradient: linear-gradient(135deg, rgb(var(--mo-color-accent-gradient-1)), rgb(var(--mo-color-accent-gradient-2)), rgb(var(--mo-color-accent-gradient-3)));
-		--mo-color-accent-gradient-transparent: linear-gradient(135deg, rgba(var(--mo-color-accent-gradient-1), 0.25), rgba(var(--mo-color-accent-gradient-2), 0.25), rgba(var(--mo-color-accent-gradient-3), 0.25));
-		--mo-color-surface: rgb(var(--mo-color-surface-base));
+		--mo-color-green: rgb(93, 170, 96);
+		--mo-color-yellow: rgb(232, 152, 35);
+		--mo-color-red: rgb(221, 61, 49);
+		--mo-color-blue: rgb(0, 119, 200);
+		--mo-color-accent-transparent: color-mix(in srgb, var(--mo-color-accent), transparent 75%);
+
 		/* Override Material Web Components variables */
@@ -73,5 +56,5 @@ --mdc-icon-font: Material Icons Sharp !important;
 		--mdc-theme-text-primary-on-dark: var(--mo-color-surface) !important;
-		--mdc-theme-on-surface: var(--mo-color-foreground-transparent) !important;
+		--mdc-theme-on-surface: color-mix(in srgb, var(--mo-color-foreground), transparent 16%) !important;
 		--mdc-theme-text-disabled-on-light: var(--mo-color-gray-transparent) !important;
-		--mdc-theme-text-hint-on-background: var(--mo-color-foreground-transparent) !important;
+		--mdc-theme-text-hint-on-background: color-mix(in srgb, var(--mo-color-foreground), transparent 16%) !important;
 		--mdc-theme-text-icon-on-background: var(--mo-color-gray) !important;
@@ -78,0 +61,0 @@ --mdc-theme-text-primary-on-background: var(--mo-color-foreground) !important;

dist/Theme.d.ts

@@ -12,2 +12,5 @@ import { BackgroundStorage } from './Background.js';
 }
+declare global {
+    var Theme: typeof import('./Theme.js').Theme;
+}
 //# sourceMappingURL=Theme.d.ts.map

dist/Theme.js

@@ -12,1 +12,2 @@ import { BackgroundStorage } from './Background.js';
 Theme.accent = new AccentStorage;
+globalThis.Theme = Theme;

package.json

 {
 	"name": "@3mo/theme",
-	"version": "0.0.20",
+	"version": "0.1.0",
 	"description": "Tools & tokens for theming 3MO components & applications.",
@@ -20,2 +20,3 @@ "repository": {
 	"types": "dist/index.d.ts",
+	"customElements": "dist/custom-elements.json",
 	"files": [
@@ -22,0 +23,0 @@ "dist"

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

77689

decreased by-8.6%

Number of package files

20

decreased by-16.67%

Lines of code

224

decreased by-22.76%

Number of medium quality alerts

7

increased by16.67%

Number of lines in readme file

0

decreased by-100%

No dependency changes